/* ========================================================================== Sterling Financial Services — design system Editorial/broadsheet direction: heavy display type, hairline rules, warm beige and red accents on white, one navy block and one near-black block. Every value here comes from the approved design. Do not "tidy" the letter- spacing or the 1px grid gaps — the hairline grid motif depends on them. ========================================================================== */ /* /assets/fonts.css is linked ahead of this file, not @imported — an @import costs an extra round trip before any face starts downloading. */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { --navy: #1E2660; --navy-darker: #161C4A; --red: #E5252A; --gold: #d4a949; --cream: #faf7f0; --paper: #FFFFFF; --card: #FFFFFF; --cream-card: #faf7f0; --ink: #161616; --ink-secondary: #4A4A4A; --ink-tertiary: #8A8A8A; --rule: #D4D0C8; --ok: #2F6B4A; --flag: #B4763A; --flag-bg: #FDF8F1; --sand: #F1E7D6; --sand-soft: #FAF5EC; --red-soft: #FCEDEC; --gold-soft: #F7EBD3; --f-display: 'Archivo Black', 'Helvetica Neue', sans-serif; --f-data: 'Anton', sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --f-italic: 'Instrument Serif', Georgia, serif; /* The scrolled nav bar. Brand navy in both themes: against the light paper it is the darkest thing on screen, and against the dark paper (#0A0E1F) it is a clearly lifted band. */ --nav-solid: #1E2660; --ease: cubic-bezier(.22, 1, .36, 1); --wash: radial-gradient(820px 420px at 1% -20%, var(--sand-soft), transparent 68%), radial-gradient(620px 380px at 99% -6%, var(--red-soft), transparent 64%); } /* --navy is the "primary ink" token, not literally navy: it inverts to white in dark mode. Hard-coded #1E2660 (CMA band) and #161616 (CTA panel) stay dark in both themes by design. */ html[data-theme="dark"] { --paper: #0A0E1F; --card: #111735; --cream-card: #111735; --cream: #0F1531; --ink: #EAECF5; --ink-secondary: #A7AFCB; --ink-tertiary: #7A83A5; --rule: #242C55; --navy: #FFFFFF; --navy-darker: #DDE2F2; --red: #FF5B5F; --flag-bg: #241B10; --sand: #141A3A; --sand-soft: #0E1330; --red-soft: #2A1517; --gold-soft: #241D10; } html[lang="ar"] { --f-body: 'Cairo', system-ui, sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); background-repeat: no-repeat; color: var(--navy); font-family: var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The nav bar is transparent at rest, and it sits above the page header rather than over it, so the page's opening background has to be painted by or a seam shows where the nav band ends and the header begins. The washes therefore live here, not on the header, and run behind both. Pages whose header is a flat colour instead of a wash (What we do, Our scope) tint the bar itself — see data-nav below. */ body[data-top="hero"] { background: radial-gradient(880px 520px at 2% -8%, var(--sand-soft), transparent 68%), radial-gradient(680px 460px at 98% 0%, var(--red-soft), transparent 64%), var(--paper); } body[data-top="wash"] { background: var(--wash), var(--paper); } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--red); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6, p { margin: 0; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; } /* The nav is sticky and 78px tall, so an anchor target would otherwise land underneath it. The prototype never hit this — it routed in JavaScript and always scrolled to the top. These are real URLs now. */ [id] { scroll-margin-top: 100px; } /* Dark mode has no white logo variant yet, so the wordmark is knocked out. */ html[data-theme="dark"] .logo { filter: brightness(0) invert(1); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy); color: var(--paper); padding: 12px 18px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 500; } .skip:focus { left: 0; color: var(--paper); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* The recurring section header: big h2 left, supporting paragraph right. */ .hdr-row { display: flex; gap: 48px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 44px; } .hdr-row .support { font-size: 17px; line-height: 1.55; color: var(--ink-secondary); max-width: 400px; } /* The wash is on so it can run behind the nav bar — see data-top. */ .page-head { padding: 34px 0 44px; } .page-head--tall { padding-bottom: 56px; } .page-head--flush { padding-bottom: 0; } .crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 38px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); } .crumb a { color: var(--ink-tertiary); } .crumb a:hover { color: var(--red); } .crumb .here { color: var(--navy); } .head-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: end; } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .eyebrow { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--ink-tertiary); display: block; } .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); } .mono-link { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); } .mono-link:hover { color: var(--navy); } .h1-home { font-family: var(--f-display); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.038em; margin: 18px 0 22px; color: var(--navy); } .h1-home > span { display: block; } .h1-page { font-family: var(--f-display); font-size: clamp(36px, 5.4vw, 68px); line-height: .95; letter-spacing: -.04em; color: var(--navy); } .h1-wide { font-size: clamp(38px, 6vw, 78px); line-height: .94; } .h2-sec { font-family: var(--f-display); font-size: clamp(34px, 5.2vw, 66px); line-height: .95; letter-spacing: -.03em; color: var(--navy); max-width: 660px; } .h2-mid { font-family: var(--f-display); font-size: clamp(28px, 3.8vw, 46px); line-height: .98; letter-spacing: -.03em; color: var(--navy); } .h3-sub { font-family: var(--f-display); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.02; letter-spacing: -.03em; color: var(--navy); } .red { color: var(--red); } .red-light { color: #FF6B6E; } .lead { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 580px; } .intro { font-size: 17px; line-height: 1.65; color: var(--ink-secondary); } .body-16 { font-size: 16.5px; line-height: 1.6; color: var(--ink-secondary); } .italic { font-family: var(--f-italic); font-style: italic; } .pull { font-family: var(--f-italic); font-style: italic; color: var(--ink); border-left: 3px solid var(--red); padding-left: 20px; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 6px; border: 0; font-family: var(--f-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: transform .2s var(--ease), box-shadow .22s var(--ease), background .18s ease, color .18s ease, border-color .18s ease; } .btn:active { transform: translateY(0) scale(.985); box-shadow: 0 4px 10px -6px rgba(30, 38, 96, .5); } .btn .arrow { color: var(--red); } .btn-primary { background: var(--navy); color: var(--paper); } .btn-primary:hover { background: var(--navy-darker); color: var(--paper); transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 26px -10px rgba(30, 38, 96, .65), 0 0 0 1px rgba(30, 38, 96, .06); } .btn-outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; } .btn-outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45); } /* On the near-black CTA panel, which does not follow the theme. */ .btn-cream { background: var(--cream); color: #161616; } .btn-cream:hover { background: #fff; color: #161616; transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45); } .btn-onDark { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; background: transparent; } .btn-onDark:hover { background: #fff; color: #161616; transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 24px -12px rgba(30, 38, 96, .45); } .link-outline-onDark { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; padding: 8px 12px; transition: background .18s ease, color .18s ease; } .link-outline-onDark:hover { background: #fff; color: #1E2660; } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ /* At the top of the page the bar is transparent, so it reads as part of the page rather than a tray sitting on it. Once the page scrolls it turns into a solid navy bar and its contents invert to white. Everything inside the bar reads its colours from these four custom properties, so the whole inversion is one rule rather than a dozen. The `body[data-nav="ondark"]` case is for pages whose header is already navy (Our scope) — there the bar has to be inverted from the very top. */ .nav { --nav-fg: var(--ink-secondary); --nav-fg-strong: var(--navy); --nav-hover-bg: color-mix(in srgb, var(--rule) 24%, transparent); --nav-border: var(--rule); position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; /* Matched to the .18s colour transitions on the bar's contents. If the bar lagged behind them you would get white text on a light bar for a beat. */ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .nav.is-stuck { background: var(--nav-solid); border-bottom-color: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -18px rgba(10, 14, 31, .55); } /* Pages that open on a flat-colour header tint the bar to match, so the bar and the header read as one surface. Our scope opens navy, What we do cream. :not(.is-stuck) so these never out-specify the scrolled state. */ body[data-nav="ondark"] .nav:not(.is-stuck) { background: var(--nav-solid); } body[data-nav="cream"] .nav:not(.is-stuck) { background: var(--cream); } .nav.is-stuck, body[data-nav="ondark"] .nav { --nav-fg: rgba(255, 255, 255, .78); --nav-fg-strong: #fff; --nav-hover-bg: rgba(255, 255, 255, .12); --nav-border: rgba(255, 255, 255, .35); } /* One property, so this replaces the dark-theme rule rather than stacking a second invert on top of it. */ .nav.is-stuck .logo, body[data-nav="ondark"] .nav .logo { filter: brightness(0) invert(1); } .nav-strip { height: 3px; background: linear-gradient(90deg, var(--red) 0 34%, var(--gold) 34% 58%, var(--navy) 58% 100%); } /* The navy third of the strip would vanish against a navy bar. */ .nav.is-stuck .nav-strip, body[data-nav="ondark"] .nav-strip { background: linear-gradient(90deg, var(--red) 0 34%, var(--gold) 34% 58%, rgba(255, 255, 255, .22) 58% 100%); } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; min-height: 75px; padding: 11px clamp(12px, 1.6vw, 26px); } /* Fades with the bar. Snapping the invert would put a white logo on a light bar for the length of the background transition. */ .nav-bar .logo { height: 44px; width: auto; transition: filter .2s ease; } .nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; } .nav-link, .nav-links summary { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--nav-fg); white-space: nowrap; transition: background .18s ease, color .18s ease; } .nav-link:hover, .nav-links summary:hover, .nav-link[aria-current="page"] { color: var(--nav-fg-strong); background: var(--nav-hover-bg); } .nav-links summary .caret { font-size: 9px; color: var(--nav-fg); opacity: .7; } .nav-drop { position: relative; } .nav-drop-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 11px; padding: 6px; box-shadow: 0 20px 48px rgba(16, 20, 45, .2); z-index: 150; display: flex; flex-direction: column; } .nav-drop-menu a { padding: 10px 11px; border-radius: 7px; font-size: 13.5px; color: var(--ink); } .nav-drop-menu a:hover { background: var(--cream); color: var(--ink); } .nav-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .nav-burger { display: none; width: 40px; height: 40px; border: 1.5px solid var(--nav-border); border-radius: 8px; background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--nav-fg-strong); transition: transform .2s var(--ease), border-color .18s ease, box-shadow .22s ease, color .18s ease; } .nav-burger:hover { border-color: var(--nav-fg-strong); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(30, 38, 96, .5); } .nav-burger .bl { display: block; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px; position: relative; transition: background .18s ease; } .nav-burger .bl::before, .nav-burger .bl::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .28s var(--ease); } .nav-burger .bl::before { top: -5.5px; } .nav-burger .bl::after { top: 5.5px; } .nav-burger.open .bl { background: transparent; } .nav-burger.open .bl::before { transform: translateY(5.5px) rotate(45deg); } .nav-burger.open .bl::after { transform: translateY(-5.5px) rotate(-45deg); } .nav-panel { display: none; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); background: var(--paper); padding: 8px clamp(12px, 1.6vw, 26px) 18px; max-height: calc(100vh - 78px); overflow-y: auto; } .nav-panel.open { display: block; } .nav-panel .np-link { display: block; padding: 14px 4px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); } .nav-panel .np-link:hover { color: var(--red); } .nav-panel .btn { width: 100%; margin-top: 14px; } /* Language picker ---------------------------------------------------------- */ .lang { position: relative; flex-shrink: 0; } .lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1.5px solid var(--nav-border); border-radius: 6px; background: transparent; cursor: pointer; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-fg); transition: border-color .18s ease, color .18s ease; } .lang-btn:hover { border-color: var(--nav-fg-strong); color: var(--nav-fg-strong); } .lang-menu { display: none; position: absolute; top: calc(100% + 9px); right: 0; min-width: 180px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 11px; padding: 6px; box-shadow: 0 20px 48px rgba(16, 20, 45, .2); z-index: 140; } .lang-menu.open { display: block; } .lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-family: var(--f-body); font-size: 13.5px; color: var(--ink); } .lang-menu button:hover { background: var(--cream); } .lang-menu .native { font-size: 11.5px; color: var(--ink-tertiary); } .flag { width: 21px; height: 14px; border-radius: 2.5px; overflow: hidden; flex-shrink: 0; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } html[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .20); } .flag svg { width: 100%; height: 100%; display: block; } .chev { width: 9px; height: 9px; color: currentColor; opacity: .7; flex-shrink: 0; } .lang-menu .chev { color: var(--ink-tertiary); opacity: 1; } .tick { width: 14px; height: 14px; color: var(--navy); flex-shrink: 0; } .lang-menu button:not([aria-selected="true"]) .tick { display: none; } /* Theme switch ------------------------------------------------------------- */ .theme-sw { position: relative; width: 66px; height: 38px; flex-shrink: 0; padding: 0; border: 1.5px solid var(--nav-border); border-radius: 99px; background: transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .22s ease, border-color .22s ease; } .theme-sw:hover { border-color: var(--nav-fg-strong); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(30, 38, 96, .45); } .theme-sw .ghost { position: absolute; top: 11px; width: 13px; height: 13px; color: #8A8A8A; pointer-events: none; transition: opacity .3s ease; } .theme-sw .ghost-sun { left: 9px; opacity: 0; } .theme-sw .ghost-moon { right: 9px; opacity: .55; } html[data-theme="dark"] .theme-sw .ghost-sun { opacity: .55; } html[data-theme="dark"] .theme-sw .ghost-moon { opacity: 0; } .theme-sw .knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .20); background: #1E2660; transition: transform .42s ease, background .3s ease; } html[data-theme="dark"] .theme-sw .knob { background: #d4a949; transform: translateX(28px); } .theme-sw .knob span { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity .26s ease, transform .42s ease; } .theme-sw .knob .i-sun { opacity: 1; } .theme-sw .knob .i-moon { opacity: 0; transform: rotate(70deg); } html[data-theme="dark"] .theme-sw .knob .i-sun { opacity: 0; transform: rotate(70deg); } html[data-theme="dark"] .theme-sw .knob .i-moon { opacity: 1; transform: none; } .theme-sw .ghost svg { width: 13px; height: 13px; display: block; } .theme-sw .knob svg { width: 15px; height: 15px; display: block; color: var(--paper); } html[data-theme="dark"] .theme-sw .knob svg { color: #141833; } /* On the navy bar the light-theme knob is navy-on-navy, so it flips to white. The dark-theme knob is already gold and reads fine, so it keeps its colour — these selectors out-specify the plain html[data-theme="dark"] rules above, which is why the dark case has to be restated rather than left to inherit. */ .nav.is-stuck .theme-sw .knob, body[data-nav="ondark"] .theme-sw .knob { background: #fff; } .nav.is-stuck .theme-sw .knob svg, body[data-nav="ondark"] .theme-sw .knob svg { color: #1E2660; } html[data-theme="dark"] .nav.is-stuck .theme-sw .knob, html[data-theme="dark"] body[data-nav="ondark"] .theme-sw .knob { background: #d4a949; } html[data-theme="dark"] .nav.is-stuck .theme-sw .knob svg, html[data-theme="dark"] body[data-nav="ondark"] .theme-sw .knob svg { color: #141833; } .nav.is-stuck .theme-sw .ghost, body[data-nav="ondark"] .theme-sw .ghost { color: rgba(255, 255, 255, .75); } /* The primary button is navy-filled, which disappears on a navy bar. */ .nav.is-stuck .nav-tools .btn-primary, body[data-nav="ondark"] .nav-tools .btn-primary { background: #fff; color: #1E2660; } .nav.is-stuck .nav-tools .btn-primary:hover, body[data-nav="ondark"] .nav-tools .btn-primary:hover { background: var(--cream); color: #1E2660; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); } html[data-theme="dark"] .nav.is-stuck .nav-tools .btn-primary:hover, html[data-theme="dark"] body[data-nav="ondark"] .nav-tools .btn-primary:hover { background: #EAECF5; } /* -------------------------------------------------------------------------- Hairline grid — the signature card motif. The 1px gaps read as interior rules. Never rebuild these as separate rounded cards with shadows. -------------------------------------------------------------------------- */ .hgrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; } .hgrid > * { background: var(--card); } .hgrid-2 { grid-template-columns: 1fr 1fr; } .hgrid-3 { grid-template-columns: repeat(3, 1fr); } /* -------------------------------------------------------------------------- Home hero Two columns: the copy and the four proof tiles on the left, one tall photograph on the right. The frame is not given an aspect ratio — it stretches to whatever height the left column ends up being, which is what makes it the largest thing on the page. Below 980px the columns stack and the frame goes back to a 4:5 portrait crop. -------------------------------------------------------------------------- */ .g-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 68px; align-items: stretch; } .hero-media { display: flex; flex-direction: column; min-width: 0; } .hero-frame { position: relative; flex: 1; display: flex; flex-direction: column; } .hero-frame > .frame { flex: 1; display: flex; flex-direction: column; } .hero-frame .frame-media { flex: 1; min-height: 560px; } .hero-disc { position: absolute; top: -20px; right: -16px; width: 136px; height: 136px; border-radius: 50%; background: var(--gold-soft); } .hero-seal { position: absolute; left: -18px; bottom: 70px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 13px 16px; box-shadow: 0 20px 44px -24px rgba(30, 38, 96, .5); } /* The 2x2 proof block, on the same 580px measure as the paragraph above it. */ .g-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; max-width: 580px; } .stat { display: flex; align-items: flex-start; gap: 13px; min-width: 0; background: color-mix(in srgb, var(--sand-soft) 82%, var(--paper)); border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); border-radius: 14px; padding: 18px 18px 17px; } .stat-bar { width: 3px; height: 42px; background: var(--red); border-radius: 2px; flex-shrink: 0; margin-top: 3px; } .stat-n { font-family: var(--f-data); font-size: 36px; color: var(--navy); line-height: 1; } .stat-l { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-secondary); margin-top: 6px; } .stat-s { font-size: 12px; color: var(--ink-tertiary); margin-top: 2px; } /* -------------------------------------------------------------------------- Row and card patterns that carry a hover state -------------------------------------------------------------------------- */ .service-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .row-service { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) 40px; gap: 36px; align-items: baseline; padding: 30px 4px; border-bottom: 1px solid var(--rule); color: var(--navy); transition: background .18s ease; } .row-service:hover { background: var(--cream); color: var(--navy); } .row-service h3 { font-family: var(--f-display); font-size: 27px; line-height: 1.02; letter-spacing: -.03em; } .row-service p { font-size: 15.5px; line-height: 1.6; color: var(--ink-secondary); } .row-service .arrow { font-family: var(--f-mono); font-size: 15px; color: var(--red); justify-self: end; } .inst-card { padding: 30px 28px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; color: var(--navy); transition: background .18s ease; } .inst-card:hover { background: var(--cream); color: var(--navy); } .logo-tile { width: 100%; height: 62px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 10px; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 22px; } /* -------------------------------------------------------------------------- Image frames and slots -------------------------------------------------------------------------- */ .frame { position: relative; border-radius: 22px; border: 1px solid var(--rule); overflow: hidden; background: var(--sand-soft); box-shadow: 0 26px 64px -34px rgba(30, 38, 96, .38); } .frame-cap { height: 4px; } .cap-rgn { background: linear-gradient(90deg, var(--red) 0 36%, var(--gold) 36% 60%, var(--navy) 60% 100%); } .cap-ngr { background: linear-gradient(90deg, var(--navy) 0 28%, var(--gold) 28% 50%, var(--red) 50% 100%); } .cap-grn { background: linear-gradient(90deg, var(--gold) 0 26%, var(--red) 26% 52%, var(--navy) 52% 100%); } .cap-gr { background: linear-gradient(90deg, var(--gold) 0 44%, var(--red) 44% 100%); } .cap-ngr2 { background: linear-gradient(90deg, var(--navy) 0 34%, var(--gold) 34% 58%, var(--red) 58% 100%); } .frame-media { position: relative; } .frame-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Placeholder standing in for photography that does not exist yet. Replace the whole .slot element with an /