diff --git a/css/style.css b/css/style.css index 7357d18..b3365d0 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,4 @@ @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); - :root { /* Base colors */ --fg: #ececec; @@ -999,13 +998,22 @@ section h2 { } /* Custom hero button styles - Enhanced visibility and appeal */ -#hero .btn-primary { +/* Special styles for hero buttons across all pages - all hero section types */ +#hero .btn-primary, +.hero-section .btn-primary, +.industry-hero .btn-primary, +.travel-hero .btn-primary, +.finance-hero .btn-primary, +.manufacturing-hero .btn-primary, +.marketing-hero .btn-primary, +.media-hero .btn-primary { background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 32px rgba(109, 40, 217, 0.4), 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + padding: 18px 36px !important; margin-top: 24px !important; font-weight: 400 !important; letter-spacing: 1.5px !important; @@ -1024,7 +1032,14 @@ section h2 { } /* Hover effects for enhanced interactivity */ -#hero .btn-primary:hover { +#hero .btn-primary:hover, +.hero-section .btn-primary:hover, +.industry-hero .btn-primary:hover, +.travel-hero .btn-primary:hover, +.finance-hero .btn-primary:hover, +.manufacturing-hero .btn-primary:hover, +.marketing-hero .btn-primary:hover, +.media-hero .btn-primary:hover { transform: translateY(-3px) scale(1.05) !important; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; border-color: rgba(255, 255, 255, 0.5) !important; @@ -1037,7 +1052,14 @@ section h2 { } /* Active/pressed state */ -#hero .btn-primary:active { +#hero .btn-primary:active, +.hero-section .btn-primary:active, +.industry-hero .btn-primary:active, +.travel-hero .btn-primary:active, +.finance-hero .btn-primary:active, +.manufacturing-hero .btn-primary:active, +.marketing-hero .btn-primary:active, +.media-hero .btn-primary:active { transform: translateY(-1px) scale(1.02) !important; transition: all 0.1s ease !important; } @@ -1058,7 +1080,13 @@ section h2 { } } -#hero .btn-primary { +#hero .btn-primary, +.hero-section .btn-primary, +.industry-hero .btn-primary, +.travel-hero .btn-primary, +.finance-hero .btn-primary, +.manufacturing-hero .btn-primary, +.media-hero .btn-primary { animation: heroButtonPulse 3s ease-in-out infinite !important; } @@ -2046,7 +2074,7 @@ h1,h2,h3,h4,h5,h6 { background-color: #0f172a; /* Dark blue-gray background */ color: var(--text-muted); padding: 50px 0; - font-size: 0.95rem; + font-size: 1.1rem; } .footer-content { @@ -2100,7 +2128,7 @@ h1,h2,h3,h4,h5,h6 { } .footer-col h3 { - font-size: 1.2rem; + font-size: 1.4rem; color: #52eef5; /* Cyan heading text */ margin-bottom: 20px; font-weight: 600; @@ -2124,6 +2152,7 @@ h1,h2,h3,h4,h5,h6 { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; + font-size: 1.05rem; } .footer-col ul li a:hover { @@ -2133,6 +2162,7 @@ h1,h2,h3,h4,h5,h6 { .footer-col p { margin-bottom: 10px; line-height: 1.7; + font-size: 1.05rem; } /* Footer contact info with icons styling */ @@ -2145,7 +2175,7 @@ h1,h2,h3,h4,h5,h6 { .footer-col ul li p i { margin-right: 12px; - font-size: 1.1rem; + font-size: 1.2rem; color: var(--primary-color); min-width: 20px; text-align: center; @@ -2170,6 +2200,7 @@ h1,h2,h3,h4,h5,h6 { .footer-col .social-links a { color: var(--text-muted); font-size: 1.3rem; + text-decoration: none; /* Remove underlines from social media icons */ transition: color 0.3s ease, transform 0.3s ease; padding: 8px; border-radius: 50%; @@ -2202,6 +2233,47 @@ h1,h2,h3,h4,h5,h6 { text-decoration: underline; } +/* General button styles */ +.btn { + display: inline-block; + text-decoration: none; + padding: 14px 28px; + border-radius: 8px; + font-weight: 500; + letter-spacing: 1px; + text-transform: uppercase; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + cursor: pointer; + text-align: center; + color: #ffffff; + font-size: 1rem; + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); +} + +.btn-primary { + display: inline-block; + text-decoration: none; + padding: 14px 28px; + border-radius: 8px; + font-weight: 500; + letter-spacing: 1px; + text-transform: uppercase; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + cursor: pointer; + text-align: center; + color: #ffffff; + font-size: 1rem; + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); +} + .btn-primary:before { content: ''; position: absolute; @@ -2393,7 +2465,7 @@ h1,h2,h3,h4,h5,h6 { max-width: 700px; margin-bottom: 2rem; line-height: 1.6; - font-family: 'Inter', sans-serif; + font-family: 'VT323', monospace; } .case-studies-filters { @@ -2728,7 +2800,7 @@ h1,h2,h3,h4,h5,h6 { } .industry-hero h1 { - font-family: 'Space Grotesk', sans-serif; + font-family: 'VT323', monospace; font-size: 4rem; font-weight: 700; /* Inherit the beautiful gradient and glow from main h1 styling */ @@ -2737,13 +2809,19 @@ h1,h2,h3,h4,h5,h6 { } .industry-hero p { - font-family: 'Inter', sans-serif; + font-family: 'VT323', monospace; font-size: 1.2rem; color: #e0e0e0; line-height: 1.6; margin-bottom: 30px; } +.industry-hero .btn-primary { + margin-top: 20px; +} + +/* Removed marketing-hero specific styling as we're using standardized hero-section */ + .hero-image-container { width: 200px; height: 200px; @@ -2764,7 +2842,7 @@ h1,h2,h3,h4,h5,h6 { .industry-solutions .section-heading, .industry-benefits .section-heading, .industry-blogs .section-heading { - font-family: 'Space Grotesk', sans-serif; + font-family: 'VT323', monospace; font-size: 2.5rem; color: #52eef5; margin-bottom: 40px;