/* Page-specific styles for index.html (Home) */
/* Hero */
.hero {
position: relative;
min-height: 700px;
background-image: url('../images/html5-mobile-background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
overflow: hidden;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
z-index: 0;
}
.hero__content {
position: relative;
z-index: 1;
max-width: 1000px;
}
.hero__content h1 {
color: var(--color-white);
font-weight: 400;
letter-spacing: 1px;
line-height: 1.2;
margin-bottom: 20px;
}
.hero__content p {
color: var(--color-white);
font-size: 30px;
line-height: 1.2;
margin: 0;
}
@media (max-width: 800px) {
.hero {
min-height: 480px;
}
.hero__video {
display: none;
}
}
@media (max-width: 640px) {
.hero__content h1 {
font-size: 22px;
}
.hero__content p {
font-size: 24px;
}
}
/* Intro band */
.band {
padding: 40px 30px;
text-align: center;
}
.band--quality {
background: var(--color-red) url("../images/quote-background-red.png") no-repeat right center;
background-size: cover;
}
.band--quality h3 {
color: var(--color-white);
margin-bottom: 10px;
}
.band--quality p {
max-width: 900px;
margin: 0 auto;
color: var(--color-white);
font-size: var(--font-size-h5);
line-height: var(--line-height-h5);
}
.band--navy {
background: var(--color-navy);
}
.band--navy h3 {
margin: 0;
color: var(--color-white);
}
/* Services overview */
.services-overview {
padding: 60px 30px;
text-align: center;
}
.services-overview h3 {
color: var(--color-navy);
margin-bottom: 30px;
}
.services-overview__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px 40px;
max-width: 800px;
margin: 0 auto 30px;
}
.service-icon {
width: 150px;
}
.service-icon img {
width: 60px;
height: 60px;
object-fit: contain;
margin-bottom: 10px;
}
.service-icon h5 {
margin: 0;
color: var(--color-red);
font-size: 20px;
letter-spacing: 0.5px;
}
/* Parallax band */
.parallax-band {
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 150px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.parallax-band__overlay {
background: rgba(27, 44, 90, 0.8);
padding: 30px 50px;
text-align: center;
width: 100%;
max-width: 1100px;
}
.parallax-band__overlay h3 {
margin: 0;
color: var(--color-white);
letter-spacing: 1px;
font-weight: 700;
}
@media (max-width: 800px) {
.parallax-band {
background-attachment: scroll;
padding: 80px 20px;
}
}
/* Tablets (and other touch/coarse-pointer devices) hit a long-standing
WebKit/Blink bug where background-attachment: fixed sizes the image
against the full document instead of the viewport, making it render
zoomed in. Tablets often fall outside the 800px phone breakpoint above
(e.g. iPad landscape is 1024px), so guard on pointer type instead. */
@media (hover: none) and (pointer: coarse) {
.parallax-band {
background-attachment: scroll;
}
}
/* Android Chrome's "Desktop site" mode reports hover/pointer capabilities
as if a mouse were attached, so the coarse-pointer rule above misses it.
The touch device is still touch hardware underneath, and on a real touch
screen background-attachment: fixed keeps rescaling against the visual
viewport as the browser's address bar shows/hides during scroll, which
reads as the background zoom level changing. html.is-touch is set by
inline JS in from navigator.maxTouchPoints, which "Desktop site"
does not spoof. */
html.is-touch .parallax-band,
html.is-touch .mobile-band {
background-attachment: scroll;
}
/* Happy Clients */
.clients-section {
padding: 60px 30px;
text-align: center;
}
.clients-section h3 {
color: var(--color-navy);
margin-bottom: 30px;
}
.logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 35px 45px;
margin: 0 auto;
max-width: 1100px;
}
.logo-grid img {
max-height: 45px;
max-width: 150px;
width: auto;
height: auto;
}
/* Mobile band */
.mobile-band {
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 100px 20px;
text-align: center;
}
.mobile-band__banner {
background: var(--color-red);
display: inline-block;
padding: 18px 40px;
margin-bottom: 20px;
}
.mobile-band__banner h4 {
margin: 0;
color: var(--color-white);
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
}
.mobile-band__text {
color: var(--color-white);
font-size: var(--font-size-h4);
font-weight: 400;
letter-spacing: 0.5px;
line-height: var(--line-height-h4);
margin: 0 0 25px;
}
@media (max-width: 800px) {
.mobile-band {
background-attachment: scroll;
padding: 60px 20px;
}
}
/* Testimonial carousel (shares block classes with careers.css) */
.testimonial-carousel {
max-width: 800px;
padding: 50px 30px 30px;
text-align: center;
}
.testimonial-carousel__track {
position: relative;
display: grid;
overflow: hidden;
}
.testimonial-carousel__slide {
grid-area: 1 / 1;
visibility: hidden;
transform: translateX(100%);
transition: transform 0.6s ease;
}
.testimonial-carousel__slide.is-active {
visibility: visible;
transform: translateX(0);
}
.testimonial-carousel__slide.is-leaving {
visibility: visible;
transform: translateX(-100%);
}
.testimonial-carousel__slide.is-leaving-reverse {
visibility: visible;
transform: translateX(100%);
}
.testimonial-carousel__slide.is-park-left {
visibility: visible;
transform: translateX(-100%);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.testimonial-carousel__slide {
transition: none;
}
}
.testimonial-carousel__logo {
max-height: 40px;
max-width: 160px;
width: auto;
height: auto;
margin: 0 auto 15px;
display: block;
}
.testimonial-carousel__quote {
color: var(--color-gray-text);
font-style: italic;
font-size: var(--font-size-p);
line-height: var(--line-height-p);
margin: 0 0 15px;
}
.testimonial-carousel__author {
margin: 0;
color: var(--color-gray-text);
}
.testimonial-carousel__author strong {
color: var(--color-black);
}
.testimonial-carousel__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.testimonial-carousel__dots button {
position: relative;
width: 10px;
height: 10px;
padding: 0;
border-radius: 50%;
border: 1px solid #ccc;
background: var(--color-white);
cursor: pointer;
}
.testimonial-carousel__dots button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
}
.testimonial-carousel__dots button.is-active {
background: var(--color-navy);
border-color: var(--color-navy);
}
/* Bugs discovered */
.bugs-section {
padding: 30px 30px 60px;
text-align: center;
}
.bugs-section h2 {
color: var(--color-gray-text);
font-weight: 400;
}
.bugs-section__count {
color: var(--color-red);
font-size: 48px;
font-weight: 700;
margin: 0 0 20px;
}
.platform-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px 40px;
max-width: 1000px;
margin: 30px auto 0;
}
.platform-grid img {
max-height: 40px;
max-width: 150px;
width: auto;
height: auto;
}
/* Let's Connect */
.connect-section {
padding: 30px 30px 60px;
text-align: center;
}
.connect-section__divider {
width: 100%;
max-width: 1000px;
height: 1px;
margin: 0 auto 30px;
border: 0;
background: var(--color-gray-text);
}
.connect-section h2 {
margin-bottom: 20px;
}
.connect-section p {
max-width: 700px;
margin: 0 auto 30px;
color: var(--color-gray-text);
font-size: var(--font-size-h5);
line-height: var(--line-height-h5);
}