/* =========================================================== Anudeep Yadav, Investment Adviser — design system Palette derived from the logo: pure ink black on white, with a restrained brass accent for rules and eyebrows. Layout language follows large-broker sites (utility bar, sticky nav, hero, card grids, stats band, structured footer). Target: WCAG 2.2 Level AA. =========================================================== */ :root { --ink: #0A0A0A; --ink-2: #1C1C1E; --body: #383632; --muted: #63605A; --paper: #FFFFFF; --soft: #F7F6F3; --soft-2: #EFEDE7; --line: #E1DED7; --line-2: #CFCBC2; --gold: #A8874C; --gold-ink: #6B5320; --ok: #1E6B43; --warn-bg: #FFF8E8; --warn-line: #E3C97F; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --wrap: 1180px; --radius: 4px; --shadow-sm: 0 1px 2px rgba(10, 10, 10, .06), 0 4px 14px rgba(10, 10, 10, .05); --shadow-md: 0 2px 6px rgba(10, 10, 10, .08), 0 18px 40px rgba(10, 10, 10, .08); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } svg { display: block; } /* inline icons inside running text/links must never stretch */ a svg, p svg, li svg, dd svg, td svg, th svg, button svg, summary svg { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.14em; flex: none; } .frame-media svg, .hero-media svg { width: 100%; height: auto; display: block; } a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--gold-ink); } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; } .on-ink :focus-visible, .site-foot :focus-visible, .topbar :focus-visible { outline-color: #F4D89A; } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.16; margin: 0 0 .5em; letter-spacing: -.014em; } h1 { font-size: clamp(2.05rem, 1.45rem + 2.3vw, 3.35rem); font-weight: 600; } h2 { font-size: clamp(1.55rem, 1.2rem + 1.35vw, 2.25rem); } h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); } h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } @media (max-width: 560px) { .wrap { width: calc(100% - 2rem); } } .eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .9rem; display: block; } .on-ink .eyebrow { color: #D9BC80; } .lead { font-size: 1.09rem; color: var(--body); } .small { font-size: .9rem; } .muted { color: var(--muted); } .rule { width: 46px; height: 2px; background: var(--gold); border: 0; margin: 0 0 1.4rem; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: .85rem 1.3rem; font-weight: 600; } .skip-link:focus { left: .75rem; top: .75rem; } /* ---------- Top utility bar ---------- */ .topbar { background: var(--ink); color: #E8E6E1; font-size: .82rem; border-bottom: 1px solid #262626; } .topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; min-height: 40px; padding-block: .35rem; } .topbar a svg { width: 14px; height: 14px; } .topbar a { color: #F2F0EB; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; padding: .25rem 0; min-height: 24px; } .topbar a:hover { color: #F4D89A; } /* Underline is on the text label only (not the icon glyph) so these contact links are distinguishable from the surrounding utility-bar text without relying on colour alone (WCAG 1.4.1 / link-in-text-block). */ .topbar a span { white-space: nowrap; text-decoration: underline; text-underline-offset: .18em; } .topbar .reg { display: inline-flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; } .topbar .sep { color: #6E6E6E; } .topbar strong { color: #fff; font-weight: 600; } /* ---------- Header ---------- */ .site-head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--line); } .head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 92px; } .brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; } .brand img { height: 58px; width: auto; } .brand .brand-txt { display: none; } @media (min-width: 620px) { .brand .brand-txt { display: block; border-left: 1px solid var(--line-2); padding-left: .95rem; } } .brand .brand-name { display: block; font-family: var(--sans); font-size: .98rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); font-weight: 650; line-height: 1.3; } .brand .brand-sub { display: block; font-size: .78rem; color: var(--muted); letter-spacing: .03em; line-height: 1.4; margin-top: .1rem; } @media (max-width: 420px) { .brand img { height: 50px; } } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500; padding: .6rem .8rem; border-radius: var(--radius); min-height: 44px; display: inline-flex; align-items: center; } .nav a:hover { background: var(--soft-2); color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; } @media (max-width: 900px) { .nav.desktop { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1; padding: .85rem 1.35rem; min-height: 46px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .btn:hover { background: #000; color: #fff; transform: translateY(-1px); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: #fff; } .btn.light { background: #fff; color: var(--ink); border-color: #fff; } .btn.light:hover { background: #F4D89A; border-color: #F4D89A; color: var(--ink); } .btn.outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn.outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn.sm { padding: .6rem 1rem; min-height: 40px; font-size: .86rem; } .btn svg { width: 17px; height: 17px; } /* mobile nav */ .nav-toggle { display: none; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: .5rem .8rem; background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .head-cta { display: none; } } .mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; } .mobile-nav.open { display: block; } .mobile-nav ul { list-style: none; margin: 0; padding: .5rem 0 1rem; } /* scoped to the list — an unscoped `.mobile-nav a` also hit the WhatsApp button inside the panel and painted its label near-black on near-black */ .mobile-nav ul a { display: block; padding: .85rem .2rem; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--line); font-weight: 500; } .mobile-nav ul a[aria-current="page"] { color: var(--ink); font-weight: 650; } .mobile-nav .btn { margin-top: 1rem; width: 100%; } /* ---------- Sections ---------- */ section { scroll-margin-top: 120px; } .sec { padding: clamp(3.2rem, 2rem + 5vw, 5.6rem) 0; } .sec.tight { padding-block: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); } .sec.soft { background: var(--soft); border-block: 1px solid var(--line); } .sec.ink { background: var(--ink); color: #D8D6D1; } .sec.ink h2, .sec.ink h3 { color: #fff; } .sec-head { max-width: 62ch; margin-bottom: 2.4rem; } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(3rem, 2rem + 5vw, 5.4rem) 0 clamp(2.4rem, 1.6rem + 3vw, 3.4rem); background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { margin-bottom: .55em; } .hero .lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); max-width: 54ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding: 0; list-style: none; } .chips li { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem .95rem; display: inline-flex; align-items: center; gap: .45rem; } .chips li svg { width: 14px; height: 14px; color: var(--gold-ink); } .hero-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.6rem 1.5rem; } .hero-card h2 { font-family: var(--sans); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .hero-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; font-size: .92rem; } .hero-card dt { color: var(--muted); } .hero-card dd { margin: 0; text-align: right; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } .hero-card .note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); } /* ---------- Cards ---------- */ .grid { display: grid; gap: 1.5rem; } .grid.g2 { grid-template-columns: repeat(2, 1fr); } .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.6rem; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .card.hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); } .card .num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); line-height: 1; margin-bottom: .8rem; display: block; } .card ul { margin: .8rem 0 0; padding-left: 1.15rem; } .card li { margin-bottom: .45rem; } .card .card-foot { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .icon-box { width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--radius); display: grid; place-items: center; margin-bottom: 1.15rem; color: var(--ink); } .icon-box svg { width: 22px; height: 22px; } /* ---------- Stats band ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); } @media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stats > div { background: var(--ink); padding: 1.6rem 1.3rem; } .stats .v { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: #fff; line-height: 1.1; } .stats .k { font-size: .82rem; color: #B9B6AF; margin-top: .35rem; letter-spacing: .03em; } /* ---------- Service rows (contact page) ---------- */ .frame { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); align-items: center; } .frame + .frame { margin-top: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); padding-top: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); border-top: 1px solid var(--line); } .frame.flip .frame-media { order: -1; } @media (max-width: 880px) { .frame { grid-template-columns: 1fr; } .frame.flip .frame-media { order: 0; } } .frame-media { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; } .frame-media svg { width: 100%; height: auto; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .table-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 640px; } caption { text-align: left; font-weight: 650; color: var(--ink); padding: .9rem 1rem; font-size: .95rem; border-bottom: 1px solid var(--line); background: var(--soft); } th, td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } thead th { background: var(--soft-2); color: var(--ink); font-weight: 650; font-size: .85rem; letter-spacing: .01em; } tbody th { font-weight: 550; color: var(--ink-2); } td { font-variant-numeric: tabular-nums; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tfoot th, tfoot td { background: var(--soft); font-weight: 700; color: var(--ink); border-top: 2px solid var(--line-2); } .tbl-note { font-size: .82rem; color: var(--muted); margin-top: .8rem; } /* Table titles sit OUTSIDE the horizontal scroller so they are never clipped on a narrow screen; the table is labelled by them via aria-labelledby. */ .table-title { font-weight: 650; color: var(--ink); font-size: .95rem; margin: 0 0 .6rem; } /* ---------- Notice boxes ---------- */ .notice { border: 1px solid var(--line-2); border-left: 3px solid var(--ink); background: var(--soft); padding: 1.1rem 1.3rem; border-radius: var(--radius); margin: 1.4rem 0; } .notice strong { color: var(--ink); } .notice.warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: #9A7A20; } /* ---------- Accordion ---------- */ .acc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; } .acc + .acc { margin-top: .7rem; } .acc > summary { list-style: none; cursor: pointer; padding: 1.05rem 3rem 1.05rem 1.2rem; position: relative; font-family: var(--sans); font-weight: 650; color: var(--ink); font-size: 1rem; min-height: 44px; } .acc > summary::-webkit-details-marker { display: none; } .acc > summary:hover { background: var(--soft); } .acc > summary::after { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .acc[open] > summary::after { transform: translateY(-30%) rotate(-135deg); } .acc[open] > summary { border-bottom: 1px solid var(--line); background: var(--soft); } .acc .acc-body { padding: 1.3rem 1.2rem 1.5rem; } .acc .acc-body > :first-child { margin-top: 0; } .acc .acc-body h4, .acc .acc-body .acc-sub { margin-top: 1.4rem; } .acc-sub { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .acc .acc-body ol, .acc .acc-body ul { padding-left: 1.3rem; } .acc .acc-body li { margin-bottom: .5rem; } /* ---------- TOC ---------- */ .toc { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; } .toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; } @media (max-width: 700px) { .toc ol { columns: 1; } } .toc li { margin-bottom: .4rem; break-inside: avoid; } .toc a { color: var(--ink-2); } /* ---------- Definition list (registration details) ---------- */ .dl-grid { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } @media (max-width: 700px) { .dl-grid { grid-template-columns: 1fr; } } .dl-grid dt { padding: .8rem 1rem; background: var(--soft); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); font-size: .9rem; } .dl-grid dd { margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--line); } @media (max-width: 700px) { .dl-grid dt { border-bottom: 0; } } .dl-grid dt:last-of-type, .dl-grid dd:last-of-type { border-bottom: 0; } /* ---------- WhatsApp form ---------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); } .field { margin-bottom: 1.15rem; } .field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; } .field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; display: block; margin-top: .15rem; } .field input, .field select, .field textarea { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: .75rem .9rem; min-height: 46px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); } .field .err { display: none; color: #A11B1B; font-size: .84rem; font-weight: 600; margin-top: .35rem; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #A11B1B; } .field.invalid .err { display: block; } .req { color: #A11B1B; } .form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--body); } .form-consent input { width: 20px; height: 20px; min-height: 20px; margin-top: .2rem; flex: none; } .form-status { margin-top: 1rem; font-size: .9rem; font-weight: 600; } /* ---------- Socials ---------- */ .socials { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; } .socials a, .socials span.soon { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); color: #EDEBE6; text-decoration: none; position: relative; } .socials a:hover { background: #fff; color: var(--ink); border-color: #fff; } .socials span.soon { color: #7C7A75; border-style: dashed; cursor: default; } .socials svg { width: 18px; height: 18px; } .socials .soon-tag { position: absolute; bottom: -7px; right: -6px; font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; background: var(--soft-2); color: var(--ink); border-radius: 2px; padding: 1px 4px; font-weight: 700; line-height: 1.5; } /* ---------- Footer ---------- */ .site-foot { background: var(--ink); color: #B9B6AF; font-size: .92rem; } .foot-top { padding: clamp(2.8rem, 2rem + 3vw, 4rem) 0 2.4rem; border-bottom: 1px solid #262626; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 2.2rem; } @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } } .site-foot h2, .site-foot h3 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; } .site-foot a { color: #DFDCD6; } .site-foot a:hover { color: #F4D89A; } .site-foot ul { list-style: none; margin: 0; padding: 0; } .site-foot li { margin-bottom: .55rem; } .site-foot .foot-logo { height: 42px; width: auto; filter: invert(1); margin-bottom: 1.1rem; } .foot-reg { font-size: .88rem; line-height: 1.75; } .foot-reg strong { color: #fff; } .site-foot .muted, .site-foot .small.muted { color: #9C9992; } .foot-mid { padding: 1.8rem 0; border-bottom: 1px solid #262626; } .foot-warn { display: grid; gap: 1rem; } .foot-warn p { background: #141414; border: 1px solid #2C2C2C; border-left: 3px solid var(--gold); padding: .9rem 1.1rem; margin: 0; font-size: .87rem; } .foot-warn strong { color: #fff; } .foot-bot { padding: 1.4rem 0 2.2rem; font-size: .84rem; color: #8E8B85; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; } .foot-bot a { color: #B9B6AF; } /* ---------- Utilities ---------- */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pending { background: #FFF3D6; border: 1px dashed #C79A22; color: #6B4E00; padding: .05rem .4rem; border-radius: 3px; font-size: .88em; font-weight: 650; } @media print { .topbar, .site-head, .mobile-nav, .hero-cta, #ai-a11y-launcher, .skip-link { display: none !important; } body { font-size: 11pt; color: #000; } .acc > summary::after { display: none; } .acc .acc-body { display: block !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } } /* ---------- Key/value list (reused on cards) ---------- */ .kv { display: grid; grid-template-columns: minmax(118px, 38%) 1fr; gap: .6rem 1rem; margin: 0; } .kv dt { color: var(--muted); font-size: .9rem; } .kv dd { margin: 0; } /* ---------- Wide-table scroll hint (small screens only) ---------- */ .scroll-hint { display: none; font-size: .82rem; color: var(--muted); margin: .6rem 0 0; } .scroll-hint::before { content: "↔ "; color: var(--gold-ink); font-weight: 700; } /* =========================================================== MOBILE REFINEMENTS Alignment and rhythm below 620px. Desktop is untouched. =========================================================== */ @media (max-width: 900px) { .table-wrap { box-shadow: inset -14px 0 14px -14px rgba(10, 10, 10, .3); } .scroll-hint { display: block; } } @media (max-width: 620px) { /* --- utility bar: one flowing, centred block instead of a 3-line stack --- */ .topbar { font-size: .75rem; } .topbar .wrap { display: block; text-align: center; padding-block: .5rem; } .topbar .reg, .topbar p { display: inline; } .topbar .reg { line-height: 1.65; } .topbar .sep { display: none; } /* separators lead the item they belong to, so a dot can never be left dangling at the end of a wrapped line */ .topbar .reg > span + span::before, .topbar .top-contact a::before { content: "· "; color: #7A7A7A; } /* each contact item is one unbreakable unit, so the icon can never wrap away from the address or number it belongs to */ .topbar a { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; vertical-align: middle; margin: 0 .35rem; } .topbar a svg { flex: none; } .topbar .reg > span { white-space: nowrap; } .head-inner { min-height: 74px; } /* --- vertical rhythm --- */ .sec { padding-block: 2.7rem; } .sec-head { margin-bottom: 1.7rem; } .card { padding: 1.35rem 1.25rem; } .frame-media { padding: 1rem; } .frame + .frame { margin-top: 2.2rem; padding-top: 2.2rem; } .form-card { padding: 1.35rem 1.25rem; } .stats > div { padding: 1.25rem 1rem; } /* --- label/value pairs stack instead of being squeezed into a narrow first column, which was wrapping labels onto three to five lines --- */ .hero-card dl, .kv { grid-template-columns: 1fr; gap: 0; } .hero-card dt, .kv dt { font-size: .8rem; color: var(--muted); line-height: 1.45; letter-spacing: .02em; margin-top: .95rem; } .hero-card dt:first-of-type, .kv dt:first-of-type { margin-top: 0; } .hero-card dd, .kv dd { text-align: left; margin-top: .12rem; font-size: 1rem; line-height: 1.5; } /* --- disclosures registration grid: tighten each stacked pair --- */ .dl-grid dt { padding-bottom: .1rem; } .dl-grid dd { padding-top: .1rem; } /* --- call-to-action rows share one edge instead of sitting ragged --- */ .hero-cta, .btn-row { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; } .hero-cta .btn, .btn-row .btn { width: 100%; } /* --- comfortable tap areas on the footer link lists --- */ .site-foot li a { display: inline-block; padding: .3rem 0; } } @media (max-width: 420px) { .chips li { font-size: .76rem; padding: .4rem .8rem; } .acc > summary { padding: .95rem 2.6rem .95rem 1rem; font-size: .95rem; } .acc .acc-body { padding: 1.1rem 1rem 1.3rem; } } /* =========================================================== Ver1 revisions =========================================================== */ /* top bar now carries email + phone on the right */ .top-contact { display: inline-flex; flex-wrap: wrap; gap: .3rem 1.3rem; align-items: center; } /* "Talk to us" sits with the nav links, in the same format */ .nav-wa { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500; padding: .6rem .8rem; border-radius: var(--radius); min-height: 44px; } .nav-wa:hover { background: var(--soft-2); color: var(--ink); } .nav-wa svg { width: 16px; height: 16px; } @media (max-width: 900px) { .nav-wa { display: none; } } /* narrow separator that replaced the statistics band */ .band-rule { height: 6px; background: var(--ink); } /* services 01 / 02 sitting adjacent, each with its illustration */ .svc-card { display: flex; flex-direction: column; } .svc-art { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin: -.35rem 0 1.3rem; } .svc-art svg { width: 100%; height: auto; display: block; } .svc-card .eyebrow { margin-bottom: .5rem; } /* indicative fees bullets */ .fee-list { margin: .4rem 0 1.2rem; padding-left: 1.15rem; font-size: 1.05rem; } .fee-list li { margin-bottom: .5rem; } /* footer is three columns now that Investor resources moved to the disclosures page */ .foot-grid { grid-template-columns: 1.5fr 1fr 1.35fr; } @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .top-contact { display: inline; } .svc-art { margin-bottom: 1rem; } } /* =========================================================== Ver2 revisions — adviser identity block =========================================================== */ /* Headshot + name/credential, opening the About section */ .adviser-id { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.5rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .adviser-photo { width: 112px; height: 112px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 28%; border: 1px solid var(--line-2); box-shadow: 0 2px 10px rgba(10, 10, 10, .10); background: var(--soft-2); } .adviser-meta { margin: 0; display: flex; flex-direction: column; gap: .18rem; } .adviser-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -.014em; } .adviser-role { font-size: .95rem; color: var(--body); } .adviser-reg { font-size: .8rem; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; } @media (max-width: 420px) { .adviser-id { gap: .9rem; } .adviser-photo { width: 88px; height: 88px; } .adviser-name { font-size: 1.2rem; } } /* ---------- Ver2 mobile polish ---------- */ @media (max-width: 620px) { /* the footer's bottom row links sit outside the lists, so they need their own comfortable tap area */ .foot-bot { gap: .4rem 1rem; } .foot-bot a { display: inline-block; padding: .35rem 0; } .foot-bot span { display: block; } /* chips: slightly tighter so short ones can pair up on one line */ .chips { gap: .45rem; } .chips li { font-size: .78rem; padding: .38rem .78rem; } /* the service illustration is decorative — give it a little less height so the reading matter starts sooner */ .svc-art { padding: .7rem; } } /* ---------- WhatsApp reachable from the mobile header ---------- Below 900px the nav collapses, which used to bury the WhatsApp link inside the menu. This compact button keeps it one tap away. */ .wa-mobile { display: none; } @media (max-width: 900px) { .wa-mobile { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; background: var(--ink); color: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius); text-decoration: none; transition: background .18s ease, transform .18s ease; } .wa-mobile:hover { background: #000; color: #fff; transform: translateY(-1px); } .wa-mobile svg { width: 21px; height: 21px; display: block; } } @media (max-width: 380px) { .wa-mobile { width: 44px; height: 44px; } .nav-toggle { padding: .5rem .7rem; } } /* =========================================================== MOTION & POLISH Everything here is additive: with JavaScript off, or with prefers-reduced-motion, the page renders exactly as before. =========================================================== */ /* ---------- mobile menu: panel and its button ---------- */ .mobile-nav .wrap { padding-bottom: 1.35rem; } .mobile-nav .btn { margin-top: 1.15rem; box-shadow: var(--shadow-sm); } .mobile-nav ul a { transition: color .16s ease, padding-left .16s ease; } .mobile-nav ul a:hover { color: var(--ink); padding-left: .45rem; } /* ---------- header condenses once you start scrolling ---------- */ .site-head { transition: box-shadow .25s ease, background-color .25s ease; } .site-head .head-inner { transition: min-height .25s ease; } .site-head .brand img { transition: height .25s ease; } .site-head.scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 22px rgba(10, 10, 10, .06); } @media (min-width: 621px) { .site-head.scrolled .head-inner { min-height: 72px; } .site-head.scrolled .brand img { height: 46px; } } /* ---------- nav links get an underline that grows from the left ---------- */ .nav a, .nav-wa { position: relative; } .nav a::after, .nav-wa::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .45rem; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.22, .61, .36, 1); } .nav a:hover::after, .nav-wa:hover::after { transform: scaleX(1); } .nav a[aria-current="page"]::after { display: none; } /* ---------- cards, chips, rows ---------- */ .card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card.hover:hover, a.card:hover { border-color: var(--line-2); } .icon-box { transition: background-color .22s ease, border-color .22s ease, color .22s ease; } .card:hover .icon-box { background: var(--ink); border-color: var(--ink); color: #fff; } .chips li { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .chips li:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); } tbody tr { transition: background-color .15s ease; } tbody tr:hover { background: var(--soft); } .socials a { transition: background-color .18s ease, color .18s ease, transform .18s ease; } .socials a:hover { transform: translateY(-2px); } .adviser-photo { transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .adviser-id:hover .adviser-photo { transform: scale(1.03); } .btn { box-shadow: 0 0 0 rgba(10, 10, 10, 0); } .btn:hover { box-shadow: 0 6px 18px rgba(10, 10, 10, .16); } .btn.light:hover, .btn.outline-light:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); } /* ---------- accordion body eases open ---------- */ .acc[open] .acc-body { animation: accIn .28s cubic-bezier(.22, .61, .36, 1); } /* ---------- the animations themselves ---------- */ @media (prefers-reduced-motion: no-preference) { .mobile-nav.open { animation: menuIn .24s cubic-bezier(.22, .61, .36, 1); } /* Applied by script.js ONLY to blocks that start below the fold, so nothing above the fold is ever hidden waiting for an observer. Deliberately TRANSFORM-ONLY, no opacity: a part-faded element makes automated contrast checks fail while the animation is in flight, and this site is audited with exactly those tools. Motion without fade costs nothing here and keeps the page provably clean mid-scroll. */ .rv { transform: translateY(18px); } .rv-in { transform: none; transition: transform .55s cubic-bezier(.22, .61, .36, 1); } /* hero settles on load */ .hero h1 { animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) both; } .hero .lead { animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) .06s both; } .hero .hero-cta { animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) .12s both; } .hero .chips { animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) .18s both; } .hero-card { animation: riseIn .55s cubic-bezier(.22, .61, .36, 1) .1s both; } } @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes riseIn { from { transform: translateY(14px); } to { transform: none; } } /* Printing and reduced motion must never leave anything invisible. */ @media print { .rv { transform: none !important; } } /* =========================================================== LANGUAGE SWITCHER A native