/* ============================================================ MY DEAR HONEY — GIFTS PAGE STYLES Loaded only on gifts.blade.php All rules scoped under .gifts-page on ============================================================ */ .gifts-page { --rose: #C94F7C; --rose-mid: #E8547A; --rose-light: #E88C8C; --blush: #F6C1C1; --blush-pale: #FFF5F5; --cream: #FDF8F8; --dark: #2D1B2E; --text: #4A3040; --muted: #8A6878; --grad-primary: linear-gradient(135deg, #C94F7C 0%, #E8547A 60%, #E88C8C 100%); --grad-soft: linear-gradient(135deg, #FFF5F5 0%, #FDE8EE 100%); --shadow-sm: 0 4px 16px rgba(201,79,124,0.10); --shadow-md: 0 8px 32px rgba(201,79,124,0.14); --shadow-lg: 0 16px 56px rgba(201,79,124,0.20); background: #ffffff; font-family: 'Poppins', sans-serif; } /* Stability — disable WOW/animate.css entrance animations */ .gifts-page .wow, .gifts-page .animated, .gifts-page [class*="bounceIn"], .gifts-page [class*="fadeIn"], .gifts-page [class*="zoomIn"], .gifts-page [class*="slideIn"] { visibility: visible !important; opacity: 1 !important; animation-name: none !important; animation-duration: 0s !important; transform: none !important; } /* ─── HERO ─── */ .gifts-hero { position: relative; padding: 150px 0 80px; background: linear-gradient(135deg, #FDF0F6 0%, #FFF0F3 50%, #FCE8E8 100%); overflow: hidden; } .gifts-hero::before { content: ''; position: absolute; top: -120px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(232,140,140,0.20) 0%, transparent 65%); pointer-events: none; } .gifts-hero::after { content: '♥'; position: absolute; bottom: 40px; left: 6%; font-size: 180px; line-height: 1; color: rgba(201,79,124,0.06); font-family: serif; pointer-events: none; } .gifts-hero .row { position: relative; z-index: 1; } .gh-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(201,79,124,0.25); color: var(--rose); border-radius: 50px; padding: 7px 20px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 1.4rem; box-shadow: var(--shadow-sm); } .gh-title { font-family: 'Playfair Display', serif !important; font-size: clamp(2.2rem, 4.8vw, 3.8rem) !important; color: var(--dark) !important; font-weight: 700 !important; line-height: 1.15 !important; margin-bottom: 1.2rem !important; } .gh-title em { font-style: italic !important; color: var(--rose) !important; } .gh-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.85; max-width: 520px; margin-bottom: 2rem; } .gh-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2rem; } .gh-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--grad-primary); color: #fff; border: none; border-radius: 50px; padding: 14px 34px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.98rem; text-decoration: none; box-shadow: 0 14px 34px rgba(201,79,124,0.32); transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1); } .gh-btn:hover { transform: translateY(-4px); color: #fff; box-shadow: 0 20px 44px rgba(201,79,124,0.45); } .gh-btn-ghost { background: transparent; color: var(--rose); border: 1.5px solid var(--rose); box-shadow: none; } .gh-btn-ghost:hover { background: var(--grad-primary); color: #fff; border-color: transparent; } .gh-mini-trust { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 1.4rem; border-top: 1px solid rgba(201,79,124,0.14); } .gh-mini-trust span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.84rem; font-weight: 500; } .gh-mini-trust span i { color: var(--rose); } .gh-image-wrap { position: relative; padding: 14px; background: linear-gradient(135deg, rgba(246,193,193,0.40) 0%, rgba(201,79,124,0.10) 100%); border-radius: 32px; box-shadow: 0 20px 60px rgba(201,79,124,0.22); } .gh-image-wrap img { width: 100%; border-radius: 22px; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: center; box-shadow: 0 16px 44px rgba(201,79,124,0.18); } .gh-float-card { position: absolute; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 14px 40px rgba(201,79,124,0.22); display: flex; align-items: center; gap: 12px; z-index: 2; } .gh-float-card.top { top: 30px; left: -24px; } .gh-float-card.bot { bottom: 46px; right: -24px; } .gh-float-card .emoji { font-size: 1.8rem; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #FFF0F3, #FDE8EE); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gh-float-card .t { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--dark); margin: 0; } .gh-float-card .s { font-size: 0.75rem; color: var(--muted); margin: 0; } /* ─── SHARED SECTION HEADING ─── */ .g-section-heading { text-align: center; margin-bottom: 56px; } .g-section-heading .tag { display: inline-block; background: rgba(255,255,255,0.95); color: var(--rose); border: 1px solid rgba(201,79,124,0.22); border-radius: 50px; padding: 5px 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 14px; } .g-section-heading h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--dark); line-height: 1.2; margin-bottom: 10px; } .g-section-heading h2 em { font-style: italic; color: var(--rose); } .g-section-heading > p { color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.85; font-size: 0.95rem; } /* ─── STORY SECTION (emotional flow) ─── */ .gifts-story { padding: 100px 0; background: #fff; } .story-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: stretch; position: relative; } .story-card { flex: 1 1 280px; max-width: 340px; background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 14px 40px rgba(201,79,124,0.10); border: 1px solid rgba(201,79,124,0.08); text-align: center; transition: all 0.35s ease; position: relative; } .story-card:hover { transform: translateY(-10px); box-shadow: 0 24px 60px rgba(201,79,124,0.22); } .story-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; display: block; margin-bottom: 16px; } .story-card-step { display: inline-block; background: var(--grad-primary); color: #fff; border-radius: 50px; padding: 3px 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 10px; } .story-card h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--dark); margin-bottom: 6px; } .story-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; margin: 0 0 12px; } .story-card .emoji-row { font-size: 1.3rem; letter-spacing: 4px; } .story-arrow { align-self: center; font-size: 1.6rem; color: var(--blush); padding: 0 4px; } /* ─── GIFT CATEGORIES ─── */ .gifts-categories { padding: 100px 0; background: linear-gradient(160deg, #FFF8F8 0%, #FDF0F6 100%); } .cat-card { position: relative; background: #fff; border-radius: 24px; padding: 40px 24px 28px; text-align: center; border: 1px solid rgba(201,79,124,0.10); box-shadow: 0 8px 30px rgba(201,79,124,0.08); transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); overflow: hidden; height: 100%; } .cat-card:hover { transform: translateY(-10px); box-shadow: 0 22px 60px rgba(201,79,124,0.22); border-color: rgba(201,79,124,0.20); } .cat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-primary); transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; } .cat-card:hover::before { transform: scaleX(1); } .cat-emoji { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #FFF0F3, #FDE8EE); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 2.6rem; transition: all 0.35s ease; } .cat-card:hover .cat-emoji { background: var(--grad-primary); transform: scale(1.08) rotate(-8deg); } .cat-card h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--dark); margin-bottom: 8px; } .cat-card p { color: var(--muted); font-size: 0.87rem; line-height: 1.7; margin: 0 0 18px; min-height: 44px; } .cat-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--grad-primary); color: #fff; border: none; border-radius: 50px; padding: 9px 24px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.86rem; text-decoration: none; transition: all 0.3s; } .cat-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 26px rgba(201,79,124,0.30); } .cat-btn i { transition: transform 0.3s; } .cat-btn:hover i { transform: translateX(3px); } /* ─── SEND-A-GIFT FORM SECTION ─── */ .gifts-form-section { padding: 100px 0; background: #fff; } /* Success flash banner */ .gift-success-msg { max-width: 640px; margin: 0 auto 2rem; background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04)); border: 1px solid rgba(34,197,94,0.30); color: #166534; border-radius: 16px; padding: 14px 22px; font-size: 0.92rem; display: flex; align-items: center; gap: 10px; } .gift-success-msg i { font-size: 1.1rem; } /* Live preview card */ .gift-preview { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 14px 40px rgba(201,79,124,0.14); border: 1px solid rgba(201,79,124,0.10); position: sticky; top: 110px; } .gift-preview-img { position: relative; aspect-ratio: 4/3; background: var(--grad-soft); overflow: hidden; } .gift-preview-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .preview-badge { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); color: var(--rose); border-radius: 50px; padding: 5px 14px; font-size: 0.76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.05em; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .gift-preview-body { padding: 26px 24px 28px; } .gift-preview-body h4 { font-family: 'Playfair Display', serif; color: var(--dark); font-size: 1.2rem; margin-bottom: 10px; line-height: 1.3; word-break: break-word; } .gift-preview-body p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0 0 14px; word-break: break-word; } .price-row { font-family: 'Playfair Display', serif; color: var(--rose); font-size: 1.35rem; font-weight: 600; margin: 0 0 14px; display: flex; align-items: baseline; gap: 6px; } .view-amazon { display: inline-flex; align-items: center; gap: 8px; color: var(--rose); border: 1.5px solid rgba(201,79,124,0.30); background: #fff; border-radius: 50px; padding: 9px 20px; font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: all 0.3s; } .view-amazon i { font-size: 1.05rem; } .view-amazon:hover { background: var(--grad-primary); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(201,79,124,0.30); } /* Form */ .gift-form { background: #fff; border-radius: 24px; padding: 34px 32px 30px; box-shadow: 0 14px 40px rgba(201,79,124,0.10); border: 1px solid rgba(201,79,124,0.10); } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--dark); margin-bottom: 7px; letter-spacing: 0.02em; } .form-row label .req { color: var(--rose); } .gift-input { width: 100%; padding: 13px 18px; border: 1.5px solid rgba(201,79,124,0.20); border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 0.92rem; color: var(--text); background: #FDF8F8; transition: all 0.25s ease; } .gift-input:focus { outline: none; border-color: var(--rose); background: #fff; box-shadow: 0 0 0 4px rgba(201,79,124,0.10); } .gift-input::placeholder { color: #B39BA3; } textarea.gift-input { resize: vertical; min-height: 96px; line-height: 1.6; } .input-with-icon { position: relative; } .input-with-icon > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--rose); font-size: 1rem; pointer-events: none; } .gift-input.with-icon { padding-left: 42px; } .form-row .help { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--muted); line-height: 1.5; } .gift-form-submit { width: 100%; background: var(--grad-primary); color: #fff; border: none; border-radius: 50px; padding: 16px 32px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 12px 30px rgba(201,79,124,0.32); transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1); } .gift-form-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(201,79,124,0.45); background: linear-gradient(135deg,#B8406C,#C94F7C); } .gift-form-submit i { transition: transform 0.3s; } .gift-form-submit:hover i { transform: translateX(3px); } .form-footnote { text-align: center; margin: 16px 0 0; font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; } .form-footnote i { color: var(--rose); } /* ─── WHY-GIFT / EMOTION STRIP ─── */ .gifts-emotion { padding: 100px 0; background: linear-gradient(135deg, #FFF5F5 0%, #FDE8EE 100%); position: relative; overflow: hidden; } .gifts-emotion::before { content: '♥'; position: absolute; top: -40px; right: -30px; font-size: 280px; opacity: 0.05; color: var(--rose); font-family: serif; line-height: 1; pointer-events: none; } .emotion-item { text-align: center; padding: 24px 16px; } .emotion-item .ic { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: var(--shadow-sm); transition: all 0.35s ease; } .emotion-item:hover .ic { background: var(--grad-primary); transform: translateY(-6px) rotate(-8deg); } .emotion-item:hover .ic span { filter: brightness(1.5); } .emotion-item h5 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--dark); margin-bottom: 6px; } .emotion-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.7; margin: 0; } /* ─── CTA ─── */ .gifts-cta { padding: 100px 0; background: #fff; } .gcta-inner { background: linear-gradient(135deg, #C94F7C 0%, #8B2252 60%, #6B1A42 100%); border-radius: 32px; padding: 80px 48px; text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(201,79,124,0.30); } .gcta-inner::before, .gcta-inner::after { content: '♥'; position: absolute; font-size: 220px; opacity: 0.06; color: #fff; pointer-events: none; line-height: 1; font-family: serif; } .gcta-inner::before { top: -30px; left: 3%; } .gcta-inner::after { bottom: -40px; right: 4%; } .gcta-inner h2 { font-family: 'Playfair Display', serif !important; color: #fff !important; font-size: clamp(1.9rem, 3.3vw, 2.8rem) !important; font-weight: 700 !important; margin-bottom: 1rem !important; line-height: 1.2 !important; position: relative; z-index: 1; } .gcta-inner h2 em { font-style: italic !important; color: #F6C1C1 !important; } .gcta-inner p { color: rgba(255,255,255,0.88); max-width: 560px; margin: 0 auto 2rem; line-height: 1.85; font-size: 1rem; position: relative; z-index: 1; } .gcta-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--rose); border: none; border-radius: 50px; padding: 15px 40px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.98rem; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,0.22); transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1); position: relative; z-index: 1; } .gcta-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.32); color: var(--rose); } /* ─── RESPONSIVE ─── */ @media (max-width: 1199px) { .gh-float-card.top { left: 10px; } .gh-float-card.bot { right: 10px; } } @media (max-width: 991px) { .gifts-hero { padding: 120px 0 60px; } .gh-image-wrap { margin-top: 50px; } .story-arrow { transform: rotate(90deg); padding: 8px 0; } } @media (max-width: 991px) { .gift-preview { position: static; margin-bottom: 28px; } } @media (max-width: 768px) { .gifts-story, .gifts-categories, .gifts-form-section, .gifts-emotion, .gifts-cta { padding: 60px 0; } .gift-form { padding: 26px 20px 22px; } .gcta-inner { padding: 56px 24px; border-radius: 24px; } .gh-float-card { display: none; } .g-section-heading { margin-bottom: 40px; } .story-card { max-width: 100%; } } @media (max-width: 576px) { .gifts-hero { padding: 100px 0 50px; } .cat-emoji { width: 76px; height: 76px; font-size: 2.2rem; } .gh-actions { width: 100%; } .gh-btn, .gh-btn-ghost { width: 100%; justify-content: center; } }