/* =========================================================== Tori's Touch — crafting business (Austin, TX) Shared stylesheet =========================================================== */ :root { /* Pinks */ --pink: #D4537E; --pink-light: #F4C0D1; --pink-soft: #FBEAF0; --rose-dark: #72243E; /* Purples */ --purple: #534AB7; --purple-light: #7F77DD; --purple-soft: #EEEDFE; --purple-dark: #3C3489; /* Neutrals */ --ink: #2c2740; --muted: #6b6780; --bg: #fffafc; --white: #ffffff; --shadow: 0 10px 30px rgba(83, 74, 183, 0.12); --shadow-lg: 0 20px 45px rgba(114, 36, 62, 0.18); --radius: 20px; --maxw: 1120px; --font-head: "Poppins", "Segoe UI", system-ui, sans-serif; --font-body: "Nunito", "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; /* page fade-in */ animation: pageFade 0.7s ease both; } /* opacity-only — animating transform on would make position:fixed (the lightbox) resolve against the page instead of the viewport */ @keyframes pageFade { from { opacity: 0; } to { opacity: 1; } } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--ink); margin: 0 0 0.5em; } h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); } a { color: var(--purple); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-head); font-weight: 600; padding: 0.85rem 1.7rem; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; text-decoration: none; font-size: 1rem; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn-pink { background: var(--pink); color: var(--white); box-shadow: 0 8px 20px rgba(212, 83, 126, 0.35); } .btn-pink:hover { background: #bf3f6c; } .btn-purple { background: var(--purple); color: var(--white); box-shadow: 0 8px 20px rgba(83, 74, 183, 0.35); } .btn-purple:hover { background: var(--purple-dark); } .btn-outline { background: transparent; color: var(--purple); border: 2px solid var(--purple); } .btn-outline:hover { background: var(--purple); color: var(--white); } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--purple-soft); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.25rem; max-width: var(--maxw); margin: 0 auto; } .brand { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--pink); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .brand:hover { text-decoration: none; } /* Animated scissors logo */ .scissors { width: 34px; height: 34px; flex: none; overflow: visible; } .scissors .blade-top, .scissors .blade-bottom { transform-box: view-box; transform-origin: 40px 32px; } .scissors .blade-top { animation: snip-top 2s ease-in-out infinite; } .scissors .blade-bottom { animation: snip-bottom 2s ease-in-out infinite; } @keyframes snip-top { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-11deg); } } @keyframes snip-bottom { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(11deg); } } .brand:hover .scissors .blade-top { animation-duration: 0.5s; } .brand:hover .scissors .blade-bottom { animation-duration: 0.5s; } .nav-links { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; color: var(--ink); font-weight: 600; font-family: var(--font-head); font-size: 0.95rem; transition: background 0.15s ease, color 0.15s ease; } .nav-links a:hover { background: var(--pink-soft); color: var(--pink); text-decoration: none; } .nav-links a.active { background: var(--pink); color: var(--white); } .nav-links a.nav-cta { background: var(--purple); color: var(--white); } .nav-links a.nav-cta:hover { background: var(--purple-dark); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; } .nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--purple); border-radius: 3px; transition: 0.25s; } /* ---------- Hero ---------- */ .hero { position: relative; text-align: center; padding: 5.5rem 1.25rem 5rem; overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(212, 83, 126, 0.16), transparent 45%), radial-gradient(circle at 80% 25%, rgba(83, 74, 183, 0.16), transparent 45%), linear-gradient(160deg, var(--pink-soft), var(--purple-soft)); } .hero .container { position: relative; z-index: 2; } .hero h1 { margin-bottom: 0.5rem; } .hero .tagline { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--muted); max-width: 620px; margin: 0 auto 1.9rem; } .hero-gradient-text { background: linear-gradient(90deg, var(--pink), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Confetti layer (dots injected by JS) */ .confetti-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .confetti { position: absolute; top: -20px; border-radius: 50%; opacity: 0.85; animation: confetti-fall linear infinite; } .confetti.sq { border-radius: 3px; } @keyframes confetti-fall { 0% { transform: translateY(-10%) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translateY(115vh) rotate(540deg); opacity: 0.9; } } /* ---------- Eyebrow / section heads ---------- */ .eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--pink); margin-bottom: 0.5rem; } .section { padding: 4.5rem 0; } .section-alt { background: var(--white); } .section-head { text-align: center; max-width: 700px; margin: 0 auto 2.75rem; } .section-head p { color: var(--muted); font-size: 1.1rem; } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--purple); color: var(--white); } .trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; padding: 1.4rem 1.25rem; max-width: var(--maxw); margin: 0 auto; } .trust-item { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; } .trust-item .ico { font-size: 1.3rem; } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: 1.5rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--white); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow); border: 1px solid var(--purple-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* hover lift + slight tilt */ .card:hover { transform: translateY(-8px) rotate(-1.4deg); box-shadow: var(--shadow-lg); } .card .icon { font-size: 2rem; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); margin-bottom: 1rem; } .card h3 { margin-bottom: 0.4rem; } .card p { color: var(--muted); margin: 0; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; } .about-photo { border-radius: var(--radius); aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--pink), var(--purple)); display: grid; place-items: center; color: var(--white); font-family: var(--font-head); font-size: 1.1rem; text-align: center; box-shadow: var(--shadow); overflow: hidden; } .about-photo img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Gallery ---------- */ .gallery-filters { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; } .filter-btn { font-family: var(--font-head); font-weight: 600; padding: 0.5rem 1.2rem; border-radius: 999px; border: 2px solid var(--purple-soft); background: var(--white); color: var(--muted); cursor: pointer; transition: 0.15s; } .filter-btn:hover { border-color: var(--pink); color: var(--pink); } .filter-btn.active { background: var(--purple); border-color: var(--purple); color: var(--white); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--pink-light), var(--purple-light)); cursor: pointer; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .gallery-item:hover { transform: translateY(-6px) rotate(-1.4deg); box-shadow: var(--shadow-lg); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item .placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 0.3rem; color: var(--white); font-family: var(--font-head); font-weight: 700; text-align: center; padding: 1rem; } .gallery-item .placeholder .emoji { font-size: 2.6rem; } .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(60, 52, 137, 0.8), transparent 60%); color: var(--white); display: flex; align-items: flex-end; padding: 1rem; opacity: 0; transition: opacity 0.2s ease; font-family: var(--font-head); font-weight: 600; } .gallery-item:hover .overlay { opacity: 1; } /* ---------- Step process ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto 3rem; } .step { background: var(--white); border-radius: var(--radius); padding: 1.4rem 1rem; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--purple-soft); position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; } .step:hover { transform: translateY(-6px) rotate(-1.4deg); box-shadow: var(--shadow-lg); } .step .num { width: 40px; height: 40px; margin: 0 auto 0.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); color: var(--white); font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; } .step h4 { margin: 0 0 0.2rem; font-size: 1.02rem; } .step p { margin: 0; color: var(--muted); font-size: 0.9rem; } /* ---------- Forms ---------- */ .form-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); border: 1px solid var(--purple-soft); max-width: 760px; margin: 0 auto; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .field { margin-bottom: 1.3rem; } .field label { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; } .field .req { color: var(--pink); } .field input, .field select, .field textarea { width: 100%; padding: 0.8rem 1rem; border: 2px solid var(--purple-soft); border-radius: 12px; font-family: var(--font-body); font-size: 1rem; background: var(--bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(212, 83, 126, 0.15); } .field textarea { resize: vertical; min-height: 130px; } .field .hint { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; } .field .error-msg { color: var(--rose-dark); font-size: 0.85rem; margin-top: 0.3rem; display: none; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--rose-dark); } .field.invalid .error-msg { display: block; } .form-success { display: none; background: var(--purple-soft); border: 2px solid var(--purple); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--purple-dark); font-family: var(--font-head); font-weight: 600; margin-bottom: 1.5rem; } .form-success.show { display: block; } /* ---------- Contact cards ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 820px; margin: 0 auto; } .contact-card { background: var(--white); border-radius: var(--radius); padding: 2rem; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--purple-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; display: block; color: inherit; } .contact-card:hover { transform: translateY(-8px) rotate(-1.4deg); box-shadow: var(--shadow-lg); text-decoration: none; } .contact-card .c-ico { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); } .contact-card .c-ico svg { width: 30px; height: 30px; fill: var(--purple); } .contact-card h3 { margin-bottom: 0.3rem; } .contact-card p { color: var(--muted); margin: 0; word-break: break-word; } /* ---------- CTA strip ---------- */ .cta-strip { background: linear-gradient(135deg, var(--pink), var(--purple)); color: var(--white); text-align: center; padding: 3.5rem 1.25rem; border-radius: var(--radius); } .cta-strip h2 { color: var(--white); } .cta-strip p { opacity: 0.92; max-width: 560px; margin: 0 auto 1.6rem; } .cta-strip .btn-pink { background: var(--white); color: var(--pink); } .cta-strip .btn-pink:hover { background: var(--pink-soft); } /* ---------- Price tag on service cards ---------- */ .card .price { font-family: var(--font-head); font-weight: 700; color: var(--pink); margin: 0.9rem 0 0; font-size: 0.98rem; } /* ---------- Testimonials ---------- */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial { background: var(--white); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow); border: 1px solid var(--purple-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .testimonial:hover { transform: translateY(-8px) rotate(-1.4deg); box-shadow: var(--shadow-lg); } .testimonial .stars { color: #f6b73c; font-size: 1.05rem; letter-spacing: 2px; } .testimonial blockquote { margin: 0.6rem 0 1.1rem; font-style: italic; color: var(--ink); } .testimonial .who { font-family: var(--font-head); font-weight: 700; color: var(--purple); } /* ---------- Featured "Recent creations" strip ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .feature-grid a { display: block; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-grid a:hover { transform: translateY(-8px) rotate(-1.4deg); box-shadow: var(--shadow-lg); text-decoration: none; } .feature-grid img { width: 100%; height: 100%; object-fit: cover; } .feature-cta { text-align: center; margin-top: 2.2rem; } @media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr 1fr; } } /* ---------- FAQ (native accordion) ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--white); border: 1px solid var(--purple-soft); border-radius: 14px; margin-bottom: 0.8rem; box-shadow: var(--shadow); overflow: hidden; } .faq summary { cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-head); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--pink); font-size: 1.5rem; font-weight: 700; line-height: 1; transition: transform 0.2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq-body { padding: 0 1.3rem 1.2rem; color: var(--muted); } .faq .faq-body a { font-weight: 700; } /* ---------- Footer (dark rose) ---------- */ .site-footer { background: var(--rose-dark); color: #f3d8e1; padding: 3rem 0 1.5rem; margin-top: 4.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; } .site-footer h4 { color: var(--white); margin-bottom: 0.8rem; } .site-footer a { color: #f3d8e1; } .site-footer a:hover { color: var(--white); } .footer-brand .brand { color: var(--white); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.5rem; } .social-row { display: flex; gap: 0.8rem; margin-top: 0.8rem; } .social-row a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.12); transition: 0.18s; } .social-row a:hover { background: var(--pink); transform: translateY(-4px) rotate(-6deg); } .social-row svg { width: 20px; height: 20px; fill: var(--white); } .footer-bottom { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.95rem; color: #e6b9c8; } /* ---------- Lightbox ---------- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(60, 52, 137, 0.9); align-items: center; justify-content: center; padding: 2rem; } .lightbox.show { display: flex; } .lightbox-content { max-width: 90vw; max-height: 85vh; border-radius: var(--radius); } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; line-height: 1; z-index: 2; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: none; color: var(--white); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background 0.15s ease, transform 0.15s ease; } .lightbox-nav:hover { background: var(--pink); } .lightbox-prev { left: 1.2rem; } .lightbox-next { right: 1.2rem; } @media (max-width: 600px) { .lightbox-nav { width: 44px; height: 44px; font-size: 1.2rem; } .lightbox-prev { left: 0.4rem; } .lightbox-next { right: 0.4rem; } } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { body { animation: none; } .scissors .blade-top, .scissors .blade-bottom, .confetti { animation: none; } .reveal { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 880px) { .nav-toggle { display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--white); padding: 1rem 1.25rem; gap: 0.3rem; border-bottom: 1px solid var(--purple-soft); box-shadow: var(--shadow); display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 0.7rem 1rem; } .grid-3 { grid-template-columns: 1fr 1fr; } .testimonial-grid { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; gap: 2rem; } .steps { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 620px) { .grid-3, .grid-2, .testimonial-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .card { padding: 1.5rem; } } @media (max-width: 420px) { .steps { grid-template-columns: 1fr; } } /* ========================================================= LEVEL-UP UPGRADES (hero collage, promise, IG, polish) ========================================================= */ /* ---- Split hero with photo collage ---- */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; text-align: left; } .hero-split .hero-text .tagline { margin: 0 0 1.9rem; max-width: 540px; } .hero-split .hero-actions { justify-content: flex-start; } .hero-collage { position: relative; width: 100%; aspect-ratio: 1 / 0.9; } .hero-collage img { position: absolute; border-radius: 18px; border: 5px solid #fff; box-shadow: var(--shadow-lg); object-fit: cover; } .hero-collage img:nth-child(1) { --r: 4deg; width: 56%; aspect-ratio: 1/1; top: 2%; right: 3%; transform: rotate(var(--r)); z-index: 2; animation: floaty 6s ease-in-out infinite; } .hero-collage img:nth-child(2) { --r: -6deg; width: 48%; aspect-ratio: 1/1; bottom: 0; left: 1%; transform: rotate(var(--r)); z-index: 3; animation: floaty 6s ease-in-out infinite 1.4s; } .hero-collage img:nth-child(3) { --r: -3deg; width: 40%; aspect-ratio: 1/1; top: 32%; right: 0; transform: rotate(var(--r)); z-index: 1; animation: floaty 6s ease-in-out infinite 0.8s; } @keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-12px) rotate(var(--r)); } } /* ---- Gradient primary button + shine ---- */ .btn-gradient { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 10px 24px rgba(83, 74, 183, 0.32); } .btn-gradient:hover { filter: brightness(1.06); } /* ---- 4-up grid (the Promise) ---- */ .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---- Image zoom on hover (gallery + featured) ---- */ .gallery-item img, .feature-grid img { transition: transform 0.45s ease; } .gallery-item:hover img, .feature-grid a:hover img { transform: scale(1.06); } /* ---- Instagram strip ---- */ .ig-strip { background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); } .ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; max-width: 920px; margin: 0 auto 1.8rem; } .ig-grid a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow); } .ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .ig-grid a:hover img { transform: scale(1.1); } .ig-cta { text-align: center; } /* ---- Responsive for the new pieces ---- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-split .hero-text .tagline { margin: 0 auto 1.9rem; } .hero-split .hero-actions { justify-content: center; } .hero-collage { max-width: 400px; margin: 0.5rem auto 0; } .grid-4 { grid-template-columns: 1fr 1fr; } .ig-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- Honor reduced motion for new animations ---- */ @media (prefers-reduced-motion: reduce) { .hero-collage img { animation: none; } } /* ========================================================= ROCKET UPGRADES — announce bar, Design Studio, reviews, VIP capture, floating buttons, celebrations (2026-06-21) ========================================================= */ /* ---- Announcement bar (JS-injected, dismissible) ---- */ .announce-bar { background: linear-gradient(90deg, var(--pink), var(--purple)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; } .announce-inner { max-width: var(--maxw); margin: 0 auto; padding: 0.62rem 2.6rem 0.62rem 1.25rem; position: relative; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; text-align: center; } .announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .announce-close { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.22); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; transition: background 0.15s ease; } .announce-close:hover { background: rgba(255,255,255,0.4); } /* ---- Promo banner (Design Studio invite) ---- */ .promo-banner { background: linear-gradient(135deg, var(--purple), var(--pink)); border-radius: var(--radius); color: #fff; padding: 2.4rem 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--shadow-lg); } .promo-banner .promo-copy { display: flex; align-items: center; gap: 1.2rem; } .promo-banner h2 { color: #fff; margin: 0 0 0.25rem; } .promo-banner p { margin: 0; opacity: 0.93; max-width: 46ch; } .promo-banner .btn { background: #fff; color: var(--purple); white-space: nowrap; } .promo-banner .btn:hover { background: var(--purple-soft); } .promo-emoji { font-size: 3rem; line-height: 1; flex: none; } @media (max-width: 620px) { .promo-banner { padding: 1.9rem; } .promo-banner .promo-copy { flex-direction: column; text-align: center; } } /* ---- Design Studio / Builder ---- */ .builder { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: start; } .builder-main { display: flex; flex-direction: column; gap: 1.6rem; } .bstep { background: var(--white); border: 1px solid var(--purple-soft); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow); } .bstep > h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: 1.12rem; } .bstep .bnum { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 0.95rem; } .bstep .b-hint { font-weight: 600; color: var(--muted); font-size: 0.82rem; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.7rem; } .choice { border: 2px solid var(--purple-soft); background: var(--bg); border-radius: 14px; padding: 0.85rem 0.7rem; cursor: pointer; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 0.93rem; color: var(--ink); transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; user-select: none; display: flex; flex-direction: column; gap: 0.25rem; align-items: center; } .choice .c-emoji { font-size: 1.6rem; } .choice .c-sub { font-size: 0.76rem; font-weight: 600; color: var(--muted); } .choice:hover { border-color: var(--pink); transform: translateY(-2px); } .choice:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(83,74,183,0.2); } .choice.selected { border-color: var(--purple); background: var(--purple-soft); color: var(--purple-dark); box-shadow: 0 0 0 3px rgba(83,74,183,0.12); } .choice.selected .c-sub { color: var(--purple); } .qty-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--muted); } .stepper { display: inline-flex; align-items: center; border: 2px solid var(--purple-soft); border-radius: 999px; overflow: hidden; background: #fff; } .stepper button { width: 44px; height: 44px; border: none; background: var(--bg); color: var(--purple); font-size: 1.4rem; cursor: pointer; font-family: var(--font-head); line-height: 1; } .stepper button:hover { background: var(--purple-soft); } .stepper input { width: 66px; text-align: center; border: none; font-size: 1.05rem; font-family: var(--font-head); font-weight: 700; background: #fff; -moz-appearance: textfield; color: var(--ink); } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .builder-summary { position: sticky; top: 92px; background: linear-gradient(160deg, var(--white), var(--purple-soft)); border: 1px solid var(--purple-soft); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-lg); } .builder-summary h3 { margin: 0 0 0.2rem; } .builder-summary .bs-sub { margin: 0; color: var(--muted); font-size: 0.92rem; } .summary-list { list-style: none; margin: 1.1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .summary-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.94rem; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--purple-soft); } .summary-list li span:last-child { font-family: var(--font-head); font-weight: 700; color: var(--purple); text-align: right; } .summary-empty { color: var(--muted); font-style: italic; } .estimate { text-align: center; background: #fff; border-radius: 14px; padding: 1rem; margin: 0 0 1.1rem; border: 1px solid var(--purple-soft); } .estimate .num { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; background: linear-gradient(90deg, var(--pink), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .estimate .lbl { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .builder-summary .btn { width: 100%; text-align: center; } .builder-note { font-size: 0.79rem; color: var(--muted); text-align: center; margin: 0.8rem 0 0; } /* ---- VIP / newsletter band ---- */ .vip { background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); } .vip-card { max-width: 660px; margin: 0 auto; text-align: center; } .vip-form { display: flex; gap: 0.7rem; max-width: 470px; margin: 1.3rem auto 0; } .vip-form input[type=email] { flex: 1; padding: 0.85rem 1.1rem; border: 2px solid var(--purple-soft); border-radius: 999px; font-family: var(--font-body); font-size: 1rem; background: #fff; } .vip-form input[type=email]:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(212,83,126,0.15); } .vip .form-success { margin: 1.1rem auto 0; max-width: 470px; } .vip-fine { font-size: 0.82rem; color: var(--muted); margin: 0.7rem 0 0; } @media (max-width: 480px) { .vip-form { flex-direction: column; } } /* ---- Reviews ---- */ .review-invite { max-width: 640px; margin: 0 auto; text-align: center; background: var(--white); border: 1.5px dashed var(--purple-light); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); } .review-invite .stars-big { color: #f6b73c; font-size: 1.5rem; letter-spacing: 3px; } .review-invite .review-toggle { margin-top: 1rem; } .review-form { display: none; margin-top: 1.4rem; text-align: left; } .review-form.open { display: block; } .review-form .form-row { margin-bottom: 0; } /* ---- Floating quote button + back-to-top ---- */ .fab-quote { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; font-family: var(--font-head); font-weight: 700; padding: 0.8rem 1.3rem; border-radius: 999px; box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(160%); transition: transform 0.3s ease, filter 0.15s ease; display: flex; align-items: center; gap: 0.4rem; } .fab-quote.show { transform: none; } .fab-quote:hover { filter: brightness(1.07); text-decoration: none; } .to-top { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 89; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--white); color: var(--purple); box-shadow: var(--shadow-lg); cursor: pointer; font-size: 1.3rem; line-height: 1; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.15s ease; } .to-top.show { opacity: 1; pointer-events: auto; } .to-top:hover { transform: translateY(-3px); background: var(--purple-soft); } /* ---- Confetti burst layer (celebrations) ---- */ .burst-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1200; overflow: hidden; } /* ---- Builder responsive ---- */ @media (max-width: 900px) { .builder { grid-template-columns: 1fr; } .builder-summary { position: relative; top: 0; } } @media (prefers-reduced-motion: reduce) { .fab-quote { transition: opacity 0.2s ease; } } /* ---- Idea photo upload (drag/drop + preview) ---- */ .idea-upload { margin-top: 0.4rem; } .idea-label { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; } .idea-label .opt { color: var(--muted); font-weight: 600; font-size: 0.85rem; } .dropzone { position: relative; border: 2px dashed var(--purple-light); border-radius: 14px; background: var(--bg); padding: 1.4rem; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .dropzone:hover, .dropzone.drag { border-color: var(--pink); background: var(--pink-soft); } .dropzone:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(83,74,183,0.2); } .dz-idle .dz-emoji { font-size: 1.9rem; } .dz-idle p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; } .dz-idle p strong { color: var(--ink); } .dz-hint { font-size: 0.8rem; } .dz-preview { display: flex; align-items: center; gap: 0.9rem; text-align: left; } .dz-idle[hidden], .dz-preview[hidden] { display: none; } .dz-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: var(--shadow); background: var(--purple-soft); } .dz-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .dz-name { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-status { font-size: 0.82rem; color: var(--muted); } .dz-status.ok { color: #1b8a5a; font-weight: 700; } .dz-status.err { color: var(--rose-dark); font-weight: 700; } .dz-remove { flex: none; background: var(--purple-soft); border: none; color: var(--purple); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; } .dz-remove:hover { background: var(--pink); color: #fff; }