/* RMPAC hub: the parent company's front door. Dark by default, because the white-letter mark was cut for a dark ground; a light theme is one class on . The type is Manrope with a mono for the identifiers, the red is the same red every RMPAC property uses. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: dark; --red: #c41717; --red-hot: #ff4d4d; --bg: #0a0a0b; --bg-2: #111113; --panel: #17171a; --line: rgba(255,255,255,.09); --ink: #ffffff; --ink-2: #c9c9ce; --ink-3: #8d8d95; --font: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "SF Mono", Consolas, monospace; --ease: cubic-bezier(.16, 1, .3, 1); --wrap: 1180px; } html.light { color-scheme: light; --bg: #f6f5f2; --bg-2: #ffffff; --panel: #ffffff; --line: rgba(0,0,0,.09); --ink: #0a0a0b; --ink-2: #3a3a40; --ink-3: #6e6e75; } /* scrollbar-gutter keeps the scrollbar's space reserved even while the dialog locks scrolling, so opening it does not shift the page sideways. */ html { scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-gutter: stable; } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } .center { text-align: center; } .small { font-size: 13px; color: var(--ink-3); margin-top: 22px; } .small a { color: var(--ink); border-bottom: 1px solid var(--red); } .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } h1, h2, h3 { letter-spacing: -.03em; line-height: 1.05; font-weight: 800; } h2 { font-size: clamp(30px, 4.2vw, 48px); } .lede { font-size: 17px; color: var(--ink-2); max-width: 60ch; } /* A width-capped lede inside a centered block must center its box too, or the text centers inside a box that sits flush left. */ .center .lede { margin-left: auto; margin-right: auto; } /* ── Header ─────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); } .header-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand-logo { height: 66px; width: auto; } .brand-logo--light { display: none; } html.light .brand-logo--dark { display: none; } html.light .brand-logo--light { display: block; } .site-nav { display: flex; align-items: center; gap: 6px; } .site-nav > a { padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); transition: color .15s, background .15s; } .site-nav > a:hover { color: var(--ink); background: var(--line); } .site-nav > a.nav-contact { color: #fff; background: var(--red); margin-left: 6px; } .site-nav > a.nav-contact:hover { background: #d81c1c; } .theme-toggle { margin-left: 8px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } html.light .theme-toggle .icon-moon { display: none; } html.light .theme-toggle .icon-sun { display: block; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); } /* ── Hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 96px 0 72px; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); } .hero-glow { position: absolute; left: 50%; top: -220px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(196,23,23,.35), transparent 70%); filter: blur(30px); } .hero-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px 56px; align-items: center; } .hero-copy { min-width: 0; } /* The mark, large. A soft red halo behind it ties it to the hero glow and lifts it off the black without a box. */ .hero-logo { position: relative; display: flex; justify-content: center; align-items: center; } .hero-logo::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(196,23,23,.28), transparent 72%); filter: blur(28px); } .hero-logo-img { position: relative; width: min(100%, 480px); height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); } .hero-logo-img--light { display: none; } html.light .hero-logo-img--dark { display: none; } html.light .hero-logo-img--light { display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); } html.light .hero-logo::before { background: radial-gradient(closest-side, rgba(196,23,23,.14), transparent 72%); } .hero .ids { grid-column: 1 / -1; } .hero h1 { font-size: clamp(40px, 6.6vw, 82px); max-width: 15ch; } .hero h1 em { font-style: normal; color: var(--red-hot); } html.light .hero h1 em { color: var(--red); } .hero-sub { margin-top: 24px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 66ch; } .hero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; transition: transform .18s var(--ease), background .15s, border-color .15s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: #d81c1c; } .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink-3); } .btn-sm { padding: 9px 14px; font-size: 13px; margin-top: 10px; } .btn-link { font-size: 13.5px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 1px; } .btn-link:hover { color: var(--ink); border-color: var(--red); } /* Identifiers: the legitimacy strip on the landing. */ .ids { margin-top: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); } html.light .ids { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .ids-label { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); flex-basis: 100%; } @media (min-width: 900px) { .ids-label { flex-basis: auto; padding-right: 8px; border-right: 1px solid var(--line); } } .id { display: flex; flex-direction: column; gap: 2px; } .id-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .id-v { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink); } /* Placeholder values read as placeholders, not as real identifiers. */ .id-v.is-pending, .footer-col .pending { font-style: italic; font-weight: 500; color: var(--ink-3); letter-spacing: 0; } .id-badges { flex-direction: row; gap: 6px; margin-left: auto; } .badge { font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 100px; background: rgba(196,23,23,.16); color: var(--red-hot); } html.light .badge { color: var(--red); background: rgba(196,23,23,.1); } /* ── Sections ───────────────────────────────────────────────────────── */ section { padding: 92px 0; border-top: 1px solid var(--line); } .split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; margin-bottom: 56px; } .split--tight { margin-bottom: 34px; align-items: end; } .split-body p { color: var(--ink-2); font-size: 16.5px; } .split-body p + p { margin-top: 16px; } .split-body .btn { margin-top: 18px; } .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pillar { padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; } .pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, rgba(255,255,255,.25), transparent 70%); } .pillar--accent::before { background: linear-gradient(90deg, var(--red), transparent 70%); } .pillar-num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; } .pillar h3 { font-size: 19px; margin-bottom: 10px; } .pillar p { font-size: 14px; color: var(--ink-2); } html.light .pillar { box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* ── Branches: the hub ──────────────────────────────────────────────── */ .branches { background: var(--bg-2); } /* Two columns, as before. The parent company spans the full row above its two branches, which is also the org chart, and its wide card lays out in two columns so it is not a narrow strip of text across a wide box. */ .branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; } /* Doubled class on purpose: the base .branch rule below sets display:flex and would otherwise win on source order. */ .branch.branch--rmpac { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "head head" "copy lists" "foot foot"; column-gap: 44px; row-gap: 18px; align-items: start; } .branch.branch--rmpac .branch-head { grid-area: head; } .branch.branch--rmpac .branch-body { grid-area: copy; display: flex; flex-direction: column; gap: 14px; } .branch.branch--rmpac .branch-cols { grid-area: lists; padding-top: 0; border-top: 0; } .branch.branch--rmpac .branch-foot { grid-area: foot; } /* The record opener on the parent card: an outlined button with the document icon, so it reads as the card's action without being a red redirect like the two branch cards carry. */ .btn-pp-card { border-color: rgba(196,23,23,.55); } .btn-pp-card svg { width: 17px; height: 17px; color: var(--red-hot); } html.light .btn-pp-card svg { color: var(--red); } .btn-pp-card .btn-arrow { display: inline-block; transition: transform .2s var(--ease); } .btn-pp-card:hover { border-color: var(--red); background: rgba(196,23,23,.1); } .btn-pp-card:hover .btn-arrow { transform: translateX(3px); } /* The parent company's mark on its own card, and the branch with no redirect: it is the site you are on. */ /* A 4:3 lockup, so it needs more height than the wide wordmarks beside it to carry the same visual weight. */ .rmpac-logo { height: 92px; width: auto; margin: -6px 0 -4px; } .rmpac-logo--light { display: none; } html.light .rmpac-logo--dark { display: none; } html.light .rmpac-logo--light { display: block; } .branch--rmpac::before { background: linear-gradient(90deg, #fff 0%, var(--red) 55%, transparent 100%); } html.light .branch--rmpac::before { background: linear-gradient(90deg, #0a0a0b 0%, var(--red) 55%, transparent 100%); } .branch { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; transition: transform .2s var(--ease), border-color .2s; } .branch:hover { transform: translateY(-3px); border-color: rgba(196,23,23,.45); } .branch::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--red); } .branch--one::before { background: linear-gradient(90deg, var(--red), #ff8a3d); } .branch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .branch-mark { display: flex; align-items: center; gap: 10px; } .mark { height: 34px; width: auto; } .mark--light { display: none; } html.light .mark--dark { display: none; } html.light .mark--light { display: block; } /* The RMPAC Group wordmark, the same pair the group site's own nav uses. */ .group-logo { height: 30px; width: auto; } .group-logo--light { display: none; } html.light .group-logo--dark { display: none; } html.light .group-logo--light { display: block; } .one-logo { height: 30px; width: auto; } .one-logo--light { display: none; } html.light .one-logo--dark { display: none; } html.light .one-logo--light { display: block; } .branch-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line); } .branch h3 { font-size: 24px; } .branch > p { color: var(--ink-2); font-size: 15px; } .branch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .branch-cols h4 { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .branch-cols ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .branch-cols li { font-size: 13.5px; color: var(--ink-2); padding-left: 14px; position: relative; } .branch-cols li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 100px; background: var(--red); } .branch-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .lifecycle { margin-top: 26px; padding: 30px 32px; border-radius: 22px; border: 1px dashed var(--line); } .lifecycle-h { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: baseline; margin-bottom: 22px; } .lifecycle-h h3 { font-size: 20px; white-space: nowrap; } .lifecycle-h p { color: var(--ink-2); font-size: 14.5px; } .flow { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 6px; } .node { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 8px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--panel); } .node i { width: 8px; height: 8px; border-radius: 100px; background: var(--red); } .node.is-group i { background: #6ba6ff; } .seg { flex: 1 0 18px; height: 2px; background: var(--line); } .flow-key { display: flex; gap: 18px; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); } .flow-key span { display: inline-flex; align-items: center; gap: 6px; } .k { width: 8px; height: 8px; border-radius: 100px; } .k-one { background: var(--red); } .k-group { background: #6ba6ff; } /* ── About ──────────────────────────────────────────────────────────── */ .creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .creds span { font-family: var(--mono); font-size: 11.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-2); } .people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; } .person { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); transition: transform .2s var(--ease), border-color .2s; } .person:hover { transform: translateY(-3px); border-color: rgba(196,23,23,.45); } .person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 8px; filter: saturate(.9); } .person b { font-size: 13.5px; letter-spacing: -.01em; } .person span { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; } /* ── News ───────────────────────────────────────────────────────────── */ .news { background: var(--bg-2); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .news-loading, .news-empty { grid-column: 1 / -1; padding: 28px; border-radius: 16px; border: 1px dashed var(--line); color: var(--ink-3); font-size: 14px; text-align: center; } .news-card { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: transform .2s var(--ease), border-color .2s; } .news-card:hover { transform: translateY(-3px); border-color: rgba(196,23,23,.45); } .news-thumb { aspect-ratio: 16 / 9; background: var(--bg) center / cover no-repeat; } .news-thumb.is-empty { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); } .news-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; } .news-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .news-card h3 { font-size: 17px; line-height: 1.25; } .news-card p { font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-read { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--red-hot); } html.light .news-read { color: var(--red); } /* ── Footer = Contact ───────────────────────────────────────────────── */ .site-footer { background: #070708; color: #c9c9ce; border-top: 1px solid rgba(255,255,255,.09); padding: 72px 0 34px; } html.light .site-footer { background: #0a0a0b; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer-logo { height: 92px; width: auto; margin-bottom: 18px; } .footer-brand p { font-size: 14px; max-width: 42ch; } .social { display: flex; gap: 8px; margin-top: 18px; } .social a { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; color: #c9c9ce; transition: background .15s, color .15s; } .social a:hover { background: var(--red); color: #fff; border-color: var(--red); } .social svg { width: 16px; height: 16px; } .footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; } .footer-col h4 { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8d8d95; margin-bottom: 6px; } .footer-col a:hover { color: #fff; } .footer-col .mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: #fff; } .footer-col .btn { align-self: flex-start; } /* The SBA mark is a JPEG on white, so it sits on a white tile rather than bleeding a white rectangle onto the black footer. */ /* Two credentials side by side, on identical white tiles at identical height. The badges have different proportions, so height is the size that is held equal; each keeps its own aspect. */ .badges { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: nowrap; } /* The Air Force seal is Air Force blue on a transparent ground, the same blue as the SBA badge. It sits on a white DISC the size of the SBA card, so it reads as a seal rather than as a picture boxed in a square. */ .usaf { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: #fff; flex: 0 0 auto; } .usaf img { height: 94px; width: auto; display: block; } .sba { display: inline-flex; align-items: center; justify-content: center; height: 104px; padding: 4px; border-radius: 10px; background: #fff; overflow: hidden; flex: 0 0 auto; transition: transform .18s var(--ease); } a.sba:hover { transform: translateY(-2px); } .sba img { height: 96px; width: auto; display: block; border-radius: 7px; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; color: #8d8d95; } /* ── Past performances popup ────────────────────────────────────────── */ .soon-pill { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 100px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(196,23,23,.16); color: var(--red-hot); vertical-align: middle; } html.light .soon-pill { color: var(--red); background: rgba(196,23,23,.1); } /* The past-performance opener: a card in the same language as the pillars and branch cards, with a red icon tile, a title, one line saying what it opens, and a "View" cue that brightens and slides on hover. It reads as a thing you open without shouting over the credential chips above it. */ .pp-open { margin-top: 22px; width: 100%; max-width: 560px; text-align: left; cursor: pointer; font: inherit; color: inherit; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; } .pp-open:hover { transform: translateY(-2px); border-color: rgba(196,23,23,.55); box-shadow: 0 18px 40px -28px rgba(196,23,23,.8); } .pp-open:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .pp-open:focus:not(:focus-visible) { outline: none; } .pp-open-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(196,23,23,.16); color: var(--red-hot); display: inline-flex; align-items: center; justify-content: center; } html.light .pp-open-ic { color: var(--red); background: rgba(196,23,23,.1); } .pp-open-ic svg { width: 22px; height: 22px; } .pp-open-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pp-open-t b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; } .pp-open-t span { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); } .pp-open-t em { font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--red-hot); margin-left: 4px; } html.light .pp-open-t em { color: var(--red); } .pp-open-go { font-size: 13px; font-weight: 800; color: var(--ink-3); white-space: nowrap; transition: color .2s, transform .2s var(--ease); } .pp-open:hover .pp-open-go { color: var(--ink); transform: translateX(3px); } @media (max-width: 560px) { .pp-open { grid-template-columns: auto 1fr; } .pp-open-go { grid-column: 2; } } .pp-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ppIn .18s ease both; } .pp-backdrop[hidden] { display: none; } .pp { width: min(860px, 100%); max-height: min(88vh, 900px); overflow-y: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); animation: ppUp .26s var(--ease) both; } @keyframes ppIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ppUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .pp-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 30px 20px; background: var(--panel); border-bottom: 1px solid var(--line); } .pp-head h2 { font-size: 26px; margin-bottom: 8px; } .pp-head p { font-size: 14px; color: var(--ink-2); max-width: 62ch; } .pp-close { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; } .pp-close:hover { color: var(--ink); border-color: var(--red); } .pp-list { list-style: none; padding: 18px 30px; display: flex; flex-direction: column; gap: 10px; } .pp-item { padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--line); background: var(--bg-2); } .pp-item-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pp-item-h b { font-size: 15px; color: var(--ink-3); font-style: italic; font-weight: 600; } /* A real entry: solid border, full-weight title, real values in the ink color. */ .pp-item.is-real { border-style: solid; } .pp-item.is-real .pp-item-h b { color: var(--ink); font-style: normal; font-weight: 800; } .pp-item.is-real .pp-fields b { color: var(--ink); font-weight: 600; } .pp-item.is-real .pp-tag { color: var(--red-hot); border-color: rgba(196,23,23,.4); } html.light .pp-item.is-real .pp-tag { color: var(--red); } .pp-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-3); } .pp-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .pp-fields > div { display: flex; flex-direction: column; gap: 3px; } .pp-fields span { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .pp-fields b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); } .pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 8px 30px 26px; font-size: 13px; color: var(--ink-3); } .pp-foot .btn { margin-top: 0; } /* The BODY state class is deliberately not `.pp-open`: that is the opener button's class, and sharing the name put the button's grid, border, max-width and `font: inherit` onto the whole page while the dialog was open, which shrank the site into a row and dropped every font to serif. */ body.pp-modal-open { overflow: hidden; } @media (max-width: 720px) { .pp-fields { grid-template-columns: 1fr 1fr; } .pp-head, .pp-list, .pp-foot { padding-left: 18px; padding-right: 18px; } .pp-head h2 { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .pp, .pp-backdrop { animation: none; } } /* ── Reveal ─────────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } [data-delay="1"] { transition-delay: .08s; } [data-delay="2"] { transition-delay: .16s; } [data-delay="3"] { transition-delay: .24s; } [data-delay="4"] { transition-delay: .32s; } [data-delay="5"] { transition-delay: .4s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .btn, .branch, .person, .news-card { transition: none; } } /* ── Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 1040px) { .pillars { grid-template-columns: repeat(2, 1fr); } .people { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .branch-grid { grid-template-columns: 1fr; } .branch.branch--rmpac { display: flex; flex-direction: column; } .branch.branch--rmpac .branch-cols { padding-top: 18px; border-top: 1px solid var(--line); } .hero-inner { grid-template-columns: 1fr; gap: 28px; } .hero-logo { order: -1; justify-content: flex-start; } .hero-logo-img { width: min(100%, 260px); } } @media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; } .news-grid { grid-template-columns: 1fr; } .lifecycle-h { grid-template-columns: 1fr; gap: 8px; } .lifecycle-h h3 { white-space: normal; } .hero { padding: 64px 0 56px; } .id-badges { margin-left: 0; flex-basis: 100%; } section { padding: 68px 0; } } @media (max-width: 560px) { .header-inner { height: 72px; padding: 0 16px; } .brand-logo { height: 52px; } .site-nav > a { padding: 8px 10px; font-size: 13px; } .wrap, .hero-inner { padding: 0 18px; } .pillars, .people, .branch-cols, .footer-top { grid-template-columns: 1fr; } .branch { padding: 22px; } .footer-logo { height: 72px; } }