/* Theme Name: Mustard Seed Girl Theme URI: https://www.mustardseedgirl.com Description: Custom Blocksy child theme for Mustard Seed Girl. Reproduces the Orna / Swag jewelry-shop visual identity with $0 recurring fees. Author: PCMediaHost Author URI: https://pcmediahost.com Template: blocksy Version: 1.0.0 Text Domain: msg-orna-child */ /* ============================================================ 1. Design tokens ============================================================ */ :root { /* Palette derived from the MustardSeedGirl animated logo: mustard seed pod (gold) + galaxy interior (teal/purple) + fern wreath (green) + "Girl" wordmark (navy) on cream. */ --msg-cream: #faf6f0; --msg-cream-2: #f3ece1; --msg-gold: #a67c3e; --msg-gold-dark: #8a6a36; --msg-navy: #1f2540; --msg-navy-2: #2e3759; --msg-fern: #6b7d5a; --msg-fern-2: #4f5e42; --msg-galaxy: #5a4a7a; --msg-charcoal: #2a2724; --msg-muted: #6b655e; --msg-line: #e6dccb; --msg-white: #ffffff; /* Back-compat aliases — old code referenced --msg-blush; map it to navy so any leftover usages don't look broken. */ --msg-blush: var(--msg-navy); --msg-blush-2: var(--msg-gold); --msg-font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --msg-font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; --msg-radius: 2px; --msg-ease: cubic-bezier(0.22, 1, 0.36, 1); --msg-max: 1280px; } /* ============================================================ 2. Base typography & layout ============================================================ */ body, .entry-content { font-family: var(--msg-font-sans); color: var(--msg-charcoal); background: var(--msg-cream); font-size: 15px; line-height: 1.7; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .entry-title, .product_title, .woocommerce-loop-product__title { font-family: var(--msg-font-serif); color: var(--msg-charcoal); font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; } h1, .entry-title { font-size: clamp(2.25rem, 4vw, 3.5rem); } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); } p { margin: 0 0 1.25em; } a { color: var(--msg-charcoal); text-decoration: none; transition: color 0.25s var(--msg-ease); } a:hover { color: var(--msg-gold); } .msg-container, .ct-container { max-width: var(--msg-max); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } /* ============================================================ 2.5 Animated logo (video) ============================================================ */ .msg-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } .msg-logo__media { position: relative; display: block; width: clamp(140px, 22vw, 240px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--msg-radius); } .msg-logo__video, .msg-logo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* Poster fades out once the video is playing — keeps initial paint instant. */ .msg-logo__img { z-index: 1; transition: opacity 0.4s var(--msg-ease); } .msg-logo.is-playing .msg-logo__img { opacity: 0; } /* Shrink the logo when the sticky header is in compact mode. */ .ct-header.is-scrolled .msg-logo__media, header[data-row].is-scrolled .msg-logo__media { width: clamp(110px, 16vw, 170px); transition: width 0.3s var(--msg-ease); } /* Hide Blocksy's default text/image logo if we're overriding via shortcode so they don't render side-by-side. Add class `has-msg-video-logo` to from functions.php when our logo is active. */ body.has-msg-video-logo .ct-header-cta-image, body.has-msg-video-logo .ct-header-cta-text, body.has-msg-video-logo .site-logo-container .default-logo, body.has-msg-video-logo .site-logo-container .transparent-logo { display: none !important; } /* ============================================================ 3. Header ============================================================ */ header[data-row], .ct-header { background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s var(--msg-ease), border-color 0.3s var(--msg-ease), padding 0.3s var(--msg-ease); } body:not(.home) header[data-row], .ct-header.is-sticky, .ct-header.is-scrolled { background: var(--msg-cream); border-bottom: 1px solid var(--msg-line); } .ct-header [class*="logo"] img { max-height: 56px; transition: max-height 0.3s var(--msg-ease); } .ct-header.is-scrolled [class*="logo"] img { max-height: 40px; } /* Nav links — uppercase, spaced */ .ct-header .menu li a, nav .menu li a { font-family: var(--msg-font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } /* Cart icon badge */ .msg-cart-toggle { position: relative; display: inline-flex; align-items: center; padding: 8px; } .msg-cart-count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--msg-gold); color: var(--msg-white); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; } /* ============================================================ 4. Buttons ============================================================ */ .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page button.button.alt, .msg-btn { display: inline-block; padding: 14px 32px; background: var(--msg-charcoal); color: var(--msg-white) !important; font-family: var(--msg-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--msg-charcoal); border-radius: var(--msg-radius); cursor: pointer; transition: all 0.3s var(--msg-ease); } .button:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .msg-btn:hover { background: var(--msg-gold); border-color: var(--msg-gold); color: var(--msg-white) !important; } .msg-btn--ghost { background: transparent; color: var(--msg-charcoal) !important; border-color: var(--msg-charcoal); } .msg-btn--ghost:hover { background: var(--msg-charcoal); color: var(--msg-white) !important; } /* ============================================================ 5. Hero ============================================================ */ .msg-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; background: var(--msg-cream-2); overflow: hidden; } .msg-hero__media { position: absolute; inset: 0; } .msg-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .msg-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)); } .msg-hero__inner { position: relative; z-index: 2; text-align: center; color: var(--msg-white); padding: 4rem 1.5rem; max-width: 760px; } .msg-hero__eyebrow { font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1.25rem; } .msg-hero__title { color: var(--msg-white); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; margin-bottom: 1.5rem; } .msg-hero__lede { font-size: 1.05rem; opacity: 0.92; margin-bottom: 2.25rem; } /* ============================================================ 6. Section primitives ============================================================ */ .msg-section { padding: clamp(4rem, 8vw, 7rem) 0; } .msg-section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; } .msg-section--cream-2 { background: var(--msg-cream-2); } .msg-section--white { background: var(--msg-white); } .msg-section__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .msg-section__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--msg-gold); margin-bottom: 0.75rem; } .msg-section__title { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1rem; } .msg-section__lede { color: var(--msg-muted); } /* ============================================================ 7. Product card (loop) — hover-swap second image ============================================================ */ ul.products, .msg-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; padding: 0; margin: 0; } ul.products li.product, .msg-card { position: relative; background: transparent; text-align: center; } .msg-card__media, ul.products li.product a.woocommerce-LoopProduct-link { position: relative; display: block; overflow: hidden; background: var(--msg-cream-2); aspect-ratio: 4 / 5; border-radius: var(--msg-radius); } ul.products li.product .msg-card__img, ul.products li.product img, .msg-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--msg-ease), opacity 0.5s var(--msg-ease); } .msg-card__img--alt { position: absolute; inset: 0; opacity: 0; } .msg-card:hover .msg-card__img--primary, ul.products li.product:hover img:first-of-type { transform: scale(1.04); } .msg-card:hover .msg-card__img--alt { opacity: 1; } ul.products li.product .woocommerce-loop-product__title, .msg-card__title { font-size: 1.05rem; font-weight: 500; margin: 1rem 0 0.35rem; letter-spacing: 0.02em; } ul.products li.product .price, .msg-card__price { display: block; font-family: var(--msg-font-sans); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--msg-muted); } ul.products li.product .price ins { text-decoration: none; color: var(--msg-gold); margin-left: 0.5rem; } ul.products li.product .price del { opacity: 0.55; margin-right: 0.5rem; } /* Sale badge */ ul.products li.product .onsale, .msg-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--msg-charcoal); color: var(--msg-white); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--msg-radius); border: 0; min-width: 0; min-height: 0; line-height: 1; } /* Quick-view button (revealed on hover) */ .msg-card__quickview { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; background: var(--msg-white); color: var(--msg-charcoal); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 18px; border-radius: var(--msg-radius); transition: opacity 0.3s var(--msg-ease), transform 0.3s var(--msg-ease); cursor: pointer; border: 0; } .msg-card:hover .msg-card__quickview { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } /* ============================================================ 8. Single product ============================================================ */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); max-width: var(--msg-max); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem); } @media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; } } .single-product .woocommerce-product-gallery { position: relative; } .single-product .woocommerce-product-gallery .flex-viewport { border-radius: var(--msg-radius); background: var(--msg-cream-2); } .single-product .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.75rem; padding: 0; list-style: none; } .single-product .woocommerce-product-gallery .flex-control-thumbs li img { cursor: pointer; opacity: 0.6; transition: opacity 0.2s var(--msg-ease); border-radius: var(--msg-radius); } .single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 1; } .single-product .summary { position: sticky; top: 100px; align-self: start; } .single-product .product_title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.5rem; } .single-product .price { font-family: var(--msg-font-sans); font-size: 1rem; letter-spacing: 0.06em; color: var(--msg-charcoal); margin-bottom: 1.5rem; } .single-product .woocommerce-product-details__short-description { color: var(--msg-muted); font-size: 0.95rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--msg-line); margin-bottom: 1.5rem; } .single-product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 2rem; } .single-product .quantity input.qty { width: 70px; height: 50px; padding: 0 10px; border: 1px solid var(--msg-line); background: var(--msg-white); border-radius: var(--msg-radius); text-align: center; font-family: var(--msg-font-sans); } .single-product .single_add_to_cart_button { flex: 1 1 auto; min-width: 200px; padding: 16px 28px; } /* Description accordion */ .msg-accordion { border-top: 1px solid var(--msg-line); } .msg-accordion__item { border-bottom: 1px solid var(--msg-line); } .msg-accordion__head { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 1.1rem 0; background: transparent; border: 0; cursor: pointer; font-family: var(--msg-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--msg-charcoal); } .msg-accordion__head::after { content: "+"; font-size: 18px; font-weight: 300; transition: transform 0.3s var(--msg-ease); } .msg-accordion__item.is-open .msg-accordion__head::after { content: "–"; } .msg-accordion__body { display: none; padding: 0 0 1.25rem; color: var(--msg-muted); font-size: 0.95rem; } .msg-accordion__item.is-open .msg-accordion__body { display: block; } /* ============================================================ 9. Story strip ============================================================ */ .msg-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: var(--msg-max); margin: 0 auto; padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 2.5rem); } @media (max-width: 800px) { .msg-story { grid-template-columns: 1fr; } } .msg-story__media img { width: 100%; height: auto; border-radius: var(--msg-radius); display: block; } .msg-story__copy h2 { margin-bottom: 1.25rem; } .msg-story__copy p { color: var(--msg-muted); margin-bottom: 1.75rem; } /* ============================================================ 10. Lookbook grid (3-up asymmetric) ============================================================ */ .msg-lookbook { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; grid-auto-rows: minmax(260px, auto); gap: 1rem; max-width: var(--msg-max); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .msg-lookbook a { position: relative; display: block; overflow: hidden; border-radius: var(--msg-radius); background: var(--msg-cream-2); } .msg-lookbook a:nth-child(1) { grid-row: span 2; } .msg-lookbook img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--msg-ease); } .msg-lookbook a:hover img { transform: scale(1.05); } .msg-lookbook__label { position: absolute; inset: auto 0 0 0; padding: 1.25rem; color: var(--msg-white); font-family: var(--msg-font-serif); font-size: 1.35rem; text-shadow: 0 1px 12px rgba(0,0,0,0.4); } @media (max-width: 800px) { .msg-lookbook { grid-template-columns: 1fr 1fr; } .msg-lookbook a:nth-child(1) { grid-row: auto; grid-column: span 2; } } /* ============================================================ 11. Instagram strip ============================================================ */ .msg-instagram { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; } .msg-instagram a { aspect-ratio: 1 / 1; overflow: hidden; position: relative; } .msg-instagram img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--msg-ease), filter 0.3s var(--msg-ease); } .msg-instagram a:hover img { transform: scale(1.06); filter: brightness(0.85); } @media (max-width: 800px) { .msg-instagram { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ 12. Newsletter ============================================================ */ .msg-newsletter { background: var(--msg-cream-2); text-align: center; padding: clamp(3rem, 6vw, 5rem) 1.5rem; } .msg-newsletter h2 { margin-bottom: 0.75rem; } .msg-newsletter p { color: var(--msg-muted); margin-bottom: 1.75rem; } .msg-newsletter form { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; } .msg-newsletter input[type="email"] { flex: 1; padding: 14px 16px; border: 1px solid var(--msg-line); background: var(--msg-white); font-family: var(--msg-font-sans); font-size: 0.95rem; border-radius: var(--msg-radius); } .msg-newsletter input[type="email"]:focus { outline: none; border-color: var(--msg-gold); } /* ============================================================ 13. Cart drawer (slide-out) ============================================================ */ .msg-cart-drawer { position: fixed; top: 0; right: 0; width: min(420px, 100%); height: 100vh; background: var(--msg-white); z-index: 9999; transform: translateX(100%); transition: transform 0.4s var(--msg-ease); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,0.08); } .msg-cart-drawer.is-open { transform: translateX(0); } .msg-cart-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--msg-ease); } .msg-cart-backdrop.is-open { opacity: 1; pointer-events: auto; } .msg-cart-drawer__head { padding: 1.5rem; border-bottom: 1px solid var(--msg-line); display: flex; justify-content: space-between; align-items: center; } .msg-cart-drawer__head h3 { margin: 0; font-size: 1.25rem; } .msg-cart-drawer__close { background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--msg-charcoal); } .msg-cart-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; } .msg-cart-drawer__foot { padding: 1.5rem; border-top: 1px solid var(--msg-line); } /* ============================================================ 13.5 AI chat widget — "Ask Mustard Seed" ============================================================ */ .msg-chat-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 9990; display: inline-flex; align-items: center; gap: 0.6rem; padding: 14px 18px 14px 14px; border: 0; border-radius: 999px; background: var(--msg-navy); color: var(--msg-cream); cursor: pointer; font-family: var(--msg-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(31, 37, 64, 0.28); transition: transform 0.25s var(--msg-ease), background 0.25s var(--msg-ease), box-shadow 0.25s var(--msg-ease); } .msg-chat-fab:hover { background: var(--msg-gold); color: var(--msg-white); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(166, 124, 62, 0.32); } .msg-chat-fab__label { white-space: nowrap; } @media (max-width: 600px) { .msg-chat-fab__label { display: none; } .msg-chat-fab { padding: 14px; } } .msg-chat-panel { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(82px, 9vw, 96px); z-index: 9991; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px)); background: var(--msg-white); border-radius: 8px; box-shadow: 0 24px 60px rgba(31, 37, 64, 0.22); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: msg-chat-pop 0.28s var(--msg-ease); } .msg-chat-panel[hidden] { display: none; } @keyframes msg-chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .msg-chat-panel__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--msg-line); background: var(--msg-cream); } .msg-chat-panel__head h3 { margin: 0 0 0.15rem; font-family: var(--msg-font-serif); font-size: 1.3rem; color: var(--msg-charcoal); } .msg-chat-panel__sub { margin: 0; font-size: 0.78rem; color: var(--msg-muted); line-height: 1.4; } .msg-chat-panel__close { background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--msg-charcoal); cursor: pointer; margin-left: 0.5rem; } .msg-chat-panel__form { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; gap: 0.6rem; overflow-y: auto; } .msg-chat-panel__label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--msg-muted); margin-top: 0.25rem; } .msg-chat-panel input[type="email"], .msg-chat-panel textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--msg-line); border-radius: var(--msg-radius); font-family: var(--msg-font-sans); font-size: 0.92rem; background: var(--msg-white); resize: vertical; } .msg-chat-panel input:focus, .msg-chat-panel textarea:focus { outline: none; border-color: var(--msg-gold); } .msg-chat-panel__send { margin-top: 0.5rem; align-self: stretch; } .msg-chat-panel__status { margin: 0.5rem 0 0; font-size: 0.82rem; min-height: 1.2em; } .msg-chat-panel__status.is-error { color: #b32a2a; } .msg-chat-panel__status.is-success { color: var(--msg-fern-2); } /* ============================================================ 13.6 Footer credit (in addition to / replacing Blocksy's) ============================================================ */ .msg-footer-credit { text-align: center; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--msg-cream); padding: 1.1rem 1rem 1.5rem; background: var(--msg-charcoal); opacity: 0.85; } .msg-footer-credit a { color: var(--msg-gold); text-decoration: none; } .msg-footer-credit a:hover { color: var(--msg-cream); } /* Hide Blocksy's built-in copyright row — we render the credit ourselves at the very bottom of via .msg-footer-credit. Targeting the actual class Blocksy uses, plus the row wrapper so we don't leave an empty bar. */ .ct-footer-copyright, [data-row="copyright"], .ct-footer [data-row*="copyright"] { display: none !important; } /* ============================================================ 14. Footer ============================================================ */ .ct-footer, footer[data-row] { background: var(--msg-charcoal); color: var(--msg-cream); padding-top: 4rem; padding-bottom: 2rem; } .ct-footer a, footer[data-row] a { color: var(--msg-cream); } .ct-footer a:hover, footer[data-row] a:hover { color: var(--msg-blush); } /* ============================================================ 15. Utilities ============================================================ */ .msg-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--msg-gold); } .msg-text-center { text-align: center; } .msg-mt-0 { margin-top: 0 !important; } .msg-mb-0 { margin-bottom: 0 !important; } .msg-divider { height: 1px; background: var(--msg-line); margin: 3rem 0; border: 0; } /* Hide noisy WooCommerce defaults that don't fit the aesthetic */ .woocommerce-breadcrumb { display: none; } .woocommerce-result-count { color: var(--msg-muted); font-size: 0.85rem; } .woocommerce-ordering select { border: 1px solid var(--msg-line); background: var(--msg-white); padding: 10px 14px; font-family: var(--msg-font-sans); font-size: 0.85rem; border-radius: var(--msg-radius); }