commit 20260703
This commit is contained in:
@@ -1,42 +1,28 @@
|
||||
/**
|
||||
* Home hero carousel — scoped to #section-1.home-hero-carousel
|
||||
* Source: Serena/Figma HeroCarousel.tsx (autoplay 5s, fade, pill dots)
|
||||
*
|
||||
* Layout extension (see js/home-hero-carousel.js):
|
||||
* data-hero-layout-reference — slide that sets carousel height
|
||||
* data-hero-layout-anchor — bottom edge used for dots (gap: --hero-coach-dots-gap)
|
||||
* JS sets --hero-reference-* on #homepage or carousel root; CSS fallbacks apply before measure
|
||||
* Mobile: .is-banner-active pins dots to viewport bottom while banner is in view
|
||||
*/
|
||||
#homepage #section-1.home-hero-carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
--hero-inner-padding-bottom: 40px;
|
||||
}
|
||||
|
||||
/* #homepage .home-hero-carousel__glow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
left: 50%;
|
||||
width: 140%;
|
||||
max-width: 1600px;
|
||||
height: 700px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#f7931e 0%,
|
||||
#88510f 18%,
|
||||
#2b1905 40%,
|
||||
transparent 70%
|
||||
);
|
||||
} */
|
||||
|
||||
#homepage .home-hero-carousel__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1128px;
|
||||
max-width: var(--hero-inner-max-width, 1280px);
|
||||
margin: 0 auto;
|
||||
padding: 48px 20px 56px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -50,8 +36,8 @@
|
||||
padding: var(--hero-nav-gap) 32px
|
||||
calc(var(--hero-coach-dots-gap) + var(--hero-dots-height) + var(--hero-inner-padding-bottom));
|
||||
min-height: calc(
|
||||
var(--hero-nav-gap) + var(--hero-slide1-viewport-height)
|
||||
+ var(--hero-coach-dots-gap) + var(--hero-dots-height)
|
||||
var(--hero-reference-dots-top, var(--hero-reference-dots-top-fallback))
|
||||
+ var(--hero-dots-height)
|
||||
+ var(--hero-inner-padding-bottom)
|
||||
);
|
||||
}
|
||||
@@ -59,14 +45,16 @@
|
||||
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 720px;
|
||||
overflow: visible;
|
||||
height: var(--hero-reference-viewport-height, 720px);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
height: var(--hero-slide1-viewport-height);
|
||||
overflow: hidden;
|
||||
height: var(
|
||||
--hero-reference-viewport-height,
|
||||
var(--hero-reference-viewport-height-fallback)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,14 +62,47 @@
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__inner {
|
||||
padding-bottom: calc(
|
||||
var(--hero-mobile-dots-reserve, 26px) + var(--hero-inner-padding-bottom, 40px)
|
||||
);
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__dots {
|
||||
top: auto;
|
||||
bottom: calc(
|
||||
var(--hero-mobile-fixed-dots-bottom, 16px) + var(--hero-inner-padding-bottom, 40px)
|
||||
);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel.is-banner-active .home-hero-carousel__dots {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: auto;
|
||||
bottom: calc(
|
||||
var(--hero-mobile-fixed-dots-bottom, 16px) + env(safe-area-inset-bottom, 0px)
|
||||
);
|
||||
z-index: 20;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel.is-banner-active .home-hero-carousel__dots::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
bottom: calc(-1 * var(--hero-mobile-fixed-dots-bottom, 16px) - env(safe-area-inset-bottom, 0px));
|
||||
height: 72px;
|
||||
background: linear-gradient(to top, rgba(5, 3, 2, 0.75), transparent);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
@@ -104,15 +125,11 @@
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__slide {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide-grid {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, var(--hero-content-max-width, 680px)) minmax(0, 1fr);
|
||||
column-gap: 48px;
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -120,6 +137,7 @@
|
||||
#homepage .home-hero-carousel__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
@@ -130,6 +148,15 @@
|
||||
#homepage .home-hero-carousel__content {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__title {
|
||||
font-size: 54px;
|
||||
line-height: 1.1;
|
||||
max-width: var(--hero-content-max-width, 680px);
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,21 +219,42 @@
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@media (max-width: 991.98px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 991.98px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 12px;
|
||||
row-gap: 14px;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--primary {
|
||||
@@ -254,12 +302,39 @@
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 12px;
|
||||
row-gap: 14px;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--primary {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--ghost,
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--ai-coach {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__ai-coach {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
width: auto;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
@@ -284,9 +359,12 @@
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn--primary:hover {
|
||||
opacity: 0.9;
|
||||
/* opacity: 0.9; */
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: #F9A215 !important;
|
||||
color: #fff !important;
|
||||
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn--ghost {
|
||||
@@ -316,12 +394,27 @@
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
/* Inline stroke icons — override theme.css svg { overflow: hidden } clipping */
|
||||
#homepage .home-hero-carousel__btn svg {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn svg path {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__visual img {
|
||||
@@ -330,11 +423,37 @@
|
||||
max-width: 440px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(1) .home-hero-carousel__visual img,
|
||||
#homepage .home-hero-carousel__slide:nth-child(2) .home-hero-carousel__visual img {
|
||||
transform: scale(var(--hero-visual-image-scale, 1.06));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__visual img {
|
||||
#homepage .home-hero-carousel__visual {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: var(--hero-visual-zone-height);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(1) .home-hero-carousel__visual img,
|
||||
#homepage .home-hero-carousel__slide:nth-child(2) .home-hero-carousel__visual img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(3) .home-hero-carousel__visual img {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: var(--hero-visual-zone-height);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -348,7 +467,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -361,13 +479,11 @@
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__dots {
|
||||
top: calc(
|
||||
var(--hero-nav-gap) + var(--hero-slide1-content-height) + var(--hero-coach-dots-gap)
|
||||
top: var(
|
||||
--hero-reference-dots-top,
|
||||
var(--hero-reference-dots-top-fallback)
|
||||
);
|
||||
bottom: auto;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
margin-top: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* Support CTA floor — reusable module (Not found what you're looking for?)
|
||||
*
|
||||
* Usage:
|
||||
* <link href="../assets/css/modules/support-cta.css" rel="stylesheet">
|
||||
* <link href="../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
* <div id="support-cta-module"></div>
|
||||
* <script src="/js/support-cta-module.js"></script>
|
||||
*/
|
||||
|
||||
.aifo-support-cta {
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: #0e0e0e;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aifo-support-cta__panel {
|
||||
background: linear-gradient(165deg, #18130f 0%, #101010 48%, #0e0e0e 100%);
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::before,
|
||||
.aifo-support-cta__panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::before {
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
width: min(92%, 320px);
|
||||
height: 48px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: #f9a215;
|
||||
opacity: 0.35;
|
||||
filter: blur(44px);
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::after {
|
||||
top: 8px;
|
||||
right: -48px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: #f98715;
|
||||
opacity: 0.22;
|
||||
filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.aifo-support-cta__panel {
|
||||
padding: 48px 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-support-cta__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 605px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__title {
|
||||
margin: 0;
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aifo-support-cta__desc {
|
||||
margin: 0;
|
||||
font-size: clamp(16px, 2.2vw, 24px);
|
||||
line-height: 1.35;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.24px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aifo-support-cta .aifo-btn {
|
||||
min-width: 225px;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn {
|
||||
background: #231f20;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn:hover,
|
||||
.aifo-support-cta__email-btn:focus-visible {
|
||||
background: #2a2627;
|
||||
}
|
||||
|
||||
.aifo-support-cta__arrow-icon {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn:hover .aifo-support-cta__arrow-icon,
|
||||
.aifo-support-cta__email-btn:focus-visible .aifo-support-cta__arrow-icon {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.aifo-support-cta__visual {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.aifo-support-cta__visual {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-support-cta__img {
|
||||
display: block;
|
||||
width: 327px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.aifo-support-cta__panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aifo-support-cta__content {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.aifo-support-cta {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions .aifo-btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user