/* * Occasion accent layer — sits on top of planit-brand.css. * Every page sets ; the shared brand * system (buttons/cards/badges/type) never changes, only the accent + hero flourish do. */ [data-occasion="birthday"] { --planit-occasion-accent: #FF7F50; } [data-occasion="wedding"] { --planit-occasion-accent: #701049; } [data-occasion="general"] { --planit-occasion-accent: #4E0437; } /* ---------- Hero ---------- */ .planit-hero { position: relative; overflow: hidden; /* Horizontal margin here used to stack on top of .planit-container's own side padding, making the hero visibly narrower than every card below it. Vertical-only margin so it lines up flush with the rest of the content's edges. */ margin: 16px 0 0; padding: 40px 32px; border-radius: 20px; background: linear-gradient(135deg, var(--planit-brand-start), var(--planit-brand-end)); box-shadow: 0 20px 40px rgba(58, 3, 43, 0.25); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .planit-hero-content { max-width: 58%; position: relative; z-index: 2; } .planit-hero-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; } .planit-hero-title { font-size: 30px; font-weight: 700; color: var(--planit-text-light); margin: 0 0 8px; line-height: 1.15; } .planit-hero-sub { color: rgba(255, 255, 255, 0.82); font-size: 14px; margin: 0; } .planit-hero-cta { margin-top: 20px; } .planit-hero-decor { position: relative; width: 220px; height: 160px; flex-shrink: 0; z-index: 1; } @media (max-width: 720px) { .planit-hero { flex-direction: column; align-items: flex-start; padding: 28px 22px; } .planit-hero-content { max-width: 100%; } .planit-hero-decor { display: none; } } /* ---------- Gift-card CTA (animated, replaces old raster banner) ---------- */ .planit-giftcard { position: relative; overflow: hidden; border-radius: 16px; padding: 28px; background: linear-gradient(135deg, var(--planit-occasion-accent), var(--planit-brand-end)); color: var(--planit-text-light); display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); } .planit-giftcard-copy { max-width: 60%; position: relative; z-index: 2; } .planit-giftcard-copy h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .planit-giftcard-copy p { margin: 0 0 16px; font-size: 13px; color: rgba(255, 255, 255, 0.85); } .planit-giftcard-decor { width: 92px; height: 92px; position: relative; z-index: 1; flex-shrink: 0; } @media (max-width: 620px) { .planit-giftcard { flex-direction: column; align-items: center; text-align: center; } .planit-giftcard-copy { max-width: 100%; } /* DOM order is copy-then-decor (fine on desktop, side by side) — stacked on mobile that put the icon below the button, reading as a mistake. Flip it to the top with `order` rather than reordering the markup. */ .planit-giftcard-decor { order: -1; margin-bottom: 4px; } } /* ---------- Animated decoration primitives (built by planit-decor.js) ---------- */ .planit-decor-float { position: absolute; opacity: 0.95; animation: planit-float 6s ease-in-out infinite; } .planit-decor-spin { animation: planit-spin 14s linear infinite; } .planit-decor-sparkle { animation: planit-sparkle 2.4s ease-in-out infinite; } .planit-decor-drift { animation: planit-drift 9s ease-in-out infinite; } @keyframes planit-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } } @keyframes planit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes planit-sparkle { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes planit-drift { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(6px) translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .planit-decor-float, .planit-decor-spin, .planit-decor-sparkle, .planit-decor-drift { animation: none; } }