#wearables-page { background: var(--pg-color-gray-light); color: var(--pg-color-ink); overflow: hidden; } #wearables-page, #wearables-page * { box-sizing: border-box; } #wearables-page img, #wearables-page video { max-width: 100%; } .wearables-eyebrow { width: fit-content; margin: 0 0 20px; color: var(--pg-color-surface); font-size: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 6px; } .wearables-eyebrow--dark { color: #54585A; } .wearables-eyebrow--orange { color: var(--pg-color-accent); } .wearables-button-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .wearables-button, .wearables-outline-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 36px; color: var(--pg-color-surface); font-size: 14px; font-weight: 500; background-color: transparent; border: 2px solid var(--pg-color-accent); border-radius: 25px; text-decoration: none; text-transform: uppercase; transition: 0.1s linear all; } .wearables-button:hover, .wearables-outline-button:hover { background-color: var(--pg-color-accent); color: var(--pg-color-surface); text-decoration: none; } .wearables-button--secondary { border-color: var(--pg-color-surface); } .wearables-button--secondary:hover { border-color: var(--pg-color-accent); } #wearables-hero { position: relative; isolation: isolate; min-height: 720px; display: flex; align-items: center; padding: 150px 0 95px; margin: 80px 0 0; background: var(--pg-color-ink); color: var(--pg-color-white); overflow: hidden; } #wearables-hero .wearables-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } #wearables-hero .wearables-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% top; } #wearables-hero .wearables-hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 36%, rgba(0,0,0,0.30) 70%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.08) 48%, rgba(0,0,0,0.42) 100%); } #wearables-hero .container-fluid { position: relative; z-index: 2; } .wearables-hero__content { position: relative; z-index: 3; max-width: 640px; } .wearables-hero__content h1 { max-width: 760px; margin: 0 0 42px; color: var(--pg-color-white); font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-hero__content h1 { font-size: 67px; } } @media (max-width: 767px) { .wearables-hero__content h1 { font-size: 48px; } } @media (max-width: 420px) { .wearables-hero__content h1 { font-size: 36px; } } .wearables-hero__content h1 span { color: var(--pg-color-accent); font-weight: 500; text-transform: none; } .wearables-hero__subtitle { max-width: 470px; margin: 0 0 32px; color: #bcbec0; font-size: 20px; font-weight: 400; } .wearables-hero__actions { margin-top: 0; } .wearables-hero__nav { position: absolute; right: 48px; bottom: 44px; z-index: 3; display: flex; align-items: center; gap: 38px; } .wearables-hero__nav a { color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 500; text-transform: uppercase; text-decoration: none; } .wearables-hero__nav a:hover { color: var(--pg-color-accent); text-decoration: none; } #wearables-why { position: relative; padding: 100px 0 90px; background: #e8e8e6; } .wearables-why__slider { position: relative; } .wearables-why__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.55s ease, visibility 0.55s ease, transform 0.55s ease; position: absolute; inset: 0; } .wearables-why__slide.is-active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); } .wearables-why__content { width: 100%; max-width: none; } .wearables-why__content h2 { margin: 0 0 22px; color: var(--pg-color-accent); font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-why__content h2 { font-size: 48px; } } @media (max-width: 767px) { .wearables-why__content h2 { font-size: 36px; } } @media (max-width: 420px) { .wearables-why__content h2 { font-size: 32px; } } .wearables-why__content p { max-width: 520px; margin: 0 0 20px; color: #54585a; font-size: 20px; } .wearables-why__content ul { max-width: 520px; margin: 0; padding-left: 20px; } .wearables-why__content li { margin-bottom: 10px; color: #54585a; font-size: 20px; } .wearables-why__media { width: 100%; max-width: 100%; overflow: hidden; background: var(--pg-color-ink); } .wearables-why__media video { display: block; width: 100%; max-width: 100%; height: 360px; object-fit: cover; object-position: center; } .wearables-slider-dots { display: flex; justify-content: center; gap: 13px; margin-top: 48px; } .wearables-slider-dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #6d6d6d; cursor: pointer; } .wearables-slider-dots button.is-active { background: var(--pg-color-accent); } #wearables-configure { scroll-margin-top: 190px; padding: 105px 0 120px; background: var(--pg-color-white); } .wearables-section-heading { width: 100%; margin: 0 auto 42px; } .wearables-section-heading h2 { max-width: 760px; margin: 0 0 32px; color: #54585a; font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-section-heading h2 { font-size: 48px; } } @media (max-width: 767px) { .wearables-section-heading h2 { font-size: 36px; } } @media (max-width: 420px) { .wearables-section-heading h2 { font-size: 32px; } } .wearables-section-heading p:not(.wearables-eyebrow) { text-align: center; margin: 0; color: #54585a; font-size: 20px; } .wearables-device-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin: 0 0 54px; } .wearables-device-tab { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-width: 240px; padding: 9px 20px; border: 1px solid rgba(255,95,0,0.58); border-radius: 13px; background: rgba(217,217,217,0.26); color: #54585a; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .wearables-device-tab img { width: auto; max-height: 42px; object-fit: contain; } .wearables-device-tab.is-active, .wearables-device-tab:hover { border-color: var(--pg-color-accent); box-shadow: 0 10px 24px rgba(255,95,0,0.12); } .wearables-device-tab:hover { transform: translateY(-1px); } .wearables-product-panel { display: none; } .wearables-product-panel.is-active { display: block; } .wearables-product-panel__topline h3, .wearables-product-panel h3 { margin: 0 0 30px; color: #54585a; font-size: 36px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-product-panel__topline h3, .wearables-product-panel h3 { font-size: 32px; } } @media (max-width: 767px) { .wearables-product-panel__topline h3, .wearables-product-panel h3 { font-size: 28px; } } @media (max-width: 420px) { .wearables-product-panel__topline h3, .wearables-product-panel h3 { font-size: 24px; } } .wearables-product-panel h3 span { color: var(--pg-color-accent); font-weight: 500; text-transform: none; } .wearables-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; width: 100%; } .wearables-product-grid--1 { grid-template-columns: minmax(0, 1fr); } .wearables-product-grid--1 .wearables-product-card { max-width: 520px; } .wearables-product-card { overflow: hidden; border: 1px solid rgba(84,88,90,0.29); border-radius: 13px; background: var(--pg-color-white); box-shadow: 0 20px 42px rgba(0,0,0,0.055); } .wearables-product-card__image { min-height: 245px; display: flex; align-items: center; justify-content: center; padding: 34px 24px; background: #f0f0f0; } .wearables-product-card__image img { display: block; width: auto; height: auto; max-width: min(72%, 240px); max-height: 185px; object-fit: contain; } .wearables-product-card__content { padding: 22px; border-top: 1px solid rgba(84,88,90,0.29); } .wearables-product-card h4 { margin: 0 0 14px; color: var(--pg-color-accent); font-size: 28px; font-weight: 500; text-transform: none; } @media (max-width: 767px) { .wearables-product-card h4 { font-size: 24px; } } @media (max-width: 420px) { .wearables-product-card h4 { font-size: 24px; } } .wearables-product-card p { margin: 0 0 14px; color: #54585a; font-size: 14px; } .wearables-product-card__meta { padding: 14px 0 0; margin: 14px 0 0 !important; border-top: 1px solid var(--pg-color-muted); color: #54585a !important; font-size: 13px !important; } .wearables-product-card__meta strong { color: var(--pg-color-accent); font-weight: 500; text-transform: uppercase; } .wearables-configure__actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 24px; margin-top: 48px; } .wearables-configure__actions .wearables-outline-button { min-width: 240px; color: var(--pg-color-ink); font-size: 14px; } .wearables-configure__actions .wearables-outline-button:hover { color: var(--pg-color-white); } #wearables-ergonomics { position: relative; isolation: isolate; min-height: 740px; display: flex; align-items: center; padding: 110px 0; background: var(--pg-color-ink); color: var(--pg-color-white); overflow: hidden; } .wearables-ergonomics__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .wearables-ergonomics__bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 68% 20%; } .wearables-ergonomics__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 36%, rgba(0,0,0,0.32) 66%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.34)); } #wearables-ergonomics .container-fluid { position: relative; z-index: 2; } .wearables-ergonomics__content { max-width: 620px; } .wearables-ergonomics__content h2 { margin: 0 0 28px; color: var(--pg-color-white); font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-ergonomics__content h2 { font-size: 48px; } } @media (max-width: 767px) { .wearables-ergonomics__content h2 { font-size: 36px; } } @media (max-width: 420px) { .wearables-ergonomics__content h2 { font-size: 32px; } } .wearables-ergonomics__content > p { max-width: 560px; margin: 0 0 30px; font-size: 16px; } .wearables-did-you-know { max-width: 520px; margin: 0 0 30px; padding: 22px 24px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; background: rgba(0,0,0,0.34); } .wearables-did-you-know span { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--pg-color-muted); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; } .wearables-did-you-know p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14px; } #wearables-faq { padding: 100px 0 120px; background: var(--pg-color-gray-light); } #wearables-faq .wearables-section-heading { margin-bottom: 44px; } .wearables-faq-list { width: 100%; margin: 0; } .wearables-faq-item { margin-bottom: 10px; } .wearables-faq-question { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 22px; border: 1px solid #dedede; border-radius: 3px; background: #ededed; color: var(--pg-color-gray); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; } .wearables-faq-icon { flex: 0 0 auto; color: var(--pg-color-ink); font-size: 20px; transition: transform 0.2s ease; } .wearables-faq-answer { display: none; padding: 18px 22px 20px; border: 1px solid #e5e5e5; border-top: 0; background: var(--pg-color-white); color: #4c4c4c; font-size: 14px; } .wearables-faq-answer p { margin: 0; } .wearables-faq-item.is-open .wearables-faq-answer { display: block; } .wearables-faq-item.is-open .wearables-faq-icon { transform: rotate(45deg); } #wearables-ready, .wearables-ready { padding: 85px 0; background: var(--pg-color-ink); color: var(--pg-color-surface); text-align: center; } #wearables-ready h2, .wearables-ready h2 { margin: 0 0 28px; color: var(--pg-color-surface); font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { #wearables-ready h2, .wearables-ready h2 { font-size: 48px; } } @media (max-width: 767px) { #wearables-ready h2, .wearables-ready h2 { font-size: 36px; } } @media (max-width: 420px) { #wearables-ready h2, .wearables-ready h2 { font-size: 32px; } } #wearables-ready .wearables-button-row, .wearables-ready .wearables-button-row { justify-content: center; } @media only screen and (min-width: 1921px) { #wearables-hero { min-height: 820px; padding-top: 185px; padding-bottom: 120px; } #wearables-hero .wearables-hero__bg img { object-position: 64% top; } .wearables-hero__content { max-width: 720px; } .wearables-hero__subtitle { max-width: 540px; } #wearables-why, #wearables-configure, #wearables-faq { padding-top: 125px; padding-bottom: 125px; } .wearables-why__slide { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 110px; } .wearables-why__content { max-width: 620px; } .wearables-why__content p, .wearables-why__content ul { max-width: 590px; } .wearables-product-grid { gap: 34px; } .wearables-product-card__image { min-height: 300px; } .wearables-product-card__image img { max-width: min(70%, 290px); max-height: 225px; } #wearables-ergonomics { min-height: 820px; padding-top: 130px; padding-bottom: 130px; } .wearables-ergonomics__content { max-width: 700px; } } @media only screen and (max-width: 1280px) { #wearables-hero .wearables-hero__bg img { object-position: 60% top; } .wearables-hero__nav { right: 30px; gap: 24px; } } @media only screen and (max-width: 992px) { #wearables-hero { min-height: 650px; padding: 130px 0 80px; } .wearables-hero__content h1 { font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-hero__content h1 { font-size: 67px; } } @media (max-width: 767px) { .wearables-hero__content h1 { font-size: 48px; } } @media (max-width: 420px) { .wearables-hero__content h1 { font-size: 36px; } } .wearables-hero__nav { display: none; } .wearables-why__slide { grid-template-columns: 1fr; gap: 34px; } .wearables-why__media { width: 100%; max-width: none; } .wearables-why__media video { height: 300px; } .wearables-why__content, .wearables-why__content p, .wearables-why__content ul { max-width: 100%; } .wearables-product-grid { grid-template-columns: 1fr; } .wearables-product-grid--1 .wearables-product-card, .wearables-product-card { max-width: 100%; } .wearables-ergonomics__bg img { object-position: 72% center; } } @media only screen and (max-width: 768px) { #wearables-hero { min-height: 620px; padding: 120px 0 70px; } #wearables-hero .wearables-hero__bg img { object-position: 66% top; } #wearables-hero .wearables-hero__overlay { background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.74) 100%), linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.42)); } .wearables-eyebrow { font-size: 14px; letter-spacing: 4px; } .wearables-hero__content h1 { max-width: 390px; margin-bottom: 30px; font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-hero__content h1 { font-size: 67px; } } @media (max-width: 767px) { .wearables-hero__content h1 { font-size: 48px; } } @media (max-width: 420px) { .wearables-hero__content h1 { font-size: 36px; } } .wearables-hero__subtitle { max-width: 360px; font-size: 16px; } #wearables-why, #wearables-configure, #wearables-faq { padding: 72px 0 78px; } .wearables-why__media { aspect-ratio: 4 / 3; } .wearables-section-heading h2 { margin-bottom: 22px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { .wearables-section-heading h2 { font-size: 48px; } } @media (max-width: 767px) { .wearables-section-heading h2 { font-size: 36px; } } @media (max-width: 420px) { .wearables-section-heading h2 { font-size: 32px; } } .wearables-section-heading p:not(.wearables-eyebrow) { font-size: 16px; } .wearables-device-tabs { gap: 12px; } .wearables-device-tab { width: 100%; min-width: 0; } .wearables-configure__actions { flex-direction: column; align-items: stretch; } .wearables-configure__actions .wearables-outline-button { width: 100%; } #wearables-ergonomics { min-height: auto; padding: 80px 0; } .wearables-ergonomics__overlay { background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.74) 100%), linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45)); } .wearables-did-you-know span { font-size: 14px; margin-bottom: 14px; } } @media only screen and (max-width: 440px) { #wearables-hero { min-height: 570px; padding: 80px 0; } #wearables-hero .wearables-hero__bg img { object-position: 70% top; } .wearables-hero__content h1 { font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-hero__content h1 { font-size: 67px; } } @media (max-width: 767px) { .wearables-hero__content h1 { font-size: 48px; } } @media (max-width: 420px) { .wearables-hero__content h1 { font-size: 36px; } } .wearables-hero__subtitle { font-size: 14px; } .wearables-button, .wearables-outline-button { width: 100%; text-align: center; } .wearables-why__content h2, .wearables-section-heading h2, .wearables-ergonomics__content h2 { font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .wearables-why__content h2, .wearables-section-heading h2, .wearables-ergonomics__content h2 { font-size: 48px; } } @media (max-width: 767px) { .wearables-why__content h2, .wearables-section-heading h2, .wearables-ergonomics__content h2 { font-size: 36px; } } @media (max-width: 420px) { .wearables-why__content h2, .wearables-section-heading h2, .wearables-ergonomics__content h2 { font-size: 32px; } } .wearables-why__media video { height: 240px; } .wearables-product-card__image { min-height: 220px; } .wearables-faq-question { font-size: 14px; } }