/* Vigor Beauty CN — custom styles Palette: soft pink primary, deeper rose accent, neutral grays Inherits from Tailwind utility classes (Play CDN loaded in ) */ :root { --pink-50: #fdf5f7; --pink-100: #fce8ee; --pink-200: #fad5e0; --pink-300: #f5b3c5; --pink-400: #ec85a0; --pink-500: #d9617f; --pink-600: #c0476a; --pink-700: #9d3654; --rose-accent: #b76e79; --text-primary: #2a2a2a; --text-secondary: #555; --bg-soft: #fafafa; --border-soft: #e5e5e5; } * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: var(--text-primary); background: white; line-height: 1.6; } a { color: var(--pink-600); transition: color 0.2s; } a:hover { color: var(--pink-700); } .site-header { border-bottom: 1px solid var(--border-soft); } .wordmark { font-weight: 700; letter-spacing: 0.05em; color: var(--pink-600); } /* Hero */ .hero { background: linear-gradient(135deg, var(--pink-50) 0%, white 100%); padding: 4rem 0; } .hero h1 { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; line-height: 1.2; } .hero .accent { color: var(--pink-600); } .hero .subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin-bottom: 2rem; } @media (min-width: 768px) { .hero h1 { font-size: 3.5rem; } } /* Buttons */ .btn-primary { background: var(--pink-600); color: white; padding: 0.75rem 2rem; border-radius: 0.375rem; font-weight: 600; display: inline-block; transition: background 0.2s, transform 0.1s; } .btn-primary:hover { background: var(--pink-700); color: white; transform: translateY(-1px); } .btn-secondary { background: white; color: var(--pink-600); border: 1px solid var(--pink-600); padding: 0.75rem 2rem; border-radius: 0.375rem; font-weight: 600; display: inline-block; } .btn-secondary:hover { background: var(--pink-50); } /* Section */ .section { padding: 4rem 0; } .section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .section h3 { font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--pink-700); } .section p { color: var(--text-secondary); margin-bottom: 1rem; } /* Cards */ .card { background: white; border: 1px solid var(--border-soft); border-radius: 0.5rem; padding: 1.5rem; transition: box-shadow 0.2s, transform 0.1s; } .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); } .card-pink { background: var(--pink-50); border-color: var(--pink-200); } /* Tables */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; } th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border-soft); } th { background: var(--pink-50); font-weight: 600; color: var(--pink-700); } /* Photo gallery */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; margin: 1rem 0; } .photo-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 0.375rem; cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .photo-grid img:hover { opacity: 0.9; transform: scale(1.02); } /* Lightbox */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); display: none; z-index: 100; align-items: center; justify-content: center; padding: 2rem; } .lightbox.active { display: flex; } .lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; } .lightbox-close { position: absolute; top: 1rem; right: 1rem; color: white; font-size: 2rem; cursor: pointer; background: none; border: none; } /* Footer */ footer a:hover { color: var(--pink-300); } /* Lang toggle */ .lang-toggle { background: white; border: 1px solid var(--pink-600); color: var(--pink-600); padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .lang-toggle:hover { background: var(--pink-50); } /* Mobile menu */ .mobile-menu { display: none; flex-direction: column; padding: 1rem; background: white; border-top: 1px solid var(--border-soft); } .mobile-menu.active { display: flex; } .mobile-menu a { padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); color: var(--text-primary); } .mobile-toggle { display: none; background: none; border: none; cursor: pointer; } @media (max-width: 767px) { .mobile-toggle { display: block; } .nav-desktop { display: none; } } /* Savings calculator (pricing page) */ .calculator { background: var(--pink-50); border-radius: 0.5rem; padding: 2rem; margin: 2rem 0; } .calculator .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--pink-200); } .calculator .savings { color: var(--pink-700); font-weight: 700; } /* Transit playbook (transit page) */ .transit-path { border: 1px solid var(--border-soft); border-radius: 0.5rem; padding: 1.5rem; margin: 1.5rem 0; } .transit-path .path-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .transit-path .path-letter { background: var(--pink-600); color: white; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } .transit-path .meta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; } .transit-path .meta span { background: var(--pink-100); padding: 0.25rem 0.625rem; border-radius: 0.25rem; } /* Form */ .form-field { margin-bottom: 1rem; } .form-field label { display: block; font-weight: 500; margin-bottom: 0.25rem; color: var(--text-primary); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 0.625rem; border: 1px solid var(--border-soft); border-radius: 0.375rem; font-size: 1rem; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--pink-600); box-shadow: 0 0 0 2px var(--pink-100); } /* Utility */ .text-pink { color: var(--pink-600); } .bg-pink-soft { background: var(--pink-50); } .divider { border-top: 2px solid var(--pink-200); width: 60px; margin: 1.5rem 0; }