/* ===================================================================== Bizacharya — design system modelled on the "Copora" consulting template: monochrome, Inter, medium-weight headings, 1px borders, no shadows/gradients. Order: tokens → base → layout → header/footer → buttons → components → pages → motion ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Logo palette: navy for dark surfaces/headings, blue for actions, teal for accents */ --black: #0A2540; /* navy — headings, dark sections, footer */ --black-2: #123B63; /* navy hover */ --primary: #07579A; /* logo blue — primary buttons, active states */ --primary-2: #1F6DAE; /* blue hover */ --ink: #12202E; /* strong text */ --text: #3B4A5A; /* body copy */ --muted: #627288; /* secondary copy — darkened from #64748B so it clears 4.5:1 on --surface too */ --line: #D9E4EE; /* borders */ --surface: #F2F7FB; /* light sections (blue-tinted) */ --surface-2: #F8FBFD; /* pills, subtle fills */ --white: #FFFFFF; --brand: #07579A; /* links, focus */ --brand-2: #1A9A8C; /* logo teal — fills, borders, icons, decoration */ /* Text-safe teal. The logo teal only reaches 3.47:1 on white, so it fails WCAG AA wherever it carries small copy (eyebrows, tags, active nav). Use this for teal TEXT under ~24px; keep --brand-2 for fills, borders and icons, where 3:1 is the bar and the brighter teal is right. */ --brand-2-ink: #157E73; --on-dark: rgba(255, 255, 255, .74); --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ml: "Noto Sans Malayalam", "Manjari", system-ui, sans-serif; /* Typography scale — sourced from the Home page (index.html), which is the single reference for heading/body/label sizing across every page. Individual components may still tune weight, line-height, letter-spacing or margin for their own context, but a font-size should always trace back to one of these rather than introducing a new literal value. */ --font-h1: clamp(2rem, 8vw, 2.75rem); /* main heading — Home page's h1 (the hero), the reference for every h1 site-wide; scales further at 576px/992px, see the h1 rule below */ --font-h2: clamp(1.9rem, 3.1vw, 2.75rem); /* section heading */ --font-h3: clamp(1.15rem, 1.6vw, 1.35rem); /* subheading / card title */ --font-h4: 1.05rem; --font-body: 1rem; /* base paragraph / button text */ --font-lead: 1.1rem; /* intro / lead / section-head description */ --font-small: .9rem; /* eyebrow / small label */ --font-button: 1rem; --font-nav: .82rem; /* header navigation links */ --font-tagline: clamp(1.15rem, 3vw, 1.35rem); /* short slogan line between eyebrow and h1 (Home hero__sub) */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --ease: cubic-bezier(.22, .61, .36, 1); --header-h: 80px; --gutter: 30px; /* Single source of truth for button height — .btn and every size modifier (sm/lg) share it, so height stays consistent everywhere; only horizontal padding/font-size vary by size. */ --button-height: clamp(44px, 4vw + 30px, 60px); /* Default duration for continuous marquee sliders (.marquee) — override per-instance or at a breakpoint to change speed without touching the animation logic. */ --slider-speed: 30s; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x here (not just on body) matters: is the actual scrolling root in standards mode, and a fixed-position element wider than the viewport (e.g. the off-canvas nav drawer, translated out of view but still in the layout tree) can otherwise force the document wider than the viewport on narrow screens, clipping in-flow content at the right edge instead of wrapping it. `clip` rather than `hidden`: `hidden` makes the element a scroll container, which silently breaks `position: sticky` on everything inside it — the sticky header then anchors to a container that never scrolls and just scrolls away with the page. `clip` cuts off the same overflow without establishing a scrollport, so the header keeps sticking. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: var(--font-body); line-height: 1.65; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; display: flex; flex-direction: column; min-height: 100vh; } body.is-locked { overflow: hidden; } main { flex: 1; } img, svg { display: block; max-width: 100%; } a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--black); } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1rem; } /* Like .ph above, this matters because the pages load bootstrap-grid (no Reboot): without it the browser default `blockquote { margin: 1em 40px }` insets every quote 40px from its container. */ blockquote { margin: 0; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font); font-weight: 500; color: var(--black); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6em; } h1 { font-size: var(--font-h1); line-height: 1.08; letter-spacing: -0.025em; } /* Home page's h1 (the hero) grows in two more steps as the viewport widens — every h1 site-wide follows the exact same curve, so page titles stay the same size as the Home page at every width. */ @media (min-width: 576px) { h1 { font-size: clamp(2.5rem, 6vw, 3.4rem); } } @media (min-width: 992px) { h1 { font-size: clamp(2.5rem, 3.4vw, 4rem); } } h2 { font-size: var(--font-h2); letter-spacing: -0.025em; } h3 { font-size: var(--font-h3); } h4 { font-size: var(--font-h4); } .lead { font-size: var(--font-lead); color: var(--muted); line-height: 1.6; } .muted { color: var(--muted); } strong { font-weight: 600; color: var(--ink); } .ml { font-family: var(--font-ml); } .icon { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; } .icon--fill { fill: currentColor; stroke: none; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--black); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); } .skip-link:focus { top: 1rem; color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- 3. Layout ---------- */ .container { --bs-gutter-x: calc(var(--gutter) * 2); width: 100%; max-width: 1280px; margin: 0 auto; padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px); } /* On large displays the 1280px cap leaves a lot of empty gutter, so let the content breathe. Gated at 1600px rather than applied outright, so every layout below that is unchanged. */ @media (min-width: 1600px) { .container { max-width: 1440px; } } .section { padding: clamp(4rem, 7vw, 6.5rem) 0; position: relative; } .section--tight { padding: clamp(2.5rem, 4.5vw, 4rem) 0; } .section--light { background: var(--surface); } .section--tint { background: var(--surface-2); } .section--navy { background: var(--black); color: var(--on-dark); } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .section--navy p { color: var(--on-dark); } .section--navy .eyebrow { color: #4FC3B5; } /* Every section carries the same rhythm above and below its content, including two that share a background and read as one continuous band. */ .section--pattern::before, .section--pattern-dark::before { content: none; } .section-head { max-width: 680px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { color: var(--muted); font-size: var(--font-lead); max-width: 560px; } .section-head--center p { margin-left: auto; margin-right: auto; } .section-head h2 { margin-bottom: .5rem; } .eyebrow { display: block; font-size: var(--font-small); font-weight: 500; color: var(--brand-2-ink); margin-bottom: .75rem; } .eyebrow::before, .eyebrow::after { content: none; } .grid-gap { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1.5rem; } .hero__inner > *, .connect > *, .leader > *, .vm2__panels > *, .premium__inner > *, [class*="col-"] { min-width: 0; } /* ---------- 4. Buttons (reference: Copora — static colour, label rolls up on hover) ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--button-height); padding: 0 2rem; border-radius: 50px; border: 1px solid transparent; font-weight: 500; font-size: var(--font-button); line-height: 1.5; white-space: nowrap; cursor: pointer; transition: background .15s cubic-bezier(.4, 0, .2, 1), color .15s, border-color .15s; } .btn .icon { width: 1.1em; height: 1.1em; flex: none; } .btn__label { position: relative; display: block; overflow: hidden; height: 1.5em; line-height: 1.5em; } .btn__t { display: block; transition: transform 1.125s cubic-bezier(.19, 1, .22, 1); } .btn__t--alt { position: absolute; left: 0; top: 0; transform: translateY(100%); } .btn:hover .btn__t { transform: translateY(-100%); } .btn:hover .btn__t--alt { transform: translateY(0); } .btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn--primary:hover { color: #fff; } .btn--accent { background: var(--brand-2); color: #fff; border-color: var(--brand-2); } .btn--accent:hover { color: #fff; } .btn--outline { background: #fff; color: var(--ink); border-color: var(--line); } .btn--outline:hover { color: var(--ink); border-color: #B9CAD9; } .btn--light, .btn--white { background: #fff; color: var(--black); border-color: #fff; } .btn--light:hover, .btn--white:hover { color: var(--black); } .btn--sm { padding: 0 1.15rem; font-size: .875rem; } .btn--lg { padding: 0 2.5rem; font-size: 1rem; } .btn--wa { background: #25D366; color: #073b1e; border-color: #25D366; } .btn--wa:hover { color: #073b1e; } .btn-group { display: flex; flex-wrap: wrap; gap: .75rem; } @media (max-width: 575.98px) { .btn { white-space: normal; text-align: center; } .btn--lg { padding: 0 1.4rem; } .btn__label { height: auto; overflow: visible; line-height: 1.4; } .btn__t--alt { display: none; } .btn:hover .btn__t { transform: none; } } @media (prefers-reduced-motion: reduce) { .btn__t--alt { display: none; } .btn:hover .btn__t { transform: none; } .btn__label { height: auto; } } .text-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .95rem; color: var(--ink); } .text-link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); } .text-link:hover { color: var(--brand); } .text-link:hover .icon { transform: translateX(3px); } /* ---------- 5. Top bar + header (reference: innovatik) ---------- */ .topbar { background: #fff; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .topbar__inner { display: flex; align-items: stretch; justify-content: space-between; min-height: 42px; gap: 1rem; } .topbar__info { display: flex; align-items: stretch; } .topbar__info > * { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem; border-right: 1px solid var(--line); color: var(--text); font-weight: 500; white-space: nowrap; } .topbar__info > *:first-child { padding-left: 0; } .topbar__info a:hover { color: var(--primary); } .topbar__info .icon { width: 14px; height: 14px; color: var(--primary); } .topbar__right { display: flex; align-items: stretch; } .topbar__auth { display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.1rem; border-left: 1px solid var(--line); font-weight: 500; white-space: nowrap; } .topbar__auth a { color: var(--ink); } .topbar__auth a:hover { color: var(--primary); } .social--cells { gap: 0; } .social--cells a { width: 40px; height: auto; border-radius: 0; border-left: 1px solid var(--line); color: var(--text); } .social--cells li:last-child a { border-right: 1px solid var(--line); } .social--cells a:hover { background: var(--surface); color: var(--primary); } .social--cells .icon { width: 15px; height: 15px; } @media (max-width: 991.98px) { .topbar__addr, .topbar__info a:nth-child(2) { display: none; } } @media (max-width: 575.98px) { .topbar__auth { display: none; } .topbar__info > * { padding: 0 .6rem; } .social--cells a { width: 32px; } .topbar { font-size: .78rem; } } .header { position: sticky; top: 0; z-index: 900; background: #fff; box-shadow: 0 2px 10px rgba(10, 37, 64, .08); transition: box-shadow .25s var(--ease); } .header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(10, 37, 64, .25); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); transition: height .25s var(--ease); } .header.is-scrolled .header__inner { height: 68px; } .brand { display: inline-flex; align-items: center; flex: none; } .brand img { height: 46px; width: auto; transition: height .25s var(--ease); } .header.is-scrolled .brand img { height: 40px; } @media (max-width: 575.98px) { .brand img { height: 28px; } .header.is-scrolled .brand img { height: 26px; } } .nav { display: none; } .nav__list { display: flex; align-items: center; gap: .35rem; } .nav__item { position: relative; } .nav__item--has-sub { display: flex; align-items: center; } .nav__link { display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .9rem; border-radius: var(--radius-sm); background: none; border: 0; white-space: nowrap; font-weight: 600; font-size: var(--font-nav); letter-spacing: .06em; text-transform: uppercase; color: var(--black); transition: color .2s, background .2s; } .nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--primary); } .nav__link.is-active { color: var(--brand-2-ink); } .nav__link .icon { width: 14px; height: 14px; transition: transform .2s; } /* Separate small toggle button (chevron only) beside the label link, so the label can navigate on its own */ .nav__toggle { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; margin-left: -.6rem; border-radius: var(--radius-sm); background: none; border: 0; color: var(--black); transition: color .2s, background .2s; } .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: var(--primary); background: var(--surface); } .nav__toggle .icon { width: 14px; height: 14px; transition: transform .2s; } .nav__item.is-open .nav__toggle .icon { transform: rotate(180deg); } .nav__sub { position: absolute; left: 0; top: calc(100% + 12px); min-width: 276px; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .nav__sub a { display: block; padding: .68rem .85rem; border-radius: var(--radius-sm); font-size: .94rem; color: var(--text); } .nav__sub a:hover, .nav__sub a:focus-visible { background: var(--surface); color: var(--primary); } .nav__item.is-open .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } @media (hover: hover) { .nav__item--has-sub:hover .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } } .header__actions { display: flex; align-items: center; gap: .75rem; flex: none; } .nav { margin-left: auto; } @media (min-width: 1200px) { .header__actions { display: none; } } .header__cta { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--black); } .burger .icon { width: 20px; height: 20px; } @media (min-width: 1200px) { .nav { display: block; } .burger { display: none; } .nav__link { padding: .65rem .8rem; font-size: .8rem; letter-spacing: .05em; } .brand img { height: 42px; } .header__inner { gap: 1.25rem; } } @media (min-width: 1366px) { .brand img { height: 42px; } .nav__link { padding: .65rem .9rem; } } @media (min-width: 1440px) { .nav__link { padding: .7rem 1rem; font-size: .82rem; letter-spacing: .055em; } .brand img { height: 46px; } .nav__list { gap: .45rem; } } @media (min-width: 1680px) { .nav__link { padding: .7rem 1.15rem; font-size: .84rem; letter-spacing: .06em; } .nav__list { gap: .55rem; } } /* Homepage only: header integrated into the dark hero instead of a separate white bar. The logo has no light/white asset in the project, so it's inverted via filter here — the file itself is untouched, this only affects how it renders on the dark header. */ /* A shade deeper than the header's navy so the strip reads as its own band, with bright text, teal icons and visible (but soft) cell dividers. */ body.has-hero .topbar { background: #061A2E; border-bottom-color: rgba(255, 255, 255, .1); } /* The cell dividers inherit the light-theme --line (#D9E4EE), which reads as a hard bright rule against the dark hero header — a soft white separates without drawing the eye. */ body.has-hero .topbar__info > * { border-right-color: rgba(255, 255, 255, .12); } body.has-hero .topbar__auth { border-left-color: rgba(255, 255, 255, .12); } body.has-hero .social--cells a { border-left-color: rgba(255, 255, 255, .12); } body.has-hero .social--cells li:last-child a { border-right-color: rgba(255, 255, 255, .12); } body.has-hero .topbar__info a, body.has-hero .topbar__right a { color: rgba(255, 255, 255, .92); } body.has-hero .topbar__info .icon { color: #4FC3B5; } body.has-hero .topbar__info a:hover, body.has-hero .topbar__right a:hover { color: #fff; } body.has-hero .social--cells a:hover { background: rgba(255, 255, 255, .1); color: #fff; } body.has-hero .topbar__auth span { color: rgba(255, 255, 255, .35); } body.has-hero .header { background: var(--black); box-shadow: 0 2px 20px rgba(0, 0, 0, .3); } body.has-hero .header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5); } body.has-hero .header .brand img { filter: brightness(0) invert(1); } body.has-hero .nav__link { color: #fff; } body.has-hero .nav__link:hover, body.has-hero .nav__link[aria-expanded="true"], body.has-hero .nav__link.is-active { color: #4FC3B5; } body.has-hero .nav__toggle { color: #fff; } body.has-hero .nav__toggle:hover, body.has-hero .nav__toggle[aria-expanded="true"] { color: #4FC3B5; background: rgba(255, 255, 255, .1); } body.has-hero .burger { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; } /* Off-canvas drawer */ .drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; } .drawer.is-open { visibility: visible; } .drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .55); opacity: 0; transition: opacity .3s var(--ease); } .drawer.is-open .drawer__backdrop { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; } .drawer.is-open .drawer__panel { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); } .drawer__head .brand img { height: 34px; } .drawer__close { width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--black); } .drawer__nav { padding: .5rem 0; flex: 1; } .drawer__nav a, .drawer__acc { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .9rem 1.25rem; font-weight: 500; font-size: 1rem; color: var(--ink); background: none; border: 0; text-align: left; } .drawer__nav a:hover, .drawer__acc:hover { background: var(--surface); color: var(--black); } .drawer__acc .icon { width: 16px; height: 16px; transition: transform .25s; } .drawer__acc[aria-expanded="true"] .icon { transform: rotate(180deg); } /* Split row: the label navigates to the listing page, the small chevron button expands the sub-list */ .drawer__item { display: flex; align-items: stretch; } .drawer__item a { flex: 1; width: auto; } .drawer__item .drawer__acc { width: auto; flex: none; padding: .9rem 1.1rem; justify-content: center; } .drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); background: var(--surface); } .drawer__sub > ul { overflow: hidden; } .drawer__sub.is-open { grid-template-rows: 1fr; } .drawer__sub a { padding: .65rem 1.25rem .65rem 2rem; font-weight: 400; font-size: .92rem; } .drawer__foot { padding: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .75rem; } .social { display: flex; gap: .25rem; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 100%; border-radius: 0; color: inherit; transition: background .2s, color .2s; } .social a:hover { background: rgba(127, 127, 127, .15); color: inherit; } .social .icon { width: 17px; height: 17px; } .drawer__foot .social { color: var(--ink); } /* ---------- 6. Footer (black) ---------- */ .footer { background: var(--black); color: var(--on-dark); } .footer__main { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: 2.5rem; } .footer__brand { display: inline-flex; align-items: center; background: #fff; padding: .7rem 1rem; border-radius: var(--radius); max-width: 100%; } .footer__brand img { height: 48px; width: auto; max-width: 100%; } .footer__tagline { margin: 1.5rem 0 1rem; max-width: 340px; font-size: .95rem; color: var(--on-dark); } .footer h4 { color: rgba(255, 255, 255, .55); font-size: .9rem; font-weight: 500; margin-bottom: 1rem; } .footer__links li { margin-bottom: .6rem; } .footer__links a { color: #fff; font-size: .95rem; } .footer__links a:hover { color: rgba(255, 255, 255, .7); } .footer__contact li { display: flex; gap: .6rem; margin-bottom: .8rem; font-size: .95rem; color: #fff; } .footer__contact .icon { color: rgba(255, 255, 255, .6); margin-top: .25rem; width: 17px; height: 17px; } .footer__contact a { color: #fff; overflow-wrap: anywhere; } .footer__contact a:hover { color: rgba(255, 255, 255, .7); } .footer .social { margin-top: 1rem; color: #fff; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.5rem 0; font-size: .875rem; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: .5rem 1.5rem; color: rgba(255, 255, 255, .6); } .footer__bottom a { color: #fff; } .footer__bottom a:hover { color: rgba(255, 255, 255, .7); } /* ---------- 7. Floating actions ---------- */ .fab { position: fixed; right: 1.25rem; z-index: 800; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); transition: transform .2s var(--ease), opacity .3s var(--ease), visibility .3s; } .fab:hover { transform: translateY(-2px); } .fab .icon { width: 24px; height: 24px; } .fab--wa { bottom: 1.25rem; background: #25D366; color: #fff; } .fab--wa:hover { color: #fff; } .fab--top { bottom: 5.1rem; background: var(--primary); color: #fff; opacity: 0; visibility: hidden; } .fab--top.is-visible { opacity: 1; visibility: visible; } .fab--top .icon { width: 20px; height: 20px; } /* ---------- 8. Image placeholders (photo frames) ---------- */ /* margin:0 matters — .ph is usually a
, and the page loads bootstrap-grid (no Reboot), so without this the browser default `figure { margin: 1em 40px }` insets every plain .ph. */ .ph { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #E8E8EA 0%, #D4D4D8 100%); display: flex; align-items: flex-end; color: #52525B; } .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; opacity: .55; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='318' cy='34' r='16'/%3E%3Cpath d='M0 92c50-30 90-36 140-18 40 14 70 6 110-14 50-26 100-22 150 2'/%3E%3Cpath d='M0 120c60-24 110-30 170-14 50 13 90 8 130-8 40-16 70-14 100-6'/%3E%3Cpath d='M60 96v-26m-9 4c3-8 6-10 9-10s6 2 9 10m-13-14c2-6 4-8 4-8s2 2 4 8'/%3E%3Cpath d='M250 84v-30m-10 6c3-9 7-12 10-12s7 3 10 12m-16-16c3-7 6-9 6-9s3 2 6 9'/%3E%3C/svg%3E") no-repeat bottom center / cover; } .ph__label { position: relative; z-index: 1; padding: .7rem .9rem; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; max-width: 100%; color: #3F3F46; } .ph--square { aspect-ratio: 1; } .ph--portrait { aspect-ratio: 4 / 5; } .ph--wide { aspect-ratio: 21 / 9; } .ph--circle { aspect-ratio: 1; border-radius: 50%; } .ph--circle::after { display: none; } .ph--circle .ph__label { display: none; } .ph--circle .icon { position: absolute; inset: 0; margin: auto; width: 45%; height: 45%; color: #71717A; } .ph__tag { position: absolute; top: .9rem; left: .9rem; z-index: 1; } .ph--none { margin: 0; background: #EEF2F6; border: 1px solid var(--line); display: block; } .ph--none::after { display: none; } .ph--none img { position: absolute; inset: 0; margin: auto; width: min(46%, 150px); height: auto; max-height: 60%; object-fit: contain; display: block; } /* ---------- 9. Hero (home): real background-image, HTML content on top ---------- */ /* min-height (not height) so the box can never clip content — if the heading/description/CTAs/ stats need more room, the flex layout grows the section to fit them instead of cutting them off. Matches the deployed build: a 760px floor, and on desktop the viewport minus the header so the hero fills the first screen without pushing the next section entirely out of view. */ .hero { position: relative; overflow: hidden; min-height: 760px; background: var(--black); display: flex; align-items: center; } /* Width-driven, not viewport-height-driven like the old `calc(100vh - 120px)` was — keeps the hero's proportions predictable across very tall/short browser windows instead of stretching with viewport height. */ @media (min-width: 1200px) { .hero { min-height: clamp(620px, 54vw, 820px); } } .hero .container { width: 100%; } /* Panel, not full-bleed: this photo (assets/img/hero_bg.png) carries its own baked-in left-edge dissolve — the pixels themselves fade to this section's navy before "Foundation", the leftmost caption — and that bake was measured against a box exactly this size (the right ~54–60% of the hero, not the full width), so the box has to match or the caption lands somewhere else entirely relative to the text column than where it was calibrated. A full-bleed version of this layout exists for photos that need a live `cover` crop instead (see the 992–1279 and 1600+ overrides below for the same reasoning applied to panel width); this one just needs the panel its dissolve was baked for. */ /* Sized to the photo's own aspect ratio (1404/1160) and anchored to the hero's bottom edge, rather than stretched top-to-bottom or centered — either of those left a navy strip somewhere around the photo whenever the hero's content-driven height didn't exactly match the photo's natural render at that panel width (the hero's own background showing through). Bottom-anchored means the photo is always flush with the bottom of the hero, so there's never a gap under the copy; any size mismatch shows up as the photo running past the hero's top edge instead (clipped by `overflow: hidden` on .hero), which only ever eats into the photo's blurred top padding/fade zone, never the bottom signature that earlier work specifically preserved. */ .hero__bg { position: absolute; bottom: 0; right: 0; left: 46%; z-index: 0; aspect-ratio: 1404 / 1160; opacity: 0; transform: scale(1.01); animation: hero-bg-in 1.3s var(--ease) forwards; } @keyframes hero-bg-in { to { opacity: 1; transform: scale(1); } } /* Each slide is a full-bleed layer inside the panel above; its own background-image comes from an inline style on the HTML div (see index.html), not a CSS rule per slide, so adding a new photo later is a one-line markup addition. `contain`, so the whole frame — every caption — always survives regardless of the panel's exact size at a given width. */ .hero__bg-slide { position: absolute; inset: 0; background-size: contain; background-position: center right; background-repeat: no-repeat; opacity: 0; transition: opacity 1.1s var(--ease); } .hero__bg-slide.is-active { opacity: 1; } /* The panel is pinned to the viewport's right edge, so its left inset is what sizes the photo. Between 992 and 1280 the copy column and the photo want more room than the viewport has, and the photo's first caption ("Foundation") would land on the paragraph — so the panel gives way there. Above 1600 there's room for both and the photo takes the larger share. */ @media (min-width: 1200px) and (max-width: 1279.98px) { .hero__bg { left: 53%; } } @media (min-width: 1600px) { .hero__bg { left: 40%; } } /* Nav — only ever appears once initHeroSlider() finds a second slide to switch to. One compact cluster (prev, dots, next, all inline) anchored bottom-right, inside the photo itself and well clear of the text column, which only ever occupies the left ~60% at most. */ .hero__bg-nav { position: absolute; right: 4%; bottom: 5%; z-index: 3; display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 999px; background: rgba(10, 37, 64, .4); backdrop-filter: blur(3px); } .hero__bg-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); } .hero__bg-dot.is-active { background: #fff; transform: scale(1.3); } .hero__bg-arrow { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); } .hero__bg-arrow:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .55); } .hero__bg-arrow .icon { width: 15px; height: 15px; } .hero .container { position: relative; z-index: 2; } .hero__inner { display: grid; gap: 2.5rem; padding-top: clamp(2.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 9vw, 7rem); align-items: center; } .hero__content { min-width: 0; } .hero h1 { margin-bottom: 1rem; max-width: 640px; color: #fff; opacity: 0; animation: hero-fade-up .7s var(--ease) .2s forwards; } .hero__heading-accent { color: #4FC3B5; } .hero__sub { font-weight: 500; font-size: var(--font-tagline); color: #4FC3B5; margin-bottom: 1rem; opacity: 0; animation: hero-fade-up .7s var(--ease) .35s forwards; } .hero p.lead { max-width: 650px; margin-bottom: 2rem; color: var(--on-dark); font-size: var(--font-lead); line-height: 1.6; opacity: 0; animation: hero-fade-up .7s var(--ease) .45s forwards; } .hero .btn-group { opacity: 0; animation: hero-fade-up .7s var(--ease) .6s forwards; } .chip-label { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); padding: .65rem 1rem; border-radius: var(--radius-sm); font-weight: 500; font-size: .95rem; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .3); } .hero .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); } .hero .btn--outline:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); } @media (min-width: 1200px) { /* Container stays centred (so the hero lines up with every other section's left gutter); the grid track is what narrows to the dark half and sits at the container's left edge. 62% (694px against this container) rather than half: the deployed build gives the hero copy a 690px column, and at 50% (560px here) the two CTAs (614px) and the four feature stats (624px) both overflow and wrap, which pushed the hero ~160px taller than it should be and, because the photo is `cover`, scaled the board up with it. */ .hero__inner { grid-template-columns: minmax(0, 62%); justify-content: start; } } /* Stat row under the CTAs */ .hero__stats { display: flex; flex-wrap: wrap; gap: 1.75rem 2rem; list-style: none; margin: 2.25rem 0 0; padding: 0; opacity: 0; animation: hero-fade-up .7s var(--ease) .75s forwards; } .hero__stats li { display: flex; align-items: center; gap: .65rem; color: var(--on-dark); font-size: .87rem; line-height: 1.35; } .hero__stats .icon { width: 22px; height: 22px; flex: none; color: #4FC3B5; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Phones and tablets (incl. iPad landscape, 1024px): stacked layout. Below 1200px the side-by-side layout left the photo as a small box stuck in the bottom-right with empty space above it. */ @media (max-width: 1199.98px) { .hero { flex-direction: column; align-items: stretch; min-height: 0; } .hero__inner { grid-template-columns: 1fr; padding-top: clamp(1.75rem, 5vw, 3rem); } /* Single column, so the photo becomes a full-width strip above the copy. Its height follows the photo's own aspect ratio (so on phones the whole frame fills the width instead of shrinking into a corner), capped on tablets. Still `contain` and right-anchored — the photo's baked left-edge dissolve blends into the navy, and every caption survives. */ .hero__bg { position: relative; inset: auto; width: 100%; height: min(calc(100vw * 1160 / 1404), 440px); aspect-ratio: auto; } .hero__bg-slide { background-position: right bottom; } /* Four stats don't fit on one line in a single narrowish column — a tidy 2×2 grid instead */ .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.25rem 2.5rem; } } @media (min-width: 768px) and (max-width: 1199.98px) { .hero__stats { grid-template-columns: repeat(4, max-content); gap: 1.25rem 2rem; } } /* Phones: the photo covers the whole hero, behind the copy. A navy scrim keeps the top of the photo (hand + king) visible and deepens behind the text so it stays readable; the copy starts a little lower to leave that top band clear. */ @media (max-width: 767.98px) { .hero__bg { position: absolute; inset: 0; width: auto; height: auto; } .hero__bg-slide { background-size: cover; background-position: 88% top; } .hero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 37, 64, .1) 0%, rgba(10, 37, 64, .4) 12%, rgba(10, 37, 64, .82) 26%, rgba(10, 37, 64, .9) 100%); } .hero__inner { padding-top: clamp(7rem, 30vw, 9.5rem); } } @media (max-width: 575.98px) { .hero .btn-group { flex-direction: column; } .hero .btn-group .btn { width: 100%; justify-content: center; } .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; margin-top: 1.75rem; } } /* Stats row (pill label + big number + note) */ .stats { display: grid; gap: 2rem; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat__pill { display: inline-block; background: var(--surface); color: var(--primary); font-size: .85rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--radius-sm); margin-bottom: 1rem; } .stat__row { display: flex; align-items: flex-start; gap: 1rem; } .stat__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; color: var(--black); line-height: 1; white-space: nowrap; } .stat__label { color: var(--muted); font-size: .95rem; line-height: 1.5; max-width: 240px; } @media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } } .section--navy .stats { border-color: rgba(255, 255, 255, .12); } .section--navy .stat__pill { background: rgba(255, 255, 255, .1); color: #fff; } .section--navy .stat__value { color: #fff; } .section--navy .stat__label { color: var(--on-dark); } /* ---------- 10. Cards ---------- */ .card-x { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s var(--ease); } .card-x:hover { border-color: #A1A1AA; } .card-x::before { content: none; } .card-x__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--primary); margin-bottom: 1.1rem; flex: none; } .card-x__icon .icon { width: 22px; height: 22px; } .card-x h3 { font-size: 1.15rem; margin-bottom: .5rem; } .card-x p { color: var(--muted); font-size: .95rem; flex: 1; } .card-x .text-link { margin-top: .75rem; } /* Photo card with floating label chip (sectors) */ /* Sectors We Support: alternating zigzag flow — organic gradient "blob" icons, colour-coded titles and a colour fade divider. No filled containers/cards/borders around each item, so it reads as a flowing list, not a box/tile grid, and not a clone of the Services row-list below. */ /* Light section: a wash of the logo teal at low alpha over white, with the geometric artwork faint on top of it. The negative z-index puts the image above this background but behind the copy, which is why .container below is lifted back to z-index 1. */ .sectors { position: relative; overflow: hidden; isolation: isolate; /* Flat wash at 12% — a single tone rather than the earlier 3-stop gradient, alpha shows the white page through it so it reads as "white, tinted teal" rather than a filled panel. */ background-color: rgba(26, 145, 141, .12); } /* Full-bleed background image, scaled to cover the section. */ .sectors::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: url("../img/sectors-bg-full.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .sectors .container { position: relative; z-index: 1; } .sectors .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } /* Section head on the pale teal ground — the standard light-section treatment. */ .sectors .section-head h2 { color: var(--black); } .sectors .section-head p { color: var(--text); } /* Matched through .section-head so it outranks the `.sectors .section-head p` rule above — the eyebrow is itself a

in that block, so the plain `.sectors .eyebrow` loses to it. Deeper than --brand-2-ink: that token is calibrated against --surface, but the teal wash here lands the ground at ~#DDF1EF, where it only reaches 4.20:1. This clears 4.5:1 for small copy. */ .sectors .section-head .eyebrow { color: #0F6B5F; } .sector-flow { list-style: none; padding: 0; margin: 0; max-width: 980px; margin-inline: auto; } /* Two accents per row, not one: --accent tints the things drawn AS colour on the section ground (title, arrow, divider), so on this pale teal it has to be a deep shade; --blob fills the icon badge, which carries a white glyph and therefore stays saturated either way. Sharing one variable made the titles wash out or the badges go muddy, depending which way it was set. */ .sector-flow > li:nth-child(1) { --accent: var(--primary); --blob: var(--primary); --blob-2: var(--primary-2); } .sector-flow > li:nth-child(2) { --accent: var(--brand-2-ink); --blob: var(--brand-2); --blob-2: #0F6B5F; } .sector-flow > li:nth-child(3) { --accent: #2C5F96; --blob: #2C5F96; --blob-2: #1B4372; } .sector-flow > li:nth-child(4) { --accent: var(--primary-2); --blob: var(--primary-2); --blob-2: var(--primary); } .sector-flow > li:nth-child(5) { --accent: #0F6B5F; --blob: #0F6B5F; --blob-2: var(--brand-2); } .sector-flow > li:nth-child(6) { --accent: var(--primary); --blob: var(--primary); --blob-2: var(--brand-2); } .sector-line__row { position: relative; display: flex; align-items: center; gap: 1.75rem; padding: 1.4rem 0; color: inherit; } .sector-line__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, transparent 78%); } .sector-flow > li:last-child .sector-line__row::after { display: none; } .sector-flow > li.sector-line--rev .sector-line__row::after { background: linear-gradient(270deg, var(--accent) 0%, transparent 78%); } .sector-line__blob { order: 1; flex: none; width: 84px; height: 84px; position: relative; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--blob), var(--blob-2)); border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .45); transition: border-radius .6s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s var(--ease); } /* Inner ring — turns the flat icon into a two-layer badge instead of a single flat glyph. */ .sector-line__blob::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: inherit; pointer-events: none; } .sector-line__blob .icon { position: relative; z-index: 1; width: 34px; height: 34px; } .sector-line__row:hover .sector-line__blob, .sector-line__row:focus-visible .sector-line__blob { border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; transform: scale(1.06); box-shadow: 0 26px 44px -16px rgba(0, 0, 0, .55); } .sector-line__body { order: 2; flex: 1 1 auto; min-width: 0; } .sector-line--rev .sector-line__body { text-align: right; } .sector-line__title { display: block; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .4rem; color: var(--accent); transition: opacity .3s; } .sector-line__row:hover .sector-line__title { opacity: .82; } .sector-line__desc { display: block; margin: 0; color: var(--text); font-size: .95rem; max-width: 480px; } .sector-line--rev .sector-line__desc { margin-left: auto; } .sector-line__arrow { order: 3; flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .sector-line__arrow .icon { width: 22px; height: 22px; transition: transform .4s var(--ease); } .sector-line__row:hover .sector-line__arrow .icon { transform: translateX(5px); } .sector-line--rev .sector-line__blob { order: 3; } .sector-line--rev .sector-line__arrow { order: 1; } @media (max-width: 767.98px) { .sector-line__row { gap: 1.1rem; padding: 1.6rem 0; } .sector-line__blob { width: 64px; height: 64px; } .sector-line__blob .icon { width: 26px; height: 26px; } .sector-line--rev .sector-line__blob { order: 1; } .sector-line--rev .sector-line__arrow { order: 3; } .sector-line--rev .sector-line__body { text-align: left; } .sector-line--rev .sector-line__desc { margin-left: 0; } .sector-line--rev .sector-line__row::after { background: linear-gradient(90deg, var(--accent) 0%, transparent 78%); } } /* Row list (services): tag, title, description, arrow — smooth hover */ .row-list { border-top: 1px solid var(--line); } /* Editorial listing pages (Opportunities / Services overview) */ .listing__list { max-width: 860px; margin: 0 auto; } .row-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .75rem 1.5rem; align-items: center; padding: 1.6rem 1rem; margin: 0 -1rem; border-bottom: 1px solid var(--line); border-radius: var(--radius); color: inherit; isolation: isolate; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .row-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--surface); opacity: 0; transform: scaleX(.96); transform-origin: left center; transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1); } .row-item:hover { transform: translateX(6px); } .row-item:hover::before { opacity: 1; transform: scaleX(1); } .row-item > div { transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .row-item:hover > div { transform: translateX(4px); } .row-item__title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; color: var(--black); letter-spacing: -0.02em; margin: .35rem 0 .25rem; transition: color .3s; } .row-item:hover .row-item__title { color: var(--primary); } .row-item p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 640px; } .row-item__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--black); transition: background .35s cubic-bezier(.22, .61, .36, 1), color .35s, border-color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; } .row-item__icon .icon { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .row-item:hover .row-item__icon { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08) rotate(-45deg); box-shadow: 0 10px 22px -10px rgba(7, 87, 154, .6); } .row-item__num { flex: none; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #B9CAD9; transition: color .4s var(--ease), transform .45s cubic-bezier(.22, .61, .36, 1); } .row-item:hover .row-item__num { color: var(--primary); transform: translateY(-2px); } @media (max-width: 575.98px) { .row-item { margin: 0; padding: 1.4rem .75rem; gap: .5rem 1rem; } .row-item:hover { transform: none; } .row-item__num { font-size: 1.6rem; } } /* Generic continuous marquee: overflow-hidden viewport + a flex track holding the real items followed by an identical, aria-hidden duplicate set. Animating the track from 0 to -50% always lands exactly on the duplicate's first item — regardless of item count, width or gap — so the loop point is seamless. transform-only, so it stays smooth/GPU-friendly. */ .marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll var(--slider-speed) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Home "Services We Offer": a continuous marquee instead of a stacked plain-text list — the list read as a wall of white space; colour-blocked tiles drifting past read as interactive instead. Accent colours cycle the same palette as the Sectors flow above it. */ .services-sec { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); } .service-marquee { padding: .25rem .25rem 1rem; margin: -.25rem; } .service-marquee .marquee__track { --slider-speed: 34s; gap: 1.5rem; align-items: stretch; } .service-tile:nth-child(7n+1) { --accent: var(--primary); --accent-2: var(--primary-2); } .service-tile:nth-child(7n+2) { --accent: var(--brand-2); --accent-2: #0F6B5F; } .service-tile:nth-child(7n+3) { --accent: var(--black-2); --accent-2: var(--black); } .service-tile:nth-child(7n+4) { --accent: var(--primary-2); --accent-2: var(--primary); } .service-tile:nth-child(7n+5) { --accent: #0F6B5F; --accent-2: var(--brand-2); } .service-tile:nth-child(7n+6) { --accent: var(--primary); --accent-2: var(--brand-2); } .service-tile:nth-child(7n+7) { --accent: var(--brand-2); --accent-2: var(--primary); } .service-tile { position: relative; display: flex; flex-direction: column; flex: none; width: min(320px, 78vw); height: auto; min-height: 260px; color: inherit; padding: 2rem 1.75rem 1.75rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 12px 26px -22px rgba(10, 37, 64, .18); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; } .service-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -22px rgba(10, 37, 64, .22); } .service-tile__icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; margin-bottom: 1.25rem; flex: none; box-shadow: 0 16px 28px -16px var(--accent); } .service-tile__icon .icon { width: 26px; height: 26px; } .service-tile__num { position: absolute; top: 1.75rem; right: 1.75rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--line); font-variant-numeric: tabular-nums; } .service-tile__title { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; letter-spacing: -0.01em; } .service-tile p { color: var(--muted); font-size: .92rem; margin: 0 0 1.5rem; flex: 1; } .service-tile__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); color: var(--accent); transition: background .25s, color .25s, transform .3s, border-color .25s; } .service-tile__arrow .icon { width: 18px; height: 18px; } .service-tile:hover .service-tile__arrow { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(4px); } @media (max-width: 575.98px) { .service-marquee .marquee__track { --slider-speed: 22s; gap: 1rem; } .service-tile { width: min(280px, 78vw); padding: 1.6rem 1.4rem 1.4rem; min-height: 220px; } .service-tile__num { top: 1.4rem; right: 1.4rem; } } /* Manual prev/next controls for the services marquee — same round-arrow treatment as the events carousel. Clicking either one hands the track over to JS (see initServiceMarqueeNav), which stops the automatic scroll and pages it by one tile per click instead. */ /* Parked in the section's bottom-right corner: it's the last block in the column, and the column's right edge is the container's, so flex-end lands the pair flush with the section's content edge. */ .service-marquee__nav { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 1rem; } .service-marquee__arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); } .service-marquee__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); } .service-marquee__arrow .icon { width: 18px; height: 18px; } .service-marquee.is-manual { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .service-marquee.is-manual::-webkit-scrollbar { display: none; } .service-marquee.is-manual .marquee__track { animation: none; transform: none; } /* Homepage "layered testimonial deck" — scoped entirely to .stories--deck so the shared .stories / .story-card rules above (also used by success-stories.html's own carousel and grid) stay untouched. Three fixed slots (prev / active / next); JS re-renders each slot's content from the STORIES data array on navigate, so the DOM never has to be physically reshuffled. The card itself (position, size, gradient, colours, shapes, arrows) never moves or resizes — only the inner .story-deck__content fades/slides/scales when the story changes. */ .stories--deck .stories__watermark { display: none; } .stories--deck .section-head h2 { line-height: 1.15; } .story-deck { position: relative; max-width: 1000px; margin: 0 auto; padding: 1.5rem 0 .5rem; } .story-deck__shape { position: absolute; border-radius: 50%; border: 1px solid rgba(26, 154, 140, .28); pointer-events: none; z-index: 0; } .story-deck__shape--a { width: 90px; height: 90px; top: -10px; left: 2%; } .story-deck__shape--b { width: 46px; height: 46px; bottom: 6%; right: 4%; border-color: rgba(7, 87, 154, .25); } .story-deck__curve { position: absolute; top: 8%; right: -2%; width: 220px; height: 110px; opacity: .35; pointer-events: none; z-index: 0; } .story-deck__track { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.7fr 1fr; align-items: stretch; } .story-deck__card { position: relative; border-radius: var(--radius-lg); padding: 2.25rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; transition: transform .6s var(--ease), opacity .55s var(--ease), filter .55s var(--ease), box-shadow .55s var(--ease); } .story-deck__card--prev, .story-deck__card--next { background: rgba(255, 255, 255, .7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid var(--line); color: var(--muted); cursor: pointer; transform: scale(.8); opacity: .55; filter: blur(1.5px); box-shadow: 0 20px 36px -28px rgba(10, 37, 64, .25); z-index: 1; max-height: 340px; } .story-deck__card--prev { margin-right: -2.75rem; } .story-deck__card--next { margin-left: -2.75rem; } .story-deck__card--prev:hover, .story-deck__card--next:hover { opacity: .8; filter: blur(.5px); transform: scale(.84) translateY(-3px); } .story-deck__card--prev .story-deck__cta, .story-deck__card--next .story-deck__cta { display: none; } .story-deck__card--active { background: linear-gradient(150deg, var(--black) 0%, var(--primary) 55%, var(--brand-2) 100%); color: #fff; z-index: 2; box-shadow: 0 42px 70px -28px rgba(10, 37, 64, .5); padding: 3rem 2.75rem 2.75rem; } /* Content swap: fades/slides/scales in place, independent of the card's own position, size, background and shadow (all of which stay exactly as they are, untouched, during a transition). */ .story-deck__content { width: 100%; display: flex; flex-direction: column; align-items: center; transition: opacity .32s var(--ease), transform .32s var(--ease); } .story-deck__track.is-swapping .story-deck__content { opacity: 0; transform: translateY(-10px) scale(.97); } .story-deck__quote-mark { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 1; font-weight: 700; color: #fff; opacity: .14; pointer-events: none; } .story-deck__card--prev .story-deck__quote-mark, .story-deck__card--next .story-deck__quote-mark { color: var(--brand-2); opacity: .18; } .story-deck__avatar { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; background: rgba(255, 255, 255, .16); color: #fff; border: 2px solid rgba(255, 255, 255, .5); } .story-deck__card--prev .story-deck__avatar, .story-deck__card--next .story-deck__avatar { background: var(--surface); color: var(--muted); border-color: var(--line); width: 52px; height: 52px; } .story-deck__avatar .icon { width: 26px; height: 26px; } .story-deck__card--prev .story-deck__avatar .icon, .story-deck__card--next .story-deck__avatar .icon { width: 22px; height: 22px; } .story-deck__card h3 { position: relative; z-index: 1; margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 600; color: inherit; } .story-deck__role { position: relative; z-index: 1; margin: 0 0 1.1rem; font-size: .85rem; color: rgba(255, 255, 255, .78); } .story-deck__card--prev .story-deck__role, .story-deck__card--next .story-deck__role { color: var(--muted); } .story-deck__card blockquote { position: relative; z-index: 1; margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.65; color: inherit; } .story-deck__card--prev blockquote, .story-deck__card--next blockquote { font-size: .92rem; -webkit-line-clamp: 4; line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .story-deck__card--active blockquote { max-width: 480px; } .story-deck__tag { position: relative; z-index: 1; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; margin-bottom: 1.4rem; } .story-deck__card--prev .story-deck__tag, .story-deck__card--next .story-deck__tag { background: #fff; } .story-deck__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; color: #fff; } .story-deck__cta .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); } .story-deck__cta:hover .icon { transform: translateX(3px); } .story-deck__prev-btn, .story-deck__next-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); } .story-deck__prev-btn { left: -6px; } .story-deck__next-btn { right: -6px; } .story-deck__prev-btn:hover, .story-deck__next-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .story-deck__prev-btn .icon, .story-deck__next-btn .icon { width: 18px; height: 18px; } /* Entrance: driven by the generic [data-reveal] system (.story-deck carries that attribute) */ @media (max-width: 991.98px) { .story-deck__track { grid-template-columns: .55fr 2fr .55fr; } .story-deck__card--prev, .story-deck__card--next { padding: 1.6rem 1rem; max-height: 300px; } .story-deck__card--prev blockquote, .story-deck__card--next blockquote, .story-deck__card--prev .story-deck__role, .story-deck__card--next .story-deck__role, .story-deck__card--prev .story-deck__tag, .story-deck__card--next .story-deck__tag, .story-deck__card--prev h3, .story-deck__card--next h3 { display: none; } .story-deck__card--active { padding: 2.5rem 1.75rem 2.25rem; } .story-deck__prev-btn { left: -4px; } .story-deck__next-btn { right: -4px; } } @media (max-width: 767.98px) { .story-deck__track { display: block; position: relative; min-height: 420px; } .story-deck__card { position: absolute; inset: 0; width: 100%; } .story-deck__card--prev, .story-deck__card--next { z-index: 0; opacity: .35; transform: scale(.86) translateX(0); max-height: none; margin: 0; pointer-events: none; } .story-deck__card--prev { transform: scale(.9) translateX(-14px); } .story-deck__card--next { transform: scale(.9) translateX(14px); } .story-deck__card--active { position: relative; padding: 2.75rem 1.6rem 2.25rem; } /* Arrows drop below the deck here, so the deck reserves the room for them itself. */ .story-deck { padding-bottom: 4.5rem; } .story-deck__prev-btn, .story-deck__next-btn { top: auto; bottom: .75rem; transform: none; } .story-deck__prev-btn { left: 38%; } .story-deck__next-btn { right: 38%; } } /* ---------- Listing pages (Opportunities / Services): timeline, icon, content, arrow, image ---------- Scoped to .row-list--glyph so the homepage's own row-list (Services section) is untouched. Clean white background, no decorative texture — the centred numbered timeline is the whole visual, deliberately unadorned. */ .listing { position: relative; } .listing-accent { color: var(--brand-2); } .listing__list { position: relative; } /* Vertical timeline: a brand-toned gradient line threading through a small node per row, drawn downward as the list scrolls into view — deliberately not the dotted line the Journey roadmap uses on the homepage. */ .listing__list::after { content: ""; position: absolute; left: 2.3rem; top: 2.6rem; bottom: 2.6rem; width: 2px; background: linear-gradient(180deg, var(--brand-2) 0%, var(--primary-2) 50%, var(--brand-2) 100%); opacity: .6; transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease); } .listing__list.is-visible::after { transform: scaleY(1); } .listing__list > li { position: relative; } .listing__list > li::before { content: ""; position: absolute; left: 2.3rem; top: 50%; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--primary-2); box-shadow: 0 0 0 4px #fff; transform: translate(-50%, -50%) scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s var(--ease); } li[data-reveal].is-visible::before { transform: translate(-50%, -50%) scale(1); } .listing__list > li.is-active::before { background: var(--brand-2); transform: translate(-50%, -50%) scale(1.35); } /* Per-row accent colour, cycled — reused for the icon, number and timeline node so the whole list reads as colourful without any single flat brand wash. */ .listing__list > li:nth-child(3n+1) { --accent: var(--primary); --accent-2: var(--primary-2); } .listing__list > li:nth-child(3n+2) { --accent: var(--brand-2); --accent-2: #0F6B5F; } .listing__list > li:nth-child(3n) { --accent: var(--black-2); --accent-2: var(--black); } .row-list--glyph .row-item { grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: .75rem 1.5rem; padding: 1.25rem 1rem; } /* Entrepreneurship Opportunities: icon only, no left-hand number/timeline */ .row-list--icon-only .row-item { grid-template-columns: auto 1fr auto auto; } .listing__list.row-list--icon-only::after { display: none; } .listing__list.row-list--icon-only > li::before { display: none; } .row-list--glyph .row-item:hover .row-item__num, .listing__list > li.is-active .row-item__num { color: var(--accent, var(--primary)); } /* Icon: its own circular container, independent of the image panel */ .row-item__glyph { width: 68px; height: 68px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(26, 154, 140, .08); border: 1.5px solid rgba(26, 154, 140, .3); color: var(--accent, var(--brand-2)); opacity: 0; transform: scale(.85); transition: opacity .55s var(--ease), transform .55s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .row-item__glyph .icon { width: 26px; height: 26px; transition: transform .3s ease-out; } li[data-reveal].is-visible .row-item__glyph { opacity: 1; transform: scale(1); } .row-item:hover .row-item__glyph, .listing__list > li.is-active .row-item__glyph { background: var(--accent, var(--brand-2)); border-color: var(--accent, var(--brand-2)); color: #fff; transform: scale(1.06); box-shadow: 0 14px 28px -12px rgba(10, 37, 64, .45), 0 0 0 6px rgba(26, 154, 140, .08); transition: transform .3s ease-out, background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .row-item:hover .row-item__glyph .icon, .listing__list > li.is-active .row-item__glyph .icon { transform: translateY(-2px); } /* "Learn more" link (Entrepreneurship Opportunities): text + arrow, no filled button */ .row-item__more { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; } .row-item__more-text { font-size: .95rem; font-weight: 600; color: var(--black); opacity: 0; transition: transform .3s var(--ease), color .3s var(--ease), opacity .5s var(--ease) 100ms; } li[data-reveal].is-visible .row-item__more-text { opacity: 1; } .row-item:hover .row-item__more-text { transform: translateX(4px); color: var(--primary); } /* Arrow circle — used bare on Services, and inside .row-item__more on Opportunities. Scoped to .row-list--glyph so the homepage's own plain row-list (Services section) keeps its own arrow. */ .row-list--glyph .row-item__icon { width: 52px; height: 52px; border: 1.5px solid rgba(7, 87, 154, .25); background: #fff; color: var(--black); opacity: 0; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), opacity .5s var(--ease) 100ms; } .row-list--glyph li[data-reveal].is-visible .row-item__icon { opacity: 1; } .row-list--glyph .row-item__icon .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); } .row-list--glyph .row-item:hover .row-item__icon { background: var(--brand-2); color: #fff; border-color: var(--brand-2); transform: translateX(2px); box-shadow: 0 10px 22px -10px rgba(26, 154, 140, .6); } .row-list--glyph .row-item:hover .row-item__icon .icon { transform: translateX(4px); } /* Content: title + description fade/slide in together, independent of the icon and image — entrance starts ~60ms after the icon for a subtle left-to-right cascade within each row */ .row-list--glyph .row-item > div { opacity: 0; transform: translateX(15px); transition: opacity .55s var(--ease) 60ms, transform .45s cubic-bezier(.22, .61, .36, 1) 60ms; } .row-list--glyph li[data-reveal].is-visible .row-item > div { opacity: 1; transform: translateX(0); } .row-list--glyph .row-item:hover > div { transition: transform .45s cubic-bezier(.22, .61, .36, 1); } /* Image panel: a CSS mask (elliptical, so the fade boundary is genuinely curved, not a straight diagonal) dissolves the left edge into the white row — right/outer corners stay rounded, left edge has no hard border at all. Deliberately not a photo card. */ .row-item__image { width: 300px; height: 110px; flex: none; position: relative; overflow: hidden; border-radius: 0 20px 20px 0; -webkit-mask-image: radial-gradient(ellipse 78% 100% at 72% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 78% 100% at 72% 50%, #000 55%, transparent 100%); opacity: 0; transform: translateX(20px) scale(.98); transition: opacity .55s var(--ease) 100ms, transform .55s var(--ease) 100ms; } li[data-reveal].is-visible .row-item__image { opacity: 1; transform: translateX(0) scale(1); } .row-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease-out; } .row-item:hover .row-item__image img { transform: scale(1.02); } @media (max-width: 1199.98px) { .row-item__image { width: 210px; height: 96px; } } @media (max-width: 991.98px) { .row-list--glyph .row-item { grid-template-columns: auto auto 1fr auto; } .row-list--icon-only .row-item { grid-template-columns: auto 1fr auto; } .row-item__image { grid-column: 1 / -1; width: 100%; height: 140px; margin-top: .5rem; border-radius: 20px; -webkit-mask-image: none; mask-image: none; } } @media (max-width: 575.98px) { .row-item__glyph { width: 52px; height: 52px; } .row-item__glyph .icon { width: 20px; height: 20px; } .row-item__image { height: 160px; } .row-item__more-text { display: none; } .listing__list::after, .listing__list > li::before { left: 1.55rem; } } .tag { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 500; background: #fff; color: var(--text); border: 1px solid var(--line); } .tag--teal { color: var(--brand-2-ink); border-color: rgba(26, 154, 140, .35); } .tag--navy { background: var(--black); color: #fff; border-color: var(--black); } .tag--white { background: #fff; color: var(--ink); } /* Grey CTA strip */ /* Closing CTA under the stories section. Deliberately a dark brand band rather than another pale panel: it's the last thing in the section, so it should read as a decisive action, not as more content. Same navy/teal language as .cta-band. */ /* Full-bleed: the band is its own

, so the colour runs edge to edge and only the content is held in the container. Vertical padding comes from .section--tight. */ .strip-cta { overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--black) 0%, #0D3358 52%, var(--primary) 100%); } .strip-cta__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; } /* Teal bloom off the right edge, picking up the logo accent */ .strip-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 120% at 88% 50%, rgba(26, 154, 140, .34) 0%, rgba(26, 154, 140, 0) 70%); } /* Faint arc clipped by the band's top edge — scaled up now that the band runs full width. */ .strip-cta::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 280px; height: 280px; border-radius: 50%; top: -128px; right: 7%; border: 1px solid rgba(255, 255, 255, .1); } .strip-cta__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #4FC3B5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); } .strip-cta__icon .icon { width: 24px; height: 24px; } .strip-cta__copy { flex: 1 1 300px; min-width: 0; } .strip-cta__lead { margin: 0; color: #fff; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; font-size: clamp(1.15rem, 2vw, 1.4rem); } .strip-cta__sub { margin: .4rem 0 0; color: var(--on-dark); font-size: var(--font-small); } .strip-cta__tel { color: #4FC3B5; font-weight: 600; white-space: nowrap; } .strip-cta__tel:hover { color: #fff; } .strip-cta .btn-group { flex: none; } .strip-cta .btn--white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); } .strip-cta .btn--white:hover { background: #fff; color: var(--black); border-color: #fff; } /* Tablets and phones: stacked and centred */ @media (max-width: 991.98px) { .strip-cta__inner { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .strip-cta::after { display: none; } /* In a column the desktop flex-basis (300px) turns into a height, leaving an empty gap under the copy — let the copy size to its text and span the full width instead. */ .strip-cta__copy { flex: none; width: 100%; } .strip-cta .btn-group { justify-content: center; } } @media (max-width: 767.98px) { .strip-cta__icon { width: 48px; height: 48px; } .strip-cta .btn-group { width: 100%; flex-direction: column; gap: .65rem; } .strip-cta .btn { width: 100%; justify-content: center; } } /* ---------- 11. Journey roadmap (reference: bizacharya-omega) ---------- */ .journey { position: relative; overflow: hidden; isolation: isolate; background: #fff; } .journey .section-head p { max-width: 720px; } .journey .container { position: relative; z-index: 1; } .roadmap__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3.5rem); } .roadmap__cta .btn { box-shadow: 0 10px 24px -12px rgba(1, 82, 147, .6); } /* Bizacharya mark (logo without the wordmark) as a faint, curated watermark — decorative only. Opt-in per section via data-watermark="" (see initSectionWatermarks() in main.js), so it only sits in open white space, never behind forms, photo rows or dense copy. The layer fills the section and clips the mark, so it can bleed off an edge and drift with parallax without the section needing overflow:hidden. Upright by default; the Journey corner mark is rotated (via `rotate`, which composes with the parallax transform). --wm-y is the placement's own vertical anchor; --wm-shift is the parallax offset from JS. aspect-ratio matches the source file (225×241) so there is no layout jump on load. */ .section-watermark { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; } .section-watermark__img { position: absolute; height: auto; aspect-ratio: 225 / 241; opacity: .05; transform: translate3d(0, calc(var(--wm-y, 0%) + var(--wm-shift, 0px)), 0); transition: transform .15s linear; } /* Large, cropped into the top-right corner — for sections with a centred heading */ .section-watermark--corner-tr .section-watermark__img { top: -19%; right: -13%; width: clamp(240px, 28vw, 460px); rotate: 314deg; } /* Medium, rotated, cropped into the top-left corner (What we offer) */ .section-watermark--corner-tl .section-watermark__img { top: -9%; left: -6%; width: clamp(150px, 28vw, 340px); rotate: 133deg; } /* Large, bleeding off the left edge — fills the empty side of a centred timeline / list */ .section-watermark--side-l .section-watermark__img { top: 50%; left: -9%; --wm-y: -50%; width: clamp(260px, 30vw, 480px); opacity: .045; } /* Medium, bleeding off the right edge — beside a narrow centred column */ .section-watermark--side-r .section-watermark__img { top: 50%; right: -3%; --wm-y: -50%; width: clamp(200px, 19vw, 320px); } /* Phones: content runs full width, so side / bottom marks would sit behind text — keep only the corner marks, smaller and further cropped, and leave the rest out. */ @media (max-width: 767.98px) { .section-watermark--corner-tl, .section-watermark--side-r { display: none; } .section-watermark--corner-tr .section-watermark__img { top: -3%; right: -18%; width: 190px; opacity: .04; } .section-watermark--side-l .section-watermark__img { top: -2%; left: auto; right: -18%; --wm-y: 0%; width: 190px; opacity: .04; } } @media (prefers-reduced-motion: reduce) { .section-watermark__img { transition: none; } } /* ---------- Journey map (individual circular milestones, real photos) ---------- */ .journey-map { position: relative; } .journey-map__list { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.4rem; } .journey-stage { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 1.25rem; } /* connecting line: subtle static track + brand-blue dotted progress, advanced step by step via --progress (0-1) */ .journey-map__list::before, .journey-map__list::after { content: ""; position: absolute; left: 34px; top: 34px; bottom: 34px; width: 0; z-index: 0; border-left: 2px dotted var(--line); } /* Revealed with clip-path rather than scaleY: scaling a dotted border stretches the dots as it grows, which reads as a wobble. Clipping slides a clean edge along an undistorted line. The duration matches one full stage cycle in main.js, so the line travels continuously from node to node instead of jumping and waiting — hence linear, not eased. */ .journey-map__list::after { border-left-color: var(--primary); clip-path: inset(0 0 calc((1 - var(--progress, 0)) * 100%) 0); transition: clip-path 1.1s linear; } .journey-map__list.no-anim::after { transition: none; } .journey-stage__photo { position: relative; z-index: 1; flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: linear-gradient(155deg, var(--black) 0%, var(--primary) 100%); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px rgba(10, 37, 64, .3); opacity: 0; transform: scale(.88); transition: opacity .38s var(--ease), transform .38s var(--ease), box-shadow .35s var(--ease); } .journey-stage.is-in .journey-stage__photo { opacity: 1; transform: scale(1); } .journey-stage[data-tone="b"] .journey-stage__photo { background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); } /* Image sits ready just under the number, and gently settles into place once revealed. */ .journey-stage__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .8s var(--ease); } .journey-stage.show-image .journey-stage__photo img { transform: scale(1); } /* Very subtle brand-navy scrim so mixed stock-photo tones read as one consistent, on-brand set. */ .journey-stage__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(155deg, rgba(10, 37, 64, .3) 0%, rgba(10, 37, 64, 0) 60%); } /* Number treatment: fills the circle first, then dissolves to reveal the image beneath it */ .journey-stage__num { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--black) 0%, var(--primary) 100%); color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; opacity: 0; transform: scale(.86); transition: opacity .3s var(--ease), transform .3s var(--ease); } .journey-stage[data-tone="b"] .journey-stage__num { background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); } .journey-stage.is-in .journey-stage__num { opacity: 1; transform: scale(1); } .journey-stage.show-image .journey-stage__num { opacity: 0; transform: scale(1.12); transition: opacity .34s var(--ease), transform .34s var(--ease); } /* Currently-animating step: same subtle ring used on manual hover, so it reads as "connected" to the line */ .journey-stage.is-current .journey-stage__photo, .journey-stage__photo:hover { box-shadow: 0 0 0 1px var(--line), 0 0 0 5px rgba(7, 87, 154, .16), 0 14px 28px -14px rgba(10, 37, 64, .38); } .journey-stage.show-image .journey-stage__photo:hover img { transform: scale(1.06); } .journey-stage__body { padding-top: .2rem; opacity: 0; transform: translateY(12px); /* Trails the circle slightly so each stage reads as one settling motion, not two simultaneous ones. */ transition: opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s; } .journey-stage.is-in .journey-stage__body { opacity: 1; transform: none; } .journey-stage__body h3 { font-size: 1.08rem; font-weight: 700; color: var(--black); margin-bottom: .22rem; letter-spacing: -0.01em; } .journey-stage__body p { color: #5C5C5C; font-size: .89rem; margin: 0; line-height: 1.5; } @media (min-width: 768px) and (max-width: 1199.98px) { .journey-map__list { grid-template-columns: repeat(3, 1fr); gap: 2.6rem 1.6rem; } .journey-map__list::before, .journey-map__list::after { display: none; } .journey-stage { flex-direction: column; align-items: center; text-align: center; gap: .9rem; } .journey-stage__photo { width: 92px; height: 92px; } .journey-stage__num { font-size: 1.6rem; } } @media (min-width: 1200px) { .journey-map__list { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; padding-top: 4px; } .journey-map__list::before, .journey-map__list::after { left: calc(100% / 12); right: calc(100% / 12); top: 58px; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dotted var(--line); } .journey-map__list::after { border-top-color: var(--primary); clip-path: inset(0 calc((1 - var(--progress, 0)) * 100%) 0 0); } .journey-stage { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .journey-stage__photo { width: 116px; height: 116px; } .journey-stage__num { font-size: 2rem; } .journey-stage__body p { max-width: 168px; } } /* ---------- Upcoming events: a perforated "ticket" pair — colour-blocked date stub, a punched seam, and a small circular photo stamp. Deliberately not a tile/card grid, and a different treatment from the earlier layered-stack version. Each event's fields (image/category/day/ monthyear/time/title/description/location/cta) are the only things to edit. Presented as a Swiper carousel (initCarousels() in main.js): one ticket active at a time, swipeable, with arrow buttons and pagination dots — see .events-carousel* below. ---------- */ .events { position: relative; overflow-x: hidden; isolation: isolate; } .events::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05; background-image: url("../img/events-bg-full.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .events .container { position: relative; z-index: 1; } .events-carousel { position: relative; max-width: 760px; margin: 0 auto; padding-top: .5rem; } .events-carousel .swiper { overflow: hidden; } .events-carousel .swiper-slide { height: auto; padding: 10px 4px 30px; } .ticket { position: relative; display: flex; width: 100%; height: 100%; min-height: 290px; background: #fff; border-radius: 20px; box-shadow: 0 18px 40px -22px rgba(10, 37, 64, .3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ticket:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -20px rgba(10, 37, 64, .38); z-index: 2; } /* Stub: colour-blocked date column, "torn" away from the body by a perforated seam */ .ticket__stub { position: relative; flex: none; width: 124px; padding: 2rem .75rem; border-radius: 20px 0 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: linear-gradient(165deg, var(--primary) 0%, var(--primary-2) 100%); } .swiper-slide:nth-child(2) .ticket__stub { background: linear-gradient(165deg, var(--brand-2) 0%, #0F6B5F 100%); } .ticket__month { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .ticket__day { font-size: 2.5rem; font-weight: 800; line-height: 1; margin: .2rem 0; } .ticket__year { font-size: .68rem; opacity: .7; margin-bottom: .7rem; } .ticket__tag { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .32rem .55rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; } /* Perforated seam: dashed line with two "punched" notches matching the section background */ .ticket__seam { position: relative; flex: none; width: 0; border-left: 2px dashed rgba(255, 255, 255, .55); } .ticket__seam::before, .ticket__seam::after { content: ""; position: absolute; left: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); transform: translateX(-50%); } .ticket__seam::before { top: -11px; } .ticket__seam::after { bottom: -11px; } .ticket__body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.9rem 1.7rem 1.9rem 1.9rem; } .ticket__photo { position: absolute; top: 1.4rem; right: 1.4rem; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); box-shadow: 0 8px 18px -8px rgba(10, 37, 64, .4); transition: transform .4s var(--ease); } .ticket__photo img { width: 100%; height: 100%; object-fit: cover; } .ticket:hover .ticket__photo { transform: scale(1.08); } .ticket__time { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-size: .78rem; color: var(--muted); } .ticket__time .icon { width: 13px; height: 13px; flex: none; } .ticket__body h3 { font-size: 1.22rem; font-weight: 700; color: var(--black); letter-spacing: -0.01em; margin: 0 3.6rem .55rem 0; } .ticket__desc { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1.3rem; } .ticket__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); } .ticket__loc { display: inline-flex; align-items: center; gap: .35rem; font-size: .83rem; color: var(--text); font-weight: 500; } .ticket__loc .icon { width: 14px; height: 14px; color: var(--brand-2); flex: none; } .ticket__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .88rem; color: var(--primary); white-space: nowrap; } .ticket__cta .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); } .ticket:hover .ticket__cta { color: var(--black); } .ticket:hover .ticket__cta .icon { transform: translateX(4px); } .event-list__more { text-align: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); width: 100%; } /* Carousel controls: arrow buttons either side of the pagination dots */ .events-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: .5rem; } .events-carousel__arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); } .events-carousel__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); } .events-carousel__arrow .icon { width: 18px; height: 18px; } .events-carousel__dots { display: flex; align-items: center; gap: .5rem; } .events-carousel__dots .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--line); opacity: 1; margin: 0; cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); } .events-carousel__dots .swiper-pagination-bullet-active { background: var(--brand-2); transform: scale(1.35); } @media (max-width: 575.98px) { .ticket { flex-direction: column; } .ticket__stub { width: 100%; flex-direction: row; justify-content: center; gap: .6rem; border-radius: 20px 20px 0 0; padding: .9rem; } .ticket__month, .ticket__year { display: none; } .ticket__day { font-size: 1.4rem; margin: 0; } .ticket__seam { display: none; } } /* ---------- 12. Vision & Mission: one connected infographic — circular visual, drawn SVG connectors and two panels. Deliberately not "[Vision Card] [Mission Card]": the panels only make sense attached to the circle through the connector lines. ---------- */ .vm2-sec { position: relative; overflow: hidden; } .vm2-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(38% 55% at 100% 12%, rgba(7, 87, 154, .05) 0%, rgba(7, 87, 154, 0) 70%), radial-gradient(34% 48% at 4% 96%, rgba(26, 154, 140, .05) 0%, rgba(26, 154, 140, 0) 70%); } /* Ring graphic in the top-left corner. It goes on ::after because ::before already carries this section's colour glow, and at z-index 0 it stays under .container (z-index 1) so no content is covered. back_curcle.jpg has a solid white background rather than an alpha channel, so it is composited with multiply: white leaves the pale surface untouched and only the ring strokes darken it. Sized by width with the file's own 896:1223 ratio so it scales without distorting, and the section's overflow:hidden crops whatever runs past the corner. */ .vm2-sec::after { content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; width: clamp(340px, 44vw, 820px); aspect-ratio: 896 / 1223; background-image: url("../img/back_curcle.jpg"); background-repeat: no-repeat; background-position: left top; background-size: contain; mix-blend-mode: multiply; /* Settles in from off the corner: scaled down, nudged out and rotated slightly, easing back to rest. transform-origin is the corner it is anchored to, so it grows out of that corner rather than drifting across the section. */ opacity: 0; transform-origin: left top; animation: vm2-ring-in 1.6s var(--ease) .2s forwards; } @keyframes vm2-ring-in { from { opacity: 0; transform: translate(-14%, -10%) scale(.82) rotate(-8deg); } to { opacity: 1; transform: none; } } .vm2-sec .container { position: relative; z-index: 1; } .vm2-accent { color: var(--brand-2); } .vm2 { display: grid; grid-template-columns: minmax(240px, 420px) 100px minmax(280px, 1fr); align-items: center; gap: 0 .5rem; max-width: 1080px; margin: 0 auto; } /* --- Left: circular visual --- */ .vm2__visual { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin: 0 auto; justify-self: center; opacity: 0; transform: scale(.85); transition: opacity .8s var(--ease), transform .8s var(--ease); } .vm2.is-in .vm2__visual { opacity: 1; transform: scale(1); } @media (min-width: 1200px) { .vm2__visual { width: 460px; } } .vm2__orbit { position: absolute; inset: -26px; width: calc(100% + 52px); height: calc(100% + 52px); pointer-events: none; } .vm2__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 5px #fff; opacity: 0; transform: scale(0); transition: opacity .5s var(--ease) .9s, transform .5s var(--ease) .9s; } .vm2.is-in .vm2__dot { opacity: 1; transform: scale(1); } .vm2__dot--teal { top: 3%; right: 12%; background: var(--brand-2); } .vm2__dot--blue { bottom: 9%; left: 1%; background: var(--primary); } .vm2__circle { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff; border: 6px solid #fff; box-shadow: 0 30px 70px -30px rgba(10, 37, 64, .4), 0 0 0 1px var(--line); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .vm2__seg { position: relative; overflow: hidden; opacity: 0; transform: scale(1.12); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .13s); } .vm2.is-in .vm2__seg { opacity: 1; transform: scale(1); } .vm2__seg img { width: 100%; height: 100%; object-fit: cover; display: block; } .vm2__seg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7, 87, 154, .22), rgba(26, 154, 140, .16)); mix-blend-mode: multiply; opacity: .55; } .vm2__seg--1 { grid-column: 1 / -1; grid-row: 1; border-bottom: 3px solid #fff; } .vm2__seg--2 { grid-column: 1; grid-row: 2; border-bottom: 3px solid #fff; border-right: 1.5px solid #fff; } .vm2__seg--3 { grid-column: 2; grid-row: 2; border-bottom: 3px solid #fff; } .vm2__seg--4 { grid-column: 1 / -1; grid-row: 3; } .vm2__seg--empty { background: linear-gradient(150deg, var(--surface), #E4EEF6); } .vm2__seg--empty img { display: none; } .vm2__core { position: absolute; inset: 30%; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .12rem; padding: .5rem; z-index: 2; box-shadow: 0 16px 34px -16px rgba(10, 37, 64, .35); opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease) .75s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .75s; } .vm2.is-in .vm2__core { opacity: 1; transform: scale(1); } .vm2__core-line { font-size: clamp(.68rem, 1.25vw, .82rem); font-weight: 700; letter-spacing: .02em; color: var(--black); line-height: 1.3; text-transform: uppercase; } .vm2__core-line--accent { color: var(--brand-2-ink); } /* --- Center: drawn connectors (desktop) --- */ .vm2__paths { display: flex; flex-direction: column; justify-content: center; gap: 2rem; height: 100%; } .vm2__connector { width: 100%; height: 190px; display: block; overflow: visible; } .vm2__connector-line { stroke-dasharray: var(--len, 260); stroke-dashoffset: var(--len, 260); transition: stroke-dashoffset .85s var(--ease); } .vm2.is-in .vm2__connector--vision .vm2__connector-line { transition-delay: 1.05s; } .vm2.is-in .vm2__connector--mission .vm2__connector-line { transition-delay: 1.55s; } .vm2.is-in .vm2__connector-line { stroke-dashoffset: 0; } .vm2__connector-node { opacity: 0; transition: opacity .3s var(--ease); } .vm2.is-in .vm2__connector--vision .vm2__connector-node { transition-delay: .95s; } .vm2.is-in .vm2__connector--mission .vm2__connector-node { transition-delay: 1.45s; } .vm2.is-in .vm2__connector-node { opacity: 1; } .vm2__mid-connector { display: none; } /* --- Right: panels --- */ .vm2__panels { display: flex; flex-direction: column; justify-content: center; gap: 2rem; } .vm2__panel { position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 2rem 2.25rem; border-radius: 26px; border: 1.5px solid transparent; opacity: 0; transform: translateX(40px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } .vm2.is-in .vm2__panel--vision { transition-delay: 1.2s; opacity: 1; transform: translateX(0); } .vm2.is-in .vm2__panel--mission { transition-delay: 1.65s; opacity: 1; transform: translateX(0); } .vm2__panel--vision { background: rgba(26, 154, 140, .07); } .vm2__panel--mission { background: rgba(7, 87, 154, .06); } .vm2__panel:hover { box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .3); } .vm2.is-in .vm2__panel--vision:hover { transform: translateX(0) translateY(-4px); } .vm2.is-in .vm2__panel--mission:hover { transform: translateX(0) translateY(-4px); } .vm2__panel--vision:hover { border-color: rgba(26, 154, 140, .35); background: rgba(26, 154, 140, .11); } .vm2__panel--mission:hover { border-color: rgba(7, 87, 154, .3); background: rgba(7, 87, 154, .1); } .vm2__panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .vm2__panel h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.02em; } .vm2__underline { display: block; width: 42px; height: 3px; border-radius: 2px; background: var(--brand-2); } .vm2__panel--mission .vm2__underline { background: var(--primary); } .vm2__panel p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--text); max-width: 46ch; } .vm2__icon { flex: none; width: 58px; height: 58px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-2); box-shadow: 0 10px 24px -12px rgba(10, 37, 64, .3); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .vm2__panel--mission .vm2__icon { color: var(--primary); } .vm2__icon .icon { width: 26px; height: 26px; } .vm2__panel:hover .vm2__icon { transform: scale(1.08) translate(2px, -2px); } /* --- Responsive: mobile swaps the drawn connectors for a simple vertical line + dots --- */ @media (max-width: 991.98px) { .vm2 { grid-template-columns: 1fr; justify-items: center; gap: 0; max-width: 520px; } .vm2__visual { width: min(320px, 78vw); margin-bottom: 1.75rem; } .vm2__paths { display: none; } .vm2__panels { width: 100%; gap: 0; } .vm2__panel { width: 100%; border-radius: 20px; transform: translateY(30px); } .vm2.is-in .vm2__panel--vision, .vm2.is-in .vm2__panel--mission { transform: translateY(0); } .vm2.is-in .vm2__panel--vision:hover, .vm2.is-in .vm2__panel--mission:hover { transform: translateY(-4px); } .vm2__mid-connector { display: block; position: relative; width: 100%; height: 2.5rem; flex: none; } .vm2__mid-connector::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); } .vm2__mid-connector::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--primary); box-shadow: 0 0 0 5px var(--surface); } /* echoes the same vertical line above the Vision panel, running up into the circle */ .vm2__visual::after { content: ""; position: absolute; left: 50%; bottom: -1.75rem; width: 2px; height: 1.75rem; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); } .vm2__visual::before { content: ""; position: absolute; left: 50%; bottom: -1.85rem; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, 50%); background: var(--brand-2); box-shadow: 0 0 0 5px var(--surface); z-index: 1; } } @media (max-width: 575.98px) { .vm2__panel { padding: 1.6rem 1.5rem; } .vm2__icon { width: 48px; height: 48px; } .vm2__icon .icon { width: 22px; height: 22px; } } /* ---------- 13. Success stories carousel ---------- */ .stories { position: relative; overflow: hidden; background: #fff; } .stories::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 12% 20%, rgba(26, 154, 140, .12) 0%, rgba(26, 154, 140, 0) 70%), radial-gradient(45% 55% at 88% 80%, rgba(7, 87, 154, .12) 0%, rgba(7, 87, 154, 0) 70%); } .stories .container { position: relative; } .stories__stage { position: relative; } .stories__watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; user-select: none; font-size: clamp(6rem, 22vw, 20rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(10, 37, 64, .08); } .stories .swiper { position: relative; z-index: 1; overflow: hidden; padding: 12px 0 28px; } .stories .swiper-slide { width: 440px; max-width: 88vw; height: auto; transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .7s, filter .7s; transform: scale(.88) translateY(10px); opacity: .5; filter: saturate(.6); } .stories .swiper-slide-active { transform: scale(1) translateY(0); opacity: 1; filter: none; } .story-card { position: relative; height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 2.1rem 2rem 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: background .5s, border-color .5s, box-shadow .7s cubic-bezier(.22, .61, .36, 1), transform .3s; } .story-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--brand-2)); opacity: 0; transition: opacity .5s; } .story-card__num { position: absolute; left: 1.6rem; top: 1.4rem; font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(10, 37, 64, .16); pointer-events: none; transition: -webkit-text-stroke-color .5s; } .story-card__mark { position: absolute; top: .4rem; right: 1.25rem; font-family: Georgia, "Times New Roman", serif; font-size: 7.5rem; line-height: 1; font-weight: 700; color: var(--brand-2); opacity: .12; pointer-events: none; transition: opacity .5s, transform .7s cubic-bezier(.22, .61, .36, 1); } .story-card__tag { align-self: flex-start; margin-top: 2.6rem; color: var(--brand-2-ink); border-color: rgba(26, 154, 140, .35); background: rgba(26, 154, 140, .06); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .story-card h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .story-card blockquote { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .story-card__foot { display: flex; align-items: center; gap: .9rem; padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: auto; } .story-card__foot .story-card__avatar { position: relative; top: auto; left: auto; transform: none; width: 52px; height: 52px; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); } .story-card__foot strong { display: block; font-weight: 600; font-size: .95rem; color: var(--black); line-height: 1.3; } .story-card__name { display: block; font-size: .82rem; color: var(--muted); margin-top: .15rem; } .swiper-slide-active .story-card { background: linear-gradient(160deg, #0A2540 0%, #0B3766 100%); border-color: transparent; box-shadow: 0 36px 70px -34px rgba(10, 37, 64, .6); } .swiper-slide-active .story-card::before { opacity: 1; } .swiper-slide-active .story-card__num { -webkit-text-stroke-color: rgba(255, 255, 255, .28); } .swiper-slide-active .story-card__mark { opacity: .35; transform: translateY(-4px); } .swiper-slide-active .story-card__tag { color: #4FC3B5; border-color: rgba(79, 195, 181, .4); background: rgba(79, 195, 181, .12); } .swiper-slide-active .story-card blockquote { color: rgba(255, 255, 255, .92); } .swiper-slide-active .story-card__foot { border-top-color: rgba(255, 255, 255, .15); } .swiper-slide-active .story-card__foot strong { color: #fff; } .swiper-slide-active .story-card__name { color: rgba(255, 255, 255, .65); } .swiper-slide-active .story-card__foot .story-card__avatar { box-shadow: 0 0 0 2px var(--brand-2); } .stories__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; max-width: 720px; margin: .5rem auto 0; } .stories__count { font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; color: var(--black); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: .35rem; } .stories__count [data-story-total] { color: var(--muted); font-weight: 500; font-size: .9rem; } .stories__sep { color: var(--muted); font-weight: 400; } .stories__progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; } .stories__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--brand-2)); border-radius: 3px; transition: width .7s cubic-bezier(.22, .61, .36, 1); } .stories__nav { display: flex; gap: .6rem; } .stories__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, border-color .25s, transform .3s; } .stories__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); } .stories__arrow .icon { width: 18px; height: 18px; } @media (max-width: 575.98px) { .stories__bar { grid-template-columns: auto 1fr; } .stories__nav { grid-column: 1 / -1; justify-content: center; } .story-card { padding: 1.9rem 1.4rem 1.5rem; } .story-card__num { font-size: 2.6rem; } } .story-grid .story-card { margin-top: 0; height: 100%; } .story-grid .story-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .35); border-color: rgba(7, 87, 154, .3); } .story-grid .story-card::before { opacity: 1; } .story-grid blockquote { -webkit-line-clamp: unset; line-clamp: unset; display: block; } /* ---------- 14. Media cards (events / posts / videos) ---------- */ .media-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); } .media-card:hover { border-color: #A1A1AA; } .media-card .ph { border-radius: 0; } .media-card .ph:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media-card__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .media-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .6rem; font-size: .82rem; color: var(--muted); } .media-card__meta .icon { width: 14px; height: 14px; } .media-card__meta span { display: inline-flex; align-items: center; gap: .35rem; } .media-card h3 { font-size: 1.15rem; margin-bottom: .4rem; } .media-card p { color: var(--muted); font-size: .95rem; flex: 1; } .media-card .text-link, .media-card .btn { align-self: flex-start; margin-top: .5rem; } /* Borderless cards need more air between them than boxed ones, since nothing but whitespace separates one card's text from the next card's image. */ .news-grid { --bs-gutter-x: clamp(1.5rem, 2.6vw, 2.5rem); --bs-gutter-y: clamp(2.25rem, 3.5vw, 3.25rem); } /* News & Events variant: borderless, panel-free card — a rounded image with the category pill riding on it, then the copy sitting directly on the section background, closed by a date / action baseline row. With no border or box to react on hover, the image zoom and the title colour carry the affordance instead. */ .media-card--news { position: relative; background: none; border: 0; border-radius: 0; overflow: visible; } .media-card--news:hover { border-color: transparent; } .media-card--news .ph { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; } .media-card--news .ph:not(.ph--none) img { transition: transform .7s var(--ease); } .media-card--news:hover .ph:not(.ph--none) img { transform: scale(1.06); } /* Flush with the image's edges — there's no panel to inset the copy from. */ .media-card--news .media-card__body { padding: 1.1rem 0 0; } .media-card--news h3 { font-size: 1.2rem; line-height: 1.25; margin-bottom: .5rem; transition: color .2s var(--ease); } .media-card--news:hover h3 { color: var(--brand); } .media-card--news p { font-size: .92rem; margin-bottom: 1rem; } /* Baseline row: date left, action right. No divider rule — on a borderless card the whitespace already separates it, and a hairline just reintroduces the panel edge the design drops. */ .media-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; margin-top: auto; padding-top: .9rem; } /* Date reads as a real data point rather than grey small print: teal icon, ink-coloured text. */ .media-card--news .media-card__foot .media-card__meta { margin-bottom: 0; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--ink); } .media-card--news .media-card__foot .media-card__meta .icon { width: 15px; height: 15px; color: var(--brand-2); } /* Action pairs the label with a circular arrow that fills on hover. The stretched link means hovering anywhere on the card triggers it, so the whole card animates as one. */ .media-card--news .media-card__foot .text-link { align-self: auto; margin-top: 0; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--ink); } .media-card--news .media-card__foot .text-link .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--brand); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .media-card--news:hover .media-card__foot .text-link .icon { background: var(--brand); border-color: var(--brand); color: #fff; } /* Whole card is the click target; the visible link stays the accessible one. */ .media-card--news .media-card__foot .text-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .video-card { cursor: pointer; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; width: 100%; height: 100%; display: flex; flex-direction: column; transition: border-color .2s var(--ease); } .video-card:hover { border-color: #A1A1AA; } .video-card .ph { border-radius: 0; } .video-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 1; transition: transform .25s var(--ease); } .video-card:hover .video-card__play { transform: scale(1.06); } .video-card__play .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; } .video-card__dur { position: absolute; right: .75rem; top: .75rem; z-index: 1; background: rgba(10, 10, 10, .85); color: #fff; font-size: .75rem; font-weight: 500; padding: .2rem .5rem; border-radius: 4px; } .video-card__body { padding: 1.1rem 1.25rem 1.25rem; } .video-card__body h3 { font-size: 1.05rem; margin-bottom: .3rem; } .video-card__body p { color: var(--muted); font-size: .9rem; margin: 0; } .filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .filter-tab { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-weight: 500; font-size: .875rem; transition: all .2s var(--ease); } .filter-tab:hover { border-color: var(--primary); color: var(--primary); } .filter-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .filter-tabs--center { justify-content: center; } [data-category].is-hidden { display: none; } /* ---------- Community events: premium tab bar + richer grid ---------- Scoped to .filter-tabs--pro / .cm-events so the plain filter tabs and news cards used on Home and Learning Hub are untouched. */ .cm-tabs { position: relative; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); } /* Full container width so the bar's edges line up with the card grid below; tabs share the width */ .filter-tabs--pro { position: relative; display: flex; flex-wrap: nowrap; gap: .25rem; width: 100%; margin: 0; padding: .4rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 22px 44px -30px rgba(10, 37, 64, .38), inset 0 1px 0 #fff; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filter-tabs--pro::-webkit-scrollbar { display: none; } /* Sliding pill behind the active tab — placed by initFilters(), animated only once it is ready */ .filter-tabs__indicator { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 45%, var(--black-2) 100%); box-shadow: 0 12px 24px -12px rgba(7, 87, 154, .75); opacity: 0; } .filter-tabs--pro.is-ready .filter-tabs__indicator { opacity: 1; transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1), height .3s var(--ease); } .filter-tabs--pro .filter-tab { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .4rem .85rem .4rem .4rem; border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; transition: color .3s var(--ease), background-color .3s var(--ease); } .filter-tabs--pro .filter-tab:hover { border-color: transparent; color: var(--primary); } .filter-tabs--pro .filter-tab:not(.is-active):hover { background: var(--surface); } .filter-tabs--pro .filter-tab.is-active { background: transparent; color: #fff; } /* No-JS / pre-placement fallback so the active tab still reads as selected */ .filter-tabs--pro:not(.is-ready) .filter-tab.is-active { background: var(--primary); } .filter-tabs--pro .filter-tab:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; } .filter-tab__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--surface); color: var(--primary); transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); } .filter-tab__icon .icon { width: 16px; height: 16px; } .filter-tabs--pro .filter-tab:not(.is-active):hover .filter-tab__icon { background: #fff; transform: rotate(-8deg) scale(1.06); } .filter-tabs--pro .filter-tab.is-active .filter-tab__icon { background: rgba(255, 255, 255, .16); color: #fff; } /* Section backdrop: soft brand glows, a fading dot field and faint rings — decoration only */ .cm-events { isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--surface-2) 55%, var(--surface) 100%); } .cm-events::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(38% 30% at 92% 4%, rgba(7, 87, 154, .09) 0%, rgba(7, 87, 154, 0) 70%), radial-gradient(34% 28% at 4% 58%, rgba(26, 154, 140, .08) 0%, rgba(26, 154, 140, 0) 70%), radial-gradient(40% 26% at 88% 98%, rgba(7, 87, 154, .07) 0%, rgba(7, 87, 154, 0) 70%); } .cm-events__deco { position: absolute; z-index: -1; pointer-events: none; } .cm-events__deco--dots { top: 2rem; left: 0; width: min(38vw, 420px); height: 260px; background: radial-gradient(rgba(7, 87, 154, .22) 1.2px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image: radial-gradient(70% 70% at 0% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 0% 0%, #000 0%, transparent 75%); } .cm-events__deco--ring { top: -220px; right: -180px; width: 520px; height: 520px; border-radius: 50%; border: 1.5px solid rgba(7, 87, 154, .08); box-shadow: 0 0 0 60px rgba(7, 87, 154, .025), 0 0 0 61.5px rgba(7, 87, 154, .06); } .cm-events__deco--ring-sm { bottom: 8%; left: -90px; width: 220px; height: 220px; border-radius: 50%; border: 1.5px dashed rgba(26, 154, 140, .22); } /* Cards: soft-shadowed image; the image itself stays still on hover (title/arrow carry the affordance) */ .cm-events .news-grid { position: relative; } .cm-events .media-card--news .ph { border-color: rgba(255, 255, 255, .9); background: linear-gradient(150deg, #EAF2F9 0%, #F4F8FB 50%, #E4F2EF 100%); box-shadow: 0 26px 46px -34px rgba(10, 37, 64, .5); } .cm-events .media-card--news:hover .ph img { transform: none; } /* Placeholder art gets a quiet dot texture instead of a flat grey box */ .cm-events .media-card--news .ph--none::after { display: block; content: ""; position: absolute; inset: 0; height: auto; opacity: 1; background: radial-gradient(rgba(7, 87, 154, .16) 1px, transparent 1.4px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%); mask-image: linear-gradient(160deg, #000 0%, transparent 60%); } .cm-events .media-card--news .ph--none img { z-index: 1; opacity: .75; } .cm-events .ph__tag { z-index: 2; border-color: transparent; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px rgba(10, 37, 64, .45); } .cm-events .ph__tag.tag--navy { background: rgba(10, 37, 64, .88); } /* Short brand rule above each title that stretches on hover */ .cm-events .media-card--news .media-card__body { padding-top: 1.35rem; } .cm-events .media-card--news .media-card__body::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: .85rem; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--brand-2)); transition: width .45s var(--ease); } .cm-events .media-card--news:hover .media-card__body::before { width: 64px; } .cm-events .media-card--news h3 { letter-spacing: -0.01em; } .cm-events .media-card--news .media-card__foot { padding-top: 1rem; border-top: 1px dashed var(--line); } .cm-events .media-card--news .media-card__foot .media-card__meta span { padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); } .cm-events .filter-empty { margin: 0; padding: 2.5rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .7); } /* Tab switch: quick fade-out, then the new set rises in with a short stagger */ .cm-events .news-grid.is-leaving .media-card { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .18s ease, transform .18s ease; } .cm-events .news-grid .is-entering > .media-card { animation: cmCardIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes cmCardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } } /* Below 1200px the bar becomes an edge-faded, snap-scrolling row of individual chips */ @media (max-width: 1199.98px) { .filter-tabs--pro { gap: .5rem; padding: .35rem 1.75rem .5rem .1rem; background: none; border: 0; border-radius: 0; box-shadow: none; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); } .filter-tabs--pro .filter-tab { flex: none; scroll-snap-align: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 20px -18px rgba(10, 37, 64, .5); } .filter-tabs--pro .filter-tab:not(.is-active):hover { background: #fff; border-color: rgba(7, 87, 154, .35); } .filter-tabs--pro .filter-tab.is-active { border-color: transparent; } } @media (max-width: 575.98px) { .filter-tabs--pro .filter-tab { font-size: .85rem; padding-right: .7rem; } .filter-tab__icon { width: 28px; height: 28px; } .filter-tab__icon .icon { width: 14px; height: 14px; } .cm-events__deco--ring { width: 320px; height: 320px; top: -150px; right: -140px; } .cm-events__deco--dots { width: 60vw; } } @media (prefers-reduced-motion: reduce) { .filter-tabs--pro.is-ready .filter-tabs__indicator, .cm-events .media-card--news .media-card__body::before, .filter-tab__icon { transition: none; } .cm-events .news-grid .is-entering > .media-card { animation: none; } .filter-tabs--pro .filter-tab:not(.is-active):hover .filter-tab__icon { transform: none; } } .filter-empty { text-align: center; color: var(--muted); padding: 2rem; } /* ---------- 15. Forms ---------- */ .field { display: flex; flex-direction: column; gap: .35rem; } .field label, .field__label { font-weight: 500; font-size: .875rem; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 87, 154, .12); } .field.is-invalid input, .field.is-invalid select, .field.is-invalid .multiselect__toggle, .field.is-invalid .file-field__btn { border-color: #c62828; } .field__error { color: #c62828; font-size: .8rem; margin: 0; } .field__error:empty { display: none; } .field__hint { font-size: .8rem; color: var(--muted); margin: 0; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.5rem; } .field--check { flex-direction: row; align-items: flex-start; gap: .6rem; } .field--check input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--primary); } .field--check label { font-weight: 400; font-size: .9rem; } .form-success { display: flex; gap: .75rem; align-items: flex-start; padding: 1.25rem 1.5rem; margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); } .form-success[hidden] { display: none; } .form-success { border-color: rgba(26, 154, 140, .4); } .form-success .icon { color: var(--brand-2); width: 24px; height: 24px; flex: none; } .form-success strong { display: block; } .form-success p { margin: 0; font-size: .95rem; } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); } .file-field { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; position: relative; } .file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; border: 0; } .file-field__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px dashed #A1A1AA; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .85rem; cursor: pointer; } .file-field__btn:hover { border-color: var(--black); } .file-field input:focus-visible + .file-field__btn { outline: 2px solid var(--brand); outline-offset: 2px; } .file-field__name { font-size: .85rem; color: var(--muted); } .multiselect { position: relative; } .multiselect__toggle { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; padding: .45rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } .multiselect__toggle:focus-visible, .multiselect__toggle[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 87, 154, .12); outline: none; } .multiselect__toggle > .icon { width: 16px; height: 16px; color: var(--black); transition: transform .2s; } .multiselect__toggle[aria-expanded="true"] > .icon { transform: rotate(180deg); } .multiselect__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .multiselect__placeholder { color: var(--muted); } .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 4px; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 500; border: 1px solid var(--line); } .chip--all { background: var(--brand-2); color: #fff; border-color: var(--brand-2); } .multiselect__menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .25); padding: .5rem; display: none; max-height: 320px; overflow-y: auto; } .multiselect.is-open .multiselect__menu { display: block; } .multiselect__option { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .92rem; cursor: pointer; } .multiselect__option:hover { background: var(--surface); } .multiselect__option input { width: 17px; height: 17px; accent-color: var(--primary); margin: 0; } .multiselect__option--all { border-bottom: 1px solid var(--line); margin-bottom: .35rem; padding-bottom: .7rem; font-weight: 500; color: var(--ink); } /* Connect (enquiry) block */ .connect { display: grid; gap: 1.5rem; } .connect__side { background: var(--black); color: #fff; border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; } .connect__side h3 { color: #fff; font-size: 1.5rem; } .connect__side p { color: var(--on-dark); } .connect__list { display: grid; gap: 1.1rem; margin: 1.5rem 0; } .connect__list li { display: flex; gap: .85rem; align-items: flex-start; font-size: .95rem; color: #fff; } .connect__list .icon { width: 20px; height: 20px; color: rgba(255, 255, 255, .6); flex: none; margin-top: .15rem; } .connect__list a { color: #fff; } .connect__list a:hover { color: rgba(255, 255, 255, .7); } .connect__list strong { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); font-weight: 500; } .connect__side .btn { margin-top: auto; align-self: flex-start; } @media (min-width: 992px) { .connect { grid-template-columns: 1.5fr 1fr; gap: 2rem; } } /* Enquiry section: dotted texture over the plain white. dotted_bg.png carries real alpha (palette + tRNS), so it drops straight on with no blend mode. isolation:isolate is what makes the z-index:-1 layer work — without a stacking context here the pseudo sinks behind the page background and disappears; with it, the dots paint above the section's background and below all content, so the form and the contact panel stay untouched. Scaled to cover rather than tiled, because the file has a slightly denser patch that would seam on repeat. */ #connect { isolation: isolate; } #connect::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("../img/dotted_bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* ---------- 16. Inner page banner (light, typographic) ---------- */ /* Shared heading system for every interior page (About, Opportunities, Services, Learning Hub, Community, Success Stories, Careers, Contact, detail pages, etc.) — one centered, responsive component so new pages automatically match. Structure: breadcrumb -> eyebrow -> h1 -> lead. */ /* Inner-page banner, shared by every page except Home (.hero) and About (.about-hero). The treatment is entirely CSS so it lands on all 26 pages without touching their markup, and it has to survive any mix of breadcrumb, eyebrow, tagline, heading, lead, badges and back-link. */ /* Full-bleed dark band carrying assets/img/page-banner-bg.svg — a purpose-built brand field (navy-to-blue gradient, fading dot grid, growth arcs, corner rings). The SVG is authored wide and set to cover, so it crops gracefully from phone to ultrawide. The gradient layered over it keeps the left third dark enough for the headline no matter how the art crops. */ .page-banner { position: relative; overflow: hidden; isolation: isolate; background-color: var(--black); background-image: linear-gradient(100deg, rgba(10, 37, 64, .92) 0%, rgba(10, 37, 64, .72) 38%, rgba(10, 37, 64, .28) 70%, rgba(10, 37, 64, .2) 100%), url("../img/page-banner-bg.svg"); background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: cover, cover; padding: clamp(1.9rem, 4vw, 3.25rem) 0; } .page-banner .container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: clamp(120px, 14vw, 168px); } /* Breadcrumb reads as a discrete control rather than text floating above the title. */ .page-banner .breadcrumb { margin-bottom: clamp(.6rem, 1.1vw, .85rem); padding: .4rem 1rem; border-radius: 999px; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .page-banner .breadcrumb a { color: rgba(255, 255, 255, .72); } .page-banner .breadcrumb a:hover { color: #fff; } .page-banner .breadcrumb [aria-current] { color: #4FC3B5; } .page-banner .eyebrow { margin: 0 0 clamp(.5rem, .9vw, .75rem); color: #4FC3B5; } .page-banner h1 { max-width: 20ch; margin: 0 0 clamp(.6rem, 1.2vw, 1rem); color: #fff; } .page-banner p { color: var(--on-dark); font-size: clamp(1rem, 1.8vw, 1.25rem); max-width: 60ch; margin: 0; } .page-banner .hub-hero__tag { color: #4FC3B5; } .page-banner .back-link { margin-inline: 0; color: rgba(255, 255, 255, .72); } .page-banner .back-link:hover { color: #fff; } .page-banner .tag { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; } .page-banner .page-banner__aside { display: none; } /* Pages that opted into a centred banner in markup keep it. */ .page-banner--center .container { align-items: center; text-align: center; } .page-banner--center h1, .page-banner--center p { margin-inline: auto; } .page-banner--center .badges { justify-content: center; } @media (max-width: 575.98px) { .page-banner { background-position: 72% center, 72% center; } .page-banner .container { min-height: 0; } } .page-banner__aside { position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: 50%; transform: translateY(-50%); display: flex; gap: clamp(2rem, 4vw, 3.5rem); pointer-events: none; } /* Decorative watermark text — light on the dark band; the old brand-blue tint was invisible there. */ .page-banner__aside span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.7; color: rgba(255, 255, 255, .14); text-align: right; } .page-banner__aside .page-banner__aside--sm { color: rgba(79, 195, 181, .28); font-size: .68rem; } @media (max-width: 1279.98px) { .page-banner__aside { display: none; } } .breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--black); } .breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; } .breadcrumb [aria-current] { color: var(--ink); } .page-banner .hub-hero__tag { font-weight: 500; font-size: var(--font-tagline); color: #4FC3B5; margin-bottom: .75rem; max-width: none; } /* ---------- 17. Modal ---------- */ .modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; } .modal.is-open { display: flex; } .modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .7); } .modal__dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); animation: modalIn .3s var(--ease); } .modal__dialog--wide { max-width: 960px; padding: 0; background: var(--black); overflow: hidden; } .modal__close { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .modal__close:hover { background: var(--surface); } .modal__close .icon { width: 18px; height: 18px; } .modal__dialog--wide .modal__close { top: .75rem; right: .75rem; } .modal h2 { font-size: 1.5rem; margin-bottom: .35rem; padding-right: 2.5rem; } .modal .lead { font-size: 1rem; margin-bottom: 1.5rem; } .modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; } .modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .modal__caption { padding: 1.25rem 1.5rem 1.5rem; color: #fff; } .modal__caption h3 { color: #fff; margin-bottom: .35rem; } .modal__caption p { color: var(--on-dark); margin: 0; font-size: .95rem; } @keyframes modalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- 18. Page-specific ---------- */ .expertise-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } .expertise { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .expertise:hover { border-color: transparent; box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .28); transform: translateY(-4px); } .expertise:nth-child(3n+1) { --accent: var(--primary); --accent-tint: rgba(7, 87, 154, .09); } .expertise:nth-child(3n+2) { --accent: var(--brand-2); --accent-tint: rgba(26, 154, 140, .1); } .expertise:nth-child(3n) { --accent: var(--black-2); --accent-tint: rgba(10, 37, 64, .07); } .expertise .card-x__icon { margin: 0; width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--accent-tint, var(--surface)); color: var(--accent, var(--primary)); transition: background .3s var(--ease), color .3s var(--ease), transform .3s cubic-bezier(.34, 1.56, .64, 1); } .expertise:hover .card-x__icon { background: var(--accent, var(--primary)); color: #fff; transform: scale(1.08); } .expertise .card-x__icon .icon { width: 22px; height: 22px; } .expertise span { font-weight: 500; font-size: .95rem; color: var(--ink); line-height: 1.4; align-self: center; } @media (min-width: 576px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .expertise-grid { grid-template-columns: repeat(4, 1fr); } } /* Two-column borderless checklist. The eight segments carry no panel of their own — the icon and the label do the work, which keeps the column light enough to sit beside the photo collage. (The previous fill was var(--surface), the exact background of the .section--light these sit on, so the old pills were rendering invisible.) */ .audience { display: grid; grid-template-columns: 1fr; gap: .7rem 1.5rem; margin: 1rem 0 0; } @media (min-width: 576px) { .audience { grid-template-columns: 1fr 1fr; } } .audience li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.45; color: var(--text); } .audience li > .icon { flex: none; width: 21px; height: 21px; margin-top: .1rem; color: var(--brand-2-ink); transition: transform .25s var(--ease); } .audience li:hover > .icon { transform: scale(1.12); } .leader { display: grid; gap: 2.5rem; align-items: start; } .leader__photo { max-width: 380px; } .leader__role { font-weight: 500; color: var(--muted); margin-bottom: 1.25rem; } .leader__badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; } .leader__badge { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .875rem; color: var(--ink); } .leader__badge .icon { width: 20px; height: 20px; color: var(--black); } @media (min-width: 992px) { .leader { grid-template-columns: 380px 1fr; gap: 4rem; } } .intro-block { max-width: 760px; } .sector-intro { position: relative; overflow: hidden; display: grid; gap: 2rem; padding: clamp(2rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); background-image: url("../img/get-in-touch-bg.svg"); background-repeat: no-repeat; background-position: top right; background-size: 420px auto; } .sector-intro__media { display: flex; align-items: center; } .sector-intro__photo { position: relative; width: 100%; aspect-ratio: 830 / 440; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sector-intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Source photos for most sectors are square (320x320) — a wide 830:440 crop would upscale and soften them, so this modifier keeps the frame square instead of forcing the landscape ratio. */ .sector-intro--square .sector-intro__photo { aspect-ratio: 1; max-width: 400px; margin: 0 auto; } @media (min-width: 992px) { .sector-intro { grid-template-columns: 1.15fr 1fr; align-items: center; } } /* Section wash: a soft brand-colour gradient plus the site's existing line-art SVG (unused elsewhere, tuned for light surfaces) sitting low-opacity behind the circle-photo layout below. */ .financial-intro { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, rgba(7, 87, 154, .08) 0%, rgba(26, 154, 140, .12) 100%), var(--surface); } .financial-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6; background-image: url("../img/contact-hero-art.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* "Knowledge is power" reference layout, in our palette: a circular photo on a soft brand-tint blob, with a small solid-colour badge overlapping its top-right corner — in place of the reference's second overlapping photo (we only have one real photo per sector) and its "20+ Years of Experience" stat (unverified for Bizacharya), the badge instead names the sector. */ .about-split__media { position: relative; max-width: 380px; margin: 0 auto; aspect-ratio: 1; } /* Flush with the container's left edge on desktop, so the circle lines up with the page-banner heading above instead of floating indented in the middle of its column. */ @media (min-width: 992px) { .about-split__media { margin: 0; } } .about-split__blob { position: absolute; inset: -8%; z-index: 0; border-radius: 50%; background: linear-gradient(155deg, rgba(7, 87, 154, .12) 0%, rgba(26, 154, 140, .16) 100%); } .about-split__photo { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .4); } .about-split__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-split__badge { position: absolute; z-index: 2; top: -1rem; right: -1rem; width: 128px; height: 128px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem; padding: 1rem; box-shadow: 0 20px 40px -16px rgba(7, 87, 154, .55); font-weight: 600; font-size: .78rem; line-height: 1.25; animation: about-split-badge-float 3.4s ease-in-out infinite; } .about-split__badge .icon { width: 26px; height: 26px; } /* Small, slow bob — a "minor" idle motion, not an attention-grabbing bounce. */ @keyframes about-split-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .checklist { display: grid; gap: .6rem; } .checklist li { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .95rem; color: var(--ink); } .checklist .icon { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: .15rem; } .tiles { display: flex; flex-wrap: wrap; gap: .6rem; } .tiles li { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; color: var(--ink); } .tiles .icon { width: 18px; height: 18px; color: var(--brand-2-ink); flex: none; } .offer-list { display: grid; gap: .75rem; grid-template-columns: 1fr; } .offer-list li { position: relative; display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; font-size: .95rem; color: var(--ink); overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .35s, box-shadow .45s cubic-bezier(.22, .61, .36, 1), color .3s; } .offer-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface), #fff); opacity: 0; transform: translateX(-12%); transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); } .offer-list li:hover { transform: translateY(-4px); border-color: rgba(7, 87, 154, .35); box-shadow: 0 16px 32px -20px rgba(10, 37, 64, .35); color: var(--primary); } .offer-list li:hover::before { opacity: 1; transform: translateX(0); } .offer-list .card-x__icon { margin: 0; width: 40px; height: 40px; transition: background .35s cubic-bezier(.22, .61, .36, 1), color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); } .offer-list li:hover .card-x__icon { background: var(--primary); color: #fff; transform: scale(1.08); } .offer-list .card-x__icon .icon { width: 18px; height: 18px; } @media (min-width: 768px) { .offer-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .offer-list--3 { grid-template-columns: repeat(3, 1fr); } } .statement { text-align: center; } .statement p { font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: #fff; max-width: 820px; margin: 0 auto 1.75rem; line-height: 1.3; } .statement .btn--accent { background: #fff; color: var(--black); border-color: #fff; } .statement .btn--accent:hover { color: var(--black); } .impact { position: relative; padding: 2.25rem 2.5rem; background: var(--surface); border-left: 3px solid var(--brand-2); border-radius: 0 var(--radius) var(--radius) 0; } .impact p { font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -0.015em; color: var(--black); margin: 0; line-height: 1.45; } .notice { display: flex; gap: .85rem; padding: 1rem 1.25rem; margin: 1.5rem 0; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface); font-size: .95rem; } .notice .icon { width: 20px; height: 20px; color: var(--black); flex: none; margin-top: .15rem; } .notice p { margin: 0; } .related { display: grid; gap: .75rem; grid-template-columns: 1fr; } .related a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; color: var(--ink); transition: border-color .2s, color .2s; } .related a:hover { border-color: var(--primary); color: var(--primary); } .related a .icon { width: 16px; height: 16px; flex: none; } @media (min-width: 576px) { .related { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .related { grid-template-columns: repeat(3, 1fr); } } .cta-band { background: var(--black); color: #fff; } .cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; max-width: 620px; } .cta-band p { color: var(--on-dark); margin: .4rem 0 0; } .cta-band .btn--light { background: #fff; color: var(--black); } .cta-band .btn--white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); } .cta-band .btn--white:hover { color: #fff; } .article { max-width: 820px; } .article p, .article li { font-size: 1.05rem; } .article ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1.25rem; } /* .checklist rows carry their own icon bullet and box styling — undo the plain-bullet .article ul defaults above so the two don't stack (disc marker + checkmark icon, extra left padding). */ .article .checklist { list-style: none; padding-left: 0; margin-bottom: 1.25rem; } .article .checklist li { font-size: .95rem; } .article h2 { font-size: 1.6rem; margin-top: 2.25rem; } .article h3 { margin-top: 1.75rem; } .article > *:first-child { margin-top: 0; } /* Editorial full-bleed hero: one photo carries the back-link, tags, title and meta, instead of a flat navy title band sitting above a separate placeholder image. A bottom-weighted scrim keeps the overlaid text readable over any photo without flattening the image with a flat dark fill. */ .detail-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(420px, 46vw, 580px); } .detail-hero__media { position: absolute; inset: 0; margin: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; } .detail-hero__media:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .detail-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 37, 64, .1) 0%, rgba(10, 37, 64, .35) 45%, rgba(10, 37, 64, .94) 100%); } .detail-hero__content { position: relative; z-index: 1; padding: clamp(3rem, 9vw, 5.5rem) 0 clamp(2.25rem, 4vw, 3rem); color: #fff; } .detail-hero__content .back-link { color: rgba(255, 255, 255, .78); } .detail-hero__content .back-link:hover { color: #fff; } .detail-hero__content .tag { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; } .detail-hero__content h1 { color: #fff; max-width: 22ch; margin: 0 0 1rem; } .detail-hero__content .meta-row { color: rgba(255, 255, 255, .82); margin: 0; } .detail-hero__content .meta-row .icon { color: rgba(255, 255, 255, .85); } .meta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 1.25rem 0; color: var(--muted); font-size: .95rem; } .meta-row span { display: inline-flex; align-items: center; gap: .5rem; } .meta-row .icon { width: 18px; height: 18px; color: var(--black); } /* Lead paragraph reads as a pull quote — a quiet editorial flourish at the top of the article. */ .article .lead { padding-left: 1.25rem; border-left: 3px solid var(--brand-2); font-size: 1.2rem; color: var(--ink); } .share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .share span { font-weight: 500; font-size: .875rem; color: var(--ink); margin-right: .5rem; } .share a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); } .share a:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .share .icon { width: 16px; height: 16px; } .sidebar-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; } .sidebar-card h3 { font-size: 1.05rem; } .sidebar-card li { padding: .75rem 0; border-top: 1px solid var(--line); } .sidebar-card li:first-child { border-top: 0; padding-top: 0; } .sidebar-card a { color: var(--ink); font-weight: 500; font-size: .92rem; display: block; } .sidebar-card a:hover { color: var(--brand); } .sidebar-card small { color: var(--muted); font-size: .78rem; } .detail-cta-card { background: linear-gradient(165deg, #fff 0%, var(--surface) 100%); border: 1px solid var(--line); border-top: 3px solid var(--brand-2); box-shadow: 0 30px 50px -34px rgba(10, 37, 64, .3); } .detail-cta-card .card-x__icon { margin-bottom: 1.1rem; } /* Label/value facts (event date, venue…) — same divider rhythm as .sidebar-card li, but a stacked strong+span instead of a link, so it reads as reference info, not a nav list. */ .fact-list li { display: flex; gap: .75rem; align-items: flex-start; } .fact-list .icon { width: 18px; height: 18px; color: var(--brand-2-ink); margin-top: .15rem; flex: none; } .fact-list strong { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; } .fact-list span { display: block; font-size: .92rem; color: var(--ink); } .sidebar-card > ul + .btn, .sidebar-card > ul + [data-register-cta] { margin-top: 1.25rem; } .sidebar-card > [data-register-cta] + .btn { margin-top: .75rem; } /* Gallery now lives in its own full-width section below the article/sidebar row, so it can be centred on the page instead of pinned to the left inside the narrower article column. */ .gallery-section { max-width: 900px; margin: 0 auto; text-align: center; } .gallery-section h2 { margin-bottom: 1.5rem; } .gallery .swiper-slide .ph { aspect-ratio: 16 / 9; border-radius: var(--radius); } .gallery-thumbs { margin-top: .75rem; } .gallery-thumbs .swiper-slide { width: 120px; cursor: pointer; opacity: .5; transition: opacity .2s; } .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .gallery-thumbs .ph { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); } .gallery-thumbs .ph .ph__label { display: none; } .gallery__video { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .gallery__video .icon { fill: currentColor; stroke: none; margin-left: 3px; } .gallery__nav { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; } .sticky-cta { position: sticky; top: calc(var(--header-h) + 1rem); } /* ---------- Service detail pages: one reading column + a sticky sidebar ---------- The intro used to sit in a 7/5 split whose right-hand 5 columns held nothing but a no-image.svg placeholder. The sidebar puts real navigation and a contact route in that space instead, and keeps them in view for the whole scroll. */ .svc__layout { display: grid; gap: clamp(2.25rem, 4vw, 3rem); align-items: start; } @media (min-width: 992px) { .svc__layout { grid-template-columns: minmax(0, 1fr) 332px; gap: clamp(2.5rem, 4.5vw, 4.5rem); } /* sticky lives on the wrapper, never on a [data-reveal] element — its translateY would create a containing block and silently kill the stickiness. */ .svc__side { position: sticky; top: calc(var(--header-h) + 1.25rem); } } .svc__block { margin-top: clamp(2rem, 4vw, 3rem); } .svc__block h2 { margin-bottom: 1.2rem; } .svc__side { display: grid; gap: 1.25rem; align-content: start; } .side-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem 1.4rem; } .side-nav__title { font-size: 1.05rem; margin-bottom: .9rem; } .side-nav ul { display: grid; gap: .3rem; } .side-nav a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; border-radius: var(--radius-sm); background: #fff; border: 1px solid transparent; font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--text); transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .side-nav a .icon { width: 15px; height: 15px; flex: none; opacity: .45; transition: transform .2s var(--ease), opacity .2s; } .side-nav a:hover { color: var(--primary); border-color: var(--line); } .side-nav a:hover .icon { transform: translateX(3px); opacity: 1; } .side-nav [aria-current="page"] { background: var(--black); color: #fff; font-weight: 600; } .side-nav [aria-current="page"]:hover { color: #fff; border-color: var(--black); } .side-nav [aria-current="page"] .icon { opacity: 1; } .side-cta { border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; color: #fff; background: linear-gradient(150deg, var(--black) 0%, #0D3358 58%, var(--primary) 100%); } .side-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: .9rem; color: #4FC3B5; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); } .side-cta__icon .icon { width: 20px; height: 20px; } .side-cta__title { color: #fff; font-size: 1.1rem; margin-bottom: .4rem; } .side-cta p { color: var(--on-dark); font-size: .88rem; margin-bottom: 1.15rem; } .side-cta .btn { width: 100%; } .side-cta__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; color: #4FC3B5; font-weight: 600; font-size: .88rem; } .side-cta__link:hover { color: #fff; } .side-cta__link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); } .side-cta__link:hover .icon { transform: translateX(3px); } /* --- Service page polish: the body was a flat white field of text, cards and a pale quote --- */ /* Soft brand washes so the section reads as a designed field rather than bare background. */ .svc { position: relative; overflow: hidden; isolation: isolate; } .svc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 45% at 80% 0%, rgba(26, 154, 140, .09) 0%, rgba(26, 154, 140, 0) 70%), radial-gradient(48% 40% at 0% 14%, rgba(7, 87, 154, .075) 0%, rgba(7, 87, 154, 0) 70%); } /* Lead gets a gradient rule so the opening statement carries weight. */ .svc__main .lead { position: relative; padding-left: 1.3rem; color: var(--black); } .svc__main .lead::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand-2), var(--primary)); } /* Short accent under each section heading. */ .svc__block h2 { position: relative; padding-bottom: .7rem; } .svc__block h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-2), var(--primary)); } /* Ghosted index on each offering — pure CSS counter, so it adds rhythm without inventing copy. */ .svc .offer-list { counter-reset: offer; } .svc .offer-list li { counter-increment: offer; } .svc .offer-list li::after { content: counter(offer, decimal-leading-zero); /* sits fully inside the card — the li clips overflow, so a bleed would crop mid-digit */ position: absolute; right: .8rem; bottom: .35rem; z-index: -1; pointer-events: none; font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: rgba(7, 87, 154, .07); transition: color .35s var(--ease); } .svc .offer-list li:hover::after { color: rgba(7, 87, 154, .13); } /* Impact quote promoted from a pale bordered box to the page's focal point. The serif quote mark is the same device .story-card__mark uses on the homepage. */ .svc .impact { position: relative; overflow: hidden; isolation: isolate; border: 0; padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--black) 0%, #0D3358 55%, var(--primary) 100%); box-shadow: 0 26px 52px -30px rgba(10, 37, 64, .6); } .svc .impact::before { content: "\201C"; position: absolute; z-index: -1; top: -.34em; right: .14em; pointer-events: none; font-family: Georgia, "Times New Roman", serif; font-size: 11rem; line-height: 1; color: rgba(79, 195, 181, .17); } /* Label lives inside the panel now. Scoped to the blockquote so the white quote colour does not also claim the label — .svc .impact p would outrank .svc .impact__label on specificity. */ .svc .impact blockquote p { color: #fff; } .svc .impact__label { margin: 0 0 .9rem; font-size: var(--font-small); font-weight: 500; letter-spacing: .02em; color: #4FC3B5; } .mobile-bar { display: none; } @media (max-width: 991.98px) { .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 790; padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--line); } .mobile-bar .btn { width: 100%; } body.has-mobile-bar { padding-bottom: 76px; } body.has-mobile-bar .fab { transform: translateY(-64px); } body.has-mobile-bar .fab:hover { transform: translateY(-66px); } } /* Learning hub */ .premium { background: var(--black); } .premium__inner { position: relative; display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); } .premium h2 { color: #fff; margin-bottom: .5rem; } .premium p { color: var(--on-dark); margin: 0; max-width: 600px; } .premium .eyebrow { color: rgba(255, 255, 255, .6) !important; } .premium .btn--accent { background: #fff; color: var(--black); border-color: #fff; } .premium .btn--accent:hover { color: var(--black); } @media (min-width: 992px) { .premium__inner { grid-template-columns: 1fr auto; align-items: center; } } .hub-toggle { display: inline-flex; padding: 4px; background: var(--surface); border-radius: var(--radius-sm); } .hub-toggle__wrap { display: flex; justify-content: center; margin-bottom: 2.5rem; } .hub-toggle__btn { padding: .65rem 1.3rem; border: 0; border-radius: 5px; background: transparent; font-weight: 500; font-size: .9rem; color: var(--ink); transition: background .2s, color .2s; } .hub-toggle__btn[aria-pressed="true"] { background: var(--primary); color: #fff; } [data-hub-panel][hidden] { display: none; } .coming-soon { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); background: #fff; border: 1px dashed #A1A1AA; border-radius: var(--radius); } .coming-soon .card-x__icon { margin: 0 auto 1.25rem; width: 60px; height: 60px; } .coming-soon h2 { font-size: 1.6rem; } .coming-soon .ml { display: block; color: var(--brand); font-weight: 500; margin-bottom: .5rem; } /* Phase 2 placeholders */ .phase-note { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; background: #FFF7E6; border: 1px solid #F0C36D; border-radius: var(--radius); color: #5A3E00; font-size: .92rem; margin-bottom: 1.5rem; } .phase-note .icon { width: 20px; height: 20px; flex: none; margin-top: .15rem; } .phase-note p { margin: 0; } .auth-card { max-width: 600px; margin: 0 auto; } .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 4px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 1.5rem; } .tabs__btn { padding: .75rem 1rem; border: 0; border-radius: 5px; background: transparent; font-weight: 500; font-size: .9rem; color: var(--ink); transition: background .2s, color .2s; } .tabs__btn[aria-selected="true"] { background: var(--primary); color: #fff; } .tab-panel[hidden] { display: none; } .tab-panel { animation: modalIn .3s var(--ease); } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset[disabled] { opacity: .6; } .module-list { display: grid; gap: .75rem; grid-template-columns: 1fr; } .module-list li { display: flex; gap: .85rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; font-size: .92rem; color: var(--ink); } .module-list .card-x__icon { margin: 0; width: 40px; height: 40px; } .module-list .card-x__icon .icon { width: 18px; height: 18px; } .module-list .tag { margin-left: auto; } @media (min-width: 576px) { .module-list { grid-template-columns: repeat(2, 1fr); } } /* Careers */ /* Career listing rows, following the Kinsey careers pattern: full-width rows separated by a hairline rather than boxed cards, a meta pair on the left, and a corner-cut arrow button that fills on hover while a rule wipes across the full width of the row. */ /* Held to a readable measure and centred — at the full 1440px container the title and the arrow ended up a long way apart with dead space between them. */ .job-list { max-width: 1000px; margin-inline: auto; counter-reset: jobrow; } .job-row { position: relative; isolation: isolate; counter-increment: jobrow; } /* Soft tint sweeping in from the left on hover */ .job-row::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--surface) 0%, rgba(242, 247, 251, 0) 76%); opacity: 0; transform: translateX(-12px); transition: opacity .35s var(--ease), transform .45s var(--ease); } .job-row:hover::before { opacity: 1; transform: none; } .job-row__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(.75rem, 1.5vw, 1.25rem); border-bottom: 1px solid var(--line); } /* Row index, generated from the counter so it renumbers itself as jobs are added or removed */ .job-row__inner::before { content: "0" counter(jobrow); flex: none; align-self: flex-start; padding-top: .15rem; font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: var(--brand-2-ink); transition: color .25s var(--ease); } .job-row:hover .job-row__inner::before { color: var(--primary); } .job-row:first-child .job-row__inner { border-top: 1px solid var(--line); } .job-row__content { min-width: 0; flex: 1; } .job-row__title { font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0 0 .55rem; transition: color .25s var(--ease); } .job-row__title a { color: var(--black); } /* stretched link: the whole row is the click target, the title stays the accessible one */ .job-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .job-row:hover .job-row__title, .job-row:hover .job-row__title a { color: var(--primary); } .job-row__meta { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; } .job-row__meta span { display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; color: var(--text); } .job-row__meta .icon { width: 19px; height: 19px; color: var(--muted); flex: none; } /* Kinsey's corner-cut button: border-radius: 20px 0 rounds only the TL and BR corners */ .job-row__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 20px 0; background: var(--surface); color: var(--primary); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .job-row__go .icon { width: 20px; height: 20px; } .job-row:hover .job-row__go { background: var(--primary); color: #fff; transform: translateX(3px); } /* rule wipes across on hover */ .job-row::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--black); transition: width .35s var(--ease); } .job-row:hover::after { width: 100%; } @media (max-width: 575.98px) { .job-row__inner { gap: .85rem; padding-inline: .25rem; } .job-row__inner::before { font-size: .82rem; } .job-row__go { width: 46px; height: 46px; border-radius: 16px 0; } .job-row__meta { gap: .35rem 1rem; } .job-row__meta span { font-size: .88rem; } } .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .job-facts { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0 2rem; } .job-fact { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .job-fact .card-x__icon { margin: 0; width: 44px; height: 44px; flex: none; } .job-fact strong { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: .2rem; } .job-fact__value { font-weight: 500; color: var(--black); } @media (min-width: 576px) { .job-facts { grid-template-columns: repeat(2, 1fr); } } .back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .9rem; color: var(--muted); margin-bottom: 1.25rem; } .back-link:hover { color: var(--black); } .back-link .icon { width: 16px; height: 16px; } /* Minimal corner-ring accent on the section's light-blue backdrop — kept deliberately sparse so it reads as texture, not decoration competing with the cards. */ #associate { position: relative; overflow: hidden; isolation: isolate; } #associate::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../img/associate-bg.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .associate-intro { max-width: 640px; margin: 0 auto 3rem; text-align: center; } .associate-intro .lead { margin: 0 auto; } .associate-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2.75rem; } .associate-card { padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 18px 40px -28px rgba(10, 37, 64, .25); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .associate-card:hover { border-color: #A1A1AA; box-shadow: 0 24px 48px -24px rgba(10, 37, 64, .3); transform: translateY(-4px); } .associate-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: rgba(26, 154, 140, .12); color: var(--brand-2-ink); margin-bottom: 1.1rem; } .associate-card__icon .icon { width: 22px; height: 22px; } .associate-card h3 { color: var(--ink); font-size: 1.05rem; margin-bottom: .4rem; } .associate-card p { color: var(--muted); font-size: .9rem; margin: 0; } .associate-cta { text-align: center; } @media (min-width: 576px) { .associate-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .associate-grid { grid-template-columns: repeat(4, 1fr); } } /* Contact — modern take on the Kinsey (ThemeForest) consulting-theme contact pattern: soft gradient glows instead of flat fills, floating/overlapping cards, deep soft shadows instead of hairline borders, and underlined form fields. Glows are native CSS radial-gradient layers, not baked into SVGs — a gradient-filled SVG shape rasterizes with a hard rectangular edge when used as a CSS background-image (confirmed earlier), so every glow here is plain CSS. Same brand palette as the rest of the site (navy/blue/teal) in place of the reference's indigo. */ .eyebrow-arrow { display: inline-flex; align-items: center; gap: .4rem; } .eyebrow-arrow .icon { width: 16px; height: 16px; color: var(--brand-2); flex: none; } .heading-soft { display: block; color: var(--muted); font-weight: inherit; } .contact-facts-band .heading-soft { color: rgba(255, 255, 255, .55); } /* Photo + form card — glassmorphism: one continuous card, a full-bleed photo with a frosted, blurred glass panel over the form half, and a full-width submit bar spanning the whole card (photo + panel) at the bottom. Modelled on a reference Kinsey (ThemeForest) contact-form shot. */ .contact-card { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(10, 37, 64, .35); } .contact-card--glass { min-height: 620px; } .contact-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .contact-card__glass-panel { position: relative; z-index: 1; width: 100%; min-height: 100%; margin-left: auto; background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(10, 37, 64, .72) 100%); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-left: 1px solid rgba(255, 255, 255, .18); padding-bottom: 5.5rem; } .contact-card__form-inner { padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem) .5rem; } .contact-card__form-inner h2 { margin-bottom: 0; color: #fff; } .contact-card__glass-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .contact-card__glass-head .eyebrow { margin-bottom: 0; font-size: 1rem; color: #4FC3B5; } .contact-card__sparkle { width: 22px; height: 22px; color: rgba(255, 255, 255, .45); } .contact-card__submit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; } .contact-card__submit .btn { width: 100%; border-radius: 0; justify-content: space-between; padding: 1.15rem 2rem; } /* Glass fields: boxed with a translucent white border instead of underlined, for legibility over a busy photo — the sitewide .field/.field__error contract is untouched, only colours change. */ .contact-card--glass .field { position: relative; margin-bottom: 1.1rem; } .contact-card--glass .field label, .contact-card--glass .field .field__label { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .75); margin-bottom: .4rem; } .contact-card--glass .field input, .contact-card--glass .field select, .contact-card--glass .multiselect__toggle { background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; color: #fff; } .contact-card--glass .field input::placeholder { color: rgba(255, 255, 255, .55); } .contact-card--glass .field input:focus, .contact-card--glass .field select:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); } .contact-card--glass .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; } .contact-card--glass .field select option { color: var(--ink); } .contact-card--glass .field__error { color: #ffb4b4; } .contact-card--glass .field__hint { color: rgba(255, 255, 255, .6); } .contact-card--glass .multiselect__toggle > .icon { color: rgba(255, 255, 255, .75); } .contact-card--glass .multiselect__chips { color: rgba(255, 255, 255, .55); } /* Service dropdown on the glass card. The card clips its contents (overflow:hidden, for the rounded photo) and the full-width submit bar sits above the glass panel, so a menu dropping downward was cut off and hidden behind "Send Message". Open it upward over the fields above instead, and give the options dark text — the glass form's white label colour made them invisible on the white menu. */ .contact-card--glass .multiselect__menu { top: auto; bottom: calc(100% + 6px); max-height: min(320px, 55vh); } /* .field label (the glass form's label style) also matches these option labels — out-specify it */ .contact-card--glass .field label.multiselect__option { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-size: .92rem; font-weight: 400; letter-spacing: 0; margin-bottom: 0; } .contact-card--glass .field label.multiselect__option--all { font-weight: 500; margin-bottom: .35rem; } .contact-card--glass .field .multiselect__option input { background: none; border: 0; box-shadow: none; } .contact-card--glass .multiselect__chips .chip { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); } .contact-card--glass .multiselect__placeholder { color: rgba(255, 255, 255, .6); } @media (min-width: 992px) { .contact-card__glass-panel { width: 56%; } } /* Dark facts strip — gradient field + glows instead of a flat fill, chip-style facts. */ .contact-facts-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, var(--black) 0%, var(--black-2) 100%); color: var(--on-dark); border-radius: 28px; padding: clamp(2.25rem, 4vw, 3.5rem); } .contact-facts-band::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(26, 154, 140, .28) 0%, rgba(26, 154, 140, 0) 70%); } .contact-facts-band::after { content: ""; position: absolute; z-index: -1; inset: auto auto -30% -10%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(31, 109, 174, .22) 0%, rgba(31, 109, 174, 0) 70%); } .contact-facts-band__inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } .contact-facts-band h2 { color: #fff; margin-bottom: 1rem; } .contact-facts-band p { margin-bottom: 1.5rem; } .contact-facts-band .eyebrow { color: #4FC3B5; } .contact-facts-band .eyebrow-arrow .icon { color: #4FC3B5; } .contact-facts { display: grid; gap: 1rem; grid-template-columns: 1fr; align-content: start; } .contact-facts__item { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; transition: background .25s var(--ease), border-color .25s var(--ease); } .contact-facts__item:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); } .contact-facts__item .card-x__icon { margin: 0; width: 44px; height: 44px; background: rgba(255, 255, 255, .1); color: #4FC3B5; flex: none; } .contact-facts dt { font-size: .74rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .2rem; } .contact-facts dd { margin: 0; font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 1.35; } .contact-facts dd a { color: #fff; } .contact-facts dd a:hover { color: #4FC3B5; } @media (min-width: 768px) { .contact-facts-band__inner { grid-template-columns: 1.1fr 1fr; gap: 3rem; } } .map { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); height: clamp(320px, 42vw, 480px); box-shadow: 0 40px 70px -40px rgba(10, 37, 64, .25); } .map iframe { width: 100%; height: 100%; border: 0; display: block; } /* About (editorial two-column intro, modelled on the approved reference layout) */ .about-hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; } .about-hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } .about-hero__head { text-align: left; } .about-hero__head h1 { margin: 1.1rem 0 1.25rem; } .about-hero__head .lead { max-width: 480px; } .about-hero__accent { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .about-hero__accent span { width: 28px; height: 2px; background: var(--brand-2); flex: none; } .about-hero__media { position: relative; } .about-hero__shape { position: absolute; z-index: 0; top: -8%; right: -12%; width: 88%; height: 116%; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: linear-gradient(155deg, rgba(7, 87, 154, .1), rgba(26, 154, 140, .16)); opacity: 0; } .about-hero__media.is-visible .about-hero__shape { opacity: 1; transition: opacity .9s var(--ease) .15s; } .about-hero__media .ph--banner { position: relative; z-index: 1; aspect-ratio: 6 / 5; min-height: min(320px, 72vw); border-radius: 28px; box-shadow: 0 34px 64px -28px rgba(10, 37, 64, .38); } .about-hero__media .ph--banner img { width: 100%; height: 100%; object-fit: cover; } .about-hero__badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 14px; padding: .8rem 1.1rem; max-width: 230px; box-shadow: 0 18px 36px -18px rgba(10, 37, 64, .3); font-size: .85rem; font-weight: 600; color: var(--black); } .about-hero__badge-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--primary); } .about-hero__badge-icon .icon { width: 18px; height: 18px; } .about-hero__badge--top { top: -1.25rem; left: -1.25rem; } .about-hero__badge--bottom { bottom: -1.25rem; right: -1.25rem; } /* Entrance: head slides in from the left, the image fades in with a gentle scale — both driven by the generic [data-reveal] system; only the initial (pre-reveal) transform is customised here, the shared .is-visible end-state (transform: none) already comes from the base [data-reveal] rule. */ .about-hero__head[data-reveal] { transform: translateX(-28px); } .about-hero__media[data-reveal] { transform: scale(.97); } @media (min-width: 768px) { .about-hero__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) and (max-width: 991.98px) { .about-hero__badge { padding: .6rem .85rem; max-width: 168px; font-size: .78rem; gap: .5rem; } .about-hero__badge-icon { width: 30px; height: 30px; } .about-hero__badge-icon .icon { width: 15px; height: 15px; } .about-hero__badge--top { top: -.75rem; left: -.75rem; } .about-hero__badge--bottom { bottom: -.75rem; right: -.75rem; } } @media (max-width: 767.98px) { .about-hero__head .lead { max-width: none; } .about-hero__shape { display: none; } .about-hero__media { margin-top: .5rem; } .about-hero__badge { position: static; max-width: none; margin-top: .75rem; } } /* Our Journey: company-history timeline (About page). An editorial spine-and-marker layout — deliberately not a card/tile grid. Scoped to .our-journey / .timeline*, entirely separate from the homepage's entrepreneur-journey roadmap (.journey / .journey-map / .journey-stage). */ /* Brand arcs and dots sweeping into the bottom-right corner (transparent PNG over white). Full-width on desktop; kept at a minimum width on phones so the arcs stay legible there. */ .our-journey { background: #fff url("../img/about/shape1.png") right bottom / max(100%, 720px) auto no-repeat; } /* --tl-value is the headline size; the marker is centred on that headline's first line. The spine runs from the first marker's centre to the last marker's centre — initCompanyTimeline() measures those and writes --line-top / --line-len (the fallbacks cover the no-JS case). */ .timeline { --tl-value: clamp(1.6rem, 2.2vw, 2.1rem); --tl-dot: 16px; position: relative; max-width: 860px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; } .timeline__list { position: relative; list-style: none; margin: 0; padding: 0; } .timeline__list::before, .timeline__list::after { content: ""; position: absolute; z-index: 0; width: 2px; left: calc(var(--tl-dot) / 2 - 1px); top: var(--line-top, calc(var(--tl-value) * .55)); height: var(--line-len, calc(100% - var(--tl-value))); } .timeline__list::before { background: var(--line); } .timeline__list::after { background: linear-gradient(180deg, var(--primary), var(--brand-2)); transform: scaleY(var(--progress, 0)); transform-origin: top center; transition: transform .6s var(--ease); } .timeline__list.no-anim::after { transition: none; } .timeline__item { position: relative; padding-left: 2.75rem; padding-bottom: clamp(2.25rem, 4vw, 3.25rem); } .timeline__item:last-child { padding-bottom: 0; } /* z-index keeps the marker above the spine (the progress line is ::after, so it would otherwise paint on top) */ .timeline__marker { position: absolute; z-index: 2; left: 0; top: calc(var(--tl-value) * .55 - var(--tl-dot) / 2); width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; background: #fff; border: 2px solid var(--line); box-sizing: border-box; transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } .timeline__content { position: relative; z-index: 1; } .timeline__item.is-in .timeline__marker { border-color: var(--brand-2); background: var(--brand-2); box-shadow: 0 0 0 5px rgba(26, 154, 140, .15); } .timeline__content { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .timeline__item.is-in .timeline__content { opacity: 1; transform: none; } .timeline__value { display: block; margin-bottom: .5rem; font-size: var(--tl-value); font-weight: 600; letter-spacing: -0.03em; color: var(--black); line-height: 1.1; } .timeline__content p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 460px; } .timeline__item--today .timeline__value, .timeline__item--today .timeline__marker { color: var(--brand-2); } .timeline__item--today .timeline__marker { border-color: var(--brand-2); } /* Desktop: zigzag either side of a centred spine — more editorial than a single left rail */ @media (min-width: 768px) { .timeline__list::before, .timeline__list::after { left: calc(50% - 1px); } .timeline__marker { left: calc(50% - var(--tl-dot) / 2); } .timeline__item { padding-left: 0; padding-bottom: clamp(3rem, 5vw, 4rem); } .timeline__content { width: calc(50% - 3rem); } .timeline__item:nth-child(odd) .timeline__content { margin-right: auto; text-align: right; } .timeline__item:nth-child(even) .timeline__content { margin-left: auto; text-align: left; } .timeline__item:nth-child(odd) .timeline__content p { margin-left: auto; } .timeline__item:nth-child(even) .timeline__content p { margin-right: auto; } } /* Eyebrow and heading now sit inside the left column, so the 900px cap that kept them readable at full container width no longer applies — the column already constrains them. */ .know .eyebrow { margin-bottom: .45rem; } .know h2 { max-width: none; margin-bottom: .8rem; } /* center, not start: the text column is much taller than the single image, so anchoring both to the top left the image stranded against a long run of copy. */ .know__grid { display: grid; gap: 2.5rem; align-items: center; } .know__lead { font-size: var(--font-lead); line-height: 1.6; color: var(--black); } .know__text { color: var(--muted); font-size: .98rem; } .know__empower-label { margin-top: 1.5rem; } .know__audience { margin-bottom: 0; } /* Divider setting the lead apart from the supporting copy, as in the reference layout. */ .know__rule { border: 0; border-top: 1px solid var(--line); margin: clamp(1.4rem, 2.5vw, 2rem) 0; } /* Dark inline CTA closing the column — a small solid block against an otherwise light section. */ .know__cta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: .95rem 1.6rem; border-radius: var(--radius); background: var(--black); color: #fff; font-size: .95rem; } .know__cta a { display: inline-flex; align-items: center; gap: .35rem; color: #4FC3B5; font-weight: 600; } .know__cta a:hover { color: #fff; } .know__cta .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); } .know__cta a:hover .icon { transform: translateX(3px); } .know__media { position: relative; } .know__shape { position: absolute; z-index: 0; top: -10%; left: -12%; width: 70%; height: 60%; border-radius: 45% 55% 60% 40% / 55% 40% 60% 45%; background: linear-gradient(155deg, rgba(7, 87, 154, .1), rgba(26, 154, 140, .14)); opacity: 0; } .know__media.is-visible .know__shape { opacity: 1; transition: opacity .9s var(--ease) .15s; } /* Single image, as in the reference layout. It sits beside a tall text column, so a portrait-ish crop carries the height far better than the source's native 4:3 landscape. */ .know__photos { position: relative; z-index: 1; } .know__photos .ph { aspect-ratio: 4 / 4.2; border-radius: 18px; box-shadow: 0 26px 50px -28px rgba(10, 37, 64, .38); } .know__photos .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s var(--ease); } .know__photos .ph:hover img { transform: scale(1.05); } @media (max-width: 991.98px) { .know__photos .ph { aspect-ratio: 16 / 10; } } .know__badge { position: relative; z-index: 2; display: flex; align-items: center; gap: .7rem; margin-top: -1.5rem; margin-left: 1.5rem; max-width: 260px; background: #fff; border-radius: 14px; padding: .8rem 1.1rem; box-shadow: 0 18px 36px -18px rgba(10, 37, 64, .3); font-size: .85rem; font-weight: 600; color: var(--black); } .know__badge-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--primary); } .know__badge-icon .icon { width: 18px; height: 18px; } @media (min-width: 992px) { .know__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .team-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(10, 37, 64, .3); } .team-card .ph { border-radius: 0; } .team-card__avatar { position: relative; width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); overflow: hidden; } .team-card__avatar::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 1.5px); background-size: 22px 22px; } .team-card__initials { position: relative; font-size: clamp(4rem, 12vw, 6rem); font-weight: 700; color: #fff; letter-spacing: -0.03em; font-variant-numeric: normal; } .team-card__label { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; background: #fff; border-radius: 12px; padding: 1rem; text-align: center; box-shadow: 0 14px 30px -18px rgba(10, 37, 64, .4); } .team-card__label strong { display: block; font-weight: 600; color: var(--black); } .team-card__label span { color: var(--muted); font-size: .9rem; } /* About page's closing CTA — the only place .cta-card is used, so it carries a richer treatment than a generic panel. It sits between a white section and the navy footer, so it stays light: a dark panel here would merge straight into the footer. */ .cta-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); text-align: center; } /* Two washes pulling the brand blue down from the top and the teal up from the bottom-right, so the field has direction instead of reading as a flat grey box. */ .cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(58% 70% at 50% 0%, rgba(7, 87, 154, .10) 0%, rgba(7, 87, 154, 0) 70%), radial-gradient(42% 58% at 92% 100%, rgba(26, 154, 140, .14) 0%, rgba(26, 154, 140, 0) 70%); } /* Concentric rings bleeding off the top-left corner (box-shadow spread draws the outer rings). */ .cta-card::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 260px; height: 260px; border-radius: 50%; top: -150px; left: -90px; border: 1px solid rgba(7, 87, 154, .14); box-shadow: 0 0 0 38px rgba(7, 87, 154, .05), 0 0 0 39px rgba(7, 87, 154, .09); } .cta-card > * { position: relative; z-index: 1; } .cta-card h2 { margin-bottom: .75rem; } .cta-card p { color: var(--muted); max-width: 560px; margin: 0 auto 1.9rem; } /* Stage chain. The numbers carry the sequence, so the chips can wrap freely — a drawn connector line would break awkwardly across rows at narrow widths. */ .cta-chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .65rem; max-width: 880px; margin: 0 auto 2.25rem; } .cta-chain li { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 500; color: var(--ink); white-space: nowrap; box-shadow: 0 8px 18px -14px rgba(10, 37, 64, .45); } .cta-chain__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-2-ink); color: #fff; font-size: .72rem; font-weight: 700; } @media (max-width: 575.98px) { .cta-chain { gap: .5rem; } .cta-chain li { font-size: .8rem; padding: .4rem .85rem .4rem .4rem; } .cta-chain__num { width: 23px; height: 23px; font-size: .68rem; } } /* ---------- 19. Motion ---------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Safety net: .is-visible is added by JS, so without scripting every revealed block — which is most of the page — would stay at opacity 0 and the site would render blank. */ @media (scripting: none) { [data-reveal] { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .about-hero__head, .about-hero__media { opacity: 1; transform: none; } .about-hero__shape { opacity: 1; } .vm2__visual, .vm2__seg, .vm2__core, .vm2__dot, .vm2__panel { opacity: 1; transform: none; } .vm2__connector-line { stroke-dashoffset: 0; } .vm2__connector-node { opacity: 1; } .journey-stage__photo, .journey-stage__body { opacity: 1; transform: none; } .journey-stage__num { opacity: 0; } .journey-map__list::after { clip-path: none; transition: none; } .timeline__content { opacity: 1; transform: none; } .timeline__list::after { transform: none; } .hero__bg { opacity: 1; animation: none; transform: none; } .vm2-sec::after { opacity: 1; animation: none; transform: none; } .hero h1, .hero__sub, .hero p.lead, .hero .btn-group, .hero__stats { opacity: 1; animation: none; transform: none; } .row-item__glyph, .row-item__image { opacity: 1; transform: none; } .row-item__glyph .icon { transform: none; } .row-item__image img { transform: none; } .row-list--glyph .row-item > div { opacity: 1; transform: none; } .row-list--glyph .row-item__icon, .row-item__more-text { opacity: 1; } .marquee__track { animation: none; transform: none; } .story-deck__card { transition: none; } .story-deck__content { transition: none; } .story-deck__track.is-swapping .story-deck__content { transform: none; } .listing__list::after { transform: none; } .listing__list > li::before { transform: translate(-50%, -50%) scale(1); } } /* ---------- Cursor ---------- */ /* Standard browser cursors everywhere: the hand pointer on anything clickable, arrow elsewhere. */ @media (hover: hover) and (pointer: fine) { a[href], .btn, button, input[type="submit"], input[type="button"], input[type="reset"], .file-field__btn { cursor: pointer; } .btn[disabled], button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled { cursor: not-allowed; } } /* ---------- 19c. Event detail page ---------- Scoped to event-detail.html. Everything here is built from the existing tokens (--primary, --brand-2, --black, --surface, --line, --radius, --ease) so the page reads as part of the same system, not a one-off theme. Layout notes worth knowing before editing: - The fact strip is pulled up over the hero seam with a negative margin; the hero reserves the matching space with extra bottom padding so nothing is ever covered. - .ev-nav sticks below the site header, which is itself sticky, hence the --header-h offset. - Reveal/stagger come from the shared [data-reveal] system; nothing here re-implements it. */ /* --- Hero --- */ .ev-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(460px, 52vw, 660px); padding-bottom: clamp(5rem, 9vw, 7.5rem); /* room for the fact strip that rides up into it */ background: var(--black); } .ev-hero__media { position: absolute; inset: 0; margin: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; } .ev-hero__media:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Two stops, not one: a strong floor so the copy always has contrast, plus a left-weighted wash so the headline sits on solid colour while the right of the photo stays legible. */ .ev-hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 37, 64, .55) 0%, rgba(10, 37, 64, .35) 32%, rgba(10, 37, 64, .93) 100%), linear-gradient(90deg, rgba(10, 37, 64, .8) 0%, rgba(10, 37, 64, .3) 58%, rgba(10, 37, 64, .12) 100%); } /* Ring motif echoing the brand geometry, bleeding off the top-right corner. */ .ev-hero__rings { position: absolute; z-index: -1; top: -28%; right: -12%; width: clamp(320px, 42vw, 720px); aspect-ratio: 1; pointer-events: none; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%234FC3B5' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='80'/%3E%3Ccircle cx='200' cy='200' r='128'/%3E%3Ccircle cx='200' cy='200' r='176'/%3E%3C/svg%3E") no-repeat center / contain; } .ev-hero__inner { position: relative; z-index: 1; color: #fff; padding-top: clamp(2.5rem, 6vw, 4rem); } .ev-hero__inner .back-link { color: rgba(255, 255, 255, .78); } .ev-hero__inner .back-link:hover { color: #fff; } .ev-hero__inner .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1rem; } .ev-hero__inner .tag { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #fff; backdrop-filter: blur(6px); } .ev-hero__inner .tag--teal { background: var(--brand-2); border-color: var(--brand-2); } .ev-hero h1 { color: #fff; max-width: 18ch; margin: 0 0 1rem; letter-spacing: -0.02em; } .ev-hero__lede { max-width: 56ch; margin: 0 0 1.75rem; color: rgba(255, 255, 255, .82); font-size: var(--font-lead); line-height: 1.6; } .ev-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .ev-hero__ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(6px); } .ev-hero__ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; } /* --- Fact strip: rides up over the hero seam --- */ .ev-facts-sec { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -7vw, -3.5rem); } .ev-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 28px 60px -34px rgba(10, 37, 64, .45); } .ev-fact { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon k" "icon v"; gap: .1rem .9rem; align-content: center; padding: 1.15rem 1.25rem; background: #fff; transition: background .25s var(--ease); } .ev-fact:hover { background: var(--surface-2); } .ev-fact__icon { grid-area: icon; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--primary), var(--brand-2)); color: #fff; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .ev-fact:hover .ev-fact__icon { transform: translateY(-2px) scale(1.05); } .ev-fact__icon .icon { width: 20px; height: 20px; } .ev-fact__k { grid-area: k; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ev-fact__v { grid-area: v; font-size: .95rem; font-weight: 500; color: var(--ink); line-height: 1.4; } /* --- Sticky in-page nav --- */ .ev-nav { position: sticky; top: calc(var(--header-h) - 12px); z-index: 700; margin-top: clamp(2rem, 4vw, 3rem); background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ev-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ev-nav__list::-webkit-scrollbar { display: none; } .ev-nav__list a { display: inline-block; padding: .95rem .9rem; white-space: nowrap; font-size: .9rem; font-weight: 500; color: var(--muted); position: relative; transition: color .25s var(--ease); } .ev-nav__list a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .ev-nav__list a:hover { color: var(--primary); } .ev-nav__list a:hover::after { transform: scaleX(1); } /* Anchor targets sit under the sticky header + this bar, so offset where they land. */ #ev-overview, #ev-agenda, #ev-speakers, #ev-venue, #ev-gallery { scroll-margin-top: calc(var(--header-h) + 56px); } /* --- Body grid + sticky registration card --- */ .ev-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 992px) { .ev-grid { grid-template-columns: minmax(0, 1fr) 360px; } } .ev-col { min-width: 0; display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); } .ev-article h2 { letter-spacing: -0.02em; margin-bottom: .75rem; } .ev-article .eyebrow { margin-bottom: .5rem; } .ev-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 1.9rem); box-shadow: 0 30px 60px -40px rgba(10, 37, 64, .45); } .ev-card__head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.15rem; } .ev-card__price { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--black); letter-spacing: -0.02em; } .ev-card__price span { font-size: .9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; } .ev-card__facts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; } .ev-card__facts li { display: flex; gap: .8rem; align-items: flex-start; } .ev-card__facts .icon { width: 19px; height: 19px; color: var(--brand-2); flex: none; margin-top: .15rem; } .ev-card__facts strong { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; } .ev-card__facts span { font-size: .92rem; color: var(--ink); line-height: 1.45; } .ev-card__cta { width: 100%; } .ev-card__help { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; } .ev-card__help a { color: var(--brand); font-weight: 500; } .ev-card__back { width: 100%; margin-top: .75rem; } /* --- Highlights: numbered rows rather than another box grid --- */ .ev-block__title {font-size: 1.25rem; margin: 0 0 1rem; letter-spacing: -0.01em; } .ev-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .ev-hl__item { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .ev-hl__item:hover { transform: translateX(4px); border-color: var(--primary); box-shadow: 0 16px 30px -22px rgba(10, 37, 64, .5); } .ev-hl__num { font-size: .85rem; font-weight: 700; color: var(--brand-2); letter-spacing: .04em; flex: none; } .ev-hl__text { font-size: .95rem; color: var(--ink); line-height: 1.5; } /* --- Who should attend: navy panel, audiences as an icon grid, seats note as a live footnote --- */ .ev-aud { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(60% 80% at 100% 0%, rgba(26, 154, 140, .28) 0%, rgba(26, 154, 140, 0) 60%), linear-gradient(145deg, var(--black) 0%, var(--black-2) 55%, var(--primary) 130%); box-shadow: 0 30px 60px -40px rgba(10, 37, 64, .7); } .ev-aud__rings { position: absolute; z-index: -1; top: -120px; right: -120px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 44px rgba(255, 255, 255, .025), 0 0 0 45px rgba(255, 255, 255, .07); pointer-events: none; } .ev-aud__head { display: flex; align-items: center; gap: .85rem; margin-bottom: clamp(1.25rem, 2.4vw, 1.6rem); } .ev-aud__badge { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-2); color: #fff; box-shadow: 0 10px 22px -10px rgba(26, 154, 140, .9); } .ev-aud__badge .icon { width: 21px; height: 21px; } .ev-aud__title { margin: 0; font-size: 1.3rem; letter-spacing: -0.01em; color: #fff; } .ev-aud__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; } @media (min-width: 576px) { .ev-aud__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ev-aud__item { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .ev-aud__item:hover { background: rgba(255, 255, 255, .1); border-color: rgba(26, 154, 140, .55); transform: translateY(-2px); } .ev-aud__icon { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(26, 154, 140, .18); color: #7FD9CE; } .ev-aud__icon .icon { width: 18px; height: 18px; } .ev-aud__text { font-size: .93rem; font-weight: 500; line-height: 1.4; color: #fff; } .ev-aud__note { display: flex; align-items: center; gap: .65rem; margin: clamp(1.25rem, 2.4vw, 1.6rem) 0 0; padding-top: 1.1rem; border-top: 1px dashed rgba(255, 255, 255, .18); font-size: .9rem; color: var(--on-dark); } /* Small live dot: a quiet signal that seats are running out */ .ev-aud__pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F5B84B; } .ev-aud__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(245, 184, 75, .55); animation: evAudPulse 1.8s var(--ease) infinite; } @keyframes evAudPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ev-aud__pulse::after { animation: none; } .ev-aud__item { transition: none; } .ev-aud__item:hover { transform: none; } } /* --- Agenda: single rail with time on the left --- */ .ev-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; max-width: 820px; } .ev-ag { display: grid; grid-template-columns: 74px 1fr; gap: 1.25rem; position: relative; padding: 0 0 1.75rem; } .ev-ag::before { content: ""; position: absolute; left: 86px; top: .75rem; bottom: 0; width: 1px; background: var(--line); } .ev-ag:last-child { padding-bottom: 0; } .ev-ag:last-child::before { display: none; } .ev-ag::after { content: ""; position: absolute; left: 81px; top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-2); transition: transform .3s var(--ease), background .3s var(--ease); } .ev-ag:hover::after { background: var(--brand-2); transform: scale(1.25); } .ev-ag__time { font-size: .95rem; font-weight: 600; color: var(--primary); text-align: right; padding-top: .1rem; font-variant-numeric: tabular-nums; } .ev-ag__body { padding-left: 1.5rem; } .ev-ag__body h3 { font-size: 1.1rem; margin: 0 0 .35rem; letter-spacing: -0.01em; } .ev-ag__body p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; } /* --- Mentors --- */ .ev-speakers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 576px) { .ev-speakers { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .ev-speakers { grid-template-columns: repeat(3, 1fr); } } .ev-sp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding-bottom: 1.35rem; text-align: center; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; } .ev-sp:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 34px 60px -30px rgba(10, 37, 64, .4); } .ev-sp__photo { margin: 0 0 1.15rem; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; } .ev-sp__photo img { transition: transform .6s var(--ease); } .ev-sp:hover .ev-sp__photo img { transform: scale(1.06); } .ev-sp__name { font-size: 1.1rem; margin: 0 1rem .25rem; } .ev-sp__role { margin: 0 1rem; font-size: .88rem; color: var(--muted); } /* --- Venue --- */ .ev-venue { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } @media (min-width: 992px) { .ev-venue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } } .ev-venue__body h2 { letter-spacing: -0.02em; margin-bottom: .75rem; } .ev-venue__addr { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.25rem; } .ev-venue__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; } .ev-venue__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--text); } .ev-venue__list .icon { width: 19px; height: 19px; color: var(--brand-2); flex: none; margin-top: .15rem; } .ev-venue__map { margin: 0; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; } /* --- Related events --- */ .ev-related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); } .ev-related-head .section-head { margin-bottom: 0; } .ev-related-head__all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--primary); padding-bottom: .2rem; border-bottom: 1.5px solid currentColor; transition: gap .3s var(--ease), color .3s; } .ev-related-head__all .icon { width: 18px; height: 18px; } .ev-related-head__all:hover { gap: .8rem; color: var(--black); } .ev-related { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); grid-template-columns: 1fr; } @media (min-width: 768px) { .ev-related { grid-template-columns: repeat(3, 1fr); } } .ev-rel { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; box-shadow: 0 18px 40px -34px rgba(10, 37, 64, .35); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; } /* Brand bar that draws across the base of the card on hover */ .ev-rel::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--primary), var(--brand-2)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .ev-rel:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 36px 60px -34px rgba(10, 37, 64, .5); } .ev-rel:hover::after { transform: scaleX(1); } .ev-rel__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; } .ev-rel__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .ev-rel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, .35) 0%, rgba(10, 37, 64, 0) 45%, rgba(10, 37, 64, .25) 100%); } .ev-rel:hover .ev-rel__media img { transform: scale(1.07); } .ev-rel__date { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: grid; place-items: center; width: 58px; padding: .55rem 0 .5rem; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--primary); box-shadow: 0 10px 24px -12px rgba(10, 37, 64, .55); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 1; } .ev-rel__date strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--black); margin-bottom: .2rem; } .ev-rel__tag { position: absolute; top: 1rem; right: 1rem; z-index: 1; padding: .35rem .75rem; border-radius: 999px; background: rgba(10, 37, 64, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .ev-rel__body { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: 1.35rem 1.4rem 1.4rem; } .ev-rel__title { font-weight: 600; color: var(--black); font-size: var(--font-h3); line-height: 1.3; letter-spacing: -0.01em; transition: color .3s; } .ev-rel:hover .ev-rel__title { color: var(--primary); } .ev-rel__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; color: var(--muted); } .ev-rel__meta > span { display: inline-flex; align-items: center; gap: .4rem; } .ev-rel__meta .icon { width: 16px; height: 16px; color: var(--brand-2); } .ev-rel__foot { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--primary); } .ev-rel__go { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--primary); transition: background .35s var(--ease), border-color .35s, color .35s, transform .35s var(--ease); } .ev-rel__go .icon { width: 18px; height: 18px; } .ev-rel:hover .ev-rel__go { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateX(3px); } /* --- Section decoration: soft brand glows in the empty margins --- */ .ev-agenda-sec, .ev-speakers-sec, .ev-venue-sec, .ev-related-sec { position: relative; isolation: isolate; } .ev-speakers-sec::before, .ev-related-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 52% at 96% 6%, rgba(7, 87, 154, .07) 0%, rgba(7, 87, 154, 0) 70%), radial-gradient(38% 46% at 2% 94%, rgba(26, 154, 140, .07) 0%, rgba(26, 154, 140, 0) 70%); } /* --- Responsive --- */ @media (min-width: 576px) { .ev-facts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .ev-facts { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767.98px) { /* The strip stops overlapping on phones — stacked, a negative margin would bury the hero copy. */ .ev-facts-sec { margin-top: clamp(-2.5rem, -5vw, -1.5rem); } .ev-hero { padding-bottom: clamp(3.5rem, 12vw, 5rem); } .ev-hero__rings { opacity: .3; top: -14%; right: -28%; } .ev-hero__actions .btn { width: 100%; } .ev-hero__actions > [data-register-cta] { width: 100%; } .ev-ag { grid-template-columns: 58px 1fr; gap: .9rem; } .ev-ag::before { left: 68px; } .ev-ag::after { left: 63px; } .ev-ag__body { padding-left: 1.1rem; } .ev-ag__time { font-size: .85rem; } .ev-rel__body { padding: 1.15rem 1.15rem 1.2rem; } } @media (max-width: 991.98px) { /* Sticky is pointless once the card is stacked under the copy, and it fights the mobile bar. */ .ev-card.sticky-cta { position: static; } } /* The fixed register bar only exists below 992px, so only reserve space for it there — applying it at every width left a dead gap under the last section on desktop. */ @media (max-width: 991.98px) { body.has-mobile-bar .ev-related-sec { padding-bottom: calc(clamp(2.5rem, 4.5vw, 4rem) + 72px); } } @media (prefers-reduced-motion: reduce) { .ev-hl__item, .ev-sp, .ev-rel, .ev-rel::after, .ev-rel__media img, .ev-fact__icon, .ev-sp__photo img, .ev-rel__go, .ev-ag::after { transition: none; } .ev-hl__item:hover, .ev-sp:hover, .ev-rel:hover, .ev-rel:hover .ev-rel__media img { transform: none; } } /* ---------- 20. Utilities ---------- */ .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .text-center { text-align: center; } .max-w { max-width: 780px; } .mx-auto { margin-left: auto; margin-right: auto; } .stack > * + * { margin-top: 1.25rem; }