/* Raizon redesign styles */ body { -moz-font-feature-settings: "liga" on; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-feature-settings: "liga" on; text-rendering: optimizeLegibility; } :root, [data-theme="light"] { --bg:#FBFAF8; --surface:#FFFFFF; --surface-2:#F4F2EE; --ink:#1B1E26; --ink-soft:#43464F; --muted:#74777F; --hairline:#E9E6E0; --accent:#E8472A; --accent-ink:#FFFFFF; --accent-wash:#FBEDE9; --shadow:0 1px 2px rgba(27,30,38,.04), 0 12px 32px -12px rgba(27,30,38,.12); --logo-filter:none; } /* page background themes; navbar styling stays original */ html { scroll-behavior:smooth; } body.body { background:var(--bg); transition:background .35s ease; } /* ===== Navbar scroll interaction: transparent + full-width at top, floating frosted pill once scrolled (content untouched) ===== */ .navbar-5{ transition: max-width .45s cubic-bezier(.4,0,.2,1), width .45s cubic-bezier(.4,0,.2,1), margin-top .45s ease, border-radius .45s ease, background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; } /* TOP OF PAGE — flush, transparent, edge-to-edge */ .navbar-5:not(.rz-nav-float){ width:100%; max-width:none; margin-top:0; border-radius:0; background-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } .navbar-5:not(.rz-nav-float) .navbar-glass-shine, .navbar-5:not(.rz-nav-float) .navbar-glass-tintt{ opacity:0; transition:opacity .4s ease; } /* SCROLLED — floating frosted-glass pill */ .navbar-5.rz-nav-float{ width:calc(100% - 2rem); max-width:82rem; margin-top:10px; border-radius:50rem; background-color:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 10px 30px -12px rgba(20,22,30,.28), 0 2px 8px rgba(0,0,0,.06); } .navbar-5.rz-nav-float .navbar-glass-shine, .navbar-5.rz-nav-float .navbar-glass-tintt{ opacity:1; transition:opacity .4s ease; } /* ===== Dropdown menus (redesigned) ===== */ @keyframes rzDropIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } } /* shared: center the panel under its toggle */ .w-dropdown-list.rzdrop, .w-dropdown-list.rzmega{ min-width:0; left:50%; transform:translateX(-50%); top:calc(100% + 16px); background:transparent; border:0; padding:0; box-shadow:none; border-radius:0; } .w--open .rzdrop, .w--open .rzmega{ animation:rzDropIn .18s ease both; } .navbar_menu .w-dropdown-toggle .w-icon-dropdown-toggle{ transition:transform .2s ease; } .w--open .w-icon-dropdown-toggle{ transform:rotate(180deg); } /* ---- simple panel (About) ---- */ .rzdrop{ width:236px; } .w-dropdown-list.rzdrop{ background:var(--surface); border:1px solid var(--hairline); border-radius:16px; box-shadow:0 24px 50px -20px rgba(20,22,30,.30); padding:8px; } .rzdrop .w-dropdown-link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:var(--ink-soft); font-family:"Poppins",sans-serif; font-size:14.5px; font-weight:500; text-decoration:none; transition:background .15s ease, color .15s ease; } .rzdrop .w-dropdown-link:hover{ background:var(--surface-2); color:var(--accent); } .rzdrop-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); flex:none; } .rzdrop-ic svg{ width:17px; height:17px; } /* ---- mega-menu (Solutions) ---- */ .w-dropdown-list.rzmega{ width:min(720px, 92vw); } .rzmega-inner{ display:grid; grid-template-columns:.92fr 1.35fr; gap:10px; min-width:540px; background:var(--surface); border:1px solid var(--hairline); border-radius:20px; box-shadow:0 30px 64px -22px rgba(20,22,30,.4); padding:14px; } .rzmega-feature{ display:flex; align-items:flex-end; min-height:238px; padding:22px; border-radius:14px; text-decoration:none; position:relative; overflow:hidden; color:#fff; background:linear-gradient(155deg, var(--accent), #a62d19); } .rzmega-feature::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 18%, rgba(255,255,255,.22), transparent 58%); } .rzmega-feature-body{ position:relative; z-index:1; } .rzmega-eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; opacity:.9; } .rzmega-feature h4{ font-family:"Poppins",sans-serif; color:#fff; font-size:21px; line-height:1.2; margin:9px 0 7px; } .rzmega-feature p{ color:rgba(255,255,255,.86); font-size:13px; line-height:1.5; } .rzmega-cta{ display:inline-block; margin-top:15px; font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; } .rzmega-list{ padding:14px 12px 12px; display:flex; flex-direction:column; } .rzmega-label{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .rzmega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .rzmega-item{ display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:12px; text-decoration:none; transition:background .16s ease; } .rzmega-item:hover{ background:var(--surface-2); } .rzmega-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); flex:none; } .rzmega-ic svg{ width:19px; height:19px; } .rzmega-name{ font-family:"Poppins",sans-serif; font-size:15px; font-weight:600; color:var(--ink); } .rzmega-explore{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:10px 16px; border:1px solid var(--hairline); border-radius:12px; font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; color:var(--ink); text-decoration:none; transition:border-color .16s ease, color .16s ease; } .rzmega-explore:hover{ border-color:var(--accent); color:var(--accent); } /* ---- mobile / collapsed nav: stack everything, drop absolute positioning ---- */ /* mobile-only "Get In Touch" that sits inside the opened menu */ .rz-menu-cta{ display:none; } @media (max-width:991px){ .w-dropdown-list.rzdrop, .w-dropdown-list.rzmega{ position:static; transform:none; width:100%; box-shadow:none; padding:0; animation:none; } .w--open .rzdrop, .w--open .rzmega{ animation:none; } .w-dropdown-list.rzdrop{ border:0; background:transparent; } .rzmega-inner{ grid-template-columns:1fr; border:0; box-shadow:none; padding:0; gap:0; min-width:0; } .rzmega-feature{ display:none; } .rzmega-grid{ grid-template-columns:1fr; } .rzmega-explore{ margin-bottom:8px; } /* ===== Mobile navbar ===== */ /* hamburger lines follow the theme */ .menu-icon_line-top, .menu-icon_line-middle, .menu-icon_line-middle-inner, .menu-icon_line-bottom{ background-color:var(--ink); } /* menu = a panel that matches the navbar width (small gap each side) and hugs its content */ .navbar-5 .w-nav-overlay{ position:static !important; background:transparent !important; height:auto !important; } .navbar-5 .navbar_menu.w-nav-menu, .navbar-5 .navbar_menu.is-page-height-tablet{ height:auto !important; min-height:0 !important; max-height:none !important; position:absolute !important; top:calc(100% + 10px) !important; left:0 !important; right:0 !important; bottom:auto !important; width:auto !important; margin:0 .5rem !important; float:none !important; background:var(--surface) !important; border:1px solid var(--hairline) !important; border-radius:18px !important; box-shadow:0 30px 60px -18px rgba(20,22,30,.34) !important; padding:10px !important; overflow:hidden !important; } .navbar_menu-links{ display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%; } .navbar_menu-links > .w-dropdown{ width:100%; margin:0; } /* top-level nav rows: reasonable size, left-aligned, full-width */ .navbar-5 .navbar_link, .navbar-5 .dropdown-toggle-13, .navbar-5 .dropdown-toggle-14{ display:flex !important; align-items:center; justify-content:flex-start; width:100%; text-align:left !important; padding:14px 16px !important; border-radius:12px; font-size:17px !important; color:var(--ink) !important; } .navbar-5 .navbar_link:hover, .navbar-5 .w-dropdown-toggle:hover{ background:var(--surface-2); } .navbar-5 .w-dropdown-toggle .w-icon-dropdown-toggle{ margin-left:auto; } /* nested dropdown content indents slightly */ .navbar_menu-links .rzdrop, .navbar_menu-links .rzmega{ padding:2px 4px 6px; } .rzdrop .w-dropdown-link, .rzmega-item{ padding:11px 12px; } /* Get In Touch moves INTO the menu, beside the burger */ .rz-menu-cta{ display:flex !important; align-items:center; justify-content:center; margin:8px 6px 4px; padding:14px; border-radius:12px; background:var(--accent); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:16px; text-decoration:none; } .navbar-5 .navbar_menu-buttons{ display:flex !important; flex-direction:row !important; align-items:center !important; margin:0 .4rem 0 auto !important; gap:.5rem; padding:0 !important; } .navbar-5 .navbar_menu-buttons .button-43{ display:none !important; } .navbar-5 .navbar_container{ align-items:center !important; } } /* ===================== REDESIGNED CONTENT (scoped) ===================== */ .rz{ font-family:"Inter", sans-serif; color:var(--ink); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; --gutter:2.5rem; /* matches the navbar's 1rem pill inset + 1.5rem container padding */ } .rz *{ box-sizing:border-box; } .rz a{ color:inherit; text-decoration:none; } .rz img{ max-width:100%; display:block; } .rz h1,.rz h2,.rz h3,.rz h4{ font-family:"Poppins", sans-serif; font-weight:700; line-height:1.1; letter-spacing:-.015em; color:var(--ink); margin:0; } .rz p{ margin:0; } .rz .rzwrap{ width:100%; max-width:100rem; margin:0 auto; padding:0 var(--gutter); } .rz .eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px; font-weight:500; } .rz .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); display:inline-block; } .rz .rzbtn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); padding:12px 22px; border-radius:99px; font-family:"Poppins", sans-serif; font-weight:600; font-size:15px; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; } .rz .rzbtn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 8px 20px -8px var(--accent); } .rz .rzbtn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); } .rz .rzbtn-ghost:hover{ background:var(--surface-2); filter:none; box-shadow:none; } /* hero — photo bg, two columns like the original design */ .rz .rzhero{ position:relative; overflow:hidden; background-image: linear-gradient(color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)), url("../assets/689a2024a6195bede1867546_Background%20Image%20(3).png"); background-size:cover; background-position:center; background-repeat:no-repeat; transition:background-color .35s ease; } .rz .rzhero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-top:88px; padding-bottom:84px; } .rz .rzhero-copy{ position:relative; z-index:1; } .rz .rzhero h1{ font-size:clamp(36px, 4.6vw, 60px); margin-top:22px; } .rz .rzhero h1 .hl{ color:var(--accent); } .rz .rzhero p{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-soft); max-width:560px; margin-top:24px; } .rz .rzhero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .rz .rzhero-stats{ display:flex; gap:40px; flex-wrap:wrap; margin-top:48px; padding-top:30px; border-top:1px solid var(--hairline); } .rz .rzhero-art{ display:flex; justify-content:center; align-items:center; } .rz .rzhero-art img{ width:100%; max-width:410px; height:auto; } .rz .rzhero-art .rzhero-dark{ display:none; } .rz .stat .num{ font-family:"Poppins", sans-serif; font-size:28px; font-weight:700; color:var(--ink); } .rz .stat .lbl{ font-size:13.5px; color:var(--muted); margin-top:2px; } /* section shell */ .rz .sec{ padding:88px 0; position:relative; } .rz .sec-head{ max-width:640px; margin-bottom:50px; } .rz .sec-head h2{ font-size:clamp(28px,4vw,42px); margin-top:18px; } .rz .sec-head.rzwide{ max-width:none; } .rz .rznowrap{ white-space:nowrap; } .rz .sec-head p{ color:var(--ink-soft); margin-top:16px; font-size:18px; } .rz .alt{ background:var(--surface-2); transition:background .35s ease; } /* competencies grid */ .rz .grid-comp{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .rz .rzcard{ background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:28px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .rz .rzcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 40%, var(--hairline)); } .rz .rzcard .idx{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--accent); letter-spacing:.1em; } .rz .rzcard h3{ font-size:21px; margin:16px 0 10px; } .rz .rzcard p{ color:var(--muted); font-size:15.5px; line-height:1.55; } .rz .rzcard-top{ display:flex; align-items:center; justify-content:space-between; } .rz .rzcard-ic{ width:54px; height:54px; object-fit:contain; } /* ---- solutions tabs ---- */ .rz .rzsol-head{ max-width:640px; } .rz .rzsol{ margin-top:42px; } .rz .rzsol-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px; } .rz .rzsol-tab{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:99px; border:1px solid var(--hairline); background:var(--surface); color:var(--ink-soft); font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } .rz .rzsol-tab:hover{ border-color:var(--accent); color:var(--ink); } .rz .rzsol-tab.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 10px 22px -10px var(--accent); } .rz .rzsol-tab-ic{ display:grid; place-items:center; } .rz .rzsol-tab-ic svg{ width:17px; height:17px; } .rz .rzsol-panel{ display:none; grid-template-columns:190px 1fr; gap:38px; align-items:center; max-width:800px; margin:0 auto; background:var(--surface); border:1px solid var(--hairline); border-radius:22px; padding:32px; box-shadow:var(--shadow); } .rz .rzsol-panel.is-active{ display:grid; animation:rzSolFade .35s ease both; } @keyframes rzSolFade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } .rz .rzsol-visual{ width:100%; aspect-ratio:1/1; border-radius:18px; display:grid; place-items:center; background:linear-gradient(155deg, var(--accent-wash), color-mix(in srgb, var(--surface-2) 60%, transparent)); border:1px solid var(--hairline); } .rz .rzsol-visual svg{ width:76px; height:76px; color:var(--accent); } .rz .rzsol-body .tag{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .rz .rzsol-body h3{ font-family:"Poppins",sans-serif; font-size:clamp(28px,3.4vw,40px); line-height:1.1; margin:12px 0 6px; } .rz .rzsol-body h3 .dot{ color:var(--accent); } .rz .rzsol-body .role{ font-family:"Poppins",sans-serif; font-weight:600; color:var(--ink); font-size:16px; margin-bottom:14px; } .rz .rzsol-body p{ color:var(--ink-soft); font-size:16px; line-height:1.6; max-width:480px; } .rz .rzsol-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:13px 24px; border-radius:12px; background:var(--accent); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; } .rz .rzsol-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px var(--accent); } /* success stories bento (matches original mosaic) */ .rz .stories-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px; grid-template-areas: "a a b c" "a a d e" "f g h h" "z g h h"; } .rz .st-a{ grid-area:a; } .rz .st-b{ grid-area:b; } .rz .st-c{ grid-area:c; } .rz .st-d{ grid-area:d; } .rz .st-e{ grid-area:e; } .rz .st-f{ grid-area:f; } .rz .st-g{ grid-area:g; } .rz .st-h{ grid-area:h; } .rz .st-z{ grid-area:z; } .rz .story{ background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rz .story:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 35%, var(--hairline)); } .rz .st-head{ display:flex; align-items:center; gap:10px; } .rz .st-ic{ width:34px; height:34px; border-radius:9px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; flex:none; } .rz .st-ic svg{ width:18px; height:18px; } .rz .story .sector{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; } .rz .story p{ font-size:15px; color:var(--ink-soft); margin-top:16px; line-height:1.45; } .rz .story .rzarrow{ align-self:flex-start; margin-top:16px; color:var(--muted); font-size:18px; transition:color .2s, transform .2s; } .rz .story:hover .rzarrow{ color:var(--accent); transform:translateX(3px); } /* featured (big) tiles get larger copy */ .rz .st-a p, .rz .st-h p{ font-size:21px; line-height:1.35; color:var(--ink); font-family:"Poppins",sans-serif; font-weight:600; max-width:90%; } .rz .st-a .st-ic, .rz .st-h .st-ic{ background:var(--accent); color:#fff; } /* "view all" CTA tile */ .rz .st-z{ background:var(--ink); color:#fff; align-items:flex-start; justify-content:center; gap:8px; } .rz .st-z .za{ font-family:"Poppins",sans-serif; font-weight:600; font-size:16px; } .rz .st-z:hover{ filter:brightness(1.08); } /* logo strips */ .rz .rzlogos{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 56px; align-items:center; justify-items:center; } /* logos sit directly on the section — no box, with vertical breathing room */ .rz .logo-panel{ background:none; border:none; padding:32px 0; } .rz .rzlogos img{ width:100%; max-width:300px; max-height:140px; height:auto; object-fit:contain; opacity:.95; transition:opacity .2s ease; } .rz .rzlogos img:hover{ opacity:1; } /* cta band, full-bleed, button on the right */ .rz .rzcta-section{ background:var(--ink); color:#fff; position:relative; overflow:hidden; } .rz .rzcta-section::after{ content:""; position:absolute; top:50%; right:6%; transform:translateY(-50%); width:420px; height:420px; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%); filter:blur(12px); pointer-events:none; } .rz .rzcta-inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; padding-top:64px; padding-bottom:64px; position:relative; z-index:1; } .rz .rzcta-text{ max-width:760px; } .rz .rzcta-section .eyebrow{ color:var(--accent); } .rz .rzcta-section h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); margin-top:16px; } .rz .rzcta-section p{ color:rgba(255,255,255,.72); margin-top:14px; max-width:620px; } .rz .rzbtn-lg{ padding:16px 30px; font-size:16px; flex:none; } /* future / video block */ .rz .future{ text-align:center; } .rz .future .eyebrow{ justify-content:center; } .rz .future h2{ font-size:clamp(30px,5vw,52px); } .rz .future p{ color:var(--ink-soft); margin-top:14px; font-size:19px; } .rz .video-frame{ margin:40px auto 0; max-width:920px; border-radius:18px; overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow); position:relative; aspect-ratio:16/9; background:#000; } .rz .video-frame iframe{ width:100%; height:100%; border:0; } /* ---- contact ---- */ .rz .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; } .rz .contact-left h2{ font-size:clamp(30px,4.5vw,46px); } .rz .contact-left p{ color:var(--ink-soft); margin-top:18px; font-size:17px; max-width:420px; } .rz .contact-channels{ margin-top:32px; display:flex; flex-direction:column; gap:14px; } .rz .channel{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:15px; } .rz .channel a{ color:var(--accent); font-weight:500; } .rz .channel .ic{ width:36px; height:36px; border-radius:9px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; flex:none; } .rz .rzform{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:34px; box-shadow:0 24px 60px -24px rgba(27,30,38,.28); } .rz .rzform::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ff9a3d)); } .rz .rzform label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:18px 0 7px; } .rz .rzform label:first-child{ margin-top:6px; } .rz .rzform input,.rz .rzform textarea,.rz .rzform select{ width:100%; background:var(--bg); border:1px solid var(--hairline); border-radius:10px; padding:13px 15px; font-family:inherit; font-size:15px; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease; } .rz .rzform select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374777F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; } .rz .rzform input:focus,.rz .rzform textarea:focus,.rz .rzform select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } .rz .rzform textarea{ min-height:120px; resize:vertical; } .rz .rzform .rzbtn{ width:100%; justify-content:center; margin-top:24px; padding:14px; } .rz .rzform-note{ font-size:13px; color:var(--muted); margin-top:14px; text-align:center; } /* contact section flourish */ .rz #contact-us{ position:relative; overflow:hidden; } .rz #contact-us::before{ content:""; position:absolute; top:-120px; left:-100px; width:520px; height:520px; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); pointer-events:none; } .rz #contact-us .rzwrap{ position:relative; z-index:1; } /* footer */ .rz.rzfooter{ background:var(--surface-2); border-top:1px solid var(--hairline); padding:66px 0 0; transition:background .35s ease; } .rz .rzfooter-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr auto; gap:44px; align-items:start; padding-bottom:52px; } .rz .rzfooter-brand{ max-width:340px; } .rz .rzfooter-logo{ height:32px; width:auto; margin-bottom:18px; } .rz .rzfooter-brand p{ color:var(--muted); font-size:14.5px; line-height:1.65; } .rz .rzfooter-cert{ height:auto; width:116px; align-self:start; justify-self:end; margin-top:2px; } .rz .rzfooter-bottom{ border-top:1px solid var(--hairline); padding:20px 0; text-align:center; } .rz .rzfooter-copy{ color:var(--muted); font-size:13px; } .rz .rzfooter-col h4{ font-family:"Poppins",sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; } .rz .rzfooter-col a{ display:block; color:var(--muted); font-size:15px; text-decoration:none; margin-bottom:13px; width:fit-content; transition:color .18s ease; } .rz .rzfooter-col a:hover{ color:var(--accent); } /* scroll reveal anim */ .rz .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .rz .reveal.in{ opacity:1; transform:none; } /* responsive */ @media (max-width:1000px){ .rz .grid-comp{ grid-template-columns:repeat(2,1fr); } .rz .rzsol-panel{ grid-template-columns:200px 1fr; gap:28px; padding:30px; } .rz .stories-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:165px; grid-template-areas:none; } .rz .stories-bento>*{ grid-area:auto; } .rz .st-a,.rz .st-h{ grid-column:span 2; } .rz .contact-grid{ grid-template-columns:1fr; gap:36px; } .rz .rzfooter-grid{ grid-template-columns:1fr 1fr; gap:32px 40px; } .rz .rzfooter-brand{ grid-column:1 / -1; max-width:none; } .rz .rzfooter-cert{ justify-self:start; } .rz .rzhero-grid{ grid-template-columns:1fr; gap:32px; padding-top:64px; padding-bottom:68px; } .rz .rzhero-art{ order:-1; justify-content:flex-start; } .rz .rzhero-art img{ max-width:300px; } .rz .rzcta-inner{ flex-direction:column; align-items:flex-start; gap:28px; } } @media (max-width:720px){ .rz{ --gutter:1.5rem; } .rz .rznowrap{ white-space:normal; } .rz .rzhero-grid{ padding-top:48px; padding-bottom:56px; } .rz .rzhero-stats{ gap:28px; } .rz .grid-comp{ grid-template-columns:1fr; } .rz .rzsol-panel{ grid-template-columns:1fr; gap:22px; text-align:center; } .rz .rzsol-visual{ max-width:180px; margin:0 auto; } .rz .rzsol-body p{ margin-left:auto; margin-right:auto; } .rz .stories-bento{ grid-template-columns:1fr; grid-auto-rows:auto; } .rz .st-a,.rz .st-h{ grid-column:span 1; } .rz .story{ min-height:150px; } .rz .sec{ padding:60px 0; } .rz .rzcta-inner{ padding-top:48px; padding-bottom:48px; } .rz .rzlogos{ grid-template-columns:repeat(2,1fr); gap:28px; } .rz .rzfooter-grid{ grid-template-columns:1fr; } .rz .rzfooter-cert{ justify-self:start; margin-top:6px; } } @media (prefers-reduced-motion:reduce){ .rz *{ animation:none !important; transition:none !important; } .rz .reveal{ opacity:1; transform:none; } } /* ============ VIDEO HERO — shared by About / Partnerships / Competencies pages ===== locked to exactly one viewport height everywhere, so no page's hero can end up taller or shorter than another's, even if the heading/paragraph length differs. */ .rz .rzabout-hero{ position:relative; overflow:hidden; height:100vh; height:100dvh; min-height:100vh; min-height:100dvh; display:flex; align-items:center; margin-top:-80px; padding-top:80px; box-sizing:border-box; } .rz .rzabout-hero .w-background-video, .rz .rzabout-hero .background-video-26, .rz .rzabout-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .rz .rzabout-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(251,250,248,.55), rgba(251,250,248,.74)); } /* lighter wash so the hero video shows through; stays denser on the left behind the text */ .rz .rzabout-hero.rz-hero-vivid::after{ background:linear-gradient(90deg, rgba(251,250,248,.80) 0%, rgba(251,250,248,.50) 45%, rgba(251,250,248,.12) 100%); } .rz .rzabout-hero .rzwrap{ padding-top:96px; padding-bottom:96px; } .rz .rzabout-hero-copy{ position:relative; z-index:2; text-align:left; max-width:640px; } .rz .rzabout-hero-copy .eyebrow{ justify-content:flex-start; color:var(--accent); } .rz .rzabout-hero-copy h1{ color:var(--ink); font-size:clamp(36px, 4.6vw, 60px); line-height:1.08; margin-top:22px; } .rz .rzabout-hero-copy h1 .hl{ color:var(--accent); } .rz .rzabout-hero-copy p{ color:var(--ink-soft); font-size:clamp(17px,1.6vw,20px); margin-top:24px; max-width:560px; } /* sub nav */ .rz .rzsubnav{ border-bottom:1px solid var(--hairline); background:var(--surface); position:sticky; top:0; z-index:40; } .rz .rzsubnav-inner{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 0; } .rz .rzsubnav a{ font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; color:var(--ink-soft); text-decoration:none; padding:8px 18px; border-radius:99px; transition:background .16s ease, color .16s ease; } .rz .rzsubnav a:hover, .rz .rzsubnav a.is-active{ background:var(--accent-wash); color:var(--accent); } /* values */ .rz .rzvalues{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:46px; } .rz .rzvalue{ background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:32px 30px; transition:transform .2s ease, box-shadow .2s ease; } .rz .rzvalue:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .rz .rzvalue .eyebrow{ margin-bottom:14px; } .rz .rzvalue p{ color:var(--ink-soft); font-size:16px; line-height:1.66; } .rz .rzvalue p strong{ color:var(--ink); font-weight:600; } /* team slider (2 members per slide) */ .rz .rzslider{ position:relative; margin-top:46px; padding:0 8px; } .rz .rzslider-viewport{ overflow:hidden; padding:6px 2px; } .rz .rzslider-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); } .rz .rzslide{ min-width:100%; box-sizing:border-box; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; padding:0 2px; } .rz .rzslide-solo{ grid-template-columns:minmax(0,620px); justify-content:center; } .rz .rzslide-member{ display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:start; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:26px; } .rz .rzslide-mphoto{ width:130px; height:165px; border-radius:12px; background-size:cover; background-position:center top; background-color:var(--surface-2); } .rz .rzslide-name{ font-family:"Poppins",sans-serif; font-weight:700; font-size:18px; color:var(--ink); line-height:1.22; } .rz .rzslide-role{ font-family:"Poppins",sans-serif; font-weight:600; font-size:13px; color:var(--accent); margin-top:5px; } .rz .rzslide-bio{ color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:13px; text-align:justify; } .rz .rzslide-bio .hl{ color:var(--ink-soft); font-weight:600; } .rz .rzslider-btn{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); transition:background .16s ease, color .16s ease, border-color .16s ease; z-index:3; } .rz .rzslider-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); } .rz .rzslider-prev{ left:-12px; } .rz .rzslider-next{ right:-12px; } .rz .rzslider-dots{ display:flex; justify-content:center; gap:9px; margin-top:24px; } .rz .rzslider-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:var(--hairline); cursor:pointer; transition:background .16s ease, width .16s ease; } .rz .rzslider-dot.is-active{ background:var(--accent); width:26px; border-radius:5px; } @media (max-width: 900px){ .rz .rzslide{ grid-template-columns:1fr; align-content:start; align-items:start; } .rz .rzslide-solo{ grid-template-columns:minmax(0,1fr); } } @media (max-width: 600px){ .rz .rzslide-member{ grid-template-columns:1fr; gap:16px; padding:20px; text-align:left; } .rz .rzslide-mphoto{ width:110px; height:140px; } .rz .rzslider{ padding:0; } .rz .rzslider-prev{ left:4px; } .rz .rzslider-next{ right:4px; } .rz .rzslider-btn{ width:38px; height:38px; font-size:20px; } } /* join us */ .rz .rzjoin{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; } .rz .rzjoin-text{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:22px; } .rz .rzjoin-photo{ width:100%; aspect-ratio:16/10; border-radius:16px; background-size:cover; background-position:center; background-color:var(--surface); } .rz .rzjoin-text p{ color:var(--ink-soft); font-size:16px; line-height:1.7; padding:0 12px 8px; } .rz .rzjoin-text p strong{ color:var(--ink); font-weight:600; } .rz .rzjoin-cta{ background:var(--surface-2); border:1px solid var(--hairline); color:var(--ink); border-radius:22px; padding:44px 40px; position:relative; overflow:hidden; } .rz .rzjoin-cta::after{ content:""; position:absolute; top:-70px; right:-40px; width:340px; height:300px; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%); filter:blur(12px); pointer-events:none; } .rz .rzjoin-cta .eyebrow{ color:var(--accent); position:relative; } .rz .rzjoin-cta h3{ font-family:"Poppins",sans-serif; color:var(--ink); font-size:clamp(24px,3vw,32px); margin-top:12px; position:relative; } .rz .rzjoin-cta p{ color:var(--ink-soft); margin-top:12px; position:relative; } .rz .rzjoin-cta .rzbtn{ margin-top:24px; position:relative; } @media (max-width:860px){ .rz .rzvalues{ grid-template-columns:1fr; } .rz .rzjoin{ grid-template-columns:1fr; } .rz .rzslide{ grid-template-columns:1fr; gap:22px; padding:26px; text-align:center; } .rz .rzslide-photo{ width:200px; height:230px; margin:0 auto; } .rz .rzslider-prev{ left:4px; } .rz .rzslider-next{ right:4px; } .rz .rzslider-btn{ width:40px; height:40px; font-size:20px; } } /* ============ PARTNERSHIPS PAGE — partner category cards (single-tone) ============ */ .rz .rzpcards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; } .rz .rzpcard{ background:var(--surface); border:1px solid var(--hairline); border-radius:20px; padding:30px; transition:transform .2s ease, box-shadow .2s ease; } .rz .rzpcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .rz .rzpcard-head{ display:flex; align-items:flex-start; gap:16px; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--hairline); } .rz .rzpcard-ic{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); } .rz .rzpcard-ic svg{ width:22px; height:22px; } .rz .rzpcard-head h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); line-height:1.25; } .rz .rzpcard-head p{ color:var(--muted); font-size:13.5px; margin-top:5px; line-height:1.5; } .rz .rzpcard-logos{ display:flex; flex-wrap:wrap; gap:14px; } .rz .rzplogo{ width:150px; height:90px; flex:none; background:#fff; border:1px solid var(--hairline); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:14px 16px; box-shadow:0 1px 2px rgba(20,22,30,.04); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rz .rzplogo:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent); } .rz .rzplogo img{ display:block; max-width:100%; max-height:42px; width:auto; height:auto; object-fit:contain; margin:0; } .rz .rzplogo img[alt="Amazon SageMaker"], .rz .rzplogo img[alt="Google Cloud"]{ max-height:58px; } @media (max-width:860px){ .rz .rzpcards{ grid-template-columns:1fr; } } @media (max-width:520px){ .rz .rzpcard{ padding:22px; } .rz .rzplogo{ width:42%; height:80px; padding:12px; } } /* ============ SUCCESS STORIES PAGE ============ */ .rz .rzcase-sec{ overflow:hidden; } .rz .rzcase-head{ max-width:820px; } .rz .rzcase-head h2{ font-size:clamp(24px,3vw,34px); margin-top:14px; } .rz .rzcase-meta{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted); margin-top:12px; letter-spacing:.01em; } .rz .rzcase-head p{ color:var(--ink-soft); font-size:16px; line-height:1.7; margin-top:16px; } .rz .rzcase-head p strong{ color:var(--ink); font-weight:600; } .rz .rzcase-stats{ margin-top:36px; display:grid; grid-template-columns:auto auto 1fr; gap:28px; align-items:center; background:var(--surface); border:1px solid var(--hairline); border-radius:20px; padding:30px 32px; } .rz .rzcase-logo{ width:120px; height:120px; flex:none; background:#fff; border:1px solid var(--hairline); border-radius:18px; display:flex; align-items:center; justify-content:center; padding:16px; } .rz .rzcase-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; } .rz .rzcase-facts{ display:flex; flex-direction:column; gap:16px; padding:0 28px; border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); } .rz .rzcase-fact-lbl{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .rz .rzcase-fact-val{ font-family:"Poppins",sans-serif; font-weight:600; font-size:14.5px; color:var(--ink); margin-top:5px; line-height:1.4; } .rz .rzcase-statrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .rz .rzcase-stat-num{ font-family:"Poppins",sans-serif; font-weight:700; font-size:22px; color:var(--accent); line-height:1.15; } .rz .rzcase-stat-lbl{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; } @media (max-width:960px){ .rz .rzcase-stats{ grid-template-columns:1fr; gap:22px; padding:26px 24px; } .rz .rzcase-logo{ width:96px; height:96px; } .rz .rzcase-facts{ flex-direction:row; flex-wrap:wrap; gap:24px; padding:20px 0; border-left:0; border-right:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .rz .rzcase-statrow{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .rz .rzcase-statrow{ grid-template-columns:1fr; gap:16px; } } /* ============ CAREER PAGE ============ */ /* employee benefits: interactive accordion */ .rz .rzaccordion{ margin-top:44px; border-top:1px solid var(--hairline); } .rz .rzacc-item{ border-bottom:1px solid var(--hairline); } .rz .rzacc-head{ width:100%; display:flex; align-items:center; gap:18px; padding:24px 4px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; } .rz .rzacc-ic{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); transition:transform .3s ease, background .25s ease, color .25s ease; } .rz .rzacc-ic svg{ width:20px; height:20px; } .rz .rzacc-title{ flex:1; font-family:"Poppins",sans-serif; font-weight:700; font-size:18px; color:var(--ink); } .rz .rzacc-chevron{ flex:none; width:22px; height:22px; display:grid; place-items:center; color:var(--muted); transition:transform .3s ease, color .25s ease; } .rz .rzacc-item.is-open .rzacc-chevron{ transform:rotate(180deg); color:var(--accent); } .rz .rzacc-item.is-open .rzacc-ic{ background:var(--accent); color:#fff; } .rz .rzacc-head:hover .rzacc-title{ color:var(--accent); } .rz .rzacc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease; } .rz .rzacc-item.is-open .rzacc-body{ grid-template-rows:1fr; } .rz .rzacc-body-inner{ overflow:hidden; } .rz .rzacc-body-inner p{ color:var(--ink-soft); font-size:15.5px; line-height:1.65; padding:0 4px 26px 60px; max-width:640px; } /* jobs: 3-column grid → naturally lays out as 3 rows of 3, matching the original */ .rz .rzjobs-count{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted); letter-spacing:.04em; } .rz .rzjobs-count .dot{ width:7px; height:7px; border-radius:50%; background:#2FBE6E; box-shadow:0 0 0 4px color-mix(in srgb, #2FBE6E 20%, transparent); animation:rzPulse 1.8s ease-in-out infinite; } @keyframes rzPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } .rz .rzjobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; } .rz .rzjob{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:28px; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rz .rzjob:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 30%, var(--hairline)); } .rz .rzjob-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .rz .rzjob-ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); transition:transform .3s ease, background .25s ease, color .25s ease; } .rz .rzjob-ic svg{ width:19px; height:19px; } .rz .rzjob:hover .rzjob-ic{ transform:rotate(-8deg) scale(1.08); background:var(--accent); color:#fff; } .rz .rzjob-tag{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .rz .rzjob h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); line-height:1.3; } .rz .rzjob p{ color:var(--muted); font-size:14.5px; line-height:1.62; margin-top:12px; flex:1; } .rz .rzjob-apply{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; align-self:flex-start; padding:10px 20px; border-radius:10px; border:1.5px solid var(--accent); font-family:"Poppins",sans-serif; font-weight:600; font-size:14px; color:var(--accent); text-decoration:none; transition:background .18s ease, color .18s ease, transform .18s ease; } .rz .rzjob-apply span{ transition:transform .18s ease; } .rz .rzjob-apply:hover{ background:var(--accent); color:#fff; } .rz .rzjob-apply:hover span{ transform:translateX(4px); } @media (max-width:900px){ .rz .rzjobs{ grid-template-columns:repeat(2,1fr); } } @media (max-width:700px){ .rz .rzjobs{ grid-template-columns:1fr; } } @media (max-width:560px){ .rz .rzacc-title{ font-size:16px; } .rz .rzacc-body-inner p{ padding-left:0; } } /* ============ CUSTOMERS PAGE — card variant: logo left, text right ============ */ .rz .rzpcard-lr{ display:flex; align-items:center; gap:28px; } .rz .rzpcard-lr .rzpcard-logo{ width:150px; height:110px; flex:none; display:flex; align-items:center; justify-content:center; } .rz .rzpcard-lr .rzpcard-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; } .rz .rzpcard-lr .rzpcard-body h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:18px; color:var(--ink); } .rz .rzpcard-lr .rzpcard-body p{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:6px; } @media (max-width:560px){ .rz .rzpcard-lr{ flex-direction:column; align-items:flex-start; gap:16px; } .rz .rzpcard-lr .rzpcard-logo{ width:130px; height:90px; justify-content:flex-start; } } /* ============ GENFLEX (product page) ============ */ /* what is genflex: bright, light-tinted cards — icon, title, description all visible */ .rz .rzfeat3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; } .rz .rzfeat3-item{ position:relative; overflow:hidden; border-radius:18px; padding:30px; background:linear-gradient(155deg, var(--accent-wash), var(--surface)); border:1px solid var(--hairline); transition:transform .25s ease, box-shadow .25s ease; } .rz .rzfeat3-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .rz .rzfeat3-ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; margin-bottom:20px; box-shadow:0 10px 22px -10px var(--accent); transition:transform .3s ease; } .rz .rzfeat3-item:hover .rzfeat3-ic{ transform:rotate(-6deg) scale(1.06); } .rz .rzfeat3-ic svg{ width:26px; height:26px; } .rz .rzfeat3-item h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); } .rz .rzfeat3-item p{ color:var(--ink-soft); font-size:15px; line-height:1.62; margin-top:10px; } /* why choose: centered grid — leftover row (2 of 5) centers instead of hugging left */ .rz .rzwhy-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:44px; } .rz .rzwhy-item{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:26px; flex:1 1 calc(33.333% - 12px); min-width:240px; max-width:calc(33.333% - 12px); transition:transform .2s ease, box-shadow .2s ease; } .rz .rzwhy-item::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ff9a3d)); transition:transform .3s ease; } .rz .rzwhy-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .rz .rzwhy-item:hover::before{ transform:scaleX(1); } .rz .rzwhy-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); margin-bottom:16px; transition:transform .3s ease, background .25s ease, color .25s ease; } .rz .rzwhy-item:hover .rzwhy-ic{ background:var(--accent); color:#fff; transform:rotate(-8deg) scale(1.08); } .rz .rzwhy-ic svg{ width:20px; height:20px; } .rz .rzwhy-item h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:16.5px; color:var(--ink); } .rz .rzwhy-item p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:10px; } /* CTA band liveliness: pulsing glow + floating accent dot */ .rz .rzcta-section.rzcta-alive{ position:relative; } .rz .rzcta-section.rzcta-alive::before{ content:""; position:absolute; top:50%; left:8%; transform:translateY(-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); filter:blur(6px); animation:rzCtaPulse 3.4s ease-in-out infinite; pointer-events:none; } @keyframes rzCtaPulse{ 0%,100%{ opacity:.55; transform:translateY(-50%) scale(1); } 50%{ opacity:.9; transform:translateY(-50%) scale(1.12); } } /* security band */ .rz .rzsecurity{ text-align:center; max-width:760px; margin:0 auto; } .rz .rzsecurity .eyebrow{ color:var(--accent); } .rz .rzsecurity-logo{ height:110px; width:auto; margin:28px auto; display:block; } .rz .rzsecurity p{ color:var(--ink-soft); font-size:16px; line-height:1.7; } .rz .rzsecurity p strong{ color:var(--ink); font-weight:600; } /* use cases → stat-forward impact cards */ .rz .rzimpact{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; } .rz .rzimpact-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:28px; transition:transform .2s ease, box-shadow .2s ease; } .rz .rzimpact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .rz .rzimpact-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent); margin-bottom:16px; } .rz .rzimpact-ic svg{ width:21px; height:21px; } .rz .rzimpact-card h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; color:var(--ink); } .rz .rzimpact-card p{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:8px; } .rz .rzimpact-stats{ display:flex; gap:24px; margin-top:20px; padding-top:20px; border-top:1px solid var(--hairline); } .rz .rzimpact-stat{ display:flex; flex-direction:column; } .rz .rzimpact-stat .num{ font-family:"Poppins",sans-serif; font-weight:700; font-size:26px; color:var(--accent); line-height:1.1; } .rz .rzimpact-stat .lbl{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4; } /* why-genflex over other tools → photo-background section, heading left, tile panel right (matches original) */ .rz .rzdiff-section{ position:relative; overflow:hidden; padding:100px 0; background-image: linear-gradient(color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)), url("../assets/6899a6c7ea3c50c9ccd5a6cd_kl%20light.png"); background-size:cover; background-position:center; } .rz .rzdiff-layout{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .rz .rzdiff-heading{ flex:1 1 340px; max-width:400px; } .rz .rzdiff-heading h2{ font-size:clamp(28px,3.4vw,38px); line-height:1.18; color:var(--ink); } .rz .rzdiff-heading h2 .hl{ color:var(--accent); } .rz .rzdiff-panel{ flex:1 1 640px; max-width:720px; background:#fff; border-radius:20px; padding:30px; box-shadow:0 30px 60px -20px rgba(20,22,30,.35); } .rz .rzdiff-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .rz .rzdiff-tile{ aspect-ratio:1/1; border:1px solid #ECEAE5; border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; background:#fff; box-shadow:0 3px 10px -4px rgba(20,22,30,.1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rz .rzdiff-tile:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(20,22,30,.2); border-color:color-mix(in srgb, var(--accent) 35%, var(--hairline)); } .rz .rzdiff-tile span{ font-family:"Poppins",sans-serif; font-weight:600; font-size:13px; color:var(--ink); line-height:1.3; } .rz .rzdiff-tile-logo img{ max-width:60%; max-height:60%; width:auto; height:auto; object-fit:contain; } @media (max-width:900px){ .rz .rzfeat3{ grid-template-columns:1fr; gap:20px; } .rz .rzwhy-item{ flex:1 1 calc(50% - 9px); max-width:calc(50% - 9px); } .rz .rzimpact{ grid-template-columns:1fr; } .rz .rzdiff-section{ padding:64px 0; } .rz .rzdiff-layout{ flex-direction:column; align-items:stretch; text-align:center; gap:24px; } .rz .rzdiff-heading{ flex:none; max-width:none; } .rz .rzdiff-panel{ flex:none; max-width:none; min-width:0; box-sizing:border-box; padding:20px; } .rz .rzdiff-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .rz .rzdiff-tile{ padding:8px; } } @media (max-width:520px){ .rz .rzdiff-tile span{ font-size:12px; overflow-wrap:anywhere; } .rz .rzdiff-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rz .rzdiff-tile{ aspect-ratio:auto; min-height:90px; } } @media (max-width:560px){ .rz .rzwhy-item{ flex:1 1 100%; max-width:100%; } .rz .rzimpact-stats{ gap:16px; } } /* ============ PRICING (GenFlex + future solution pages) ============ */ .rz .rzprice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; align-items:stretch; } .rz .rzprice-tagline{ font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; color:var(--accent); margin-top:14px; line-height:1.4; } .rz .rzprice-card{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--surface); border:1px solid var(--hairline); border-radius:20px; padding:32px 28px; transition:transform .25s ease, box-shadow .25s ease; } .rz .rzprice-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .rz .rzprice-popular{ border:2px solid var(--accent); box-shadow:0 20px 44px -20px color-mix(in srgb, var(--accent) 45%, transparent); } .rz .rzprice-popular:hover{ transform:translateY(-6px); } .rz .rzprice-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:12.5px; padding:7px 18px; border-radius:99px; } .rz .rzprice-card h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); } .rz .rzprice-amount{ display:flex; align-items:baseline; gap:8px; margin-top:16px; } .rz .rzprice-amount .num{ font-family:"Poppins",sans-serif; font-weight:800; font-size:34px; color:var(--ink); line-height:1; } .rz .rzprice-amount .per{ font-size:12.5px; color:var(--muted); } .rz .rzprice-meta{ font-size:13px; color:var(--muted); margin-top:10px; } .rz .rzprice-cta{ display:flex; align-items:center; justify-content:center; margin-top:22px; padding:12px; border-radius:11px; font-family:"Poppins",sans-serif; font-weight:600; font-size:14.5px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .rz .rzprice-cta-solid{ background:var(--ink); color:#fff; } .rz .rzprice-cta-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(20,22,30,.4); } .rz .rzprice-cta-ghost{ background:transparent; border:1.5px solid var(--hairline); color:var(--ink); } .rz .rzprice-cta-ghost:hover{ border-color:var(--accent); color:var(--accent); } .rz .rzprice-list{ list-style:none; margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:13px; flex:1; } .rz .rzprice-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-soft); line-height:1.4; font-family:"Inter",sans-serif; } .rz .rzchk2{ color:var(--accent); flex:none; margin-top:2px; display:flex; } .rz .rzprice-note{ text-align:center; margin-top:28px; font-size:13px; color:var(--muted); } /* custom tier — standalone banner below the 3 main plans */ .rz .rzprice-custom{ margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:36px; background:linear-gradient(155deg, var(--accent-wash), var(--surface)); border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--hairline)); border-radius:20px; padding:34px 40px; flex-wrap:wrap; } .rz .rzprice-custom-text{ flex:1 1 380px; } .rz .rzprice-custom-text h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); } .rz .rzprice-custom-text p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-top:8px; max-width:640px; } .rz .rzprice-custom-cta{ flex:none; display:flex; align-items:center; gap:20px; } .rz .rzprice-custom-price{ font-family:"Poppins",sans-serif; font-weight:800; font-size:26px; color:var(--ink); } .rz .rzprice-custom .rzprice-cta{ margin-top:0; padding:13px 26px; white-space:nowrap; } .rz .rzprice-enterprise{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; } .rz .rzent-card{ position:relative; overflow:hidden; border-radius:20px; padding:34px; background:linear-gradient(155deg, var(--accent-wash), var(--surface)); border:1px solid var(--hairline); display:flex; flex-direction:column; align-items:flex-start; } .rz .rzent-card h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color:var(--ink); } .rz .rzent-card p{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; } .rz .rzent-tag{ margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); } .rz .rzent-btn{ display:inline-flex; align-items:center; margin-top:20px; padding:11px 22px; border-radius:10px; font-family:"Poppins",sans-serif; font-weight:600; font-size:14px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; } .rz .rzent-btn-solid{ background:var(--ink); color:#fff; } .rz .rzent-btn-ghost{ background:var(--surface); border:1.5px solid var(--hairline); color:var(--ink); align-self:flex-end; margin-left:auto; } .rz .rzent-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(20,22,30,.3); } @media (max-width:960px){ .rz .rzprice-grid{ grid-template-columns:1fr; } .rz .rzprice-popular{ order:-1; } .rz .rzprice-enterprise{ grid-template-columns:1fr; } .rz .rzent-btn-ghost{ align-self:flex-start; margin-left:0; } .rz .rzprice-custom{ flex-direction:column; align-items:flex-start; padding:28px 24px; } .rz .rzprice-custom-cta{ width:100%; justify-content:space-between; } } /* blue accent utilities — minor secondary color, opt-in per page */ .rz .rz-blue-ic{ background:linear-gradient(155deg,#EAF0FE,#F5F8FF) !important; color:#4f76f6 !important; } .rz .rz-blue-text{ color:#4f76f6 !important; } .rz .rz-blue-eyebrow{ color:#4f76f6 !important; } .rz .rz-blue-eyebrow::before{ background:#4f76f6 !important; } .rz .rz-blue-tile{ background:linear-gradient(155deg,#EAF0FE,#F5F8FF) !important; } .rz .rz-blue-btn{ background:#4f76f6 !important; color:#fff !important; border-color:#4f76f6 !important; } .rz .rz-blue-btn:hover{ box-shadow:0 8px 20px -8px #4f76f6 !important; } .rz .rz-blue-check{ color:#4f76f6 !important; } .rz .rz-blue-outline{ color:#4f76f6 !important; border-color:#4f76f6 !important; } .rz .rz-blue-outline:hover{ background:#4f76f6 !important; color:#fff !important; } /* contact page — split card layout, info + form */ .rz #contact .rzcontact-unified{ background: var(--surface); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: 0 24px 60px -24px rgba(27,30,38,.28); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .rz #contact .rzcu-half{ padding:44px; } .rz #contact .rzcu-info{ border-right:1px solid var(--hairline); } .rz #contact .rzcu-half h3{ font-family:"Poppins",sans-serif; font-weight:700; font-size:24px; color:var(--ink); } .rz #contact .rzcu-half > p{ color:var(--ink-soft); margin-top:10px; font-size:15px; line-height:1.6; } .rz #contact .rzcontact-info-box{ margin-top:28px; display:flex; flex-direction:column; gap:22px; } .rz #contact .info-row{ display:flex; align-items:center; gap:14px; } .rz #contact .info-row.info-row-top{ align-items:flex-start; } .rz #contact .info-ic{ flex:none; width:20px; height:20px; background:none; color:var(--accent); display:grid; place-items:center; } .rz #contact .info-row-top .info-ic{ margin-top:3px; } .rz #contact .info-text{ display:flex; flex-direction:column; gap:3px; padding-top:2px; } .rz #contact .info-text strong{ font-family:"Poppins",sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); } .rz #contact .info-text span{ color:var(--ink-soft); font-size:14px; line-height:1.55; } .rz #contact .info-text span a{ color:var(--accent); font-weight:500; } .rz #contact .rzcontact-map-photo{ margin-top:28px; height:220px; border-radius:14px; overflow:hidden; border:1px solid var(--hairline); background:var(--surface-2); } /* flatten the boxed form variant for the split-card layout above */ .rz #contact .rzform-flat{ background:none; border:none; box-shadow:none; padding:0; overflow:visible; margin-top:24px; } .rz #contact .rzform-flat::before{ display:none; } .rz #contact .rzform-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; } .rz #contact .rzform-row label{ margin-top:0 !important; } @media (max-width:900px){ .rz #contact .rzcontact-unified{ grid-template-columns:1fr; } .rz #contact .rzcu-info{ border-right:none; border-bottom:1px solid var(--hairline); } .rz #contact .rzform-row{ grid-template-columns:1fr; } } /* form success/fail messages - overriding Webflow's default grey/pink boxes here */ .rz .w-form-done{ background:#EEF7F1 !important; border:1px solid #CDEBD8; border-radius:12px; padding:16px 18px !important; margin-top:16px; text-align:left !important; } .rz .w-form-done .text-block-406{ color:#1B7A4B; font-weight:600; font-size:14.5px; } .rz .w-form-fail{ background:#FCEEEC !important; border:1px solid #F3D0CA; border-radius:12px; padding:16px 18px !important; margin-top:16px !important; } .rz .w-form-fail .text-block-407{ color:#C0392B; font-weight:600; font-size:14.5px; } .rz .rz-flat-card{ background:var(--surface) !important; } .rz .rz-blue-dashed{ border:1px dashed color-mix(in srgb, #4f76f6 30%, var(--hairline)) !important; } .rz .rzsol-btn{ background:#3A3D46 !important; } /* was accent orange, switched to dark grey per request */ /* success story cards - photo bg version used on home page bento grid */ .rz .story.story-photo{ position: relative; background-size: cover; background-position: center; border: none; } .rz .story.story-photo::after{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,12,16,.08) 0%, rgba(10,12,16,.72) 100%); } .rz .story.story-photo .st-head, .rz .story.story-photo p, .rz .story.story-photo .rzarrow{ position:relative; z-index:1; } .rz .story.story-photo .sector{ color:#fff; } .rz .story.story-photo .st-ic{ background:rgba(255,255,255,.18); color:#fff; } .rz .story.story-photo p{ color:rgba(255,255,255,.88); } .rz .story.story-photo .rzarrow{ color:rgba(255,255,255,.85); } .rz .story.story-photo:hover .rzarrow{ color:#fff; } /* 4-column responsive grid variant (used for FlexLearn's Problem section, and reusable elsewhere) */ .rz .rzwhy-grid-4col{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:1400px; margin-left:auto; margin-right:auto; } .rz .rzwhy-grid-4col .rzwhy-item{ flex:none; min-width:0; max-width:none; width:100%; } @media (max-width:900px){ .rz .rzwhy-grid-4col{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; } } @media (max-width:560px){ .rz .rzwhy-grid-4col{ grid-template-columns:1fr; max-width:420px; } } /* 2-column responsive grid variant (WavFlex Challenges section, reusable) */ .rz .rzwhy-grid-2col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin-left:auto; margin-right:auto; } @media (max-width:560px){ .rz .rzwhy-grid-2col{ grid-template-columns:1fr; max-width:420px; } } /* 3-column responsive grid for side-by-side panels that are both always visible (not tab-toggled) */ .rz .rzsol-stage-static{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; max-width:1300px; margin:0 auto; } @media (max-width:1000px){ .rz .rzsol-stage-static{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; } } @media (max-width:700px){ .rz .rzsol-stage-static{ grid-template-columns:1fr; gap:24px; max-width:420px; } } /* neutral hover shadow, for dark-grey buttons where the default orange-tinted shadow looks off */ .rz .rzbtn.rz-neutral-shadow:hover{ box-shadow:0 8px 20px -8px rgba(20,22,30,.45); } /* mega menu: short description under each product name */ .rzmega-item{ align-items:flex-start; } .rzmega-item-text{ display:flex; flex-direction:column; gap:2px; padding-top:2px; } .rzmega-desc{ font-size:12px; color:var(--muted); line-height:1.35; } /* footer social icons row */ .rz .rzfooter-social{ display:flex; gap:10px; margin-top:18px; } .rz .rzfooter-social a{ width:36px; height:36px; border-radius:9px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--ink-soft); display:grid; place-items:center; transition:background .18s ease, color .18s ease; } .rz .rzfooter-social a:hover{ background:var(--accent); color:#fff; border-color:var(--accent); } .rz .rzfooter-social svg{ width:17px; height:17px; } /* mega menu: small blue accent on a couple of product icons, matching the site-wide blue/orange balance */ .rzmega-ic-blue{ background:linear-gradient(155deg,#EAF0FE,#F5F8FF) !important; color:#4f76f6 !important; } /* video-frame: native