/* ========================================================================== Rhombus marketing site — 2026 redesign -------------------------------------------------------------------------- Hand-maintained. There is NO build step for this file. Ported from the stakeholder's static prototype (assets/css/styles.css) with four deliberate changes: 1. Global resets removed. Tailwind preflight in rhombus.css already supplies them (* box-sizing, heading margin/size reset, list reset, a{color:inherit}). Keeping the prototype's copies would fight it. 2. Bare element selectors scoped. The prototype styled `section`, `body`, `nav`, `footer h4` globally; those would leak into the other marketing pages (and `section{padding:88px 0}` would wreck every one of them). Everything is now class-scoped under .rh-*. 3. Font sizes in rem, breakpoints in em, clamp() on display headings. Required by /home/user/code/CLAUDE.md: no horizontal scroll at 200% text. The prototype shipped 49 px font-sizes and px breakpoints, which do not respond to text zoom at all. 4. Per-locale font stacks. Georgia has zero Armenian coverage, and uppercase + letter-spacing is unidiomatic in Armenian and destroys the CJK em grid. NOTE: rhombus.css (Tailwind v3) is a committed artifact built by a Windows-only binary. Do not introduce Tailwind utility classes that aren't already compiled into it -- they fail silently. Add styling here instead. ========================================================================== */ :root { /* palette */ --rh-navy: #18293D; --rh-navy2: #0f1c2e; --rh-navy-soft: #22364e; --rh-navy-a: #1b2f47; --rh-navy-b: #132234; --rh-navy-c: #26527a; --rh-ink: #1b2430; --rh-gold: #E8A33D; --rh-gold-lit: #f0b358; --rh-orange: #C05A1E; --rh-blue: #2f6df0; --rh-bg: #ffffff; --rh-soft: #f4f7fb; --rh-soft2: #eef3f9; --rh-line: #e4eaf1; --rh-muted: #5B6B7B; --rh-green: #1f9d6b; --rh-green-text: #14724c; /* AA on the pale tints */ --rh-orange-text: #9C4415; /* AA on the pale tints */ --rh-slate: #33475b; /* body links / list copy */ --rh-on-dark: #c9d5e2; /* body copy on navy */ --rh-on-dark-2: #aebccd; /* muted copy on navy */ --rh-on-dark-3: #dbe5ef; --rh-on-dark-4: #f3f7fb; --rh-foot-fg: #9fb0c2; --rh-foot-fg-2: #7d8ea0; --rh-box-bg: #fdf2f0; /* "the box" card */ --rh-box-fg: #a5342a; --rh-box-mark: #c9483b; --rh-open-bg: #eefaf4; /* "the open door" card */ --rh-open-line: #cfeede; --rh-open-fg: #0f7a52; --rh-fico-bg: #eaf0fb; /* type */ --rh-serif: Georgia, "Times New Roman", "Noto Serif", serif; --rh-sans: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --rh-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; /* font scale (rem so it tracks user/OS text size) */ --rh-fs-2xs: 0.6875rem; /* 11px pricing tag */ --rh-fs-xs: 0.78125rem; /* 12.5px eyebrow, footer h4, icard sub */ --rh-fs-sm: 0.8125rem; /* 13px feature desc */ --rh-fs-sm2: 0.84375rem; /* 13.5px chips, addons, pricing list */ --rh-fs-base: 0.875rem; /* 14px footer, btn-sm */ --rh-fs-md: 0.90625rem; /* 14.5px navlinks, pstat rows */ --rh-fs-md2: 0.9375rem; /* 15px btn, devnote */ --rh-fs-lg: 0.96875rem; /* 15.5px vslist, plist */ --rh-fs-lg2: 1.03125rem; /* 16.5px partners/story body */ --rh-fs-xl: 1.1875rem; /* 19px lead */ --rh-fs-xl2: 1.21875rem; /* 19.5px hero sub */ --rh-fs-2xl: 1.375rem; /* 22px vscard h3 */ --rh-fs-3xl: 1.6875rem; /* 27px quote */ /* eyebrow treatment — overridden per locale below */ --rh-eyebrow-transform: uppercase; --rh-eyebrow-tracking: 0.15625rem; } /* --- Per-locale typography ------------------------------------------------- Keyed off , which the layout now emits from the language cookie. */ /* Georgia has no Armenian glyphs; a glyph-level fallback would land on an arbitrary system face and clash with Latin in the same headline. */ html[lang="hy"] { --rh-serif: "Noto Serif Armenian", "Noto Sans Armenian", Sylfaen, serif; --rh-sans: system-ui, "Noto Sans Armenian", Sylfaen, Arial, sans-serif; --rh-eyebrow-transform: none; /* Armenian caps are low-legibility here */ --rh-eyebrow-tracking: 0.03125rem; } html[lang^="zh"] { --rh-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif; --rh-eyebrow-transform: none; /* no-op on Han; tracking breaks the em grid */ --rh-eyebrow-tracking: 0; } html[lang="ja"] { --rh-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --rh-eyebrow-transform: none; --rh-eyebrow-tracking: 0; } html[lang="ko"] { --rh-serif: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif; --rh-eyebrow-transform: none; --rh-eyebrow-tracking: 0; } /* Vietnamese stacks two diacritics; tight tracking collides with the upper one. */ html[lang="vi"] { --rh-eyebrow-tracking: 0.09375rem; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rh-site *, .rh-site *::before, .rh-site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* --- Site wrapper (replaces the prototype's bare `body` rule) -------------- */ .rh-site { font-family: var(--rh-sans); color: var(--rh-ink); background: var(--rh-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } .rh-site h1, .rh-site h2, .rh-site h3 { font-family: var(--rh-serif); color: var(--rh-navy); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; } /* The sticky header is ~66px; without this every in-page anchor lands beneath it. Protects the /#pricing deep links used across the site. */ .rh-site [id] { scroll-margin-top: 5rem; } /* Keyboard focus. The prototype removed underlines and shipped no focus ring. */ .rh-site a:focus-visible, .rh-site button:focus-visible, .rh-hdr a:focus-visible, .rh-hdr button:focus-visible { outline: 3px solid var(--rh-gold); outline-offset: 2px; border-radius: 3px; } .rh-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--rh-navy); color: #fff; padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 8px 0; } .rh-skip:focus { left: 0; } .rh-wrap { max-width: 71.25rem; margin: 0 auto; padding: 0 1.5rem; } .rh-sec { padding: 5.5rem 0; } .rh-lead { font-size: var(--rh-fs-xl); color: var(--rh-muted); max-width: min(60ch, 100%); } .rh-eyebrow { font-size: var(--rh-fs-xs); letter-spacing: var(--rh-eyebrow-tracking); text-transform: var(--rh-eyebrow-transform); font-weight: 800; color: var(--rh-orange); } .rh-emoji { font-family: var(--rh-emoji); font-style: normal; letter-spacing: 0; } /* Flex/grid children default to min-width:auto, which blocks shrinking and is the usual cause of horizontal overflow once translations get longer. */ .rh-site [class*="rh-"] > * { min-width: 0; } /* At 200% text on a 320px viewport, ordinary words are wider than the column they sit in. Without this the page scrolls sideways (WCAG 1.4.4 / 1.4.10). */ /* "anywhere", not "break-word": only "anywhere" also shrinks the intrinsic min-content width, which is what lets a grid column narrow below its longest word. With break-word the column still reserved the full word width and long Armenian/Spanish strings pushed the page sideways at 200% text. */ .rh-site { overflow-wrap: anywhere; } .rh-site p, .rh-site li, .rh-site h1, .rh-site h2, .rh-site h3, .rh-site .rh-tt, .rh-site .rh-dd, .rh-site .rh-nm, .rh-site .rh-ds { hyphens: auto; } /* --- Buttons -------------------------------------------------------------- */ .rh-btn { display: inline-block; padding: .875rem 1.625rem; border-radius: 10px; font-weight: 700; font-size: var(--rh-fs-md2); cursor: pointer; transition: .15s; border: 2px solid transparent; white-space: normal; } .rh-btn-gold { background: var(--rh-gold); color: var(--rh-navy); } .rh-btn-gold:hover { background: var(--rh-gold-lit); transform: translateY(-1px); } .rh-btn-navy { background: var(--rh-navy); color: #fff; } .rh-btn-navy:hover { background: var(--rh-navy-soft); transform: translateY(-1px); } .rh-btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; } .rh-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); } .rh-btn-ghost-dark { border-color: var(--rh-line); color: var(--rh-navy); } .rh-btn-ghost-dark:hover { border-color: var(--rh-navy); } .rh-btn-sm { padding: .625rem 1.125rem; font-size: var(--rh-fs-base); } /* --- Header --------------------------------------------------------------- */ .rh-hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rh-line); } .rh-hdr nav { display: flex; align-items: center; justify-content: space-between; min-height: 4.125rem; gap: 1rem; flex-wrap: wrap; } .rh-brand { display: flex; align-items: center; gap: 10px; } .rh-logo { height: 2.125rem; display: block; width: auto; } .rh-flogo { height: 2.5rem; width: auto; } .rh-navlinks { display: flex; align-items: center; gap: 1.625rem; flex-wrap: wrap; } .rh-navlinks a { font-size: var(--rh-fs-md); font-weight: 600; color: var(--rh-slate); } .rh-navlinks a:hover { color: var(--rh-navy); } .rh-navcta { display: flex; align-items: center; gap: .875rem; } .rh-navcta .rh-login { font-size: var(--rh-fs-md); font-weight: 600; color: var(--rh-slate); } .rh-menu-btn { display: none; background: none; border: none; font-size: 1.625rem; color: var(--rh-navy); cursor: pointer; line-height: 1; } /* Industries dropdown — native
, keyboard-operable, no JS */ .rh-nav-group { position: relative; } .rh-nav-group > summary { list-style: none; cursor: pointer; font-size: var(--rh-fs-md); font-weight: 600; color: var(--rh-slate); display: flex; align-items: center; gap: .35rem; } .rh-nav-group > summary::-webkit-details-marker { display: none; } .rh-nav-group > summary::after { content: "\25BE"; font-size: .7em; } .rh-nav-group[open] > summary { color: var(--rh-navy); } .rh-nav-menu { position: absolute; top: calc(100% + .75rem); left: 0; min-width: 12rem; background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; padding: .5rem; display: flex; flex-direction: column; gap: .125rem; box-shadow: 0 18px 40px rgba(24,41,61,.12); z-index: 60; } .rh-nav-menu a { padding: .5rem .75rem; border-radius: 8px; } .rh-nav-menu a:hover { background: var(--rh-soft); } /* --- Hero ----------------------------------------------------------------- */ .rh-hero { background: radial-gradient(1200px 600px at 75% -10%, var(--rh-navy-soft) 0, var(--rh-navy) 45%, var(--rh-navy2) 100%); color: #fff; padding: 4.75rem 0 5.25rem; overflow: hidden; } .rh-hero .rh-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 2.5rem; align-items: center; } .rh-hero h1 { color: #fff; margin: 1rem 0 1.125rem; font-size: clamp(2.375rem, 5vw + 1rem, 4rem); } .rh-hero p.rh-sub { font-size: var(--rh-fs-xl2); color: var(--rh-on-dark); max-width: 34ch; } .rh-hero .rh-cta { display: flex; gap: .875rem; margin: 1.875rem 0 1.625rem; flex-wrap: wrap; } .rh-chips { display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; color: var(--rh-on-dark-2); font-size: var(--rh-fs-sm2); font-weight: 600; } .rh-chips span { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .rh-chips .rh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rh-gold); flex: none; } .rh-hero-art { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* Decorative only -- sized in px on purpose. In rem it grew with text zoom and pushed the document wider than the viewport at 200%. */ .rh-hero-art .rh-glow { position: absolute; width: 340px; height: 340px; max-width: 100%; pointer-events: none; background: radial-gradient(circle, rgba(232,163,61,.28), transparent 65%); filter: blur(10px); } .rh-hero-art img { position: relative; max-height: 27.5rem; max-width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); } /* --- Section heads -------------------------------------------------------- */ .rh-head { max-width: 45rem; margin-bottom: 2.75rem; } .rh-head h2 { font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem); margin: .75rem 0 .875rem; } .rh-center { margin-left: auto; margin-right: auto; text-align: center; } /* --- Video ---------------------------------------------------------------- */ .rh-player { position: relative; aspect-ratio: 16 / 9; max-width: 60rem; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--rh-navy); box-shadow: 0 24px 50px rgba(24,41,61,.18); } .rh-player iframe, .rh-player .rh-player-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rh-player-btn { padding: 0; cursor: pointer; background: none; display: block; } .rh-player-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .rh-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5rem; height: 5rem; border-radius: 50%; background: rgba(232,163,61,.94); color: var(--rh-navy); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; padding-left: .35rem; transition: .18s; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .rh-player-btn:hover .rh-play { transform: translate(-50%,-50%) scale(1.07); background: var(--rh-gold-lit); } /* --- Boxed vs open -------------------------------------------------------- */ .rh-vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1.5rem; } .rh-vscard { border-radius: 16px; padding: 1.875rem; border: 1px solid var(--rh-line); } .rh-vscard.rh-box { background: var(--rh-box-bg); } .rh-vscard.rh-open { background: var(--rh-open-bg); border-color: var(--rh-open-line); } .rh-vscard h3 { font-size: var(--rh-fs-2xl); margin-bottom: .875rem; } .rh-vscard.rh-box h3 { color: var(--rh-box-fg); } .rh-vscard.rh-open h3 { color: var(--rh-open-fg); } .rh-vslist { display: flex; flex-direction: column; gap: .75rem; } /* The copy in these icon+text rows is a bare text node (an anonymous flex item), which no selector can reach to set min-width:0. Allowing the row to wrap is what lets the text reflow instead of forcing horizontal scroll at large text sizes. */ .rh-vslist li { display: flex; flex-wrap: wrap; gap: .6875rem; font-size: var(--rh-fs-lg); color: var(--rh-slate); } .rh-mark { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--rh-fs-sm); color: #fff; } .rh-box .rh-mark { background: var(--rh-box-mark); } .rh-open .rh-mark { background: var(--rh-green); } .rh-kicker { margin-top: 1.125rem; font-weight: 700; font-style: italic; color: var(--rh-navy); } /* --- Devices -------------------------------------------------------------- */ .rh-device { background: var(--rh-soft); } .rh-devrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; margin-top: 2.75rem; } .rh-devcard { background: #fff; border: 1px solid var(--rh-line); border-radius: 16px; padding: 1.5rem; text-align: center; transition: .18s; } .rh-devcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(24,41,61,.10); } .rh-devcard .rh-imgbox { height: 13.75rem; display: flex; align-items: flex-end; justify-content: center; } .rh-devcard img { max-height: 13.125rem; max-width: 100%; width: auto; height: auto; } .rh-devcard .rh-nm { font-weight: 800; color: var(--rh-navy); margin-top: .875rem; font-size: 1rem; } .rh-devcard .rh-ds { color: var(--rh-muted); font-size: var(--rh-fs-sm2); margin-top: 3px; } .rh-devnote { text-align: center; margin-top: 1.625rem; color: var(--rh-muted); font-size: var(--rh-fs-md2); } /* --- Industries ----------------------------------------------------------- */ .rh-cards5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1rem; margin-top: 2.5rem; } .rh-icard { background: #fff; border: 1px solid var(--rh-line); border-radius: 14px; padding: 1.375rem 1.125rem; text-align: center; transition: .18s; } .rh-icard:hover { border-color: var(--rh-gold); transform: translateY(-3px); } .rh-icard .rh-ico { font-size: 1.875rem; } .rh-icard .rh-t { font-weight: 800; color: var(--rh-navy); margin-top: .5rem; } .rh-icard .rh-s { font-size: var(--rh-fs-xs); color: var(--rh-muted); margin-top: 4px; } /* --- Features ------------------------------------------------------------- */ .rh-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.125rem; margin-top: 2.5rem; } .rh-fitem { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 12px; transition: .15s; } .rh-fitem:hover { background: var(--rh-soft); } .rh-fico { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 10px; background: var(--rh-fico-bg); color: var(--rh-blue); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; } .rh-fitem .rh-tt { font-weight: 700; color: var(--rh-navy); font-size: var(--rh-fs-md2); } .rh-fitem .rh-dd { font-size: var(--rh-fs-sm); color: var(--rh-muted); } /* --- Partners ------------------------------------------------------------- */ .rh-partners { background: linear-gradient(120deg, var(--rh-navy-a), var(--rh-navy-b)); color: #fff; } .rh-partners .rh-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 2.5rem; align-items: center; } .rh-partners h2 { color: #fff; font-size: clamp(1.75rem, 2.5vw + 1rem, 2.375rem); margin: .75rem 0 1rem; } .rh-partners p { color: var(--rh-on-dark); font-size: var(--rh-fs-lg2); } .rh-plist { margin: 1.375rem 0 1.75rem; display: flex; flex-direction: column; gap: .75rem; } .rh-plist li { display: flex; flex-wrap: wrap; gap: .6875rem; color: var(--rh-on-dark-3); font-size: var(--rh-fs-lg); } .rh-plist .rh-m { color: var(--rh-gold); font-weight: 800; flex: none; } .rh-pstat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1.75rem; } .rh-pstat .rh-big { font-family: var(--rh-serif); font-size: 2.5rem; color: var(--rh-gold); font-weight: 700; line-height: 1.1; } .rh-pstat .rh-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--rh-fs-md); color: var(--rh-on-dark); } .rh-pstat .rh-row:first-of-type { border-top: none; } /* --- Pricing -------------------------------------------------------------- */ .rh-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.125rem; margin-top: 2.625rem; } .rh-pcard { border: 1px solid var(--rh-line); border-radius: 16px; padding: 1.625rem 1.375rem; background: #fff; position: relative; display: flex; flex-direction: column; } .rh-pcard.rh-pop { border: 2px solid var(--rh-gold); box-shadow: 0 20px 44px rgba(232,163,61,.18); } .rh-pcard .rh-tag { position: absolute; top: -.75rem; left: 1.375rem; background: var(--rh-gold); color: var(--rh-navy); font-size: var(--rh-fs-2xs); font-weight: 800; letter-spacing: .5px; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; } .rh-pcard .rh-pn { font-weight: 800; color: var(--rh-navy); font-size: 1.0625rem; } .rh-pcard .rh-amt { font-family: var(--rh-serif); font-size: 2.5rem; color: var(--rh-navy); margin: .5rem 0 2px; } .rh-pcard .rh-amt small { font-family: var(--rh-sans); font-size: var(--rh-fs-base); color: var(--rh-muted); font-weight: 600; } .rh-pcard .rh-pl { margin: 1rem 0 1.375rem; display: flex; flex-direction: column; gap: .5625rem; flex: 1; } .rh-pcard .rh-pl li { font-size: var(--rh-fs-sm2); color: var(--rh-slate); display: flex; flex-wrap: wrap; gap: .5625rem; } .rh-pcard .rh-pl .rh-c { color: var(--rh-green); font-weight: 800; flex: none; } .rh-pcard .rh-btn { text-align: center; } /* Add-ons: separators come from CSS, not from the translated strings. */ .rh-addons { margin-top: 1.625rem; text-align: center; color: var(--rh-muted); font-size: var(--rh-fs-sm2); } .rh-dotlist { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; margin-top: .5rem; } .rh-dotlist li + li::before { content: "\00B7"; margin-right: .75rem; opacity: .5; } html[lang^="zh"] .rh-dotlist li + li::before { content: "\3001"; } html[lang="ja"] .rh-dotlist li + li::before { content: "\30FB"; } .rh-dotlist b { color: var(--rh-navy); } /* --- Story ---------------------------------------------------------------- */ .rh-story { background: var(--rh-soft); } .rh-story .rh-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 2.75rem; align-items: center; } .rh-story h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.375rem); margin: .75rem 0 1rem; } .rh-story p { color: var(--rh-slate); font-size: var(--rh-fs-lg2); margin-bottom: .875rem; } .rh-story .rh-sig { font-weight: 800; color: var(--rh-navy); } .rh-story .rh-sig span { color: var(--rh-muted); font-weight: 600; } .rh-quotecard { background: linear-gradient(135deg, var(--rh-navy-a), var(--rh-navy-b)); color: #fff; border-radius: 18px; padding: 2.5rem 2.125rem; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 24px 50px rgba(24,41,61,.18); } .rh-quotecard .rh-qmark { font-family: var(--rh-serif); font-size: 4.625rem; line-height: .5; color: var(--rh-gold); } .rh-quotecard .rh-q { font-family: var(--rh-serif); font-size: var(--rh-fs-3xl); line-height: 1.3; margin: .625rem 0 1.125rem; color: var(--rh-on-dark-4); } .rh-quotecard .rh-q em { color: var(--rh-gold); font-style: italic; } .rh-quotecard .rh-qby { color: var(--rh-on-dark-2); font-weight: 600; font-size: var(--rh-fs-base); } /* --- Final CTA ------------------------------------------------------------ */ .rh-final { background: radial-gradient(900px 400px at 20% 0, var(--rh-navy-c) 0, var(--rh-navy) 55%); color: #fff; text-align: center; } .rh-final h2 { color: #fff; font-size: clamp(2rem, 4vw + 1rem, 2.875rem); margin-bottom: .875rem; } .rh-final p { color: var(--rh-on-dark); font-size: 1.125rem; margin-bottom: 1.75rem; } .rh-final .rh-cta { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; } .rh-final .rh-contact { margin-top: 1.625rem; color: var(--rh-on-dark-2); font-size: var(--rh-fs-md); } .rh-final .rh-contact a { color: var(--rh-gold); } /* --- Footer --------------------------------------------------------------- */ .rh-foot { background: var(--rh-navy2); color: var(--rh-foot-fg); padding: 3.5rem 0 1.875rem; font-size: var(--rh-fs-base); } .rh-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1.875rem; padding-bottom: 2.125rem; border-bottom: 1px solid rgba(255,255,255,.08); } .rh-foot h4 { color: #fff; font-size: var(--rh-fs-sm); letter-spacing: 1px; text-transform: uppercase; margin-bottom: .875rem; } .rh-foot ul { display: flex; flex-direction: column; gap: .5625rem; } .rh-foot a:hover { color: #fff; } .rh-foot .rh-tagline { color: var(--rh-gold); font-style: italic; margin-top: .625rem; } .rh-fbot { display: flex; justify-content: space-between; padding-top: 1.375rem; color: var(--rh-foot-fg-2); flex-wrap: wrap; gap: .5rem; } .rh-fbot .rh-legal { font-size: var(--rh-fs-xs); max-width: 60ch; } .rh-backtotop { color: var(--rh-foot-fg); font-weight: 600; } .rh-backtotop:hover { color: #fff; } /* --- Breakpoints ---------------------------------------------------------- em, not px: under browser/OS text zoom an em threshold grows, so the layout collapses exactly when it would otherwise overflow. px breakpoints never fire. */ @media (max-width: 60em) { .rh-hero .rh-grid { grid-template-columns: 1fr; } .rh-hero-art { order: -1; } .rh-navlinks, .rh-navcta .rh-login { display: none; } .rh-menu-btn { display: block; } .rh-hdr.rh-open .rh-navlinks { display: flex; position: absolute; top: 4.125rem; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 1.125rem 1.5rem; gap: 1rem; border-bottom: 1px solid var(--rh-line); box-shadow: 0 18px 40px rgba(24,41,61,.10); } .rh-hdr.rh-open .rh-nav-menu { position: static; box-shadow: none; border: none; padding: .25rem 0 .25rem .75rem; } } @media (max-width: 35em) { .rh-sec { padding: 3.75rem 0; } .rh-hero .rh-cta { flex-direction: column; align-items: stretch; } .rh-hero .rh-cta a { width: 100%; text-align: center; } .rh-play { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; } } /* ========================================================================== Legacy dark-theme compatibility layer -------------------------------------------------------------------------- The nine inner marketing pages are still written in the previous dark Tailwind palette (text-white on gray-900/black, indigo->purple gradients). Rewriting ~3,200 lines of their markup would mean re-keying ~550 Loc.GetString calls -- and the key IS the English text, so every touched string would silently lose its 8 translations. It would also put the three reCAPTCHA/SendGrid forms at risk. Instead the dark utilities are re-pointed to the new light palette here. `.rh-site .text-white` (0,2,0) outspecifies Tailwind's `.text-white` (0,1,0), so no !important is needed, and rhombus-site.css loads after rhombus.css. This is a transitional layer. As each page is genuinely rewritten in rh-* markup, its rules can be dropped from here. ========================================================================== */ /* text */ .rh-site .text-white { color: var(--rh-navy); } .rh-site .text-gray-300 { color: var(--rh-slate); } .rh-site .text-gray-400 { color: var(--rh-muted); } .rh-site .text-gray-500 { color: var(--rh-muted); } /* Text-on-tint variants: the display orange/green pass on white but fall just under 4.5:1 on the pale blue/green card tints, so the text uses darker tones. */ .rh-site .text-indigo-400, .rh-site .text-purple-400 { color: var(--rh-orange-text); } .rh-site .text-green-400 { color: var(--rh-green-text); } .rh-site .text-red-400 { color: var(--rh-box-mark); } /* surfaces */ .rh-site .bg-gray-900, .rh-site .bg-black, .rh-site .bg-gray-800 { background-color: var(--rh-bg); } /* Opacity-suffixed variants matter as much as the plain ones: a missed bg-gray-900/90 left a near-black card with navy text on it. */ .rh-site .bg-gray-800\/50, .rh-site .bg-gray-800\/30, .rh-site .bg-gray-800\/70, .rh-site .bg-gray-800\/90 { background-color: var(--rh-soft); } .rh-site .bg-gray-900\/90, .rh-site .bg-gray-900\/50 { background-color: var(--rh-bg); } .rh-site .bg-indigo-500\/10, .rh-site .bg-purple-500\/10 { background-color: var(--rh-fico-bg); } .rh-site .bg-green-500\/10 { background-color: var(--rh-open-bg); } /* hairlines */ .rh-site .ring-gray-700, .rh-site .ring-gray-800 { --tw-ring-color: var(--rh-line); } .rh-site .border-gray-700, .rh-site .border-gray-800 { border-color: var(--rh-line); } /* The old identity: indigo->purple gradient pills and the pink/violet blurred blobs. Both clash badly with the new navy/gold palette. */ /* Gradient pill CTAs, whichever accent they start from -- including the partner-application submit button, which was from-purple-600. */ .rh-site [class*="from-indigo-600"], .rh-site [class*="from-indigo-500"], .rh-site [class*="from-purple-600"], .rh-site [class*="from-pink-600"], .rh-site [class*="from-blue-600"] { background-image: none !important; background-color: var(--rh-gold); color: var(--rh-navy); } .rh-site [class*="from-indigo-600"]:hover, .rh-site [class*="from-indigo-500"]:hover, .rh-site [class*="from-purple-600"]:hover, .rh-site [class*="from-pink-600"]:hover, .rh-site [class*="from-blue-600"]:hover { background-color: var(--rh-gold-lit); } .rh-site [class*="from-green-600"] { background-image: none !important; background-color: var(--rh-green-text); color: #fff; } .rh-site [class*="from-[#ff80b5]"], .rh-site [class*="to-[#9089fc]"] { display: none; } /* Any leftover dark gradient, in any direction. Matching on the direction class missed bg-gradient-to-br/-to-r variants and left dark bands behind. */ .rh-site [class*="from-gray-900"], .rh-site [class*="to-black"], .rh-site [class*="from-black"], .rh-site .bg-gradient-to-tr { background-image: none; } /* Section backgrounds on these pages sat on the dark wrapper; without it they need the page background explicitly. */ .rh-site .min-h-screen { min-height: 0; } /* --- Legacy indigo/purple bands ----------------------------------------- These were dark gradient sections carrying light text. Repainting them dark in the new palette did not work: they contain light cards, so any rule that restored light text also hit text sitting on those cards. Making the band light instead keeps the whole inner-page body consistently dark-on-light, and the only genuinely dark areas are the rh-* sections, which carry their own explicit light colours. */ .rh-site [class*="from-indigo-900"], .rh-site [class*="from-purple-900"], .rh-site [class*="from-indigo-800"], .rh-site [class*="from-purple-800"] { background-image: none; background-color: var(--rh-soft2); } /* Solid accent chips (numbered step badges) carry text-white on the SAME element. Repaint the chip in the brand navy and keep its text white -- .bg-indigo-500.text-white (0,3,0) outranks the generic .rh-site .text-white remap (0,2,0). */ .rh-site .bg-indigo-500 { background-color: var(--rh-navy); } .rh-site .bg-indigo-500.text-white, .rh-site .bg-indigo-500 .text-white { color: #fff; }