/opt/canhelp/apps/web/src/app
Edit: /opt/canhelp/apps/web/src/app/globals.css (9543B)
@font-face {
font-family: 'Showpop';
src: url('/fonts/showpop.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.logo-text {
font-family: 'Showpop', sans-serif;
letter-spacing: 0.01em;
font-weight: normal;
}
@font-face {
font-family: 'UnifixSP';
src: url('/fonts/UnifixSP.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.logo-text-unifix {
font-family: 'UnifixSP', sans-serif;
letter-spacing: 0.01em;
font-weight: normal;
}
@font-face {
font-family: 'MotivationOfHearts';
src: url('/fonts/MotivationOfHearts.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.logo-text-motivation {
font-family: 'MotivationOfHearts', sans-serif;
letter-spacing: 0.01em;
font-weight: normal;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--blue-main: #16a34a;
--blue-light: #4ade80;
--blue-dark: #15803d;
--orange-main: #22c55e;
--orange-light: #86efac;
--orange-dark: #166534;
--glass-bg: rgba(255,255,255,0.65);
--glass-blur: 18px;
}
body {
background: linear-gradient(135deg, #15803d 0%, #22c55e 55%, #4ade80 100%);
color: #18181b;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Section highlight styles */
/* Glassmorphism section style */
.section-contrast {
background: var(--glass-bg);
border-radius: 2.5rem;
box-shadow: 0 8px 40px 0 rgba(22,163,74,0.12), 0 1.5px 8px 0 rgba(74,222,128,0.08);
border: 1.5px solid rgba(74,222,128,0.2);
margin-bottom: 3.5rem;
padding: 3rem 1.5rem;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
transition: box-shadow 0.3s, background 0.3s;
}
@media (min-width: 640px) {
.section-contrast {
padding: 4rem 2.5rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.section-contrast {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
}
/* Accent button */
.btn-accent {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--blue-main);
color: #fff;
font-weight: 700;
border-radius: 1.2em;
box-shadow: 0 4px 24px 0 rgba(37,99,235,0.13);
padding: 0.9em 2.2em;
font-size: 1.25rem;
letter-spacing: 0.01em;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
border: none;
cursor: pointer;
}
.btn-accent:hover {
background: var(--blue-dark);
box-shadow: 0 8px 32px 0 rgba(245,158,11,0.13);
transform: translateY(-2px) scale(1.03);
}
/* Outline button — same shape as btn-accent, white background */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--blue-main);
font-weight: 700;
border-radius: 1.2em;
box-shadow: 0 4px 24px 0 rgba(22,163,74,0.12);
padding: 0.9em 2.2em;
font-size: 1.25rem;
letter-spacing: 0.01em;
border: 2px solid var(--blue-main);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
}
.btn-outline:hover {
background: var(--blue-main);
color: #fff;
box-shadow: 0 8px 32px 0 rgba(22,163,74,0.22);
transform: translateY(-2px) scale(1.03);
}
/* Modern card */
.modern-card {
background: #fff;
border-radius: 1.5rem;
box-shadow: 0 2px 16px 0 rgba(22,163,74,0.07), 0 1.5px 4px 0 rgba(0,0,0,0.04);
border: 1.5px solid rgba(34,197,94,0.12);
transition: box-shadow 0.2s, border 0.2s, transform 0.2s;
}
.modern-card:hover {
box-shadow: 0 8px 32px 0 rgba(22,163,74,0.15);
border: 1.5px solid rgba(34,197,94,0.4);
transform: translateY(-2px);
}
/* Floating hero icons */
@keyframes heroIconFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes heroIconDrift {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(-5deg); }
66% { transform: translateY(-6px) rotate(3deg); }
}
@keyframes heroIconSway {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-8px) translateX(6px); }
}
/* Animated gradient background for hero */
.hero-bg-animated {
background: linear-gradient(120deg, #15803d 0%, #16a34a 40%, #22c55e 70%, #4ade80 100%);
background-size: 200% 200%;
animation: heroGradientMove 8s ease-in-out infinite;
}
@keyframes heroGradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Header shrink effect */
.header-base {
transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.header-shrink .header-content {
height: 48px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.header-shrink .logo-text {
font-size: 1.3rem !important;
letter-spacing: 0.01em;
}
.logo-text {
font-family: 'Showpop', sans-serif !important;
font-size: 1.7rem !important;
font-weight: 300 !important;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.logo-text-mini {
font-family: 'Showpop', sans-serif !important;
font-size: 1.3rem !important;
font-weight: 300 !important;
letter-spacing: 0.01em;
text-transform: uppercase;
transition: font-size 0.3s ease;
}
.logo-text-mini.scrolled {
font-size: 1.1rem !important;
}
/* ── Site theme (dark = default) ── */
.site-theme {
--site-bg: #0a0a0f;
--site-surface: rgba(255,255,255,0.03);
--site-surface-hover: rgba(255,255,255,0.06);
--site-border: rgba(255,255,255,0.05);
--site-border-hover: rgba(255,255,255,0.1);
--site-text: #ffffff;
--site-text-secondary: rgba(255,255,255,0.5);
--site-text-muted: rgba(255,255,255,0.3);
--site-text-hint: rgba(255,255,255,0.2);
--site-nav-bg: rgba(10,10,15,0.8);
--site-modal-bg: #14141f;
--site-input-bg: rgba(255,255,255,0.05);
--site-input-border: rgba(255,255,255,0.1);
--site-input-text: #ffffff;
--site-input-placeholder: rgba(255,255,255,0.2);
--site-tag-bg: rgba(255,255,255,0.05);
--site-tag-border: rgba(255,255,255,0.05);
--site-tag-text: rgba(255,255,255,0.6);
--site-card-bg: rgba(255,255,255,0.03);
--site-card-border: rgba(255,255,255,0.05);
--site-name-from: #ffffff;
--site-name-to: rgba(255,255,255,0.7);
--site-avatar-border: rgba(255,255,255,0.1);
--site-avatar-bg: rgba(255,255,255,0.05);
--site-status-border-color: #0a0a0f;
--site-phone-bg: rgba(255,255,255,0.05);
--site-phone-border: rgba(255,255,255,0.1);
--site-phone-text: #ffffff;
--site-divider: rgba(255,255,255,0.1);
--site-lang-dropdown: #1a1a24;
--site-footer-text: rgba(255,255,255,0.2);
--site-scroll-btn-bg: rgba(255,255,255,0.1);
--site-scroll-btn-border: rgba(255,255,255,0.1);
--site-scroll-btn-text: rgba(255,255,255,0.6);
}
.site-theme.site-light {
--site-bg: #f8f9fb;
--site-surface: rgba(0,0,0,0.02);
--site-surface-hover: rgba(0,0,0,0.04);
--site-border: rgba(0,0,0,0.08);
--site-border-hover: rgba(0,0,0,0.15);
--site-text: #1a1a2e;
--site-text-secondary: rgba(0,0,0,0.55);
--site-text-muted: rgba(0,0,0,0.4);
--site-text-hint: rgba(0,0,0,0.25);
--site-nav-bg: rgba(255,255,255,0.85);
--site-modal-bg: #ffffff;
--site-input-bg: rgba(0,0,0,0.03);
--site-input-border: rgba(0,0,0,0.12);
--site-input-text: #1a1a2e;
--site-input-placeholder: rgba(0,0,0,0.3);
--site-tag-bg: rgba(0,0,0,0.04);
--site-tag-border: rgba(0,0,0,0.08);
--site-tag-text: rgba(0,0,0,0.6);
--site-card-bg: #ffffff;
--site-card-border: rgba(0,0,0,0.08);
--site-name-from: #1a1a2e;
--site-name-to: rgba(26,26,46,0.7);
--site-avatar-border: rgba(0,0,0,0.1);
--site-avatar-bg: rgba(0,0,0,0.05);
--site-status-border-color: #f8f9fb;
--site-phone-bg: rgba(0,0,0,0.04);
--site-phone-border: rgba(0,0,0,0.1);
--site-phone-text: #1a1a2e;
--site-divider: rgba(0,0,0,0.08);
--site-lang-dropdown: #ffffff;
--site-footer-text: rgba(0,0,0,0.3);
--site-scroll-btn-bg: rgba(0,0,0,0.06);
--site-scroll-btn-border: rgba(0,0,0,0.1);
--site-scroll-btn-text: rgba(0,0,0,0.5);
}
.logo-text-jaipur {
font-family: 'Jaipur', 'Inter', 'Segoe UI', Arial, sans-serif !important;
font-size: 1.7rem !important;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.logo-text-rennie {
font-family: 'Rennie', 'Inter', 'Segoe UI', Arial, sans-serif !important;
font-size: 1.7rem !important;
letter-spacing: 0.01em;
text-transform: uppercase;
}
/* Scroll to top button */
.scroll-to-top-btn {
position: fixed;
right: 2rem;
bottom: 2.5rem;
z-index: 100;
background: #6366f1;
color: #fff;
border-radius: 9999px;
box-shadow: 0 2px 12px 0 rgba(80,80,120,0.13);
padding: 0.75rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: none;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.scroll-to-top-btn.visible {
opacity: 1;
pointer-events: auto;
}
@font-face {
font-family: 'NorseCyr2';
src: url('/fonts/Norse-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jaipur';
src: url('/fonts/Jaipur.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Rennie';
src: url('/fonts/Rennie.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
