/* =========================================================================== RedVector — global styles Ported verbatim from the Claude Design "standalone final" export (visual source of truth). Fonts: Jost + Hanken Grotesk, loaded from Google Fonts in the page (no cookies set by the font request). The block at the end (STATIC HELPERS) is glue for the no-framework build — toggles the design did via React inline styles are done with classes here. =========================================================================== */ * { box-sizing: border-box; } body { margin: 0; height: 100%; background: #1b1f27; } html { height: 100%; } ::selection { background: #d21f2f; color: #fff; } input, textarea, button { font-family: inherit; } input::placeholder, textarea::placeholder { color: #6b727f; } input:focus, textarea:focus { outline: none; border-color: #d21f2f !important; } #rv-scroller::-webkit-scrollbar { width: 0; height: 0; } @keyframes rvFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(2deg); } } @keyframes rvBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes rvFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes rvBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } } #rv-chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(210,31,47,.55) transparent; } #rv-chat-scroll::-webkit-scrollbar { width: 6px; } #rv-chat-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } #rv-chat-scroll::-webkit-scrollbar-thumb { background: rgba(210,31,47,.5); border-radius: 100px; } #rv-chat-scroll::-webkit-scrollbar-thumb:hover { background: rgba(210,31,47,.8); } #rv-form-project { scrollbar-width: thin; scrollbar-color: rgba(210,31,47,.55) transparent; } #rv-form-project::-webkit-scrollbar { width: 6px; } #rv-form-project::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } #rv-form-project::-webkit-scrollbar-thumb { background: rgba(210,31,47,.5); border-radius: 100px; } #rv-form-project::-webkit-scrollbar-thumb:hover { background: rgba(210,31,47,.8); } #rv-chat-input { scrollbar-width: thin; scrollbar-color: rgba(210,31,47,.55) transparent; } #rv-chat-input::-webkit-scrollbar { width: 6px; } #rv-chat-input::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } #rv-chat-input::-webkit-scrollbar-thumb { background: rgba(210,31,47,.5); border-radius: 100px; } #rv-chat-input::-webkit-scrollbar-thumb:hover { background: rgba(210,31,47,.8); } #rv-drawer-scroll { scrollbar-width: thin; scrollbar-color: rgba(210,31,47,.55) transparent; } #rv-drawer-scroll::-webkit-scrollbar { width: 6px; } #rv-drawer-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } #rv-drawer-scroll::-webkit-scrollbar-thumb { background: rgba(210,31,47,.5); border-radius: 100px; } #rv-drawer-scroll::-webkit-scrollbar-thumb:hover { background: rgba(210,31,47,.8); } #rv-privacy-scroll { scrollbar-width: thin; scrollbar-color: rgba(210,31,47,.55) transparent; } #rv-privacy-scroll::-webkit-scrollbar { width: 6px; } #rv-privacy-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } #rv-privacy-scroll::-webkit-scrollbar-thumb { background: rgba(210,31,47,.5); border-radius: 100px; } #rv-privacy-scroll::-webkit-scrollbar-thumb:hover { background: rgba(210,31,47,.8); } #rv-consent:checked { background: #d21f2f; border-color: #d21f2f; } #rv-consent:checked::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .rv-cc-sw { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; border-radius: 100px; background: #2a2f3a; border: 1px solid rgba(255,255,255,.14); cursor: pointer; flex-shrink: 0; transition: background .25s; } .rv-cc-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c2c7d0; transition: transform .25s, background .25s; } .rv-cc-sw:checked { background: #d21f2f; border-color: #d21f2f; } .rv-cc-sw:checked::after { transform: translateX(18px); background: #fff; } .rv-cc-sw:disabled { opacity: .55; cursor: not-allowed; } #rv-scroller { overflow-x: hidden; } [data-about-stats] > p { min-width: 0; } /* ===== Anchor offset for the fixed nav ===== */ #rv-scroller > section { scroll-margin-top: 84px; } /* ===== Hamburger (mobile nav toggle) ===== */ [data-burger] span { transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease; } nav[data-menu="open"] [data-burger] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav[data-menu="open"] [data-burger] span:nth-child(2) { opacity: 0; } nav[data-menu="open"] [data-burger] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===================== RESPONSIVE ===================== */ @media (max-width: 1080px) { [data-pillars] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 920px) { /* let sections grow and scroll naturally instead of snapping a fixed 100vh */ #rv-scroller { scroll-snap-type: none !important; } #rv-scroller > section { height: auto !important; min-height: 100vh; padding-top: 104px !important; padding-bottom: 76px !important; scroll-snap-align: none !important; } /* stack every two-column layout */ [data-hero-grid], [data-about-grid], [data-voting-grid], [data-contact-grid], [data-future-grid] { grid-template-columns: 1fr !important; } [data-about-grid] > div { min-width: 0; } [data-hero-art] { display: none !important; } [data-clients] > div { grid-template-columns: repeat(2, 1fr) !important; } [data-clients-title] { white-space: normal !important; } [data-voting-grid] { gap: 56px !important; } /* collapse the top nav into a clean full-screen menu */ [data-burger] { display: flex !important; } [data-navactions] { display: none !important; } nav[data-menu="open"] + [data-mobile-menu] { display: flex !important; } } /* Short viewports (laptops / short windows): stop forcing centered 100vh — let sections grow so content never overlaps the nav or the next screen. */ @media (min-width: 921px) and (max-height: 860px) { #rv-scroller { scroll-snap-type: none !important; } #rv-scroller > section { height: auto !important; min-height: 100vh; padding-top: 100px !important; padding-bottom: 72px !important; scroll-snap-align: none !important; } } /* Hide the right rail whenever an overlay (drawer / privacy / menu / contact) is open. */ #rv-scroller[data-overlay="1"] [data-rail] { display: none !important; } /* Clients: switch the tall full grid for the paginated slider wherever it would overflow. */ @media (max-width: 1080px), (max-height: 860px) { [data-clients] { display: none !important; } [data-clients-mobile] { display: block !important; } } /* Stacked layouts: keep the Voting mockup from dominating, and centre a wrapped footer. */ @media (max-width: 920px) { [data-voting-art] { max-width: 500px; margin: 12px auto 0; padding-right: 0 !important; } [data-voting-art] img[alt*="phone"] { bottom: -7% !important; } [data-footer] { justify-content: center !important; text-align: center; flex-wrap: wrap; gap: 9px !important; padding: 22px 0 !important; } [data-footer] > div { flex: 1 1 100% !important; justify-content: center; gap: 10px !important; } } /* Contact: wherever the inline AI-chat card can't fit (narrow OR short viewport), collapse it into two CTAs that open the full-screen modal — so the buttons are always reachable and the chat never gets clipped. */ @media (max-width: 920px), (max-height: 860px) { [data-contact-grid] { grid-template-columns: 1fr !important; } [data-contact-card] { height: auto !important; min-height: 540px; } [data-contact-cta] { display: flex !important; flex-direction: row !important; } [data-contact-cta] > button { flex: 1 1 0; min-width: 0; padding: 14px 16px !important; font-size: 12.5px !important; } [data-contact-card-wrap] { position: fixed !important; inset: 0; z-index: 200; display: none; background: #14171d; } [data-contact-card-wrap][data-open="open"] { display: block !important; animation: rvFade .25s ease; } [data-contact-card-wrap] [data-contact-card] { height: 100% !important; min-height: 0 !important; max-height: none !important; width: 100%; max-width: none !important; border: none !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } [data-contact-tabs] { padding-right: 50px !important; } [data-contact-modal-close] { display: flex !important; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 21px; line-height: 1; cursor: pointer; } [data-form-grid] { grid-template-columns: 1fr !important; } #rv-scroller[data-contact-open="1"] nav { display: none !important; } } @media (max-width: 600px) { [data-pillars] { grid-template-columns: 1fr !important; } [data-clients] > div { grid-template-columns: 1fr !important; } [data-rail] { display: none !important; } #rv-scroller > section { padding-left: 22px !important; padding-right: 22px !important; } [data-footer] { justify-content: center !important; text-align: center; } [data-footer] > div { flex: 1 1 100% !important; justify-content: center; } } @media (max-width: 760px) { nav > a svg { height: 23px !important; } #hero { align-items: flex-start !important; } #hero [data-hero-grid] { margin-top: 8px; } #rv-hero-canvas { opacity: .5 !important; } [data-hero-cta] { flex-wrap: nowrap !important; gap: 10px !important; } [data-hero-cta] > a { padding: 13px 18px !important; font-size: 12.5px !important; white-space: nowrap; } [data-drawer-panel], [data-privacy-panel] { width: 100vw !important; border-left: none !important; } } @media (max-width: 480px) { nav > a svg { height: 21px !important; } } /* About — phases become an auto-playing horizontal slider on phones */ @media (max-width: 760px) { [data-phases] { flex-direction: row !important; } [data-phases] > [data-phase-slide] { flex: 0 0 100%; min-width: 100%; border-top: 1px solid rgba(255,255,255,.12) !important; border-bottom: 1px solid rgba(255,255,255,.12); padding: 18px 0 !important; } [data-phase-dots] { display: flex !important; } /* drawer: smaller Start a project button on mobile */ [data-drawer-cta] { padding: 11px 22px !important; font-size: 12px !important; } /* drawer: What we deliver list one column on mobile */ [data-drawer-deliver] { grid-template-columns: 1fr !important; } [data-voting-stats] { flex-wrap: nowrap !important; gap: 16px !important; } [data-voting-stats] > div > div:first-child { font-size: 23px !important; } [data-clients] { display: none !important; } [data-clients-mobile] { display: block !important; } [data-about-stats] { gap: 14px !important; } [data-about-stats] > p { max-width: none !important; font-size: 12.5px !important; line-height: 1.45 !important; } } /* ===================== STATIC HELPERS (no-framework glue) ===================== */ /* The cookie banner/modal carry an inline `display` for their open state, which would beat the UA `[hidden]` rule — force hidden to win so they stay closed until site.js opens them. */ [hidden] { display: none !important; } /* nav background once the page has scrolled (added by site.js) */ nav[data-scrolled="1"] { background: rgba(20,23,29,.86) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; } /* hero variant slides + tab panels toggled by site.js */ [data-hero-slide] { display: none; } [data-hero-slide][data-active="1"] { display: block; } [data-tab-panel] { display: none; } [data-tab-panel][data-active="1"] { display: flex; } /* rail dot hover: reveal label + spin the triangle toward it */ button[data-rail-dot]:hover [data-rail-tip] { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } button[data-rail-dot]:hover [data-rail-tri] { transform: rotate(270deg) scale(1.4) !important; border-bottom-color: #fff !important; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)) !important; } button[data-rail-dot][data-active="1"] [data-rail-tri] { border-bottom-color: #d21f2f; transform: scale(1.3); filter: drop-shadow(0 0 7px rgba(210,31,47,.35)); } /* nav link hover */ [data-navlinks] a:hover { color: #fff; } /* Respect reduced-motion: stop the looping accents */ @media (prefers-reduced-motion: reduce) { [style*="rvBob"], [style*="rvFloat"] { animation: none !important; } }