/* English comments only per requirement. Pink-centric, glossy UI. */ :root { --pink-50: #fff0f6; --pink-100: #ffd6e7; --pink-200: #ffadd2; --pink-300: #ff85c0; --pink-400: #f759ab; --pink-500: #eb2f96; --pink-600: #c41d7f; --pink-700: #9e1068; --pink-800: #780650; --pink-900: #520339; --white: #ffffff; --bg: #0f0a12; --text: #fefbff; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1200px 800px at 20% 10%, rgba(235,47,150,0.15), transparent 60%), radial-gradient(1200px 900px at 80% 30%, rgba(247,89,171,0.12), transparent 60%), #0b0610; color: var(--text); overflow-x: hidden; } /* Soft glow aura behind hero */ .glow-aura { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(600px 400px at 30% 20%, rgba(255,133,192,0.25), transparent 60%), radial-gradient(500px 300px at 70% 35%, rgba(247,89,171,0.15), transparent 60%); filter: blur(4px) saturate(120%); animation: auraPulse 10s ease-in-out infinite; } @keyframes auraPulse { 0%,100%{opacity:.8} 50%{opacity:.5} } /* Hero section */ .hero { position: relative; z-index: 1; min-height: 70vh; display: grid; place-items: center; background: linear-gradient(180deg, rgba(235,47,150,0.15), rgba(120,6,80,0.15)), url('images/bg-pink.jpg') center/cover no-repeat; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,6,16,0.6) 0%, rgba(11,6,16,0.8) 100%); } .hero__content { position: relative; text-align: center; padding: 4rem 1rem; } .logo { font-family: "Parisienne", cursive; font-size: clamp(3rem, 8vw, 8rem); margin: 0; line-height: 1; color: var(--white); text-shadow: 0 10px 30px rgba(235,47,150,0.5), 0 2px 0 rgba(255,255,255,0.6); background: linear-gradient(90deg, var(--pink-200), var(--pink-500)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 20px rgba(235,47,150,0.35)); } .tagline { margin: 1rem auto 2rem; max-width: 48rem; color: var(--pink-100); font-weight: 700; letter-spacing: .03em; } .cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { position: relative; display: inline-block; padding: .9rem 1.4rem; border-radius: 999px; text-decoration: none; font-weight: 900; letter-spacing: .06em; transition: transform .2s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { color: var(--white); background: linear-gradient(135deg, var(--pink-400), var(--pink-600)); box-shadow: 0 10px 25px rgba(235,47,150,0.35), inset 0 0 20px rgba(255,255,255,0.15); } .btn--ghost { color: var(--pink-200); border: 2px solid var(--pink-400); background: linear-gradient(135deg, rgba(235,47,150,0.15), rgba(235,47,150,0.05)); } .btn--shine { color: var(--white); background: linear-gradient(135deg, var(--pink-300), var(--pink-500)); box-shadow: 0 10px 25px rgba(235,47,150,0.4); overflow: hidden; } .btn--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: shine 2.8s linear infinite; } @keyframes shine { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } /* Sections */ .section { position: relative; z-index: 1; padding: 5rem 0; } .container { width: min(92%, 1080px); margin: 0 auto; } .section h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 1rem; color: var(--pink-100); } .section--about p { line-height: 1.9; color: var(--white); } .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; list-style: none; padding: 0; } .highlights li { background: rgba(120,6,80,0.25); border: 1px solid rgba(247,89,171,0.35); border-radius: 16px; padding: 1rem 1.2rem; backdrop-filter: blur(6px); } /* Gallery */ .section--gallery { background: linear-gradient(180deg, rgba(120,6,80,0.1), rgba(11,6,16,0.6)); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } .card { position: relative; border-radius: 18px; overflow: hidden; transform-style: preserve-3d; perspective: 800px; box-shadow: 0 14px 40px rgba(235,47,150,0.25); } .card img { width: 100%; height: 320px; object-fit: cover; display: block; } .card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem; color: var(--white); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); font-weight: 700; } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 120px at 50% 0%, rgba(255,255,255,0.35), transparent); opacity: 0; transition: opacity .3s; } .card:hover::before { opacity: 1; } /* Placeholder styling when images are unavailable */ .card.card--placeholder { background: radial-gradient(800px 260px at 50% 20%, rgba(255,173,210,0.25), transparent), linear-gradient(135deg, rgba(235,47,150,0.25), rgba(120,6,80,0.25)); } .card.card--placeholder::after { content: "ピンクの瞬間"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--pink-50); font-weight: 900; letter-spacing: .1em; text-shadow: 0 10px 30px rgba(235,47,150,0.4); } /* CTA */ .section--cta { text-align: center; background: radial-gradient(800px 300px at 50% 0%, rgba(235,47,150,0.2), transparent), rgba(11,6,16,0.6); } .section--cta p { color: var(--pink-100); } /* Footer */ .footer { padding: 2rem 0; text-align: center; color: var(--pink-200); border-top: 1px solid rgba(235,47,150,0.25); background: rgba(11,6,16,0.6); } /* Particles canvas full-screen */ #particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Responsive tweaks */ @media (max-width: 640px) { .hero { min-height: 60vh; } .card img { height: 240px; } } /* Scroll reveal animation */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); }