, so we drop the hidden fieldset and unwrap the row's
(display:contents) to let the email + button sit in the flex row. */ .win-newsletter { background: var(--dark-2); border-radius: 24px; padding: 30px; } .win-newsletter .wpcf7 { margin: 0; } .win-newsletter .hidden-fields-container { display: none; } .win-newsletter form { margin: 0; } .win-newsletter form > p { margin: 0 0 14px; } .win-newsletter__label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8FCFCF; } /* align-items:flex-start (not stretch) so the validation tip growing the input wrapper can't stretch the submit button into a tall pill; fixed heights below keep the field + button matched. */ .win-newsletter__row { display: flex; gap: 10px; align-items: flex-start; } .win-newsletter__row > p { display: contents; margin: 0; } .win-newsletter__row .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; } .win-newsletter__row input:not([type="submit"]) { width: 100%; height: 52px; background: var(--dark); border: 1px solid var(--dark-3); border-radius: 999px; padding: 0 22px; font-family: var(--font-body); font-size: 15.5px; color: #fff; outline: none; box-sizing: border-box; } .win-newsletter__row input::placeholder { color: #7F9A9A; } .win-newsletter__row input[type="submit"] { flex: 0 0 auto; height: 52px; box-sizing: border-box; background: var(--btn); color: #fff; border: none; border-radius: 999px; padding: 0 30px; font-family: var(--font-body); font-weight: 800; font-size: 15.5px; cursor: pointer; transition: background .25s ease; white-space: nowrap; } .win-newsletter__row input[type="submit"]:hover { background: var(--btn-hover); } /* CF7 validation + response, restyled to match (no default box). */ .win-newsletter .wpcf7-not-valid-tip { color: #F7A8BC; font-size: 12.5px; margin-top: 6px; flex-basis: 100%; } .win-newsletter .wpcf7-response-output { border: 0 !important; margin: 10px 0 0 !important; padding: 0 !important; font-size: 13.5px; color: #8FCFCF; } .win-newsletter .wpcf7-spinner { flex: 0 0 auto; align-self: center; } @media (max-width: 640px) { .win-newsletter__row { flex-wrap: wrap; } .win-newsletter__row input[type="submit"] { width: 100%; } } .win-footer__mid { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; padding: 7vh 0; } .win-footer__brand { max-width: 380px; } .win-footer__brand > img { height: 130px; width: auto; display: block; margin-bottom: 18px; } .win-footer__brand p { font-size: 15px; line-height: 1.65; color: var(--dark-muted); margin: 0 0 20px; } .win-footer__social { display: flex; gap: 12px; } .win-footer__social a { width: 42px; height: 42px; border-radius: 50%; background: var(--dark-2); display: flex; align-items: center; justify-content: center; color: var(--dark-soft); transition: background .25s ease; } .win-footer__social a:hover { background: var(--teal); color: #fff; } .win-footer__badges { display: flex; flex-direction: column; gap: 20px; } .win-footer__badge { display: flex; align-items: center; gap: 14px; } .win-footer__badge img { height: 38px; width: auto; } .win-footer__badge span { font-size: 13.5px; color: var(--dark-soft); max-width: 180px; line-height: 1.5; } .win-footer__cols { display: flex; gap: 80px; flex-wrap: wrap; } .win-footer__col .h { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-mut2); margin: 0 0 12px; } .win-footer__links { display: flex; flex-direction: column; gap: 12px; } .win-footer__links a { color: var(--dark-soft); font-size: 15.5px; } .win-footer__links a:hover { color: #fff; } .win-footer__bottom { border-top: 1px solid var(--dark-line); padding: 26px 0 30px; display: flex; justify-content: space-between; gap: 24px; font-size: 13.5px; color: var(--dark-mut2); flex-wrap: wrap; } .win-footer__bottom a { color: #8FCFCF; } .win-footer__bottom a:hover { color: #fff; } /* ============================================================================= ROW: hero ========================================================================== */ .win-hero { position: relative; height: 100vh; min-height: 780px; overflow: hidden; background: #0c2429 center/cover no-repeat; } .win-hero__bg, .win-hero__bg video, .win-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Own stacking context (isolate) so a composited Vimeo iframe can't paint above the overlay/copy — it stays trapped inside .win-hero__bg (z:0). */ .win-hero__bg { z-index: 0; isolation: isolate; } .win-hero__bg img { z-index: 0; } .win-hero__bg video { z-index: 1; } .win-hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(75deg, rgba(12,36,41,.72) 0%, rgba(12,36,41,.38) 48%, rgba(12,36,41,.12) 100%); } .win-hero__inner { position: relative; z-index: 3; width: 95%; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 6vh; } .win-hero__copy { max-width: 1050px; } .win-hero__badge { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-soft); border: 1px solid rgba(207,240,232,.45); background: rgba(138,111,191,.35); border-radius: 999px; padding: 8px 18px; margin-bottom: 30px; } .win-hero__badge svg { fill: var(--gold); } .win-hero__title { font-size: clamp(38px, 4.6vw, 74px); line-height: 1.08; color: #fff; margin: 0 0 40px; } .win-hero__actions { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; } .win-hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; } .win-hero__lead { font-size: 18px; line-height: 1.6; color: #DCE9E9; max-width: 420px; margin: 0; } /* ============================================================================= ROW: welcome (intro statement + founders reel panel) ========================================================================== */ .win-welcome { position: relative; padding: 16vh 0 10vh; } .win-welcome__leaf { position: absolute; top: 8%; right: 4%; width: 200px; opacity: .35; pointer-events: none; } .win-welcome__head { font-size: clamp(44px, 4.4vw, 76px); line-height: 1.12; color: var(--ink-deep); margin: 0 0 8px; max-width: 1300px; } .win-welcome__head .t { color: var(--teal); } .win-welcome__head .u { color: var(--purple); } .win-welcome__head .g { position: relative; white-space: nowrap; color: var(--gold-deep); } .win-welcome__head .g svg { position: absolute; left: 0; bottom: -8px; width: 100%; overflow: visible; } .win-welcome__panel { display: grid; grid-template-columns: 1.6fr 1fr; gap: 5vw; align-items: center; margin-top: 9vh; background: var(--mint-panel); border-radius: var(--radius-lg); padding: 6vh 4vw; } .win-reel { position: relative; } .win-reel__deco { position: absolute; top: -22px; left: -22px; width: 140px; height: 140px; border-radius: 32px; background: var(--gold-soft); z-index: 0; } .win-reel__frame { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 26px 60px rgba(20,52,58,.2); } .win-reel__frame img { width: 100%; height: 62vh; min-height: 460px; object-fit: cover; display: block; } .win-reel__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,36,41,.04) 40%, rgba(12,36,41,.68)); } .win-reel__play { position: absolute; top: 50%; left: 50%; margin: -48px 0 0 -48px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.96); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(0,0,0,.32); } .win-reel__play .pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.55); animation: winPlayPulse 2s ease-out infinite; } .win-reel__play .pulse.d { background: rgba(255,255,255,.35); animation-delay: .6s; } .win-reel__play svg { position: relative; margin-left: 5px; fill: var(--teal); } @keyframes winPlayPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2); opacity: 0; } } .win-reel__caption { position: absolute; left: 34px; right: 34px; bottom: 28px; z-index: 2; } .win-reel__caption .t1 { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: #fff; margin-bottom: 4px; } .win-reel__caption .t2 { font-size: 15px; color: var(--dark-soft); } .win-welcome__copy { display: flex; flex-direction: column; gap: 26px; max-width: 440px; } .win-welcome__copy p { margin: 0; } .win-welcome__copy p.lead { font-size: 21px; line-height: 1.7; color: var(--ink-mid); } .win-welcome__copy p.body { font-size: 18px; line-height: 1.75; color: var(--ink-soft); } .win-welcome__copy strong { color: var(--ink-deep); } /* ============================================================================= ROW: locations (map + numbered location list) ========================================================================== */ .win-locations { position: relative; overflow: hidden; } .win-locations__inner { width: 95%; max-width: var(--wrap); margin: 0 auto; padding: 9vh 0 10vh; position: relative; } .win-locations__map { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 46%; max-width: 620px; } .win-locations__map > div { position: relative; } .win-locations__map img { width: 100%; height: auto; display: block; pointer-events: none; } .win-locations__pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; } .win-locations__pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: winPlayPulse 1.8s ease-out infinite; } .win-locations__head { position: relative; font-size: clamp(38px,3.6vw,60px); line-height: 1.12; color: var(--ink-deep); margin: 0 0 20px; max-width: 640px; } .win-locations__intro { position: relative; font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 44px; max-width: 420px; } .win-locations__list { position: relative; display: flex; flex-direction: column; max-width: 420px; } .win-loc { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid #DCE6E6; } .win-locations__list .win-loc:last-child { border-bottom: none; } .win-loc__num { width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-head); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #EAF0F0; color: #7C9296; } .win-loc__name { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #5A7075; } .win-loc__status { margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; } .win-loc.is-open .win-loc__num { background: var(--teal); color: #fff; } .win-loc.is-open .win-loc__name { color: var(--ink-deep); } .win-loc__status.is-open { color: var(--teal); background: #DCEEEE; } .win-loc__status.is-soon { color: #3D7A3D; background: #E4F2DC; } /* ============================================================================= ROW: features (tinted value cards / plain facility cards / role cards) ========================================================================== */ .win-features { padding: 10vh 0 12vh; } .win-features__head { margin-bottom: 6vh; } .win-features__head.is-empty { margin-bottom: 0; } .win-features__intro { font-size: 18px; line-height: 1.7; color: var(--ink-soft); max-width: 640px; margin: 12px 0 0; } .win-features__grid { display: grid; gap: 26px; grid-template-columns: repeat(var(--cols, 4), 1fr); } .win-fcard { border-radius: 36px; padding: 54px 42px 46px; display: flex; flex-direction: column; } .win-fcard__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px,2.2vw,38px); line-height: 1.15; margin-bottom: 28px; } .win-fcard__points { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; } .win-fcard__point { display: flex; gap: 12px; } .win-fcard__point svg { flex-shrink: 0; margin-top: 4px; } .win-fcard__text { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .win-fcard__icon { margin-top: auto; padding-top: 34px; } .win-fcard__icon span { width: 58px; height: 58px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(46,143,143,.18); } .win-fcard__btn { margin-top: 22px; } /* themes */ .win-fcard.t-teal { background: #EAF4F4; } .win-fcard.t-teal .win-fcard__title { color: #17555A; } .win-fcard.t-teal .win-fcard__points { color: #2C5A5F; } .win-fcard.t-purple { background: #F0EBF9; } .win-fcard.t-purple .win-fcard__title { color: #4E3B7E; } .win-fcard.t-purple .win-fcard__points { color: #4E4468; } .win-fcard.t-green { background: #EFF6E6; } .win-fcard.t-green .win-fcard__title { color: #3E6222; } .win-fcard.t-green .win-fcard__points { color: #44573A; } .win-fcard.t-gold { background: #FBF3DC; } .win-fcard.t-gold .win-fcard__title { color: #7A5A12; } .win-fcard.t-gold .win-fcard__points { color: #6B5A2E; } .win-fcard.t-plain { background: #fff; box-shadow: 0 4px 20px rgba(30,58,64,.07); } /* facility (plain) card variant */ .win-features.is-plain .win-fcard { border-radius: 28px; padding: 40px 36px; min-height: 0; } .win-features.is-plain .win-fcard__title { font-size: clamp(21px,1.7vw,26px); margin-bottom: 12px; color: var(--ink-deep); } .win-fcard__badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3D7A3D; background: #E4F2DC; border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; } /* ============================================================================= ROW: story (pinned word-cycle + image stack) ========================================================================== */ .win-story { position: relative; background: #DCEFE4; border-radius: 48px 48px 0 0; } .win-story__pin { min-height: 680px; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; } .win-story__leaf { position: absolute; bottom: 6%; right: 3%; width: 260px; opacity: .12; pointer-events: none; } .win-story__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6vw; align-items: center; } .win-story__head { font-size: clamp(40px,3.6vw,62px); line-height: 1.12; color: var(--ink-deep); margin: 0 0 24px; } .win-story__words { display: flex; flex-direction: column; gap: 14px; } .win-story__word { font-family: var(--font-head); font-weight: 700; font-size: 34px; display: flex; align-items: center; gap: 16px; } .win-story__word span.dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .win-story__note { font-size: 18px; line-height: 1.75; color: var(--ink-soft); margin: 34px 0 0; max-width: 480px; } .win-story__imgwrap { position: relative; height: 64vh; min-height: 440px; } .win-story__card { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .win-story__card img { width: 100%; height: 100%; object-fit: cover; } .win-story__card .cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent, rgba(12,36,41,.85)); padding: 60px 32px 26px; font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; } /* ============================================================================= ROW: pathways (large linked service cards) ========================================================================== */ .win-pathways { background: #F3F8F5; padding: 14vh 0; position: relative; } .win-pathways__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 7vh; } .win-pathways__head h2 { font-size: clamp(40px,3.8vw,66px); line-height: 1.1; color: var(--ink-deep); margin: 0; } .win-pathways__dots { display: flex; gap: 8px; padding-bottom: 12px; } .win-pathways__dots span { width: 14px; height: 14px; border-radius: 50%; } .win-pathways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .win-pcard { display: block; background: #fff; overflow: hidden; box-shadow: 0 4px 20px rgba(30,58,64,.08); color: inherit; transition: box-shadow .3s ease; } .win-pcard:hover { box-shadow: 0 20px 50px rgba(30,58,64,.16); color: inherit; } .win-pcard.shape-a { border-radius: 90px 28px 90px 28px; } .win-pcard.shape-b { border-radius: 28px 90px 28px 90px; } .win-pcard__media { height: 320px; overflow: hidden; position: relative; } .win-pcard__media img { width: 100%; height: 115%; object-fit: cover; } .win-pcard__placeholder { height: 320px; position: relative; background: linear-gradient(135deg,#EAF4F4,#F0EBF9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .win-pcard__placeholder .leaf { position: absolute; top: 26px; right: 36px; width: 90px; opacity: .5; } .win-pcard__placeholder .lbl { font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); } .win-pcard__body { padding: 38px 44px 44px; } .win-pcard__titlerow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .win-pcard__body h3 { font-size: 30px; margin: 0; color: var(--ink-deep); } .win-pcard__body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; } .win-pcard__more { font-weight: 800; font-size: 16.5px; color: var(--teal); } .win-pcard.accent-purple .win-pcard__more { color: var(--purple); } /* ============================================================================= ROW: gallery (horizontal scroll of captioned images) ========================================================================== */ .win-gallery { background: var(--bg); } .win-gallery__pin { height: 100vh; min-height: 680px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .win-gallery__head { width: 95%; max-width: var(--wrap); margin: 0 auto 5vh; } .win-gallery__head h2 { font-size: clamp(40px,3.8vw,66px); line-height: 1.1; color: var(--ink-deep); margin: 0; } .win-gallery__track { display: flex; gap: 3vw; align-items: stretch; padding-left: 2.5vw; will-change: transform; } .win-gitem { flex: 0 0 clamp(320px,46vw,680px); position: relative; border-radius: 32px; overflow: hidden; } .win-gitem img { width: 100%; height: 52vh; object-fit: cover; display: block; } .win-gitem__cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent, rgba(12,36,41,.8)); padding: 70px 30px 24px; } .win-gitem__cap .t { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; } .win-gitem__cap .s { font-size: 14.5px; color: var(--dark-soft); margin-top: 4px; } /* ============================================================================= ROW: steps (pinned image-swap OR simple numbered progression) ========================================================================== */ .win-steps { background: #EAF4F4; border-radius: 48px; margin: 0 1.5vw; } .win-steps__pin { height: 100vh; min-height: 680px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; } .win-steps__leaf { position: absolute; top: 7%; right: 5%; width: 170px; opacity: .4; pointer-events: none; } .win-steps__head { font-size: clamp(38px,3.4vw,60px); line-height: 1.1; color: var(--ink-deep); margin: 0 0 7vh; max-width: 900px; } .win-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } .win-steps__stages { position: relative; min-height: 480px; } .win-stage { position: absolute; inset: 0; } .win-stage__num { font-family: var(--font-head); font-weight: 700; font-size: 120px; line-height: 1; } .win-stage h3 { font-size: 32px; color: var(--ink-deep); margin: 10px 0 14px; } .win-stage p { font-size: 18px; line-height: 1.75; color: var(--ink-soft); margin: 0; max-width: 520px; } .win-steps__media { position: relative; } .win-steps__blob { position: absolute; top: -18px; right: -18px; width: 120px; height: 120px; border-radius: 60% 40% 55% 45%; background: var(--gold-soft); z-index: 0; } .win-steps__mask { position: relative; border-radius: 120px 36px 120px 36px; overflow: hidden; box-shadow: 0 24px 60px rgba(20,52,58,.22); } .win-steps__mask img { width: 100%; height: 58vh; min-height: 400px; object-fit: cover; display: block; } .win-steps__mask img + img { position: absolute; inset: 0; height: 100%; } /* row (non-pinned) variant — careers progression */ .win-steps.is-row { background: transparent; margin: 0; border-radius: 0; padding: 8vh 0; } .win-steps.is-row .win-steps__pin { height: auto; min-height: 0; display: block; } .win-steprow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .win-steprow__item { background: #fff; border-radius: 24px; padding: 34px 30px; box-shadow: 0 4px 20px rgba(30,58,64,.07); } .win-steprow__num { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .win-steprow__item h3 { font-size: 21px; color: var(--ink-deep); margin: 0; } /* ============================================================================= ROW: numbered-columns (dark frameworks/standards panel) ========================================================================== */ .win-numcols { padding: 14vh 0 10vh; } .win-numcols__panel { background: var(--ink-deep); border-radius: 40px; padding: 7vh 5vw; display: grid; grid-template-columns: repeat(var(--cols,3), 1fr); gap: 44px; position: relative; overflow: hidden; } .win-numcols__leaf { position: absolute; top: -40px; right: -20px; width: 280px; opacity: .1; pointer-events: none; } .win-numcols__intro { grid-column: 1 / -1; max-width: 760px; } .win-numcols__intro h3 { font-size: clamp(30px,2.6vw,44px); color: #fff; margin: 0 0 10px; } .win-numcols__intro p { font-size: 17px; line-height: 1.65; color: #B9CDCD; margin: 0; } .win-numcol { border-top: 4px solid var(--teal); padding-top: 22px; } .win-numcol .t { font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 8px; } .win-numcol p { font-size: 15.5px; line-height: 1.65; color: #B9CDCD; margin: 0; } /* ============================================================================= ROW: cta (centred referral call-to-action) ========================================================================== */ .win-cta { padding: 10vh 0 14vh; position: relative; overflow: hidden; text-align: center; } .win-cta__leaf { position: absolute; top: 12%; left: 5%; width: 150px; opacity: .35; pointer-events: none; } .win-cta__inner { width: 95%; max-width: 1100px; margin: 0 auto; } .win-cta__icon { margin-bottom: 20px; fill: var(--teal); } .win-cta h2 { font-size: clamp(44px,4.2vw,72px); line-height: 1.1; color: var(--ink-deep); margin: 0 0 22px; } .win-cta p { font-size: 19px; line-height: 1.7; color: var(--ink-soft); margin: 0 auto 34px; max-width: 640px; } .win-cta__btn { display: inline-block; background: var(--teal); color: #fff; border-radius: 999px; padding: 19px 46px; font-weight: 800; font-size: 18px; box-shadow: 0 6px 20px rgba(46,143,143,.32); transition: background .25s ease; } .win-cta__btn:hover { background: var(--teal-dark); color: #fff; } .win-cta.is-dark { background: var(--ink-deep); } .win-cta.is-dark h2 { color: #fff; } .win-cta.is-dark p { color: #B9CDCD; } /* ============================================================================= ROW: page-header (inner-page banner) ========================================================================== */ .win-page-header { position: relative; height: 74vh; min-height: 600px; max-height: 820px; overflow: hidden; background: var(--ink-deep); } .win-page-header__bg { position: absolute; inset: 0; } .win-page-header__bg img { width: 100%; height: 100%; object-fit: cover; } .win-page-header__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,36,41,.72) 0%, rgba(12,36,41,.28) 60%, rgba(12,36,41,0) 100%), linear-gradient(90deg, rgba(12,36,41,.72) 0%, rgba(12,36,41,.3) 50%, rgba(12,36,41,0) 100%); } .win-page-header.is-flat { height: auto; min-height: 0; max-height: none; background: var(--ink-deep); } .win-page-header.is-flat .win-page-header__overlay { background: none; } .win-page-header__inner { position: relative; z-index: 2; width: 95%; max-width: var(--wrap); margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 150px 0 6vh; } .win-page-header.is-flat .win-page-header__inner { padding: 22vh 0 10vh; } .win-page-header__copy { max-width: 940px; } .win-page-header__badge { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-soft); border: 1px solid rgba(207,240,232,.45); background: rgba(138,111,191,.35); border-radius: 999px; padding: 8px 18px; margin-bottom: 26px; } .win-page-header__title { font-size: clamp(44px, 5.2vw, 86px); line-height: 1.05; letter-spacing: -.015em; color: #fff; margin: 0 0 22px; } .win-page-header__bars { display: flex; gap: 8px; margin-bottom: 24px; } .win-page-header__bars span { height: 5px; border-radius: 3px; } .win-page-header__bars span:nth-child(1) { width: 54px; background: var(--mint-bright); } .win-page-header__bars span:nth-child(2) { width: 22px; background: #C6E39E; } .win-page-header__bars span:nth-child(3) { width: 22px; background: var(--gold-soft); } .win-page-header__sub { font-size: 19px; line-height: 1.65; color: #DCE9E9; max-width: 620px; margin: 0; } .win-page-header__meta { color: #B9CDCD; margin: 8px 0 0; } /* ============================================================================= ROW: image-text (alternating image/text; or two-column split; stats; points) ========================================================================== */ .win-imgtext { padding: 11vh 0 10vh; position: relative; overflow: hidden; } .win-imgtext__leaf { position: absolute; top: -40px; right: -30px; width: 280px; opacity: .3; pointer-events: none; } .win-imgtext__row { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; } .win-imgtext__row.is-flipped { direction: rtl; } .win-imgtext__row.is-flipped > * { direction: ltr; } .win-imgtext__media .frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 20px 50px rgba(20,52,58,.16); } .win-imgtext__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .win-imgtext__text h2 { font-size: clamp(32px,3vw,50px); line-height: 1.16; color: var(--ink-deep); margin: 0 0 20px; } .win-imgtext__text h2 .t { color: var(--teal); } .win-imgtext__text h2 .g { color: #5C8A2E; } .win-imgtext__text .content { font-size: 18px; line-height: 1.8; color: var(--ink-mid); } .win-imgtext__text .content p { margin: 0 0 16px; } .win-imgtext__text .content strong { color: var(--ink-deep); } /* split (no image): heading left, content right, divider under */ .win-imgtext.is-split .win-imgtext__row { align-items: start; padding-bottom: 7vh; border-bottom: 1px solid #E0E1E5; } .win-imgtext__stats { display: flex; gap: 40px; margin-top: 26px; } .win-imgtext__stat .n { font-family: var(--font-head); font-weight: 700; font-size: 52px; line-height: 1; color: var(--ink-deep); } .win-imgtext__stat .l { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-top: 6px; } .win-imgtext__points { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .win-imgtext__points .p { display: flex; gap: 12px; font-size: 17px; color: var(--ink-mid); } .win-imgtext__points svg { flex-shrink: 0; margin-top: 3px; } .win-imgtext__btn { margin-top: 26px; } /* needs / plain feature icon square + dark cta card */ .win-features.is-plain .win-fcard.has-icon { justify-content: space-between; } .win-fcard__isquare { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .win-fcard.t-teal .win-fcard__isquare { background: #EAF4F4; } .win-fcard.t-purple .win-fcard__isquare { background: #F0EBF9; } .win-fcard.t-green .win-fcard__isquare { background: #EFF6E6; } .win-fcard.t-gold .win-fcard__isquare { background: #FBF3DC; } .win-fcard.t-dark { background: var(--ink-deep); } .win-fcard.t-dark .win-fcard__title { color: #fff; } /* ============================================================================= ROW: virtual-tour (3D embed) ========================================================================== */ .win-tour { padding: 12vh 0; } .win-tour__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 4vh; } .win-tour__bar h2 { font-size: clamp(36px,3.5vw,60px); line-height: 1.1; color: var(--ink-deep); margin: 0; max-width: 820px; } .win-tour__intro { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 4vh; max-width: 680px; } .win-tour__frame { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 16px 44px rgba(30,58,64,.14); background: #EAF4F4; } .win-tour__frame iframe { display: block; width: 100%; height: 70vh; min-height: 480px; border: 0; } /* ============================================================================= ROW: gallery mosaic variant ========================================================================== */ .win-mosaic { padding: 13vh 0 11vh; } .win-mosaic__head { margin-bottom: 5vh; } .win-mosaic__head h2 { font-size: clamp(36px,3.5vw,60px); line-height: 1.1; color: var(--ink-deep); margin: 0; max-width: 820px; } .win-mosaic__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .win-mosaic__grid img { width: 100%; height: 360px; object-fit: cover; border-radius: 24px; cursor: zoom-in; display: block; } .win-mosaic__grid img.wide { grid-column: span 2; } /* ============================================================================= ROW: callout (1–2 emphasis cards, dark / mint) ========================================================================== */ .win-callout { padding: 0 0 13vh; } .win-callout__grid { display: grid; gap: 26px; grid-template-columns: repeat(var(--cols,2), 1fr); } .win-callout__grid.one { grid-template-columns: 1fr; } .win-cocard { border-radius: 36px; padding: 6vh 3.5vw; position: relative; overflow: hidden; } .win-cocard__leaf { position: absolute; top: -40px; right: -30px; width: 230px; opacity: .1; pointer-events: none; } .win-cocard .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; } .win-cocard h3 { font-size: clamp(26px,2.2vw,38px); line-height: 1.18; margin: 0 0 20px; } .win-cocard p { font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; } .win-cocard .emphasis { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.5; margin: 0; } .win-cocard.s-dark { background: var(--ink-deep); } .win-cocard.s-dark .eyebrow { color: var(--mint-bright); } .win-cocard.s-dark h3, .win-cocard.s-dark .emphasis { color: #fff; } .win-cocard.s-dark p { color: #B9CDCD; } .win-cocard.s-mint { background: #EAF4F4; } .win-cocard.s-mint .eyebrow { color: var(--teal); } .win-cocard.s-mint h3 { color: var(--ink-deep); } .win-cocard.s-mint p { color: var(--ink-mid); } .win-cocard.s-mint .emphasis { color: var(--teal); } /* ============================================================================= ROW: marquee (intro + scrolling skill/pill band) ========================================================================== */ .win-marquee-sec { padding: 9vh 0 10vh; background: #F5F6F2; position: relative; overflow: hidden; } .win-marquee-sec__leaf { position: absolute; top: 6%; right: 3%; width: 180px; opacity: .28; pointer-events: none; } .win-marquee-sec__intro { width: 95%; max-width: 900px; margin: 0 auto 7vh; text-align: center; position: relative; } .win-marquee-sec__intro h2 { font-size: clamp(30px,2.8vw,44px); line-height: 1.18; color: var(--ink-deep); margin: 0 0 22px; } .win-marquee-sec__intro p { font-size: 17.5px; line-height: 1.8; color: var(--ink-mid); margin: 0 auto 16px; max-width: 760px; } .win-marquee { width: 100%; overflow: hidden; background: var(--teal); padding: 26px 0; } .win-marquee__track { display: flex; width: max-content; will-change: transform; animation: winMarquee 34s linear infinite; } .win-marquee__group { display: flex; align-items: center; gap: 46px; flex-shrink: 0; padding-right: 46px; } .win-marquee__item { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; } @keyframes winMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .win-marquee__track { animation: none; } } /* ============================================================================= ROW: contact-form (intro + contact lines + CF7 panel) ========================================================================== */ .win-contact { padding: 22vh 0 12vh; position: relative; overflow: hidden; } .win-contact.no-header { padding: 12vh 0; } .win-contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6vw; align-items: start; } .win-contact__intro h2 { font-size: clamp(30px,2.8vw,46px); line-height: 1.14; color: var(--ink-deep); margin: 0 0 20px; } .win-contact__intro .content { font-size: 17.5px; line-height: 1.8; color: var(--ink-mid); } .win-contact__intro .content p { margin: 0 0 16px; } .win-contact__lines { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; } .win-contact__lines .lbl { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .win-contact__lines a { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--ink-deep); } .win-contact__panel { background: #fff; border: 1px solid #E7EEEA; border-radius: 30px; padding: 44px 40px; box-shadow: 0 16px 44px rgba(30,58,64,.10); } .win-contact__disclaimer { font-size: 13.5px; color: #7C9296; margin: 16px 0 0; } /* Contact Form 7 field styling (scoped to our panel) */ .win-contact__panel .wpcf7-form p { margin: 0 0 18px; } .win-contact__panel label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .win-contact__panel input:not([type=submit]):not([type=checkbox]):not([type=radio]), .win-contact__panel textarea, .win-contact__panel select { width: 100%; background: #F5F8F7; border: 1px solid #DCE6E6; border-radius: 14px; padding: 15px 18px; font-family: var(--font-body); font-size: 16px; color: var(--ink-deep); outline: none; box-sizing: border-box; } .win-contact__panel input:focus, .win-contact__panel textarea:focus, .win-contact__panel select:focus { border-color: var(--teal); background: #fff; } .win-contact__panel textarea { min-height: 130px; resize: vertical; } .win-contact__panel .win-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .win-contact__panel .wpcf7-submit { background: var(--teal); color: #fff; border: none; border-radius: 999px; padding: 16px 40px; font-family: var(--font-body); font-weight: 800; font-size: 16.5px; cursor: pointer; transition: background .25s ease; } .win-contact__panel .wpcf7-submit:hover { background: var(--teal-dark); } .win-contact__panel .wpcf7-spinner { margin: 12px auto 0; display: block; } /* Kill native form-control appearance on ALL submit buttons/inputs so they never flash the OS's white "pressed" style on click/tap. Keep them coloured in every interactive state. */ .wpcf7-form input[type="submit"], .win-newsletter input[type="submit"], .win-contact__panel .wpcf7-submit, .win-apply__submit, .win-newsletter__row input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .win-contact__panel .wpcf7-submit:active, .win-contact__panel .wpcf7-submit:focus, .win-newsletter input[type="submit"]:active, .win-newsletter input[type="submit"]:focus, .win-apply__submit:active, .win-apply__submit:focus { background: var(--teal-dark); color: #fff; outline: none; } .wpcf7-form input[type="submit"]:disabled, .win-newsletter input[type="submit"]:disabled, .win-apply__submit:disabled { background: var(--teal); color: #fff; opacity: .75; cursor: default; } /* CF7 "submitting" state — keep the button visible while the spinner shows. */ .wpcf7-form.submitting input[type="submit"] { background: var(--teal); color: #fff; } /* ============================================================================= Pinned-section base states — desktop: GSAP controls opacity/transform. The stacked cards/stages are visible; GSAP primes them. Mobile toggles an .is-active class (tap-to-swap for story); nomotion shows the first only. ========================================================================== */ .win-story__card { will-change: transform, opacity; } .win-story__word { will-change: opacity; } .win-stage { will-change: transform, opacity; } .win-steps__mask img + img { opacity: 0; } /* Mobile: tap-to-swap story cards/words */ @media (max-width: 800px) { .win-story__card { opacity: 0; visibility: hidden; transition: opacity .35s ease; } .win-story__card.is-active { opacity: 1; visibility: visible; } .win-story__word { opacity: .4; cursor: pointer; transition: opacity .25s ease; } .win-story__word.is-active { opacity: 1; } } /* Capture mode: show only the first card/stage + first image, statically */ html.nomotion .win-story__card:not(:first-child), html.nomotion .win-steps__mask img + img { display: none !important; } html.nomotion .win-story__card { position: relative; } /* ============================================================================= Lightbox (mosaic gallery) ========================================================================== */ .win-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(9,26,30,.94); display: none; align-items: center; justify-content: center; padding: 5vh 6vw; } .win-lightbox.is-open { display: flex; } .win-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 1100px; width: 100%; } .win-lightbox img { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 18px; display: block; } .win-lightbox figcaption { font-size: 16px; color: #DCE9E9; text-align: center; } .win-lightbox__close { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 24px; cursor: pointer; } .win-lightbox__nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; flex-shrink: 0; } /* ============================================================================= RESPONSIVE — translated from the source's render-logic breakpoints ========================================================================== */ /* Tablet / small desktop: primary nav collapses to the burger + drawer. */ @media (max-width: 1100px) { .win-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .win-nav { display: none; } .win-header__contact { display: none; } .win-header__actions .win-btn-pill { display: none; } .win-burger { display: flex; } .win-logo img { height: 64px; } .win-header.is-solid .win-logo img, .win-header.is-scrolled .win-logo img { height: 56px; } } /* Stack the two/three-column layouts. */ @media (max-width: 1000px) { .win-welcome__panel, .win-story__grid, .win-steps__grid, .win-imgtext__row, .win-contact__grid, .win-pathways__grid, .win-callout__grid { grid-template-columns: 1fr !important; } .win-imgtext__row.is-flipped { direction: ltr; } .win-features__grid { --cols: 2 !important; } .win-numcols__panel { --cols: 1 !important; } .win-mosaic__grid { grid-template-columns: repeat(2, 1fr); } .win-mosaic__grid img.wide { grid-column: auto; } .win-locations__map { position: static; transform: none; width: 70%; max-width: 320px; margin: 0 auto 24px; } .win-locations__inner { padding: 8vh 0; } .win-pathways__head { flex-direction: column; align-items: flex-start; } .win-features.is-plain .win-fcard { min-height: 0; } } /* Unpin the GSAP sections; hero video → poster; heavy layouts relax. */ @media (max-width: 800px) { .win-hero { height: auto; min-height: 0; } .win-hero__inner { min-height: 88vh; } .win-hero__bg video, .win-hero__vimeo { display: none; } /* poster image shows instead */ .win-story__pin, .win-gallery__pin, .win-steps__pin { height: auto !important; min-height: 0 !important; padding: 8vh 0; display: block; } .win-story__imgwrap { height: 340px; min-height: 0; margin-top: 26px; } .win-story__word { cursor: pointer; } .win-gallery__track { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; transform: none !important; padding-bottom: 16px; } .win-gitem { flex: 0 0 80vw; scroll-snap-align: start; } .win-gitem img { height: 40vh; } .win-steps { margin: 0; border-radius: 0; } .win-steps__stages { position: static; min-height: 0; } .win-stage { position: static; opacity: 1 !important; visibility: visible !important; margin-bottom: 32px; } .win-stage__num { font-size: 84px; } .win-steps__media { margin-top: 10px; } .win-steps__mask img + img { display: none; } .win-steprow { grid-template-columns: repeat(2, 1fr); } .win-page-header { height: auto; min-height: 0; max-height: none; } .win-page-header__inner { padding: 130px 0 8vh; min-height: 62vh; } .win-imgtext.is-split .win-imgtext__row { padding-bottom: 5vh; } } /* Phone: type scale + tighter rhythm. */ @media (max-width: 640px) { :root { --radius-lg: 30px; --radius-md: 22px; } .win-container, .win-locations__inner, .win-gallery__head, .win-footer__inner, .win-cta__inner, .win-page-header__inner { width: 90%; } h1, .win-hero__title, .win-page-header__title { font-size: 34px !important; line-height: 1.12 !important; } h2 { font-size: 27px !important; line-height: 1.2 !important; } h3 { font-size: 21px !important; } .win-hero__title { font-size: 36px !important; } .win-welcome__head, .win-story__head, .win-pathways__head h2, .win-gallery__head h2, .win-steps__head, .win-cta h2, .win-locations__head { font-size: 30px !important; } .win-features__grid { --cols: 1 !important; } .win-mosaic__grid { grid-template-columns: 1fr; } .win-mosaic__grid img { height: 240px; } .win-steprow { grid-template-columns: 1fr; } .win-fcard { padding: 40px 30px 34px; } .win-footer__top { grid-template-columns: 1fr; gap: 32px; } .win-footer__cols { gap: 40px; } .win-footer { border-radius: 32px 32px 0 0; } .win-footer__bottom { flex-direction: column; gap: 8px; } .win-contact__panel { padding: 30px 24px; } .win-contact__panel .win-form-2 { grid-template-columns: 1fr; } .win-imgtext__stats { gap: 26px; } .win-drawer { width: min(90vw, 360px); } .win-hero__actions { gap: 20px; } .win-cta { padding: 8vh 0 10vh; } } /* Reveal must never leave content hidden if scripting is off. */ .no-js .win-reveal { opacity: 1 !important; transform: none !important; } /* ============================================================================= Capture mode (html.nomotion) — stack pinned sections for full-page shots ========================================================================== */ html.nomotion .win-story__pin, html.nomotion .win-gallery__pin, html.nomotion .win-steps__pin { height: auto !important; min-height: 0 !important; padding: 8vh 0; display: block; } html.nomotion .win-story__imgwrap { height: 420px; } html.nomotion .win-gallery__track { flex-wrap: wrap; transform: none !important; } html.nomotion .win-gitem { flex: 0 0 46%; } html.nomotion .win-gitem img { height: 300px; } html.nomotion .win-steps__stages { position: static; min-height: 0; } html.nomotion .win-stage { position: static; opacity: 1 !important; visibility: visible !important; margin-bottom: 40px; } html.nomotion .win-steps__mask img + img { display: none; } html.nomotion .win-reveal { opacity: 1 !important; transform: none !important; } /* Capture mode: pin full-height heroes so 100vh doesn't fill a tall window. */ html.nomotion .win-hero { height: 760px !important; min-height: 0 !important; } html.nomotion .win-hero__inner { min-height: 0 !important; padding: 120px 0 6vh !important; } html.nomotion .win-page-header { height: 560px !important; min-height: 0 !important; max-height: none !important; } html.nomotion .win-page-header.is-flat { height: auto !important; } html.nomotion .win-page-header__inner { min-height: 0 !important; } /* Capture mode: convert vh section spacing to px so a tall-window full-page capture lays out compactly (vh would otherwise scale to the capture height). */ html.nomotion .win-welcome { padding: 90px 0 70px !important; } html.nomotion .win-welcome__panel { margin-top: 60px !important; padding: 60px 44px !important; } html.nomotion .win-locations__inner { padding: 70px 0 !important; } html.nomotion .win-features { padding: 70px 0 90px !important; } html.nomotion .win-story__pin { padding: 70px 0 !important; } html.nomotion .win-pathways { padding: 90px 0 !important; } html.nomotion .win-gallery__pin { padding: 60px 0 !important; } html.nomotion .win-steps__pin { padding: 60px 0 !important; } html.nomotion .win-numcols { padding: 90px 0 70px !important; } html.nomotion .win-numcols__panel { padding: 60px 44px !important; } html.nomotion .win-cta { padding: 70px 0 90px !important; } html.nomotion .win-footer__inner { padding: 80px 0 0 !important; } html.nomotion .win-footer__top { padding-bottom: 60px !important; } html.nomotion .win-footer__mid { padding: 60px 0 !important; } html.nomotion .win-imgtext { padding: 80px 0 70px !important; } html.nomotion .win-imgtext.is-split .win-imgtext__row { padding-bottom: 50px !important; } html.nomotion .win-contact { padding: 80px 0 !important; } html.nomotion .win-marquee-sec { padding: 70px 0 !important; } html.nomotion .win-marquee-sec__intro { margin-bottom: 50px !important; } html.nomotion .win-callout { padding: 0 0 90px !important; } html.nomotion .win-cocard { padding: 50px 44px !important; } html.nomotion .win-tour { padding: 80px 0 !important; } /* Capture mode: pin vh-based media heights too. */ html.nomotion .win-reel__frame img { height: 460px !important; min-height: 0 !important; } html.nomotion .win-steps__mask img { height: 420px !important; min-height: 0 !important; } html.nomotion .win-gitem img { height: 300px !important; } html.nomotion .win-tour__frame iframe { height: 480px !important; min-height: 0 !important; } html.nomotion .win-imgtext__media img { max-height: 460px; } /* Capture mode: neutralise remaining vh margins that inflate section headers. */ html.nomotion .win-steps__head { margin-bottom: 50px !important; } html.nomotion .win-pathways__head { margin-bottom: 50px !important; } html.nomotion .win-features__head { margin-bottom: 44px !important; } html.nomotion .win-gallery__head { margin-bottom: 40px !important; } html.nomotion .win-tour__bar { margin-bottom: 30px !important; } html.nomotion .win-mosaic__head { margin-bottom: 40px !important; } html.nomotion .win-welcome__head { margin-bottom: 20px !important; } html.nomotion .win-story__note { margin-top: 24px !important; } /* ============================================================================= Cookie consent (CookieYes / cookie-law-info) — restyled to match WIN. The plugin sets colours via inline styles, so brand overrides use !important. Plugin-owned markup; we only theme it, never edit the plugin. ========================================================================== */ /* Banner card */ .cky-consent-container .cky-consent-bar { background-color: #fff !important; border: 1px solid #E7EEEA !important; border-radius: var(--radius-sm) !important; box-shadow: 0 20px 50px rgba(20, 52, 58, .18) !important; font-family: var(--font-body); padding: 24px 26px !important; } .cky-consent-container .cky-title { font-family: var(--font-head) !important; font-weight: 700 !important; color: var(--ink-deep) !important; font-size: 19px !important; } .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p, .cky-preference-center .cky-preference-content-wrapper, .cky-preference-center .cky-accordion-header-des { font-family: var(--font-body) !important; color: var(--ink-soft) !important; font-size: 14.5px !important; line-height: 1.65 !important; } .cky-consent-container .cky-notice-des a, .cky-preference-center a { color: var(--teal) !important; } /* Buttons — WIN pill styles */ .cky-btn { border-radius: 999px !important; font-family: var(--font-body) !important; font-weight: 800 !important; font-size: 15px !important; padding: 12px 26px !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; line-height: 1 !important; } .cky-btn-accept { background-color: var(--btn) !important; color: #fff !important; border: 1.5px solid var(--btn) !important; } .cky-btn-accept:hover { background-color: var(--btn-hover) !important; border-color: var(--btn-hover) !important; } .cky-btn-reject, .cky-btn-customize, .cky-btn-preferences { background-color: transparent !important; color: var(--teal) !important; border: 1.5px solid var(--btn) !important; } .cky-btn-reject:hover, .cky-btn-customize:hover, .cky-btn-preferences:hover { background-color: #EAF4F4 !important; color: var(--teal-dark) !important; } .cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper { gap: 10px !important; flex-wrap: wrap !important; } /* Preference modal */ .cky-modal { border-radius: var(--radius-md) !important; box-shadow: 0 26px 70px rgba(20, 52, 58, .28) !important; overflow: hidden !important; } .cky-preference-center { font-family: var(--font-body) !important; } .cky-preference-title { font-family: var(--font-head) !important; font-weight: 700 !important; color: var(--ink-deep) !important; } .cky-preference-header .cky-btn-close { border-radius: 50% !important; } .cky-preference-header .cky-btn-close span { color: var(--ink-deep) !important; } .cky-overlay { background: rgba(9, 26, 30, .6) !important; } /* Accordion */ .cky-accordion-header .cky-accordion-btn { font-family: var(--font-head) !important; font-weight: 700 !important; color: var(--ink-deep) !important; } .cky-accordion-chevron i::before, .cky-accordion-chevron::before { border-color: var(--teal) !important; } .cky-always-active { color: var(--teal) !important; font-weight: 800 !important; } /* Toggle switches → teal when on */ .cky-switch input:checked + label, .cky-switch input:checked ~ .slider, .cky-switch input[type="checkbox"]:checked + label { background-color: var(--teal) !important; } /* Revisit floating button → teal circle */ .cky-btn-revisit-wrapper { background: var(--btn) !important; box-shadow: 0 8px 22px rgba(46, 143, 143, .35) !important; } .cky-btn-revisit-wrapper:hover { background: var(--btn-hover) !important; } .cky-btn-revisit-wrapper .cky-btn-revisit img, .cky-btn-revisit-wrapper .cky-btn-revisit svg { filter: brightness(0) invert(1); } /* ============================================================================= FIX PASS — matching the approved HTML more exactly ========================================================================== */ /* Welcome heading: correct rhythm (eyebrow gap 44px, tight heading line-height); guard against any stray
inheriting the body line-height. */ .win-welcome .win-eyebrow { margin-bottom: 44px; } .win-welcome__head { line-height: 1.12; margin: 0 0 8px; } .win-welcome__head p { margin: 0; line-height: inherit; font: inherit; color: inherit; display: inline; } .win-welcome__panel { margin-top: 9vh; } .win-reel.is-playable .win-reel__frame { cursor: pointer; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; } .win-reel__frame:focus-visible { outline: 3px solid var(--mint-bright); outline-offset: 3px; } /* Our Homes map: never let the centred map clip; keep it fully in view. */ .win-locations__inner { min-height: 620px; } .win-locations__map { width: 46%; max-width: 620px; } .win-locations__map img { width: 100%; height: auto; max-height: none; object-fit: fill; } /* Footer accreditation logos: never crop (they are wide) — height-only sizing. */ .win-footer__badge img { height: 42px; width: auto; max-width: 130px; object-fit: contain; } /* Page-header height variants. */ .win-page-header.size-tall { height: 82vh; } .win-page-header.size-compact { height: 56vh; min-height: 520px; } /* ============================================================================= Film modal ========================================================================== */ .win-film { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 6vh 5vw; } .win-film.is-open { display: flex; } .win-film__scrim { position: absolute; inset: 0; background: rgba(9, 26, 30, .82); } .win-film__dialog { position: relative; width: min(92vw, 1040px); } .win-film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .win-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .win-film__close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; } .win-film__close:hover { background: rgba(255, 255, 255, .2); } /* ============================================================================= Apply modal ========================================================================== */ .win-apply { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 5vh 5vw; } .win-apply.is-open { display: flex; } .win-apply__scrim { position: absolute; inset: 0; background: rgba(9, 26, 30, .6); } .win-apply__dialog { position: relative; width: min(90vw, 560px); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 28px; padding: 40px 40px 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); } .win-apply__close { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E4E5E9; background: #F5F6F2; color: var(--ink-deep); font-size: 18px; cursor: pointer; } .win-apply__eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; } .win-apply__title { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--ink-deep); margin: 0 0 26px; } /* Apply modal now hosts a Contact Form 7 form. */ .win-apply__form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; } .win-apply__form .wpcf7-form > p { margin: 0; } .win-apply__form .win-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .win-apply__form .win-form-2 > p { margin: 0; } .win-apply__form label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .win-apply__form input:not([type="submit"]):not([type="checkbox"]) { width: 100%; margin-top: 8px; background: #F5F8F7; border: 1px solid #DCE6E6; border-radius: 14px; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--ink-deep); outline: none; } .win-apply__form input:focus { border-color: var(--btn); background: #fff; } .win-apply__role { display: none; } /* role is shown in the modal title instead */ .win-apply__cv input[type="file"] { margin-top: 8px; width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); } .win-apply__form .wpcf7-submit { align-self: flex-start; margin-top: 4px; background: var(--teal); color: #fff; border: none; border-radius: 999px; padding: 15px 34px; font-family: var(--font-body); font-weight: 800; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .25s ease; } .win-apply__form .wpcf7-submit:hover, .win-apply__form .wpcf7-submit:active, .win-apply__form .wpcf7-submit:focus { background: var(--teal-dark); color: #fff; outline: none; } .win-apply__form .wpcf7-spinner { display: block; margin: 10px 0 0; } .win-apply__legacy { display: none; } /* legacy custom-form styles (kept for reference, unused) */ .win-apply__legacy label { display: flex; flex-direction: column; gap: 8px; } .win-apply__legacy label > span { font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .win-apply__legacy input[type="text"], .win-apply__legacy input[type="email"], .win-apply__legacy input[type="tel"] { border: 1px solid #DDE3E3; border-radius: 14px; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--ink-deep); outline: none; background: #FCFDFD; } .win-apply__form input:focus { border-color: var(--btn); } .win-apply__file .lbl { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .win-apply__file input[type="file"] { display: none; } .win-apply__file .drop { display: block; border: 1.5px dashed #C7D9D9; border-radius: 14px; padding: 22px 16px; font-size: 15px; color: var(--ink-soft); text-align: center; cursor: pointer; background: #FCFDFD; } .win-apply__file .drop:hover { border-color: var(--btn); } .win-apply__submit { margin-top: 6px; background: var(--teal); color: #fff; border: none; border-radius: 999px; padding: 16px 30px; font-family: var(--font-body); font-weight: 800; font-size: 16px; cursor: pointer; transition: background .25s ease; } .win-apply__submit:hover { background: var(--teal-dark); } .win-apply__msg { font-size: 14.5px; font-weight: 700; color: var(--teal); min-height: 20px; } /* ============================================================================= Timeline (progression) ========================================================================== */ .win-timeline { padding: 11vh 0; } .win-timeline__intro { max-width: 800px; margin: 0 auto 8vh; text-align: center; } .win-timeline__intro h2 { font-size: clamp(30px, 2.8vw, 46px); line-height: 1.2; color: var(--ink-deep); margin: 0 0 26px; } .win-timeline__introtext p { font-size: 18px; line-height: 1.8; color: var(--ink-mid); margin: 0 0 16px; } .win-timeline__introtext p:last-child { font-size: 16px; color: var(--ink-soft); margin: 0; } .win-timeline__track { position: relative; padding: 0 20px; } .win-timeline__line, .win-timeline__fill { position: absolute; left: 44px; right: 44px; top: 24px; height: 3px; border-radius: 3px; } .win-timeline__line { background: #E4E5E9; } .win-timeline__fill { background: var(--btn); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); } .win-timeline__track.is-in .win-timeline__fill { transform: scaleX(1); } .win-timeline__nodes { display: flex; justify-content: space-between; gap: 16px; position: relative; } .win-timeline__node { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 220px; text-align: center; flex: 1; } .win-timeline__num { width: 48px; height: 48px; border-radius: 50%; background: var(--btn); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; flex-shrink: 0; position: relative; z-index: 1; } .win-timeline__card { background: #fff; border: 1px solid #E4E5E9; border-radius: 18px; padding: 16px 22px; font-weight: 800; font-size: 15.5px; color: var(--ink-deep); } .win-timeline__node.is-final .win-timeline__num { background: var(--teal); } .win-timeline__node.is-final .win-timeline__card { background: var(--teal); border-color: var(--teal); color: #fff; } /* ============================================================================= Vacancies (dark roles + apply) ========================================================================== */ .win-vacancies { padding: 9vh 0; background: var(--dark); position: relative; overflow: hidden; } .win-vacancies__leaf { position: absolute; bottom: -60px; left: -40px; width: 340px; opacity: .08; pointer-events: none; } .win-vacancies__head { max-width: 720px; margin: 0 auto 6vh; text-align: center; position: relative; } .win-vacancies__eyebrow { color: var(--mint-bright) !important; } .win-vacancies__head h2 { font-size: clamp(30px, 2.8vw, 46px); line-height: 1.2; color: #fff; margin: 0 0 20px; } .win-vacancies__intro { font-size: 17px; line-height: 1.75; color: var(--dark-muted); margin: 0; } .win-vacancies__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; position: relative; } .win-vacancy { background: var(--dark-2); border-radius: 24px; padding: 34px 32px; display: flex; flex-direction: column; } .win-vacancy__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 12px; } .win-vacancy p { font-size: 15.5px; line-height: 1.7; color: var(--dark-muted); margin: 0 0 24px; } .win-vacancy__btn { margin-top: auto; align-self: flex-start; background: var(--btn); color: #fff; border: none; border-radius: 999px; padding: 12px 26px; font-family: var(--font-body); font-weight: 800; font-size: 14.5px; cursor: pointer; transition: background .25s ease; } .win-vacancy__btn:hover { background: var(--btn-hover); } /* ============================================================================= Floor plan (living spaces) ========================================================================== */ .win-floor { padding: 0 0 12vh; } .win-floor__pin { min-height: 100vh; display: flex; align-items: center; } .win-floor__pin > .win-container { width: 95%; } .win-floor__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5vw; align-items: center; width: 100%; } .win-floor__row.is-flipped { direction: rtl; } .win-floor__row.is-flipped > * { direction: ltr; } .win-floor__text h2 { font-size: clamp(34px, 3.2vw, 54px); line-height: 1.12; color: var(--ink-deep); margin: 0 0 22px; } .win-floor__text .content p { font-size: 17.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; } .win-floor__diagram { position: relative; } .win-floor__svg { width: 100%; max-width: 820px; height: auto; display: block; font-family: var(--font-body); overflow: visible; margin-left: auto; } .win-floor__stat { position: absolute; top: -6px; left: 0; display: flex; align-items: baseline; gap: 10px; z-index: 2; } .win-floor__stat .n { font-family: var(--font-head); font-weight: 700; font-size: 52px; line-height: 1; color: var(--ink-deep); } .win-floor__stat .l { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } /* ============================================================================= CTA — panel / plain / secondary button ========================================================================== */ .win-cta__eyebrow { justify-content: center; color: var(--teal); margin-bottom: 20px; } .win-cta__text p { font-size: 17.5px; line-height: 1.8; color: var(--ink-mid); margin: 0 auto 16px; max-width: 680px; } .win-cta__emphasis { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.6; color: var(--teal); margin: 8px 0 0; } .win-cta__btns { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; } .win-cta__btn.is-ghost { background: #fff; border: 1px solid #C7D9D9; color: var(--ink-deep); box-shadow: none; } .win-cta__btn.is-ghost:hover { background: #F5F6F2; color: var(--ink-deep); } .win-cta.is-plain { padding: 12vh 0 10vh; } .win-cta.is-plain h2 { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.3; } .win-cta.is-plain .win-cta__inner { max-width: 900px; } .win-cta.is-panel { padding: 0 0 12vh; } .win-cta.is-panel .win-cta__inner { background: #EAF4F4; border-radius: 36px; padding: 7vh 8vw; max-width: var(--wrap); width: 95%; } .win-cta.is-panel h2 { font-size: clamp(28px, 2.8vw, 44px); line-height: 1.2; margin: 0 0 18px; } /* ============================================================================= Capture-mode (nomotion) spacing for the new sections ========================================================================== */ html.nomotion .win-timeline { padding: 70px 0 !important; } html.nomotion .win-timeline__intro { margin-bottom: 50px !important; } html.nomotion .win-vacancies { padding: 70px 0 !important; } html.nomotion .win-vacancies__head { margin-bottom: 44px !important; } html.nomotion .win-floor { padding: 0 0 70px !important; } html.nomotion .win-cta.is-plain { padding: 70px 0 !important; } html.nomotion .win-cta.is-panel { padding: 0 0 70px !important; } html.nomotion .win-cta.is-panel .win-cta__inner { padding: 50px 60px !important; } html.nomotion .win-welcome__panel { margin-top: 60px !important; } /* Responsive for the new sections */ @media (max-width: 1000px) { .win-floor__row { grid-template-columns: 1fr !important; } .win-vacancies__grid { grid-template-columns: 1fr !important; } .win-floor__row.is-flipped { direction: ltr; } } @media (max-width: 800px) { .win-timeline__nodes { flex-direction: column; align-items: stretch; gap: 28px; } .win-timeline__line, .win-timeline__fill { left: 23px; right: auto; top: 24px; bottom: 24px; width: 3px; height: auto; } .win-timeline__fill { transform: scaleY(0); transform-origin: top; } .win-timeline__track.is-in .win-timeline__fill { transform: scaleY(1); } .win-timeline__node { flex-direction: row; align-items: center; gap: 18px; text-align: left; max-width: none; } .win-timeline__card { flex: 1; } .win-film__close { top: 8px; right: 8px; } } /* Reel caption: title/subtitle must stack (they are s now). */ .win-reel__caption .t1, .win-reel__caption .t2 { display: block; } /* Contact section sits under a page-header now → normal top padding. (The extra top space is only needed when it's the first section: .no-header) */ .win-contact { padding: 11vh 0 12vh; } .win-contact.no-header { padding: 22vh 0 12vh; } /* ============================================================================= FEATURES — sticky-stack arrangement (Residential "facilities") ========================================================================== */ .win-features.is-sticky { background: #F3F8F5; padding: 13vh 0; } .win-features__sticky { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5vw; align-items: start; } .win-features__stickytext { position: sticky; top: 150px; } .win-features__stickytext h2 { font-size: clamp(36px, 3.5vw, 60px); line-height: 1.1; color: var(--ink-deep); margin: 0 0 20px; max-width: 900px; } .win-features__stickytext .intro { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 30px; max-width: 520px; } .win-features__stickytext .intro:last-child { font-size: 17.5px; color: var(--ink-mid); margin: 0; } .win-features__stickytext .intro strong { color: var(--ink-deep); } .win-eyebrow.is-pink::before { background: #F7A8BC; } .win-features__stickycards { display: flex; flex-direction: column; gap: 26px; padding-bottom: 6vh; } .win-fcard.is-sticky { position: sticky; background: #fff; border-radius: 26px; padding: 36px 34px; box-shadow: 0 10px 34px rgba(30,58,64,.10); border: 1px solid #E7EEEA; display: block; } .win-fcard.is-sticky .win-fcard__isquare { width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px; } .win-fcard.is-sticky .win-fcard__title { font-size: 20px; margin-bottom: 8px; color: var(--ink-deep); } .win-fcard.is-sticky p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; } @media (max-width: 1000px) { .win-features__sticky { grid-template-columns: 1fr !important; gap: 32px; } .win-features__stickytext { position: static; } .win-fcard.is-sticky { position: static !important; } } html.nomotion .win-features.is-sticky { padding: 70px 0 !important; } html.nomotion .win-fcard.is-sticky { position: static !important; } html.nomotion .win-features__stickytext { position: static !important; } /* Floor plan: unpin in capture mode + on small screens. */ html.nomotion .win-floor__pin { min-height: 0; display: block; } @media (max-width: 1000px) { .win-floor__pin { min-height: 0; display: block; } } /* ============================================================================= Text column (legal / policy pages) — a single centred WYSIWYG column. ========================================================================== */ .win-textcol { padding: clamp(56px, 8vw, 110px) 24px; } .win-textcol__inner { width: 100%; max-width: 820px; margin: 0 auto; } .win-textcol__inner .win-eyebrow { margin-bottom: 16px; } .win-textcol__heading { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--ink-deep); margin: 0 0 24px; } .win-textcol__content { color: var(--ink-soft); font-size: 17px; line-height: 1.75; } .win-textcol__content > :first-child { margin-top: 0; } .win-textcol__content h2, .win-textcol__content h3 { font-family: var(--font-head); font-weight: 700; color: var(--ink-deep); margin: 38px 0 12px; } .win-textcol__content h2 { font-size: clamp(22px, 2.8vw, 28px); } .win-textcol__content h3 { font-size: clamp(19px, 2.2vw, 23px); } .win-textcol__content p { margin: 0 0 18px; } .win-textcol__content ul, .win-textcol__content ol { margin: 0 0 18px; padding-left: 22px; } .win-textcol__content li { margin: 0 0 8px; } .win-textcol__content a { color: var(--teal); text-decoration: underline; } /* ============================================================================= Hero Vimeo background — scale a 16:9 iframe to cover the hero like a video. ========================================================================== */ .win-hero__vimeo { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .win-hero__vimeo iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 by width */ min-width: 177.78vh; min-height: 100vh; /* 16:9 by height */ border: 0; } /* ============================================================================= Privacy-policy acceptance tickbox (all forms). ========================================================================== */ .win-accept { margin: 6px 0 4px; } .win-accept .wpcf7-list-item { margin: 0; display: block; } .win-accept .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink-soft); cursor: pointer; } /* Custom-drawn checkbox — native `appearance` + accent-color let Safari re-scale the control on toggle ("blows up on click"); appearance:none with a CSS tick renders identically in every browser and on any bg. */ .win-accept input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin: 1px 0 0; flex: none; display: inline-grid; place-content: center; border: 2px solid var(--teal); border-radius: 5px; background: transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .win-accept input[type="checkbox"]::before { content: ""; width: 5px; height: 9px; margin: -2px 0 0 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform .12s ease; } .win-accept input[type="checkbox"]:checked { background: var(--teal); border-color: var(--teal); } .win-accept input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); } .win-accept input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .win-accept a { color: var(--teal); font-weight: 700; text-decoration: underline; } /* Newsletter sits on a dark footer — lighten the acceptance text there. */ .win-newsletter .win-accept .wpcf7-list-item label { color: var(--dark-soft); } .win-newsletter .win-accept a { color: #fff; } /* Give the "I agree" checkbox breathing room off the email input row above it (overrides the flush `.win-newsletter form > p` margin). */ .win-newsletter .win-accept { margin-top: 16px; } /* Show the hero background video on mobile. Overrides the max-width:800px rule in the theme's win.css. */ @media (max-width: 800px) { .win-hero__vimeo { display: block; } }