/* ============================================================= NOVARIS POWER — PREMIUM DESIGN UPGRADE Typography refresh · Refined spacing · Polished transitions ============================================================= */ /* ── Google Fonts ───────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap'); /* ── Page Loader ─────────────────────────────────────────────── */ #page-loader { position: fixed; inset: 0; z-index: 99999; background: var(--dark-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: opacity 0.5s ease, visibility 0.5s ease; /* Prevent any body transform/animation from affecting the loader */ transform: none !important; } #page-loader.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .loader-logo-wrap img { width: 160px; height: auto; animation: loaderPulse 1.8s ease-in-out infinite; filter: brightness(1.1); } @keyframes loaderPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(0.97); } } /* Spinning ring around the logo */ .loader-ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--vivid-green); border-right-color: var(--yellow); animation: loaderSpin 1.4s linear infinite; } @keyframes loaderSpin { to { transform: rotate(360deg); } } .loader-dots { display: flex; gap: 0.6rem; } .loader-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--vivid-green); animation: loaderDot 1.2s ease-in-out infinite; } .loader-dots span:nth-child(2) { background: var(--yellow); animation-delay: 0.2s; } .loader-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes loaderDot { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1.1); opacity: 1; } } /* Page-exit fade (add .page-transitioning to on link click) */ body.page-transitioning { animation: pageExit 0.3s ease forwards; } @keyframes pageExit { to { opacity: 0; } } /* Page-enter fade on load — opacity only, no translateY to avoid pushing fixed header */ body { animation: pageEnter 0.45s ease both; } @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } /* ── Base Typography ─────────────────────────────────────────── */ body { font-family: 'DM Sans', 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.65; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .section-title, .hero-title, .hero-subtitle, .solution-title, .insight-title, .stat-number, .metric-value, .newsletter-title, .cta-title, .footer-section h3 { font-family: 'Syne', sans-serif; letter-spacing: -0.02em; } /* ── Hero Section Typography ─────────────────────────────────── */ .hero-title { font-size: clamp(2.8rem, 5.5vw, 4.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; text-shadow: 0 2px 20px rgba(0,0,0,0.25); } .hero-subtitle { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 1.5rem; } .hero-description { font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-family: 'DM Sans', sans-serif; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.75; max-width: 680px; margin-bottom: 2.5rem; } /* ── Section Titles ──────────────────────────────────────────── */ .section-title { font-size: clamp(1.85rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--dark-blue); margin-bottom: 0.75rem; letter-spacing: -0.03em; line-height: 1.15; } .section-description { font-size: clamp(0.9rem, 1.3vw, 1rem); font-family: 'DM Sans', sans-serif; font-weight: 400; color: #555; line-height: 1.75; max-width: 640px; margin: 1.25rem auto 0; } /* Accent underline on section titles */ .section-title::after { content: ''; display: block; width: 48px; height: 3px; background: linear-gradient(90deg, var(--vivid-green), var(--yellow)); margin: 0.85rem auto 0; border-radius: 2px; transition: width 0.4s ease; } .section-header:hover .section-title::after { width: 80px; } /* ── Stat Cards ──────────────────────────────────────────────── */ .stat-number { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--vivid-green); } .stat-label { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-blue); margin-top: 0.2rem; } .stat-description { font-size: 0.78rem; color: #888; margin-top: 0.3rem; font-style: italic; } .stat-card { padding: 2rem 1.75rem; border-radius: 16px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .stat-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 60px rgba(0,0,0,0.12); } /* ── Metric Cards ────────────────────────────────────────────── */ .metric-value { font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; } .metric-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-top: 0.2rem; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.85rem 2.2rem; border-radius: 6px; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, background 0.25s ease, color 0.25s ease; border-radius: 50px; } .btn::before { border-radius: 50px; } .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px rgba(68,170,0,0.35); } .btn-secondary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px rgba(255,255,255,0.2); } /* ── Navigation ──────────────────────────────────────────────── */ #navbar .nav-links > li > a { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.5rem 0; transition: color 0.25s ease; } /* Dropdown */ .dropdown-content { border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); padding: 0.75rem 0; animation: dropdownFade 0.2s ease; transform-origin: top center; } @keyframes dropdownFade { from { opacity: 0; transform: translateY(-8px) scaleY(0.95); } to { opacity: 1; transform: translateY(0) scaleY(1); } } .dropdown-content a { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 400; letter-spacing: 0em; padding: 0.6rem 1.5rem; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .dropdown-content a:hover { padding-left: 2rem; } /* ── Solution Cards ──────────────────────────────────────────── */ .solution-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; } .solution-description { font-size: 0.9rem; line-height: 1.75; } .solution-card { padding: 2.25rem; border-radius: 16px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease; } /* ── Insight Cards ───────────────────────────────────────────── */ .insight-card { border-radius: 14px; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .insight-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 28px 70px rgba(0,0,0,0.14); } .insight-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; } .insight-excerpt { font-size: 0.86rem; line-height: 1.7; color: #666; } .learn-more { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--vivid-green); transition: gap 0.25s ease, color 0.25s ease; } /* ── Section Spacing ─────────────────────────────────────────── */ .who-we-are { padding: 6rem 5%; } .what-we-do { padding: 6rem 5%; } .impact { padding: 6rem 5%; } .insights-section { padding: 6rem 5%; } .partners-section { padding: 6rem 5%; } /* ── Newsletter ──────────────────────────────────────────────── */ .newsletter-section { padding: 3.5rem; border-radius: 16px; margin-top: 3.5rem; } .newsletter-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; } .newsletter-input, .newsletter-btn { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; } .newsletter-btn { font-weight: 600; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease; } .newsletter-btn:hover { transform: translateY(-2px) scale(1.02); } /* ── Footer ──────────────────────────────────────────────────── */ footer { padding: 4.5rem 5% 2rem; } .footer-section h3 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); margin-bottom: 1.25rem; } .footer-section p, .footer-section a { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.7); transition: color 0.22s ease, padding-left 0.22s ease; } .footer-section a:hover { color: var(--yellow); padding-left: 6px; } /* ── Fade-in Scroll Animations ───────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Staggered children inside visible fade-in parents */ .fade-in.visible > * { animation: none; } /* ── Card hover lift (global) ────────────────────────────────── */ .partner-logo { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.3s ease; } .partner-logo:hover { transform: translateY(-6px) scale(1.04); opacity: 1 !important; } /* ── Top Bar ─────────────────────────────────────────────────── */ .top-bar a { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.01em; transition: color 0.2s ease; } /* ── Testimonial text ────────────────────────────────────────── */ .testimonial-text { font-family: 'Syne', sans-serif; font-size: clamp(1rem, 1.6vw, 1.2rem); font-style: italic; font-weight: 500; letter-spacing: -0.01em; line-height: 1.65; } .testimonial-author { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vivid-green); } /* ── Job modals ──────────────────────────────────────────────── */ .job-modal-content h2 { font-family: 'Syne', sans-serif; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; } .job-section h3 { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-blue); margin-bottom: 0.75rem; } /* ── CTA Section ─────────────────────────────────────────────── */ .cta-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; } .cta-description { font-size: 0.9rem; font-family: 'DM Sans', sans-serif; line-height: 1.75; max-width: 640px; margin: 1rem auto; } /* ── About/project page hero overrides ───────────────────────── */ .page-hero h1, .page-hero-title { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; } /* ── Smooth link transitions site-wide ──────────────────────── */ a { transition: color 0.22s ease, opacity 0.22s ease; } /* ── Subtle section dividers ─────────────────────────────────── */ .insights-section, .partners-section { position: relative; } /* ── Scrollbar (subtle brand touch) ─────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f0f0f0; } ::-webkit-scrollbar-thumb { background: var(--vivid-green); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--dark-blue); } /* ── Mobile responsive overrides ────────────────────────────── */ @media (max-width: 768px) { .hero-title { font-size: 2.4rem; } .hero-subtitle { font-size: 1.4rem; } .section-title { font-size: 1.7rem; } .stat-number { font-size: 1.75rem; } .metric-value { font-size: 1.6rem; } .newsletter-section { padding: 2.5rem 1.75rem; } .who-we-are, .what-we-do, .impact, .insights-section, .partners-section { padding: 4rem 5%; } }