/* ========================================================================== SAARTHIFI SMART SOLUTIONS LLP — Website Design System Palette derived directly from the corporate logo: Deep Navy #132C5F (chariot, wordmark) Emerald #15723F (growth bars, circuit nodes) Golden #D9A22B (arc, arrow, wheel hub, "FI") ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* Brand — Navy */ --navy-900: #071430; --navy-800: #0B1F45; --navy-700: #132C5F; --navy-600: #1D3F7E; --navy-500: #2B559C; /* Brand — Emerald */ --green-800: #0B4A28; --green-700: #0F5C31; --green-600: #15723F; --green-500: #1E8A4E; --green-100: #E6F4EC; /* Brand — Gold */ --gold-700: #9A6F0C; --gold-600: #B8860B; --gold-500: #D9A22B; --gold-400: #EBB944; --gold-100: #FBF2DE; /* Neutrals */ --ink: #101828; --body: #414B60; --muted: #667085; --line: #E3E8F0; --line-soft: #EFF2F7; --bg: #FFFFFF; --bg-soft: #F5F7FB; --bg-navy-soft: #F2F5FA; /* Status */ --danger: #B42318; --danger-bg: #FEF3F2; --warn: #B54708; --warn-bg: #FFFAEB; --ok: #15723F; --ok-bg: #E6F4EC; /* Type */ --font-head: "Sora", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Space & shape */ --container: 1200px; --radius-s: 8px; --radius: 14px; --radius-l: 22px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06); --shadow-sm: 0 2px 8px rgba(19, 44, 95, .06); --shadow-md: 0 10px 28px rgba(19, 44, 95, .10); --shadow-lg: 0 24px 60px rgba(7, 20, 48, .16); --header-h: 78px; --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 2. Reset & base --------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Screen fit: nothing is allowed to push the page sideways. `clip` is used in preference to `hidden` where supported because `hidden` on turns the root into a scroll container and breaks `position: sticky` on the header. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: hidden; overflow-x: clip; } body { margin: 0; width: 100%; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } img, svg { max-width: 100%; display: block; } img { height: auto; } /* Long unbroken strings (URLs, references, email addresses) must wrap rather than widen their column — a common cause of sideways scroll on phones. */ p, li, td, th, h1, h2, h3, h4, h5, dd, span, a { overflow-wrap: break-word; } a { color: var(--navy-600); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--gold-600); } ul, ol { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--navy-800); line-height: 1.18; margin: 0 0 .6em; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); } h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); } h4 { font-size: 1.06rem; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--gold-100); color: var(--navy-800); } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy-700); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } /* ---------- 3. Layout helpers ------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: 880px; } /* Grid and flex children default to min-width:auto, which lets wide content (tables, long words, iframes) blow the track out past the viewport. */ .grid > *, .split > *, .contact-grid > * { min-width: 0; } .section { padding: clamp(56px, 7vw, 104px) 0; } .section--tight { padding: clamp(40px, 5vw, 68px) 0; } .section--soft { background: var(--bg-soft); } .section--navy { background: var(--navy-800); color: #C8D3E6; } .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .stack-6 { display: grid; gap: 6px; } .stack-12 { display: grid; gap: 12px; } .stack-20 { display: grid; gap: 20px; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } /* ---------- 4. Section headings ----------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-600); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-500), var(--green-500)); } .section--navy .eyebrow { color: var(--gold-400); } .section-head { max-width: 760px; margin-bottom: clamp(34px, 4vw, 56px); } .section-head.text-center { margin-inline: auto; } .section-head p { font-size: 1.06rem; color: var(--muted); margin-bottom: 0; } .section--navy .section-head p { color: #A9B8D2; } .lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.18rem); color: var(--body); } /* ---------- 5. Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: 14px 26px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: all .22s var(--ease); text-align: center; line-height: 1.2; } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--navy-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--gold { background: var(--gold-500); color: var(--navy-900); } .btn--gold:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217, 162, 43, .32); } .btn--green { background: var(--green-600); color: #fff; } .btn--green:hover { background: var(--green-500); color: #fff; transform: translateY(-2px); } .btn--ghost { border-color: var(--line); color: var(--navy-700); background: #fff; } .btn--ghost:hover { border-color: var(--navy-600); color: var(--navy-700); transform: translateY(-2px); } .btn--ghost-light { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; } .btn--ghost-light:hover { border-color: var(--gold-400); color: var(--gold-400); background: rgba(255, 255, 255, .05); } .btn--sm { padding: 10px 18px; font-size: .86rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .link-arrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-700); } .link-arrow svg { width: 15px; height: 15px; transition: transform .22s var(--ease); } .link-arrow:hover { color: var(--gold-600); } .link-arrow:hover svg { transform: translateX(4px); } /* ---------- 6. Header ---------------------------------------------------- */ /* IMPORTANT: the frosted-glass blur lives on ::before, NOT on .site-header itself. `backdrop-filter` (like `filter`) turns an element into the containing block for any `position: fixed` descendant. With the blur on the header, the mobile navigation drawer — which is a fixed child of the header — was being sized against the 75px-tall header instead of the viewport, so it opened as a ~40px sliver with all eight menu items scrolled out of sight. Keeping the blur on a childless pseudo-element preserves the look and lets the drawer resolve against the viewport again. Do not move it back. */ .site-header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid var(--line-soft); transition: box-shadow .25s var(--ease); } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .site-header.is-stuck { box-shadow: 0 6px 24px rgba(19, 44, 95, .09); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--header-h); } /* Brand — logo, name and descriptor collected into ONE clean button-shaped block, so the left of the header reads as a single object instead of three competing ones. */ .brand { display: inline-flex; align-items: center; gap: 12px; flex: none; padding: 6px 15px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-xs); transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .brand:hover { border-color: var(--gold-500); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .brand:hover .brand__name { color: var(--navy-700); } .brand__mark { display: grid; place-items: center; flex: none; padding-right: 12px; border-right: 1px solid var(--line-soft); } .brand__logo { height: 42px; width: auto; object-fit: contain; /* aspect ratio preserved */ flex: none; } .brand__text { display: grid; gap: 1px; line-height: 1.08; } .brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; color: var(--navy-800); letter-spacing: .01em; white-space: nowrap; transition: color .22s var(--ease); } .brand__name em { font-style: normal; color: var(--gold-600); } .brand__tag { font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); white-space: nowrap; } /* Nav */ .nav { display: flex; align-items: center; gap: 2px; min-width: 0; } .nav__item { position: relative; list-style: none; } .nav__link { display: flex; align-items: center; gap: 4px; font-family: var(--font-head); font-weight: 500; font-size: .84rem; color: var(--navy-800); padding: 9px 10px; border-radius: 8px; transition: all .2s var(--ease); white-space: nowrap; } .nav__link:hover { background: var(--bg-navy-soft); color: var(--navy-700); } .nav__link.is-active { color: var(--green-600); font-weight: 700; } .nav__link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-500); } .nav__caret { width: 11px; height: 11px; transition: transform .2s var(--ease); } .nav__item:hover .nav__caret { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 272px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s var(--ease); list-style: none; } /* Menus belonging to the last items align to their right edge so they can never hang off the side of the page. */ .nav__item:nth-last-child(-n+2) .nav__dropdown { left: auto; right: 0; } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 9px; font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--navy-800); } .nav__dropdown a span { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--muted); } .nav__dropdown a:hover { background: var(--bg-navy-soft); color: var(--navy-700); } .header-cta { display: flex; align-items: center; gap: 10px; flex: none; } .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; padding: 9px; color: var(--navy-800); } .nav-toggle svg { width: 22px; height: 22px; } /* ---------- 7. Announcement / ticker ------------------------------------ */ .topbar { background: linear-gradient(90deg, var(--navy-800), var(--navy-700) 55%, var(--green-800)); color: #DCE5F2; font-size: .8rem; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 40px; flex-wrap: wrap; padding-block: 6px; } .topbar a { color: #fff; font-weight: 600; } .topbar a:hover { color: var(--gold-400); } .topbar__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-width: 0; } .topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .topbar__meta svg { width: 14px; height: 14px; opacity: .85; flex: none; } .topbar__sep { font-style: normal; opacity: .45; padding-inline: 1px; } .topbar__cta { flex: none; } .ticker { display: flex; align-items: center; gap: 14px; overflow: hidden; background: var(--navy-900); color: #fff; border-top: 1px solid rgba(255,255,255,.08); } .ticker__label { display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--gold-500); color: var(--navy-900); font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; } .ticker__label svg { width: 14px; height: 14px; } .ticker__viewport { overflow: hidden; flex: 1; } .ticker__track { display: flex; gap: 46px; white-space: nowrap; animation: ticker 48s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: #D5DFEF; } .ticker__item b { color: var(--gold-400); font-weight: 600; } .ticker__item a { color: #D5DFEF; } .ticker__item a:hover { color: #fff; } .ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); flex: none; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 8. Hero ------------------------------------------------------ */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 520px at 88% 8%, rgba(217, 162, 43, .16), transparent 62%), radial-gradient(760px 520px at 8% 92%, rgba(21, 114, 63, .20), transparent 60%), linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 46%, #0E2C57 100%); color: #C9D5E9; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 30%, transparent 78%); } .hero > * { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .hero h1 { color: #fff; margin-bottom: 20px; } .hero h1 .accent-gold { color: var(--gold-400); } .hero h1 .accent-green { color: #4FCB86; } .hero__sub { font-size: clamp(1.02rem, .96rem + .38vw, 1.18rem); color: #AEC0DC; max-width: 620px; margin-bottom: 30px; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(217, 162, 43, .38); color: var(--gold-400); border-radius: 999px; padding: 7px 16px 7px 8px; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 22px; } .hero__badge b { background: var(--gold-500); color: var(--navy-900); border-radius: 999px; padding: 3px 10px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; } .hero__proof { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); } .hero__proof div { display: grid; gap: 2px; } .hero__proof strong { font-family: var(--font-head); font-size: 1.6rem; color: #fff; line-height: 1.1; } .hero__proof span { font-size: .78rem; color: #93A6C6; letter-spacing: .03em; } /* Hero logo showcase card */ .hero-logo-card { background: #fff; border-radius: var(--radius-l); padding: 26px; box-shadow: 0 30px 70px rgba(4, 12, 30, .45); position: relative; } .hero-logo-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: linear-gradient(135deg, var(--gold-500), var(--green-500), var(--navy-600)); opacity: .6; } .hero-logo-card__img { width: 100%; height: auto; border-radius: 12px; } .hero-logo-card__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .hero-logo-card__strip div { text-align: center; } .hero-logo-card__strip svg { width: 22px; height: 22px; margin: 0 auto 6px; } .hero-logo-card__strip span { font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-700); } /* Page hero (inner pages) */ .page-hero { position: relative; overflow: hidden; background: radial-gradient(700px 400px at 92% 10%, rgba(217, 162, 43, .14), transparent 60%), linear-gradient(140deg, var(--navy-900), var(--navy-700) 78%); color: #B9C8E1; padding: clamp(46px, 6vw, 78px) 0; } .page-hero::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 340px; height: 340px; border-radius: 50%; border: 44px solid rgba(21, 114, 63, .18); } .page-hero > * { position: relative; z-index: 1; } .page-hero h1 { color: #fff; margin-bottom: 14px; } .page-hero p { font-size: 1.08rem; color: #A9BAD6; max-width: 720px; margin-bottom: 0; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: #8CA0C2; margin-bottom: 18px; list-style: none; } .breadcrumb a { color: #A9BAD6; } .breadcrumb a:hover { color: var(--gold-400); } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #5B7099; } /* ---------- 9. Cards ----------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: all .26s var(--ease); position: relative; overflow: hidden; } .card:hover { border-color: #C9D6EA; box-shadow: var(--shadow-md); transform: translateY(-4px); } .card h3 { margin-bottom: 10px; } .card p { font-size: .94rem; color: var(--muted); } .card--link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--green-500)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .card--link:hover::after { transform: scaleX(1); } .card__icon { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: var(--bg-navy-soft); color: var(--navy-700); transition: all .26s var(--ease); } .card__icon svg { width: 27px; height: 27px; } .card:hover .card__icon { background: var(--navy-700); color: var(--gold-400); } .card__icon--green { background: var(--green-100); color: var(--green-600); } .card:hover .card__icon--green { background: var(--green-600); color: #fff; } .card__icon--gold { background: var(--gold-100); color: var(--gold-700); } .card:hover .card__icon--gold { background: var(--gold-500); color: var(--navy-900); } .card__meta { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); margin-bottom: 12px; } /* Nav cards on homepage */ .navcard { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: all .26s var(--ease); } .navcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #C9D6EA; } .navcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .navcard__num { font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--gold-600); } .navcard h3 { font-size: 1.12rem; margin: 0; } .navcard p { font-size: .9rem; color: var(--muted); margin: 0; } .navcard svg.navcard__icon { width: 26px; height: 26px; color: var(--green-600); } /* Feature / split blocks */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: center; } .split--reverse .split__media { order: 2; } /* ---------- 10. Pillars -------------------------------------------------- */ .pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 32px; position: relative; overflow: hidden; transition: all .28s var(--ease); display: flex; flex-direction: column; } .pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .pillar__band { position: absolute; inset: 0 0 auto 0; height: 5px; } .pillar--1 .pillar__band { background: linear-gradient(90deg, var(--navy-700), var(--navy-500)); } .pillar--2 .pillar__band { background: linear-gradient(90deg, var(--green-700), var(--green-500)); } .pillar--3 .pillar__band { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); } .pillar__tag { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; } .pillar__icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; } .pillar__icon svg { width: 28px; height: 28px; } .pillar--1 .pillar__icon { background: var(--bg-navy-soft); color: var(--navy-700); } .pillar--2 .pillar__icon { background: var(--green-100); color: var(--green-600); } .pillar--3 .pillar__icon { background: var(--gold-100); color: var(--gold-700); } .pillar__list { list-style: none; display: grid; gap: 14px; margin: 20px 0 24px; } .pillar__list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: .92rem; } .pillar__list li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--green-600); } .pillar__list strong { color: var(--navy-800); font-weight: 650; display: block; font-size: .95rem; } .pillar__list span { color: var(--muted); font-size: .88rem; } .pillar .link-arrow { margin-top: auto; } /* ---------- 11. Values (S-A-A-R-T-H-I-F-I) ------------------------------- */ .values-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .values-word button { width: 60px; height: 60px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--navy-700); transition: all .24s var(--ease); } .values-word button:hover { border-color: var(--gold-500); color: var(--gold-600); transform: translateY(-3px); } .values-word button.is-active { background: var(--navy-700); border-color: var(--navy-700); color: var(--gold-400); box-shadow: var(--shadow-md); transform: translateY(-3px); } .value-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(26px, 4vw, 42px); display: grid; grid-template-columns: 84px 1fr; gap: 28px; align-items: start; box-shadow: var(--shadow-sm); } .value-panel__mark { width: 84px; height: 84px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, var(--navy-700), var(--navy-600)); color: var(--gold-400); font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; } .value-panel h3 { margin-bottom: 8px; } .value-panel p { margin: 0; font-size: 1.02rem; } .value-panel__note { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .88rem; color: var(--green-700); display: flex; gap: 9px; align-items: flex-start; } .value-panel__note svg { width: 16px; height: 16px; margin-top: 3px; flex: none; } .value-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; transition: all .24s var(--ease); } .value-tile:hover { border-color: var(--gold-500); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .value-tile__mark { width: 40px; height: 40px; border-radius: 11px; background: var(--navy-700); color: var(--gold-400); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin-bottom: 14px; } .value-tile h4 { margin-bottom: 6px; } .value-tile p { font-size: .87rem; color: var(--muted); margin: 0; } /* ---------- 12. Stats ---------------------------------------------------- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; } .stat-band > div { background: var(--navy-800); padding: 30px 24px; text-align: center; } .stat-band strong { display: block; font-family: var(--font-head); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); color: var(--gold-400); line-height: 1.05; margin-bottom: 6px; } .stat-band span { font-size: .84rem; color: #A9B8D2; } /* ---------- 13. Comparison table ---------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } table.tbl { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .93rem; } table.tbl thead th { background: var(--navy-800); color: #fff; text-align: left; padding: 16px 20px; font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .03em; } table.tbl thead th.is-highlight { background: var(--green-700); } table.tbl td { padding: 15px 20px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--body); } table.tbl tbody tr:nth-child(even) { background: #FAFBFD; } table.tbl td:first-child { font-weight: 600; color: var(--navy-800); } table.tbl td.is-highlight { background: rgba(21, 114, 63, .05); color: var(--green-800); font-weight: 500; } table.tbl tbody tr:nth-child(even) td.is-highlight { background: rgba(21, 114, 63, .08); } .tick { display: inline-flex; width: 17px; height: 17px; color: var(--green-600); margin-right: 7px; vertical-align: -3px; } .cross { display: inline-flex; width: 17px; height: 17px; color: #98A2B3; margin-right: 7px; vertical-align: -3px; } /* ---------- 14. Team ----------------------------------------------------- */ .bucket-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--line); } .bucket-head__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: none; } .bucket-head__icon svg { width: 24px; height: 24px; } .bucket-head--partners .bucket-head__icon { background: var(--navy-700); color: var(--gold-400); } .bucket-head--experts .bucket-head__icon { background: var(--green-600); color: #fff; } .bucket-head h2 { margin: 0 0 2px; font-size: 1.5rem; } .bucket-head p { margin: 0; font-size: .9rem; color: var(--muted); } .bucket-head__count { margin-left: auto; font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 30px; transition: all .26s var(--ease); position: relative; overflow: hidden; } .person:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .person::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .person--partner::before { background: linear-gradient(90deg, var(--navy-700), var(--gold-500)); } .person--expert::before { background: linear-gradient(90deg, var(--green-600), var(--gold-500)); } .person__avatar { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.65rem; color: #fff; margin-bottom: 18px; letter-spacing: .02em; } /* Photograph variant — same circle, real picture instead of initials */ .person__avatar--photo { width: 96px; height: 96px; padding: 0; overflow: hidden; background: var(--bg-soft); box-shadow: 0 0 0 3px #fff, var(--shadow-sm); } .person__avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .person--expert .person__avatar--photo, .person--partner .person__avatar--photo { background: var(--bg-soft); } .person--partner .person__avatar { background: linear-gradient(145deg, var(--navy-700), var(--navy-500)); } .person--expert .person__avatar { background: linear-gradient(145deg, var(--green-700), var(--green-500)); } .person h3 { margin-bottom: 4px; } .person__role { font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 14px; } .person p { font-size: .93rem; color: var(--muted); } .person__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .chip { font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--bg-navy-soft); color: var(--navy-700); border: 1px solid var(--line); } .chip--green { background: var(--green-100); color: var(--green-700); border-color: rgba(21,114,63,.18); } .chip--gold { background: var(--gold-100); color: var(--gold-700); border-color: rgba(217,162,43,.28); } /* ---------- 15. Filters / tabs ------------------------------------------ */ .filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); margin-bottom: 30px; } .filterbar__label { font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .filter-btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-family: var(--font-head); font-size: .84rem; font-weight: 600; color: var(--navy-800); transition: all .2s var(--ease); } .filter-btn svg { width: 15px; height: 15px; } .filter-btn:hover { border-color: var(--navy-600); } .filter-btn.is-active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .filter-btn.is-active svg { color: var(--gold-400); } .filter-count { font-size: .74rem; background: rgba(255,255,255,.18); border-radius: 999px; padding: 1px 8px; } .filter-btn:not(.is-active) .filter-count { background: var(--bg-soft); color: var(--muted); } .search-field { position: relative; flex: 1; min-width: 220px; margin-left: auto; } .search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); } .search-field input { width: 100%; padding: 11px 14px 11px 42px; border: 1.5px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); transition: border-color .2s var(--ease); } .search-field input:focus { outline: none; border-color: var(--navy-600); } /* ---------- 16. Updates feed -------------------------------------------- */ .update { display: grid; grid-template-columns: 96px 1fr; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: all .24s var(--ease); } .update:hover { border-color: #C9D6EA; box-shadow: var(--shadow-sm); } .update__date { text-align: center; border-right: 1px solid var(--line-soft); padding-right: 20px; } .update__date b { display: block; font-family: var(--font-head); font-size: 1.75rem; color: var(--navy-800); line-height: 1; } .update__date span { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .update__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .update h3 { font-size: 1.1rem; margin: 0 0 8px; } .update p { font-size: .93rem; color: var(--muted); margin-bottom: 14px; } .update__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: .82rem; color: var(--muted); } .update__foot span { display: inline-flex; align-items: center; gap: 6px; } .update__foot svg { width: 14px; height: 14px; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; } .tag svg { width: 13px; height: 13px; } .tag--direct { background: var(--bg-navy-soft); color: var(--navy-700); } .tag--indirect { background: var(--green-100); color: var(--green-700); } .tag--other { background: var(--gold-100); color: var(--gold-700); } .tag--alert { background: var(--danger-bg); color: var(--danger); } /* Homepage update preview list */ .mini-update { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px dashed var(--line); } .mini-update:last-child { border-bottom: 0; padding-bottom: 0; } .mini-update__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mini-update__date { font-size: .78rem; color: var(--muted); } .mini-update h4 { margin: 0; font-size: .98rem; line-height: 1.45; } .mini-update h4 a { color: var(--navy-800); } .mini-update h4 a:hover { color: var(--gold-600); } .mini-update p { font-size: .87rem; color: var(--muted); margin: 0; } /* ---------- 17. Compliance calendar ------------------------------------- */ .cal-shell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-sm); overflow: hidden; } .cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); } .cal-nav { display: flex; align-items: center; gap: 8px; } .cal-nav button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; display: grid; place-items: center; transition: all .2s var(--ease); } .cal-nav button:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); } .cal-nav button svg { width: 17px; height: 17px; } .cal-title { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; color: #fff; min-width: 200px; } .cal-title span { display: block; font-family: var(--font-body); font-size: .76rem; font-weight: 400; color: #9DB0CE; letter-spacing: .04em; } .cal-views { display: flex; gap: 6px; margin-left: auto; background: rgba(255,255,255,.08); padding: 4px; border-radius: 10px; } .cal-views button { border: 0; background: transparent; color: #C3D0E6; padding: 8px 16px; border-radius: 7px; font-family: var(--font-head); font-size: .82rem; font-weight: 600; transition: all .2s var(--ease); } .cal-views button.is-active { background: #fff; color: var(--navy-800); } .cal-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--bg-soft); } .legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px 6px 8px; color: var(--navy-800); transition: all .2s var(--ease); } .legend-item.is-off { opacity: .42; } .legend-item__ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; } .legend-item__ico svg { width: 14px; height: 14px; } /* Category colours (shared by legend + calendar + list) */ .cat-gst { --cat: #15723F; --cat-bg: #E6F4EC; } .cat-tds { --cat: #132C5F; --cat-bg: #EDF1F9; } .cat-it { --cat: #1D3F7E; --cat-bg: #EAF0FB; } .cat-roc { --cat: #9A6F0C; --cat-bg: #FBF2DE; } .cat-pfesi { --cat: #7A3E9D; --cat-bg: #F4EBFA; } .cat-other { --cat: #B54708; --cat-bg: #FFF6ED; } .legend-item .legend-item__ico { background: var(--cat-bg); color: var(--cat); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-dow { padding: 12px 8px; text-align: center; font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: #fff; } .cal-cell { min-height: 122px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 8px; display: flex; flex-direction: column; gap: 5px; background: #fff; transition: background .2s var(--ease); } .cal-cell:nth-child(7n) { border-right: 0; } .cal-cell.is-muted { background: #FBFCFE; } .cal-cell.is-weekend { background: #FAFBFD; } .cal-cell.has-events:hover { background: #F7FAFF; } .cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--gold-500); } .cal-daynum { font-family: var(--font-head); font-size: .84rem; font-weight: 700; color: var(--navy-800); } .cal-cell.is-muted .cal-daynum { color: #B6BFCE; font-weight: 500; } .cal-cell.is-today .cal-daynum { color: var(--gold-700); } .cal-chip { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--cat, var(--navy-700)); background: var(--cat-bg, var(--bg-soft)); color: var(--cat, var(--navy-700)); border-radius: 5px; padding: 4px 6px; font-size: .69rem; font-weight: 700; line-height: 1.3; transition: all .18s var(--ease); } .cal-chip:hover { filter: brightness(.95); transform: translateX(2px); } .cal-chip svg { width: 12px; height: 12px; flex: none; } .cal-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-more { font-size: .68rem; font-weight: 700; color: var(--muted); background: none; border: 0; text-align: left; padding: 2px 4px; } /* Calendar list view */ .cal-list { padding: 8px 0; } .cal-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 20px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line-soft); transition: background .2s var(--ease); } .cal-row:hover { background: #F7FAFF; } .cal-row:last-child { border-bottom: 0; } .cal-row__date { text-align: center; border-radius: 10px; padding: 8px 4px; background: var(--cat-bg, var(--bg-soft)); color: var(--cat, var(--navy-700)); } .cal-row__date b { display: block; font-family: var(--font-head); font-size: 1.32rem; line-height: 1; } .cal-row__date span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cal-row h4 { margin: 0 0 4px; font-size: 1rem; } .cal-row p { margin: 0; font-size: .87rem; color: var(--muted); } .cal-row__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pill { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .pill--cat { background: var(--cat-bg); color: var(--cat); } .pill--due { background: var(--warn-bg); color: var(--warn); } .pill--urgent { background: var(--danger-bg); color: var(--danger); } .pill--done { background: var(--ok-bg); color: var(--ok); } .pill--revised { background: #EEF4FF; color: #3538CD; } /* Upcoming deadline card (homepage) */ .deadline-card { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .22s var(--ease); } .deadline-card:hover { transform: translateX(3px); border-color: #C9D6EA; box-shadow: var(--shadow-xs); } .deadline-card__date { text-align: center; border-radius: 11px; padding: 9px 4px; background: var(--cat-bg, var(--bg-soft)); color: var(--cat, var(--navy-700)); } .deadline-card__date b { display: block; font-family: var(--font-head); font-size: 1.3rem; line-height: 1; } .deadline-card__date span { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .deadline-card h4 { margin: 0 0 3px; font-size: .95rem; } .deadline-card p { margin: 0; font-size: .8rem; color: var(--muted); } .deadline-card__days { font-family: var(--font-head); font-size: .72rem; font-weight: 700; color: var(--warn); white-space: nowrap; } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(7, 20, 48, .58); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; z-index: 200; opacity: 0; visibility: hidden; transition: all .24s var(--ease); } .modal-backdrop.is-open { opacity: 1; visibility: visible; } .modal { background: #fff; border-radius: var(--radius-l); max-width: 560px; width: 100%; max-height: 84vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); transition: transform .24s var(--ease); } .modal-backdrop.is-open .modal { transform: none; } .modal__head { padding: 24px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .modal__head h3 { margin: 0 0 6px; font-size: 1.2rem; } .modal__close { border: 0; background: var(--bg-soft); border-radius: 9px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); flex: none; } .modal__close:hover { background: var(--navy-700); color: #fff; } .modal__close svg { width: 17px; height: 17px; } .modal__body { padding: 24px 26px; } .modal__body dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 18px; margin: 0; font-size: .92rem; } .modal__body dt { font-weight: 600; color: var(--muted); font-size: .84rem; } .modal__body dd { margin: 0; color: var(--navy-800); } /* ---------- 18. Accordion (FAQ) ----------------------------------------- */ .acc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; } .acc + .acc { margin-top: 12px; } .acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: none; border: 0; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--navy-800); transition: background .2s var(--ease); } .acc__q:hover { background: var(--bg-soft); } .acc__q svg { width: 20px; height: 20px; color: var(--green-600); flex: none; transition: transform .24s var(--ease); } .acc.is-open .acc__q { background: var(--bg-soft); } .acc.is-open .acc__q svg { transform: rotate(45deg); color: var(--gold-600); } .acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); } .acc.is-open .acc__a { grid-template-rows: 1fr; } .acc__a > div { overflow: hidden; } .acc__a p { padding: 0 24px 22px; font-size: .95rem; color: var(--muted); margin: 0; } .acc__a ul { padding: 0 24px 22px 44px; font-size: .95rem; color: var(--muted); display: grid; gap: 8px; } /* ---------- 19. Tools / placeholder cards -------------------------------- */ .tool { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: all .26s var(--ease); position: relative; } .tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .tool--soon { background: repeating-linear-gradient(135deg, #fff, #fff 12px, #FBFCFE 12px, #FBFCFE 24px); } .tool__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .tool__icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-navy-soft); color: var(--navy-700); flex: none; } .tool__icon svg { width: 25px; height: 25px; } .tool h3 { font-size: 1.08rem; margin: 0 0 6px; } .tool p { font-size: .9rem; color: var(--muted); margin: 0; } .status { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .status--live { background: var(--ok-bg); color: var(--ok); } .status--beta { background: var(--gold-100); color: var(--gold-700); } .status--soon { background: var(--bg-soft); color: var(--muted); border: 1px dashed var(--line); } .tool__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); } /* ---------- 20. Media library / blogs ------------------------------------ */ .media { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: all .26s var(--ease); display: flex; flex-direction: column; } .media:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .media__thumb { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); overflow: hidden; } .media__thumb::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 30px 30px; } .media__thumb--green { background: linear-gradient(135deg, var(--green-800), var(--green-500)); } .media__thumb--gold { background: linear-gradient(135deg, var(--gold-700), var(--gold-500)); } .media__play { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--navy-800); transition: transform .24s var(--ease); border: 0; padding: 0; cursor: pointer; /* it is a