/* ==================================== Premium Enhancements CSS Refined polish without glitchy animations ==================================== */ /* ===== HAWK-MOON IMAGE FIX ===== */ /* Remove dark blue background and extend clouds */ .container-hero { background-color: transparent !important; } .section-hero { background: linear-gradient(180deg, #1a1a2e 0%, #565d73 50%, #ad85a1 100%) !important; } /* Extend clouds to fill entire area */ .wrapper-clouds-parallax { height: 120vh !important; top: -20vh; position: relative; } .clouds { height: 120vh !important; } /* Position hawk within clouds */ .wrapper-arrow { z-index: 25 !important; top: 40vh !important; } .image-33 { margin-bottom: 0 !important; top: 0 !important; } /* Cloud layering - hawk floats between */ .div-cloud-1, .div-cloud-2, .div-cloud-3 { z-index: 10 !important; } .div-cloud-4 { z-index: 20 !important; } .div-cloud-5 { z-index: 30 !important; } .div-cloud-6 { z-index: 40 !important; } /* ===== GLOBAL ENHANCEMENTS ===== */ /* Smooth scrolling for the entire page */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Better text selection */ ::selection { background: rgba(73, 40, 253, 0.15); } /* ===== TYPOGRAPHY REFINEMENTS ===== */ /* Improved line heights and letter spacing for body text */ p, .text-block-6, .text-block-5, .paragraph-3 { letter-spacing: 0.01em; } /* Headings get subtle letter spacing */ h1, h2, h3, h4, h5, h6, .hero-heading-h1, .home-heading-h2, .our-work-heading, .testimonial-heading-h2, .achevement-heading-h2 { letter-spacing: -0.02em; } /* ===== SMOOTH TRANSITIONS ===== */ /* Specific transition for interactive elements - not using 'all' to avoid conflicts */ .c2a-button, .let-s-collaborate, .back-to-home-btn, .button { transition: transform 0.25s ease, box-shadow 0.25s ease; } .link-block-2 { transition: transform 0.2s ease, box-shadow 0.2s ease; } /* ===== PREMIUM HOVER STATES ===== */ /* Cards get subtle lift effect on hover - only for desktop */ @media (hover: hover) and (pointer: fine) { .card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover, .about-card-1:hover, .about-card-2:hover, .about-card-3:hover, .plan-1:hover, .div-block-34:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(27, 29, 30, 0.08); } /* Buttons get subtle scale on hover */ .c2a-button:hover, .let-s-collaborate:hover, .back-to-home-btn:hover, .button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(27, 29, 30, 0.12); } /* Chips/Tags get subtle hover */ .link-block-2:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(27, 29, 30, 0.06); } /* Article cards hover */ .article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(27, 29, 30, 0.1); } /* Button icon slide */ .btn-icon, .arrow-div, .div-block-21, .div-block-23 { transition: transform 0.25s ease; } .c2a-button:hover .btn-icon, .let-s-collaborate:hover .div-block-21, .back-to-home-btn:hover .div-block-23 { transform: translateX(3px); } } /* ===== FOCUS STATES FOR ACCESSIBILITY ===== */ /* Better focus outlines */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .c2a-button:focus-visible { outline: 2px solid var(--violet-100, #4928fd); outline-offset: 2px; border-radius: 4px; } /* ===== FORM ENHANCEMENTS ===== */ /* Inputs get better focus states */ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(73, 40, 253, 0.1); } /* ===== RESPONSIVE IMPROVEMENTS ===== */ /* Tablet (991px) */ @media screen and (max-width: 991px) { /* Better spacing on tablet */ .container-4, .container-5, .container-6, .container-7, .container-8, .container-main { padding-left: 30px; padding-right: 30px; } /* Cards stack better */ .card-1, .card-2, .card-3, .card-4 { margin-bottom: 16px; } /* Headings scale down gracefully */ .hero-heading-h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; } .home-heading-h2, .our-work-heading, .testimonial-heading-h2, .creative-mind-heading { font-size: clamp(2rem, 5vw, 3rem); } /* Touch-friendly button sizes */ .c2a-button, .let-s-collaborate, .back-to-home-btn { min-height: 48px; padding: 12px 20px; } /* Article grid */ .articles-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile (767px) */ @media screen and (max-width: 767px) { /* More compact containers */ .container-4, .container-5, .container-6, .container-7, .container-8, .container-main { padding-left: 20px; padding-right: 20px; } /* Section spacing tightens */ .home-about-section, .home-our-work-section, .home-our-team-sec, .section-6, .section-7 { padding-top: 80px; } /* Headings continue to scale */ .hero-heading-h1 { font-size: clamp(2rem, 8vw, 3rem); } .home-heading-h2, .our-work-heading { font-size: clamp(1.75rem, 6vw, 2.5rem); } /* CTA buttons become full width on mobile */ .call-to-action { padding: 24px 20px; } .collabrator-wrapper { flex-direction: column; align-items: stretch; } .let-s-collaborate, .back-to-home-btn { width: 100%; justify-content: center; } /* Team grid becomes single column */ .creative-mind-wrapper { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; } /* Profile cards center align */ .profile-card { align-items: center; text-align: center; } /* Navigation improvements */ .navbar-wrapper-3 { padding: 12px 16px; } /* Innovation grid */ .innovation-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* Small Mobile (479px) */ @media screen and (max-width: 479px) { /* Even tighter containers */ .container-4, .container-5, .container-6, .container-7, .container-8, .container-main { padding-left: 16px; padding-right: 16px; } /* Ultra-compact sections */ .home-about-section, .home-our-work-section, .home-our-team-sec, .section-6, .section-7 { padding-top: 60px; } /* Typography scales for small screens */ .hero-heading-h1 { font-size: 1.75rem; line-height: 1.2; } .home-heading-h2, .our-work-heading { font-size: 1.5rem; } .heading-7, .creative-block-title { font-size: 1.1rem; } /* Cards get full width */ .card-1, .card-2, .card-3, .card-4 { width: 100%; } /* CTA simplifies */ .call-to-action { padding: 20px 16px; border-radius: 16px; } .title-1, .title-2 { font-size: 1.1rem; text-align: center; } /* Buttons stack */ .collabrator-btn-div { flex-direction: column; width: 100%; } /* Chips wrap better */ .chips { justify-content: center; } .link-block-2 { padding: 8px 14px; font-size: 12px; } /* Footer improvements */ .footer-div-grid { grid-template-columns: 1fr; text-align: center; } .footer-list { align-items: center; } /* Article grid single column */ .articles-grid { grid-template-columns: 1fr; } /* Innovation grid single column */ .innovation-grid { grid-template-columns: 1fr; gap: 12px; } } /* Smaller mobiles for article grid */ @media screen and (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; } } /* ===== PRINT STYLES ===== */ @media print { .c2a-button, .back-to-home-btn, .navbar-logo-left-container, footer { display: none !important; } * { background: white !important; color: black !important; box-shadow: none !important; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ===== HIGH CONTRAST MODE ===== */ @media (prefers-contrast: high) { .link-block-2 { border-width: 2px; } a:focus-visible, button:focus-visible { outline-width: 3px; } } /* ===== TOUCH DEVICE OPTIMIZATIONS ===== */ @media (pointer: coarse) { /* Larger touch targets on touch devices */ .navigation-link, .nav-link-4, .footer-link-block { min-height: 44px; display: flex; align-items: center; } } /* ===== LANDSCAPE MOBILE ===== */ @media screen and (max-width: 767px) and (orientation: landscape) { .section, .home-about-section { padding-top: 40px; padding-bottom: 40px; } .hero-heading-h1 { font-size: 2rem; } }