never sticks). The rule on above propagates to the viewport and is what actually suppresses horizontal scrolling, so this one was redundant as well as harmful. */ } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--lime); color: var(--forest-900); } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--emerald), var(--forest-700)); border-radius: 20px; border: 3px solid var(--cream); } ::-webkit-scrollbar-thumb:hover { background: var(--forest-700); } /* ---------- 3. Typography ---------- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--forest-900); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; } h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; } h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); } h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); } h4 { font-size: 1.18rem; } p { color: var(--slate-700); } strong, b { color: var(--forest-800); font-weight: 700; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-sans); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--emerald-text); margin-bottom: 1.1rem; } .eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--grad-lime); } .eyebrow.centered { justify-content: center; } .eyebrow.on-dark { color: var(--lime); } /* ---------- Numerals ---------- One place that governs how every figure on the site is set. Applied to the stat counters, hero trust strip, SIP/step-up calculator, KPI cards, product spec tables, step badges, timeline years and index numbers. */ .num-display, .stat .val, .hero-trust .num, .badge-float .bf-num, .value-item .vi-num, .card-num, .acc-idx, .step-dot, .calc-row .top .out, .calc-result .r-val, .kpi .k-val, .spec .v, .risk-meter + *, .calc-chart .caxis { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: -.015em; } /* Large figures carry more weight so they hold their own against the serif headlines they sit beside. */ .stat .val, .hero-trust .num, .badge-float .bf-num, .value-item .vi-num { font-weight: 800; letter-spacing: -.028em; } .calc-result .r-val, .kpi .k-val, .spec .v, .calc-row .top .out { font-weight: 700; } .card-num, .acc-idx, .step-dot { font-weight: 800; } /* Any input the user types a number into, and the calculator readouts, get tabular figures too so nothing shifts as values change. */ input[type="number"], input[type="tel"], .calc-legend, .calc-disclaimer { font-variant-numeric: tabular-nums; } .lead { font-size: 1.14rem; color: var(--slate-500); line-height: 1.8; } .text-gradient { background: var(--grad-lime); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .serif-italic { font-style: italic; font-family: var(--font-display); } /* ---------- 4. Layout ---------- */ .wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 3rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; } .section-sm { padding: clamp(3rem, 6vw, 5rem) 0; } .section-head { max-width: 700px; margin-bottom: 3.2rem; } .section-head.center { margin-inline: auto; text-align: center; } .grid { display: grid; gap: 2rem; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .split.wide-left { grid-template-columns: 1.15fr .85fr; } .split.wide-right { grid-template-columns: .85fr 1.15fr; } .bg-cream { background: var(--cream); } .bg-mint { background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-200) 100%); } .bg-dark { background: var(--grad-dark); color: rgba(255,255,255,.76); } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h3, .bg-dark h4 { color: #fff; } .bg-dark p { color: rgba(255,255,255,.72); } .bg-dark strong { color: #fff; } /* ---------- 5. Buttons ---------- */ .btn { --btn-bg: var(--grad-brand); position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.8rem; font-size: .93rem; font-weight: 700; letter-spacing: .01em; border-radius: var(--r-pill); color: #fff; background: var(--btn-bg); box-shadow: var(--sh-glow); transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out), filter .3s; overflow: hidden; isolation: isolate; white-space: nowrap; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--lime), var(--emerald-400)); opacity: 0; transition: opacity .4s var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(21,127,74,.38); } .btn:hover::after { opacity: 1; } .btn:active { transform: translateY(-1px); } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn .ico { transition: transform .35s var(--ease-out); } .btn:hover .ico { transform: translateX(4px); } .form-success svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-ghost { background: transparent; color: var(--forest-800); box-shadow: inset 0 0 0 1.5px rgba(10,46,32,.18); } .btn-ghost::after { background: var(--forest-800); } .btn-ghost:hover { color: #fff; box-shadow: 0 18px 40px rgba(6,32,23,.18); } .btn-light { background: #fff; color: var(--forest-800); box-shadow: 0 14px 40px rgba(0,0,0,.18); } .btn-light::after { background: var(--grad-lime); } .btn-light:hover { color: var(--forest-900); } .btn-outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); } .btn-outline-light::after { background: #fff; } .btn-outline-light:hover { color: var(--forest-800); } .btn-sm { padding: .68rem 1.3rem; font-size: .84rem; } .btn-lg { padding: 1.12rem 2.3rem; font-size: 1rem; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: var(--emerald); white-space: nowrap; transition: gap .3s var(--ease-out), color .3s; } .link-arrow svg { width: 17px; height: 17px; flex-shrink: 0; } .link-arrow:hover { gap: .85rem; color: var(--forest-700); } /* ---------- 6. Top bar ---------- */ .topbar { background: var(--forest-900); color: rgba(255,255,255,.7); font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.07); position: relative; z-index: 60; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; } .topbar-left { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } .topbar a, .topbar-left > span { display: inline-flex; align-items: center; gap: .45rem; transition: color .25s; } .topbar svg { flex-shrink: 0; } .topbar a:hover { color: var(--lime); } .topbar svg { width: 14px; height: 14px; opacity: .8; } .topbar-socials { display: flex; gap: .5rem; } .topbar-socials a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); transition: background .3s var(--ease), transform .3s var(--ease-out), color .3s; } .topbar-socials a:hover { background: var(--grad-lime); color: var(--forest-900); transform: translateY(-2px); } .topbar-socials svg { width: 13px; height: 13px; opacity: 1; } /* ---------- 7. Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); transition: box-shadow .35s var(--ease), background .35s var(--ease); } .site-header.scrolled { box-shadow: 0 10px 40px rgba(6,32,23,.09); background: rgba(255,255,255,.94); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-h); } .brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; } .brand img { height: 50px; width: auto; transition: transform .4s var(--ease-out); } .brand:hover img { transform: scale(1.04); } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; color: var(--forest-900); letter-spacing: -.01em; } .brand-tag { font-size: .6rem; letter-spacing: .19em; text-transform: uppercase; color: var(--emerald); font-weight: 700; } .nav-menu { display: flex; align-items: center; gap: .2rem; } .nav-menu > li > a, .nav-menu > li > button { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .95rem; border-radius: var(--r-pill); font-size: .93rem; font-weight: 600; color: var(--slate-700); transition: color .28s var(--ease), background .28s var(--ease); } .nav-menu > li > a::after { content: ""; position: absolute; left: 50%; bottom: .28rem; width: 0; height: 2px; border-radius: 2px; background: var(--grad-lime); transform: translateX(-50%); transition: width .35s var(--ease-out); } .nav-menu > li > a:hover, .nav-menu > li > button:hover { color: var(--forest-800); } .nav-menu > li > a:hover::after, .nav-menu > li.active > a::after { width: 22px; } .nav-menu > li.active > a { color: var(--forest-900); } .nav-menu .caret { width: 11px; height: 11px; transition: transform .35s var(--ease-out); } .has-mega:hover .caret { transform: rotate(180deg); } /* Mega menu */ .mega { position: absolute; left: 50%; top: calc(100% - 4px); transform: translate(-50%, 14px); width: min(1180px, calc(100vw - 3rem)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.6rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s var(--ease), transform .42s var(--ease-out), visibility .32s; z-index: 95; } .has-mega { position: static; } .nav-menu { position: relative; } .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; } /* Grouped columns: Invest | Insurance (wide, two-up) | Alternatives */ .mega-cols { display: grid; grid-template-columns: 1fr 1.95fr 1fr; gap: 1.3rem; align-items: start; } .mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: 1.3rem; } .mega-col-head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); padding: 0 .85rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); } a.mega-col-head { transition: color .25s var(--ease); } a.mega-col-head:hover { color: var(--emerald); } .mch-ico { display: inline-flex; color: var(--emerald); } .mch-ico svg { width: 14px; height: 14px; } .mch-all { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; letter-spacing: .08em; color: var(--emerald); opacity: .85; } .mch-all svg { width: 12px; height: 12px; } .mega-col-items { display: grid; gap: .1rem; } .mega-col-items.two { grid-template-columns: 1fr 1fr; gap: .1rem .4rem; } .mega-item { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem .85rem; border-radius: var(--r-md); transition: background .28s var(--ease), transform .28s var(--ease-out); } .mega-item:hover { background: var(--cream); transform: translateX(3px); } .mega-ico { flex: 0 0 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.20)); color: var(--emerald); transition: background .3s, color .3s; } .mega-item:hover .mega-ico { background: var(--grad-brand); color: #fff; } .mega-ico svg { width: 18px; height: 18px; } .mega-title { display: block; font-size: .89rem; font-weight: 700; color: var(--forest-900); line-height: 1.3; } .mega-desc { display: block; font-size: .76rem; color: var(--slate-500); line-height: 1.5; margin-top: .12rem; } .mega-foot { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .mega-foot p { font-size: .84rem; color: var(--slate-500); } .nav-cta { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } /* ---------- Sign-in menu ---------- */ .signin { position: relative; } .signin-btn .caret { transition: transform .35s var(--ease-out); } .signin.open .signin-btn .caret { transform: rotate(180deg); } .signin-menu { position: absolute; top: calc(100% + .6rem); right: 0; width: 268px; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .34s var(--ease-out), visibility .28s; z-index: 96; } .signin.open .signin-menu { opacity: 1; visibility: visible; transform: translateY(0); } .signin-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .75rem; border-radius: var(--r-sm); text-align: left; color: var(--forest-900); transition: background .25s var(--ease); } .signin-item:hover { background: var(--cream); } .signin-item .si-ico { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.22)); color: var(--emerald); transition: background .3s, color .3s; } .signin-item:hover .si-ico { background: var(--grad-brand); color: #fff; } .signin-item .si-ico svg { width: 16px; height: 16px; } .signin-item .si-t { display: block; font-size: .89rem; font-weight: 700; line-height: 1.25; } .signin-item .si-d { display: block; font-size: .74rem; color: var(--slate-500); margin-top: .1rem; } .signin-item .si-end { margin-left: auto; color: var(--slate-300); display: grid; place-items: center; } .signin-item .si-end svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); } .signin-item:hover .si-end { color: var(--emerald); } .signin-sep { height: 1px; background: var(--line); margin: .35rem .4rem; } /* Nested staff submenu */ .signin-group.open .signin-toggle .si-end svg { transform: rotate(90deg); } .signin-sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); } .signin-group.open .signin-sub { max-height: 220px; } .signin-sub .signin-item { padding-left: 1.1rem; } .signin-sub .signin-item .si-ico { flex-basis: 26px; height: 26px; border-radius: 8px; background: var(--cream-200); color: var(--forest-700); } .signin-sub .signin-item:hover .si-ico { background: var(--grad-brand); color: #fff; } .signin-sub .signin-item .si-ico svg { width: 13px; height: 13px; } .signin-sub .signin-item .si-t { font-size: .85rem; } /* Link not configured yet */ .signin-item.pending { cursor: not-allowed; opacity: .62; } .signin-item.pending:hover { background: transparent; } .signin-item.pending:hover .si-ico { background: var(--cream-200); color: var(--forest-700); } .signin-item .si-tag { margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: rgba(201,165,75,.14); padding: .2rem .45rem; border-radius: var(--r-pill); } /* Drawer variant */ .drawer-signin { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; } .drawer-signin .signin-item { padding: .85rem 0; border-radius: 0; } .drawer-signin .signin-item:hover { background: transparent; } .drawer-signin .signin-sub .signin-item { padding-left: .9rem; } /* Burger */ .burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--cream); place-items: center; transition: background .3s; } .burger:hover { background: var(--cream-200); } .burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--forest-800); transition: transform .38s var(--ease-out), opacity .25s; } .burger span + span { margin-top: 4.5px; } body.drawer-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.drawer-open .burger span:nth-child(2) { opacity: 0; } body.drawer-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile drawer */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); background: #fff; z-index: 120; transform: translateX(102%); transition: transform .5s var(--ease-out); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(6,32,23,.2); overflow-y: auto; } body.drawer-open .drawer { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); } .drawer-close { width: 38px; height: 38px; border-radius: 10px; background: var(--cream); display: grid; place-items: center; } .drawer-close svg { width: 18px; height: 18px; transform: rotate(45deg); } .drawer-nav { padding: 1rem 1.4rem 2rem; } .drawer-nav > li > a, .drawer-acc-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem 0; font-size: 1.02rem; font-weight: 600; color: var(--forest-900); border-bottom: 1px solid var(--line); } .drawer-acc-btn .caret { width: 13px; transition: transform .35s var(--ease-out); } .drawer-acc.open .drawer-acc-btn .caret { transform: rotate(180deg); } .drawer-sub { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-out); } .drawer-acc.open .drawer-sub { max-height: 1600px; } .drawer-sub a { display: block; padding: .6rem 0 .6rem 1rem; font-size: .9rem; color: var(--slate-500); border-left: 2px solid var(--line); } .drawer-sub a:hover { color: var(--emerald); border-color: var(--lime); } .drawer-sub .drawer-sub-head { display: block; padding: 1rem 0 .45rem; font-family: var(--font-sans); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--forest-900); border-left: 0; } .drawer-sub .drawer-sub-head:first-child { padding-top: .4rem; } .drawer-sub a.drawer-sub-head { color: var(--emerald); } .drawer-foot { margin-top: auto; padding: 1.4rem; background: var(--cream); } .scrim { position: fixed; inset: 0; background: rgba(4,22,14,.45); backdrop-filter: blur(3px); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; } body.drawer-open .scrim { opacity: 1; visibility: visible; } /* Paired with openDrawer()/closeDrawer() in main.js, which sets `top` to the captured scroll offset. `position: fixed` is what actually holds the page on iOS Safari — `overflow: hidden` alone does not. */ body.drawer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* Scroll progress */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-lime); z-index: 200; box-shadow: 0 0 14px rgba(169,220,60,.7); transition: width .12s linear; } /* ---------- 8. Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--grad-dark); padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); color: rgba(255,255,255,.78); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 520px at 78% 18%, rgba(31,163,93,.34), transparent 62%), radial-gradient(700px 460px at 8% 88%, rgba(169,220,60,.20), transparent 60%), radial-gradient(500px 380px at 45% 5%, rgba(201,165,75,.13), transparent 60%); animation: meshDrift 22s ease-in-out infinite alternate; } @keyframes meshDrift { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.12) translate(-2%, 2%); } } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%); } .hero .wrap { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero h1 { color: #fff; margin-bottom: 1.4rem; } .hero h1 em { font-style: italic; color: var(--lime); } .hero p.lead { color: rgba(255,255,255,.74); max-width: 54ch; } .hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.2rem; } .pill { display: inline-flex; align-items: center; gap: .55rem; padding: .48rem 1rem .48rem .55rem; border-radius: var(--r-pill); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 1.6rem; backdrop-filter: blur(8px); } .pill .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-lime); display: grid; place-items: center; color: var(--forest-900); flex-shrink: 0; } .pill .dot svg { width: 12px; height: 12px; } .hero-trust { display: flex; gap: 2.4rem; margin-top: 2.8rem; flex-wrap: wrap; } .hero-trust .num { font-family: var(--font-num); font-size: 1.95rem; color: #fff; line-height: 1; font-weight: 600; } .hero-trust .lbl { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .4rem; } /* Hero visual */ .hero-visual { position: relative; min-height: 440px; } .hero-card { position: absolute; border-radius: var(--r-lg); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 30px 70px rgba(0,0,0,.30); padding: 1.25rem 1.4rem; } .hero-card-main { inset: 0 auto auto 0; width: 100%; padding: 1.6rem; } .hero-card h2, .hero-card h3, .hero-card h4 { color: #fff; font-family: var(--font-sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; } .hero-chart { width: 100%; height: auto; margin-top: .8rem; } .hero-chart .line { stroke-dasharray: 720; stroke-dashoffset: 720; animation: draw 2.6s var(--ease-out) .5s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .hero-chart .bar { transform-origin: bottom; animation: growBar .9s var(--ease-out) backwards; } @keyframes growBar { from { transform: scaleY(0); } } .float-card { position: absolute; z-index: 3; border-radius: var(--r-md); background: rgba(255,255,255,.95); box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: .85rem 1.05rem; display: flex; align-items: center; gap: .75rem; animation: bob 6s ease-in-out infinite; } .float-card .fc-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-lime); color: var(--forest-900); flex-shrink: 0; } .float-card .fc-ico svg { width: 17px; height: 17px; } .float-card .fc-num { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--forest-900); line-height: 1.2; } .float-card .fc-lbl { display: block; font-size: .68rem; color: var(--slate-500); letter-spacing: .04em; line-height: 1.4; } .fc-a { top: -30px; right: -26px; animation-delay: 0s; } .fc-b { bottom: -46px; left: -26px; animation-delay: 1.4s; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } /* Marquee */ .marquee { overflow: hidden; position: relative; background: var(--forest-900); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); padding: .95rem 0; } .marquee-track { display: flex; gap: 3.2rem; width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .marquee-item { display: inline-flex; align-items: center; gap: .6rem; font-size: .84rem; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.62); text-transform: uppercase; white-space: nowrap; } .marquee-item svg { width: 15px; height: 15px; color: var(--lime); } /* ---------- 9. Page hero (interior) ---------- */ .page-hero { position: relative; overflow: hidden; background: var(--grad-dark); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 5.5rem); text-align: center; } .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 420px at 50% -10%, rgba(31,163,93,.36), transparent 65%), radial-gradient(560px 340px at 88% 100%, rgba(169,220,60,.16), transparent 62%); } .page-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); } .page-hero .wrap { position: relative; z-index: 2; } .page-hero h1 { color: #fff; margin-bottom: .8rem; } .page-hero p { color: rgba(255,255,255,.72); max-width: 62ch; margin-inline: auto; } .crumbs { display: flex; justify-content: center; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.5); margin-top: 1.6rem; } .crumbs a:hover { color: var(--lime); } .crumbs span { color: rgba(255,255,255,.28); } /* ---------- 10. Cards ---------- */ .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.8rem; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(21,127,74,.05), rgba(169,220,60,.07)); opacity: 0; transition: opacity .45s var(--ease); } .card > * { position: relative; z-index: 1; } .card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); border-color: rgba(21,127,74,.22); } .card:hover::before { opacity: 1; } .card h3, .card h3, .card h4 { margin-bottom: .6rem; } .card p { font-size: .95rem; color: var(--slate-500); } .card-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.3rem; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.22)); color: var(--emerald); transition: background .45s var(--ease), color .45s, transform .5s var(--ease-out); } .card:hover .card-ico { background: var(--grad-brand); color: #fff; transform: rotate(-6deg) scale(1.06); } .card-ico svg { width: 25px; height: 25px; } .card-num { position: absolute; top: 1.1rem; right: 1.4rem; font-family: var(--font-num); font-size: 3.2rem; font-weight: 700; color: rgba(10,46,32,.05); line-height: 1; z-index: 0; } /* Service card variant with footer link */ .card .link-arrow { margin-top: 1.1rem; } /* Feature list */ .check-list { display: grid; gap: .85rem; } .check-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .97rem; color: var(--slate-700); } .check-list .tick { flex: 0 0 22px; height: 22px; border-radius: 50%; margin-top: .22rem; background: var(--grad-lime); color: var(--forest-900); display: grid; place-items: center; } .check-list .tick svg { width: 12px; height: 12px; } .bg-dark .check-list li { color: rgba(255,255,255,.78); } /* ---------- 11. Stats ---------- */ .stats-band { position: relative; overflow: hidden; } .stat { text-align: center; padding: 1.4rem .6rem; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--line), transparent); } .bg-dark .stat + .stat::before { background: linear-gradient(transparent, rgba(255,255,255,.16), transparent); } .stat .val { font-family: var(--font-num); font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 1; color: var(--forest-900); display: flex; align-items: baseline; justify-content: center; gap: .06em; } .bg-dark .stat .val { color: #fff; } .stat .val .suffix { color: var(--emerald); } .bg-dark .stat .val .suffix { color: var(--lime); } .stat .lbl { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-top: .7rem; font-weight: 600; } .bg-dark .stat .lbl { color: rgba(255,255,255,.55); } /* ---------- 12. Media frames ---------- */ .frame { position: relative; } .frame-art { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--grad-dark); } .frame-art svg { width: 100%; height: auto; display: block; } .frame::after { content: ""; position: absolute; inset: auto -18px -18px auto; width: 62%; height: 62%; z-index: -1; border-radius: var(--r-xl); background: var(--grad-lime); opacity: .16; filter: blur(6px); } .badge-float { position: absolute; bottom: -22px; left: -18px; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 1rem 1.3rem; display: flex; align-items: center; gap: .9rem; } .badge-float .bf-num { font-family: var(--font-num); font-size: 1.9rem; font-weight: 700; color: var(--forest-900); line-height: 1; } .badge-float .bf-lbl { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--slate-500); font-weight: 600; } .badge-float .bf-bar { width: 3px; height: 38px; border-radius: 3px; background: var(--grad-lime); } /* ---------- 13. Philosophy / accordion ---------- */ .acc-item { border-bottom: 1px solid var(--line); transition: background .35s var(--ease); } .bg-dark .acc-item { border-color: var(--line-dark); } .acc-btn { width: 100%; display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem .4rem; text-align: left; } .acc-idx { font-family: var(--font-num); font-size: .95rem; font-weight: 700; color: var(--emerald-text); flex-shrink: 0; width: 30px; } .bg-dark .acc-idx { color: var(--lime); } .acc-ttl { flex: 1; font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.42rem); font-weight: 600; color: var(--forest-900); transition: color .3s; } .bg-dark .acc-ttl { color: #fff; } .acc-sign { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .35s var(--ease), border-color .35s, transform .45s var(--ease-out), color .3s; color: var(--forest-800); } .bg-dark .acc-sign { border-color: var(--line-dark); color: #fff; } .acc-item.open .acc-sign { background: var(--grad-brand); border-color: transparent; color: #fff; transform: rotate(135deg); } .acc-sign svg { width: 14px; height: 14px; } .acc-panel { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease-out); } .acc-panel-inner { padding: 0 .4rem 1.5rem 3rem; font-size: .97rem; color: var(--slate-500); } .bg-dark .acc-panel-inner { color: rgba(255,255,255,.68); } .acc-item.open .acc-ttl { color: var(--emerald-text); } .bg-dark .acc-item.open .acc-ttl { color: var(--lime); } /* ---------- 14. Process / timeline ---------- */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; position: relative; } .process::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, rgba(21,127,74,.28) 0 8px, transparent 8px 16px); } .bg-dark .process::before { background: repeating-linear-gradient(90deg, rgba(169,220,60,.3) 0 8px, transparent 8px 16px); } .step { text-align: center; position: relative; } .step-dot { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 1.3rem; display: grid; place-items: center; position: relative; z-index: 2; background: #fff; border: 1.5px solid var(--line); font-family: var(--font-num); font-size: 1.35rem; font-weight: 700; color: var(--forest-900); box-shadow: var(--sh-sm); transition: transform .5s var(--ease-out), background .45s, color .45s, border-color .45s, box-shadow .45s; } .bg-dark .step-dot { background: var(--forest-800); border-color: var(--line-dark); color: #fff; } .step:hover .step-dot { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-6px) scale(1.06); box-shadow: var(--sh-glow); } .split .process { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.6rem; } .split .process::before { display: none; } .step h3 { margin-bottom: .45rem; font-family: var(--font-display); font-size: 1.08rem; } .step p { font-size: .89rem; color: var(--slate-500); } .bg-dark .step p { color: rgba(255,255,255,.62); } /* ---------- 15. Testimonials ---------- */ .tcarousel { position: relative; } .ttrack { display: flex; gap: 1.6rem; transition: transform .7s var(--ease-out); } .tslide { flex: 0 0 calc((100% - 3.2rem) / 3); } .tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.8rem; height: 100%; display: flex; flex-direction: column; gap: 1.1rem; transition: box-shadow .45s var(--ease), transform .45s var(--ease-out); } .tcard:hover { box-shadow: var(--sh-md); transform: translateY(-5px); } .tquote { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--lime); } .tcard p { font-size: .98rem; color: var(--slate-700); line-height: 1.75; flex: 1; } .tmeta { display: flex; align-items: center; gap: .85rem; padding-top: 1rem; border-top: 1px solid var(--line); } .tavatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: 700; font-size: .95rem; font-family: var(--font-sans); } .tname { font-weight: 700; color: var(--forest-900); font-size: .95rem; } .trole { font-size: .78rem; color: var(--slate-500); } .stars { display: flex; gap: .15rem; color: var(--gold); } .stars svg { width: 14px; height: 14px; } .tnav { display: flex; gap: .6rem; justify-content: center; margin-top: 2.4rem; align-items: center; } /* The dot row was an inline style, which meant no media query could widen it for touch. Same trap as the trust-row grid — kept as a class from here on. */ .tdots { display: flex; gap: 16px; align-items: center; overflow: visible; } .tnav { overflow: visible; } /* WCAG 2.2 (2.5.8) wants a 24px minimum target for every pointer type, not just touch. The visible dot stays small; a transparent pseudo element supplies the target. Its width is tied to the gap so neighbouring targets never overlap — overlapping targets send the tap to the wrong slide, which is worse than a small one. */ .tdot { position: relative; } .tdot::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 14px); height: 44px; transform: translate(-50%, -50%); } .tdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(10,46,32,.16); transition: all .35s var(--ease); } .tdot.active { width: 26px; border-radius: 10px; background: var(--grad-lime); } .tarrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--forest-800); transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-out); } .tarrow:hover { background: var(--grad-brand); color: #fff; border-color: transparent; transform: scale(1.07); } .tarrow svg { width: 16px; height: 16px; } /* ---------- 16. Goals ---------- */ .goal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .goal { text-align: center; padding: 1.9rem 1rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s; } .goal:hover { transform: translateY(-8px); box-shadow: var(--sh-md); background: linear-gradient(160deg, #fff, var(--cream)); } .goal-ico { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.24)); color: var(--emerald); transition: transform .5s var(--ease-out); } .goal:hover .goal-ico { transform: scale(1.1) rotate(-8deg); } .goal-ico svg { width: 26px; height: 26px; } .goal h3, .goal h4 { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--forest-900); } /* ---------- 17. CTA band ---------- */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grad-dark); padding: clamp(3rem, 6vw, 4.6rem) clamp(1.8rem, 5vw, 4rem); text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 320px at 20% 10%, rgba(31,163,93,.4), transparent 60%), radial-gradient(520px 300px at 85% 90%, rgba(169,220,60,.26), transparent 60%); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; margin-bottom: 1rem; } .cta-band p { color: rgba(255,255,255,.75); max-width: 60ch; margin: 0 auto 2.2rem; } .cta-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; } /* ---------- 18. Forms ---------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); box-shadow: var(--sh-md); } .field { margin-bottom: 1.2rem; } .field label { display: block; font-size: .82rem; font-weight: 700; color: var(--forest-800); margin-bottom: .5rem; letter-spacing: .02em; } .field input, .field textarea, .field select { width: 100%; padding: .92rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--cream); font-size: .95rem; transition: border-color .3s var(--ease), background .3s, box-shadow .3s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--emerald); background: #fff; box-shadow: 0 0 0 4px rgba(21,127,74,.10); } .field textarea { resize: vertical; min-height: 128px; } .field.err input, .field.err textarea { border-color: #D64545; box-shadow: 0 0 0 4px rgba(214,69,69,.09); } .field .msg { font-size: .76rem; color: #D64545; margin-top: .35rem; display: none; } .field.err .msg { display: block; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .form-note { font-size: .8rem; color: var(--slate-500); margin-top: 1rem; } .form-success { display: none; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: rgba(21,127,74,.09); border: 1px solid rgba(21,127,74,.22); color: var(--forest-700); font-size: .92rem; font-weight: 600; margin-top: 1rem; } .form-success.show { display: flex; } /* Contact info cards */ .info-card { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); } .info-ico { flex: 0 0 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; } .info-ico svg { width: 20px; height: 20px; } .info-card h3, .info-card h4 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-bottom: .3rem; font-weight: 700; } .info-card p, .info-card a { font-size: .98rem; color: var(--forest-900); font-weight: 600; line-height: 1.6; } .info-card a:hover { color: var(--emerald); } .map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-md); filter: grayscale(.35) contrast(1.05); transition: filter .5s var(--ease); } .map-frame:hover { filter: grayscale(0); } .map-frame iframe { display: block; width: 100%; height: 420px; border: 0; } /* ---------- 19. SIP Calculator ---------- */ .calc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--sh-md); } .calc-row { margin-bottom: 1.6rem; } .calc-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; } .calc-row .top label { font-size: .87rem; font-weight: 700; color: var(--forest-800); } .calc-row .top .out { font-family: var(--font-num); font-size: 1.12rem; font-weight: 700; color: var(--emerald); background: rgba(21,127,74,.08); padding: .12rem .7rem; border-radius: var(--r-pill); } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--cream-200); cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--emerald); box-shadow: 0 3px 10px rgba(21,127,74,.35); transition: transform .25s var(--ease-out); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.16); } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--emerald); background: #fff; box-shadow: 0 3px 10px rgba(21,127,74,.35); } .calc-result { margin-top: 2rem; padding-top: 1.7rem; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; } .calc-result .r-lbl { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); font-weight: 700; margin-bottom: .4rem; } .calc-result .r-val { font-family: var(--font-num); font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 700; color: var(--forest-900); } .calc-result .r-val.hl { color: var(--emerald); } .calc-bar { height: 12px; border-radius: 8px; overflow: hidden; display: flex; margin-top: 1.6rem; background: var(--cream-200); } .calc-bar .seg-inv { background: var(--forest-700); transition: width .5s var(--ease-out); } .calc-bar .seg-ret { background: var(--grad-lime); transition: width .5s var(--ease-out); } .calc-legend { display: flex; gap: 1.6rem; justify-content: center; margin-top: .9rem; font-size: .8rem; color: var(--slate-500); } .calc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .4rem; } .calc-disclaimer { font-size: .75rem; color: var(--slate-500); margin-top: 1.2rem; text-align: center; } /* ---------- 19b. Tabbed calculator (SIP / Step-Up SIP) ---------- */ .calc-wide { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: clamp(1.5rem, 3vw, 2.6rem); } .calc-tabs { display: flex; gap: .35rem; padding: .35rem; background: var(--cream); border-radius: var(--r-pill); margin-bottom: 2rem; max-width: 460px; } .calc-tab { flex: 1; padding: .72rem 1rem; border-radius: var(--r-pill); font-size: .88rem; font-weight: 700; color: var(--slate-500); transition: background .35s var(--ease), color .3s, box-shadow .35s, transform .3s var(--ease-out); white-space: nowrap; } .calc-tab:hover { color: var(--forest-800); } .calc-tab.active { background: #fff; color: var(--forest-900); box-shadow: var(--sh-sm); } .calc-pane { display: none; } .calc-pane.active { display: block; animation: paneIn .5s var(--ease-out); } @keyframes paneIn { from { opacity: 0; transform: translateY(10px); } } .calc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; } .calc-kpis { display: grid; gap: .8rem; } .kpi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; border-radius: var(--r-md); background: var(--cream); border: 1px solid var(--line); transition: transform .4s var(--ease-out); } .kpi:hover { transform: translateX(3px); } .kpi .k-lbl { font-size: .82rem; font-weight: 600; color: var(--slate-500); display: flex; align-items: center; gap: .55rem; } .kpi .k-lbl i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .kpi .k-val { font-family: var(--font-num); font-size: 1.3rem; font-weight: 700; color: var(--forest-900); white-space: nowrap; } .kpi.total { background: var(--grad-dark); border-color: transparent; box-shadow: var(--sh-glow); padding: 1.4rem 1.4rem; } .kpi.total .k-lbl { color: rgba(255,255,255,.7); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; } .kpi.total .k-val { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); } .kpi.ghost { background: #fff; } .kpi.ghost .k-val { color: var(--emerald); font-size: 1.12rem; } .calc-chart { margin-top: 1.6rem; } .calc-chart svg { width: 100%; height: auto; overflow: visible; } .calc-chart .cbar-inv { fill: var(--forest-700); } .calc-chart .cbar { transition: y .5s var(--ease-out), height .5s var(--ease-out); } .calc-chart .caxis { font-family: var(--font-sans); font-size: 9.5px; fill: var(--slate-300); } .calc-chart-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); font-weight: 700; margin-bottom: .9rem; } .calc-note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.6rem; padding: 1rem 1.2rem; background: rgba(21,127,74,.06); border: 1px solid rgba(21,127,74,.16); border-radius: var(--r-md); font-size: .84rem; color: var(--slate-700); } .calc-note svg { width: 17px; height: 17px; color: var(--emerald); flex-shrink: 0; margin-top: .18rem; } .calc-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; } @media (max-width: 900px) { .calc-split { grid-template-columns: 1fr; gap: 2.2rem; } .calc-tabs { max-width: none; } .calc-tab { font-size: .8rem; padding: .65rem .5rem; } } /* ---------- 20. Product page bits ---------- */ .prod-hero-card { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); padding: clamp(1.8rem, 3.5vw, 3rem); box-shadow: var(--sh-md); } .pill-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .9rem; border-radius: var(--r-pill); background: rgba(21,127,74,.09); color: var(--emerald-text); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .tri-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .tri-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.7rem; position: relative; overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .tri-card::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--grad-lime); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); } .tri-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .tri-card:hover::after { transform: scaleX(1); } .tri-card h3 { font-size: 1.22rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .7rem; } .tri-card h3 .n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-family: var(--font-sans); font-size: .82rem; font-weight: 800; } .risk-meter { display: flex; gap: .35rem; margin-top: .6rem; } .risk-meter i { height: 7px; flex: 1; border-radius: 4px; background: var(--cream-200); } .risk-meter i.on { background: var(--grad-lime); } .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .spec { background: #fff; padding: 1.3rem 1.4rem; } .spec .k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); font-weight: 700; margin-bottom: .35rem; } .spec .v { font-family: var(--font-num); font-size: 1.15rem; font-weight: 700; color: var(--forest-900); } .prod-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .prod-nav-item { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: .92rem; font-weight: 600; color: var(--forest-900); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; } .prod-nav-item:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); border-color: rgba(21,127,74,.25); } .prod-nav-item .pn-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.1), rgba(169,220,60,.22)); color: var(--emerald); flex-shrink: 0; } .prod-nav-item .pn-ico svg { width: 16px; height: 16px; } .prod-nav-item.current { border-color: var(--emerald); background: linear-gradient(150deg, #fff, rgba(169,220,60,.10)); } /* ---------- 21. Services long-form ---------- */ .svc-block { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); } .svc-block:first-of-type { border-top: 0; } .svc-roman { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--emerald); letter-spacing: .18em; text-transform: uppercase; display: block; margin-bottom: .5rem; } /* Prose */ .prose h2 { margin: 2.4rem 0 1rem; font-size: clamp(1.5rem, 2.6vw, 2rem); } .prose h3 { margin: 1.8rem 0 .7rem; font-size: 1.2rem; } .prose p { margin-bottom: 1.1rem; } .prose ul { margin: 0 0 1.3rem; display: grid; gap: .6rem; } .prose ul li { position: relative; padding-left: 1.6rem; font-size: .98rem; } .prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--grad-lime); } .prose a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---------- 22. Footer ---------- */ .site-footer { background: var(--forest-900); color: rgba(255,255,255,.62); position: relative; overflow: hidden; } .site-footer strong { color: #fff; } .site-footer h2, .site-footer h3, .site-footer h3, .site-footer h4, .site-footer h5 { color: #fff; } .site-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 12% 0%, rgba(31,163,93,.18), transparent 62%), radial-gradient(600px 400px at 92% 100%, rgba(169,220,60,.10), transparent 62%); } .site-footer .wrap { position: relative; z-index: 1; } .footer-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,.09); } .f-info { display: flex; gap: .9rem; align-items: flex-start; } .f-info-ico { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); color: var(--lime); transition: background .35s, color .35s; } .f-info:hover .f-info-ico { background: var(--grad-lime); color: var(--forest-900); } .f-info-ico svg { width: 18px; height: 18px; } .f-info h3 { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .3rem; font-weight: 700; } .f-info p, .f-info a { font-size: .92rem; color: rgba(255,255,255,.86); line-height: 1.6; } .f-info a:hover { color: var(--lime); } .footer-main { display: grid; grid-template-columns: 1.5fr .9fr .95fr .95fr 1.4fr; gap: 2.2rem; padding: 3.4rem 0; } .footer-brand img { height: 62px; width: auto; margin-bottom: 1.2rem; } .footer-brand p { font-size: .93rem; color: rgba(255,255,255,.6); max-width: 38ch; } .footer-brand .badges { display: flex; gap: .5rem; margin-top: 1.3rem; flex-wrap: wrap; } .f-badge { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.66); } .footer-col h3 { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.3rem; font-weight: 800; } .footer-col ul { display: grid; gap: .68rem; } .footer-col a { font-size: .91rem; color: rgba(255,255,255,.62); transition: color .28s, padding-left .3s var(--ease-out); display: inline-block; } .footer-col a:hover { color: var(--lime); padding-left: 5px; } .newsletter p { font-size: .9rem; color: rgba(255,255,255,.6); margin-bottom: 1.2rem; } .nl-form { display: flex; gap: .5rem; flex-wrap: wrap; } .nl-form input { flex: 1 1 150px; padding: .82rem 1rem; border-radius: var(--r-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: .9rem; } .nl-form input::placeholder { color: rgba(255,255,255,.36); } .nl-form input:focus { outline: none; border-color: var(--lime); background: rgba(255,255,255,.1); } .nl-form .btn { flex: 0 0 auto; } .nl-note { font-size: .74rem; color: rgba(255,255,255,.36); margin-top: .8rem; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.09); font-size: .84rem; color: rgba(255,255,255,.45); } .footer-socials { display: flex; gap: .55rem; } .footer-socials a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .35s var(--ease), transform .35s var(--ease-out), color .3s, border-color .3s; } .footer-socials a:hover { background: var(--grad-lime); color: var(--forest-900); transform: translateY(-3px); border-color: transparent; } .footer-socials svg { width: 15px; height: 15px; } .disclaimer { padding: 1.4rem 0 2.4rem; font-size: .74rem; line-height: 1.75; color: rgba(255,255,255,.34); border-top: 1px solid rgba(255,255,255,.06); } /* ========================================================================== 22b. AUDIENCE-FIRST COMPONENTS (collage, life-stage, lead capture, trust) ========================================================================== */ /* ---------- Photo tiles & collage ---------- */ .tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background-color: var(--forest-8, #0A2E20); box-shadow: var(--sh-md); isolation: isolate; } .tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4,22,14,.78) 0%, rgba(4,22,14,.10) 48%, transparent 72%); opacity: .92; transition: opacity .5s var(--ease); } .tile:hover::after { opacity: .8; } .tile-img { position: absolute; inset: 0; transform: scale(1.02); transition: transform 1.1s var(--ease-out); } .tile:hover .tile-img { transform: scale(1.09); } .tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1.5rem 1.4rem; } .tile-tag { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--forest-900); background: var(--grad-lime); padding: .28rem .7rem; border-radius: var(--r-pill); margin-bottom: .7rem; } .tile-ttl { font-family: var(--font-display); font-size: 1.22rem; color: #fff; line-height: 1.22; font-weight: 600; } .tile-sub { font-size: .84rem; color: rgba(255,255,255,.74); margin-top: .35rem; line-height: 1.5; } .collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 1.1rem; } .collage .tile.t-tall { grid-row: span 2; } .collage .tile.t-wide { grid-column: span 2; } .collage .tile.t-big { grid-column: span 2; grid-row: span 2; } /* Hero-side compact collage */ .collage-hero { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: .9rem; } .collage-hero .tile.t-tall { grid-row: span 2; } /* Split media panel */ .media-panel { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 460px; box-shadow: var(--sh-lg); } .media-panel .tile-img { position: absolute; inset: 0; } .media-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(4,22,14,.72), rgba(4,22,14,.12)); } .media-panel .mp-body { position: relative; z-index: 2; padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } /* ---------- Life-stage cards ---------- */ .stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .stage { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; } .stage:hover { transform: translateY(-8px); box-shadow: var(--sh-md); border-color: rgba(21,127,74,.24); } .stage-media { height: 128px; position: relative; overflow: hidden; } .stage-media .tile-img { position: absolute; inset: 0; transition: transform 1s var(--ease-out); } .stage:hover .stage-media .tile-img { transform: scale(1.08); } .stage-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,22,14,.55), transparent 70%); } .stage-age { position: absolute; z-index: 2; left: 1rem; bottom: .8rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-900); background: var(--grad-lime); padding: .26rem .7rem; border-radius: var(--r-pill); } .stage-body { padding: 1.4rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .stage-body h3 { font-size: 1.16rem; margin-bottom: .5rem; } .stage-body p { font-size: .89rem; color: var(--slate-500); flex: 1; } .stage-body ul { display: grid; gap: .45rem; margin: .9rem 0 1.1rem; } .stage-body li { font-size: .82rem; color: var(--slate-700); display: flex; gap: .5rem; align-items: flex-start; } .stage-body li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; margin-top: .5em; background: var(--grad-lime); flex-shrink: 0; } /* ---------- Lead capture ---------- */ .lead-band { position: relative; overflow: hidden; } .lead-card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grad-dark); padding: clamp(1.8rem, 4vw, 3.2rem); box-shadow: var(--sh-lg); } .lead-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 340px at 12% 8%, rgba(31,163,93,.42), transparent 62%), radial-gradient(520px 320px at 92% 92%, rgba(169,220,60,.24), transparent 62%); } .lead-card > * { position: relative; z-index: 1; } .lead-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; } .lead-card h2, .lead-card h3 { color: #fff; } .lead-card p { color: rgba(255,255,255,.74); } .lead-points { display: grid; gap: .8rem; margin-top: 1.6rem; } .lead-points li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: rgba(255,255,255,.82); } .lead-points .tick { flex: 0 0 21px; height: 21px; border-radius: 50%; background: var(--grad-lime); color: var(--forest-900); display: grid; place-items: center; margin-top: .18rem; } .lead-points .tick svg { width: 12px; height: 12px; } .lead-form { background: #fff; border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 2rem); box-shadow: 0 30px 70px rgba(0,0,0,.28); } .lead-form .field { margin-bottom: .95rem; } .lead-form .field label { font-size: .78rem; } .lead-form .field input, .lead-form .field select, .lead-form .field textarea { padding: .82rem 1rem; font-size: .92rem; } /* The form sits inside .lead-card, which colours its own paragraphs white. These rules re-assert dark text inside the white form card. */ .lead-form-title, .lead-card .lead-form .lead-form-title { font-family: var(--font-display); font-size: 1.28rem; color: var(--forest-900); margin-bottom: .3rem; } .lead-form-sub, .lead-card .lead-form .lead-form-sub { font-size: .85rem; color: var(--slate-500); margin-bottom: 1.3rem; } .lead-card .lead-form p { color: var(--slate-500); } .lead-card .lead-form .lead-privacy { color: var(--slate-300); } .lead-card .lead-form label { color: var(--forest-800); } .lead-alt { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); } .lead-alt span { font-size: .8rem; color: var(--slate-500); } .btn-wa { background: #0E7C43; box-shadow: 0 12px 30px rgba(14,124,67,.32); } .btn-wa::after { background: #1EB955; } .lead-privacy { font-size: .74rem; color: var(--slate-500); margin-top: .9rem; line-height: 1.6; } .lead-privacy a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; } /* Honeypot — must stay visually hidden but not display:none (bots skip those) */ .hp-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .form-error { display: none; align-items: flex-start; gap: .7rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: rgba(214,69,69,.08); border: 1px solid rgba(214,69,69,.24); color: #9B2C2C; font-size: .86rem; margin-top: 1rem; } .form-error.show { display: flex; } .form-error svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .1rem; } /* ---------- Sticky mobile CTA bar ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: none; gap: .6rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(6,32,23,.12); transform: translateY(110%); transition: transform .45s var(--ease-out); } .sticky-cta.show { transform: translateY(0); } .sticky-cta .btn { flex: 1; justify-content: center; padding: .82rem 1rem; font-size: .86rem; } /* ---------- Trust / compliance band ---------- */ /* Column count is driven by a custom property so the modifiers below and the responsive rules further down never fight over specificity. Previously the 3-up variant was applied as an inline style, which beat the media queries and kept the grid 3-up at 390px — pushing the page sideways. */ .trust-row { --tr-cols: 4; display: grid; grid-template-columns: repeat(var(--tr-cols), 1fr); gap: 1rem; } .trust-row.cols-3 { --tr-cols: 3; } .trust-row.cols-1 { --tr-cols: 1; } .trust-item { display: flex; gap: .8rem; align-items: flex-start; padding: 1.15rem 1.2rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s; } .trust-item:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); } .trust-item .ti-ico { flex: 0 0 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.22)); color: var(--emerald); } .trust-item .ti-ico svg { width: 18px; height: 18px; } .trust-item h3 { font-family: var(--font-sans); font-size: .88rem; font-weight: 700; color: var(--forest-900); margin-bottom: .18rem; } .trust-item p { font-size: .78rem; color: var(--slate-500); line-height: 1.5; } .bg-dark .trust-item { background: rgba(255,255,255,.05); border-color: var(--line-dark); } .bg-dark .trust-item h3 { color: #fff; } .bg-dark .trust-item p { color: rgba(255,255,255,.6); } .bg-dark .trust-item .ti-ico { background: rgba(169,220,60,.14); color: var(--lime); } /* ---------- NRI ribbon ---------- */ .nri-ribbon { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: space-between; padding: 1.1rem 1.5rem; border-radius: var(--r-md); background: linear-gradient(120deg, rgba(201,165,75,.14), rgba(169,220,60,.12)); border: 1px solid rgba(201,165,75,.28); } .nri-ribbon p { font-size: .92rem; color: var(--forest-800); font-weight: 600; } .nri-ribbon .flagline { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--slate-500); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } /* ---------- FAQ / value strip ---------- */ .value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .value-item { text-align: center; padding: 1.4rem 1rem; } .value-item .vi-num { font-family: var(--font-num); font-size: 2.2rem; font-weight: 700; color: var(--emerald); line-height: 1; } .bg-dark .value-item .vi-num { color: var(--lime); } .value-item h3, .value-item h4 { font-family: var(--font-sans); font-size: .95rem; margin: .6rem 0 .3rem; color: var(--forest-900); } .bg-dark .value-item h3, .value-item h4 { color: #fff; } .value-item p { font-size: .84rem; color: var(--slate-500); } @media (max-width: 1080px) { .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .collage .tile.t-big { grid-column: span 2; } .stage-grid { grid-template-columns: repeat(2, 1fr); } /* The modifier selectors are repeated here on purpose: a media query adds no specificity, so a bare `.trust-row` rule would lose to `.trust-row.cols-3` and the grid would stay 3-up on a phone. */ .trust-row, .trust-row.cols-3 { --tr-cols: 2; } .trust-row.cols-1 { --tr-cols: 1; } .lead-grid { grid-template-columns: 1fr; } .value-strip { grid-template-columns: 1fr; } } @media (max-width: 640px) { .collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 118px; gap: .7rem; } .collage .tile.t-wide, .collage .tile.t-big { grid-column: span 2; } .stage-grid { grid-template-columns: 1fr; } .trust-row, .trust-row.cols-3, .trust-row.cols-1 { --tr-cols: 1; } .tile-ttl { font-size: 1rem; } .tile-body { padding: 1rem .9rem; } .media-panel { min-height: 320px; } .sticky-cta { display: flex; } .float-actions { bottom: 82px; } .nri-ribbon { padding: 1rem 1.1rem; } } /* ========================================================================== 22c. MUTUAL FUND PAGE COMPONENTS ========================================================================== */ /* ---------- Credentials / registration strip ---------- */ .creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .cred { background: #fff; padding: 1.15rem 1.3rem; } .cred .c-k { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-500); font-weight: 700; margin-bottom: .3rem; } .cred .c-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: 1rem; font-weight: 700; color: var(--forest-900); } .bg-dark .creds { background: var(--line-dark); border-color: var(--line-dark); } .bg-dark .cred { background: rgba(255,255,255,.04); } .bg-dark .cred .c-v { color: #fff; } .bg-dark .cred .c-k { color: rgba(255,255,255,.5); } /* ---------- Numbered step row ---------- */ .how-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .how { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.7rem; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .how:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .how-n { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--emerald); margin-bottom: 1rem; } .how-n b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-size: .78rem; } .how h3 { font-size: 1.14rem; margin-bottom: .5rem; } .how p { font-size: .92rem; color: var(--slate-500); } /* ---------- Order-type / category cards ---------- */ .otype { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; align-items: start; padding: 1.7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .4s; } .otype:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(21,127,74,.22); } .otype .o-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.10), rgba(169,220,60,.22)); color: var(--emerald); } .otype .o-ico svg { width: 25px; height: 25px; } .otype h3 { font-size: 1.16rem; margin-bottom: .45rem; } .otype p { font-size: .93rem; color: var(--slate-500); } .otype .o-tag { display: inline-block; margin-top: .8rem; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--emerald-text); background: rgba(21,127,74,.09); padding: .25rem .65rem; border-radius: var(--r-pill); } /* ---------- Chip row (SIP frequencies, account types) ---------- */ .chips { display: flex; flex-wrap: wrap; gap: .7rem; } .chip { display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.15rem; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--forest-900); transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s, background .35s; } .chip:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); border-color: rgba(21,127,74,.28); } .chip .ch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-lime); flex-shrink: 0; } .chip svg { width: 16px; height: 16px; color: var(--emerald); } .bg-dark .chip { background: rgba(255,255,255,.06); border-color: var(--line-dark); color: #fff; } .bg-dark .chip svg { color: var(--lime); } /* ---------- Definition blocks (taxation, NAV, charges) ---------- */ .defs { display: grid; gap: 1.1rem; } .def { padding: 1.4rem 1.6rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--emerald); } .def h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--forest-900); margin-bottom: .4rem; } .def p { font-size: .92rem; color: var(--slate-500); } .def .d-rate { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; color: var(--emerald); } .bg-dark .def { background: rgba(255,255,255,.05); border-color: var(--line-dark); border-left-color: var(--lime); } .bg-dark .def h3 { color: #fff; } .bg-dark .def p { color: rgba(255,255,255,.66); } .bg-dark .def .d-rate { color: var(--lime); } .tax-note { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.4rem; padding: 1rem 1.2rem; background: rgba(201,165,75,.10); border: 1px solid rgba(201,165,75,.3); border-radius: var(--r-md); font-size: .84rem; color: var(--slate-700); } .tax-note svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: .15rem; } .bg-dark .tax-note { color: rgba(255,255,255,.75); background: rgba(201,165,75,.14); } @media (max-width: 1080px) { .creds { grid-template-columns: repeat(2, 1fr); } .how-row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .creds { grid-template-columns: 1fr; } .otype { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================================================== 22d. PEER-TO-PEER LENDING PAGE COMPONENTS ========================================================================== */ /* ---------- Three-node flow (how a bank sits in the middle) ---------- */ .flow3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: stretch; } .flow-node { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.3rem; text-align: center; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .flow-node:hover { transform: translateY(-5px); box-shadow: var(--sh-md); } .flow-node.mid { background: var(--grad-dark); border-color: transparent; box-shadow: var(--sh-glow); } .flow-node .fn-role { font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--emerald); margin-bottom: .55rem; } .flow-node.mid .fn-role { color: var(--lime); } .flow-node .fn-name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; color: var(--forest-900); margin-bottom: .5rem; } .flow-node.mid .fn-name { color: #fff; } .flow-node .fn-meta { font-size: .85rem; color: var(--slate-500); line-height: 1.6; } .flow-node.mid .fn-meta { color: rgba(255,255,255,.72); } .flow-node .fn-rate { display: inline-block; margin-top: .7rem; padding: .3rem .8rem; border-radius: var(--r-pill); font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; font-size: .95rem; background: rgba(21,127,74,.09); color: var(--emerald-text); } .flow-node.mid .fn-rate { background: rgba(169,220,60,.16); color: var(--lime); } .flow-arrow { display: grid; place-items: center; color: var(--slate-300); } .flow-arrow svg { width: 24px; height: 24px; } /* ---------- Comparison table ---------- */ .vs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; } .vs-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; border-top: 1px solid var(--line); } .vs-row:first-child { border-top: 0; } .vs-row > div { padding: 1.05rem 1.3rem; font-size: .93rem; } .vs-row .vs-k { font-weight: 700; color: var(--forest-900); background: var(--cream); } .vs-row .vs-a { color: var(--slate-500); border-left: 1px solid var(--line); } .vs-row .vs-b { color: var(--forest-800); font-weight: 600; border-left: 1px solid var(--line); background: rgba(169,220,60,.06); } .vs-head > div { font-size: .72rem !important; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .vs-head .vs-a { color: var(--slate-500); } .vs-head .vs-b { color: var(--emerald); } /* ---------- Funnel ---------- */ .funnel { display: grid; gap: .9rem; } .funnel-step { position: relative; border-radius: var(--r-md); padding: 1.3rem 1.5rem; background: var(--grad-brand); color: #fff; margin-inline: auto; width: 100%; box-shadow: var(--sh-glow); } .funnel-step.narrow { width: 68%; background: linear-gradient(120deg, var(--forest-700), var(--emerald)); } .funnel-step .fs-n { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1; } .funnel-step .fs-l { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: .35rem; } .funnel-rate { text-align: center; margin-top: 1rem; font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; color: var(--emerald); font-size: 1.05rem; } /* ---------- Diversification dot grid ---------- */ .dotgrid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 4px; padding: 1.4rem; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); } .dotgrid i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--lime); opacity: .85; } .dotgrid i.dim { background: #fff; opacity: .18; } /* ---------- Return waterfall ---------- */ .waterfall { display: grid; grid-template-columns: repeat(5, auto); gap: .8rem; align-items: center; justify-content: center; } .wf-step { text-align: center; min-width: 128px; } .wf-step .wf-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1; color: var(--forest-900); } .wf-step .wf-k { font-size: .8rem; font-weight: 700; color: var(--forest-800); margin-top: .5rem; } .wf-step .wf-d { font-size: .74rem; color: var(--slate-500); margin-top: .2rem; line-height: 1.45; } .wf-step.minus .wf-v { color: #B4553F; } .wf-step.result .wf-v { color: var(--emerald); } .wf-op { font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; color: var(--slate-300); padding-bottom: 1.6rem; } .bg-dark .wf-step .wf-v { color: #fff; } .bg-dark .wf-step .wf-k { color: rgba(255,255,255,.85); } .bg-dark .wf-step .wf-d { color: rgba(255,255,255,.55); } .bg-dark .wf-step.minus .wf-v { color: #F0A28C; } .bg-dark .wf-step.result .wf-v { color: var(--lime); } .bg-dark .wf-op { color: rgba(255,255,255,.3); } /* ---------- Sensitivity table ---------- */ .sens { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; } .sens-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .sens-row:first-child { border-top: 0; } .sens-row > div { padding: .95rem 1.3rem; font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 700; font-size: 1.02rem; color: var(--forest-900); } .sens-row .s-ret { color: var(--emerald); border-left: 1px solid var(--line); text-align: right; } .sens-row.head > div { font-family: var(--font-sans); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-500); background: var(--cream); } .sens-row.actual { background: rgba(169,220,60,.10); } .sens-row.actual .s-npa::after { content: " actual"; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald); font-weight: 800; margin-left: .4rem; } /* ---------- Side-by-side product compare ---------- */ .compare2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .cmp { border-radius: var(--r-lg); padding: 1.9rem 1.7rem; border: 1px solid var(--line); background: #fff; } .cmp.win { background: var(--grad-dark); border-color: transparent; box-shadow: var(--sh-glow); } .cmp .cmp-t { font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); margin-bottom: .5rem; } .cmp.win .cmp-t { color: var(--lime); } .cmp .cmp-h { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: 1.32rem; font-weight: 800; color: var(--forest-900); margin-bottom: 1.1rem; } .cmp.win .cmp-h { color: #fff; } .cmp ul { display: grid; gap: .7rem; } .cmp li { display: flex; gap: .65rem; align-items: flex-start; font-size: .91rem; color: var(--slate-500); } .cmp.win li { color: rgba(255,255,255,.78); } .cmp li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .18rem; color: var(--slate-300); } .cmp.win li svg { color: var(--lime); } @media (max-width: 1080px) { .flow3 { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); padding: .3rem 0; } .waterfall { grid-template-columns: 1fr; gap: .5rem; } .wf-op { padding: 0; } .compare2 { grid-template-columns: 1fr; } .dotgrid { grid-template-columns: repeat(20, 1fr); } } @media (max-width: 640px) { .vs-row { grid-template-columns: 1fr; } .vs-row .vs-a, .vs-row .vs-b { border-left: 0; border-top: 1px solid var(--line); } .vs-head { display: none; } .vs-row .vs-a::before { content: "Banking: "; font-weight: 700; color: var(--slate-500); } .vs-row .vs-b::before { content: "P2P: "; font-weight: 700; color: var(--emerald); } .funnel-step.narrow { width: 84%; } .dotgrid { grid-template-columns: repeat(15, 1fr); } } /* ========================================================================== 22e. FRACTIONAL REAL ESTATE PAGE COMPONENTS ========================================================================== */ /* ---------- RERA registration badge ---------- */ .rera { display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.4rem; border-radius: var(--r-pill); background: linear-gradient(120deg, rgba(21,127,74,.10), rgba(169,220,60,.16)); border: 1.5px solid rgba(21,127,74,.30); } .rera .r-ico { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-brand); color: #fff; } .rera .r-ico svg { width: 17px; height: 17px; } .rera .r-k { font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--emerald); } .rera .r-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: 1.02rem; font-weight: 800; color: var(--forest-900); letter-spacing: .01em; } .bg-dark .rera { background: rgba(169,220,60,.12); border-color: rgba(169,220,60,.35); } .bg-dark .rera .r-k { color: var(--lime); } .bg-dark .rera .r-v { color: #fff; } /* ---------- Nine-step journey ---------- */ .journey { position: relative; display: grid; gap: .75rem; } .jstep { display: grid; grid-template-columns: 54px 1fr; gap: 1.2rem; align-items: center; padding: 1.15rem 1.4rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .jstep:hover { transform: translateX(5px); box-shadow: var(--sh-sm); } .jstep.dark { background: var(--grad-dark); border-color: transparent; } .jstep.final { background: linear-gradient(120deg, var(--forest-700), var(--emerald)); border-color: transparent; box-shadow: var(--sh-glow); } .jstep .j-n { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, rgba(21,127,74,.12), rgba(169,220,60,.24)); color: var(--emerald); font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; font-size: 1.02rem; } .jstep.dark .j-n, .jstep.final .j-n { background: rgba(255,255,255,.14); color: #fff; } .jstep h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--forest-900); margin-bottom: .18rem; } .jstep.dark h3, .dark h4, .jstep.final h3, .final h4 { color: #fff; } .jstep p { font-size: .86rem; color: var(--slate-500); line-height: 1.5; } .jstep.dark p, .jstep.final p { color: rgba(255,255,255,.74); } .jgate { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; padding: 1.1rem 1.5rem; margin: .3rem 0; border-radius: var(--r-md); background: rgba(201,165,75,.10); border: 1.5px dashed rgba(201,165,75,.45); } .jgate .g-score { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: 1.3rem; font-weight: 800; color: var(--emerald); } .jgate .g-no { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8F3D2B; background: rgba(180,85,63,.10); padding: .3rem .8rem; border-radius: var(--r-pill); } /* ---------- Due-diligence scorecard ---------- */ .dd-score { display: grid; gap: .85rem; } .dd-row { display: grid; grid-template-columns: 1.3fr 2fr auto; gap: 1rem; align-items: center; } .dd-row .dd-k { font-size: .88rem; font-weight: 600; color: var(--forest-900); } .dd-bar { height: 9px; border-radius: 6px; background: var(--cream-200); overflow: hidden; } .dd-bar i { display: block; height: 100%; border-radius: 6px; background: var(--grad-lime); } .dd-bar i.partial { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } .dd-row .dd-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: .88rem; font-weight: 800; color: var(--emerald); min-width: 62px; text-align: right; } .bg-dark .dd-row .dd-k { color: rgba(255,255,255,.86); } .bg-dark .dd-bar { background: rgba(255,255,255,.12); } .bg-dark .dd-row .dd-v { color: var(--lime); } .dd-total { display: flex; align-items: baseline; justify-content: center; gap: .6rem; padding: 1.6rem; border-radius: var(--r-lg); background: var(--grad-dark); box-shadow: var(--sh-glow); text-align: center; } .dd-total .t-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; color: var(--lime); line-height: 1; } .dd-total .t-k { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 700; } /* ---------- Project fact sheet ---------- */ .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .fact { background: #fff; padding: 1.15rem 1.3rem; } .fact .f-k { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-500); font-weight: 800; margin-bottom: .3rem; } .fact .f-v { font-size: .96rem; font-weight: 600; color: var(--forest-900); line-height: 1.5; } .fact .f-v.mono { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; } /* ---------- Security cover ---------- */ .seccover { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: center; } .seccover .sc-box { padding: 1.7rem 1.4rem; border-radius: var(--r-lg); text-align: center; border: 1px solid var(--line); background: #fff; } .seccover .sc-box.big { background: var(--grad-dark); border-color: transparent; box-shadow: var(--sh-glow); } .seccover .sc-v { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--forest-900); line-height: 1; } .seccover .sc-box.big .sc-v { color: var(--lime); } .seccover .sc-k { font-size: .8rem; color: var(--slate-500); margin-top: .5rem; } .seccover .sc-box.big .sc-k { color: rgba(255,255,255,.7); } .seccover .sc-op { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; color: var(--slate-300); } @media (max-width: 900px) { .facts { grid-template-columns: 1fr; } .dd-row { grid-template-columns: 1fr auto; } .dd-row .dd-bar { grid-column: 1 / -1; order: 3; } .seccover { grid-template-columns: 1fr; } .seccover .sc-op { transform: rotate(90deg); } .jstep { grid-template-columns: 40px 1fr; gap: .9rem; padding: 1rem; } .jstep .j-n { width: 34px; height: 34px; font-size: .9rem; } } /* ========================================================================== 22h. SECTION INDEX ("on this page" chips + back-to-top) ========================================================================== */ /* Sits directly beneath the sticky site header, so the index stays on screen whichever section you are reading. Chips are plain anchors — the smooth scroll comes from scroll-behavior on , which already honours prefers-reduced-motion, so this works with JavaScript disabled. */ .secnav { position: sticky; top: var(--nav-h); z-index: 70; background: rgba(255,255,255,.93); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(6,32,23,.05); } .secnav .wrap { display: flex; align-items: center; gap: 1rem; min-height: 54px; } .secnav-label { flex: 0 0 auto; font-family: var(--font-sans); font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); padding-right: 1rem; border-right: 1px solid var(--line); } .secnav-track { display: flex; align-items: center; gap: .4rem; /* min-width:0 is essential. As a flex item this defaults to min-width:auto, which refuses to shrink below the combined width of the chips — the strip then widens the whole page instead of scrolling inside itself. */ flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .55rem 0; /* Fade the right edge so it reads as scrollable rather than clipped. */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%); } .secnav-track::-webkit-scrollbar { display: none; } .secnav-chip { flex: 0 0 auto; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--slate-500); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out); } .secnav-chip:hover { color: var(--forest-900); border-color: var(--lime); transform: translateY(-1px); } .secnav-chip.active { background: var(--grad-brand); border-color: transparent; color: #fff; font-weight: 700; } .secnav-chip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; } /* Land the jump below BOTH sticky bars. scroll-padding-top and scroll-margin-top add together, so this is set as padding on the scroll container rather than as margin on each target — otherwise the two would stack and overshoot. The class is put on only for pages that carry an index. */ html.has-secnav { scroll-padding-top: calc(var(--nav-h) + 66px); } #top { position: absolute; top: 0; } /* Back to top, at the end of every section */ .sec-top { display: flex; justify-content: flex-end; margin-top: 2.4rem; } .sec-top a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--font-sans); font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--slate-500); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease-out); } .sec-top a:hover { color: var(--forest-900); border-color: var(--lime); background: var(--cream); transform: translateY(-2px); } .sec-top .st-ico { display: inline-flex; color: var(--emerald); } /* On the dark and cream bands the default white pill would disappear. */ .bg-dark .sec-top a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.78); } .bg-dark .sec-top a:hover { background: rgba(255,255,255,.13); color: #fff; border-color: var(--lime); } .bg-dark .sec-top .st-ico { color: var(--lime); } .bg-cream .sec-top a:hover { background: #fff; } @media (max-width: 900px) { .secnav .wrap { min-height: 48px; gap: .7rem; } .secnav-label { display: none; } .secnav-chip { font-size: .74rem; padding: .38rem .75rem; } .sec-top { margin-top: 1.8rem; } } /* ========================================================================== 22g. MANAGED-PRODUCT COMPONENTS (SIF / PMS / AIF) ========================================================================== */ /* A comparison table with a variable number of columns. The column template is supplied inline as --cmp-cols, and each cell carries a data-l label that is promoted to a heading when the table stacks on small screens. This keeps the life-insurance .cmp-table (which is hard-wired to five columns with fixed mobile labels) untouched. */ .cmp-table.gen .cmp-row { grid-template-columns: var(--cmp-cols, repeat(4, 1fr)); } @media (max-width: 1080px) { .cmp-table.gen .cmp-row { grid-template-columns: 1fr; } .cmp-table.gen .cmp-row > div::before { content: attr(data-l); } .cmp-table.gen .cmp-row > div:first-child::before { content: none; } } /* ========================================================================== 22f. INSURANCE HUB COMPONENTS ========================================================================== */ /* A .card rendered as an anchor, so the whole tile is the click target. */ .ins-card { display: flex; flex-direction: column; } .ins-card h3 { transition: color .3s var(--ease); } .ins-card:hover h3 { color: var(--emerald); } .ins-card p { flex: 1 1 auto; } .ins-card .link-arrow { align-self: flex-start; } /* The journey steps on the hub carry a link, which needs breathing room and must stay legible on the alternating dark steps. */ .journey .jstep a.link-arrow { display: inline-flex; } .journey .jstep.dark a.link-arrow { color: var(--lime); } /* ---------- 23. Floating actions ---------- */ .float-actions { position: fixed; right: 20px; bottom: 22px; z-index: 80; display: grid; gap: .6rem; } .fab { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 12px 34px rgba(6,32,23,.28); transition: transform .4s var(--ease-out), box-shadow .4s; } .fab:hover { transform: translateY(-4px) scale(1.05); } .fab-wa { background: #25D366; } .fab-call { background: var(--grad-brand); } .fab-top { background: var(--forest-800); opacity: 0; visibility: hidden; transform: translateY(12px); } .fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .fab svg { width: 21px; height: 21px; } /* ---------- 24. Reveal animations ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-34px); } [data-reveal="right"] { transform: translateX(34px); } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } /* ---------- 25. Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 300; background: var(--forest-900); display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; } .preloader.done { opacity: 0; visibility: hidden; } .pl-inner { text-align: center; } .pl-inner img { height: 84px; width: auto; margin: 0 auto 1.4rem; animation: plPulse 1.7s ease-in-out infinite; } @keyframes plPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } } .pl-bar { width: 168px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin: 0 auto; } .pl-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad-lime); animation: plSlide 1.2s var(--ease) infinite; } @keyframes plSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } /* ---------- 26. Utilities ---------- */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; } .mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; } .text-center { text-align: center; } .relative { position: relative; } .divider { height: 1px; background: var(--line); border: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--forest-900); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ---------- 27. Responsive ---------- */ /* The mega-menu only exists above 1080px, but between 1081 and 1200 the three grouped columns need tightening so the two-up Insurance column does not squeeze its labels. */ @media (max-width: 1200px) { .mega-cols { gap: 1rem; } .mega-col + .mega-col { padding-left: 1rem; } .mega-item { padding: .6rem .55rem; gap: .6rem; } .mega-ico { flex: 0 0 32px; height: 32px; border-radius: 9px; } .mega-title { font-size: .84rem; } .mega-desc { font-size: .71rem; } } @media (max-width: 1080px) { .nav-menu, .nav-cta .btn-ghost { display: none; } .burger { display: grid; } .footer-main { grid-template-columns: 1fr 1fr; } .footer-top { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .goal-grid { grid-template-columns: repeat(3, 1fr); } .tslide { flex: 0 0 calc((100% - 1.6rem) / 2); } .process { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; } .process::before { display: none; } } @media (max-width: 900px) { :root { --nav-h: 68px; } .hero-grid { grid-template-columns: 1fr; gap: 3rem; } .hero-visual { min-height: 0; margin-top: 1rem; } .hero-card-main { position: static; width: auto; } .float-card { position: static; animation: none; margin-top: 1rem; } .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .tri-cards { grid-template-columns: 1fr; } .calc-result { grid-template-columns: 1fr; gap: 1.4rem; } .topbar-left .tb-hide { display: none; } .frame::after { display: none; } } @media (max-width: 640px) { body { font-size: 15.8px; } .wrap, .wrap-narrow { width: min(100% - 2.2rem, var(--wrap)); } .g2, .g3, .g4 { grid-template-columns: 1fr; } .goal-grid { grid-template-columns: repeat(2, 1fr); } .tslide { flex: 0 0 100%; } .form-row { grid-template-columns: 1fr; } .footer-main, .footer-top { grid-template-columns: 1fr; } .stat + .stat::before { display: none; } .hero-trust { gap: 1.6rem; } .brand img { height: 42px; } .brand-name { font-size: 1.05rem; } .topbar { font-size: .74rem; } .topbar-left { gap: .9rem; } .process { grid-template-columns: 1fr; } .acc-panel-inner { padding-left: .4rem; } .float-card { position: static; margin-top: .8rem; animation: none; } .badge-float { position: static; margin-top: 1rem; } .nav-cta .btn { display: none; } .brand-tag { display: none; } .nav { gap: .6rem; } .float-actions { right: 14px; bottom: 16px; } .fab { width: 46px; height: 46px; } .cta-band { border-radius: var(--r-lg); } } @media (max-width: 380px) { .brand-name { font-size: .95rem; } .brand img { height: 38px; } } /* Chip sub-label — must invert on dark sections (SIP frequencies band). */ .chip .ch-sub { color: var(--slate-500); font-weight: 500; font-size: .82rem; } .bg-dark .chip .ch-sub { color: rgba(255, 255, 255, .62); } /* AMFI registration disclosure — footer badge and credentials note. */ .f-badge-arn { background: rgba(169, 220, 60, .12); border-color: rgba(169, 220, 60, .32); color: var(--lime); text-transform: none; letter-spacing: .04em; } .creds-note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-size: .82rem; line-height: 1.65; color: var(--slate-500); } .creds-note svg { width: 16px; height: 16px; color: var(--emerald); flex-shrink: 0; margin-top: .2rem; } .creds-note strong { color: var(--forest-800); } /* Highlight a sensitivity/compare row without the "actual" annotation (that label belongs only to the NPA table's real-world figure). */ .sens-row.hl { background: rgba(169, 220, 60, .10); } /* White cards placed inside a .bg-dark section: the section rule paints all headings white, which makes them invisible on the card's white background. Re-assert dark heading text for those components. */ /* NOTE: only components that render a WHITE card on a dark section belong here. .def and .trust-item paint themselves a translucent DARK card inside .bg-dark, so their headings must stay white — they are excluded. */ .bg-dark .otype h3, .bg-dark .otype h3, .otype h4, .bg-dark .jstep:not(.dark):not(.final) h4, .bg-dark .fact .f-v, .bg-dark .card:not([style*="rgba"]) h3, .bg-dark .vs-row .vs-k { color: var(--forest-900); } /* ---------- Five-column plan comparison table (life insurance) ---------- */ .cmp-table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; } .cmp-row { display: grid; grid-template-columns: .9fr 1.5fr 1.2fr 1.2fr 1.3fr; border-top: 1px solid var(--line); } .cmp-row:first-child { border-top: 0; } .cmp-row > div { padding: 1rem 1.15rem; font-size: .88rem; color: var(--slate-500); line-height: 1.55; } .cmp-row > div + div { border-left: 1px solid var(--line); } .cmp-row .cr-k { font-weight: 700; color: var(--forest-900); background: var(--cream); } .cmp-row .cr-b { color: var(--forest-800); font-weight: 600; background: rgba(169,220,60,.06); } .cmp-row.cmp-head > div { font-size: .7rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); background: var(--cream); } .cmp-row.cmp-head .cr-b { color: var(--emerald); } @media (max-width: 1080px) { .cmp-row { grid-template-columns: 1fr; } .cmp-row > div + div { border-left: 0; border-top: 1px solid var(--line); } .cmp-row.cmp-head { display: none; } .cmp-row > div::before { font-weight: 700; color: var(--forest-900); display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; } .cmp-row > div:nth-child(2)::before { content: "Overview"; } .cmp-row > div:nth-child(3)::before { content: "Maturity benefit"; } .cmp-row > div:nth-child(4)::before { content: "Death benefit"; } .cmp-row > div:nth-child(5)::before { content: "Best suited for"; } } /* ========================================================================== 28. TOUCH TARGETS & PLATFORM BEHAVIOUR Everything here is scoped to coarse pointers or to safe-area insets, so the desktop design is unchanged. The goal is that the same markup behaves correctly on Windows, iOS and Android. ========================================================================== */ /* Unprefixed companion to -webkit-text-size-adjust set on above. Stops iOS and Edge inflating body copy when a phone is rotated to landscape. */ html { text-size-adjust: 100%; } /* Android Chrome and iOS Safari paint a grey/blue block over a tapped element. Replace it with a faint brand tint so taps feel intentional, not broken. */ a, button, summary, [role="button"], input, select, textarea, label { -webkit-tap-highlight-color: rgba(21, 127, 74, .12); } /* Keep the drawer's momentum scroll from chaining to the page behind it. */ .drawer, .secnav-track { overscroll-behavior: contain; } /* ---- Safe areas (notch / home indicator) ---------------------------------- */ /* These evaluate to 0 on every device without a cutout, so they are inert on Windows and Android hardware without insets. */ .float-actions { right: calc(20px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); } .drawer { padding-bottom: env(safe-area-inset-bottom); } @media (orientation: landscape) { /* A notched iPhone in landscape puts a ~44px dead zone on the leading edge. */ .wrap, .wrap-narrow { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* ---- Coarse pointers: phones, tablets, touch laptops --------------------- */ @media (pointer: coarse) { /* iOS Safari zooms the entire page when a focused control renders below 16px, then leaves the layout shifted. Anything under 16px here is the difference between a form that works and one that fights the user. */ input, select, textarea, .field input, .field select, .field textarea, .lead-form .field input, .lead-form .field select, .lead-form .field textarea, .nl-form input { font-size: 16px; } /* Standalone controls up to a comfortable tap size. Inline links inside prose are deliberately left alone — enlarging those would break the line height of body copy for no real benefit. */ .topbar-socials a { width: 36px; height: 36px; } .footer-socials a { width: 44px; height: 44px; } .drawer-close { width: 44px; height: 44px; } .burger { width: 46px; height: 46px; } /* Stacked link lists: without extra vertical padding these sit ~25px apart and adjacent items get mis-tapped. */ .drawer-nav > li > a, .drawer-nav .drawer-acc-btn { min-height: 48px; display: flex; align-items: center; } .drawer-sub a { padding-top: .8rem; padding-bottom: .8rem; } .footer-col ul a { display: inline-block; padding: .55rem 0; } .crumbs a { display: inline-block; padding: .3rem 0; } /* Contact details are the highest-intent taps on the site — a mis-tap on a phone number is a lost enquiry. These render as bare 16-17px text links in the footer info blocks and on the contact page. */ .f-info a, .info-card a, .topbar-left a { display: inline-flex; align-items: center; min-height: 40px; } /* Call-to-action links and the section index. */ .link-arrow { min-height: 44px; } .secnav-chip { min-height: 40px; display: inline-flex; align-items: center; } .sec-top a { min-height: 44px; } /* The visible slider track stays 6px; the element grows to a 34px grab area using content-box clipping, so the control looks identical but can actually be hit with a thumb. */ input[type="range"] { height: 34px; padding: 14px 0; background-clip: content-box; } input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; } input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } /* Carousel dots are 8px by design. Keep the visual dot small but give it an invisible hit area, using a pseudo element so no markup changes. The width is deliberately tied to the gap: a flat 44px box would overlap its neighbours at the default .6rem spacing and taps would land on the wrong dot — worse than the small target it was meant to fix. Widening the gap to 20px and sizing the hit area to the dot + 18px tiles them with a 2px clearance. */ /* On a phone the dots themselves are enlarged as well as their hit area. */ .tdot { width: 12px; height: 12px; } .tdot.active { width: 30px; } /* Hover transforms are meaningless on touch and leave elements stuck in the hovered state after a tap. */ .card:hover, .fab:hover, .mega-item:hover, .secnav-chip:hover, .sec-top a:hover { transform: none; } } /* ---- Pointer-less / hover-less devices ----------------------------------- */ @media (hover: none) { /* The mega-menu opens on :hover on desktop. On a touch screen that never fires, so the :focus-within fallback in section 7 is what opens it — tapping the Products button focuses it. Suppress the hover rule entirely so a stray touch does not leave the panel half-open. */ .has-mega:hover .mega { opacity: 0; visibility: hidden; pointer-events: none; } .has-mega:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; } }