/* ========================================================================= MÔRA-inspired design refresh for Flatsome Reference: https://morastore.ma/ (Cormorant + Montserrat, ink/white, pill buttons, sharp product cards, generous whitespace, zero clutter) Added by Claude — safe to delete this file + its enqueue in functions.php to fully revert to stock Flatsome. ========================================================================= */ /* ---- 1. Palette + variables -------------------------------------------- Flatsome reads its own colors from --fs-color-* / --primary-color at :root, generated inline from Customizer settings. We redeclare them with !important so this file wins regardless of load order, which means every existing Flatsome rule that already does background:var(--fs-color-primary) etc. picks up the new palette automatically — no need to hunt down every selector. */ :root { /* Retuned by Claude from the marouat.atelier Instagram logo (pixel- sampled: a terracotta/rust badge, ~#8e4034, with cream lettering) — replaces the earlier cool black/white morastore.ma-inspired set so the site reads as this brand's own colors, not a generic copy. */ --mora-ink: #2a211d; /* warm umber-black text, tuned to sit with the rust accent */ --mora-ink-soft: rgba(42, 33, 29, .75); --mora-muted: #7a6b62; /* warm taupe, matches the earthy tones across their product photos */ --mora-hairline: rgba(42, 33, 29, .12); --mora-paper: #faf7f4; /* warm cream instead of stark white */ --mora-rust: #8e4034; /* sampled straight from the Instagram logo badge */ --mora-rust-dark: #72332a; /* rust, ~20% darker, for hover/pressed states */ --primary-color: var(--mora-rust) !important; --fs-color-primary: var(--mora-rust) !important; --fs-color-secondary: var(--mora-ink) !important; --fs-color-base: #3a2f2a !important; --fs-experimental-link-color: var(--mora-ink) !important; --fs-experimental-link-color-hover: var(--mora-rust) !important; } /* ---- 2. Base typography -------------------------------------------------- Cormorant for display/headings (elegant serif), Montserrat for everything else (clean geometric sans) — the same pairing the reference site uses. Fonts are enqueued from functions.php. */ body { font-family: 'Montserrat', -apple-system, Helvetica, Arial, sans-serif !important; color: var(--mora-ink-soft); letter-spacing: .3px; } h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a { font-family: 'Cormorant', Georgia, 'Times New Roman', serif !important; font-weight: 500; letter-spacing: .3px; color: var(--mora-ink); } h1, .h1 { font-weight: 500; } /* Small uppercase labels (section titles, "Sélection MÔRA"-style tags) — Flatsome uses .alt-font / .uppercase in a few builder elements. */ .uppercase, .text-uppercase { letter-spacing: 1.5px; } p { color: var(--mora-ink-soft); } a { color: var(--mora-ink); transition: color .2s ease, opacity .2s ease; } a:hover { color: #000; } /* ---- 3. Buttons ----------------------------------------------------------- Pill-shaped, ink-on-white (or white-on-ink), letter-spaced, flat — no shadows, no gradients. Covers Flatsome's own .button class plus the raw WooCommerce button selectors so cart/checkout match too. */ .button, a.button, button.button, input[type="submit"], input[type="button"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .added_to_cart, .checkout-button { border-radius: 40px !important; background-color: var(--mora-rust); border-color: var(--mora-rust); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 1px; text-transform: none; box-shadow: none !important; padding-left: 1.9em; padding-right: 1.9em; } .button:hover, a.button:hover, button.button:hover, input[type="submit"]:hover, input[type="button"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: var(--mora-rust-dark); border-color: var(--mora-rust-dark); color: #fff; opacity: 1; } /* Outline / secondary buttons invert cleanly instead of using a second accent color — keeps the whole UI monochrome like the reference. */ .button.is-outline, .button.outline { background-color: transparent; border: 1px solid var(--mora-rust); color: var(--mora-rust); } .button.is-outline:hover, .button.outline:hover { background-color: var(--mora-rust); color: #fff; } /* ---- 4. Header ------------------------------------------------------------ Polish only — layout (centered logo, transparent-over-hero, etc.) is a Customizer choice under Appearance → Customize → Header, this just keeps whichever layout is picked looking calm and flat. */ #header, .header-wrapper { box-shadow: none !important; border-bottom: 1px solid var(--mora-hairline); } .header.is-sticky-section { box-shadow: 0 1px 0 var(--mora-hairline) !important; } .nav > li > a { font-family: 'Montserrat', sans-serif !important; font-weight: 500; font-size: 13px; letter-spacing: 1px; color: var(--mora-ink); } #logo a, #logo .logo { font-family: 'Cormorant', serif; letter-spacing: 2px; color: var(--mora-rust); } /* ---- 5. Product grid / cards --------------------------------------------- Flat, sharp-cornered cards with no drop shadow so the product photo carries the design — matches the reference's --product-card-corner -radius:0 / --product-card-shadow-opacity:0. */ .product-small.box { box-shadow: none !important; border: none; } .product-small.box .image-wrapper, .product-small.box img { border-radius: 0 !important; } .product-small .product-title, .product-small .name { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .3px; color: var(--mora-ink); } .product-small .price, .price { color: var(--mora-ink); font-weight: 500; letter-spacing: .5px; } .price del { color: var(--mora-muted); opacity: .7; } .price ins { color: var(--mora-ink); text-decoration: none; } /* Sale badge: swap the default bright circle for a quiet outline pill. */ .onsale { background-color: transparent !important; border: 1px solid var(--mora-rust) !important; color: var(--mora-rust) !important; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; box-shadow: none !important; } .star-rating { color: var(--mora-ink); } .star-rating::before { color: var(--mora-hairline); } /* ---- 6. Forms / inputs ----------------------------------------------------- Sharp corners, thin hairline borders — same restraint as the buttons. */ input:not([type="submit"]):not([type="button"]), select, textarea, .woocommerce table.shop_table { border-radius: 0 !important; border-color: var(--mora-hairline) !important; } input:focus, select:focus, textarea:focus { border-color: var(--mora-rust) !important; box-shadow: none !important; } /* ---- 7. Footer ------------------------------------------------------------- Lighter, quieter, more breathing room. */ #footer, .footer { background-color: var(--mora-paper); border-top: 1px solid var(--mora-hairline); color: var(--mora-muted); } #footer a, .footer a { color: var(--mora-ink); } #footer .footer-bottom, .footer .footer-bottom { border-top: 1px solid var(--mora-hairline); color: var(--mora-muted); font-size: 12px; letter-spacing: .5px; } /* ---- 8. Breathing room ------------------------------------------------------ A few global spacing bumps so sections don't feel cramped — the reference leans entirely on whitespace rather than dividers/boxes. */ #main > .container > .row, .section { padding-top: 1.25em; padding-bottom: 1.25em; } h1, h2, h3 { margin-bottom: .6em; } .product-small { margin-bottom: 2.2em; } /* ---- 9. Newsletter / contact forms (added by Claude) -------------------- Layout only — border/focus styling already comes from section 6 above. */ .mora-form-input { width: 100%; background: #fff; } .mora-newsletter-form .mora-form-row { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .mora-newsletter-form .mora-form-row input { flex: 1; width: 100%; } .mora-newsletter-form .mora-form-row button { width: 100%; } .mora-newsletter-form button, .mora-contact-form button { white-space: nowrap; } .mora-contact-form { max-width: 560px; } .mora-contact-form textarea.mora-form-input { resize: vertical; } .mora-form-msg { margin-top: 8px; font-size: 12px; color: var(--mora-ink); } /* ---- 10. Minimal header (added by Claude) -------------------------------- The reference site (morastore.ma) shows a hamburger + logo + icons only — no visible text navigation, no top announcement bar. Flatsome already ships an off-canvas menu icon in its markup (normally mobile-only); this hides the text nav + top bar and reveals that icon at every screen size instead, so the full menu still lives one click away. Delete this section to bring the text nav / top bar back. */ #header .header-top { display: none !important; } #header .header-nav-main.nav-left { display: none !important; } /* Collapse the now-empty desktop nav column itself, not just the text nav inside it. With "Logo position: Center" (Customizer > Header > Logo & Site Identity), Flatsome centers the logo by giving equal flex-grow width to the left-side and right-side header columns. Left as a normal block column, this now-content-less column still reserved ~293px of flex space alongside the hamburger column, which threw off that balance and pushed the logo right of true center. Removing it from layout entirely restores the left/right balance so the logo sits centered. */ #header .flex-col.hide-for-medium.flex-left { display: none !important; } #header .flex-col.show-for-medium.flex-left, #header .mobile-nav.nav-left { display: flex !important; } #header .flex-col.show-for-medium.flex-left { order: -1; } /* ---- 11. Lean sections (added by Claude) ---------------------------------- Plain text collection links (no boxes/images) and a quieter divider between them, to match the reference's typographic, low-chrome sections. */ .mora-collections-links a { font-family: 'Cormorant', Georgia, serif; font-size: 20px; } .mora-collections-links .sep { color: var(--mora-hairline); padding: 0 .5em; } /* ---- 12. Footer widget-area contrast fix (added by Claude) --------------- Flatsome's default footer widgets are styled for a DARK background (the theme adds class="dark", which sets near-white text #f1f1f1 and near-white icon borders) but section 7 above turns the footer background white/light to match the reference site. Left as-is, that combination is nearly invisible. This re-points the ".dark" scope specifically inside the (now-light) widget area to the ink palette. The bottom copyright bar (.absolute-footer) keeps its own real dark background + light text from Flatsome and is intentionally untouched here — it was already readable. */ .footer-widgets.dark, .footer-widgets.dark .row, .footer-widgets.dark p, .footer-widgets.dark li, .footer-widgets.dark label { color: var(--mora-ink-soft) !important; } .footer-widgets.dark .widget-title { color: var(--mora-ink) !important; font-family: 'Cormorant', Georgia, serif; font-size: 20px; letter-spacing: .5px; } .footer-widgets.dark a:not(.button) { color: var(--mora-ink) !important; } .footer-widgets.dark a:not(.button):hover { color: #000 !important; } .footer-widgets.dark .social-icons a { border-color: var(--mora-hairline) !important; } /* ---- 13. Taller product photos (added by Claude) -------------------------- Product photos are full-length shots of the clothes being worn, so the default square crop was cutting them off awkwardly. Forces every shop grid image into a taller portrait frame and crops to fill it (instead of squeezing/stretching), regardless of the source photo's own shape. 2:3 is a classic fashion-catalog portrait ratio; bumped up once already from an initial 3:4 at the user's request for "a bit taller" still. */ .product-small .box-image, .product-small .image-fade_in_back { aspect-ratio: 2 / 3; height: auto !important; } .product-small .box-image img { width: 100%; height: 100%; object-fit: cover; } /* ---- 14. Center the footer widget row (added by Claude) ------------------- The footer widget area is set up for a 4-column grid, but only "About Us" and "Newsletter" are filled in — so both columns hugged the left edge with a big dead gap on the right. Centering the row balances the two columns as a pair instead of stretching or hardcoding a column count, so it still looks right if a widget is ever added or removed. */ .footer-widgets.dark .row { justify-content: center; } /* ---- 15. Drop the card-payment icons (added by Claude) -------------------- Flatsome's built-in footer payment-icon strip (Visa/PayPal/Stripe/etc.) — removed since the store runs on cash on delivery, and showing card-network logos it doesn't actually support would be misleading. Delete this rule to bring the icons back (they're a Customizer toggle under Appearance -> Customize -> Footer, not deleted data). */ .payment-icons { display: none !important; } /* ---- 16. Single product gallery: big main photo, very small thumbnails (added by Claude) ----------------------------------------------------- Flatsome's product gallery (Flickity-powered) already lets a product carry as many images as needed and click/swipe-browse between them — this just restyles it to match the brief: a big main image (already near-full column width by default, untouched here) and noticeably smaller thumbnail tiles below it, with a little breathing room so they don't feel cramped. */ .product-thumbnails.thumbnails .col { width: 64px !important; max-width: 64px !important; padding-left: 4px !important; padding-right: 4px !important; } .product-thumbnails.thumbnails .col img { height: 64px; object-fit: cover; border-radius: 3px; } .product-thumbnails.thumbnails .col.is-nav-selected img { border-color: var(--mora-rust); } /* ---- 17. Variation swatches: size + color pickers (added by Claude) ------- Restyles WooCommerce's Size/Color is kept (just visually hidden via .mora-hidden-select) so WooCommerce's own variation logic is untouched; only the visible picker changes. Anything out of stock for the current selection is greyed out and not clickable. */ .mora-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; } .mora-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 6px; } .mora-swatch { appearance: none; background: none; cursor: pointer; padding: 0; margin: 0 !important; /* Flatsome puts a default 15px right/bottom margin on generic buttons -- our flex `gap` already spaces the swatches, so cancel that out. */ display: inline-flex; align-items: center; line-height: normal; } /* Size (and any other non-color attribute): plain text labels. */ .mora-swatch--text { border: none; font-size: 15px; color: var(--mora-muted); letter-spacing: .02em; padding: 4px 2px; transition: color .15s ease; } .mora-swatch--text.is-selected { color: var(--mora-ink); font-weight: 600; } .mora-swatch--text.is-disabled { color: #c9c2bc; text-decoration: line-through; cursor: not-allowed; } /* Color: filled circles, sized to the actual color. */ .mora-swatch--circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--mora-hairline); position: relative; } .mora-swatch--circle.is-selected { border-color: #fff; box-shadow: 0 0 0 1px var(--mora-rust), 0 0 0 3px var(--mora-rust); } .mora-swatch--circle.is-disabled { opacity: .35; cursor: not-allowed; } .mora-swatch--circle.is-disabled::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--mora-ink); transform: rotate(-45deg); } /* The label ("Size", "Color") grows to "Size : XXL" once something is picked -- lock the label column's width so that longer text wraps in place instead of squeezing the swatch column and wrapping IT instead (WooCommerce's variations table uses table-layout: auto by default, so any cell's content can otherwise resize every row's columns). */ .variations { table-layout: fixed; } .variations th.label { width: 96px; } /* ---- 18. Size + color preview on shop/category grid cards (added by Claude) ------------------------------------------------------- Renders what functions.php's woocommerce_after_shop_loop_item_title hook outputs for every variable product card -- available sizes as small text, available colors as small circles -- so shoppers can see what's on offer without opening the product. Anything out of stock is struck-through / dimmed, same convention as the product-page swatches. */ .mora-loop-variants { margin-top: 6px; } .mora-loop-sizes { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; letter-spacing: .02em; color: var(--mora-muted); margin-bottom: 5px; } .mora-loop-size.is-oos { text-decoration: line-through; opacity: .5; } .mora-loop-colors { display: flex; flex-wrap: wrap; gap: 5px; } .mora-loop-color { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--mora-hairline); position: relative; } .mora-loop-color.is-oos { opacity: .3; } .mora-loop-color.is-oos::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: var(--mora-ink); transform: rotate(-45deg); } /* 19. Top announcement bar: rotating delivery messages (one at a time) */ .mora-announcement-bar { background: var(--mora-rust); color: #fff; overflow: hidden; width: 100%; position: relative; } .mora-announcement-rotator { position: relative; height: 34px; } .mora-announcement-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateX(22px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; } .mora-announcement-item.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } .mora-announcement-item.is-leaving { opacity: 0; transform: translateX(-22px); } @media (max-width: 480px) { .mora-announcement-item { font-size: 10.5px; padding: 0 10px; letter-spacing: .03em; } } @media (prefers-reduced-motion: reduce) { .mora-announcement-item { transform: none; transition: opacity .5s ease; } .mora-announcement-item.is-leaving { transform: none; } } /* ---- 20. True edge-to-edge for "Full Width" rows (added by Claude) ------- This page's content is a single Custom HTML block, so Flatsome wraps the whole thing once in its own default boxed container (.row.row-main > .col > .col-inner, width = Site Width setting). A [row width="full-width"] only gets `max-width:100%`, which — nested inside that boxed column — means "100% of the boxed column", not "100% of the browser window". That's why full-width sections (hero, category tiles, Instagram grid) were topping out around ~1140-1860px instead of truly reaching the screen edges, whatever the Site Width was set to. This breaks .row-full-width out of ANY ancestor, however deeply nested, using the classic viewport-width technique: 100vw sized, then pulled back to center with a negative margin. overflow-x:hidden on body is the standard partner rule — 100vw includes the scrollbar's width, which would otherwise add a few px of horizontal scroll on some screens. */ body { overflow-x: hidden; } .row-full-width { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Some shortcodes (e.g. the Instagram feed's own photo grid) build their OWN inner .row to lay out their content — that inner row isn't tagged "full-width" itself, so without this it would still get boxed by the generic Site-Width formula and sit narrow/centered inside the now-wide outer row. This lets any row nested inside a full-width one fill the real width it has instead. (If a deliberately narrower, centered row is ever nested inside a full-width section on purpose, give that row its own class and add ":not(.that-class)" to the selector below so this rule skips it — not needed by anything on the site today.) */ .row-full-width .row { max-width: 100% !important; } /* ---- 21. Instagram section: smaller heading + boxed grid + pill follow button (added by Claude, restyled to a simpler, smaller layout at the user's request, matching the scale of a reference screenshot) ---------- The heading/handle are plain HTML (not the [title] shortcode) so they pick up the site's normal Cormorant heading font at a smaller size instead of the bold uppercase divider-flanked "section title" look. The grid itself is a normal boxed row now (no width="full-width"), sized down to match. The "Follow" link Flatsome's own [ux_instagram_feed] shortcode renders (icon + text) is restyled here into a solid pill button — flex-direction:row-reverse just swaps the icon to sit after the text, matching the reference; the shortcode itself still puts the icon first in the markup. */ .mora-instagram-heading { text-align: center; } .mora-instagram-heading h2 { font-size: 28px; margin-bottom: .25em; } .mora-instagram-handle { margin: 0; font-size: 14px; color: var(--mora-muted); letter-spacing: .3px; } .mora-instagram-handle a { color: inherit; } .mora-instagram-handle a:hover { color: var(--mora-rust); } .mora-instagram-feed { text-align: center; } .mora-instagram-feed a.plain.uppercase { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; margin-top: 26px; padding: 14px 30px; background: var(--mora-ink); color: #fff !important; border-radius: 40px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .2px; text-transform: none; transition: background-color .2s ease; } .mora-instagram-feed a.plain.uppercase:hover { background: #000; color: #fff !important; opacity: 1; } .mora-instagram-feed a.plain.uppercase i { font-size: 15px; } /* ---- 22. Taller homepage collection banners (added by Claude) ------------ The homepage "Collections" section (Femme > Robes / Ensembles) is two Flatsome Banner elements. Their height comes from a page-specific