/* ============================================================ RCS Voice B — Custom property scaffolding & animations Enqueued site-wide via savage-child functions.php Source: claude_code_resources/dev-handoff/04-design-tokens.md § Animation system ============================================================ */ :root { /* Solid colors as CSS variables (mirror Elementor Global Colors) */ --rcs-page-base: #05070D; --rcs-section-band: #0A0E18; --rcs-surface-card: #0E1422; --rcs-blue: #095ACE; --rcs-blue-glow: #2B7FFF; --rcs-cyan-edge: #6BA6FF; --rcs-live-cyan: #00D4FF; --rcs-ink-primary: #E8EEF8; --rcs-ink-subtle: #A8B4C8; --rcs-ink-muted: #8B95AB; --rcs-ink-faint: #5D6A82; --rcs-negative: #FF6B7A; /* Translucent layers */ --rcs-glow-blue-strong: rgba(43,127,255,0.45); --rcs-glow-blue-medium: rgba(43,127,255,0.25); --rcs-glow-blue-soft: rgba(43,127,255,0.18); --rcs-glow-blue-faint: rgba(43,127,255,0.12); --rcs-glow-deep-strong: rgba(9,90,206,0.45); --rcs-glow-deep-medium: rgba(9,90,206,0.35); --rcs-glow-deep-soft: rgba(9,90,206,0.25); --rcs-border-blue: rgba(43,127,255,0.30); --rcs-border-blue-strong: rgba(43,127,255,0.40); --rcs-border-blue-faint: rgba(43,127,255,0.18); --rcs-glass-card-top: rgba(14,20,34,0.85); --rcs-glass-card-bottom: rgba(10,14,24,0.85); --rcs-glass-card-soft-top: rgba(14,20,34,0.70); --rcs-glass-card-soft-bottom: rgba(10,14,24,0.70); --rcs-glass-nav-bg: rgba(5,7,13,0.70); --rcs-glass-button-bg: rgba(14,20,34,0.70); --rcs-grid-line: rgba(43,127,255,0.06); /* Gradients */ --rcs-grad-primary: linear-gradient(135deg, #095ACE, #2B7FFF); --rcs-grad-text: linear-gradient(135deg, #FFFFFF 0%, #6BA6FF 60%, #095ACE 100%); --rcs-grad-glass: linear-gradient(180deg, var(--rcs-glass-card-top), var(--rcs-glass-card-bottom)); --rcs-grad-glass-soft: linear-gradient(180deg, var(--rcs-glass-card-soft-top), var(--rcs-glass-card-soft-bottom)); --rcs-grad-process-line: linear-gradient(90deg, transparent, #2B7FFF, transparent); --rcs-grad-vertical-rule: linear-gradient(180deg, #2B7FFF, transparent); /* Shadows */ --rcs-shadow-button: 0 0 24px rgba(43,127,255,0.45), 0 0 48px rgba(9,90,206,0.25); --rcs-shadow-button-hover: 0 6px 28px rgba(43,127,255,0.70), 0 0 60px rgba(9,90,206,0.40); --rcs-shadow-card-glow: 0 0 60px rgba(9,90,206,0.25); --rcs-shadow-card-deep: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(9,90,206,0.25); --rcs-shadow-icon-base: 0 0 24px rgba(43,127,255,0.45); --rcs-shadow-icon-hover: 0 0 36px rgba(43,127,255,0.85); /* Motion timings */ --rcs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rcs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --rcs-dur-quick: 180ms; --rcs-dur-base: 220ms; --rcs-dur-medium: 280ms; --rcs-dur-slow: 380ms; --rcs-dur-sheen: 900ms; } /* Body baseline (dark mode only) */ html { scroll-behavior: smooth; overflow-x: clip; /* Sticky header offset for any anchored target — keeps section headings + form anchors clear of the header bar after smooth-scroll. */ scroll-padding-top: 88px; } :target { scroll-margin-top: 88px; } /* Lenis smooth-scroll hooks — activated by the lib once it boots. When Lenis is running, native CSS scroll-behavior must be disabled or the browser fights the JS animation. Lenis adds .lenis + .lenis-smooth on . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-scrolling iframe { pointer-events: none; } body { background: var(--rcs-page-base); color: var(--rcs-ink-primary); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* 48 px grid background — hero / techy sections */ .rcs-grid-bg { background-image: linear-gradient(var(--rcs-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rcs-grid-line) 1px, transparent 1px); background-size: 48px 48px; } /* Standard page container */ .rcs-container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } @media (min-width: 640px) { .rcs-container { padding-left: 24px; padding-right: 24px; } } @media (min-width: 1024px) { .rcs-container { padding-left: 32px; padding-right: 32px; } } /* ---------------------------------------------------------- 1. Spotlight card --------------------------------------------------------- */ .rcs-spotlight { /* Scale the cursor-follow radius with viewport so wide CTA banners and narrow stat cards both feel right. Authors can still override per instance via inline style="--rcs-spot-radius: …". */ --rcs-spot-radius: clamp(360px, 32vw, 640px); --rcs-spot-color: rgba(43,127,255,0.22); --rcs-corner-color: rgba(43,127,255,0.20); position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; background: var(--rcs-grad-glass); border: 1px solid var(--rcs-border-blue); } .rcs-spotlight > * { position: relative; z-index: 1; } .rcs-spotlight::before { content: ""; position: absolute; top: -64px; right: -64px; width: 192px; height: 192px; border-radius: 9999px; pointer-events: none; z-index: 0; background: radial-gradient(circle, var(--rcs-corner-color), transparent 70%); } .rcs-spotlight::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( var(--rcs-spot-radius) circle at var(--mx, 50%) var(--my, -20%), var(--rcs-spot-color), transparent 55%); opacity: var(--m-active, 0); transition: opacity var(--rcs-dur-medium) ease; } .rcs-spotlight--strong { border-color: var(--rcs-border-blue-strong); box-shadow: var(--rcs-shadow-card-glow); } /* Form variant — calm glass card, no cursor follow, no corner glow. */ .rcs-spotlight--form { isolation: auto; } .rcs-spotlight--form::before, .rcs-spotlight--form::after { display: none; } /* ---------------------------------------------------------- 2. Grid-reveal card --------------------------------------------------------- */ .rcs-grid-reveal { --rcs-grid-size: 28px; --rcs-grid-stroke: rgba(43,127,255,0.32); --rcs-reveal-radius: 200px; position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; background: var(--rcs-grad-glass-soft); border: 1px solid rgba(43,127,255,0.22); } .rcs-grid-reveal > * { position: relative; z-index: 1; } .rcs-grid-reveal::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--rcs-grid-stroke) 1px, transparent 1px), linear-gradient(90deg, var(--rcs-grid-stroke) 1px, transparent 1px); background-size: var(--rcs-grid-size) var(--rcs-grid-size); -webkit-mask-image: radial-gradient( var(--rcs-reveal-radius) circle at var(--mx, 50%) var(--my, -20%), black 0%, transparent 65%); mask-image: radial-gradient( var(--rcs-reveal-radius) circle at var(--mx, 50%) var(--my, -20%), black 0%, transparent 65%); opacity: var(--m-active, 0); transition: opacity var(--rcs-dur-medium) ease; } /* ---------------------------------------------------------- 3. Icon badge --------------------------------------------------------- */ .rcs-icon-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; isolation: isolate; cursor: default; } .rcs-icon-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(43,127,255,0.55), transparent 70%); transform: scale(1); opacity: 0; pointer-events: none; transition: transform var(--rcs-dur-slow) ease, opacity var(--rcs-dur-slow) ease; z-index: 0; } .rcs-icon-badge > .rcs-icon-badge__core { position: relative; display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: inherit; background: var(--rcs-grad-primary); box-shadow: var(--rcs-shadow-icon-base); transform: scale(1) rotate(0); transition: transform var(--rcs-dur-medium) var(--rcs-ease-spring), box-shadow var(--rcs-dur-medium) ease; z-index: 1; color: #fff; } .rcs-icon-badge > .rcs-icon-badge__core svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rcs-icon-badge:hover::before, .rcs-card-hover-target:hover .rcs-icon-badge::before { transform: scale(1.55); opacity: 1; } .rcs-icon-badge:hover > .rcs-icon-badge__core, .rcs-card-hover-target:hover .rcs-icon-badge > .rcs-icon-badge__core { transform: scale(1.08) rotate(-4deg); box-shadow: var(--rcs-shadow-icon-hover); } .rcs-icon-badge--xl, .rcs-icon-badge--xl > .rcs-icon-badge__core { border-radius: 14px; } /* ---------------------------------------------------------- 4. Primary button --------------------------------------------------------- */ .rcs-primary-btn { /* Magnetic + lift offsets composited in transform so the magnet attractor (set by JS as --rcs-mag-x/y) and the hover lift (--rcs-lift) stack without overwriting each other. --bx/--by drive the cursor halo. */ --rcs-mag-x: 0px; --rcs-mag-y: 0px; --rcs-lift: 0px; --bx: 50%; --by: 50%; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 9999px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; color: #fff !important; text-decoration: none; cursor: pointer; background: var(--rcs-grad-primary); border: 1px solid rgba(107,166,255,0.5); box-shadow: var(--rcs-shadow-button); transform: translate3d(var(--rcs-mag-x), calc(var(--rcs-mag-y) + var(--rcs-lift)), 0); transition: transform 360ms var(--rcs-ease-out), box-shadow var(--rcs-dur-base) ease; } .rcs-primary-btn:hover, .rcs-primary-btn:focus-visible { --rcs-lift: -2px; box-shadow: var(--rcs-shadow-button-hover); } /* Cursor halo — soft white radial glow following pointer inside the button. Painted above the gradient fill but below sheen + label (z-index 1; sheen is z-index 0 in source order, label gets explicit z-index 2). */ .rcs-primary-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient( 90px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 30%, transparent 65% ); opacity: 0; transition: opacity 220ms ease; z-index: 1; mix-blend-mode: screen; } .rcs-primary-btn:hover::after, .rcs-primary-btn:focus-visible::after { opacity: 1; } .rcs-primary-btn__sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; background: linear-gradient(100deg, transparent 10%, rgba(255,255,255,0.55) 50%, transparent 90%); transform: translateX(-200%) skewX(-18deg); transition: transform var(--rcs-dur-sheen) ease; } .rcs-primary-btn:hover .rcs-primary-btn__sheen, .rcs-primary-btn:focus-visible .rcs-primary-btn__sheen { transform: translateX(300%) skewX(-18deg); } .rcs-primary-btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; } /* Reset magnetic offsets for touch and reduced-motion. Keeps the click target stable for tap-driven UX and respects user preference. */ @media (hover: none), (prefers-reduced-motion: reduce) { .rcs-primary-btn { --rcs-mag-x: 0px; --rcs-mag-y: 0px; } .rcs-primary-btn::after { display: none; } } /* ---------------------------------------------------------- 5. Glass button --------------------------------------------------------- */ .rcs-glass-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 9999px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--rcs-ink-primary) !important; text-decoration: none; cursor: pointer; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(0); box-shadow: none; transition: transform var(--rcs-dur-base) ease, background var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease; } .rcs-glass-btn:hover, .rcs-glass-btn:focus-visible { background: var(--rcs-glow-blue-soft); border-color: rgba(107,166,255,0.85); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(43,127,255,0.35), inset 0 0 18px rgba(43,127,255,0.18); } /* ---------------------------------------------------------- 6. Gradient text --------------------------------------------------------- */ .rcs-gradient-text { /* Inline span; needs `display:inline-block` so background-clip:text honours padding-bottom (otherwise descenders on g/y/p clip on Safari). */ display: inline-block; background-image: var(--rcs-grad-text); /* Doubled background lets us animate the gradient through the text. The "off" state parks the blue end out of view (mostly white reads through), the "on" state slides the gradient back to its anchored position so the full white→blue→deep-blue distribution lands on the glyphs. */ background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.06em; transition: background-position 1100ms cubic-bezier(0.16, 1, 0.3, 1); } .rcs-gradient-text.is-revealed, .rcs-reveal.is-revealed .rcs-gradient-text, .rcs-reveal.is-revealed.rcs-gradient-text { background-position: 0% 50%; } @media (prefers-reduced-motion: reduce) { .rcs-gradient-text { background-position: 0% 50%; transition: none; } } /* ---------------------------------------------------------- 7. Sticky nav glass --------------------------------------------------------- */ .rcs-nav-glass { background: var(--rcs-glass-nav-bg); border-bottom: 1px solid var(--rcs-border-blue-faint); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* ---------------------------------------------------------- 8. Active nav link --------------------------------------------------------- */ .rcs-nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; color: var(--rcs-ink-subtle); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 4px; transition: color var(--rcs-dur-base) ease, border-bottom-color var(--rcs-dur-base) ease, text-shadow var(--rcs-dur-base) ease; } .rcs-nav-link:hover { color: #fff; } .rcs-nav-link.is-active { color: #fff; text-shadow: 0 0 14px rgba(107,166,255,0.7); border-bottom-color: var(--rcs-live-cyan); } /* Back link — used on article + location singles. */ .rcs-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--rcs-cyan-edge); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; background: transparent; border: none; padding: 6px 0; cursor: pointer; transition: color var(--rcs-dur-base) ease, transform var(--rcs-dur-base) ease; } .rcs-back-link svg { width: 14px; height: 14px; transition: transform var(--rcs-dur-base) ease; } .rcs-back-link:hover { color: #fff; } .rcs-back-link:hover svg { transform: translateX(-3px); } .rcs-back-link:focus-visible { outline: 2px solid var(--rcs-cyan-edge); outline-offset: 4px; border-radius: 4px; } /* Area pill — used for local-cities + metro lists on Buying location pages. Wider tap-friendly chip than the .rcs-pill mono badge. */ .rcs-area-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9999px; background: rgba(14,20,34,0.7); border: 1px solid rgba(43,127,255,0.3); font-family: 'Inter', sans-serif; font-size: 13px; color: var(--rcs-ink-primary); white-space: nowrap; line-height: 1.2; } .rcs-area-pill--muted { background: rgba(14,20,34,0.5); border-color: rgba(43,127,255,0.25); color: var(--rcs-ink-subtle); } @media (max-width: 640px) { .rcs-area-pill { padding: 7px 14px; font-size: 12px; } } /* ---------------------------------------------------------- 9. Pills (status, live, USDOT, etc.) --------------------------------------------------------- */ .rcs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; background: var(--rcs-glow-blue-faint); border: 1px solid var(--rcs-border-blue-faint); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-cyan-edge); } .rcs-pill--cyan { color: var(--rcs-live-cyan); border-color: rgba(0,212,255,0.30); background: rgba(0,212,255,0.10); } .rcs-pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--rcs-live-cyan); box-shadow: 0 0 8px var(--rcs-live-cyan); animation: rcs-pulse-dot 1.6s ease-in-out infinite; } @keyframes rcs-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } /* ---------------------------------------------------------- 10. World-map pin pulse --------------------------------------------------------- */ .rcs-map-pin { fill: var(--rcs-blue-glow); } .rcs-map-pulse { fill: var(--rcs-live-cyan); transform-origin: center; transform-box: fill-box; animation: rcs-map-ping 2.4s ease-out infinite; } @keyframes rcs-map-ping { 0% { opacity: 0.7; r: 4; } 80% { opacity: 0; r: 14; } 100% { opacity: 0; r: 14; } } /* ---------------------------------------------------------- 11. Avatar circle (team, quote) --------------------------------------------------------- */ .rcs-avatar { width: 48px; height: 48px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rcs-grad-primary); color: #fff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; box-shadow: var(--rcs-shadow-icon-base); flex-shrink: 0; } .rcs-avatar--lg { width: 56px; height: 56px; font-size: 16px; } /* ---------------------------------------------------------- 12. Section padding presets --------------------------------------------------------- */ .rcs-section-sm { padding-top: 40px; padding-bottom: 40px; } .rcs-section-md { padding-top: 48px; padding-bottom: 48px; } .rcs-section-lg { padding-top: 64px; padding-bottom: 64px; } .rcs-section-xl { padding-top: 80px; padding-bottom: 80px; } @media (min-width: 768px) { .rcs-section-sm { padding-top: 56px; padding-bottom: 56px; } .rcs-section-md { padding-top: 64px; padding-bottom: 64px; } .rcs-section-lg { padding-top: 96px; padding-bottom: 96px; } .rcs-section-xl { padding-top: 112px; padding-bottom: 112px; } } /* ---------------------------------------------------------- 13. Process timeline connector --------------------------------------------------------- */ .rcs-process-line { /* Badge is 56px, padding-top:8px on .rcs-process, so badge center sits at 8 + 28 = 36px. The line aligns with that center at lg+. */ position: absolute; top: 36px; left: 10%; right: 10%; height: 1px; background: var(--rcs-grad-process-line); pointer-events: none; } /* ---------------------------------------------------------- 14. Stat tile --------------------------------------------------------- */ .rcs-stat-tile { background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue-subtle, rgba(43,127,255,0.25)); border-radius: 8px; padding: 16px; } .rcs-stat-tile__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-ink-muted); margin-bottom: 6px; } .rcs-stat-tile__value { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; background-image: var(--rcs-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .rcs-stat-tile__delta { font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-top: 4px; color: var(--rcs-live-cyan); } .rcs-stat-tile__delta--negative { color: var(--rcs-negative); } /* ---------------------------------------------------------- 15. Eyebrow + heading helpers --------------------------------------------------------- */ .rcs-eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rcs-blue-glow); margin-bottom: 12px; } .rcs-h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(30px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--rcs-ink-primary); } .rcs-h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.10; letter-spacing: -0.02em; color: var(--rcs-ink-primary); } .rcs-h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.30; color: var(--rcs-ink-primary); } .rcs-lead { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.60; color: var(--rcs-ink-subtle); } .rcs-body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.60; color: var(--rcs-ink-subtle); } .rcs-mono-caption { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.5; color: var(--rcs-ink-muted); } .rcs-mono-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rcs-ink-muted); } .rcs-stat-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.0; letter-spacing: -0.04em; } /* ---------------------------------------------------------- 16. Bullet list with check mark --------------------------------------------------------- */ .rcs-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .rcs-check-list > li { position: relative; padding-left: 24px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: var(--rcs-ink-primary); } .rcs-check-list > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 9999px; background: var(--rcs-grad-primary); box-shadow: 0 0 8px rgba(43,127,255,0.6); } .rcs-check-list > li::after { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } /* ---------------------------------------------------------- 18. Header / nav layout --------------------------------------------------------- */ .rcs-header { width: 100%; } .rcs-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; } /* Brand anchor — explicit display + flex-shrink so the logo never collapses in the flex parent on narrow viewports (Joe report 2026-05-16: logo missing on mobile). The parent `` is inline by default; without `inline-flex` and `flex-shrink: 0` it can squeeze to 0 width when the toggle/CTA crowd the row. */ .rcs-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0; } .rcs-nav__brand img { display: block; height: 32px !important; width: auto !important; max-width: none !important; } @media (max-width: 480px) { .rcs-nav__brand img { height: 28px !important; } } .rcs-nav__primary { display: none; list-style: none; margin: 0; padding: 0; gap: 28px; align-items: center; } @media (min-width: 1024px) { .rcs-nav__primary { display: flex; } } .rcs-nav__primary > li { position: relative; } .rcs-resources-trigger { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 0 4px; margin: 0; cursor: pointer; font: inherit; color: var(--rcs-ink-subtle); text-decoration: none; transition: color var(--rcs-dur-base) ease, border-bottom-color var(--rcs-dur-base) ease, text-shadow var(--rcs-dur-base) ease; } .rcs-resources-trigger:hover, .rcs-resources-trigger:focus, .rcs-resources-trigger:focus-visible, .rcs-resources-trigger:active { background: transparent; outline: none; color: #fff; } .rcs-resources-wrap.is-open .rcs-resources-trigger { color: #fff; } .rcs-resources-trigger .rcs-chevron { transition: transform var(--rcs-dur-quick) ease; } .rcs-resources-wrap.is-open .rcs-resources-trigger .rcs-chevron { transform: rotate(180deg); } .rcs-resources-wrap { padding-bottom: 0; } .rcs-resources-menu { position: absolute; top: 100%; right: 0; min-width: 360px; display: none; flex-direction: column; gap: 4px; padding: 24px 12px 12px; /* 12px hit-bridge + 12px visual */ margin-top: 0; background: transparent; border: 0; z-index: 200; } .rcs-resources-menu::before { content: ""; position: absolute; inset: 12px 0 0 0; /* matches the visible card area */ background: var(--rcs-grad-glass); border: 1px solid var(--rcs-border-blue); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(9,90,206,0.25); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: -1; pointer-events: none; } .rcs-resources-wrap.is-open .rcs-resources-menu { display: flex; } .rcs-resources-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: var(--rcs-ink-primary); transition: background var(--rcs-dur-quick) ease, border-color var(--rcs-dur-quick) ease; } .rcs-resources-item:hover { background: var(--rcs-glow-blue-soft); border-color: var(--rcs-border-blue); } .rcs-resources-item .rcs-icon-badge { width: 40px; height: 40px; } .rcs-resources-item .rcs-icon-badge svg { width: 18px; height: 18px; } .rcs-resources-item__copy { display: flex; flex-direction: column; gap: 2px; } .rcs-resources-item__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--rcs-ink-primary); } .rcs-resources-item__desc { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--rcs-ink-muted); } .rcs-nav__actions { display: flex; align-items: center; gap: 16px; } .rcs-nav__login { display: none; color: var(--rcs-cyan-edge); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; } .rcs-nav__login:hover { color: #fff; } @media (min-width: 1024px) { .rcs-nav__login { display: inline-block; } } .rcs-nav__cta { display: none; } @media (min-width: 768px) { .rcs-nav__cta { display: inline-flex; } } .rcs-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue); border-radius: 10px; color: var(--rcs-ink-primary); cursor: pointer; } @media (min-width: 1024px) { .rcs-mobile-toggle { display: none; } } .rcs-mobile-nav { display: flex; flex-direction: column; gap: 16px; padding: 0 24px; background: var(--rcs-page-base); border-bottom: 0 solid var(--rcs-border-blue-faint); max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--rcs-dur-medium) ease, opacity var(--rcs-dur-medium) ease, padding var(--rcs-dur-medium) ease, border-bottom-width var(--rcs-dur-medium) ease; } .rcs-mobile-nav.is-open { max-height: 80vh; opacity: 1; padding: 24px; overflow-y: auto; border-bottom-width: 1px; } .rcs-mobile-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .rcs-mobile-nav__list a { display: block; padding: 12px 16px; border-radius: 10px; color: var(--rcs-ink-primary); text-decoration: none; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 16px; transition: background var(--rcs-dur-quick) ease; } .rcs-mobile-nav__list a:hover { background: var(--rcs-glow-blue-faint); } @media (min-width: 1024px) { .rcs-mobile-nav { display: none !important; } } body.rcs-no-scroll { overflow: hidden; } /* Header is sticky via Elementor; in-flow on initial load — no body padding needed. */ /* ---------------------------------------------------------- 19. Footer layout --------------------------------------------------------- */ .rcs-footer { background: var(--rcs-page-base); border-top: 1px solid var(--rcs-border-blue-faint); padding: 48px 0 24px; } .rcs-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 768px) { .rcs-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .rcs-footer__col-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-cyan-edge); margin: 0 0 16px; } .rcs-footer__brand img { height: 32px; width: auto; display: block; margin-bottom: 16px; } .rcs-footer__brand-meta { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.6; color: var(--rcs-ink-muted); } .rcs-footer__brand-meta .usdot { display: inline-block; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--rcs-ink-faint); letter-spacing: 0.18em; text-transform: uppercase; } .rcs-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .rcs-footer__list a { color: var(--rcs-ink-muted); font-size: 14px; text-decoration: none; transition: color var(--rcs-dur-base) ease, text-shadow var(--rcs-dur-base) ease; } .rcs-footer__list a:hover, .rcs-footer__list a:focus-visible { color: var(--rcs-cyan-edge); text-shadow: 0 0 12px rgba(107,166,255,0.45); outline: none; } .rcs-footer__bottom { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rcs-border-blue-faint); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--rcs-ink-faint); } .rcs-footer__bottom a { color: var(--rcs-ink-muted); text-decoration: none; transition: color var(--rcs-dur-base) ease, text-shadow var(--rcs-dur-base) ease; } .rcs-footer__bottom a:hover, .rcs-footer__bottom a:focus-visible { color: var(--rcs-cyan-edge); text-shadow: 0 0 10px rgba(107,166,255,0.4); outline: none; } /* ---------------------------------------------------------- 20. Page sections / cards / hero --------------------------------------------------------- */ .rcs-hero { position: relative; isolation: isolate; /* Claim the full section visual: overlap parent rcs-section-lg padding so blooms + grid-bg + dark base cover the whole hero. */ margin-top: -56px; margin-bottom: -56px; padding-top: 56px; padding-bottom: 64px; /* No overflow:hidden — primary-button glows and CTAs need to spill; html/body have overflow-x:clip so blooms can never cause horizontal scroll. */ } @media (min-width: 768px) { .rcs-hero { margin-top: -96px; margin-bottom: -96px; padding-top: 96px; padding-bottom: 96px; } } .rcs-hero::before, .rcs-hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); z-index: -1; } .rcs-hero::before { width: 60vw; max-width: 600px; aspect-ratio: 1; top: -160px; left: -160px; background: radial-gradient(circle, var(--rcs-glow-deep-strong), transparent 70%); } .rcs-hero::after { width: 70vw; max-width: 700px; aspect-ratio: 1; top: -120px; right: -160px; background: radial-gradient(circle, var(--rcs-glow-blue-soft), transparent 70%); } .rcs-hero__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 768px) { .rcs-hero__grid { grid-template-columns: 1.2fr 1fr; gap: 40px; } } @media (min-width: 1024px) { .rcs-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } } .rcs-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .rcs-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 640px) { .rcs-grid--2-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .rcs-grid--3-cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .rcs-grid--4-cols { grid-template-columns: repeat(4, 1fr); } } .rcs-card { padding: 24px; } .rcs-card__icon { margin-bottom: 16px; } .rcs-card__title { margin: 0 0 8px; } .rcs-card__body { margin: 0; color: var(--rcs-ink-muted); font-size: 14px; line-height: 1.6; } /* Spotlight card with copy */ .rcs-spotlight-card { padding: 32px; } .rcs-spotlight-card__eyebrow { margin-bottom: 16px; } .rcs-spotlight-card__icon { margin-bottom: 20px; } .rcs-spotlight-card__title { margin: 0 0 12px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; } .rcs-spotlight-card__body { margin: 0 0 16px; color: var(--rcs-ink-subtle); font-size: 15px; line-height: 1.65; } .rcs-spotlight-card__bullets { margin: 16px 0 24px; } .rcs-spotlight-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } /* CTA banner */ .rcs-cta-banner { max-width: 1080px; margin: 0 auto; text-align: center; padding: 56px 40px; position: relative; } @media (max-width: 768px) { .rcs-cta-banner { padding: 40px 24px; } } .rcs-cta-banner__inner { position: relative; z-index: 1; } .rcs-cta-banner__inner h2 { margin: 12px 0 16px; } .rcs-cta-banner__inner p { margin: 0 auto 24px; max-width: 640px; } .rcs-cta-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Soft bloom backdrop behind CTA so the hero-like glow lives outside the spotlight wrapper (keeps the .rcs-spotlight glass clean). */ .rcs-cta-banner::before { content: ""; position: absolute; inset: -40px; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 50% 0%, rgba(43,127,255,0.25), transparent 65%); filter: blur(40px); } /* Stat strip — auto-distributes N cells centered on a row. The old `repeat(4, 1fr)` grid left an awkward empty cell when the post-X-3 trust strip dropped from 4 stats to 3. Flex + justify-content centers the group, gap controls breathing room, and each cell sizes to its own content so column widths don't fight. */ .rcs-stat-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 24px 48px; } @media (min-width: 768px) { .rcs-stat-strip { gap: 24px 72px; } } .rcs-stat-strip__cell { text-align: center; min-width: 0; } .rcs-stat-strip__cell .rcs-stat-num { display: block; background-image: var(--rcs-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 6px; padding-bottom: 0.06em; } .rcs-stat-strip__cell .rcs-mono-label { display: block; } /* Affiliations row */ .rcs-affiliations { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* Memberships row on the homepage (Round 3 L-R5, 2026-05-19). Owns its own * section that sits AFTER home/trust ("By the numbers") per Joe direction * 2026-05-19. Sits centered with the membership eyebrow + 5 pill badges. * Logos replace these text pills once PH-I asset files arrive. */ .rcs-global-affil { margin-top: 32px; text-align: center; } .rcs-global-affil__eyebrow { display: block; margin-bottom: 12px; } .rcs-global-affil__row { justify-content: center; margin-top: 0; } /* Process pipeline */ .rcs-process { position: relative; padding-top: 8px; } .rcs-process .rcs-process-line { display: none; } @media (min-width: 1024px) { .rcs-process .rcs-process-line { display: block; } } .rcs-process__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: 1fr; } /* Skip 2-col band — 5-step pipeline orphans the last item; stack until lg, then go horizontal with the connector line. */ @media (min-width: 1024px) { .rcs-process__list { grid-template-columns: repeat(5, 1fr); gap: 16px; } } .rcs-process__step { position: relative; text-align: center; padding: 0 8px; display: flex; flex-direction: column; align-items: center; } .rcs-process__step .rcs-icon-badge { margin-bottom: 12px; z-index: 2; background: var(--rcs-page-base); padding: 4px; } .rcs-process__num { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--rcs-live-cyan); margin-bottom: 4px; } .rcs-process__step .rcs-h3 { margin: 0 0 6px; } .rcs-process__step .rcs-mono-caption { color: var(--rcs-ink-muted); } /* Quote band */ .rcs-quote-band { position: relative; background: linear-gradient(180deg, #0A0E18 0%, #05070D 100%); border-top: 1px solid var(--rcs-border-blue-faint); border-bottom: 1px solid var(--rcs-border-blue-faint); padding: 80px 0; overflow: hidden; } .rcs-quote-band::before { content: "“"; position: absolute; top: -40px; left: -10px; font-family: 'Archivo', serif; font-weight: 900; font-size: clamp(280px, 40vw, 520px); line-height: 1; color: var(--rcs-blue-glow); opacity: 0.12; pointer-events: none; text-shadow: 0 0 60px rgba(43,127,255,0.25); } .rcs-quote-band__rule { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--rcs-grad-vertical-rule); } .rcs-quote-band__inner { max-width: 840px; margin: 0 auto; text-align: center; position: relative; } .rcs-quote-band__quote { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.35; letter-spacing: -0.01em; color: var(--rcs-ink-primary); margin: 24px 0; } .rcs-quote-band__attrib { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; } .rcs-quote-band__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--rcs-ink-primary); } .rcs-quote-band__role { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rcs-ink-muted); } /* Dashboard preview */ .rcs-dashboard { position: relative; padding: 24px; border-radius: 18px; background: var(--rcs-grad-glass); border: 1px solid var(--rcs-border-blue); box-shadow: var(--rcs-shadow-card-deep); } .rcs-dashboard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .rcs-dashboard__lot { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--rcs-ink-muted); } .rcs-dashboard__tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; } .rcs-dashboard__sparkline { width: 100%; height: 80px; background: var(--rcs-glass-button-bg); border-radius: 8px; border: 1px solid var(--rcs-border-blue-faint); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .rcs-dashboard__sparkline svg { width: 100%; height: 100%; } .rcs-dashboard__caption { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .rcs-dashboard__caption .label { color: var(--rcs-ink-muted); } .rcs-dashboard__caption .delta { color: var(--rcs-live-cyan); } /* PGM ticker (inline) */ .rcs-ticker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 8px 14px; border-radius: 9999px; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue-faint); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--rcs-ink-muted); max-width: 100%; } @media (max-width: 480px) { /* Below 360-480, the row would still wrap awkwardly — let it scroll horizontally so the pill chrome stays one line and overflow stays inside the hero. */ .rcs-ticker { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 12px; padding: 8px 12px; } .rcs-ticker::-webkit-scrollbar { display: none; } .rcs-ticker__row { flex-shrink: 0; } } .rcs-ticker__live { display: inline-flex; align-items: center; gap: 6px; color: var(--rcs-live-cyan); letter-spacing: 0.18em; text-transform: uppercase; } .rcs-ticker__live::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--rcs-live-cyan); box-shadow: 0 0 8px var(--rcs-live-cyan); animation: rcs-pulse-dot 1.6s ease-in-out infinite; } .rcs-ticker__row { display: inline-flex; gap: 8px; align-items: center; } .rcs-ticker__row .sym { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 6px; border-radius: 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; color: var(--rcs-ink-primary); background: rgba(43,127,255,0.08); border: 1px solid rgba(43,127,255,0.3); } /* Per-metal accent swatches — Pt cool blue, Pd cyan-green, Rh amber. */ .rcs-ticker__row .sym[data-metal="Pt"], .rcs-ticker__row .sym:where([data-metal="Pt"]) { color: #A8E6FF; background: rgba(168,230,255,0.10); border-color: rgba(168,230,255,0.45); box-shadow: 0 0 8px rgba(168,230,255,0.25); } .rcs-ticker__row .sym[data-metal="Pd"] { color: #6BE8FF; background: rgba(107,232,255,0.10); border-color: rgba(107,232,255,0.45); box-shadow: 0 0 8px rgba(107,232,255,0.25); } .rcs-ticker__row .sym[data-metal="Rh"] { color: #FFD66B; background: rgba(255,214,107,0.10); border-color: rgba(255,214,107,0.45); box-shadow: 0 0 8px rgba(255,214,107,0.25); } .rcs-ticker__row .delta-up { color: var(--rcs-live-cyan); } .rcs-ticker__row .delta-down { color: var(--rcs-negative); } /* Service offering bullets — already styled .rcs-check-list */ /* Article card */ .rcs-article-card { display: flex; flex-direction: column; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); border-radius: 16px; overflow: hidden; transition: transform var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease; text-decoration: none; color: inherit; } .rcs-article-card:hover { transform: translateY(-2px); border-color: var(--rcs-border-blue); box-shadow: var(--rcs-shadow-card-glow); } .rcs-article-card__cover { aspect-ratio: 16 / 10; background: var(--rcs-section-band); background-size: cover; background-position: center; } .rcs-article-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .rcs-article-card__cat { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-cyan-edge); } .rcs-article-card__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--rcs-ink-primary); margin: 0; } .rcs-article-card__excerpt { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: var(--rcs-ink-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rcs-article-card__meta { display: flex; gap: 12px; align-items: center; margin-top: auto; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--rcs-ink-muted); } .rcs-article-card__meta .rcs-arrow { color: var(--rcs-cyan-edge); margin-left: auto; font-weight: 600; } /* Location card */ .rcs-location-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); border-radius: 16px; text-decoration: none; color: inherit; transition: transform var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease; } .rcs-location-card:hover { transform: translateY(-2px); border-color: var(--rcs-border-blue); box-shadow: var(--rcs-shadow-card-glow); } .rcs-location-card--hq { border-color: var(--rcs-live-cyan); background: linear-gradient(180deg, rgba(0,212,255,0.08), rgba(10,14,24,0.85)); box-shadow: 0 0 32px rgba(0,212,255,0.18), inset 0 0 24px rgba(0,212,255,0.06); } .rcs-location-card--hq:hover { border-color: var(--rcs-live-cyan); box-shadow: 0 0 48px rgba(0,212,255,0.32), inset 0 0 24px rgba(0,212,255,0.10); } .rcs-location-card--hq .rcs-location-card__city { color: var(--rcs-live-cyan); } .rcs-location-card--hq .rcs-location-card__cta { color: var(--rcs-live-cyan); } .rcs-location-card__city { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; color: var(--rcs-ink-primary); margin: 0; } .rcs-location-card__region { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--rcs-ink-subtle); margin: 0; } .rcs-location-card__since { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-ink-muted); } .rcs-location-card__cta { color: var(--rcs-cyan-edge); font-weight: 600; margin-top: auto; } /* Direct lines */ .rcs-direct-lines { display: flex; flex-direction: column; gap: 16px; } .rcs-direct-line { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); border-radius: 12px; } .rcs-direct-line .rcs-icon-badge { width: 40px; height: 40px; } .rcs-direct-line .rcs-icon-badge svg { width: 18px; height: 18px; } .rcs-direct-line__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--rcs-ink-primary); margin: 0 0 4px; } .rcs-direct-line__sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--rcs-ink-muted); margin: 0; } /* Article share row — Share label + 3 round share buttons. */ .rcs-share-row { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--rcs-ink-muted); letter-spacing: 0.18em; text-transform: uppercase; } .rcs-share-row__label { display: inline-flex; align-items: center; gap: 6px; color: var(--rcs-ink-muted); } .rcs-share-row__label svg { width: 12px; height: 12px; color: var(--rcs-cyan-edge); } .rcs-share-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(14,20,34,0.7); border: 1px solid rgba(43,127,255,0.3); color: var(--rcs-cyan-edge); cursor: pointer; text-decoration: none; padding: 0; /* Expand the tap target to ~44×44 without resizing the visual chrome. */ position: relative; transition: color var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, transform var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease; } .rcs-share-btn::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; } .rcs-share-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rcs-share-btn:hover, .rcs-share-btn:focus-visible { color: #fff; border-color: var(--rcs-cyan-edge); box-shadow: 0 0 12px rgba(0,212,255,0.35); transform: translateY(-1px); outline: none; } .rcs-share-btn.is-copied { color: var(--rcs-live-cyan); border-color: var(--rcs-live-cyan); box-shadow: 0 0 14px rgba(0,212,255,0.45); } .rcs-share-toast { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); pointer-events: none; opacity: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rcs-live-cyan); background: rgba(5,7,13,0.92); border: 1px solid rgba(0,212,255,0.45); border-radius: 6px; padding: 4px 8px; white-space: nowrap; transition: opacity var(--rcs-dur-base) ease, transform var(--rcs-dur-base) ease; } .rcs-share-btn { position: relative; } .rcs-share-btn.is-copied .rcs-share-toast { opacity: 1; transform: translateX(-50%) translateY(0); } /* HQ hero quick-fact tile — compact icon + label, used in 3-up rows. */ .rcs-hero-tile-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; max-width: 760px; } @media (min-width: 640px) { .rcs-hero-tile-row { grid-template-columns: repeat(3, 1fr); } } .rcs-hero-tile { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(14,20,34,0.7); border: 1px solid rgba(43,127,255,0.3); border-radius: 12px; } .rcs-hero-tile svg { width: 16px; height: 16px; color: var(--rcs-live-cyan); flex-shrink: 0; } .rcs-hero-tile span { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--rcs-ink-primary); line-height: 1.35; } /* Capabilities card — gradient icon-badge + label. */ .rcs-cap-card { padding: 24px; background: rgba(14,20,34,0.7); border: 1px solid rgba(43,127,255,0.3); border-radius: 14px; } .rcs-cap-card__label { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: #fff; margin-top: 14px; line-height: 1.15; letter-spacing: -0.01em; } /* Story image (about) */ .rcs-story-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 1024px) { .rcs-story-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } .rcs-story-image { aspect-ratio: 4 / 3; border-radius: 16px; background-size: cover; background-position: center; border: 1px solid var(--rcs-border-blue); } /* Team card */ .rcs-team-card { padding: 24px; } .rcs-team-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .rcs-team-card__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: var(--rcs-ink-primary); margin: 0; } .rcs-team-card__role { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rcs-cyan-edge); } .rcs-team-card__bio { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--rcs-ink-subtle); line-height: 1.6; margin: 0; } /* World map (custom SVG, projected client-side) */ .rcs-worldmap-frame { position: relative; border-radius: 16px; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); padding: 16px; overflow: hidden; } .rcs-worldmap { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 24px rgba(43,127,255,0.18)); } .rcs-worldmap-markers { position: absolute; inset: 16px; /* matches frame padding */ pointer-events: none; } .rcs-worldmap-markers > * { pointer-events: auto; } /* World map loading state — visible until d3-geo + topojson finish. `.is-loading` is dropped by rcs-worldmap.js after the SVG renders. */ .rcs-worldmap-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(5,7,13,0.55); pointer-events: none; opacity: 0; transition: opacity var(--rcs-dur-medium) ease; } .rcs-worldmap-frame.is-loading .rcs-worldmap-loading { opacity: 1; } .rcs-worldmap-loading__pulse { width: 14px; height: 14px; border-radius: 9999px; background: var(--rcs-live-cyan); box-shadow: 0 0 24px rgba(0,212,255,0.85); animation: rcs-pulse 1.6s ease-in-out infinite; } .rcs-worldmap-loading__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rcs-cyan-edge); } @keyframes rcs-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } } .rcs-map-marker { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); text-decoration: none; } @media (max-width: 640px) { /* Markers shrink + dot tightens so clusters (E coast, India) don't merge. */ .rcs-map-marker { width: 10px; height: 10px; } .rcs-map-marker__dot { inset: 3px; } } .rcs-map-marker__dot { position: absolute; inset: 4px; background: var(--rcs-blue-glow); border-radius: 50%; box-shadow: 0 0 8px var(--rcs-blue-glow), 0 0 16px rgba(43,127,255,0.45); } .rcs-map-marker--hq .rcs-map-marker__dot { background: var(--rcs-live-cyan); box-shadow: 0 0 10px var(--rcs-live-cyan), 0 0 24px rgba(0,212,255,0.5); } .rcs-map-marker__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--rcs-blue-glow); opacity: 0.7; animation: rcs-map-ping-css 2.4s ease-out infinite; } .rcs-map-marker--hq .rcs-map-marker__ring { border-color: var(--rcs-live-cyan); } .rcs-map-marker__label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); padding: 4px 8px; background: var(--rcs-page-base); border: 1px solid var(--rcs-border-blue); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; color: var(--rcs-ink-primary); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 5; } .rcs-map-marker:hover .rcs-map-marker__label, .rcs-map-marker:focus-visible .rcs-map-marker__label, .rcs-map-marker:focus-within .rcs-map-marker__label { opacity: 1; } @keyframes rcs-map-ping-css { 0% { transform: scale(1); opacity: 0.7; } 80% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rcs-map-marker__ring { animation: none; opacity: 0; } } /* Section heading block (eyebrow + h2 + body) */ .rcs-section-head { max-width: 720px; } .rcs-section-head--center { text-align: center; margin-left: auto; margin-right: auto; } /* Eyebrow → H2 → lead rhythm: 12 / 16. Tightens older 8/12 spacing to match prototype: mt-3 (12px) → H2 → mb-4 (16px) → lead. */ .rcs-section-head .rcs-eyebrow + h2, .rcs-section-head .rcs-eyebrow + .rcs-h2 { margin-top: 12px; } .rcs-section-head h2 + p, .rcs-section-head .rcs-h2 + p, .rcs-section-head h2 + .rcs-lead, .rcs-section-head .rcs-h2 + .rcs-lead { margin-top: 16px; } .rcs-section-head h2 { margin: 12px 0 16px; } .rcs-section-head p { margin: 0; } /* Anatomy diagram (About Catalyst § 10.2) */ .rcs-anatomy { position: relative; background: linear-gradient(180deg, #050A18 0%, #020610 100%); border: 1px solid rgba(43,127,255,0.4); border-radius: 16px; padding: 16px; overflow: hidden; box-shadow: 0 0 80px rgba(9,90,206,0.35), inset 0 0 60px rgba(9,90,206,0.18); } .rcs-anatomy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(43,127,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(43,127,255,0.07) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .rcs-anatomy::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 42% 78%, rgba(0,212,255,0.20), transparent 35%); } .rcs-anatomy__canvas { position: relative; /* Match the prototype's canvas aspect (565.338 / 228.962) so the percentage-based chip targets land on the SUV at the same ratio. */ aspect-ratio: 565.338 / 228.962; } .rcs-anatomy__suv { position: absolute; left: 50%; top: 50%; width: 85%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 16px rgba(43,127,255,0.45)); opacity: 0.85; } .rcs-anatomy__leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Exhaust overlay — cyan-glowing tubing traced over the SUV. Sits between the SUV image and the leader-line layer. EXH_LAYER values from prototype: centered horizontally, 64.5% vertically, 69% canvas width, flipped X. */ .rcs-anatomy__exhaust { position: absolute; left: 50%; top: 64.5%; width: 69%; aspect-ratio: 458 / 75; transform: translate(-50%, -50%) scaleX(-1); pointer-events: none; filter: drop-shadow(0 0 6px rgba(43,127,255,0.85)) drop-shadow(0 0 16px rgba(0,212,255,0.55)) drop-shadow(0 0 28px rgba(9,90,206,0.5)); } .rcs-anatomy__exhaust svg { display: block; width: 100%; height: 100%; } .rcs-anatomy__chip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; background: rgba(10,14,24,0.85); border: 1px solid rgba(43,127,255,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 18px rgba(9,90,206,0.35); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; color: #6BA6FF; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease, background-color var(--rcs-dur-base) ease, transform var(--rcs-dur-base) ease; } .rcs-anatomy__chip:hover, .rcs-anatomy__chip:focus-visible, .rcs-anatomy__chip.is-active { color: var(--rcs-live-cyan); border-color: rgba(0,212,255,0.85); box-shadow: 0 0 28px rgba(0,212,255,0.55); background: rgba(0,212,255,0.16); outline: none; transform: translate(-50%, -50%) scale(1.04); } .rcs-anatomy__chip--active { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.7); box-shadow: 0 0 24px rgba(0,212,255,0.45); color: var(--rcs-live-cyan); } /* Leader-line highlighting — when a chip is hovered/active, brighten its leader. */ .rcs-anatomy__leader { transition: opacity var(--rcs-dur-base) ease; } .rcs-anatomy[data-anatomy-active] .rcs-anatomy__leader { opacity: 0.35; } .rcs-anatomy[data-anatomy-active] .rcs-anatomy__leader.is-active { opacity: 1; } .rcs-anatomy__leader.is-active line { stroke: #A8E6FF !important; stroke-width: 0.3; } .rcs-anatomy__leader.is-active circle:first-of-type { fill: var(--rcs-live-cyan); } .rcs-anatomy__leader.is-active circle:last-of-type { stroke: var(--rcs-live-cyan); stroke-width: 0.3; } /* Matching summary card lift when its chip is active. */ .rcs-anatomy__summary { transition: transform var(--rcs-dur-base) ease, border-color var(--rcs-dur-base) ease, box-shadow var(--rcs-dur-base) ease; } .rcs-anatomy__summary.is-active { border-color: var(--rcs-live-cyan); box-shadow: 0 0 28px rgba(0,212,255,0.35); transform: translateY(-2px); } .rcs-anatomy__callout { position: absolute; top: 6%; right: 3%; width: 280px; max-width: 40%; padding: 14px; border-radius: 12px; background: rgba(10,14,24,0.92); border: 1px solid rgba(0,212,255,0.55); box-shadow: 0 0 40px rgba(0,212,255,0.35), 0 12px 32px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: none; /* hidden on small viewports */ } /* Callout overlaps SUV + chips at 768-1023 — defer to lg+. */ @media (min-width: 1024px) { .rcs-anatomy__callout { display: block; } } .rcs-anatomy__callout-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .rcs-anatomy__callout-head .rcs-icon-badge { width: 36px; height: 36px; } .rcs-anatomy__callout-head .rcs-icon-badge svg { width: 18px; height: 18px; } .rcs-anatomy__callout-body { margin: 0; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.55; color: var(--rcs-ink-primary); } /* Anatomy bottom strip — 5 mini cards */ .rcs-anatomy__summary { padding: 18px; } .rcs-anatomy__summary-head { display: flex; align-items: center; gap: 10px; } .rcs-anatomy__summary-head .rcs-icon-badge { width: 36px; height: 36px; } .rcs-anatomy__summary-head .rcs-icon-badge svg { width: 16px; height: 16px; } @media (min-width: 768px) { .rcs-grid--5-cols { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 768px) { .rcs-anatomy__chip { font-size: 8px; padding: 3px 6px; gap: 4px; letter-spacing: 0.12em; } .rcs-anatomy__chip svg { width: 9px; height: 9px; } .rcs-anatomy__suv { opacity: 0.75; } } /* Below 480 the canvas is too short for legible chips; hide chip + leader-line layer and let the bottom 5-card summary strip carry the labels. */ @media (max-width: 480px) { .rcs-anatomy__chip, .rcs-anatomy__leaders { display: none; } .rcs-anatomy__suv { opacity: 0.95; } } /* Filter bar (Articles) */ .rcs-filter-bar { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); border-radius: 14px; margin-bottom: 32px; } @media (min-width: 768px) { .rcs-filter-bar { flex-direction: row; align-items: center; gap: 20px; } } .rcs-filter-bar__search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue-faint); border-radius: 10px; color: var(--rcs-ink-muted); } .rcs-filter-bar__search svg { width: 18px; height: 18px; } .rcs-filter-bar__search input { background: transparent; border: 0; outline: 0; color: var(--rcs-ink-primary); font: inherit; flex: 1; } .rcs-filter-bar__cats { display: flex; flex-wrap: wrap; gap: 8px; } .rcs-filter-bar__cat { padding: 10px 14px; min-height: 36px; border-radius: 9999px; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue-faint); color: var(--rcs-ink-muted); font-family: 'Inter', sans-serif; font-size: 13px; cursor: pointer; } .rcs-filter-bar__cat--active { background: var(--rcs-glow-blue-soft); border-color: var(--rcs-border-blue); color: var(--rcs-ink-primary); } /* Form (used by Pro Form widget overrides + native form variants) */ .rcs-form { display: grid; gap: 16px; } .rcs-form-row { display: flex; flex-direction: column; gap: 6px; } .rcs-form-row label, .rcs-form .rcs-mono-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-cyan-edge); } .rcs-form input[type=text], .rcs-form input[type=email], .rcs-form input[type=tel], .rcs-form select, .rcs-form textarea { background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue); border-radius: 10px; padding: 12px 14px; color: var(--rcs-ink-primary); font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: border-color var(--rcs-dur-quick) ease, box-shadow var(--rcs-dur-quick) ease; } .rcs-form input:focus, .rcs-form select:focus, .rcs-form textarea:focus { border-color: var(--rcs-blue-glow); box-shadow: 0 0 0 2px var(--rcs-glow-blue-medium); } /* Native select needs explicit dark styling so the OS chrome doesn't bleed white-on-white. Strip the system arrow and draw a cyan caret. */ .rcs-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; background-color: rgba(5,7,13,0.7); cursor: pointer; } .rcs-form select option { background: #0A0E18; color: var(--rcs-ink-primary); } .rcs-form select:invalid { color: var(--rcs-ink-muted); } /* Disclaimer line under the homepage live-pricing ticker (Round 3 H-R4 / D1, * 2026-05-19). Sits between the "As of" timestamp row and the chart anchor. * Wording confirmation pending D13. */ .rcs-pricing-disclaimer { margin: 6px 0 0; font-size: clamp(11px, 1.05vw, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rcs-ink-faint, #5D6A82); text-align: center; font-style: italic; } /* SLA line on the Contact form (Round 3 C-R3, 2026-05-19). Sits between the * honeypot row and the submit button. Mono caption styling so it reads as a * commitment, not body copy. */ .rcs-form-sla { margin: 4px 0 0; padding: 10px 14px; font-family: var(--rcs-font-mono, ui-monospace, SFMono-Regular, "JetBrains Mono", "Menlo", monospace); font-size: clamp(12px, 1.2vw, 13px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcs-live-cyan, #00D4FF); background: rgba(0, 212, 255, 0.06); border-left: 2px solid var(--rcs-live-cyan, #00D4FF); border-radius: 4px; } /* Features stack (Platform 3.2) */ .rcs-features-stack { display: flex; flex-direction: column; gap: 16px; } .rcs-feature-row { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 24px; background: var(--rcs-grad-glass-soft); border: 1px solid var(--rcs-border-blue-faint); border-radius: 14px; } @media (min-width: 768px) { .rcs-feature-row { grid-template-columns: 1.2fr 1.5fr 1.5fr; gap: 24px; align-items: flex-start; } } /* Locations directory grid */ .rcs-locations-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .rcs-locations-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .rcs-locations-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .rcs-locations-grid { grid-template-columns: repeat(4, 1fr); } } /* Articles list grid */ .rcs-articles-grid { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 640px) { .rcs-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (min-width: 1024px) { .rcs-articles-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .rcs-featured-article { display: grid; gap: 24px; grid-template-columns: 1fr; background: var(--rcs-grad-glass); border: 1px solid var(--rcs-border-blue); border-radius: 18px; overflow: hidden; } @media (min-width: 1024px) { .rcs-featured-article { grid-template-columns: 1.4fr 1fr; } } .rcs-featured-article__cover { aspect-ratio: 16 / 10; background-size: cover; background-position: center; } /* In the 1-col band the 16/10 cover renders too tall on tablet — cap height so the body stays above the fold. */ @media (max-width: 1023px) { .rcs-featured-article__cover { aspect-ratio: 21 / 9; max-height: 320px; } } .rcs-featured-article__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .rcs-featured-article__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; } /* Newsletter band */ .rcs-newsletter { background: var(--rcs-grad-glass); border: 1px solid var(--rcs-border-blue); border-radius: 18px; padding: 40px 32px; text-align: center; } .rcs-newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; } .rcs-newsletter__form input { background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue); border-radius: 9999px; padding: 12px 18px; color: var(--rcs-ink-primary); font: inherit; min-width: 280px; } /* Footer newsletter mini-form */ .rcs-footer__newsletter { margin-top: 18px; max-width: 360px; } .rcs-footer__newsletter-label { display: block; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rcs-cyan-edge); margin-bottom: 10px; } .rcs-footer__newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .rcs-footer__newsletter-form input[type="email"] { flex: 1 1 200px; min-width: 0; background: var(--rcs-glass-button-bg); border: 1px solid var(--rcs-border-blue); border-radius: 8px; padding: 10px 14px; color: var(--rcs-ink-primary); font: inherit; font-size: 14px; } .rcs-footer__newsletter-form input[type="email"]:focus { outline: none; border-color: var(--rcs-blue-glow); box-shadow: 0 0 0 2px rgba(43, 127, 255, 0.25); } .rcs-footer__newsletter-submit { background: linear-gradient(135deg, #095ACE, #2B7FFF); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 4px 12px rgba(43, 127, 255, 0.30); transition: filter 0.18s ease, box-shadow 0.18s ease; white-space: nowrap; } .rcs-footer__newsletter-submit:hover, .rcs-footer__newsletter-submit:focus-visible { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(43, 127, 255, 0.45); outline: none; } /* Article body styling for prose */ .rcs-article-prose { max-width: 740px; margin: 0 auto; padding: 0 16px; color: var(--rcs-ink-primary); font-size: 17px; line-height: 1.7; } .rcs-article-prose h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.2; margin: 48px 0 16px; letter-spacing: -0.01em; } .rcs-article-prose h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; margin: 36px 0 12px; } .rcs-article-prose p { margin: 0 0 18px; } .rcs-article-prose blockquote { border-left: 3px solid var(--rcs-blue-glow); margin: 24px 0; padding: 0 0 0 18px; font-style: italic; color: var(--rcs-ink-primary); } .rcs-article-prose ul li { margin-bottom: 8px; } /* Tag pill */ .rcs-tag-pill { display: inline-block; padding: 4px 10px; border-radius: 9999px; background: rgba(43,127,255,0.10); color: var(--rcs-cyan-edge); font-family: 'Inter', sans-serif; font-size: 12px; margin-right: 6px; } /* ---------------------------------------------------------- 21. Mobile responsiveness — tighter gutters / padding under 640px --------------------------------------------------------- */ @media (max-width: 640px) { .rcs-spotlight-card, .rcs-team-card { padding: 22px; } .rcs-cta-banner { padding: 36px 22px; } .rcs-card { padding: 20px; } .rcs-feature-row { padding: 22px; } .rcs-section-lg { padding-top: 48px; padding-bottom: 48px; } .rcs-section-md { padding-top: 36px; padding-bottom: 36px; } .rcs-section-sm { padding-top: 28px; padding-bottom: 28px; } .rcs-hero { margin-top: -48px; margin-bottom: -48px; padding-top: 48px; padding-bottom: 56px; } .rcs-stat-strip { gap: 16px; } .rcs-process__list { gap: 16px; } .rcs-anatomy { padding: 16px; } .rcs-newsletter { padding: 28px 18px; } .rcs-newsletter__form input { min-width: 0; flex: 1 1 100%; } .rcs-featured-article__body { padding: 22px; } .rcs-quote-band { padding: 56px 0; } /* Dashboard tiles squish on tiny screens — let them wrap */ .rcs-dashboard { padding: 18px; } .rcs-dashboard__tiles { gap: 8px; } .rcs-stat-tile { padding: 12px; } .rcs-stat-tile__value { font-size: 18px; } .rcs-stat-tile__label { font-size: 10px; letter-spacing: 0.12em; } /* Hero subhead body slightly smaller */ .rcs-lead { font-size: 15px; } /* Direct-line address wraps without overflow */ .rcs-direct-line { padding: 14px; gap: 12px; } .rcs-direct-line .rcs-icon-badge { width: 36px; height: 36px; } /* Buttons full-width on very small viewports */ .rcs-button-row { gap: 10px; } .rcs-button-row .rcs-primary-btn, .rcs-button-row .rcs-glass-btn { flex: 1 1 100%; max-width: 100%; } /* Hero grid: ensure right column doesn't push horizontal scroll */ .rcs-hero__grid { gap: 28px; } .rcs-features-stack { gap: 12px; } /* PGM cards: prevent overflow */ .rcs-spotlight-card__title { font-size: 24px; } } @media (max-width: 480px) { .rcs-locations-grid { grid-template-columns: 1fr; } /* Tight container gutter for smallest viewports */ .rcs-container { padding-left: 16px; padding-right: 16px; } } /* Stat-strip cells stack centered on mobile — was a stale left-align override that contradicted the comment. Each cell carries its own .rcs-stat-strip__cell text-align: center via the main rule; this block reinforces the spacing only. */ @media (max-width: 640px) { .rcs-stat-strip { gap: 18px 28px; } } /* Hero callout on platform should not overflow */ .rcs-hero__grid > * { min-width: 0; } /* Contact page: form (left) + direct lines (right). Top-align so the right column doesn't float in vertical center while the form is taller. */ .rcs-contact-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1024px) { .rcs-contact-grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } } .rcs-contact-grid > * { min-width: 0; } /* ---------------------------------------------------------- Phone mockup (Voice B) — used on Home Hero, Home Platform Teaser, Platform Hero --------------------------------------------------------- */ .rcs-phone { width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { /* Tablet band: hero now goes 2-col at md, give the phone a touch more presence. */ .rcs-phone { max-width: 300px; } } @media (min-width: 1024px) { .rcs-phone { max-width: 320px; } } @media (max-width: 480px) { /* Center on mobile and shrink slightly for sub-iPhone-SE viewports. */ .rcs-phone { max-width: 260px; } } .rcs-phone__frame { background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 0 60px rgba(43,127,255,0.35); } .rcs-phone__screen { background: #0A0E18; border-radius: 30px; height: 540px; overflow: hidden; } .rcs-phone__status { display: flex; justify-content: space-between; padding: 10px 20px 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--rcs-ink-muted); } .rcs-phone__head { padding: 0 16px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); } .rcs-phone__brand { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rcs-ink-muted); } .rcs-phone__title { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: #fff; } .rcs-phone__live { width: 6px; height: 6px; border-radius: 9999px; background: var(--rcs-live-cyan); box-shadow: 0 0 6px var(--rcs-live-cyan); animation: rcs-pulse-dot 1.6s ease-in-out infinite; } .rcs-phone__metals { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .rcs-phone__metal { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; background: rgba(9,90,206,0.12); border: 1px solid rgba(43,127,255,0.25); } .rcs-phone__metal-sym { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--rcs-ink-muted); } .rcs-phone__metal-price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: #fff; } .rcs-phone__delta { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 4px; } .rcs-phone__delta--up { color: var(--rcs-live-cyan); } .rcs-phone__delta--down { color: var(--rcs-negative); } .rcs-phone__lot { margin: 0 16px; padding: 12px; border-radius: 8px; background: rgba(9,90,206,0.12); border: 1px solid rgba(43,127,255,0.25); } .rcs-phone__lot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; color: #fff; } .rcs-phone__lot-state { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--rcs-live-cyan); font-weight: 400; } .rcs-phone__sparkline { width: 100%; height: 48px; display: block; } .rcs-phone__lot-foot { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'Inter', sans-serif; font-size: 10px; color: var(--rcs-ink-muted); } .rcs-phone__cta { margin: 12px 16px 16px; padding: 10px; text-align: center; border-radius: 8px; background: var(--rcs-blue); color: #fff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; } /* ---------------------------------------------------------- Laptop mockup (Voice B) — used on Platform Mobile+Desktop --------------------------------------------------------- */ .rcs-laptop { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; } .rcs-laptop__frame { background: #000; border-radius: 12px 12px 0 0; padding: 8px; box-shadow: 0 0 60px rgba(43,127,255,0.35); } .rcs-laptop__screen { background: var(--rcs-page-base); border-radius: 6px; aspect-ratio: 16 / 10; overflow: hidden; } .rcs-laptop__chrome { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(43,127,255,0.25); } .rcs-laptop__dots { display: flex; gap: 4px; } .rcs-laptop__dots span { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .rcs-laptop__url { flex: 1; margin: 0 12px; padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 4px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--rcs-ink-muted); } .rcs-laptop__body { display: grid; grid-template-columns: 110px 1fr; height: calc(100% - 33px); } .rcs-laptop__side { padding: 12px; background: rgba(0,0,0,0.3); border-right: 1px solid rgba(43,127,255,0.25); display: flex; flex-direction: column; gap: 6px; } .rcs-laptop__side > div { padding: 6px 8px; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--rcs-ink-muted); } .rcs-laptop__side > div.is-active { background: rgba(9,90,206,0.18); font-weight: 600; color: var(--rcs-blue); } .rcs-laptop__main { padding: 16px; } .rcs-laptop__main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rcs-laptop__main-head > span:first-child { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: #fff; } .rcs-laptop__live { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--rcs-live-cyan); } .rcs-laptop__rows { display: flex; flex-direction: column; gap: 6px; } .rcs-laptop__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px; background: rgba(14,20,34,0.7); border: 1px solid rgba(43,127,255,0.25); } .rcs-laptop__row-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #fff; width: 70px; } .rcs-laptop__row-state { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--rcs-ink-muted); width: 50px; } .rcs-laptop__row-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 9999px; overflow: hidden; } .rcs-laptop__row-bar > div { height: 100%; background: var(--rcs-blue); } .rcs-laptop__row-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--rcs-live-cyan); width: 30px; text-align: right; } .rcs-laptop__base { width: 110%; height: 8px; margin-left: -5%; background: #000; border-radius: 0 0 12px 12px; } /* Section non-hero blooms — atmospheric backdrop */ .rcs-bloom-soft { position: relative; isolation: isolate; } .rcs-bloom-soft::before { content: ""; position: absolute; pointer-events: none; z-index: -1; width: 720px; height: 720px; border-radius: 50%; filter: blur(100px); top: -200px; right: -240px; background: radial-gradient(circle, var(--rcs-glow-blue-soft), transparent 70%); } /* ---------------------------------------------------------- 26. Scroll reveal — IntersectionObserver-driven entry animations --------------------------------------------------------- */ /* Default state set by JS only (no .rcs-reveal class present without JS, so no-script visitors see content normally). Elements already in viewport at JS-init are left untouched — only off-screen elements get the class. */ /* Reveal animations are now driven by @keyframes (not CSS transitions). This is the critical fix that makes cards feel as smooth as text: cards already have a `transition: transform 0.36s` from their hover styles (translateY(-2px) lift on hover), and that 360ms transition was WINNING over a 1600ms reveal transition because of CSS specificity + source order. The card reveal was therefore running at the short hover-duration and reading as "choppy" relative to text reveals that have no competing transition. Keyframe animations are independent of `transition` — the hover transition can stay 360ms (so hovers stay responsive) while the reveal runs at the slow easeOutSine 1800ms timing. */ .rcs-reveal { opacity: 0; transform: translate3d(0, 12px, 0); will-change: opacity, transform; } .rcs-reveal.is-revealed { animation: rcs-reveal-in 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--rcs-reveal-delay, 0ms) both; } @keyframes rcs-reveal-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .rcs-reveal--scale { transform: translate3d(0, 8px, 0) scale(0.98); } .rcs-reveal--scale.is-revealed { animation: rcs-reveal-scale-in 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--rcs-reveal-delay, 0ms) both; } @keyframes rcs-reveal-scale-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .rcs-reveal--fade { transform: none; } .rcs-reveal--fade.is-revealed { animation: rcs-reveal-fade-in 1800ms linear var(--rcs-reveal-delay, 0ms) both; } @keyframes rcs-reveal-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Pronounced "grow" reveal — used on the bottom-of-page CTA so the close reads as punctuation, not one more card. Spring easing gives a soft overshoot at the end. */ .rcs-reveal--grow { transform: translate3d(0, 0, 0) scale(0.88); } .rcs-reveal--grow.is-revealed { animation: rcs-reveal-grow-in 1900ms var(--rcs-ease-spring) var(--rcs-reveal-delay, 0ms) both; } @keyframes rcs-reveal-grow-in { from { opacity: 0; transform: translate3d(0, 0, 0) scale(0.88); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .rcs-reveal, .rcs-reveal.is-revealed { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Mobile reveal — even smaller offset so the settle is barely perceptible during touch-scroll momentum, and a slightly longer duration so reveals don't pile up when cards cascade in sequence. */ @media (max-width: 768px) { .rcs-reveal { transform: translate3d(0, 8px, 0); } .rcs-reveal.is-revealed { animation-duration: 2000ms; } .rcs-reveal--scale { transform: translate3d(0, 6px, 0) scale(0.985); } .rcs-reveal--scale.is-revealed { animation: rcs-reveal-scale-in-mobile 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--rcs-reveal-delay, 0ms) both; } .rcs-reveal--grow.is-revealed { animation-duration: 2100ms; } } @keyframes rcs-reveal-scale-in-mobile { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } /* ---------------------------------------------------------- 17. Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .rcs-spotlight::after, .rcs-grid-reveal::before, .rcs-icon-badge::before, .rcs-icon-badge > .rcs-icon-badge__core, .rcs-primary-btn, .rcs-primary-btn__sheen, .rcs-glass-btn { transition: none !important; } .rcs-primary-btn:hover { transform: none; } .rcs-pill--live::before, .rcs-map-pulse { animation: none !important; } } /* ---------------------------------------------------------- 22. Touch-device hover gating --------------------------------------------------------- */ /* On coarse pointers (touch), :hover fires on tap and leaves the element in a sticky lifted/glow state. Strip the transforms — keep color/border so the tap still feels reactive. */ @media (hover: none) { .rcs-card-hover-target:hover, .rcs-article-card:hover, .rcs-location-card:hover, .rcs-share-btn:hover, .rcs-share-btn:focus-visible { transform: none; } .rcs-primary-btn:hover { transform: none; } } /* ---------------------------------------------------------- 23. PGM card grid (about-catalyst) — bridge 1→2→3 cleanly --------------------------------------------------------- */ .rcs-pgm-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { .rcs-pgm-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rcs-pgm-grid { grid-template-columns: repeat(3, 1fr); } } /* When the grid wraps to a 2/1 row, center the lone Rh card. */ @media (min-width: 640px) and (max-width: 1023px) { .rcs-pgm-grid > .rcs-pgm-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 520px; margin-left: auto; margin-right: auto; } } /* ---------------------------------------------------------- 24. Article hero meta row — author + share --------------------------------------------------------- */ .rcs-article-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(43,127,255,0.18); } .rcs-article-meta-row__author { display: flex; gap: 14px; align-items: center; } .rcs-article-meta-row__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: #fff; } @media (max-width: 480px) { .rcs-article-meta-row { gap: 18px; } .rcs-article-meta-row .rcs-share-row { width: 100%; justify-content: flex-start; } } /* ---------------------------------------------------------- 25. Print stylesheet — articles + legal pages --------------------------------------------------------- */ @media print { html, body { background: #fff !important; color: #000 !important; } body * { box-shadow: none !important; text-shadow: none !important; filter: none !important; } .rcs-header, .rcs-footer, .rcs-mobile-nav, .rcs-mobile-toggle, .rcs-share-row, .rcs-cta-banner, .rcs-newsletter, .rcs-back-link, .rcs-quote-band__rule { display: none !important; } .rcs-hero::before, .rcs-hero::after, .rcs-bloom-soft::before, .rcs-grid-bg, .rcs-quote-band::before, .rcs-spotlight::before, .rcs-spotlight::after, .rcs-grid-reveal::before { background: none !important; display: none !important; } .rcs-hero, .rcs-section-lg, .rcs-section-md, .rcs-section-sm, .rcs-section-xl { margin: 0 !important; padding: 16px 0 !important; background: #fff !important; border: 0 !important; } .rcs-h1, .rcs-h2, .rcs-h3, .rcs-eyebrow, .rcs-lead, .rcs-body, .rcs-article-prose, .rcs-article-prose * { color: #000 !important; } .rcs-gradient-text { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; } .rcs-article-prose { max-width: 100% !important; padding: 0 !important; } .rcs-article-prose blockquote { border-left: 3px solid #333 !important; color: #000 !important; font-style: italic; } a, a:visited { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } .rcs-spotlight, .rcs-grid-reveal, .rcs-card, .rcs-spotlight-card, .rcs-cta-banner, .rcs-direct-line { background: #fff !important; border: 1px solid #ccc !important; border-radius: 4px !important; } .rcs-pill, .rcs-tag-pill, .rcs-area-pill, .rcs-mono-label, .rcs-mono-caption { background: transparent !important; color: #000 !important; border-color: #999 !important; } } /* ---------------------------------------------------------------------------- * Photo mosaic accent (Sprint 1 H-9) * 4-image atmospheric strip used on Home (and reusable elsewhere). The action * plan + 04_Image_Library_Reference call for "subtle hover transitions, no * captions, treatments to let the photos feel atmospheric rather than promo." * Keep visual weight low: a single row of square-ish cells on desktop, a * 2-up grid below 768, and a heavy dark gradient overlay so the photos read * as texture rather than literal information. * -------------------------------------------------------------------------- */ .rcs-photo-mosaic-wrap { width: 100%; } .rcs-photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 18px; overflow: hidden; border: 1px solid var(--rcs-border-blue-faint, rgba(43, 127, 255, 0.15)); } @media (min-width: 768px) { .rcs-photo-mosaic { grid-template-columns: repeat(4, 1fr); gap: 10px; } } .rcs-photo-mosaic__cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0A0E18; } .rcs-photo-mosaic__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform var(--rcs-dur-base, 300ms) ease, filter var(--rcs-dur-base, 300ms) ease; } .rcs-photo-mosaic__cell:hover img { transform: scale(1.04); filter: saturate(1); } @media (hover: none) { .rcs-photo-mosaic__cell:hover img { transform: none; filter: saturate(0.85); } } .rcs-photo-mosaic__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, 0.15) 0%, rgba(5, 7, 13, 0.55) 100%), radial-gradient(circle at 30% 20%, rgba(43, 127, 255, 0.10), transparent 60%); pointer-events: none; } /* ---------------------------------------------------------------------------- * Hero floating image cluster (Sprint 1 Phase 2 detour) * Replaces the phone mockup in the hero's right column. Asymmetric absolutely- * positioned tiles in three depth layers; pointer parallax driven from * assets/js/rcs-animations.js → bindHeroCluster(). Container has a fixed * aspect ratio so the column reserves space and the page doesn't reflow when * images load (LCP-friendly). * -------------------------------------------------------------------------- */ /* Logo overlay layered ON TOP of the cluster via z-index. Parallaxes WITH the tiles (data-cluster-layer="2"). To preserve the translate(-50%, -50%) centering while honoring the JS-driven --rcs-tile-tx/ty parallax variables, we wrap the absolutely-positioned outer element in a CSS calc that combines both transforms. Standout treatment: full-glass card with a heavy dark backdrop blur, cyan- edged border, drop shadow, and inner glow so the mark visibly lifts off the photo grid. Sized so the logo always reads at the cluster's optical center, not just plastered over the photos. */ .rcs-hero-cluster__logo { position: absolute; top: 50%; left: 50%; z-index: 10; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 3vw, 28px) clamp(24px, 4vw, 40px); border-radius: 16px; background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.10), transparent 70%), linear-gradient(180deg, rgba(14, 20, 34, 0.78) 0%, rgba(5, 7, 13, 0.92) 100%); border: 1px solid rgba(0, 212, 255, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 212, 255, 0.18), inset 0 0 0 1px rgba(168, 230, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Center + parallax. The JS handler writes --rcs-tile-tx/ty here; we layer them after the centering translate so the logo drifts with the grid. */ transform: translate(-50%, -50%) translate3d(var(--rcs-tile-tx, 0px), var(--rcs-tile-ty, 0px), 0); transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .rcs-hero-cluster__logo img { display: block; width: auto; height: auto; max-width: min(320px, 60vw); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); } @media (prefers-reduced-motion: reduce) { .rcs-hero-cluster__logo { transition: none; transform: translate(-50%, -50%); } } .rcs-hero-cluster { position: relative; width: 100%; height: auto; aspect-ratio: 5 / 4; perspective: 1200px; /* Default tile transform variables — JS overrides per-tile. */ --rcs-tile-tx: 0px; --rcs-tile-ty: 0px; } .rcs-hero-cluster__stage { position: absolute; inset: 0; overflow: visible; /* tiles can rotate / extend slightly past the bounds */ } .rcs-hero-cluster__tile { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(43, 127, 255, 0.18), inset 0 0 0 1px rgba(168, 230, 255, 0.18); background: #0A0E18; transform-origin: 50% 50%; /* Combine: per-layer Z depth (--rcs-tile-tz) + random per-tile rotation (--rcs-tile-rot) + pointer-parallax translation (--rcs-tile-tx/ty set by JS). The parent's perspective: 1200px makes the Z translation read as real foreshortening — back layers recede, front layers come forward. */ transform: rotate(var(--rcs-tile-rot, 0deg)) translate3d(var(--rcs-tile-tx, 0px), var(--rcs-tile-ty, 0px), var(--rcs-tile-tz, 0px)); transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 480ms ease, filter 480ms ease; will-change: transform, opacity, filter; } /* Per-layer depth cues. Scoped to .rcs-hero-cluster__tile only so the logo overlay (which also carries data-cluster-layer="2") keeps full opacity and sharpness. Four cues compound: z-index, Z-translation, opacity, and a blur+saturate+brightness filter recession. */ .rcs-hero-cluster__tile[data-cluster-layer="3"] { z-index: 1; --rcs-tile-tz: -120px; opacity: 0.50; filter: blur(2.5px) saturate(0.65) brightness(0.68); } .rcs-hero-cluster__tile[data-cluster-layer="2"] { z-index: 2; --rcs-tile-tz: -40px; opacity: 0.78; filter: blur(0.6px) saturate(0.82) brightness(0.86); } .rcs-hero-cluster__tile[data-cluster-layer="1"] { z-index: 3; --rcs-tile-tz: 0px; opacity: 1; filter: saturate(0.95) contrast(1.04); } .rcs-hero-cluster__tile img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; /* Filter set on the parent so it applies to the shade overlay too. */ } .rcs-hero-cluster__tile-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(43, 127, 255, 0.08) 0%, rgba(5, 7, 13, 0.45) 100%); mix-blend-mode: multiply; } /* Honor reduce-motion: hold the layer styling but kill the parallax + transition. */ /* Honor prefers-reduced-motion: hold tiles still + preserve per-layer Z depth. */ @media (prefers-reduced-motion: reduce) { .rcs-hero-cluster__tile { transition: none; transform: rotate(var(--rcs-tile-rot, 0deg)) translate3d(0, 0, var(--rcs-tile-tz, 0px)); } } /* On narrow viewports the hero stacks (single column). Drop the aspect lock so the cluster doesn't dominate the fold; let the explicit max-height bound it instead. */ @media (max-width: 767px) { .rcs-hero-cluster { aspect-ratio: auto; min-height: 280px; max-height: 360px; } } /* ---------------------------------------------------------------------------- * About — "Our Story" 2-column grid with the brand logo on the right. * Left column carries the verbatim Round 2 prose; right column carries the * RCS horizontal logo (attachment 13) on a soft cyan-glow backdrop. On * narrow viewports the columns stack and the logo sits below the text. * -------------------------------------------------------------------------- */ .rcs-about-story { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 1024px) { .rcs-about-story { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; } } .rcs-about-story__body { min-width: 0; } .rcs-about-story__logo { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 56px); border-radius: 18px; background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.10), transparent 65%), linear-gradient(180deg, rgba(14, 20, 34, 0.6) 0%, rgba(10, 14, 24, 0.8) 100%); border: 1px solid rgba(43, 127, 255, 0.18); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(168, 230, 255, 0.04); min-height: 220px; } .rcs-about-story__logo img { max-width: min(420px, 100%); height: auto; display: block; /* The horizontal mark is already on a dark transparent base — a faint cyan drop-shadow lifts it off the card backdrop without recoloring the mark. */ filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.25)); } @media (max-width: 1023px) { .rcs-about-story__logo { min-height: 180px; } .rcs-about-story__logo img { max-width: 320px; } } /* ---------------------------------------------------------------------------- * Credibility band (Services S-3, About AB-10, anywhere a single full-bleed * atmospheric photo wants to carry the section). Heavy dark overlay so the * photo reads as texture rather than promotional hero, fixed aspect ratio so * it doesn't dominate the section. * -------------------------------------------------------------------------- */ .rcs-credibility-band { position: relative; width: 100%; margin: 32px 0 8px; aspect-ratio: 21 / 6; border-radius: 18px; overflow: hidden; border: 1px solid var(--rcs-border-blue-faint, rgba(43, 127, 255, 0.18)); } .rcs-credibility-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.85) contrast(1.04); } .rcs-credibility-band__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 13, 0.30) 0%, rgba(5, 7, 13, 0.78) 100%), radial-gradient(circle at 30% 20%, rgba(43, 127, 255, 0.12), transparent 60%); } @media (max-width: 767px) { .rcs-credibility-band { aspect-ratio: 16 / 9; } } /* ---------------------------------------------------------------------------- * Live PGM Pricing trigger cards (Sprint 1 Phase 2 detour) * The pricing tiles are