/* ============================================================================ CraftBox Mobile/Desktop separation — shared styles (Phase 2, 2026-05-11) Below 1024px: hide React-rendered desktop sections and reveal the .cb-mobile-only block (injected by /cb-mobile-injector.js into ). The React DOM is not restructured, so this survives hydration. ============================================================================ */ /* ---- Show/hide rules ---- */ .cb-mobile-only { display: none; } @media (min-width: 1024px) { .cb-mobile-only { display: none !important; } } @media (max-width: 1023px) { /* Hide React-controlled desktop page content + footer (header stays for nav). */ body > main > div > main, body > main > div.footer-trigger { display: none !important; } /* Show mobile blocks */ .cb-mobile-only { display: block !important; } /* Hide the "Sign in" pill on mobile — matches the homepage (login is reachable from the hamburger menu). The homepage hides it via landing/mobile.css; the sub-pages use this file, so mirror the rule here. */ header #login-pill { display: none !important; } /* Messenger floating button — smaller, label hidden, doesn't cover content. */ #craftbox-msg-btn { padding: 9px 11px !important; bottom: 14px !important; right: 14px !important; gap: 0 !important; } #craftbox-msg-btn span { display: none !important; } #craftbox-msg-btn svg { width: 24px !important; height: 24px !important; } } /* ---- Mobile root ---- */ .cb-m-root { position: relative; z-index: 5; padding-top: 88px; padding-bottom: 80px; background: radial-gradient(ellipse at 30% 20%, #F9F0D8 0%, #F1E7C4 40%, #DDE0C0 75%, #C8D4A8 100%); min-height: 100vh; overflow-x: hidden; font-family: 'SS GEO HAKUNA', 'Manrope', system-ui, sans-serif; } .cb-m-root *, .cb-m-root *:before, .cb-m-root *:after { box-sizing: border-box; } /* ---- Hero ---- */ .cb-m-hero { padding: 16px 22px 32px; text-align: center; } .cb-m-h1 { font-size: 2.4rem; line-height: 1.05; font-weight: 800; color: #212121; text-transform: uppercase; margin: 0 0 18px; letter-spacing: -0.01em; } .cb-m-h1 span { display: block; } .cb-m-h1 .cb-m-h1-accent { color: #6b3eb7; font-size: 0.7em; margin-top: 6px; } .cb-m-tagline { font-size: 1.05rem; color: #3a2e4a; line-height: 1.45; margin: 0 0 26px; } .cb-m-hero-img { width: 78%; max-width: 320px; height: auto; margin: 0 auto 24px; display: block; filter: drop-shadow(0 6px 16px rgba(75, 40, 110, 0.18)); } .cb-m-cta { display: inline-flex; align-items: center; justify-content: center; background: #CFE372; color: #212121; font-size: 1rem; font-weight: 700; padding: 14px 36px; border: 4px solid #CFE372; border-radius: 9999px; text-decoration: none; transition: background .2s, transform .2s, border-color .2s; min-height: 44px; } .cb-m-cta:active { transform: scale(.96); background: #B8CC58; border-color: #B8CC58; } /* ---- Welcome ---- */ .cb-m-welcome { padding: 36px 22px 28px; text-align: center; } .cb-m-h2 { font-size: 1.875rem; line-height: 1.18; color: #6b3eb7; margin: 0 0 14px; font-weight: 700; } .cb-m-paragraph { font-size: 1rem; color: #212121; line-height: 1.55; margin: 0; } /* ---- Feature list (about page, etc.) ---- */ .cb-m-feature-list { padding: 24px 22px; list-style: none; margin: 0; } .cb-m-feature-list li { background: rgba(255,255,255,0.55); border-radius: 18px; padding: 18px 18px; margin-bottom: 12px; border-left: 4px solid #6b3eb7; } .cb-m-feature-list li h3 { font-size: 1.1rem; font-weight: 700; color: #4f297a; margin: 0 0 6px; } .cb-m-feature-list li p { font-size: 0.95rem; color: #3a2e4a; line-height: 1.45; margin: 0; } /* ---- Collections — 1 column, full-width cards ---- */ .cb-m-collections { padding: 28px 22px 12px; } .cb-m-pre-heading { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #4a3d52; text-align: center; margin: 0 0 12px; font-weight: 600; } .cb-m-collections-intro { font-size: 0.95rem; color: #3a2e4a; line-height: 1.5; text-align: center; margin: 0 auto 28px; max-width: 320px; } .cb-m-collection-card { display: flex; flex-direction: column; align-items: center; background-color: #FDE9F2; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 24px; padding: 22px 18px; margin: 14px 0; text-decoration: none; color: #212121; position: relative; overflow: hidden; min-height: 280px; transition: transform .2s ease-out, box-shadow .2s ease-out; box-shadow: 0 4px 16px rgba(75, 40, 110, 0.08); } .cb-m-collection-card:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(75, 40, 110, 0.12); } .cb-m-collection-card.cb-m-bg-pink { background-color: #FDE9F2; background-image: url("/images/home/collections/sugar-rush/%E1%83%96%E1%83%A6%E1%83%90%E1%83%9E%E1%83%90%E1%83%A0%E1%83%98%20%E1%83%91%E1%83%94%E1%83%A5%E1%83%98.png"); } .cb-m-collection-card.cb-m-bg-sour { background-color: #F8E9B0; background-image: url("/images/home/collections/sour-power/%E1%83%A4%E1%83%90%E1%83%96%E1%83%9A%E1%83%98%20%E1%83%91%E1%83%94%E1%83%A5%E1%83%98.png"); } .cb-m-collection-card.cb-m-bg-chocolate { background-color: #E8D2BC; background-image: url("/images/home/collections/cocoa-bliss/%E1%83%9B%E1%83%90%E1%83%98%E1%83%A1%E1%83%A3%E1%83%A0%E1%83%98%20%E1%83%91%E1%83%94%E1%83%A5%E1%83%98.png"); } .cb-m-collection-card.cb-m-bg-licorice { background-color: #3a2a3b; background-image: url("/images/home/collections/licorizz/sanati.png"); color: #fff; } .cb-m-collection-card.cb-m-bg-licorice .cb-m-card-desc { color: #f0e8f0; } .cb-m-card-title { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; margin: 0 0 8px; text-align: center; } .cb-m-card-desc { font-size: 0.95rem; line-height: 1.4; margin: 0 0 16px; text-align: center; max-width: 80%; } .cb-m-card-cta { display: inline-block; background: #CFE372; color: #212121; font-size: 0.95rem; font-weight: 700; padding: 10px 26px; border-radius: 9999px; } /* ---- Newsletter ---- */ .cb-m-newsletter { padding: 40px 22px 28px; text-align: center; } .cb-m-newsletter h2 { font-size: 1.5rem; color: #4f297a; margin: 0 0 12px; font-weight: 700; } .cb-m-newsletter p.cb-m-newsletter-intro { font-size: 0.95rem; color: #3a2e4a; line-height: 1.45; margin: 0 auto 20px; max-width: 320px; } .cb-m-newsletter form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; } .cb-m-newsletter input { width: 100%; padding: 13px 16px; border: 2px solid #4f297a; border-radius: 999px; font-size: 1rem; text-align: center; background: rgba(255,255,255,0.7); color: #4f297a; font-family: inherit; } .cb-m-newsletter input::placeholder { color: #6b4a8d; opacity: 0.7; } .cb-m-newsletter input:focus { outline: none; border-color: #6b3eb7; background: #fff; } .cb-m-newsletter button { background: #CFE372; color: #212121; font-weight: 700; padding: 13px; border: 4px solid #CFE372; border-radius: 999px; cursor: pointer; min-height: 44px; font-size: 1rem; font-family: inherit; transition: transform .15s; } .cb-m-newsletter button:active { transform: scale(.97); } .cb-m-newsletter-feedback { margin-top: 10px; font-size: 0.85rem; color: #4f297a; min-height: 1em; } /* ---- Contact card (contact page) ---- */ .cb-m-contact-card { background: rgba(255,255,255,0.65); border-radius: 18px; padding: 18px 22px; margin: 14px 22px; display: flex; flex-direction: column; gap: 4px; } .cb-m-contact-card .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b4a8d; font-weight: 600; } .cb-m-contact-card a, .cb-m-contact-card .value { font-size: 1.05rem; color: #212121; text-decoration: none; font-weight: 600; word-break: break-word; } .cb-m-contact-card a:active { color: #6b3eb7; } /* ---- Blog list (blog page) ---- */ .cb-m-blog-list { padding: 12px 22px 24px; } .cb-m-blog-post { display: block; background: rgba(255,255,255,0.65); border-radius: 18px; padding: 18px; margin-bottom: 14px; text-decoration: none; color: #212121; transition: transform .2s; } .cb-m-blog-post:active { transform: scale(.985); } .cb-m-blog-post h3 { font-size: 1.15rem; font-weight: 700; color: #4f297a; margin: 0 0 6px; } .cb-m-blog-post .meta { font-size: 0.8rem; color: #6b4a8d; margin-bottom: 8px; } .cb-m-blog-post p { font-size: 0.95rem; line-height: 1.4; margin: 0; color: #3a2e4a; } /* ---- Product card (shop page) ---- */ .cb-m-products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 22px; } .cb-m-product-card { display: block; background: rgba(255,255,255,0.7); border-radius: 16px; padding: 12px; text-decoration: none; color: #212121; transition: transform .2s; } .cb-m-product-card:active { transform: scale(.97); } .cb-m-product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 8px; } .cb-m-product-card .name { font-size: 0.9rem; font-weight: 700; margin: 0 0 4px; line-height: 1.2; } .cb-m-product-card .price { font-size: 0.85rem; color: #6b3eb7; font-weight: 600; } /* ---- Footer ---- */ .cb-m-footer { padding: 28px 22px 16px; text-align: center; font-size: 0.85rem; color: #4a3d52; border-top: 1px solid rgba(75, 40, 110, 0.1); margin-top: 16px; } .cb-m-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 18px; } .cb-m-footer nav a { color: #212121; text-decoration: none; font-weight: 600; font-size: 0.95rem; } .cb-m-footer nav a:active { color: #6b3eb7; } .cb-m-footer p { margin: 6px 0; } .cb-m-crafted-by { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; } .cb-m-crafted-by img { width: 72px; height: auto; } /* ---- Animations ---- */ @keyframes cb-m-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .cb-m-hero, .cb-m-welcome, .cb-m-feature-list, .cb-m-collections, .cb-m-newsletter, .cb-m-blog-list, .cb-m-products-grid, .cb-m-footer, .cb-m-contact-card { animation: cb-m-fade-up 0.55s ease-out backwards; } .cb-m-welcome { animation-delay: 0.12s; } .cb-m-feature-list, .cb-m-collections, .cb-m-blog-list, .cb-m-products-grid { animation-delay: 0.25s; } .cb-m-newsletter { animation-delay: 0.4s; } .cb-m-footer { animation-delay: 0.55s; } }