/* ============================================================ ELITE WEALTH ASSOCIATES & SERVICES Insurance, investments and lending under one practice. ART DIRECTION Structure borrowed in *idiom* from the best insurance layouts: everything sits inside large rounded panels that alternate pale-navy / deep-navy / cream on a white page. The signature typographic move is a heavy sans display line with ONE italic-serif accent word inside it. Colour is taken from the logo — navy, green, gold, cream. Gold is NEVER a large fill: hairlines, small caps and thin accents only. A big gold fill is what makes a financial brand read cheap. MOTION Unlike the previous build, this site does have scroll choreography: entrance reveals, count-ups, a rotating badge, parallax floats and a pinned hero rail. All of it is additive. Every element is readable with JS disabled — reveals only ever animate FROM a visible state once .js-on is set by the script, so a script failure can never leave the page blank. ============================================================ */ :root{ /* ---------------------------------------------------------- PALETTE — sampled directly from the Elite Wealth Associates logo: navy #022C5D, green #22852F, gold #E0A934, cream #FBF2E8. Measured contrast (see the logo audit): navy on white 13.81 : text and dark panels green on white 4.70 : passes AA, used for icons and accents gold on white 2.12 : FAILS — never small text on light gold on navy 6.51 : passes, so gold lives ON the navy Small gold text on a light ground therefore uses --gold-deep. VARIABLE NAMES ARE LEGACY. They were coined when the brand was forest green; the values are now navy. Read --green-deep as "brand navy" and --green-mid as "brand green". ---------------------------------------------------------- */ --ink: #08203F; /* near-black navy, 16.2:1 on white */ --green-deep: #022C5D; /* brand navy — dark panel surface */ --green-raised: #0A3D77; /* lifted navy for hover states */ --green-mid: #22852F; /* brand green, 4.70:1 on white */ /* Gold — accents only, never a fill */ --gold: #E0A934; /* 6.51:1 on navy */ --gold-deep: #8A6620; /* small text on light, 5.25:1 on white */ --gold-soft: #F0DCA8; /* Light surfaces */ --paper: #FFFFFF; --pale: #E9F0F8; /* pale navy panel */ --pale-deep: #D6E3F1; /* nested card inside pale panel */ --stone: #FBF2E8; /* the logo's own cream */ --surface: #FDFAF6; --body: #4A5768; /* 7.2:1 on white */ --body-on-dark: #C8D6E8; /* 9.6:1 on brand navy */ --hairline: rgba(2,44,93,.14); --hairline-dark: rgba(255,255,255,.16); --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-deva: "Noto Serif Devanagari", var(--font-serif); --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 104px; --s8: 148px; --r-panel: 30px; --r-card: 20px; --r-sm: 12px; --container: 1320px; --nav-h: 78px; /* phone: floating pill */ --header-h: 76px; /* tablet & desktop: full-width bar */ --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); } @media (max-width: 700px){ :root{ --r-panel: 22px; --r-card: 16px; } } *{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* clip, NOT hidden — overflow-x:hidden turns into a scroll container, which breaks any scroll-position maths. */ overflow-x: clip; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul{ list-style: none; margin: 0; padding: 0; } ::selection{ background: var(--green-deep); color: #fff; } .skip{ position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--green-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; } .skip:focus{ left: 0; } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================ LAYOUT ============================================================ */ .wrap{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s3); } @media (min-width: 768px){ .wrap{ padding: 0 var(--s5); } } .band{ padding: var(--s8) 0; position: relative; } .band--tight{ padding: var(--s7) 0; } @media (max-width: 767px){ .band{ padding: var(--s7) 0; } .band--tight{ padding: var(--s6) 0; } } /* The panel is the core structural device of this design. */ .panel{ border-radius: var(--r-panel); padding: var(--s7) var(--s5); position: relative; overflow: hidden; } @media (max-width: 767px){ .panel{ padding: var(--s6) var(--s3); } } .panel--pale{ background: var(--pale); color: var(--ink); } .panel--deep{ background: var(--green-deep); color: #fff; } .panel--stone{ background: var(--stone); color: var(--ink); } .panel--deep .lede, .panel--deep .body-text{ color: var(--body-on-dark); } .panel--deep .eyebrow{ color: var(--gold); } /* A deep panel sets colour:#fff on everything inside it. Any card that brings its OWN light background must therefore reset that, or its heading renders white-on-white — which reads as an unexplained blank gap in the card rather than as missing text. */ .panel--deep .feature, .panel--deep .card, .panel--deep .plan:not(.plan--featured){ color: var(--ink); } .panel--deep .feature p, .panel--deep .card p, .panel--deep .plan:not(.plan--featured) p, .panel--deep .plan:not(.plan--featured) li{ color: var(--body); } /* ============================================================ TYPE ============================================================ */ .eyebrow{ font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); margin: 0 0 var(--s3); } /* Display sizes. Tight tracking is what makes the big sans read as designed rather than as default browser text. */ .d1{ font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: .96; letter-spacing: -.035em; font-weight: 600; margin: 0; } .d2{ font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.03; letter-spacing: -.03em; font-weight: 600; margin: 0; } .d3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0; } /* THE signature move: an italic serif word inside a sans line. */ .accent{ font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -.01em; /* Serif italic sits optically small next to a heavy sans, so it is nudged up to match. */ font-size: 1.06em; } .lede{ font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; } .body-text{ color: var(--body); margin: 0; max-width: 66ch; } .center{ text-align: center; } .center .lede, .center .body-text{ margin-left: auto; margin-right: auto; } .section-head{ margin-bottom: var(--s6); } .section-head .d2{ max-width: 20ch; } .center.section-head .d2{ max-width: 24ch; margin-inline: auto; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; background: var(--green-deep); color: #fff; border: 1px solid var(--green-deep); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); white-space: nowrap; } .btn:hover{ background: var(--green-raised); border-color: var(--green-raised); transform: translateY(-2px); } .btn svg{ width: 17px; height: 17px; flex: none; } .btn--light{ background: #fff; color: var(--ink); border-color: #fff; } .btn--light:hover{ background: var(--pale); border-color: var(--pale); } .btn--ghost{ background: transparent; color: var(--ink); border-color: var(--hairline); } .btn--ghost:hover{ background: var(--ink); color: #fff; border-color: var(--ink); } /* Ghost buttons sit on dark ground in two places — inside a deep panel and over the hero photograph. Both need the light variant, or the label renders dark-on-dark and effectively disappears. */ .panel--deep .btn--ghost, .hero .btn--ghost{ color: #fff; border-color: rgba(255,255,255,.38); } .panel--deep .btn--ghost:hover, .hero .btn--ghost:hover{ background: #fff; color: var(--ink); border-color: #fff; } .btn-row{ display: flex; flex-wrap: wrap; gap: var(--s2); } .center .btn-row{ justify-content: center; } /* Phones get a slimmer pill throughout. 15px/30px padding is sized for a shrink-to-fit desktop button; carried onto a full-width mobile one it reads as a slab. 46px high still clears the 44px tap minimum. */ @media (max-width: 767px){ .btn{ padding: 12px 22px; font-size: 14.5px; } } /* Underlined text link with a sliding arrow — the demo's hero CTA. */ .link-line{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding-bottom: 4px; border-bottom: 1px solid currentColor; } .link-line svg{ width: 16px; height: 16px; transition: transform .4s var(--ease); } .link-line:hover svg{ transform: translateX(6px); } /* Small circular arrow button used on cards. */ .dot-arrow{ width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--pale); color: var(--ink); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .dot-arrow svg{ width: 15px; height: 15px; } /* ============================================================ NAV — floating blurred pill ============================================================ */ .nav{ position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding: 0 var(--s3); transition: top .4s var(--ease); } .nav__inner{ max-width: var(--container); margin: 0 auto; height: var(--nav-h); padding: 0 12px 0 26px; display: flex; align-items: center; gap: var(--s4); border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(18,51,42,.08); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } /* The pill stays LIGHT everywhere, including over the hero photograph. The logo is navy artwork on transparency — inverting the pill to dark glass would sink the wordmark into it. A frosted white pill keeps the mark legible on every background, so it is slightly more opaque over the hero where the photograph behind it is busiest. */ .nav--over-hero .nav__inner{ background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.6); box-shadow: 0 10px 40px -20px rgba(8,32,63,.45); } .nav--scrolled .nav__inner{ background: rgba(255,255,255,.92); box-shadow: 0 10px 40px -18px rgba(8,32,63,.4); } .brand{ display: flex; align-items: baseline; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; margin-right: auto; color: var(--green-deep); } .brand__deva{ font-family: var(--font-deva); font-size: 12.5px; font-weight: 400; opacity: .62; letter-spacing: 0; } /* Latin strapline under the wordmark — same optical weight as the Devanagari mark it replaces, but set in the body sans. */ .brand__sub{ font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .58; white-space: nowrap; } @media (max-width: 420px){ .brand__sub{ display: none; } } /* Image lockup. Height-driven so the pill controls it, and the file's own aspect ratio decides the width. */ .brand--logo{ gap: 0; } .brand--logo img{ height: 38px; width: auto; } @media (max-width: 560px){ .brand--logo img{ height: 32px; } } /* Footer shows the full lockup including the strapline, so it needs the extra height to keep "Secure. Grow. Prosper." legible. */ .foot .brand--logo img{ height: 74px; } .nav__links{ display: none; gap: 26px; align-items: center; } @media (min-width: 1080px){ .nav__links{ display: flex; } } .nav__links a{ font-size: 14.5px; font-weight: 500; position: relative; padding: 6px 0; opacity: .85; transition: opacity .3s var(--ease); } .nav__links a:hover{ opacity: 1; } .nav__links a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; } .nav__right{ display: flex; align-items: center; gap: var(--s1); } .nav__cta{ display: none; padding: 13px 26px; font-size: 14.5px; } @media (min-width: 640px){ .nav__cta{ display: inline-flex; } } .nav__toggle{ width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; background: rgba(2,44,93,.07); color: var(--green-deep); } /* ============================================================ DESKTOP / TABLET HEADER — a full-width bar, not a floating pill. A pill hovering over a photograph reads as a widget; a financial practice wants a masthead. The bar is its own band, so it can never sit on a face, the logo always has a clean white ground, and the photograph starts flush beneath it. The phone keeps the pill — it suits a small screen and works well. ============================================================ */ @media (min-width: 768px){ .nav{ top: 0; padding: 0; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--hairline); transition: box-shadow .4s var(--ease), background .4s var(--ease); } .nav--scrolled{ box-shadow: 0 6px 26px -16px rgba(8,32,63,.45); } /* .nav is now the bar; .nav__inner becomes the constrained content row. */ .nav__inner, .nav--over-hero .nav__inner, .nav--scrolled .nav__inner{ max-width: var(--container); margin: 0 auto; height: var(--header-h); padding: 0 var(--s5); border-radius: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .brand--logo img{ height: 42px; } .nav__links{ gap: 30px; } .nav__links a{ font-size: 15px; opacity: 1; color: var(--green-deep); } .nav__cta{ padding: 12px 26px; } } @media (min-width: 1080px){ .nav__toggle{ display: none; } } /* Mobile sheet */ .menu{ position: fixed; inset: 0; z-index: 99; background: var(--green-deep); color: #fff; padding: calc(var(--nav-h) + 44px) var(--s5) var(--s5); display: flex; flex-direction: column; gap: 2px; transform: translateY(-100%); visibility: hidden; transition: transform .6s var(--ease), visibility .6s; overflow-y: auto; } .menu.is-open{ transform: none; visibility: visible; } .menu a{ font-size: clamp(1.7rem, 7vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; padding: 12px 0; border-bottom: 1px solid var(--hairline-dark); } .menu__foot{ margin-top: auto; padding-top: var(--s5); font-size: 14px; color: var(--body-on-dark); } /* ============================================================ HERO — full-bleed photo, rotating slides, dot rail ============================================================ */ .hero{ position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--green-deep); color: #fff; } .hero__slides{ position: absolute; inset: 0; } .hero__slide{ position: absolute; inset: 0; background-size: cover; /* Each photograph declares its own focal point. A centred crop of a wide group shot cuts people out of frame on a phone, so --pos is the desktop focus and --pos-m the portrait one. */ background-position: var(--pos, center); opacity: 0; /* Slow push-in gives the still photograph the feel of footage. */ transform: scale(1.06); transition: opacity 1.3s var(--ease-soft); } @media (max-width: 767px){ .hero__slide{ background-position: var(--pos-m, var(--pos, center)); } } .hero__slide.is-on{ opacity: 1; animation: heroDrift 9s linear forwards; } @keyframes heroDrift{ from{ transform: scale(1.06); } to{ transform: scale(1.14); } } .hero__scrim{ position: absolute; inset: 0; /* Legibility for the headline and lede only. There is deliberately no heavy band at the top any more — the photograph now starts BELOW the nav (see the tablet/desktop rule further down), so nothing needs darkening up there. */ background: linear-gradient(to top, rgba(2,44,93,.88) 0%, rgba(2,44,93,.34) 46%, rgba(2,44,93,.08) 100%); } /* ------------------------------------------------------------------ TABLET AND DESKTOP — the nav never sits on the photograph. A graded band was only ever a mitigation: an opaque pill on a face is still an opaque pill on a face. The photograph now begins beneath the nav, leaving a navy strip for the pill to live on. Nothing is cropped and no subject can ride up into it, at any window height. ------------------------------------------------------------------ */ @media (min-width: 768px){ /* Photo begins flush under the header bar — see the desktop header block below, which sets --header-h. */ .hero__slides, .hero__scrim{ top: var(--header-h); } /* The copy no longer needs to clear a nav it no longer sits under. */ .hero__inner{ padding-top: var(--s6); } } /* A floor on inner heroes so a short window still leaves the photograph a usable band rather than a letterbox slit. */ .hero--inner{ min-height: max(62svh, 560px); } .hero__inner{ position: relative; z-index: 2; width: 100%; padding-bottom: var(--s7); padding-top: calc(var(--nav-h) + var(--s6)); } .hero .d1{ max-width: 15ch; } .hero__lede{ color: rgba(255,255,255,.86); margin-top: var(--s4); max-width: 48ch; font-size: clamp(1rem, 1.4vw, 1.15rem); } .hero__actions{ margin-top: var(--s5); } /* Rotating headline: only the active line is in flow. */ .hero__line{ display: none; } .hero__line.is-on{ display: block; animation: lineUp .9s var(--ease) both; } @keyframes lineUp{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } } /* Vertical dot rail, left edge */ .hero__rail{ position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); z-index: 3; display: none; flex-direction: column; gap: 12px; padding: 16px 10px; border-radius: 999px; background: rgba(255,255,255,.9); } @media (min-width: 900px){ .hero__rail{ display: flex; } } .hero__rail button{ width: 8px; height: 8px; border-radius: 999px; background: rgba(14,33,28,.26); transition: background .4s var(--ease), height .4s var(--ease); } .hero__rail button[aria-selected="true"]{ background: var(--green-deep); height: 20px; } /* Scroll cue */ .hero__cue{ position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.8); } .hero__cue i{ width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); display: grid; place-items: center; animation: cueBob 2.4s var(--ease-soft) infinite; } .hero__cue svg{ width: 15px; height: 15px; } @keyframes cueBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } } @media (max-width: 899px){ .hero__cue{ display: none; } } /* PHONE HERO — split, not full-bleed. A full-height portrait slot is 0.44 aspect. Covering it with a 3:2 landscape photograph shows only ~30% of the frame, which puts faces at the edges and leaves the middle empty — measured, not guessed. So on phones the hero splits in two: the photograph keeps a nearly natural crop in a band at the top (~1:1, about 67% of its width), and the copy sits below it on solid navy where it is always legible. */ @media (max-width: 767px){ .hero{ display: block; min-height: 0; background: var(--green-deep); /* The nav pill is fixed and was landing squarely on the subjects' faces in every hero. Pushing the photo band below it costs a strip of navy at the top and buys back the whole photograph. */ padding-top: calc(var(--nav-h) + 20px); } /* Band height is a compromise: tall enough for the photograph to have presence, short enough that the headline AND the primary button still land above the fold on a 844px screen. */ .hero__slides{ position: relative; /* Shorter than it looks like it should be: the nav clearance above already spends ~98px, and the headline plus CTA still have to land above the fold and above the dock. */ height: clamp(200px, 27svh, 258px); overflow: hidden; /* contains the slow push-in */ /* Dissolve both edges instead of cutting them. The photograph fades to transparent and the navy behind it takes over, so there is no seam where the band meets the panel — the image just runs out. The top fade is gentle (heads sit high in these frames); the bottom one is long, because that is the edge the eye actually lands on. */ /* Many stops on purpose. A two-stop falloff banded visibly against a flat navy panel — the eye picks up the kink where the ramp starts. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.58) 78%, rgba(0,0,0,.28) 88%, rgba(0,0,0,.08) 95%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.58) 78%, rgba(0,0,0,.28) 88%, rgba(0,0,0,.08) 95%, transparent 100%); } .hero__scrim{ /* MUST match the hero's padding-top. The base rule is inset:0, which anchors the scrim to the top of the hero while the photo band starts below the nav clearance — leaving the scrim's opaque foot sitting in the MIDDLE of the photograph and drawing a hard line across it. */ top: calc(var(--nav-h) + 20px); height: clamp(200px, 27svh, 258px); /* Kept light through the middle. The mask above already does the blending, so a heavy scrim on top of it only muddies the faces. It still meets the panel at full navy so no edge is ever drawn. */ background: linear-gradient(to bottom, rgba(2,44,93,.30) 0%, rgba(2,44,93,.04) 34%, rgba(2,44,93,.14) 58%, rgba(2,44,93,.42) 78%, rgba(2,44,93,.78) 91%, rgba(2,44,93,1) 100%); } .hero__inner{ /* No nav clearance needed — the copy now sits below the photograph, not under the floating pill. The floor clears the contact dock. */ padding-top: var(--s4); padding-bottom: calc(var(--s4) + 88px); } .hero .d1{ max-width: none; font-size: clamp(2.4rem, 9.4vw, 3.1rem); } .hero__lede{ margin-top: var(--s2); font-size: 1rem; } .hero__actions{ margin-top: var(--s3); } /* Full-width, but not full-height. The desktop pill is 57px tall; at full column width that reads as a slab. 46px still clears the 44px tap-target minimum comfortably. */ .hero__actions .btn{ width: 100%; justify-content: center; } /* The fixed dock already carries WhatsApp at the foot of every screen. Repeating it in the hero duplicated the action AND put a button underneath the dock, so on phones the hero keeps its primary CTA only. */ .hero__actions .btn--ghost{ display: none; } /* Inner-page heroes get a shallower band — they carry less copy. They also carry no buttons, so they do not need the dock clearance the home hero reserves; that would just leave dead navy at the foot. */ .hero--inner{ align-items: stretch; } .hero--inner .hero__slides, .hero--inner .hero__scrim{ height: clamp(220px, 32svh, 320px); } .hero--inner .hero__inner{ padding-bottom: var(--s5); } } /* Decorative images that are absolutely positioned beside centred copy. They are pulled out of the layout entirely on narrow screens, where they would otherwise sit on top of the text. */ .deco-float{ position: absolute; z-index: 1; } @media (max-width: 1023px){ .deco-float{ display: none; } } /* Compact hero for inner pages */ .hero--inner{ min-height: 62svh; align-items: center; } .hero--inner .hero__inner{ padding-bottom: var(--s6); } .hero--inner .d1{ font-size: clamp(2.5rem, 5.6vw, 4.6rem); } /* ============================================================ SOLUTIONS EXPLORER — vertical tabs in a pale panel ============================================================ */ .explorer{ display: grid; gap: var(--s4); } @media (min-width: 940px){ .explorer{ grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,3.4fr); align-items: stretch; } } .explorer__tabs{ display: flex; flex-direction: column; gap: 4px; } .explorer__tab{ text-align: left; padding: 15px 24px; border-radius: 999px; font-size: 16.5px; font-weight: 500; color: var(--ink); transition: background .4s var(--ease), color .4s var(--ease); } .explorer__tab:hover{ background: rgba(255,255,255,.55); } .explorer__tab[aria-selected="true"]{ background: #fff; font-weight: 600; box-shadow: 0 8px 26px -16px rgba(14,33,28,.5); } .explorer__panel{ display: none; border-radius: var(--r-card); background: var(--pale-deep); min-height: 400px; padding: var(--s4); position: relative; overflow: hidden; flex-direction: column; justify-content: space-between; } .explorer__panel.is-on{ display: flex; animation: fadeUp .6s var(--ease) both; } .explorer__panel img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Faces sit in the upper third of these photographs; a centred crop in a tall box pushes them out of the frame. */ object-position: center 28%; } .explorer__panel::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,24,20,.8) 0%, rgba(10,24,20,.1) 60%); } .explorer__panel > *{ position: relative; z-index: 2; } .explorer__kicker{ font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82); font-weight: 600; } .explorer__panel h3{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 0; color: #fff; max-width: 12ch; } .explorer__aside{ border-radius: var(--r-card); background: rgba(255,255,255,.62); padding: var(--s4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-height: 400px; } .explorer__aside .dot-arrow{ align-self: flex-end; background: rgba(18,51,42,.07); } /* Below the three-column breakpoint the fixed 400px minimums leave a lot of dead space, so both blocks size to their content instead. */ @media (max-width: 939px){ .explorer__panel{ min-height: 300px; } .explorer__aside{ min-height: 0; } } /* Sized for a SHORT figure ("10–15×") but it also has to carry phrases like "Fire & allied perils". At the old 3.7rem those ran to three cramped lines and crowded the note beneath. This still reads as a display figure while leaving long labels room to breathe. */ .explorer__figure{ font-size: clamp(1.75rem, 3.1vw, 2.45rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; } .explorer__note{ font-size: 14.5px; color: var(--body); margin: var(--s2) 0 0; } .explorer__list{ display: grid; gap: 9px; margin-top: var(--s3); } .explorer__list li{ font-size: 14.5px; color: var(--body); padding-left: 22px; position: relative; } .explorer__list li::before{ content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--green-mid); } /* ============================================================ FEATURE CARDS ============================================================ */ .feature-grid{ display: grid; gap: var(--s3); } @media (min-width: 760px){ .feature-grid{ grid-template-columns: repeat(3,1fr); } } /* ============================================================ PARTNER LOGO STRIP Recognition beats description here: a client who spots an insurer's mark understands the relationship instantly, where a card of body copy just asks them to read. Everything is sized by HEIGHT so logos of different widths sit on one optical baseline without cropping. ============================================================ */ .logos{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s6); } .logos img{ width: auto; object-fit: contain; /* Full colour, deliberately. The point of this strip is recognition — a client who spots the Tata AIA red understands the relationship in a glance, which a desaturated logo throws away. A slight lift on hover is all the interaction it needs. */ opacity: .92; transition: opacity .35s var(--ease), transform .35s var(--ease); } .logos img:hover{ opacity: 1; transform: translateY(-2px); } /* Wide lockups and square marks cannot share a height. Matched by height, a 4:1 wordmark is four times the area of a 1:1 mark and the square one looks like a mistake. These are tuned to similar optical weight. */ .logos .logo--wide{ height: 40px; max-width: 200px; } .logos .logo--square{ height: 64px; max-width: 96px; } /* Placeholder until the real artwork arrives. Deliberately looks unfinished so it can never be mistaken for the final strip. */ .logo-slot{ height: 48px; min-width: 158px; display: grid; place-items: center; padding: 0 var(--s3); border: 1px dashed rgba(2,44,93,.3); border-radius: var(--r-sm); background: rgba(2,44,93,.035); font-size: 13px; font-weight: 600; color: var(--body); text-align: center; } @media (max-width: 700px){ .logos{ gap: var(--s3); } .logos img{ height: 38px; max-width: 140px; } .logo-slot{ height: 44px; min-width: 132px; font-size: 12px; } } .feature{ border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s4); background: var(--paper); transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); } .feature:hover{ border-color: rgba(18,51,42,.26); transform: translateY(-4px); box-shadow: 0 22px 50px -34px rgba(14,33,28,.65); } .feature__icon{ width: 46px; height: 46px; color: var(--green-mid); margin-bottom: var(--s3); } .feature h3{ font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; } .feature p{ margin: 0; font-size: 15px; color: var(--body); } /* ============================================================ STAGGERED CARD ROW on a deep panel ============================================================ */ .stagger{ display: grid; gap: var(--s2); } @media (min-width: 700px){ .stagger{ grid-template-columns: repeat(5,1fr); align-items: start; } } @media (max-width: 699px){ .stagger{ grid-template-columns: repeat(2,1fr); } } .stagger__card{ background: #fff; color: var(--ink); border-radius: var(--r-card); padding: var(--s4) var(--s3); min-height: 230px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } /* The offset rhythm is what stops five identical cards reading as a plain grid. */ @media (min-width: 700px){ .stagger__card:nth-child(even){ margin-top: 30px; } } .stagger__card:hover{ transform: translateY(-8px); box-shadow: 0 26px 50px -30px rgba(0,0,0,.5); } .stagger__card svg.ico{ width: 34px; height: 34px; color: var(--green-deep); } .stagger__card h3{ font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; margin: 0; } .stagger__card .dot-arrow{ margin-top: auto; } .stagger__card:hover .dot-arrow{ background: var(--green-deep); color: #fff; } /* ============================================================ INDEX LIST — 3 columns, hairline rows ============================================================ */ .index-list{ display: grid; gap: 0 var(--s6); } @media (min-width: 700px){ .index-list{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 1040px){ .index-list{ grid-template-columns: repeat(3,1fr); } } .index-list a{ display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); font-size: 18px; font-weight: 500; letter-spacing: -.02em; transition: padding-left .4s var(--ease); } .index-list a:hover{ padding-left: 10px; } .index-list svg.ico{ width: 24px; height: 24px; color: var(--green-mid); flex: none; } .index-list .chev{ margin-left: auto; width: 16px; height: 16px; opacity: .4; } /* ============================================================ STATS ============================================================ */ .stats{ display: grid; } .stats > div{ padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); } .stats > div:last-child{ border-bottom: 0; } .stat__n{ font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; margin: 0; } .stat__l{ margin: 8px 0 0; font-size: 15px; color: var(--body); } .panel--deep .stats > div{ border-color: var(--hairline-dark); } .panel--deep .stat__l{ color: var(--body-on-dark); } /* ============================================================ COLLAGE — offset images + floating pill button ============================================================ */ .collage{ display: grid; gap: var(--s4); align-items: center; } @media (min-width: 940px){ .collage{ grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,3fr); gap: var(--s5); } } .collage__sm img, .collage__lg img{ border-radius: var(--r-card); width: 100%; object-fit: cover; } .collage__sm img{ aspect-ratio: 3/3.4; object-position: center 30%; } .collage__lg{ position: relative; } .collage__lg img{ aspect-ratio: 4/3.2; object-position: center 32%; } /* Single column on a phone, so the tall portrait crop is dropped for a landscape one — a 3:3.4 window onto a wide photograph loses most of it. */ @media (max-width: 939px){ .collage__sm img{ aspect-ratio: 16/10; } .collage__lg img{ aspect-ratio: 16/11; } } /* This button used to float ON the photograph. With portrait subjects it landed squarely over their faces, which looks careless. It now sits BELOW the image at every width — the photograph stays whole, and the button is easier to hit for it. */ .collage__float{ margin-top: var(--s3); display: inline-flex; } @media (max-width: 939px){ .collage__float{ display: flex; justify-content: center; width: 100%; } } .collage__cap{ margin: var(--s3) 0 0; font-size: 14.5px; color: var(--body); } /* ============================================================ ROTATING BADGE ============================================================ */ .badge{ width: 178px; height: 178px; position: relative; display: grid; place-items: center; flex: none; } .badge__ring{ position: absolute; inset: 0; animation: spin 22s linear infinite; } .badge__ring text{ font-family: var(--font-serif); font-size: 12.4px; letter-spacing: .12em; fill: currentColor; } @keyframes spin{ to{ transform: rotate(360deg); } } .badge__core{ width: 82px; height: 82px; border-radius: 999px; background: var(--green-deep); color: var(--gold); display: grid; place-items: center; } .badge__core svg{ width: 34px; height: 34px; } /* ============================================================ TESTIMONIALS ============================================================ */ .quotes{ position: relative; } .quote{ display: none; } .quote.is-on{ display: block; animation: fadeUp .7s var(--ease) both; } .quote blockquote{ margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.35rem, 2.9vw, 2.15rem); line-height: 1.34; letter-spacing: -.015em; max-width: 32ch; } .quote figcaption{ margin-top: var(--s4); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .quote__mark{ font-family: var(--font-serif); font-size: 76px; line-height: .6; color: var(--gold); display: block; margin-bottom: var(--s3); } .quotes__nav{ display: flex; gap: 10px; margin-top: var(--s5); } .quotes__nav button{ width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: background .35s var(--ease), color .35s var(--ease); } .quotes__nav button:hover{ background: #fff; color: var(--ink); } .quotes__nav svg{ width: 17px; height: 17px; } /* ============================================================ MARQUEE ============================================================ */ .marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track{ display: flex; gap: var(--s6); width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee__track{ animation-play-state: paused; } @keyframes slide{ to{ transform: translateX(-50%); } } .marquee__item{ font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; color: var(--body); display: flex; align-items: center; gap: var(--s3); white-space: nowrap; } .marquee__item::after{ content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); } /* ============================================================ ARTICLE / INSIGHT CARDS ============================================================ */ .cards{ display: grid; gap: var(--s3); } @media (min-width: 760px){ .cards{ grid-template-columns: repeat(3,1fr); } } .card{ border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .card:hover{ transform: translateY(-5px); box-shadow: 0 26px 54px -34px rgba(14,33,28,.6); } .card__media{ position: relative; aspect-ratio: 16/10.5; overflow: hidden; } .card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .card:hover .card__media img{ transform: scale(1.05); } .card__date{ position: absolute; right: 14px; top: 14px; background: rgba(14,33,28,.62); backdrop-filter: blur(8px); color: #fff; border-radius: var(--r-sm); padding: 9px 13px; text-align: center; line-height: 1.1; } .card__date b{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -.03em; } .card__date span{ font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .card__body{ padding: var(--s3); display: flex; flex-direction: column; gap: 10px; flex: 1; } .card__meta{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; } .card h3{ font-size: 19px; font-weight: 600; letter-spacing: -.022em; line-height: 1.25; margin: 0; } .card p{ margin: 0; font-size: 14.5px; color: var(--body); } .card .link-line{ margin-top: auto; padding-top: var(--s2); border: 0; font-size: 14px; } /* ============================================================ ACCORDION / FAQ ============================================================ */ .acc{ border-top: 1px solid var(--hairline); } .acc__item{ border-bottom: 1px solid var(--hairline); } .acc__q{ width: 100%; display: flex; align-items: center; gap: var(--s3); padding: var(--s4) 0; text-align: left; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; letter-spacing: -.022em; } .acc__q i{ margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--hairline); display: grid; place-items: center; transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease); } .acc__q i svg{ width: 14px; height: 14px; } .acc__item.is-open .acc__q i{ transform: rotate(45deg); background: var(--green-deep); color: #fff; } .acc__a{ overflow: hidden; height: 0; transition: height .5s var(--ease); } .acc__a p{ margin: 0; padding: 0 0 var(--s4); max-width: 68ch; color: var(--body); } .panel--deep .acc, .panel--deep .acc__item{ border-color: var(--hairline-dark); } .panel--deep .acc__q i{ border-color: var(--hairline-dark); } .panel--deep .acc__item.is-open .acc__q i{ background: #fff; color: var(--ink); } /* ============================================================ PLAN CARDS ============================================================ */ .plans{ display: grid; gap: var(--s3); } @media (min-width: 800px){ .plans{ grid-template-columns: repeat(3,1fr); } } .plan{ border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); background: var(--paper); } .plan--featured{ background: var(--green-deep); color: #fff; border-color: var(--green-deep); } .plan--featured .plan__cover, .plan--featured .plan__list li{ color: var(--body-on-dark); } .plan__tag{ align-self: flex-start; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--pale); color: var(--gold-deep); } .plan--featured .plan__tag{ background: rgba(255,255,255,.13); color: var(--gold); } .plan h3{ font-size: 22px; font-weight: 600; letter-spacing: -.025em; margin: 0; } .plan__cover{ font-size: 15px; color: var(--body); margin: 0; } .plan__list{ display: grid; gap: 11px; margin-top: var(--s1); } .plan__list li{ font-size: 14.5px; color: var(--body); padding-left: 26px; position: relative; } .plan__list li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 1.6px solid var(--green-mid); border-bottom: 1.6px solid var(--green-mid); transform: rotate(-45deg); } .plan--featured .plan__list li::before{ border-color: var(--gold); } .plan .btn{ margin-top: auto; justify-content: center; } /* ============================================================ FORM ============================================================ */ .form{ display: grid; gap: var(--s3); } @media (min-width: 700px){ .form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } } .field{ display: grid; gap: 8px; } .field label{ font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--body); } .field input, .field select, .field textarea{ font: inherit; font-size: 16px; padding: 15px 18px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); } .field textarea{ min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(46,115,89,.14); } /* ============================================================ FOOTER ============================================================ */ .foot{ padding: 0 var(--s3) var(--s3); } @media (min-width: 768px){ .foot{ padding: 0 var(--s5) var(--s5); } } .foot__panel{ max-width: var(--container); margin: 0 auto; background: var(--stone); border-radius: var(--r-panel); padding: var(--s7) var(--s5) var(--s4); } @media (max-width: 767px){ .foot__panel{ padding: var(--s6) var(--s3) var(--s3); } } .foot__cta{ display: grid; gap: var(--s4); align-items: center; padding-bottom: var(--s7); border-bottom: 1px solid var(--hairline); } @media (min-width: 900px){ .foot__cta{ grid-template-columns: 1fr auto; } } .foot__cta .d1{ max-width: 12ch; } .foot__grid{ display: grid; gap: var(--s5); padding: var(--s6) 0; } @media (min-width: 640px){ .foot__grid{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 1000px){ .foot__grid{ grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .foot__grid h4{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--s3); } .foot__grid li{ margin-bottom: 11px; } .foot__grid li a{ font-size: 15px; color: var(--body); transition: color .3s var(--ease); } .foot__grid li a:hover{ color: var(--ink); } .compliance{ padding: var(--s5) 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--s2); } .compliance p{ margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--body); max-width: 100ch; } .pending{ background: rgba(201,162,39,.16); border-bottom: 1px dashed var(--gold-deep); padding: 0 4px; } .foot__base{ display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; padding-top: var(--s4); border-top: 1px solid var(--hairline); font-size: 13px; color: var(--body); } /* ============================================================ BACK TO TOP + MOBILE DOCK ============================================================ */ .to-top{ position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; border-radius: 999px; background: var(--green-deep); color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .to-top.is-on{ opacity: 1; pointer-events: auto; transform: none; } .to-top svg{ width: 17px; height: 17px; } @media (max-width: 767px){ .to-top{ bottom: 88px; right: 16px; } } .dock{ position: fixed; left: 14px; right: 14px; bottom: 12px; z-index: 95; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); border: 1px solid var(--hairline); box-shadow: 0 14px 40px -18px rgba(8,32,63,.5); } @media (min-width: 768px){ .dock{ display: none; } } .dock a{ display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--green-deep); color: #fff; } .dock a:first-child{ background: transparent; color: var(--ink); } .dock svg{ width: 16px; height: 16px; } @media (max-width: 767px){ body{ padding-bottom: 76px; } } /* ============================================================ SCROLL REVEALS Only active once JS adds .js-on to . Without JS every element stays at its natural, fully visible state. ============================================================ */ .js-on [data-reveal]{ opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); } .js-on [data-reveal].is-in{ opacity: 1; transform: none; } @keyframes fadeUp{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } } /* Parallax floats — driven by JS custom property. */ .float{ will-change: transform; transform: translateY(var(--py, 0px)); } /* Utility */ .mt-2{ margin-top: var(--s2); } .mt-3{ margin-top: var(--s3); } .mt-4{ margin-top: var(--s4); } .mt-5{ margin-top: var(--s5); } .mt-6{ margin-top: var(--s6); } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }