/* ===== DESIGN SYSTEM UPGRADE v3: "Warm Maple Discovery" ===== */ /* Target: Singaporean parents 25-40, premium but accessible */ /* Append this to styles-optimized.css or load as a separate stylesheet */ /* ============================================================ 1. REFINED COLOR PALETTE — warmer, more curated tones ============================================================ */ :root { /* Refined brand colors — softer, warmer, more premium */ --maple-red: #b5342d; /* was #c0392b — deeper, less harsh */ --maple-red-soft: #d4614e; /* new: warm terracotta for accents */ --maple-red-glow: #e8a9a2; /* new: blush-red for subtle backgrounds */ --maple-green: #2a9d5c; /* was #27ae60 — slightly richer */ --maple-green-soft:#6bc49a; /* new: soft mint for secondary accents */ --maple-gold: #c49a2a; /* was #b8860b — warmer honey-gold */ --maple-gold-soft: #e8c96a; /* new: buttery highlight */ --maple-gold-pale: #fdf3d7; /* new: pale gold wash for section tints */ --maple-blue: #1e7da0; /* was #1a6b8a — brighter, friendlier */ --maple-blue-deep: #155d78; /* new: deeper blue for contrast */ --maple-blue-soft: #a8d4e6; /* new: sky-blue for backgrounds */ /* Warm cream backgrounds — more differentiation */ --cream: #fef9ef; --cream-warm: #fdf4e3; --cream-blush: #fef5f2; --cream-mist: #f4f6f9; /* was #f8f9fb — slightly warmer gray */ /* Neutral refinement */ --dark: #1c1c2e; /* was #1a1a2e — slightly warmer */ --dark-soft: #2e2e48; --mid: #52526e; /* was #4a4a6a — softer purple-gray */ --muted: #8a8aa0; /* new: for secondary body text */ --white: #ffffff; /* Semantic backgrounds */ --bg-page: #fffdf8; /* warm white, not #fff */ --bg-section-alt: #f7f4ee; /* warm alternate section */ --bg-card: #ffffff; --bg-subtle: #faf8f4; } /* ============================================================ 2. TYPOGRAPHY — add serif display font for premium feel ============================================================ */ /* Load Fraunces (warm, soft serif) + keep Nunito/Poppins */ /* Add this link to of HTML: */ /* */ :root { --font-display: 'Fraunces', 'Georgia', serif; /* new: hero/section headings */ --font-heading: 'Poppins', sans-serif; /* existing: subheadings */ --font-body: 'Nunito', sans-serif; /* existing: body text */ } /* Display headings — serif for warmth, softer weights */ .hero-title, .section-title-display { font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -0.03em; line-height: 1.08; } /* Hero specific: bigger serif heading with gold accent */ .hero-title { font-size: clamp(2.8rem, 6.5vw, 5rem); font-weight: 300; font-variation-settings: "SOFT" 60, "WONK" 0; } .hero-title em { font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 70, "WONK" 1; color: var(--maple-gold-soft); } /* Section titles with serif display */ .section-title-display { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--dark); margin-bottom: 12px; } /* Subtitle refinement — slightly larger, more breathing room */ .section-sub { font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.7; color: var(--mid); max-width: 680px; } /* Body text — improve readability */ body { font-family: var(--font-body); font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.75; color: var(--dark); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 3. LAYERED SHADOW SYSTEM — colored, multi-depth ============================================================ */ :root { /* Multi-layer shadow stacks for realistic elevation */ --shadow-xs: 0 1px 2px rgba(28,28,46,0.04); --shadow-sm: 0 1px 3px rgba(28,28,46,0.06), 0 1px 2px rgba(28,28,46,0.04); --shadow: 0 4px 6px rgba(28,28,46,0.04), 0 2px 4px rgba(28,28,46,0.03), 0 8px 24px rgba(28,28,46,0.06); --shadow-md: 0 8px 16px rgba(28,28,46,0.06), 0 4px 8px rgba(28,28,46,0.04), 0 16px 40px rgba(28,28,46,0.08); --shadow-lg: 0 16px 32px rgba(28,28,46,0.08), 0 8px 16px rgba(28,28,46,0.04), 0 24px 60px rgba(28,28,46,0.1); /* Colored shadows for brand elements */ --shadow-red-soft: 0 4px 12px rgba(181,52,45,0.15), 0 2px 4px rgba(181,52,45,0.08); --shadow-gold-soft: 0 4px 12px rgba(196,154,42,0.12), 0 2px 4px rgba(196,154,42,0.06); --shadow-blue-soft: 0 4px 12px rgba(30,125,160,0.1), 0 2px 4px rgba(30,125,160,0.05); --shadow-green-soft: 0 4px 12px rgba(42,157,92,0.12), 0 2px 4px rgba(42,157,92,0.06); /* Card hover shadow — colored glow */ --shadow-card-hover: 0 12px 32px rgba(28,28,46,0.08), 0 4px 12px rgba(181,52,45,0.06); } /* ============================================================ 4. SPRING-BASED MOTION — natural, alive feel ============================================================ */ :root { /* Spring-like easing curves (out-back + out-expo) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Transition durations */ --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 500ms; --dur-hero: 800ms; } /* Staggered reveal for grid items */ .animate-on-scroll.is-visible .stagger-1 { transition-delay: 0ms; } .animate-on-scroll.is-visible .stagger-2 { transition-delay: 80ms; } .animate-on-scroll.is-visible .stagger-3 { transition-delay: 160ms; } .animate-on-scroll.is-visible .stagger-4 { transition-delay: 240ms; } .animate-on-scroll.is-visible .stagger-5 { transition-delay: 320ms; } .animate-on-scroll.is-visible .stagger-6 { transition-delay: 400ms; } /* ============================================================ 5. ORGANIC BACKGROUND TREATMENTS ============================================================ */ /* Subtle noise texture overlay — adds warmth to flat surfaces */ .noise-overlay { position: relative; } .noise-overlay::before { content: ''; position: absolute; inset: 0; opacity: 0.025; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* Section with top-edge organic curve */ .section-curved-top { position: relative; margin-top: -40px; padding-top: calc(40px + var(--space-section)); border-radius: 40px 40px 0 0; } /* Warm vignette — subtle radial glow behind content */ .vignette-warm { position: relative; } .vignette-warm::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 80%; height: 140%; background: radial-gradient( ellipse at center, rgba(253,244,227,0.6) 0%, transparent 70% ); pointer-events: none; z-index: 0; } /* Accent corner decorations — subtle organic shapes */ .corner-accent { position: relative; } .corner-accent::after { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--maple-gold-pale); opacity: 0.5; z-index: 0; pointer-events: none; } /* Section with gradient wash — more sophisticated than flat color */ .section-wash-warm { background: linear-gradient(180deg, var(--cream-warm) 0%, var(--bg-page) 100%); } .section-wash-cool { background: linear-gradient(180deg, #f0f6f9 0%, var(--bg-page) 100%); } .section-wash-blush { background: linear-gradient(180deg, var(--cream-blush) 0%, var(--bg-page) 100%); } /* ============================================================ 6. PREMIUM BUTTON REDESIGN ============================================================ */ /* Primary button — subtle inner glow, press depth, refined hover */ .btn-primary { position: relative; background: var(--maple-red); color: var(--white); border: none; border-radius: 60px; padding: 16px 36px; font-weight: 700; font-size: var(--text-sm); font-family: var(--font-heading); letter-spacing: 0.01em; transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo), background-color var(--dur-fast) ease; box-shadow: 0 4px 12px rgba(181,52,45,0.25), 0 2px 4px rgba(181,52,45,0.15), inset 0 1px 0 rgba(255,255,255,0.15); } .btn-primary:hover { background: #a32e28; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(181,52,45,0.3), 0 4px 8px rgba(181,52,45,0.2), inset 0 1px 0 rgba(255,255,255,0.15); } .btn-primary:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 6px rgba(181,52,45,0.2), inset 0 1px 3px rgba(0,0,0,0.15); transition-duration: 80ms; } /* Secondary / outline button */ .btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.6); border-radius: 60px; padding: 14px 34px; font-weight: 700; font-size: var(--text-sm); font-family: var(--font-heading); transition: transform var(--dur-normal) var(--ease-spring), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.9); transform: translateY(-2px); } .btn-outline:active { transform: translateY(1px) scale(0.98); transition-duration: 80ms; } /* Green CTA button */ .btn-green { background: var(--maple-green); color: var(--white); border-radius: 60px; padding: 16px 36px; font-weight: 700; font-size: var(--text-sm); font-family: var(--font-heading); box-shadow: var(--shadow-green-soft); transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo); } .btn-green:hover { background: #238a4f; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42,157,92,0.25), 0 4px 8px rgba(42,157,92,0.15); } .btn-green:active { transform: translateY(1px) scale(0.98); box-shadow: var(--shadow-green-soft); transition-duration: 80ms; } /* Gold accent button */ .btn-gold { background: var(--maple-gold); color: var(--white); border-radius: 60px; padding: 16px 36px; font-weight: 700; font-size: var(--text-sm); font-family: var(--font-heading); box-shadow: var(--shadow-gold-soft); transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo); } .btn-gold:hover { background: #b08a24; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,154,42,0.25), 0 4px 8px rgba(196,154,42,0.15); } /* Small button variant */ .btn-sm { padding: 10px 22px; font-size: 0.82rem; border-radius: 50px; } /* ============================================================ 7. ENHANCED CARD STYLES — depth, texture, intentionality ============================================================ */ /* Base card with refined shadow and subtle border */ .premium-card { background: var(--bg-card); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .premium-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } /* Card with top accent line */ .premium-card--accent { position: relative; overflow: hidden; } .premium-card--accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--maple-red), var(--maple-gold-soft)); opacity: 0; transition: opacity var(--dur-normal) ease; } .premium-card--accent:hover::before { opacity: 1; } /* Card with subtle inner glow */ .premium-card--glow { position: relative; } .premium-card--glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); pointer-events: none; } /* Glass card — for hero overlays */ .glass-card { background: rgba(255,255,255,0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 28px; } /* ============================================================ 8. SECTION HEADER REFINEMENT — editorial composition ============================================================ */ .section-header { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; position: relative; } /* Decorative maple-leaf accent above section title */ .section-header::before { content: ''; display: block; width: 48px; height: 4px; background: linear-gradient(90deg, var(--maple-red), var(--maple-gold-soft)); border-radius: 2px; margin: 0 auto 20px; } .section-header .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 400; font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--dark); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; } .section-header .section-sub { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; color: var(--mid); } /* Left-aligned variant */ .section-header--left { text-align: left; margin-left: 0; } .section-header--left::before { margin: 0 0 20px; } /* ============================================================ 9. HERO ENHANCEMENTS — layered depth, warmth ============================================================ */ /* Refined hero overlay — warm gradient, not cold blue-black */ .hero-enhanced::after { background: linear-gradient( 135deg, rgba(28,28,46,0.55) 0%, rgba(28,28,46,0.25) 50%, rgba(181,52,45,0.15) 100% ) !important; } /* Hero stat cards — glass morphism refinement */ .hero-stat { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.35); border-radius: 16px; padding: 24px 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo); } .hero-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); } .hero-stat-number { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 600; color: var(--maple-red); line-height: 1; margin-bottom: 6px; } .hero-stat-label { font-size: 0.82rem; font-weight: 600; color: var(--maple-blue); letter-spacing: 0.02em; text-transform: uppercase; } /* Hero badge — refined */ .hero-badge { background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.95); padding: 8px 20px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* ============================================================ 10. TRUST BAR REFINEMENT ============================================================ */ .trust-bar-enhanced { background: var(--bg-card); border-bottom: 1px solid rgba(28,28,46,0.04); box-shadow: var(--shadow-xs); } .trust-item { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600; color: var(--dark); letter-spacing: 0.01em; } .trust-icon { background: var(--cream-warm); box-shadow: var(--shadow-gold-soft); } /* ============================================================ 11. WHY CHOOSE CARDS — refined ============================================================ */ .why-card { border-radius: 20px; padding: 36px 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .why-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--maple-gold-pale), var(--cream-warm)); box-shadow: var(--shadow-gold-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } /* ============================================================ 12. PROGRAMME CARDS — refined ============================================================ */ .programme-card { border-radius: 24px; box-shadow: var(--shadow); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .programme-card:hover { box-shadow: var(--shadow-lg); } .programme-card-age { background: var(--cream-warm); color: var(--maple-red); font-weight: 700; letter-spacing: 0.02em; } /* ============================================================ 13. REVIEW / TESTIMONIAL CARDS — refined ============================================================ */ .review-card { border-radius: 20px; padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); position: relative; transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Large quotation mark — editorial touch */ .review-card::before { content: '\201C'; position: absolute; top: 12px; left: 20px; font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--maple-red); opacity: 0.08; pointer-events: none; } .stars { color: var(--maple-gold); font-size: 1rem; letter-spacing: 3px; } .reviewer-avatar { background: linear-gradient(135deg, var(--maple-red-soft), var(--maple-gold-soft)); } /* ============================================================ 14. FAQ ACCORDION — refined ============================================================ */ details.faq-item { border-radius: 16px; border: 1px solid rgba(28,28,46,0.06); box-shadow: var(--shadow-xs); transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease; } details.faq-item:hover { border-color: rgba(181,52,45,0.2); } details.faq-item[open] { border-color: rgba(181,52,45,0.25); box-shadow: 0 4px 16px rgba(181,52,45,0.06), 0 1px 3px rgba(181,52,45,0.04); } details.faq-item summary { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--dark); padding: 20px 24px; } details.faq-item summary::after { color: var(--maple-red); font-weight: 400; } details.faq-item .faq-answer { color: var(--mid); line-height: 1.8; } /* ============================================================ 15. CTA BANNER — refined ============================================================ */ .cta-banner { border-radius: 28px; overflow: hidden; background: linear-gradient( 135deg, var(--maple-red) 0%, #9a2d26 50%, #7a2420 100% ); box-shadow: 0 8px 32px rgba(181,52,45,0.2), 0 2px 8px rgba(181,52,45,0.1); } /* Decorative circles — more organic placement */ .cta-banner::before { width: 350px; height: 350px; top: -30%; right: -10%; background: rgba(255,255,255,0.04); } .cta-banner::after { width: 200px; height: 200px; bottom: -25%; left: -5%; background: rgba(255,255,255,0.03); } /* Gold variant */ .cta-banner--gold { background: linear-gradient( 135deg, var(--maple-gold) 0%, #a8841e 50%, #8a6d18 100% ); box-shadow: 0 8px 32px rgba(196,154,42,0.2), 0 2px 8px rgba(196,154,42,0.1); } /* ============================================================ 16. GALLERY — refined ============================================================ */ .gallery-item { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); } .gallery-caption { padding: 14px 16px; font-size: 0.85rem; color: var(--mid); background: var(--bg-card); text-align: center; font-weight: 500; } /* ============================================================ 17. FLOATING ELEMENTS — refined ============================================================ */ /* WhatsApp float */ .wa-float { border-radius: 50%; box-shadow: 0 4px 16px rgba(37,211,102,0.3), 0 2px 6px rgba(37,211,102,0.2); transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo); } .wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,0.4), 0 4px 12px rgba(37,211,102,0.25); } /* Floating badge */ .floating-badge { border-radius: 100px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); } /* ============================================================ 18. SECTION DIVIDERS — organic wave / curve ============================================================ */ /* Refined gold divider */ .section-divider { height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--maple-gold-soft) 30%, var(--maple-red-soft) 70%, transparent 100% ); margin: 0 auto; max-width: 240px; opacity: 0.4; } /* Wave divider SVG container */ .wave-divider { position: relative; height: 60px; overflow: hidden; } .wave-divider svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ============================================================ 19. STATS BAR — refined ============================================================ */ .stats-bar { background: linear-gradient( 135deg, var(--dark) 0%, var(--dark-soft) 100% ); position: relative; overflow: hidden; } /* Subtle warm glow behind stats */ .stats-bar::before { content: ''; position: absolute; top: -50%; left: 30%; width: 40%; height: 200%; background: radial-gradient( ellipse at center, rgba(196,154,42,0.08) 0%, transparent 70% ); pointer-events: none; } .stat-number { font-family: var(--font-display); font-weight: 500; color: var(--maple-gold-soft); } /* ============================================================ 20. BLOG CARDS — refined ============================================================ */ .blog-card-home { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .blog-card-home:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .blog-card-home-category { background: var(--cream-warm); color: var(--maple-red); font-weight: 700; } /* ============================================================ 21. DIRECTOR / TEAM CARD — refined ============================================================ */ .director-card { border-radius: 24px; box-shadow: var(--shadow); border: 1px solid rgba(28,28,46,0.04); padding: 36px; } .director-photo { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, var(--maple-red), var(--maple-gold)); box-shadow: 0 4px 16px rgba(181,52,45,0.2), 0 0 0 4px rgba(255,255,255,0.8); } .director-role { color: var(--maple-red-soft); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; } .director-quote { font-style: italic; line-height: 1.8; color: var(--mid); } /* ============================================================ 22. PROCESS STEPS — refined ============================================================ */ .process-step::before { background: linear-gradient(135deg, var(--maple-red), var(--maple-red-soft)); box-shadow: var(--shadow-red-soft); font-family: var(--font-display); font-weight: 500; } /* Connector line between steps */ .process-step:not(:last-child)::after { content: ''; position: absolute; top: 20px; right: -50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--maple-red-glow), transparent); z-index: 0; } /* ============================================================ 23. URGENCY BAR — refined ============================================================ */ .urgency-bar { background: linear-gradient( 135deg, var(--maple-red) 0%, #9a2d26 100% ); font-size: 0.85rem; padding: 12px 20px; letter-spacing: 0.02em; text-align: center; } /* ============================================================ 24. SOCIAL PROOF — refined ============================================================ */ .social-proof { border-radius: 100px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); padding: 10px 18px; font-size: 0.85rem; } .social-proof-avatars span { border: 2px solid var(--white); box-shadow: var(--shadow-xs); } /* ============================================================ 25. CONTACT BUTTONS — refined ============================================================ */ .contact-btn { border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,28,46,0.04); transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out-expo); } .contact-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .contact-btn .c-icon { border-radius: 12px; background: rgba(181,52,45,0.08); } /* ============================================================ 26. FORM INPUTS — refined ============================================================ */ .form-group input, .form-group select, .form-group textarea { border: 1.5px solid rgba(28,28,46,0.1); border-radius: 12px; background: var(--bg-subtle); padding: 14px 18px; font-size: 1rem; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--maple-blue); box-shadow: 0 0 0 3px rgba(30,125,160,0.1), 0 1px 3px rgba(30,125,160,0.05); background: var(--white); } /* ============================================================ 27. FOOTER REFINEMENT ============================================================ */ footer { background: var(--dark); position: relative; overflow: hidden; } /* Subtle warm glow in footer */ footer::before { content: ''; position: absolute; bottom: -30%; left: 20%; width: 60%; height: 80%; background: radial-gradient( ellipse at center, rgba(196,154,42,0.04) 0%, transparent 70% ); pointer-events: none; } .footer-social a { border-radius: 12px; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-normal) var(--ease-spring); } .footer-social a:hover { transform: translateY(-2px); } /* ============================================================ 28. COMPARISON TABLE — refined ============================================================ */ .comparison-table { border-radius: 16px; overflow: hidden; border: 1px solid rgba(28,28,46,0.06); } .comparison-table th { background: var(--maple-red); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.02em; } .comparison-table th:first-child { background: var(--dark); } .comparison-table td { border-bottom: 1px solid rgba(28,28,46,0.06); } .comparison-table tr:nth-child(even) { background: var(--bg-subtle); } /* ============================================================ 29. FEE CARDS — refined ============================================================ */ .fee-card { border-radius: 24px; border: 2px solid rgba(28,28,46,0.04); box-shadow: var(--shadow-sm); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo), border-color var(--dur-normal) ease; } .fee-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .fee-card.featured { border-color: var(--maple-red); box-shadow: var(--shadow-md), 0 0 0 1px var(--maple-red); } .fee-card.featured::before { background: var(--maple-red); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; padding: 6px 18px; border-radius: 100px; top: -14px; } .fee-price { font-family: var(--font-display); font-weight: 500; color: var(--maple-red); } /* ============================================================ 30. SCROLLBAR — brand-colored ============================================================ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--maple-red-glow); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--maple-red-soft); } /* ============================================================ 31. IMAGE PLACEHOLDER — refined gradient ============================================================ */ .img-placeholder { background: linear-gradient( 135deg, var(--maple-blue-deep) 0%, var(--maple-blue) 40%, var(--maple-gold-soft) 100% ); border-radius: 20px; } /* ============================================================ 32. VALUE CARDS — refined ============================================================ */ .value-card { border-radius: 20px; border: 1px solid rgba(28,28,46,0.04); box-shadow: var(--shadow-sm); transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); } .value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .value-icon { border-radius: 16px; box-shadow: var(--shadow-gold-soft); } .value-icon--red { background: linear-gradient(135deg, rgba(181,52,45,0.08), rgba(212,97,78,0.06)); } .value-icon--green { background: linear-gradient(135deg, rgba(42,157,92,0.08), rgba(107,196,154,0.06)); } .value-icon--gold { background: linear-gradient(135deg, rgba(196,154,42,0.08), rgba(232,201,106,0.06)); } .value-icon--blue { background: linear-gradient(135deg, rgba(30,125,160,0.08), rgba(168,212,230,0.06)); } /* ============================================================ 33. MOBILE STICKY CTA — refined ============================================================ */ .mobile-sticky-cta { border-top: 1px solid rgba(28,28,46,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.95); } /* ============================================================ 34. ANIMATION KEYFRAMES — new premium motions ============================================================ */ /* Gentle float for decorative elements */ @keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Subtle pulse for urgency indicators */ @keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Shimmer for loading / accent states */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Fade in with slight rotation */ @keyframes fadeInRotate { from { opacity: 0; transform: translateY(20px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } /* Scale in with spring */ @keyframes scaleInSpring { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Apply to elements */ .animate-float { animation: gentleFloat 4s ease-in-out infinite; } .animate-pulse-soft { animation: softPulse 2s ease-in-out infinite; } /* ============================================================ 35. DECORATIVE MAPLE LEAF PATTERNS ============================================================ */ /* Subtle repeating pattern for section backgrounds */ .pattern-dots { background-image: radial-gradient( circle, rgba(196,154,42,0.06) 1px, transparent 1px ); background-size: 24px 24px; } /* Diagonal stripe pattern — very subtle */ .pattern-stripes { background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, rgba(181,52,45,0.02) 20px, rgba(181,52,45,0.02) 40px ); } /* ============================================================ 36. RESPONSIVE OVERRIDES FOR UPGRADES ============================================================ */ @media (max-width: 768px) { .hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); } .section-header .section-title { font-size: clamp(1.8rem, 6vw, 2.4rem); } .premium-card { padding: 24px; border-radius: 16px; } .cta-banner { border-radius: 20px; } .director-card { flex-direction: column; text-align: center; padding: 28px; } .process-step:not(:last-child)::after { display: none; } .corner-accent::after { width: 100px; height: 100px; top: -20px; right: -20px; } } @media (max-width: 480px) { .hero-stat { padding: 18px 14px; } .btn-primary, .btn-green, .btn-gold { padding: 14px 28px; font-size: 0.88rem; } }