.fluffy-cover-inquiry { --fluffy-accent: #fa9ebc; --fluffy-accent-700: #f26f98; --fluffy-accent-900: #e74c7b; --fluffy-text: #1f2937; --fluffy-text-light: #374151; --fluffy-muted: #6b7280; --fluffy-bg: #ffffff; --fluffy-bg-alt: #f8fafc; --fluffy-stroke: #e5e7eb; --fluffy-success: #15803d; --fluffy-shadow: 0 4px 24px rgba(31, 41, 55, 0.08); --fluffy-shadow-hover: 0 8px 32px rgba(250, 158, 188, 0.24); --fluffy-modal-z: 2147483647; margin: 1.25rem 0 1rem; color: var(--fluffy-text); } .fluffy-cover-inquiry *, .fluffy-cover-inquiry *::before, .fluffy-cover-inquiry *::after { box-sizing: border-box; } /* Trigger bar next to add-to-cart */ .fluffy-cover-inquiry__trigger { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.8rem 1rem; background: var(--fluffy-bg-alt); border: 1px solid var(--fluffy-stroke); border-radius: 12px; cursor: pointer; text-align: left; color: var(--fluffy-text); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .fluffy-cover-inquiry__trigger:hover, .fluffy-cover-inquiry__trigger:focus-visible { border-color: var(--fluffy-accent); box-shadow: var(--fluffy-shadow); outline: none; } .fluffy-cover-inquiry__trigger:active { transform: translateY(1px); } .fluffy-cover-inquiry__trigger-icon { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; } .fluffy-cover-inquiry__trigger-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; font-size: 0.9rem; color: var(--fluffy-muted); } .fluffy-cover-inquiry__trigger-text strong { font-size: 1rem; color: var(--fluffy-text); } .fluffy-cover-inquiry__trigger-arrow { flex: 0 0 auto; font-size: 1.2rem; font-weight: 800; color: var(--fluffy-accent-700); transition: transform 0.15s ease; } .fluffy-cover-inquiry__trigger:hover .fluffy-cover-inquiry__trigger-arrow { transform: translateX(3px); } /* Overlay + dialog */ .fluffy-cover-inquiry__overlay { position: fixed; inset: 0; z-index: var(--fluffy-modal-z, 2147483647) !important; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(17, 24, 39, 0.55); opacity: 0; transition: opacity 0.2s ease; overflow-y: auto; isolation: isolate; transform: translateZ(0); } /* The overlay is portalled to to escape the sticky stacking context. */ .fluffy-cover-inquiry__overlay.fluffy-cover-inquiry[data-fluffy-cover-portal="true"] { margin: 0 !important; } /* Keep the overlay fully out of the way while closed. A class-level `display:flex` otherwise beats the UA `[hidden]{display:none}` rule and leaves a full-screen, click-blocking layer over the page. */ .fluffy-cover-inquiry__overlay[hidden] { display: none !important; } .fluffy-cover-inquiry__overlay.is-open { opacity: 1; } body.fluffy-cover-modal-open { overflow: hidden; } .fluffy-cover-inquiry__dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; padding: 1.6rem 1.5rem 1.5rem; background: var(--fluffy-bg); border-radius: 18px; box-shadow: 0 24px 60px rgba(17, 24, 39, 0.35); transform: translateY(14px); transition: transform 0.2s ease; } .fluffy-cover-inquiry__overlay.is-open .fluffy-cover-inquiry__dialog { transform: none; } .fluffy-cover-inquiry__close { position: absolute; z-index: 2; top: 0.75rem; right: 0.75rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--fluffy-bg-alt); border: 1px solid var(--fluffy-stroke); border-radius: 999px; font-size: 1.35rem; line-height: 1; color: var(--fluffy-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .fluffy-cover-inquiry__close:hover, .fluffy-cover-inquiry__close:focus-visible { background: var(--fluffy-accent); color: #fff; outline: none; } /* Head */ .fluffy-cover-inquiry__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .fluffy-cover-inquiry__eyebrow { display: block; margin-bottom: 0.3rem; color: var(--fluffy-accent-900); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .fluffy-cover-inquiry h3 { margin: 0; color: var(--fluffy-text); font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.25; } .fluffy-cover-inquiry__badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(250, 158, 188, 0.12); border: 1px solid rgba(250, 158, 188, 0.35); border-radius: 999px; font-size: 1.5rem; line-height: 1; } .fluffy-cover-inquiry__lead { margin: 0 0 1.1rem; color: var(--fluffy-text-light); font-size: 0.98rem; line-height: 1.5; } /* Form */ .fluffy-cover-inquiry__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .fluffy-cover-inquiry__field { display: grid; gap: 0.35rem; min-width: 0; } .fluffy-cover-inquiry__label { font-size: 0.85rem; font-weight: 800; color: var(--fluffy-text-light); } .fluffy-cover-inquiry__label em { color: var(--fluffy-accent-900); font-style: normal; } .fluffy-cover-inquiry__input, .fluffy-cover-inquiry__select { width: 100%; padding: 0.75rem 0.9rem; background: var(--fluffy-bg-alt); border: 2px solid var(--fluffy-stroke); border-radius: 10px; color: var(--fluffy-text); font-size: 1rem; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .fluffy-cover-inquiry__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f26f98' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; cursor: pointer; } .fluffy-cover-inquiry__input:focus, .fluffy-cover-inquiry__select:focus { outline: none; background-color: #fff; border-color: var(--fluffy-accent); box-shadow: 0 0 0 4px rgba(250, 158, 188, 0.16); } .fluffy-cover-inquiry__other { margin-top: 0.4rem; } /* Honeypot — hidden from users, present in the DOM for bots */ .fluffy-cover-inquiry__hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .fluffy-cover-inquiry__hint { margin: 0.9rem 0 0; color: var(--fluffy-muted); font-size: 0.85rem; line-height: 1.45; } .fluffy-cover-inquiry__hint em { color: var(--fluffy-accent-900); font-style: normal; font-weight: 800; } .fluffy-cover-inquiry__submit { width: 100%; margin-top: 1rem; padding: 0.9rem 1rem; background: linear-gradient(135deg, var(--fluffy-accent) 0%, var(--fluffy-accent-700) 100%); border: none; border-radius: 12px; color: #fff; font-size: 1.02rem; font-weight: 800; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .fluffy-cover-inquiry__submit:hover { box-shadow: var(--fluffy-shadow-hover); transform: translateY(-1px); } .fluffy-cover-inquiry__submit:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; } .fluffy-cover-inquiry__msg { margin: 0.9rem 0 0; padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.92rem; font-weight: 700; line-height: 1.45; color: var(--fluffy-success); background: #ecfdf3; border: 1px solid rgba(21, 128, 61, 0.28); } .fluffy-cover-inquiry__msg.is-error { color: var(--fluffy-accent-900); background: rgba(250, 158, 188, 0.1); border-color: rgba(231, 76, 123, 0.35); } /* Responsive */ @media (max-width: 600px) { .fluffy-cover-inquiry__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .fluffy-cover-inquiry__overlay { padding: 0; align-items: flex-end; } .fluffy-cover-inquiry__dialog { max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0; padding: 1.4rem 1.15rem 1.25rem; } }