/* Theme Name: Memoricol Theme Theme URI: https://memoricol.com.au/ Author: Rolan Author URI: https://memoricol.com.au/ Description: Custom block theme for Memoricol — personalised children's colouring books made from family photos. Cream + rose palette, hand-drawn feel, premium family-keepsake positioning. Version: 1.4.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: memoricol-theme Tags: full-site-editing, block-theme, custom-colors, custom-logo, e-commerce */ /* ========================================================================== CSS VARIABLES — Memoricol palette Defined as --mq-* so they don't collide with WordPress / WooCommerce vars. ========================================================================== */ :root { --mq-rose: #FF5470; --mq-rose-dark: #E63960; --mq-rose-deep: #C62853; --mq-rose-soft: #FFE0E9; --mq-rose-glow: rgba(255, 84, 112, 0.45); --mq-purple: #8265B5; --mq-purple-dark: #6747A0; --mq-purple-soft: #EFE6FF; --mq-yellow: #FFC93C; --mq-yellow-soft: #FFF0BD; --mq-turquoise: #3FC1B8; --mq-turquoise-soft: #D6F2EF; --mq-green: #5FA847; --mq-green-soft: #E2F1DA; --mq-coral: #EE7C5F; --mq-coral-light: #FFD6C5; --mq-cream: #FDE6C9; /* sampled from Hero-Full.png corners */ --mq-cream-light: #FFF7EC; --mq-mint: #B7E5DB; --mq-nav-bg: #E9DBF4; /* lavender header — toned down another ~15 % */ --mq-nav-edge: #D9C7EE; /* edge accent toned down to match */ --mq-ink: #0F1B2D; --mq-ink-soft: #1F2A3A; --mq-muted: #5B6577; --mq-line: rgba(15, 27, 45, 0.08); --mq-radius-sm: 12px; --mq-radius-md: 18px; --mq-radius-lg: 22px; --mq-radius-pill: 999px; --mq-shadow-sm: 0 4px 14px rgba(15, 27, 45, 0.10); --mq-shadow-md: 0 12px 32px rgba(15, 27, 45, 0.14); --mq-shadow-lg: 0 24px 60px rgba(15, 27, 45, 0.18); --mq-header-h: 64px; --mq-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mq-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --mq-font-hand: 'Caveat', 'Bradley Hand', cursive; } /* ========================================================================== BASE — aggressive reset so the page is ONE seamless surface, no accidental margins between WordPress block-groups creating white seams. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--mq-font-sans); color: var(--mq-ink); background: var(--mq-cream); /* so any hairline gap reads as cream, never white */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Kill WordPress's default block-gap margins between top-level sections — those are the source of the white horizontal seams. */ .wp-site-blocks, .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } main.wp-block-group, main.wp-block-group > * { margin: 0; } main.wp-block-group { padding: 0; } img { max-width: 100%; height: auto; display: block; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--mq-rose); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes mq-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes mq-float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes mq-shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } } /* ========================================================================== SITE HEADER — dark navy bar, wordmark left, nav centre, CTA + cart right ========================================================================== */ /* Header — outer is a full-width lavender bar with no inner padding. The centring/spacing happens inside a max-width 1440 container that holds the logo (left) / nav (centre) / CTA + cart (right) on one flex row. The container's 92px horizontal padding lands the logo at ~92px from the viewport edge on typical desktops, aligned with the hero column below. */ .mq-site-header, body header.mq-site-header, body header.mq-site-header.wp-block-group { position: sticky; top: 0; z-index: 100; background: var(--mq-nav-bg) !important; /* defeat any WP block group default bg */ background-color: var(--mq-nav-bg) !important; min-height: var(--mq-header-h); display: flex; align-items: center; padding: 0; border: 0; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; box-shadow: 0 8px 28px rgba(130, 101, 181, 0.18); } /* When logged in, WP's admin bar sits at the top of the viewport with z-index: 99999. The sticky lavender header gets hidden behind it unless we push the sticky offset down by the admin bar's height. */ .admin-bar .mq-site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .mq-site-header { top: 46px; } } /* OUTER .mq-site-header — the lavender bar itself. ALWAYS full-width so the lavender stretches edge-to-edge regardless of viewport. */ .mq-site-header.wp-block-group { max-width: none !important; width: 100% !important; } /* INNER container — constrained to 1440 px, holds the logo / nav / CTA. This is the ONLY thing that should have max-width: the lavender outer stays edge-to-edge behind it. */ .mq-site-header > .wp-block-group { max-width: 1440px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--mq-header-h); padding: 0 clamp(20px, 6vw, 92px) !important; } .mq-site-header .wp-block-group { color: var(--mq-ink); } /* Nav links — tighten gap between items so the three-section header feels compact and balanced, not loose. */ .mq-site-header .wp-block-navigation, .mq-site-header .wp-block-navigation > ul, .mq-site-header .wp-block-navigation .wp-block-navigation__container { display: flex; align-items: center; gap: 40px; } /* Right-side action group (CTA pill + cart icon) — tight gap. */ .mq-site-header > .wp-block-group > .wp-block-group { display: flex !important; align-items: center; gap: 14px; min-height: 0; } /* MOBILE — reorder header items so the burger menu sits at the FAR RIGHT, after the CTA + cart. Order: logo | (push) | CTA + cart | burger. Only applies at small viewports where the WP block-navigation collapses to its burger toggle. */ @media (max-width: 768px) { .mq-site-header > .wp-block-group { justify-content: flex-start !important; gap: 10px; } .mq-site-header .mq-wordmark { order: 1; margin-right: auto; } .mq-site-header > .wp-block-group > .wp-block-group { order: 2; } .mq-site-header .wp-block-navigation { order: 3; } } /* Decorative doodles floating in the header — only two subtle ones near the LEFT edge so they accent the wordmark without competing with the nav/CTA on the right. z-index 0 keeps them behind everything else. */ .mq-header-doodle { position: absolute; pointer-events: none; opacity: 0.6; width: 22px; height: 22px; z-index: 0; display: none; /* default off — only the two below opt in */ } .mq-header-doodle--star-yellow { display: block; top: 14px; left: 14%; width: 16px; opacity: 0.7; } .mq-header-doodle--scribble { display: block; top: 24px; left: 26%; width: 28px; opacity: 0.5; } /* Hidden: rainbow, heart-coral, star-teal — they were overlapping the CTA */ .mq-header-doodle--rainbow, .mq-header-doodle--heart-coral, .mq-header-doodle--star-teal { display: none; } /* Wordmark — refined editorial Fraunces, opsz 144 for display refinement. "memoricol" with coral heart over dotless ı. 36px ≈ 175 px visible width, matches the target. No margin/padding — horizontal position is controlled by the header container's padding, vertical centring by parent's align-items: center. */ .mq-wordmark { display: inline-flex; align-items: center; font-family: var(--mq-font-serif); font-weight: 600; font-style: normal; font-size: 36px; line-height: 1; color: var(--mq-ink); letter-spacing: -1.4px; text-decoration: none; padding: 0; margin: 0; position: relative; z-index: 2; font-variation-settings: "opsz" 144, "SOFT" 50; } .mq-wordmark:hover, .mq-wordmark:focus { color: var(--mq-ink); } .mq-i-heart { position: relative; display: inline-block; font-style: normal; } .mq-heart-sm { position: absolute; top: -0.18em; left: 50%; transform: translateX(-55%); font-size: 0.42em; color: var(--mq-rose); line-height: 1; font-style: normal; animation: mq-float-slow 3.6s ease-in-out infinite; } /* Header nav links — dark text on lavender bar */ .mq-site-header .wp-block-navigation a, .mq-site-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--mq-ink); font-family: var(--mq-font-sans); font-weight: 600; font-size: 15px; opacity: 0.92; transition: opacity 0.2s ease, color 0.2s ease; padding: 8px 4px; min-height: 44px; text-decoration: none; } .mq-site-header .wp-block-navigation a:hover { opacity: 1; color: var(--mq-rose-deep); } /* Header CTA pill ("Create my book") — matches desired sizing. position: relative + z-index so it stacks above any decorative doodles. */ .mq-site-header .wp-block-button.mq-cta-solid { position: relative; z-index: 3; } .mq-site-header .wp-block-button.mq-cta-solid .wp-block-button__link { background: var(--mq-rose); color: #fff; border: 0; border-radius: var(--mq-radius-pill); padding: 13px 28px; min-height: 48px; font-family: var(--mq-font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; box-shadow: 0 6px 22px var(--mq-rose-glow); transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; line-height: 1; } .mq-site-header .wp-block-button.mq-cta-solid .wp-block-button__link:hover { background: var(--mq-rose-dark); transform: translateY(-1px); box-shadow: 0 10px 28px var(--mq-rose-glow); } /* Cart icon — dark on lavender */ .mq-cart-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--mq-ink); background: rgba(15, 27, 45, 0.06); transition: background 0.18s ease, color 0.18s ease; text-decoration: none; position: relative; z-index: 2; } .mq-cart-icon:hover { background: rgba(15, 27, 45, 0.12); color: var(--mq-rose-deep); } /* ========================================================================== HERO — two-column, viewport-bound, pink benefit strip pinned at bottom Mobile rules live in the inline critical CSS in functions.php; this file handles desktop + small bits the critical block doesn't cover. ========================================================================== */ .mq-hero { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - var(--mq-header-h)); background: var(--mq-cream); overflow: hidden; isolation: isolate; color: var(--mq-ink); margin: 0; padding: 0; } /* HIDE the mint top wave — it was the giant green band creating the unwanted green gradient between the header and hero. The header now has rounded bottom corners which is the only transition we need. */ .mq-hero-top-wave { display: none !important; } /* Only TWO subtle accent blobs — one blush pink on the left, one soft mint on the right. Everything else hidden so the hero reads as one clean cream surface, not a confetti of shapes. */ .mq-hero-bg-blob { position: absolute; pointer-events: none; z-index: 0; } .mq-hero-bg-blob--top-left { color: var(--mq-rose-soft); top: 12%; left: -120px; width: 280px; height: 320px; opacity: 0.7; } .mq-hero-bg-blob--bottom-right { color: var(--mq-mint); bottom: 12%; right: -110px; width: 280px; height: 300px; opacity: 0.55; } /* Hide the rest — they were cluttering the hero */ .mq-hero-bg-blob--mid-left, .mq-hero-bg-blob--bottom-left, .mq-hero-bg-blob--bottom-center { display: none; } /* Hide ALL doodles except a couple of subtle ones near the corners — the composed Hero-Full PNG already carries the handwritten "Your photo" and "Colouring page" annotations baked in, so adding more on top makes it feel cluttered. */ .mq-hero-doodle { position: absolute; pointer-events: none; z-index: 2; animation: mq-shimmer 4s ease-in-out infinite; display: none; /* default off */ } .mq-hero-doodle--heart-tl, .mq-hero-doodle--dots-bl { display: block; } .mq-hero-doodle--heart-tl { top: 18%; left: 5%; width: 22px; opacity: 0.6; } .mq-hero-doodle--dots-bl { bottom: 22%; left: 8%; width: 38px; opacity: 0.5; } /* Hero grid — two columns on desktop. The 40/60 split gives the right visual column more horizontal room so the open-book composition has real visual impact. Uses the SAME horizontal padding as the header so the hero text column lines up vertically with the wordmark above. */ .mq-hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; /* exact 50/50 split — text left, photo right */ gap: 40px; width: 100%; max-width: 1600px; margin: 0 auto; padding: 32px clamp(40px, 7vw, 120px) 20px; flex: 1; align-items: center; } /* Left column — text. Comfortable max-width that holds elegant typography without feeling cramped or stretched. */ .mq-hero-text { display: flex; flex-direction: column; align-items: flex-start; max-width: 580px; padding-right: 0; } /* Eyebrow — "• Made from your photos •" line above the H1. Plain Inter, small, dark navy, with rose dots + "your" in coral italic Fraunces. Matches the desired design exactly. */ /* Eyebrow — elegant editorial caption: Inter tracked-out at small size, with the italic "maker" in Fraunces coral for an editorial flourish. */ .mq-eyebrow { display: inline-flex; align-items: center; gap: 12px; background: transparent; border: 0; color: var(--mq-ink); padding: 0; border-radius: 0; font-family: var(--mq-font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.4px; text-transform: none; margin-bottom: 22px; box-shadow: none; animation: mq-rise-in 0.7s ease-out both; line-height: 1.2; opacity: 0.85; } .mq-eyebrow-label em { font-family: var(--mq-font-serif); font-style: italic; font-weight: 500; color: var(--mq-rose-deep); margin: 0 1px 0 3px; font-size: 1.1em; letter-spacing: -0.2px; font-variation-settings: "opsz" 60, "SOFT" 100; } .mq-eyebrow-dot { display: inline-block; width: 4px; height: 4px; background: var(--mq-rose); border-radius: 50%; flex-shrink: 0; } /* H1 — editorial display Fraunces, opsz 144 + weight 700 for the bold presence in the reference. Sized to fit "Personalised colouring books" on one line and "made from your photos." on the next so the H1 stays compact (2 lines) and the pink benefit strip stays above the fold. */ .mq-hero-title { font-family: var(--mq-font-serif); font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -1.4px; color: var(--mq-ink); margin: 0 0 14px; animation: mq-rise-in 0.8s 0.08s ease-out both; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-hero-title em { font-style: italic; font-weight: 400; color: var(--mq-rose-deep); position: relative; display: inline-block; font-variation-settings: "opsz" 144, "SOFT" 100; letter-spacing: -1.2px; } .mq-hero-title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 7px; background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; } /* Tagline — Fraunces italic with full SOFT axis for the boutique-script feel. Slightly larger than before for editorial presence. */ .mq-hero-tagline { font-family: var(--mq-font-serif); font-weight: 400; font-style: italic; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.3; letter-spacing: -0.3px; color: var(--mq-rose-deep); margin: 0 0 22px; font-variation-settings: "opsz" 60, "SOFT" 100; text-wrap: balance; } /* Lede — slightly looser tracking, deeper ink colour at low opacity for that boutique-magazine feel. */ .mq-hero-lede { font-family: var(--mq-font-sans); font-size: clamp(14px, 1vw, 15px); line-height: 1.6; font-weight: 400; letter-spacing: 0.1px; color: var(--mq-ink-soft); opacity: 0.78; margin: 0 0 24px; max-width: 500px; } /* The mobile hero image lives inside .mq-hero-text — hidden on desktop. */ .mq-hero-fullimg--mobile { display: none; } .mq-hero-ctas { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; /* breathing room between CTA and trust pills */ } /* Buttons (.mq-btn) — sized to match the desired hero CTA */ .mq-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 50px; padding: 12px 26px; border-radius: var(--mq-radius-pill); font-family: var(--mq-font-sans); font-size: 15px; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; line-height: 1; letter-spacing: 0; } .mq-btn:hover { transform: translateY(-2px); } .mq-btn-inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .mq-btn-label { display: inline-block; } .mq-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .mq-btn-primary { background: var(--mq-rose); color: #fff; box-shadow: 0 10px 30px var(--mq-rose-glow); } .mq-btn-primary:hover { background: var(--mq-rose-dark); color: #fff; box-shadow: 0 14px 36px var(--mq-rose-glow); } .mq-btn-secondary { background: rgba(255, 255, 255, 0.95); color: var(--mq-ink); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 22px rgba(15, 27, 45, 0.18); } .mq-btn-secondary:hover { background: #fff; color: var(--mq-rose-deep); } /* Trust pill row — soft glass pill that BLENDS into the cream hero rather than sitting on top of it. Compact sizing keeps all 3 labels on ONE line. */ .mq-hero-trust { display: inline-flex; flex-wrap: nowrap; /* never wrap — must stay on one line */ align-items: center; gap: 0; list-style: none; margin: 0; padding: 8px 6px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-radius: var(--mq-radius-pill); box-shadow: 0 4px 18px rgba(15, 27, 45, 0.05); border: 1px solid rgba(255, 255, 255, 0.65); width: fit-content; max-width: 100%; } .mq-hero-trust-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mq-font-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1px; color: var(--mq-ink-soft); position: relative; padding: 2px 12px; white-space: nowrap; line-height: 1.25; } .mq-hero-trust-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background: rgba(15, 27, 45, 0.10); } .mq-hero-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--mq-rose); flex-shrink: 0; } .mq-hero-trust-icon svg { width: 13px; height: 13px; } .mq-hero-trust-label { line-height: 1.2; white-space: nowrap; } /* Right column — composed Hero-Full PNG. Sized to dominate the right half of the hero like a proper product visual. Slight horizontal overflow into the right gutter is OK (and looks more editorial). */ .mq-hero-visual { position: relative; display: flex; align-items: stretch; justify-content: stretch; min-width: 0; width: 100%; height: 100%; overflow: visible; } .mq-hero-fullimg--desktop { display: block; width: 100%; max-width: 100%; height: 100%; /* Image shrunk ~15 % vs the previous bounds (extra ~110 px of vertical subtraction) so the pink benefit strip below the hero grid sits fully above the fold at standard desktop viewports (≥850 px tall). */ min-height: calc(100svh - var(--mq-header-h) - 320px); max-height: calc(100svh - var(--mq-header-h) - 240px); object-fit: cover; object-position: center; transform: none; border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 27, 45, 0.10); filter: none; } /* ========================================================================== PINK BENEFIT STRIP — integrated smoothly with the hero, no hard wave. Soft cream→pink gradient at the top edge for a seamless transition. ========================================================================== */ .mq-trust-strip { position: relative; z-index: 3; background: var(--mq-rose-soft); padding: 22px 56px 20px; margin-top: auto; border-top: 0; } /* Soft fade from cream into pink — replaces the wavy SVG so the section feels like one continuous surface, not stacked boxes. */ .mq-trust-strip::before { content: ""; position: absolute; top: -32px; left: 0; right: 0; height: 32px; background: linear-gradient(180deg, rgba(255, 224, 233, 0) 0%, var(--mq-rose-soft) 100%); pointer-events: none; z-index: 1; } .mq-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1280px; margin: 0 auto; } .mq-trust-item { display: flex; align-items: center; gap: 14px; padding: 4px 18px; border-left: 0; } .mq-trust-item:first-child { padding-left: 0; } .mq-trust-icon { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.65); } .mq-trust-icon svg { width: 22px; height: 22px; stroke-width: 1.7; } .mq-trust-icon.is-rose { color: var(--mq-rose); } .mq-trust-icon.is-lavender { color: var(--mq-purple); } .mq-trust-icon.is-yellow { color: #B88A00; } .mq-trust-icon.is-turquoise { color: var(--mq-turquoise); } .mq-trust-text { line-height: 1.35; } .mq-trust-title { font-family: var(--mq-font-sans); font-weight: 700; font-size: 14px; color: var(--mq-ink); margin-bottom: 2px; } .mq-trust-sub { font-family: var(--mq-font-sans); font-size: 12.5px; color: var(--mq-muted); } /* ========================================================================== STEPS — "Created in minutes, treasured for years" Soft LAVENDER (same family as the header) — clearly separated from the pink trust strip above, but still part of the brand world. Cool/warm pink/lavender contrast feels premium and editorial. ========================================================================== */ .mq-steps { position: relative; background: #E5D9F2; /* dusty lavender — clearly distinct from pink trust strip */ padding: 140px clamp(40px, 7vw, 120px) 132px; overflow: hidden; } /* Wavy SVG separator at the TOP — pink wave (matching the trust strip) sweeping down INTO the lavender, giving a smooth premium pink→lavender transition between sections. */ .mq-steps::before { content: ""; position: absolute; top: -1px; left: -2px; right: -2px; height: 64px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,32 C1260,58 1080,8 880,30 C680,52 480,14 280,34 C160,46 60,30 0,42 Z' fill='%23FFE0E9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } /* Wavy transition at the BOTTOM into the cream occasions section. */ .mq-steps::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 64px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23FFF7EC'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } .mq-steps-leaf { position: absolute; top: 80px; right: 56px; width: 72px; height: 72px; color: rgba(95, 168, 71, 0.35); /* very soft, decorative not loud */ pointer-events: none; z-index: 0; } .mq-steps-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; } .mq-steps-title { font-family: var(--mq-font-serif); font-weight: 600; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -1.6px; color: var(--mq-ink); max-width: 920px; margin: 0 auto 80px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-underline { position: relative; display: inline-block; font-style: italic; color: var(--mq-rose-deep); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 100; letter-spacing: -1.4px; } .mq-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; } /* 3-column step layout. Each .mq-step is its own flex column with FIXED row heights for the number, illustration and heading slots, so the

body text always begins at the same vertical position across all three columns regardless of heading length. No display: contents trickery — plain reliable flex. */ .mq-steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; column-gap: 32px; align-items: start; max-width: 1080px; margin: 0 auto; } .mq-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; } .mq-step-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mq-rose); color: #fff; font-family: var(--mq-font-serif); font-weight: 600; font-size: 18px; display: grid; place-items: center; box-shadow: 0 6px 18px var(--mq-rose-glow); font-variation-settings: "opsz" 96, "SOFT" 50; letter-spacing: -0.5px; margin-bottom: 22px; } .mq-step-illus { flex-shrink: 0; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 22px; } .mq-step-illus svg { width: 100%; height: 100%; } .mq-step h3 { font-family: var(--mq-font-serif); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.4px; color: var(--mq-ink); margin: 0 0 10px; max-width: 280px; font-variation-settings: "opsz" 96, "SOFT" 50; /* Fixed row height = 2 lines worth at 20px × 1.25 line-height = 50px. Guarantees the body

below starts at the same Y across all three columns even if the heading text is 1 line in some columns. */ min-height: 50px; display: flex; align-items: flex-start; justify-content: center; } .mq-step p { font-family: var(--mq-font-sans); font-size: 14.5px; line-height: 1.65; color: var(--mq-ink-soft); margin: 0; max-width: 280px; opacity: 0.72; } /* Connector dashes sit between the columns. Top offset puts them at roughly the centre of the icon row. */ .mq-steps-dash { align-self: start; width: 64px; border-top: 1.5px dashed rgba(198, 40, 83, 0.4); height: 0; margin-top: calc(44px + 22px + 44px); /* num + gap + half of illus = icon centre */ } /* ========================================================================== OCCASIONS — "Made for the moments that matter most" Cream background with a wavy separator at the bottom into the footer. ========================================================================== */ .mq-occasions { position: relative; background: var(--mq-cream-light); padding: 112px 56px 132px; overflow: hidden; } /* Decorative floating dots (yellow/rose/turquoise) bottom-left */ .mq-occasions::before { content: ""; position: absolute; bottom: 110px; left: 40px; width: 110px; height: 70px; background-image: radial-gradient(circle 5px at 20% 40%, var(--mq-rose) 0 100%, transparent 101%), radial-gradient(circle 6px at 55% 20%, var(--mq-yellow) 0 100%, transparent 101%), radial-gradient(circle 4px at 80% 70%, var(--mq-turquoise) 0 100%, transparent 101%); background-repeat: no-repeat; pointer-events: none; opacity: 0.7; z-index: 1; } /* Wavy separator at the BOTTOM transitioning into the navy footer */ .mq-occasions::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 72px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,72 L0,72 Z' fill='%230F1B2D'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } .mq-occasions-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; } .mq-occasions-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--mq-rose-deep); letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 14px; } .mq-occasions-title { font-family: var(--mq-font-serif); font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -1px; color: var(--mq-ink); margin: 0 0 16px; } .mq-occasions-lede { font-size: 17px; line-height: 1.6; color: var(--mq-muted); max-width: 680px; margin: 0 auto 56px; } .mq-occasions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; } .mq-occasion-card { position: relative; background: #fff; border: 1.5px solid var(--mq-line); border-radius: var(--mq-radius-lg); padding: 28px 24px 26px; text-align: left; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .mq-occasion-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15, 27, 45, 0.08); border-color: var(--mq-rose-soft); } .mq-occasion-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; } .mq-occasion-icon svg { width: 26px; height: 26px; } .mq-occasion-card--rose .mq-occasion-icon { background: var(--mq-rose-soft); color: var(--mq-rose-deep); } .mq-occasion-card--lavender .mq-occasion-icon { background: var(--mq-purple-soft); color: var(--mq-purple); } .mq-occasion-card--green .mq-occasion-icon { background: var(--mq-green-soft); color: var(--mq-green); } .mq-occasion-card--yellow .mq-occasion-icon { background: var(--mq-yellow-soft); color: #B88A00; } .mq-occasion-card--turquoise .mq-occasion-icon { background: var(--mq-turquoise-soft); color: var(--mq-turquoise); } .mq-occasion-card--coral .mq-occasion-icon { background: var(--mq-coral-light); color: var(--mq-coral); } .mq-occasion-card h3 { font-family: var(--mq-font-serif); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--mq-ink); margin: 0 0 8px; } .mq-occasion-card p { font-size: 14.5px; line-height: 1.55; color: var(--mq-muted); margin: 0; } .mq-occasions-cta { display: flex; justify-content: center; margin-top: 12px; } /* ========================================================================== SITE FOOTER — dark navy bar, white text ========================================================================== */ .mq-site-footer { background: #0F1B2D; color: #fff; } .mq-site-footer .wp-block-group { color: #fff; } .mq-site-footer .mq-wordmark { color: #fff; font-size: 26px; } .mq-site-footer .mq-wordmark:hover, .mq-site-footer .mq-wordmark:focus { color: #fff; } .mq-site-footer .wp-block-navigation a, .mq-site-footer .wp-block-navigation .wp-block-navigation-item__content { color: #fff; text-decoration: none; font-family: var(--mq-font-sans); font-size: 14.5px; font-weight: 500; opacity: 0.85; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; transition: opacity 0.2s ease, color 0.2s ease; } .mq-site-footer .wp-block-navigation a:hover { opacity: 1; color: #fff; } .mq-footer-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); margin: 28px 0 18px; } .mq-footer-copy { color: rgba(255, 255, 255, 0.6); font-size: 13.5px; margin: 0; } /* ========================================================================== MOBILE (≤900px) — site sections that aren't covered by inline critical CSS. The .mq-hero mobile rules already live in functions.php (wp_head + shortcode inline) — DO NOT duplicate them here, they use !important and would only add noise. These rules cover header / steps / occasions / footer / trust. ========================================================================== */ @media (max-width: 900px) { /* Header */ .mq-site-header { min-height: 64px; padding-top: 10px; padding-bottom: 10px; } .mq-header-doodle--scribble, .mq-header-doodle--rainbow { display: none; } .mq-wordmark { font-size: 22px; } .mq-site-header .wp-block-button.mq-cta-solid .wp-block-button__link { padding: 10px 16px; font-size: 13px; } /* Pink trust strip — stack to 2x2 grid, smaller items */ .mq-trust-strip { padding: 18px 20px; } .mq-trust-strip::before { top: -16px; height: 16px; } .mq-trust-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; } .mq-trust-item { border-left: 0; padding: 6px 0; gap: 12px; } .mq-trust-icon { width: 40px; height: 40px; border-radius: 12px; } .mq-trust-icon svg { width: 22px; height: 22px; } .mq-trust-title { font-size: 13.5px; } .mq-trust-sub { font-size: 12px; line-height: 1.35; } /* Steps */ .mq-steps { padding: 64px 20px; } .mq-steps-leaf { width: 56px; height: 56px; top: 14px; right: 14px; } .mq-steps-title { margin-bottom: 40px; font-size: 28px; } .mq-steps-grid { grid-template-columns: 1fr; gap: 32px; } .mq-steps-dash { justify-self: center; width: 0; height: 24px; border-top: 0; border-left: 2px dashed var(--mq-rose-dark); } .mq-step { padding: 0; } .mq-step-illus { width: 80px; height: 80px; } /* Occasions */ .mq-occasions { padding: 64px 20px; } .mq-occasions-title { font-size: 28px; } .mq-occasions-lede { font-size: 15.5px; margin-bottom: 36px; } .mq-occasions-grid { grid-template-columns: 1fr; gap: 14px; } .mq-occasion-card { padding: 24px 20px; } /* Footer */ .mq-site-footer .wp-block-group { flex-direction: column; align-items: flex-start; gap: 18px; } .mq-footer-copy { font-size: 12.5px; } } @media (max-width: 560px) { .mq-occasions-grid { grid-template-columns: 1fr; } .mq-steps-title, .mq-occasions-title { font-size: 26px; } } /* ========================================================================== ABOUT PAGE — [memoricol_about] shortcode Sections (top → bottom): hero with 3 fanned mini-covers → why → quote → bonds (family/friends/pets) → occasions list → values 2×2 → made in AU → final CTA. Uses the same brand palette + Fraunces editorial typography as the homepage. ========================================================================== */ /* Shared inner container for every about section. */ .mq-ab-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); position: relative; z-index: 2; } .mq-ab-inner--narrow { max-width: 820px; } /* Section heads — eyebrow + H2 + optional sub paragraph. Shared rhythm. */ .mq-ab-section-head { text-align: center; margin: 0 auto 56px; max-width: 760px; } .mq-ab-overline { display: inline-block; font-family: var(--mq-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--mq-rose-deep); margin: 0 0 16px; opacity: 0.9; } .mq-ab-section-head h2 { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -1.4px; color: var(--mq-ink); margin: 0 0 18px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-ab-section-head h2 em { font-style: italic; font-weight: 400; color: var(--mq-rose-deep); font-variation-settings: "opsz" 144, "SOFT" 100; } .mq-ab-section-head p { font-family: var(--mq-font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--mq-ink-soft); opacity: 0.78; margin: 0; max-width: 600px; margin-left: auto; margin-right: auto; } /* ----- HERO ----- */ .mq-ab-hero { position: relative; background: var(--mq-cream); padding: 80px clamp(24px, 5vw, 56px) 120px; overflow: hidden; isolation: isolate; } .mq-ab-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 40% at 0% 0%, rgba(255, 84, 112, 0.10), transparent 60%), radial-gradient(ellipse 50% 45% at 100% 0%, rgba(130, 101, 181, 0.08), transparent 65%), radial-gradient(ellipse 55% 50% at 50% 100%, rgba(63, 193, 184, 0.06), transparent 70%); z-index: 0; pointer-events: none; } .mq-ab-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1240px; margin: 0 auto; align-items: center; } .mq-ab-hero-text { display: flex; flex-direction: column; align-items: flex-start; max-width: 540px; } .mq-ab-title { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -1.8px; color: var(--mq-ink); margin: 18px 0 22px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-ab-title em { font-style: italic; font-weight: 400; color: var(--mq-rose-deep); font-variation-settings: "opsz" 144, "SOFT" 100; } .mq-ab-lede { font-family: var(--mq-font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; color: var(--mq-ink-soft); opacity: 0.82; margin: 0 0 32px; max-width: 480px; } /* Mini-covers — fanned out collage representing different occasions */ .mq-ab-hero-visual { position: relative; min-height: 460px; } .mq-ab-minicover { position: absolute; width: 200px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 24px 50px rgba(15, 27, 45, 0.16), 0 4px 14px rgba(15, 27, 45, 0.06); display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid rgba(15, 27, 45, 0.05); } .mq-ab-minicover--family { top: 20px; left: 0; transform: rotate(-7deg); z-index: 3; } .mq-ab-minicover--birthday { top: 70px; left: 50%; transform: translateX(-50%) rotate(2deg); z-index: 4; } .mq-ab-minicover--christmas { top: 20px; right: 0; transform: rotate(8deg); z-index: 3; } .mq-ab-minicover-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--mq-cream-light); display: grid; place-items: center; } .mq-ab-minicover-photo svg { width: 100%; height: 100%; display: block; } .mq-ab-minicover-title-1 { font-family: var(--mq-font-sans); font-size: 11px; font-weight: 500; color: var(--mq-rose-deep); letter-spacing: 0.6px; text-transform: uppercase; margin-top: 6px; } .mq-ab-minicover-title-2 { font-family: var(--mq-font-serif); font-weight: 600; font-style: italic; font-size: 18px; color: var(--mq-ink); line-height: 1; letter-spacing: -0.4px; font-variation-settings: "opsz" 96, "SOFT" 100; } .mq-ab-minicover-name { font-family: var(--mq-font-hand), cursive; font-size: 16px; color: var(--mq-rose-deep); margin-top: 2px; } .mq-ab-polaroid-tag { position: absolute; bottom: 30px; right: 8px; font-family: var(--mq-font-hand), cursive; font-size: 18px; line-height: 1.1; color: var(--mq-rose-deep); text-align: center; transform: rotate(-4deg); z-index: 5; max-width: 140px; } /* ----- WHY (cream-light background) ----- */ .mq-ab-why { position: relative; background: var(--mq-cream-light); padding: 120px clamp(24px, 5vw, 56px) 140px; overflow: hidden; } .mq-ab-prose { font-family: var(--mq-font-sans); color: var(--mq-ink-soft); } .mq-ab-prose p { font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.75; margin: 0 0 22px; opacity: 0.82; } .mq-ab-prose p:last-child { margin-bottom: 0; } /* ----- PULL QUOTE ----- */ .mq-ab-quote { background: var(--mq-rose-soft); padding: 100px clamp(24px, 5vw, 56px) 120px; text-align: center; position: relative; overflow: hidden; } .mq-ab-quote-mark { width: 56px; height: auto; color: var(--mq-rose); opacity: 0.55; margin: 0 auto 28px; display: block; } .mq-ab-quote-text { font-family: var(--mq-font-serif); font-weight: 400; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -0.8px; color: var(--mq-ink); margin: 0; font-variation-settings: "opsz" 144, "SOFT" 100; text-wrap: balance; } /* ----- BONDS (family/friends/pets) ----- */ .mq-ab-bonds { position: relative; background: #fff; padding: 120px clamp(24px, 5vw, 56px) 140px; overflow: hidden; } .mq-ab-bonds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1180px; margin: 0 auto; } .mq-ab-bond-card { background: var(--mq-cream-light); border-radius: 22px; padding: 36px 30px 32px; border: 1px solid rgba(15, 27, 45, 0.05); } .mq-ab-bond-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; background: rgba(255, 255, 255, 0.7); } .mq-ab-bond-icon svg { width: 26px; height: 26px; } .mq-ab-bond-icon.is-rose { color: var(--mq-rose-deep); background: var(--mq-rose-soft); } .mq-ab-bond-icon.is-yellow { color: #B88A00; background: var(--mq-yellow-soft); } .mq-ab-bond-icon.is-turquoise { color: var(--mq-turquoise); background: var(--mq-turquoise-soft); } .mq-ab-bond-card h3 { font-family: var(--mq-font-serif); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.6px; color: var(--mq-ink); margin: 0 0 14px; font-variation-settings: "opsz" 96, "SOFT" 50; } .mq-ab-bond-card p { font-family: var(--mq-font-sans); font-size: 14.5px; line-height: 1.65; color: var(--mq-ink-soft); opacity: 0.78; margin: 0; } /* ----- OCCASIONS LIST ----- */ .mq-ab-occasions { position: relative; background: #F0E9FB; /* same lavender as homepage steps for brand consistency */ padding: 120px clamp(24px, 5vw, 56px) 140px; overflow: hidden; } .mq-ab-occ-list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; gap: 14px; } .mq-ab-occ-list li { font-family: var(--mq-font-sans); font-size: 16px; line-height: 1.6; color: var(--mq-ink-soft); padding: 18px 22px; background: rgba(255, 255, 255, 0.7); border-radius: 14px; border: 1px solid rgba(15, 27, 45, 0.05); } .mq-ab-occ-list strong { font-family: var(--mq-font-serif); font-weight: 600; color: var(--mq-rose-deep); font-size: 17px; display: inline; margin-right: 6px; font-variation-settings: "opsz" 96, "SOFT" 50; } /* ----- VALUES (2×2 grid) ----- */ .mq-ab-values { position: relative; background: #fff; padding: 120px clamp(24px, 5vw, 56px) 140px; overflow: hidden; } .mq-ab-values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; max-width: 1080px; margin: 0 auto; } .mq-ab-value { padding: 0 4px; } .mq-ab-value-num { font-family: var(--mq-font-serif); font-weight: 400; font-style: italic; font-size: 28px; color: var(--mq-rose-deep); letter-spacing: -0.5px; margin-bottom: 14px; opacity: 0.85; font-variation-settings: "opsz" 96, "SOFT" 100; } .mq-ab-value h3 { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -0.6px; color: var(--mq-ink); margin: 0 0 14px; font-variation-settings: "opsz" 144, "SOFT" 30; } .mq-ab-value p { font-family: var(--mq-font-sans); font-size: 15px; line-height: 1.7; color: var(--mq-ink-soft); opacity: 0.78; margin: 0; } /* ----- MADE IN AUSTRALIA ----- */ .mq-ab-local { position: relative; background: var(--mq-cream-light); padding: 120px clamp(24px, 5vw, 56px) 140px; text-align: center; overflow: hidden; } .mq-ab-local-row { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 20px; max-width: 880px; } .mq-ab-local-row li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mq-font-sans); font-size: 14px; font-weight: 500; color: var(--mq-ink-soft); background: #fff; padding: 12px 18px; border-radius: var(--mq-radius-pill); border: 1px solid rgba(15, 27, 45, 0.06); box-shadow: 0 2px 8px rgba(15, 27, 45, 0.04); } .mq-ab-local-row li svg { width: 18px; height: 18px; color: var(--mq-rose-deep); flex-shrink: 0; } /* ----- FINAL CTA ----- */ .mq-ab-final { background: var(--mq-cream); padding: 120px clamp(24px, 5vw, 56px); text-align: center; } .mq-ab-final-inner h2 { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -1.4px; color: var(--mq-ink); margin: 0 0 18px; font-variation-settings: "opsz" 144, "SOFT" 30; } .mq-ab-final-inner p { font-family: var(--mq-font-sans); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--mq-ink-soft); opacity: 0.8; margin: 0 0 36px; } .mq-ab-final-inner .mq-hero-ctas { display: flex; justify-content: center; } /* ----- WAVY SECTION SEPARATORS ----- Each section gets a ::after wavy SVG at its bottom edge, FILLED with the next section's background colour so the transition looks like the next section is "spilling up" into the wave. Three alternating wave shapes so adjacent transitions don't look identical. */ .mq-ab-hero::after, .mq-ab-why::after, .mq-ab-quote::after, .mq-ab-bonds::after, .mq-ab-occasions::after, .mq-ab-values::after, .mq-ab-local::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 64px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } /* Hero (cream) → Why (cream-light) */ .mq-ab-hero::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23FFF7EC'/%3E%3C/svg%3E"); } /* Why (cream-light) → Quote (rose-soft) */ .mq-ab-why::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,64 L0,64 Z' fill='%23FFE0E9'/%3E%3C/svg%3E"); } /* Quote (rose-soft) → Bonds (white) */ .mq-ab-quote::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* Bonds (white) → Occasions (lavender) */ .mq-ab-bonds::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,64 L0,64 Z' fill='%23F0E9FB'/%3E%3C/svg%3E"); } /* Occasions (lavender) → Values (white) */ .mq-ab-occasions::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* Values (white) → Local (cream-light) */ .mq-ab-values::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,64 L0,64 Z' fill='%23FFF7EC'/%3E%3C/svg%3E"); } /* Local (cream-light) → Final (cream) */ .mq-ab-local::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23FDE6C9'/%3E%3C/svg%3E"); } /* Make sure all the section inner containers sit ABOVE the wave layer. */ .mq-ab-hero .mq-ab-hero-grid, .mq-ab-why .mq-ab-inner, .mq-ab-quote .mq-ab-inner, .mq-ab-bonds .mq-ab-inner, .mq-ab-occasions .mq-ab-inner, .mq-ab-values .mq-ab-inner, .mq-ab-local .mq-ab-inner, .mq-ab-final .mq-ab-inner { position: relative; z-index: 2; } /* ----- ABOUT PAGE MOBILE ----- */ @media (max-width: 900px) { .mq-ab-hero { padding: 56px 20px 80px; } .mq-ab-hero-grid { grid-template-columns: 1fr; gap: 40px; } .mq-ab-hero-visual { min-height: 380px; margin-top: 24px; } .mq-ab-minicover { width: 160px; padding: 12px; } .mq-ab-polaroid-tag { font-size: 16px; bottom: 10px; } .mq-ab-why, .mq-ab-quote, .mq-ab-bonds, .mq-ab-occasions, .mq-ab-values, .mq-ab-local, .mq-ab-final { padding: 72px 20px 88px; } /* Smaller waves on mobile so they don't dominate the layout. */ .mq-ab-hero::after, .mq-ab-why::after, .mq-ab-quote::after, .mq-ab-bonds::after, .mq-ab-occasions::after, .mq-ab-values::after, .mq-ab-local::after { height: 40px; } .mq-ab-section-head { margin-bottom: 40px; } .mq-ab-bonds-grid { grid-template-columns: 1fr; gap: 18px; } .mq-ab-values-grid { grid-template-columns: 1fr; gap: 28px; } .mq-ab-quote-text { font-size: 20px; } } @media (max-width: 560px) { .mq-ab-hero-visual { min-height: 320px; } .mq-ab-minicover { width: 140px; } .mq-ab-minicover--family { left: -10px; } .mq-ab-minicover--christmas { right: -10px; } .mq-ab-local-row li { font-size: 13px; padding: 10px 14px; } } /* ========================================================================== PRICING PAGE — [memoricol_pricing] shortcode Sections: hero → 4-tier grid → "in every tier" promise → comparison table → FAQ → final CTA. Same brand palette + Fraunces editorial type as the homepage and about page. ========================================================================== */ /* Shared inner + section heads */ .mq-pr-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); position: relative; z-index: 2; } .mq-pr-inner--narrow { max-width: 860px; } .mq-pr-section-head { text-align: center; margin: 0 auto 56px; max-width: 720px; } .mq-pr-overline { display: inline-block; font-family: var(--mq-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--mq-rose-deep); margin: 0 0 16px; opacity: 0.9; } .mq-pr-section-head h2 { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -1.4px; color: var(--mq-ink); margin: 0 0 18px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-pr-section-head h2 em { font-style: italic; font-weight: 400; color: var(--mq-rose-deep); font-variation-settings: "opsz" 144, "SOFT" 100; } .mq-pr-section-head p { font-family: var(--mq-font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--mq-ink-soft); opacity: 0.78; margin: 0 auto; max-width: 580px; } /* ----- PRICING HERO ----- Clean, single-layer implementation: the PNG IS the entire visual. No masks, no pseudo-element overlays, no decorative blobs, no SVG doodles. All composition and decoration lives inside the source image file. Drop a refined `pricing-hero-book.png` at the same path and it renders as designed. The peach background-color is a fallback while the image loads and fills any gap where the image doesn't reach. The four knobs to tune for a future PNG are: - background-size (image scaling) - background-position (vertical anchor) - min-height (overall hero height) - padding-top (clearance above the text column) */ /* TWO-COLUMN HERO — split exactly down the middle. Left column : text content (eyebrow, H1, lede, pill row), vertically centred, never touched by the image. Right column : the book PNG stretched edge-to-edge to fill the entire right half via background-size: cover on a pseudo-element. */ .mq-pr-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 40px; background-color: #F8E1D0; min-height: 72svh; padding: 56px clamp(24px, 5vw, 56px); overflow: hidden; isolation: isolate; text-align: center; } /* Left half — text */ .mq-pr-hero-inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; } /* Right half — book image, stretched to fill the column edge-to-edge. Rounded corners give the image a premium card-like feel and let the peach hero bg breathe softly around the rectangle. */ .mq-pr-hero::after { content: ""; align-self: stretch; background-image: url('assets/Coloring%20book%20-%20hme.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 27, 45, 0.10); } .mq-pr-hero .mq-eyebrow { justify-content: center; } .mq-pr-title { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -1.4px; color: var(--mq-ink); margin: 14px 0 16px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-pr-title em { font-style: italic; font-weight: 400; color: var(--mq-rose-deep); font-variation-settings: "opsz" 144, "SOFT" 100; } .mq-pr-lede { font-family: var(--mq-font-sans); font-size: clamp(14.5px, 1vw, 16px); line-height: 1.6; color: var(--mq-ink-soft); opacity: 0.82; margin: 0 auto 22px; max-width: 620px; } .mq-pr-hero-pills { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-radius: var(--mq-radius-pill); padding: 10px 8px; border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 4px 18px rgba(15, 27, 45, 0.05); } .mq-pr-hero-pills li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mq-font-sans); font-size: 12.5px; font-weight: 500; color: var(--mq-ink-soft); padding: 2px 16px; position: relative; } .mq-pr-hero-pills li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(15, 27, 45, 0.12); } .mq-pr-hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mq-rose); flex-shrink: 0; } /* ----- TIER GRID ----- Cards sit cleanly INSIDE the tiers section (no overlap into the hero). The hero's wave/cream area ends, the tiers section begins, the cards start with proper top padding so the eyebrows have breathing room. */ .mq-pr-tiers { background: var(--mq-cream-light); padding: 56px clamp(24px, 5vw, 56px) 120px; position: relative; } .mq-pr-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 0; /* no negative pull — cards live inside tiers */ align-items: stretch; } /* Two-tier layout (Digital + Print only) — wider cards, centred */ .mq-pr-tiers-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; max-width: 920px; margin-left: auto; margin-right: auto; } /* Single-card soft-launch layout — one centred card, max 520px wide. */ .mq-pr-tiers-grid--single { grid-template-columns: minmax(0, 520px); justify-content: center; max-width: 520px; margin-left: auto; margin-right: auto; } .mq-pr-tier { position: relative; background: #fff; border-radius: 22px; padding: 36px 28px 30px; display: flex; flex-direction: column; box-shadow: 0 18px 44px rgba(15, 27, 45, 0.08); border: 1px solid rgba(15, 27, 45, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; } .mq-pr-tier:hover { transform: translateY(-3px); box-shadow: 0 26px 56px rgba(15, 27, 45, 0.12); } .mq-pr-tier--featured { border: 2px solid var(--mq-rose); box-shadow: 0 18px 40px rgba(255, 84, 112, 0.12); transform: none; /* no lift — sits at the same height as the other card */ } .mq-pr-tier--featured:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(255, 84, 112, 0.18); } .mq-pr-tier--unlimited { background: linear-gradient(180deg, #fff 0%, #F4ECFE 100%); border-color: rgba(130, 101, 181, 0.18); } .mq-pr-tier-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; background: var(--mq-rose); color: #fff; padding: 6px 14px; border-radius: var(--mq-radius-pill); font-family: var(--mq-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(255, 84, 112, 0.32); white-space: nowrap; } .mq-pr-tier-badge--alt { background: var(--mq-ink); box-shadow: 0 6px 16px rgba(15, 27, 45, 0.22); } .mq-pr-tier-head { margin-bottom: 18px; } .mq-pr-tier-eyebrow { display: inline-block; font-family: var(--mq-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mq-rose-deep); margin-bottom: 10px; opacity: 0.85; } .mq-pr-tier-name { font-family: var(--mq-font-serif); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.6px; color: var(--mq-ink); margin: 0 0 8px; font-variation-settings: "opsz" 96, "SOFT" 50; } .mq-pr-tier-tagline { font-family: var(--mq-font-serif); font-weight: 400; font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--mq-rose-deep); margin: 0; font-variation-settings: "opsz" 60, "SOFT" 100; letter-spacing: -0.2px; } .mq-pr-tier-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(15, 27, 45, 0.08); } .mq-pr-tier-amount { font-family: var(--mq-font-serif); font-weight: 600; font-size: 44px; line-height: 1; color: var(--mq-ink); letter-spacing: -1.8px; font-variation-settings: "opsz" 144, "SOFT" 30; } .mq-pr-tier-amount-dec { font-size: 26px; letter-spacing: -0.8px; } .mq-pr-tier-period { font-family: var(--mq-font-sans); font-size: 13px; font-weight: 500; color: var(--mq-muted); } /* Bracket pricing — three rows showing price per photo-count bracket (up to 10 / up to 18 / up to 30). Replaces the single big price for tiers where pricing varies by book size. */ .mq-pr-bracket-list { list-style: none; margin: 6px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(15, 27, 45, 0.08); padding-top: 18px; } .mq-pr-bracket { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--mq-cream-light); border-radius: 12px; border: 1px solid rgba(15, 27, 45, 0.05); transition: border-color 0.15s ease, transform 0.12s ease; } .mq-pr-bracket:hover { border-color: rgba(255, 84, 112, 0.25); } .mq-pr-tier--featured .mq-pr-bracket { background: rgba(255, 224, 233, 0.55); border-color: rgba(255, 84, 112, 0.12); } .mq-pr-bracket-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Size name — "The Moment" / "The Story" / "The Heirloom" Sits above the photo/page line as the bracket's identity. */ .mq-pr-bracket-name { font-family: var(--mq-font-serif); font-weight: 500; font-style: italic; font-size: 16px; line-height: 1.2; color: var(--mq-rose-deep); letter-spacing: -0.3px; font-variation-settings: "opsz" 96, "SOFT" 100; } .mq-pr-bracket-photos { font-family: var(--mq-font-sans); font-size: 12.5px; font-weight: 500; color: var(--mq-ink-soft); opacity: 0.78; letter-spacing: 0.1px; } .mq-pr-bracket-pages { font-family: var(--mq-font-sans); font-size: 11.5px; font-weight: 500; color: var(--mq-muted); letter-spacing: 0.2px; } .mq-pr-bracket-price { font-family: var(--mq-font-serif); font-weight: 600; font-size: 26px; line-height: 1; color: var(--mq-ink); letter-spacing: -0.8px; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; font-variation-settings: "opsz" 144, "SOFT" 30; } .mq-pr-bracket-suffix { font-family: var(--mq-font-sans); font-size: 10.5px; font-weight: 500; color: var(--mq-muted); letter-spacing: 0.3px; text-transform: uppercase; } .mq-pr-tier-features { list-style: none; margin: 0 0 26px; padding: 0; flex-grow: 1; display: flex; flex-direction: column; gap: 12px; } .mq-pr-tier-features li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--mq-font-sans); font-size: 14px; line-height: 1.5; color: var(--mq-ink-soft); opacity: 0.88; } .mq-pr-tier-features li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--mq-rose); margin-top: 3px; } .mq-pr-tier-features strong { color: var(--mq-rose-deep); font-weight: 600; } .mq-pr-tier-cta { display: flex !important; width: 100% !important; min-width: 0 !important; margin-bottom: 14px; } .mq-pr-tier-footnote { font-family: var(--mq-font-sans); font-size: 12.5px; line-height: 1.5; color: var(--mq-muted); text-align: center; margin: 0; opacity: 0.75; } /* ----- PROMISE / "IN EVERY TIER" ----- */ .mq-pr-promise { background: var(--mq-turquoise-soft); /* soft mint, fits between cream tiers and lavender compare */ padding: 120px clamp(24px, 5vw, 56px); } .mq-pr-promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .mq-pr-promise-item { text-align: center; padding: 0 8px; } .mq-pr-promise-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--mq-rose-soft); color: var(--mq-rose-deep); margin-bottom: 18px; } .mq-pr-promise-icon svg { width: 26px; height: 26px; } .mq-pr-promise-item h3 { font-family: var(--mq-font-serif); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.4px; color: var(--mq-ink); margin: 0 0 8px; font-variation-settings: "opsz" 96, "SOFT" 50; } .mq-pr-promise-item p { font-family: var(--mq-font-sans); font-size: 14px; line-height: 1.6; color: var(--mq-ink-soft); opacity: 0.78; margin: 0; } /* ----- COMPARISON TABLE ----- */ .mq-pr-compare { background: #F0E9FB; /* same lavender as steps section */ padding: 120px clamp(24px, 5vw, 56px); } .mq-pr-table-wrap { max-width: 1100px; margin: 0 auto; overflow-x: auto; background: #fff; border-radius: 22px; box-shadow: 0 18px 44px rgba(15, 27, 45, 0.06); border: 1px solid rgba(15, 27, 45, 0.05); } .mq-pr-table { width: 100%; border-collapse: collapse; font-family: var(--mq-font-sans); } .mq-pr-table thead th { background: var(--mq-cream-light); font-family: var(--mq-font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: -0.3px; color: var(--mq-ink); padding: 22px 16px; text-align: center; border-bottom: 1px solid rgba(15, 27, 45, 0.06); font-variation-settings: "opsz" 96, "SOFT" 50; } .mq-pr-table thead th.mq-pr-table-feature { text-align: left; padding-left: 28px; } .mq-pr-table tbody th { font-family: var(--mq-font-sans); font-weight: 500; font-size: 14px; color: var(--mq-ink-soft); text-align: left; padding: 16px 16px 16px 28px; border-bottom: 1px solid rgba(15, 27, 45, 0.05); background: rgba(255, 255, 255, 0.5); width: 36%; } .mq-pr-table tbody td { font-size: 13.5px; font-weight: 500; color: var(--mq-ink-soft); text-align: center; padding: 16px 12px; border-bottom: 1px solid rgba(15, 27, 45, 0.05); border-left: 1px solid rgba(15, 27, 45, 0.04); } .mq-pr-table tbody tr:last-child th, .mq-pr-table tbody tr:last-child td { border-bottom: 0; } .mq-pr-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mq-rose-soft); color: var(--mq-rose-deep); font-size: 14px; font-weight: 700; line-height: 1; } .mq-pr-dash { color: rgba(15, 27, 45, 0.3); font-size: 16px; } .mq-pr-note { font-size: 12.5px; color: var(--mq-muted); font-style: italic; } /* ----- FAQ ----- */ .mq-pr-faq { background: var(--mq-rose-soft); /* soft blush, warm contrast between lavender compare and cream final */ padding: 120px clamp(24px, 5vw, 56px); } .mq-pr-faq-list { display: grid; gap: 14px; margin: 0; } .mq-pr-faq-item { background: var(--mq-cream-light); border-radius: 18px; padding: 28px 32px; border: 1px solid rgba(15, 27, 45, 0.04); } .mq-pr-faq-item dt { font-family: var(--mq-font-serif); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.4px; color: var(--mq-ink); margin: 0 0 10px; font-variation-settings: "opsz" 96, "SOFT" 50; } .mq-pr-faq-item dd { font-family: var(--mq-font-sans); font-size: 14.5px; line-height: 1.7; color: var(--mq-ink-soft); opacity: 0.82; margin: 0; } /* ----- FINAL CTA ----- */ .mq-pr-final { background: var(--mq-cream); padding: 100px clamp(24px, 5vw, 56px) 120px; text-align: center; } .mq-pr-final-inner .mq-pr-overline { margin-bottom: 18px; } .mq-pr-final-inner h2 { font-family: var(--mq-font-serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -1.6px; color: var(--mq-ink); margin: 0 0 18px; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .mq-pr-final-inner p { font-family: var(--mq-font-sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--mq-ink-soft); opacity: 0.8; margin: 0 auto 36px; max-width: 560px; } .mq-pr-final-inner .mq-hero-ctas { display: flex; justify-content: center; } /* ----- WAVY SECTION SEPARATORS ----- Same approach as the about page: each section's ::after is a wavy SVG filled with the NEXT section's background colour, so the wave reads as the next section spilling up. Forces position + overflow so the wave can sit absolutely at the bottom edge without leaking past it. */ .mq-pr-tiers, .mq-pr-promise, .mq-pr-compare, .mq-pr-faq, .mq-pr-final { position: relative; overflow: hidden; } .mq-pr-tiers { padding-bottom: 160px; } .mq-pr-promise { padding-bottom: 160px; } .mq-pr-compare { padding-bottom: 160px; } .mq-pr-faq { padding-bottom: 160px; } .mq-pr-final { padding-bottom: 160px; } .mq-pr-tiers::after, .mq-pr-promise::after, .mq-pr-compare::after, .mq-pr-faq::after, .mq-pr-final::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 64px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } /* Tiers (cream-light) → Promise (white) */ .mq-pr-tiers::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* Promise (white) → Compare (lavender) */ .mq-pr-promise::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,64 L0,64 Z' fill='%23F0E9FB'/%3E%3C/svg%3E"); } /* Compare (lavender) → FAQ (white) */ .mq-pr-compare::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* FAQ (white) → Final (cream) */ .mq-pr-faq::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C200,4 380,60 580,36 C760,14 940,56 1120,34 C1280,14 1380,48 1440,32 L1440,64 L0,64 Z' fill='%23FDE6C9'/%3E%3C/svg%3E"); } /* Final (cream) → Footer (navy) */ .mq-pr-final::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C180,56 360,4 540,30 C720,56 900,8 1080,32 C1260,56 1380,20 1440,34 L1440,64 L0,64 Z' fill='%230F1B2D'/%3E%3C/svg%3E"); } /* Inner content sits ABOVE the wave layer. */ .mq-pr-tiers > .mq-pr-inner, .mq-pr-promise > .mq-pr-inner, .mq-pr-compare > .mq-pr-inner, .mq-pr-faq > .mq-pr-inner, .mq-pr-final > .mq-pr-inner { position: relative; z-index: 2; } /* ----- PRICING PAGE MOBILE ----- */ @media (max-width: 1100px) { .mq-pr-tiers-grid { grid-template-columns: repeat(2, 1fr); } .mq-pr-tier--featured { transform: none; } .mq-pr-tier--featured:hover { transform: translateY(-3px); } .mq-pr-promise-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } } @media (max-width: 760px) { .mq-pr-tiers-grid, .mq-pr-tiers-grid--two { grid-template-columns: 1fr; gap: 20px; max-width: 460px; } .mq-pr-bracket { padding: 10px 14px; } .mq-pr-bracket-price { font-size: 22px; } } @media (max-width: 900px) { .mq-pr-hero { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; padding: 40px 20px; min-height: auto; } .mq-pr-hero::after { min-height: 56vw; /* image takes ~half the viewport width as a row */ background-size: cover; } .mq-pr-tiers { padding: 48px 20px 100px; } .mq-pr-promise, .mq-pr-compare, .mq-pr-faq, .mq-pr-final { padding: 72px 20px 100px; } /* Smaller waves on mobile */ .mq-pr-tiers::after, .mq-pr-promise::after, .mq-pr-compare::after, .mq-pr-faq::after, .mq-pr-final::after { height: 40px; } .mq-pr-section-head { margin-bottom: 40px; } .mq-pr-tier { padding: 32px 24px 26px; } .mq-pr-faq-item { padding: 22px 24px; } .mq-pr-table thead th, .mq-pr-table tbody th, .mq-pr-table tbody td { padding: 12px 10px; font-size: 12.5px; } .mq-pr-table thead th.mq-pr-table-feature, .mq-pr-table tbody th { padding-left: 16px; } } @media (max-width: 560px) { .mq-pr-tiers-grid { grid-template-columns: 1fr; gap: 18px; } .mq-pr-promise-grid { grid-template-columns: 1fr; gap: 28px; } .mq-pr-hero-pills li { font-size: 11.5px; padding: 2px 10px; } } /* ========================================================================== WORDPRESS / WOOCOMMERCE INTEGRATION Tame default block + button styles so they don't fight the brand palette. ========================================================================== */ /* Default buttons inside our content take rose palette unless they have their own class (.mq-cta-solid etc.). */ .wp-block-button:not(.mq-cta-solid):not(.is-style-outline) .wp-block-button__link { background: var(--mq-rose); color: #fff; border-radius: var(--mq-radius-pill); padding: 14px 28px; font-weight: 600; } .wp-block-button:not(.mq-cta-solid):not(.is-style-outline) .wp-block-button__link:hover { background: var(--mq-rose-dark); } /* Tame the gutter on the main content wrapper — front-page.html uses wp-block-group "main" which adds its own padding by default. */ main.wp-block-group { padding: 0; } /* Image blocks with curved card treatment */ .wp-block-image img { border-radius: var(--mq-radius-md); } /* Default block padding inside legal pages etc. */ .entry-content, .wp-block-post-content { max-width: 760px; margin: 48px auto; padding: 0 20px; font-size: 16.5px; line-height: 1.7; color: var(--mq-ink-soft); } .entry-content h1, .entry-content h2, .entry-content h3, .wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3 { font-family: var(--mq-font-serif); color: var(--mq-ink); margin: 2em 0 0.6em; line-height: 1.2; } .entry-content a, .wp-block-post-content a { color: var(--mq-rose-deep); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== Print & Stitch Guide — /print-guide/ — [memoricol_print_guide] Screen-readable + print-friendly customer assembly instructions. ========================================================================== */ .mq-pg-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; } .mq-pg-inner--narrow { max-width: 760px; } .mq-pg-overline { display: inline-block; font-family: var(--mq-font-sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mq-rose-deep); font-weight: 600; margin-bottom: 14px; } /* Hero --------------------------------------------------------------- */ .mq-pg-hero { background: linear-gradient(180deg, #fff6f1 0%, #ffffff 100%); padding: 80px 0 60px; text-align: center; } .mq-pg-hero h1 { font-family: var(--mq-font-serif); font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: var(--mq-ink); margin: 0 0 18px; line-height: 1.15; } .mq-pg-lede { font-size: 1.12rem; color: var(--mq-ink-soft, #4a5568); line-height: 1.55; max-width: 600px; margin: 0 auto 28px; } .mq-pg-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; font-size: 0.95rem; color: var(--mq-ink-soft, #4a5568); } .mq-pg-meta strong { color: var(--mq-ink); font-weight: 600; margin-right: 6px; } /* Sections ----------------------------------------------------------- */ .mq-pg-section { padding: 56px 0; } .mq-pg-section + .mq-pg-section { border-top: 1px solid #f0eae4; } .mq-pg-section h2 { font-family: var(--mq-font-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--mq-ink); margin: 0 0 20px; line-height: 1.2; } .mq-pg-section p { font-size: 1.02rem; color: var(--mq-ink-soft, #4a5568); line-height: 1.6; margin: 0 0 16px; } /* Files list --------------------------------------------------------- */ .mq-pg-files-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; } .mq-pg-files-list li { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 22px 24px; display: grid; gap: 8px; } .mq-pg-files-list strong { font-family: var(--mq-font-mono, ui-monospace, Menlo, monospace); font-size: 1.02rem; color: var(--mq-rose-deep); letter-spacing: 0.01em; } .mq-pg-files-list span { color: var(--mq-ink-soft, #4a5568); line-height: 1.55; font-size: 0.98rem; } /* Checklist ---------------------------------------------------------- */ .mq-pg-checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; } .mq-pg-checklist li { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--mq-ink); line-height: 1.5; } .mq-pg-check { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #fef0e9; color: var(--mq-rose-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; margin-top: 1px; } /* Steps -------------------------------------------------------------- */ .mq-pg-step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid #f0eae4; } .mq-pg-step:first-of-type { border-top: none; padding-top: 12px; } .mq-pg-step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--mq-rose-deep); color: #fff; font-family: var(--mq-font-serif); font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 4px; } .mq-pg-step--optional .mq-pg-step-num { background: #f0eae4; color: var(--mq-ink-soft, #4a5568); } .mq-pg-step-body h3 { font-family: var(--mq-font-serif); font-size: 1.32rem; color: var(--mq-ink); margin: 0 0 12px; line-height: 1.25; } .mq-pg-step-body p { font-size: 1rem; color: var(--mq-ink-soft, #4a5568); line-height: 1.6; margin: 0 0 12px; } .mq-pg-bullets { margin: 0 0 14px 18px; padding: 0; color: var(--mq-ink-soft, #4a5568); line-height: 1.6; } .mq-pg-bullets li { margin-bottom: 4px; } .mq-pg-bullets strong { color: var(--mq-ink); font-weight: 600; } .mq-pg-tip { background: #fff6f1; border-left: 3px solid var(--mq-rose-deep); padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 0.96rem !important; color: var(--mq-ink) !important; margin-top: 10px !important; } /* Troubleshooting FAQ ------------------------------------------------ */ .mq-pg-faq { margin: 24px 0 0; display: grid; gap: 16px; } .mq-pg-faq-item { background: #fff; border: 1px solid #ece6df; border-radius: 12px; padding: 18px 22px; } .mq-pg-faq-item dt { font-family: var(--mq-font-serif); font-size: 1.05rem; color: var(--mq-ink); font-weight: 600; margin-bottom: 8px; } .mq-pg-faq-item dd { margin: 0; color: var(--mq-ink-soft, #4a5568); line-height: 1.55; font-size: 0.98rem; } /* Final CTA ---------------------------------------------------------- */ .mq-pg-final { background: linear-gradient(180deg, #fff6f1 0%, #ffe9dd 100%); padding: 70px 0; text-align: center; } .mq-pg-final h2 { font-family: var(--mq-font-serif); font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--mq-ink); margin: 0 0 14px; } .mq-pg-final p { color: var(--mq-ink-soft, #4a5568); margin-bottom: 24px; } /* Mobile ------------------------------------------------------------- */ @media (max-width: 640px) { .mq-pg-hero { padding: 50px 0 36px; } .mq-pg-section { padding: 40px 0; } .mq-pg-step { grid-template-columns: 44px 1fr; gap: 16px; } .mq-pg-step-num { width: 38px; height: 38px; font-size: 1.1rem; } } /* Print stylesheet --------------------------------------------------- */ @media print { .mq-site-header, .mq-site-footer, .mq-pg-final, .mq-hero-ctas { display: none !important; } .mq-pg-hero { background: none; padding: 20px 0; } .mq-pg-section { padding: 16px 0; page-break-inside: avoid; } .mq-pg-step { page-break-inside: avoid; } .mq-pg-faq-item { page-break-inside: avoid; } body { color: #000; } } /* ===== Legal / policy pages (.mq-legal-*) ===== Styles the shell from inc-legal-pages.php: Privacy, Terms, Refund & reprint, Shipping & delivery. Uses theme --mq-* tokens (navy ink, coral accent, cream bg) + Fraunces serif headings / Inter body. Fluid via clamp(); explicit media queries trim padding on small screens. */ .mq-legal { display: block; color: var(--mq-ink); overflow-wrap: anywhere; word-break: break-word; } .mq-legal-inner { max-width: 720px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 40px); } /* --- Header ------------------------------------------------------------ */ .mq-legal-header { padding-bottom: clamp(20px, 3vw, 32px); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--mq-line, rgba(15, 27, 45, 0.08)); } .mq-legal-eyebrow { margin: 0 0 14px; font-family: var(--mq-font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mq-coral, #EE7C5F); } .mq-legal-title { margin: 0; font-family: var(--mq-font-serif); font-size: clamp(32px, 6vw, 54px); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; color: var(--mq-ink); } .mq-legal-effective { margin: 16px 0 0; font-family: var(--mq-font-sans); font-size: 0.95rem; line-height: 1.55; color: var(--mq-muted, #5B6577); } /* --- Prose ------------------------------------------------------------- */ .mq-legal-prose { font-family: var(--mq-font-sans); font-size: 1.0625rem; /* ~17px */ line-height: 1.65; color: var(--mq-ink-soft, #1F2A3A); overflow-wrap: anywhere; } .mq-legal-prose > *:first-child { margin-top: 0; } .mq-legal-prose h2 { margin: clamp(36px, 5vw, 52px) 0 0.6em; font-family: var(--mq-font-serif); font-size: clamp(22px, 3.2vw, 30px); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; color: var(--mq-ink); } .mq-legal-prose h3 { margin: clamp(24px, 3vw, 32px) 0 0.5em; font-family: var(--mq-font-serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; color: var(--mq-ink); } .mq-legal-prose p { margin: 0 0 1.1em; } .mq-legal-prose ul, .mq-legal-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; } .mq-legal-prose ul { list-style: disc; } .mq-legal-prose ol { list-style: decimal; } .mq-legal-prose li { margin-bottom: 0.5em; padding-left: 0.25em; } .mq-legal-prose li::marker { color: var(--mq-coral, #EE7C5F); } .mq-legal-prose li:last-child { margin-bottom: 0; } .mq-legal-prose strong { font-weight: 700; color: var(--mq-ink); } .mq-legal-prose em { font-style: italic; } .mq-legal-prose a { color: var(--mq-rose-deep, #C62853); text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; transition: color 0.15s ease; } .mq-legal-prose a:hover, .mq-legal-prose a:focus-visible { color: var(--mq-ink); } /* --- Footer ------------------------------------------------------------ */ .mq-legal-footer { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--mq-line, rgba(15, 27, 45, 0.08)); font-family: var(--mq-font-sans); font-size: 0.95rem; line-height: 1.6; color: var(--mq-muted, #5B6577); } .mq-legal-footer p { margin: 0; } .mq-legal-footer a { color: var(--mq-rose-deep, #C62853); font-weight: 600; text-decoration: underline; text-underline-offset: 0.12em; } .mq-legal-footer a:hover, .mq-legal-footer a:focus-visible { color: var(--mq-ink); } /* --- Responsive -------------------------------------------------------- */ @media (max-width: 600px) { .mq-legal-inner { padding: 36px 18px 52px; } .mq-legal-prose { font-size: 1rem; /* ~16px */ } } /* End of style.css — recovered 2026-05-29 from desktop mockup + inline mobile critical CSS + template markup. Hero mobile rules live in functions.php (wp_head callback + shortcode inline). */ /* ========================================================================= Mobile burger menu — on-brand full-screen overlay (2026-07). The WP core nav overlay shipped unstyled (blank white). This makes it a warm, animated, branded menu. ========================================================================= */ /* Hamburger + close glyphs: brand navy, comfy touch target. */ .mq-site-header .wp-block-navigation__responsive-container-open, .mq-site-header .wp-block-navigation__responsive-container-close { color: var(--mq-ink); padding: 10px; } .mq-site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; fill: currentColor; } /* Open overlay: warm branded gradient, full screen, centred menu. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; padding: 24px 28px 34px; background: radial-gradient(circle at 84% 10%, rgba(63,193,184,0.20) 0%, transparent 42%), radial-gradient(circle at 10% 90%, rgba(255,84,112,0.18) 0%, transparent 46%), linear-gradient(165deg, #FFF6ED 0%, #FFE9D6 55%, #FFE0E9 100%); animation: mq-menu-in 0.3s cubic-bezier(0.2,0.8,0.2,1) both; } @keyframes mq-menu-in { from { opacity: 0; } to { opacity: 1; } } /* Wordmark watermark, top-left of the sheet. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open::before { content: "memoricol"; font-family: var(--mq-font-serif); font-weight: 600; font-size: 26px; letter-spacing: -1px; color: var(--mq-ink); opacity: 0.9; align-self: flex-start; } /* Close button: coral circle, top-right. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--mq-rose); border-radius: 50%; box-shadow: 0 8px 20px var(--mq-rose-glow); } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; fill: currentColor; } /* Centre the links in the remaining space. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: center; gap: 4px; width: 100%; background: transparent; } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; text-align: center; } /* Big playful serif links, staggered in, coral on hover. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open a, .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: inline-flex; justify-content: center; font-family: var(--mq-font-serif); font-weight: 600; font-size: clamp(30px, 8vw, 44px); line-height: 1.15; letter-spacing: -0.5px; color: var(--mq-ink); opacity: 1; padding: 12px 8px; min-height: 0; transition: color 0.18s ease, transform 0.18s ease; animation: mq-menu-link 0.4s ease both; } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open a:hover, .mq-site-header .wp-block-navigation__responsive-container.is-menu-open a:focus { color: var(--mq-rose-deep); transform: scale(1.04); } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) a { animation-delay: 0.05s; } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) a { animation-delay: 0.11s; } .mq-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) a { animation-delay: 0.17s; } @keyframes mq-menu-link { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Friendly sign-off at the bottom. */ .mq-site-header .wp-block-navigation__responsive-container.is-menu-open::after { content: "Made from your photos \2665"; font-family: var(--mq-font-sans); font-weight: 600; font-size: 14px; color: var(--mq-rose-deep); text-align: center; opacity: 0.85; }