/* ========================================================================== GlobalMedAcademy — Design System ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --brand: #1257E0; --brand-600: #0F4CC7; --brand-700: #0C3EA3; --brand-300: #74A5F7; --brand-100: #DCE8FF; --brand-50: #EEF4FF; --cyan: #29A9E1; /* Ink */ --navy: #0F2557; --navy-deep: #0C1F52; --ink: #1B2A4A; --body: #4A5878; --muted: #78859F; /* Surface */ --white: #FFFFFF; --surface: #FFFFFF; --tint: #F1F6FF; --tint-2: #F7FAFF; --line: #E3EAF6; --line-soft: #EDF2FA; /* Accent */ --star: #F6A609; --amber: #F2A81D; --amber-dark: #DE961A; --success: #17A673; /* Type */ --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Radius */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Elevation */ --sh-sm: 0 1px 2px rgba(15, 37, 87, .06), 0 1px 3px rgba(15, 37, 87, .04); --sh: 0 2px 6px rgba(15, 37, 87, .06), 0 8px 20px rgba(15, 37, 87, .05); --sh-md: 0 4px 12px rgba(15, 37, 87, .08), 0 16px 36px rgba(15, 37, 87, .08); --sh-lg: 0 10px 24px rgba(15, 37, 87, .10), 0 28px 60px rgba(15, 37, 87, .12); /* Layout */ --container: 1180px; --header-height: 64px; --header-h: var(--header-height); /* alias, kept for existing rules */ --course-tint: #F3F8FF; --ease: cubic-bezier(.4, 0, .2, 1); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* No overflow-x:hidden here — it turns into a scroll container and silently breaks `position: sticky` for the course enrollment card. Horizontal overflow is prevented per-component instead. */ } h1, h2, h3, h4, h5 { margin: 0; color: var(--navy); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ---------- 3. Layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .section { padding: 68px 0; } .section--tight { padding: 48px 0; } .section--tint { background: var(--tint-2); } .section-head { text-align: center; max-width: 700px; margin: 0 auto 36px; } .eyebrow { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; } .section-head h2 { font-size: clamp(26px, 3.3vw, 34px); } .section-head p { margin-top: 12px; font-size: 16px; color: var(--body); } .grid { display: grid; gap: 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- 4. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; transition: all .2s var(--ease); border: 1.5px solid transparent; } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(18, 87, 224, .25); } .btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18, 87, 224, .32); } .btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); } .btn-outline:hover { background: var(--brand-50); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); } .btn-ghost:hover { border-color: var(--brand-300); color: var(--brand); } .btn-white { background: #fff; color: var(--brand); } .btn-white:hover { background: var(--brand-50); transform: translateY(-1px); } .btn-on-navy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn-on-navy:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } /* Amber CTA — the primary action on program cards. */ .btn-amber { background: var(--amber); color: var(--navy); font-weight: 700; } .btn-amber:hover { background: var(--amber-dark); color: var(--navy); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(222, 150, 26, .35); } .btn-sm { padding: 9px 18px; font-size: 13.5px; } .btn-lg { padding: 14px 30px; font-size: 15.5px; } .btn-block { width: 100%; } /* ---------- 5. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 1px 16px rgba(15, 37, 87, .06); } .header-inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } /* Brand */ .brand { display: inline-flex; align-items: baseline; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); justify-self: start; } .brand em { font-style: normal; color: var(--cyan); } /* Centred nav — compact */ .main-nav { justify-self: center; display: flex; align-items: center; gap: 28px; } .main-nav a { position: relative; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; padding: 6px 0; transition: color .18s var(--ease); white-space: nowrap; } .main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease); } .main-nav a:hover { color: var(--brand); } .main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); } .main-nav a.is-active { color: var(--brand); } /* The CTA lives in .header-actions on desktop and inside the drawer on mobile. */ .main-nav .btn { display: none; } .header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .25s var(--ease), opacity .25s var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 6. Hero ---------- */ .hero { position: relative; background: #F7FAFF; overflow: hidden; } /* Full-bleed hero photograph. The artwork carries its own blue/teal shapes and leaves the left third open for copy, so it is anchored right and covered by a horizontal white scrim that keeps the headline legible. */ .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; /* Anchored top so the crop only removes floor, never the subject's head. */ object-position: right 5%; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 30%, rgba(255, 255, 255, .62) 46%, rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, 0) 72% ); } .hero > .container { position: relative; z-index: 1; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 460px; padding: 40px 0 32px; } /* `cover` scales the photo with the hero's WIDTH, so a fixed height crops more and more as the screen widens. Tying the height to vw keeps the crop constant (~770 of the photo's 941 rows) at every desktop size, which keeps the subject's crossed arms in frame instead of cutting mid-forearm. */ @media (min-width: 900px) { .hero-inner { min-height: clamp(460px, 37vw, 660px); } } .hero h1 { font-size: clamp(34px, 4.8vw, 52px); line-height: 1.1; margin-bottom: 18px; max-width: 11ch; } .hero-sub { font-size: 16.5px; line-height: 1.7; max-width: 44ch; margin-bottom: 28px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero-checks { display: flex; flex-wrap: wrap; gap: 12px 26px; } .hero-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); } .hero-check svg { color: var(--brand); flex: none; } /* Hero visual — now only holds the floating rating card; the doctor and the blue shapes come from the hero photograph itself. */ .hero-visual { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 440px; } .hero-rating { position: absolute; right: 0; bottom: 74px; z-index: 3; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 16px 22px; text-align: center; animation: floaty 5s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-rating-top { display: flex; align-items: center; gap: 8px; justify-content: center; } .hero-rating-top svg { color: var(--brand); } .hero-rating-score { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; } .hero-rating-label { font-size: 12.5px; font-weight: 700; color: var(--body); margin-top: 2px; } .stars { display: inline-flex; gap: 2px; margin-top: 6px; color: var(--star); } /* ---------- 7. Trust bar ---------- */ .trustbar { border-top: 1px solid var(--line-soft); padding: 34px 0 38px; background: #fff; } .trustbar h3 { text-align: center; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 24px; } /* ---- Trust strip: continuous logo slider ---- The track holds the logo list twice and translates by exactly -50%, so the second copy lands where the first began and the loop never jumps. That only works if every item contributes identical width, which is why the spacing is item padding rather than `gap` — `gap` adds one fewer gap than items and would throw the 50% out. */ .trust-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .tm-track { display: flex; align-items: center; width: max-content; animation: tm-scroll 45s linear infinite; } @keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .trust-marquee:hover .tm-track, .trust-marquee:focus-within .tm-track { animation-play-state: paused; } .tm-item { flex: none; width: 212px; padding: 0 24px; display: flex; align-items: center; justify-content: center; } .tm-item img { width: 100%; height: auto; aspect-ratio: 600 / 240; object-fit: contain; opacity: .9; transition: opacity .22s var(--ease), transform .22s var(--ease); } .tm-item:hover img { opacity: 1; transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .tm-track { animation: none; } .trust-marquee { overflow-x: auto; } } @media (max-width: 620px) { .tm-item { width: 158px; padding: 0 16px; } } .partner-row { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; } .partner { display: flex; align-items: center; gap: 11px; justify-content: center; padding: 6px 12px; border-left: 1px solid var(--line-soft); filter: grayscale(1); opacity: .72; transition: opacity .22s var(--ease), filter .22s var(--ease); } .partner:first-child { border-left: 0; } .partner:hover { opacity: 1; filter: grayscale(0); } .partner-mark { flex: none; color: var(--muted); } .partner span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.32; max-width: 108px; } /* ---------- 8. Program tabs + cards ---------- */ .tabs { display: inline-flex; padding: 5px; background: var(--tint); border-radius: var(--r-pill); margin: 0 auto 34px; gap: 4px; } .tabs-wrap { display: flex; justify-content: center; max-width: 100%; } .tab { padding: 10px 26px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; color: var(--body); transition: all .22s var(--ease); white-space: nowrap; } .tab:hover { color: var(--brand); } .tab.is-active { background: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(18, 87, 224, .3); } /* Card */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* ---- Program card ---------------------------------------------------- Shared by the homepage grid, the programs listing and the related strip, so this one block controls the card everywhere on the site. */ .pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } .pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--brand-100); } .pcard-media { position: relative; display: block; margin: 10px 10px 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--tint); } .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .pcard:hover .pcard-media img { transform: scale(1.05); } /* CPD pill sits on the artwork, top right */ .pcard-cpd { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(15, 37, 87, .16); font-size: 12.5px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; white-space: nowrap; } .pcard-cpd svg { color: var(--brand); flex: none; } .pcard-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 18px; text-align: left; } .pcard h3 { font-size: 20px; line-height: 1.3; /* reserve two lines so the meta row aligns across cards */ min-height: 2.6em; letter-spacing: -.02em; margin-bottom: 14px; } .pcard h3 a { color: inherit; display: block; } .pcard:hover h3 a { color: var(--brand); } .pcard-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .pcard-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); } .pcard-meta-item svg { color: var(--brand); flex: none; } .pcard-meta-sep { width: 1px; height: 17px; background: var(--line); flex: none; } /* Knowledge partner panel */ .pcard-kp { margin-top: auto; background: var(--brand-50); border-radius: var(--r); padding: 14px 16px 15px; margin-bottom: 16px; } .pcard-kp h4 { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 11px; } .pcard-kp-row { display: flex; align-items: center; gap: 14px; min-height: 40px; } .pcard-kp-row img { height: 40px; width: auto; max-width: calc(33.333% - 10px); object-fit: contain; object-position: left center; } @media (max-width: 900px) { .pcard h3 { font-size: 18px; } .pcard-kp-row img { height: 34px; } } .card-grid-foot { display: flex; justify-content: center; margin-top: 34px; } .empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--muted); font-weight: 600; } /* ---------- 9. Stats ---------- */ .stats { background: var(--tint); border-radius: var(--r-lg); padding: 26px 20px; display: grid; grid-template-columns: repeat(4, 1fr); } .stat { display: flex; align-items: center; gap: 14px; justify-content: center; border-left: 1px solid rgba(18, 87, 224, .12); padding: 4px 12px; } .stat:first-child { border-left: 0; } .stat-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--brand); flex: none; box-shadow: var(--sh-sm); } .stat-num { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; } .stat-label { font-size: 12.5px; font-weight: 600; color: var(--body); } /* ---------- 10. Network panel ---------- */ .netpanel { background: var(--tint); border-radius: var(--r-xl); padding: 30px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px; align-items: center; } .netpanel-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); } /* 16:9 so the group photograph is never cropped at the sides — every face in the frame stays visible whatever height the text column ends up being. */ .netpanel-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .netpanel h2 { font-size: clamp(23px, 2.7vw, 29px); margin-bottom: 12px; } .netpanel > div > p { font-size: 15px; margin-bottom: 22px; max-width: 46ch; } .net-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-bottom: 26px; } .net-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .net-item svg { color: var(--brand); flex: none; } /* ---------- 11. Testimonials ---------- */ .tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; height: 100%; display: flex; flex-direction: column; transition: box-shadow .28s var(--ease), transform .28s var(--ease); } .tcard:hover { box-shadow: var(--sh); transform: translateY(-3px); } .tcard-quote { color: var(--brand-300); margin-bottom: 12px; } .tcard p { font-size: 14.5px; line-height: 1.72; color: var(--body); flex: 1; margin-bottom: 20px; } .tcard-person { display: flex; align-items: center; gap: 12px; } .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; flex: none; } .tcard-name { display: block; font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.35; } .tcard-role { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; } .tslider { overflow: hidden; } .ttrack { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 52px) / 3); gap: 26px; transition: transform .5s var(--ease); } .dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all .25s var(--ease); } .dot.is-active { background: var(--brand); width: 22px; border-radius: var(--r-pill); } /* ---------- 12. CTA band ---------- */ .ctaband { background: linear-gradient(120deg, #0C1F52, #14307C); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 40px 44px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; } .ctaband::after { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(41, 169, 225, .2), transparent 70%); top: -160px; right: -60px; } .ctaband h2 { color: #fff; font-size: clamp(23px, 2.7vw, 30px); max-width: 18ch; } .ctaband p { color: rgba(255, 255, 255, .74); font-size: 14.5px; margin-top: 10px; max-width: 42ch; } .ctaband-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; } /* ---------- 13. Footer ---------- */ .site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .68); padding: 46px 0 0; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 34px; padding-bottom: 36px; } .footer-brand { display: inline-flex; align-items: baseline; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 14px; } .footer-brand em { font-style: normal; color: var(--cyan); } .footer-about { font-size: 13.5px; line-height: 1.72; max-width: 34ch; } .footer-col h4 { color: #fff; font-size: 13.5px; font-weight: 800; margin-bottom: 16px; letter-spacing: -.01em; } .footer-col li { margin-bottom: 10px; } .footer-col a { font-size: 13.5px; color: rgba(255, 255, 255, .66); transition: color .18s var(--ease); } .footer-col a:hover { color: #fff; } .newsletter { display: flex; gap: 8px; margin-top: 14px; } .newsletter input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: #fff; font-size: 13.5px; transition: border-color .2s var(--ease), background .2s var(--ease); } .newsletter input::placeholder { color: rgba(255, 255, 255, .42); } .newsletter input:focus { outline: none; border-color: var(--brand-300); background: rgba(255, 255, 255, .12); } .newsletter button { width: 42px; border-radius: var(--r-sm); background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; transition: background .2s var(--ease); } .newsletter button:hover { background: var(--brand-600); } .socials { display: flex; gap: 10px; margin-top: 20px; } .socials a { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); transition: all .2s var(--ease); } .socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12.5px; } .footer-legal { display: flex; gap: 24px; flex-wrap: wrap; } .footer-legal a { color: rgba(255, 255, 255, .6); transition: color .18s var(--ease); } .footer-legal a:hover { color: #fff; } .form-note { font-size: 12.5px; margin-top: 10px; } .form-note.ok { color: #6EE7B7; } .form-note.err { color: #FCA5A5; } /* ---------- 14. Page hero (inner pages) ---------- */ .pagehero { background: linear-gradient(160deg, var(--tint) 0%, #fff 100%); padding: 52px 0 46px; border-bottom: 1px solid var(--line-soft); } .pagehero h1 { font-size: clamp(30px, 4vw, 42px); max-width: 18ch; } .pagehero p { font-size: 16.5px; margin-top: 14px; max-width: 58ch; } .pagehero--center { text-align: center; } .pagehero--center h1, .pagehero--center p { margin-inline: auto; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; } .crumbs a:hover { color: var(--brand); } .crumbs span { color: var(--navy); } .crumbs .crumb-sep { color: var(--muted); font-weight: 500; } /* ---------- 15. Filter bar ---------- */ .filterbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-bottom: 30px; } .search { position: relative; flex: 1; min-width: 220px; } .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search input { width: 100%; padding: 11px 14px 11px 42px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; background: var(--tint-2); transition: all .2s var(--ease); } .search input:focus { outline: none; border-color: var(--brand-300); background: #fff; box-shadow: 0 0 0 3px rgba(18, 87, 224, .1); } .filter-select { padding: 11px 38px 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378859F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; cursor: pointer; } .filter-select:focus { outline: none; border-color: var(--brand-300); background-color: #fff; } .result-count { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-left: auto; } /* ---------- 16. Feature cards / generic content ---------- */ .fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; height: 100%; transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease); } .fcard:hover { box-shadow: var(--sh); transform: translateY(-3px); border-color: var(--brand-100); } .fcard-icon { width: 46px; height: 46px; border-radius: var(--r); background: var(--brand-50); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px; } .fcard h3 { font-size: 17px; margin-bottom: 9px; } .fcard p { font-size: 14.5px; line-height: 1.7; } .numcard { position: relative; } .numcard-n { font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-50); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; } .prose { max-width: 760px; } .prose h2 { font-size: 24px; margin: 34px 0 14px; } .prose h3 { font-size: 18px; margin: 26px 0 10px; } .prose p { font-size: 15.5px; line-height: 1.78; margin-bottom: 14px; } .prose ul { margin: 0 0 16px; padding-left: 4px; } .prose ul li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 15.5px; line-height: 1.7; } .prose ul li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .prose a { color: var(--brand); font-weight: 600; } .prose a:hover { text-decoration: underline; } .prose strong { color: var(--navy); font-weight: 700; } /* ---------- 17. Accordion ---------- */ .accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; } .acc-item { border-bottom: 1px solid var(--line-soft); } .acc-item:last-child { border-bottom: 0; } .acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px; text-align: left; font-size: 15.5px; font-weight: 700; color: var(--navy); transition: background .2s var(--ease), color .2s var(--ease); } .acc-head:hover { background: var(--tint-2); color: var(--brand); } .acc-head svg { flex: none; color: var(--brand); transition: transform .3s var(--ease); } .acc-item.is-open .acc-head { color: var(--brand); background: var(--tint-2); } .acc-item.is-open .acc-head svg { transform: rotate(180deg); } .acc-panel { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); } .acc-panel-inner { padding: 0 24px 21px; font-size: 14.5px; line-height: 1.75; color: var(--body); } .acc-panel-inner p + p { margin-top: 10px; } .acc-panel-inner ol { padding-left: 20px; list-style: decimal; } .acc-panel-inner ol li { margin-bottom: 7px; } /* ---------- 18. Forms ---------- */ .formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-sm); } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14.5px; background: var(--tint-2); transition: all .2s var(--ease); } .field textarea { resize: vertical; min-height: 110px; } .field select { appearance: none; cursor: pointer; background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378859F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 38px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-300); background-color: #fff; box-shadow: 0 0 0 3px rgba(18, 87, 224, .1); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #E0484B; } .field-err { display: none; font-size: 12px; color: #E0484B; margin-top: 5px; font-weight: 600; } .field.has-error .field-err { display: block; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; margin-bottom: 18px; display: none; } .alert.is-visible { display: block; } .alert-ok { background: #E7F7F0; color: #0B6A48; border: 1px solid #B6E5D2; } .alert-err { background: #FDECEC; color: #A32224; border: 1px solid #F5C3C4; } /* ---------- 19. Program detail ---------- */ .pd-layout { display: grid; grid-template-columns: 1fr 342px; gap: 44px; align-items: start; } .pd-side { position: sticky; top: calc(var(--header-h) + 22px); } .pd-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; } .pd-card-media { aspect-ratio: 16/10; overflow: hidden; } .pd-card-media img { width: 100%; height: 100%; object-fit: cover; } .pd-card-body { padding: 22px; } .pd-facts { margin-bottom: 20px; } .pd-fact { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .pd-fact:last-child { border-bottom: 0; } .pd-fact svg { color: var(--brand); flex: none; } .pd-fact-k { color: var(--muted); font-weight: 600; } .pd-fact-v { margin-left: auto; font-weight: 700; color: var(--navy); } .modlist { display: grid; gap: 12px; } .mod { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: #fff; transition: border-color .22s var(--ease), box-shadow .22s var(--ease); } .mod:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); } .mod-k { font-size: 11.5px; font-weight: 800; color: var(--brand); letter-spacing: .08em; text-transform: uppercase; } .mod-t { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-top: 4px; } .mod-d { font-size: 14px; margin-top: 6px; } /* ========================================================================== 19b. Course detail — single shared grid -------------------------------------------------------------------------- The hero and every main course section are children of ONE grid, so the sidebar can span them all. The sidebar is the sticky containing block: the card can travel from the hero title down to the end of the last course section, then stops. Testimonials, related programs, the closing CTA and the footer sit OUTSIDE this grid, which is what ends the sticky range. ========================================================================== */ .course-wrap { position: relative; } /* Full-width tint behind the hero row. Height is synced to the hero column in main.js, because a viewport-width bleed would reintroduce horizontal scroll. */ .course-hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 0; background: var(--course-tint); border-bottom: 1px solid var(--line-soft); z-index: 0; pointer-events: none; } .course-topband { background: var(--course-tint); padding-top: 18px; } .course-topband .crumbs { margin-bottom: 12px; } .course-layout { display: grid; /* minmax(0, 1fr) rather than 1fr: a bare 1fr track has an auto minimum, so any wide descendant would stretch the track past the container. */ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; row-gap: 0; align-items: start; position: relative; z-index: 1; } /* Left column — exactly six rows, matching the sidebar's `span 6`. */ .course-hero-col { grid-column: 1 / 9; padding-bottom: 40px; } .course-block { grid-column: 1 / 9; padding: 34px 0; border-top: 1px solid var(--line-soft); } .course-block:first-of-type { border-top: 0; } /* Let grid children shrink below their content's min-content width. */ .course-hero-col, .course-block, .course-sidebar { min-width: 0; } /* ---- the two rules from the spec ---- */ .course-sidebar { grid-column: 9 / 13; grid-row: 1 / span 6; align-self: stretch; } .course-enrollment-card { position: sticky; top: calc(var(--header-height) + 20px); } /* -------------------------------------- */ .course-enrollment-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; z-index: 2; } .cec-media { aspect-ratio: 16/10; overflow: hidden; background: var(--tint); } .cec-media img { width: 100%; height: 100%; object-fit: cover; } .cec-body { padding: 20px; } .cec-price { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; } .cec-price sup { font-size: 15px; top: -.6em; } .cec-cohort { font-size: 13.5px; font-weight: 600; color: var(--body); margin-top: 4px; } .cec-date { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--navy); margin: 12px 0 18px; } .cec-date svg { color: var(--brand); flex: none; } .cec-actions { display: grid; gap: 10px; margin-bottom: 18px; } .cec-perks { border-top: 1px solid var(--line-soft); padding-top: 14px; display: grid; gap: 11px; } .cec-perk { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .cec-perk svg { color: var(--brand); flex: none; } .cec-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; } /* ---- Course hero content ---- */ .course-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .course-hero-col h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; margin-bottom: 16px; } .course-lede { font-size: 16px; line-height: 1.7; max-width: 52ch; margin-bottom: 22px; } .course-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 28px; } .course-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); } .course-meta-item svg { color: var(--brand); flex: none; } .gains { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 30px; } .gains h3 { font-size: 15px; margin-bottom: 14px; } .gains-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; } .gain { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--body); } .gain svg { color: var(--brand); flex: none; margin-top: 2px; } .acad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .acad-head h3 { font-size: 15px; } /* Logo-only tiles — no captions. Each tile is a fixed box and the logo is drawn with `object-fit: contain`, so the supplied files can be any aspect ratio (these run from 1:1 to almost 7:1) without cropping or distortion. */ .acad-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .acad { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; place-items: center; min-height: 78px; transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .acad:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); transform: translateY(-2px); } .acad-logo { width: 100%; height: 50px; object-fit: contain; object-position: center; } /* ---- Section tab nav ---- */ .course-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; } .course-tabs::-webkit-scrollbar { display: none; } .course-tab { position: relative; padding: 14px 0; font-size: 14px; font-weight: 700; color: var(--body); white-space: nowrap; transition: color .2s var(--ease); } .course-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform .25s var(--ease); } .course-tab:hover { color: var(--brand); } .course-tab.is-active { color: var(--brand); } .course-tab.is-active::after { transform: scaleX(1); } .course-block h2 { font-size: 22px; margin-bottom: 16px; } .course-block h3 { font-size: 16px; margin-bottom: 12px; } /* ---- Highlights ---- */ .hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .hl { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 14px; text-align: center; background: #fff; transition: border-color .22s var(--ease), box-shadow .22s var(--ease); } .hl:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); } .hl-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; margin: 0 auto 12px; } .hl span { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.4; display: block; } /* ---- Audience / skills ---- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; } .ticklist { display: grid; gap: 10px; } .ticklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; } .ticklist svg { color: var(--brand); flex: none; margin-top: 3px; } /* ---- Curriculum ---- */ .curr-summary { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; } .curr-summary span { display: inline-flex; align-items: center; gap: 7px; } .curr-summary svg { color: var(--brand); } .curr { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; } .curr-item { border-bottom: 1px solid var(--line-soft); } .curr-item:last-child { border-bottom: 0; } .curr-head { width: 100%; display: grid; grid-template-columns: 88px 1fr auto 20px; align-items: center; gap: 14px; padding: 14px 18px; text-align: left; transition: background .2s var(--ease); } .curr-head:hover { background: var(--tint-2); } .curr-item.is-open .curr-head { background: var(--tint-2); } .curr-n { font-size: 12.5px; font-weight: 700; color: var(--muted); } .curr-t { font-size: 14.5px; font-weight: 700; color: var(--navy); } .curr-l { font-size: 12px; font-weight: 600; color: var(--muted); } .curr-head svg { color: var(--brand); transition: transform .3s var(--ease); justify-self: end; } .curr-item.is-open .curr-head svg { transform: rotate(180deg); } .curr-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } /* Initial open state for the first module. Once a header is clicked, the inline max-height set in main.js takes over. */ .curr-item.is-open .curr-panel { max-height: 420px; } .curr-panel-inner { padding: 2px 18px 18px 120px; font-size: 14px; line-height: 1.7; color: var(--body); } /* ---- Certificates (fellowship award + CPD accreditation) ---- */ .cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cert-grid--single { grid-template-columns: minmax(0, 520px); } .cert-card { background: var(--tint); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 16px; } .cert-shot-img { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: var(--sh-sm); transition: box-shadow .22s var(--ease), transform .22s var(--ease); } .cert-shot-img:hover { box-shadow: var(--sh); transform: translateY(-2px); } .cert-shot-img img { width: 100%; height: 260px; object-fit: contain; object-position: center; } .cert-card-body h3 { font-size: 16px; margin-bottom: 8px; } .cert-card-body p { font-size: 14px; line-height: 1.65; } /* ---- Faculty ---- */ .fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fac { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: #fff; text-align: center; transition: box-shadow .22s var(--ease), transform .22s var(--ease); } .fac:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); } .fac-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(150deg, var(--brand), var(--cyan)); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 800; margin: 0 auto 12px; } .fac h4 { font-size: 15px; margin-bottom: 3px; } .fac-q { font-size: 12px; font-weight: 700; color: var(--brand); } .fac-r { font-size: 12.5px; color: var(--body); margin-top: 6px; line-height: 1.5; } .fac-y { font-size: 12px; color: var(--muted); margin-top: 6px; font-weight: 600; } .support-card { background: linear-gradient(140deg, var(--brand-50), #E9F6FD); border-radius: var(--r); padding: 20px; display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; } .support-card svg { color: var(--brand); flex: none; } .support-card h4 { font-size: 14.5px; margin-bottom: 5px; } .support-card p { font-size: 13.5px; line-height: 1.6; } /* ---- Fees ---- */ .fee-band { text-align: center; margin-bottom: 20px; } .fee-band .fee-amt { font-size: 30px; font-weight: 800; color: var(--brand); letter-spacing: -.03em; } .fee-band .fee-sub { font-size: 13.5px; color: var(--body); margin-top: 4px; } .fee-plan { background: var(--tint); border-radius: var(--r); padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fee-plan-icon { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; box-shadow: var(--sh-sm); } .fee-plan h4 { font-size: 15px; margin-bottom: 3px; } .fee-plan p { font-size: 13.5px; line-height: 1.55; } .fee-plan .btn { margin-left: auto; } /* ---- Partner logo wall (Partner Network page) ---- */ .logo-group { margin-bottom: 40px; } .logo-group:last-child { margin-bottom: 0; } .logo-group-head { margin-bottom: 18px; } .logo-group-head h3 { font-size: 19px; margin-bottom: 6px; } .logo-group-head p { font-size: 14.5px; max-width: 62ch; } .logo-group-count { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand); font-size: 11.5px; font-weight: 800; vertical-align: middle; } /* Four across so twelve logos land as three clean rows, and each logo gets a large slot. `contain` keeps every aspect ratio intact inside it. */ /* Every logo file is normalised to an identical 600x300 canvas (see tools/normalize-logos.ps1), so a single 2:1 image box renders them all at exactly the same size regardless of the original artwork's shape. */ .logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .logo-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; min-height: 108px; display: grid; place-items: center; transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .logo-tile:hover { border-color: var(--brand-100); box-shadow: var(--sh); transform: translateY(-3px); } .logo-tile img { /* Capped so the mark sits comfortably inside the tile rather than filling its full width — about half the size an uncapped logo rendered at. */ width: 100%; max-width: 170px; aspect-ratio: 600 / 240; height: auto; object-fit: contain; object-position: center; } /* Centred variant — used for a small group such as the single accreditation partner, where a left-aligned lone tile in a wide grid looks stranded. */ .logo-group--center .logo-group-head { text-align: center; } .logo-group--center .logo-group-head p { margin-inline: auto; } .logo-group--center .logo-wall { display: flex; flex-wrap: wrap; justify-content: center; } /* The lone accreditation logo carries more weight than a wall entry, so it renders at twice the size of the standard tiles (170px -> 340px). */ .logo-group--center .logo-tile { width: 420px; max-width: 100%; min-height: 190px; } .logo-group--center .logo-tile img { max-width: 340px; } @media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .logo-wall { gap: 12px; } .logo-tile { padding: 12px; } } /* ---- Course detail responsive ---- */ @media (max-width: 1080px) { .course-layout { column-gap: 22px; } .acad-row { grid-template-columns: repeat(4, 1fr); } .hl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { /* Single column: the SAME card element moves directly below the hero content, and sticky is switched off. No second card is rendered. */ .course-layout { grid-template-columns: minmax(0, 1fr); } .course-hero-col { grid-column: 1; order: 1; padding-bottom: 26px; } .course-sidebar { grid-column: 1; grid-row: auto; align-self: auto; order: 2; margin-bottom: 8px; } .course-block { grid-column: 1; order: 3; } .course-enrollment-card { position: static; top: auto; } .course-hero-bg { display: none; } .course-wrap { background: var(--course-tint); } .course-blocks-bg { background: #fff; } .acad-row { grid-template-columns: repeat(3, 1fr); } .cert-grid, .cert-grid--single { grid-template-columns: 1fr; } .cert-shot-img img { height: 220px; } .fac-grid { grid-template-columns: 1fr; } .curr-head { grid-template-columns: 74px 1fr auto 20px; gap: 10px; } .curr-panel-inner { padding-left: 18px; } } @media (max-width: 620px) { .gains-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } .hl-grid { grid-template-columns: 1fr 1fr; } .acad-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .acad { min-height: 66px; padding: 10px 12px; } .acad-logo { height: 40px; } .curr-head { grid-template-columns: 1fr auto 18px; gap: 8px; padding: 13px 14px; } .curr-n { display: none; } .curr-panel-inner { padding: 2px 14px 16px; } .fee-plan { flex-direction: column; align-items: flex-start; } .fee-plan .btn { margin-left: 0; width: 100%; } .course-meta { gap: 8px 16px; } } /* ---------- 20. Misc components ---------- */ .icon-list { display: grid; gap: 12px; } .icon-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.65; } .icon-list svg { color: var(--brand); flex: none; margin-top: 4px; } .post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; height: 100%; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } .post:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-100); } .post-media { aspect-ratio: 16/9; overflow: hidden; background: var(--tint); } .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .post:hover .post-media img { transform: scale(1.05); } .post-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .post-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 9px; } .post h3 { font-size: 16.5px; line-height: 1.4; margin-bottom: 9px; } .post p { font-size: 14px; line-height: 1.68; flex: 1; } .post-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; gap: 14px; } .badge-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--success); } .badge-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 166, 115, .5); } 70% { box-shadow: 0 0 0 7px rgba(23, 166, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 166, 115, 0); } } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); } .split h2 { font-size: clamp(23px, 2.7vw, 30px); margin-bottom: 14px; } .split p { font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; } .contact-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; } .contact-item svg { color: var(--brand); flex: none; margin-top: 3px; } .contact-item h4 { font-size: 14.5px; margin-bottom: 4px; } .contact-item p, .contact-item a { font-size: 14px; line-height: 1.68; } .contact-item a:hover { color: var(--brand); } .verify-result { display: none; margin-top: 22px; } .verify-result.is-visible { display: block; } .vr-box { border-radius: var(--r-lg); padding: 24px; border: 1px solid var(--line); background: #fff; } .vr-box.ok { border-color: #B6E5D2; background: #F4FCF8; } .vr-box.no { border-color: #F5C3C4; background: #FEF7F7; } .vr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .vr-head h3 { font-size: 17px; } .vr-row { display: flex; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; } .vr-row span { color: var(--muted); font-weight: 600; min-width: 160px; } .vr-row strong { color: var(--navy); font-weight: 700; } /* ---------- 20b. Advisor modal ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; } /* `display: grid` above beats the UA stylesheet's [hidden] { display: none }, which would otherwise leave an invisible full-screen overlay swallowing every click on the page. This rule is what actually hides it. */ .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(12, 31, 82, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s var(--ease); } .modal.is-open .modal-backdrop { opacity: 1; } .modal-panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 30px 30px 26px; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s var(--ease), transform .22s var(--ease); } .modal.is-open .modal-panel { opacity: 1; transform: none; } .modal-panel h2 { font-size: 23px; margin-bottom: 6px; } .modal-lede { font-size: 14.5px; margin-bottom: 22px; } .modal-note { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--body); background: var(--tint); transition: background .18s var(--ease), color .18s var(--ease); } .modal-close:hover { background: var(--brand-50); color: var(--brand); } @media (max-width: 620px) { .modal { padding: 14px; } .modal-panel { padding: 24px 20px 22px; border-radius: var(--r-lg); } .modal-panel h2 { font-size: 20px; } } /* ---------- 21. Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- 22. Responsive ---------- */ @media (max-width: 1080px) { .main-nav { gap: 20px; } .main-nav a { font-size: 13px; } .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; } .footer-news { grid-column: span 3; } .pd-layout { grid-template-columns: 1fr 300px; gap: 32px; } } @media (max-width: 900px) { .section { padding: 52px 0; } .nav-toggle { display: flex; justify-self: end; } .header-inner { grid-template-columns: 1fr auto; } .header-actions { display: none; } .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; border-bottom: 1px solid var(--line); box-shadow: var(--sh-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .25s var(--ease); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .main-nav.is-open { transform: none; opacity: 1; visibility: visible; } .main-nav a { padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft); } .main-nav a::after { display: none; } .main-nav .btn { display: inline-flex; margin-top: 16px; border-bottom: 0; justify-content: center; color: #fff; } /* Stacked: the photo becomes a soft backdrop behind left-aligned copy, so the scrim runs top-to-bottom instead of left-to-right. */ .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 32px; } .hero h1 { max-width: none; } .hero-bg img { object-position: 78% top; } .hero-bg::after { background: linear-gradient( 180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .93) 60%, rgba(255, 255, 255, .86) 100% ); } /* The rating card sits inline under the copy rather than floating. */ .hero-visual { min-height: 0; order: 0; justify-content: flex-start; } .hero-rating { position: static; padding: 13px 20px; animation: none; } .hero-rating-score { font-size: 23px; } .partner-row { grid-template-columns: repeat(3, 1fr); gap: 18px 0; } .partner:nth-child(4) { border-left: 0; } .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .ttrack { grid-auto-columns: calc((100% - 26px) / 2); } .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; } .stat:nth-child(3) { border-left: 0; } .netpanel { grid-template-columns: 1fr; gap: 26px; padding: 22px; } .split { grid-template-columns: 1fr; gap: 30px; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .ctaband { grid-template-columns: 1fr; padding: 32px 26px; } .ctaband h2 { max-width: none; } .pd-layout { grid-template-columns: 1fr; } .pd-side { position: static; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-news, .footer-brand-col { grid-column: span 2; } } @media (max-width: 620px) { .container { padding-inline: 18px; } .section { padding: 44px 0; } /* Two pill tabs do not fit side by side on a narrow phone. */ .tabs-wrap { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs-wrap::-webkit-scrollbar { display: none; } .tabs { margin-inline: auto; } .tab { padding: 9px 14px; font-size: 12.5px; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; } .hero-visual { min-height: 300px; } .hero-blob { width: 240px; height: 240px; } .hero-rating { right: 0; bottom: 20px; } .partner-row { grid-template-columns: repeat(2, 1fr); } .partner { border-left: 0; } .card-grid, .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } .ttrack { grid-auto-columns: 100%; } .net-list { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stat { border-left: 0; justify-content: flex-start; } .field-row { grid-template-columns: 1fr; } .formcard { padding: 22px; } .footer-top { grid-template-columns: 1fr; } .footer-news, .footer-brand-col { grid-column: span 1; } .footer-bottom { justify-content: center; text-align: center; } .result-count { margin-left: 0; } .ctaband-actions { flex-direction: column; } .ctaband-actions .btn { width: 100%; } }