{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* --- START: Revised Custom CSS --- */ :root { /* Brand Colors */ --color-black: #000000; --color-charcoal: #121212; --color-cool-gray: #2C2C2C; --color-white: #FFFFFF; --color-muted-gray: #B0B0B0; --color-pop: #00BFFF; /* Deep Sky Blue */ --color-pop-hover: #0099CC; /* Typography */ --font-heading: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --font-button: 'Inter', sans-serif; /* Base Font Size */ --base-font-size: 18px; /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line Heights */ --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter Spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.03em; } /* Base Body Styles */ html { font-size: var(--base-font-size); scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-black); color: var(--color-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: var(--lh-relaxed); font-weight: var(--fw-regular); } /* Content Wrapper */ .content-wrapper { max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; /* px-6 */ padding-right: 1.5rem; /* px-6 */ width: 100%; } /* Hero specific centering */ #hero .content-wrapper { text-align: center; } /* Typography - Applying New Fonts and Sizes */ h1, h2, h3, .font-heading-style { font-family: var(--font-heading); font-weight: var(--fw-bold); /* Default bold */ color: var(--color-white); text-align: center; /* Default center alignment */ line-height: var(--lh-tight); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 0.5em; } /* --- RESTORED & ADJUSTED HEADING SIZES --- */ /* Base heading sizes - Increased back up */ h1 { font-size: 2.7rem; /* ~50px (was 2.2rem) */ font-weight: var(--fw-bold) !important; font-family: var(--font-heading) !important; } h2 { font-size: 2.2rem; } h3 { font-size: 1.6rem; } /* Responsive heading sizes - Increased back up */ @media (min-width: 640px) { h1 { font-size: 3.5rem; } h2 { font-size: 2.8rem; } h3 { font-size: 1.9rem; } } @media (min-width: 1024px) { h1 { font-size: 4.0rem; } h2 { font-size: 3.2rem; } h3 { font-size: 2.1rem; } } /* --- END HEADING SIZES --- */ /* --- Pre-Headline Style --- */ .pre-headline { font-family: var(--font-body); /* This font size was overridden by the specific rule below */ font-size: 2.8rem; /* Your intended size */ font-style: italic; text-decoration: underline; text-transform: uppercase; color: var(--color-white); text-align: center; margin-bottom: 0.75em; letter-spacing: var(--tracking-normal); } @media (min-width: 768px) { .pre-headline { font-size: 1.5rem; } } /* --- END Pre-Headline Style --- */ /* Paragraphs and Lists */ p { margin-bottom: 1em; color: var(--color-white); font-size: 1rem; line-height: var(--lh-relaxed); } .content-wrapper p, .content-wrapper li { text-align: left; } .pre-headline, .hero-subtitle, .section-subtitle, .cta-subtitle, .kpi-card p { text-align: center; } .content-wrapper ul { list-style: none; padding: 0; margin-bottom: 1em; } .content-wrapper li { margin-bottom: 0.5em; font-size: 1rem; } /* Muted Text */ .text-muted, .service-card p, .portfolio-overlay p, .testimonial-client-title, .footer-text p, .footer-links a, .footer-contact li, .footer-bottom div:first-child, .footer-bottom a, .section-subtitle, .hero-subtitle, .cta-subtitle, .kpi-card p { color: var(--color-muted-gray); } .testimonial-quote { font-size: 1.05rem; color: var(--color-white); } .service-card p, .portfolio-overlay p { font-size: 0.95rem; } .testimonial-client-title { font-size: 0.9rem; } .footer-text p, .footer-contact li { font-size: 0.95rem; } .footer-bottom div:first-child, .footer-bottom a { font-size: 0.85rem; } .kpi-card p { font-size: 0.9rem; } /* Center specific subtitles */ .section-subtitle, .hero-subtitle, .cta-subtitle { max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.1rem; line-height: var(--lh-normal); } @media (min-width: 768px) { .section-subtitle, .hero-subtitle, .cta-subtitle { font-size: 1.2rem; } } /* Buttons & Links */ .button-primary, .button-secondary, .button-tertiary { font-family: var(--font-button); font-weight: var(--fw-semibold); border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: all 0.3s ease; display: inline-block; text-align: center; line-height: var(--lh-normal); padding: 0.7em 1.5em; font-size: 0.88rem; letter-spacing: 0.05em; } .button-primary:hover { background-color: var(--color-pop-hover); } .button-secondary { border: 2px solid var(--color-white); background-color: transparent; color: var(--color-white); padding: calc(0.7em - 2px) calc(1.5em - 2px); } .button-secondary:hover { border-color: var(--color-pop); color: var(--color-pop); background-color: rgba(0, 191, 255, 0.1); } .button-tertiary { border: 2px solid var(--color-pop); color: var(--color-pop); background-color: transparent; padding: calc(0.7em - 2px) calc(1.5em - 2px); } .button-tertiary:hover { background-color: var(--color-pop); color: var(--color-black); } /* Base Link Styles */ a { color: var(--color-pop); transition: color 0.3s ease; text-decoration: none; font-weight: var(--fw-medium); } a:hover { color: var(--color-pop-hover); } /* Navigation Link Styles */ nav a { color: var(--color-white); font-weight: var(--fw-semibold); font-size: 0.9rem; letter-spacing: 0.03em; } nav a:hover { color: var(--color-pop); } /* Footer Link Styles */ footer a { font-size: 0.9rem; } .footer-links a { font-weight: var(--fw-regular); } /* Section Backgrounds & Borders */ header { background-color: var(--color-black); border-color: var(--color-cool-gray); } #portfolio { background-color: var(--color-black); } #services, .cta-section-inner, footer { background-color: var(--color-charcoal); } #testimonials { background-color: var(--color-cool-gray); } .footer-bottom { border-color: var(--color-cool-gray); } /* Specific Component Styles */ .hero-gradient { background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(18,18,18,0.85) 100%); } /* Rotating Word Style */ #rotating-word { display: inline-block; min-width: 150px; text-align: left; opacity: 1; transition: opacity 0.3s ease-in-out; } #rotating-word.fade-out { opacity: 0; } /* Service Card */ .service-card { background-color: var(--color-cool-gray); border: 1px solid var(--color-cool-gray); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; padding: 1.75rem; border-radius: 0.5rem; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 191, 255, 0.25); border-color: var(--color-pop); } .service-card h3 { text-align: left; font-size: 1.6rem; line-height: var(--lh-tight); margin-bottom: 0.5em; } .service-card .service-number { color: var(--color-pop); text-align: left; font-family: var(--font-heading); font-size: 1.8rem; font-weight: var(--fw-bold); margin-bottom: 0.75em; line-height: 1; } .service-card .learn-more-link { font-family: var(--font-button); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; font-size: 0.9rem; margin-top: 1em; } .service-card .learn-more-link svg { margin-left: 0.5em; width: 1.1em; height: 1.1em; } /* Portfolio Filter */ .portfolio-filter { color: var(--color-white); border-bottom: 3px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; font-family: var(--font-button); text-transform: uppercase; font-weight: var(--fw-semibold); background: none; border-radius: 0; padding: 0.5em 1em; font-size: 0.85rem; letter-spacing: 0.05em; } .portfolio-filter:hover { color: var(--color-pop); } .portfolio-filter.active { color: var(--color-pop); border-bottom-color: var(--color-pop); } .portfolio-item .group:hover .portfolio-overlay { opacity: 1; } .portfolio-overlay { background-color: rgba(18, 18, 18, 0.92); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; } .portfolio-overlay h3 { text-align: center; font-size: 1.9rem; margin-bottom: 0.4em; line-height: var(--lh-tight); } .portfolio-overlay p { text-align: center; font-size: 0.9rem; margin-bottom: 1.2em; } .portfolio-overlay a { font-family: var(--font-button); border: 1px solid var(--color-pop); color: var(--color-pop); background-color: transparent; padding: 0.6em 1.2em; border-radius: 4px; text-transform: uppercase; font-weight: var(--fw-semibold); margin-top: 0.5em; font-size: 0.8rem; letter-spacing: 0.05em; } .portfolio-overlay a:hover { background-color: var(--color-pop); color: var(--color-black); } /* Testimonials */ .testimonial-video-placeholder { background-color: var(--color-charcoal); aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; border: 1px solid var(--color-cool-gray); } .testimonial-video-placeholder svg { width: 4rem; height: 4rem; color: var(--color-pop); opacity: 0.6; } .testimonial-heading { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-white); text-align: left; line-height: var(--lh-tight); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 1.6rem; margin-bottom: 0.75em; } @media (min-width: 768px) { .testimonial-heading { font-size: 1.9rem; } } /* KPI Cards */ .kpi-card { background-color: var(--color-charcoal); padding: 1.5rem; border-radius: 0.5rem; text-align: center; border: 1px solid var(--color-cool-gray); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .kpi-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 191, 255, 0.2); border-color: var(--color-pop); } .kpi-value { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-pop); font-size: 2.5rem; line-height: 1.1; margin-bottom: 0.25em; display: block; } .kpi-card p { margin-bottom: 0; } /* Footer */ .footer-title { font-family: var(--font-heading); font-weight: var(--fw-bold); text-transform: uppercase; text-align: left; font-size: 1.8rem; letter-spacing: var(--tracking-wide); } .footer-heading { font-family: var(--font-heading); font-weight: var(--fw-semibold); text-align: left; font-size: 1.15rem; text-transform: uppercase; margin-bottom: 1.2em; color: var(--color-white); letter-spacing: var(--tracking-wide); } .brand-text { color: var(--color-pop); } .section-divider { width: 5rem; height: 4px; background-color: var(--color-pop); margin-left: auto; margin-right: auto; } /* --- END: Revised Custom CSS --- */ /* --- START: GrooveFunnels Overrides --- */ /* Pre‑Headline: ensure it’s visible, centered, and spaced above the H1 */ #hero .content-wrapper .pre-headline { display: block !important; width: 100% !important; text-align: center !important; font-size: 1.2rem !important; /* Reduced for mobile */ margin-bottom: 0.5em !important; z-index: 2 !important; } /* Main Headline: clamp instead of hard‑coding huge rems */ #hero .content-wrapper h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem) !important; line-height: 1.2 !important; margin: 0.2em 0 !important; text-transform: uppercase !important; z-index: 1 !important; } /* Responsive adjustments */ @media (min-width: 640px) { #hero .content-wrapper h1 { font-size: clamp(3rem, 4vw + 1rem, 5rem) !important; } #hero .content-wrapper .pre-headline { font-size: 1.5rem !important; /* Scaled up for larger screens */ } } @media (min-width: 1024px) { #hero .content-wrapper h1 { font-size: clamp(3.5rem, 3.5vw + 1rem, 6rem) !important; } } /* Ensure rotating‑word still fades & cycles */ #hero .content-wrapper #rotating-word { display: inline-block !important; opacity: 1 !important; transition: opacity 0.3s ease-in-out !important; min-width: 150px !important; text-align: center !important; /* Changed to center for better alignment with surrounding text */ } /* --- END: GrooveFunnels Overrides --- */