/* ══════════════════════════════════════════════════════════════ RISPRI LABS · HOMEPAGE EXPERIENCE LAYER (home.css) Loaded last, only on index.html, scoped to . A premium, editorial art direction for the repositioned homepage. Namespace: .hx- · does not touch shared header/footer markup, only overrides the header presentation on the home route. ══════════════════════════════════════════════════════════════ */ .home-v3 { --hx-ink: #06181a; /* deep teal-black ground */ --hx-ink-2: #0c2427; /* raised dark surface */ --hx-ink-3: #123033; /* hairlines on dark */ --hx-paper: #f4f7f6; /* cool off-white */ --hx-paper-2: #ffffff; --hx-teal: #00818a; --hx-teal-deep: #00646c; --hx-teal-bright:#37c3ca; /* teal for dark grounds */ --hx-ember: #ff6a3a; /* warm accent, used sparingly */ --hx-ink-body: #4a5f61; /* body copy on paper */ --hx-dim: #9fb7b6; /* body copy on dark */ --hx-line: #dde7e5; --hx-line-dark: rgba(255,255,255,0.12); --hx-hh: 74px; /* approx header height for hero overlap */ --hx-display: "Archivo", "Barlow", system-ui, sans-serif; --hx-body: "Inter", system-ui, sans-serif; background: var(--hx-paper); font-family: var(--hx-body); } /* the redesigned sections replace .ind-page section chrome */ .home-v3 .hx-shell { width: min(1240px, 92vw); margin-inline: auto; } /* neutralise inherited corporate typography defaults inside the new layer */ .home-v3 [class*="hx-"] :where(p, h1, h2, h3, h4, h5, blockquote, ul, li) { max-width: none; } /* ───────────────────────── header on the home route ─────────────── */ body.home-v3 .main-header--v2 { background: none !important; background-color: rgba(6,20,22,0) !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } body.home-v3 .main-header--v2::before { opacity: 0; transition: opacity .3s ease; } body.home-v3 .main-header--v2.scrolled { background-color: rgba(6,20,22,0.82) !important; border-bottom-color: rgba(255,255,255,0.10) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; box-shadow: 0 10px 40px -12px rgba(0,0,0,0.5) !important; } body.home-v3 .main-header--v2.scrolled::before { opacity: 1; } body.home-v3 .main-header--v2 .brand img { filter: brightness(0) invert(1); transition: filter .3s ease; } body.home-v3 .main-header--v2 .brand-text strong { color: #fff !important; } body.home-v3 .main-header--v2 .brand-text span { color: rgba(255,255,255,0.62) !important; } body.home-v3 .main-header--v2 .site-nav > a, body.home-v3 .main-header--v2 .nav-item > .nav-parent, body.home-v3 .main-header--v2 .header-phone { color: rgba(255,255,255,0.88) !important; } body.home-v3 .main-header--v2 .site-nav > a:hover, body.home-v3 .main-header--v2 .nav-item > .nav-parent:hover { color: #fff !important; } body.home-v3 .main-header--v2 .nav-item .dropdown-menu a { color: var(--hx-ink-body) !important; } body.home-v3 .main-header--v2 .header-store-cta { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; background: transparent !important; } body.home-v3 .main-header--v2 .header-store-cta:hover { background: rgba(255,255,255,0.1) !important; } body.home-v3 .main-header--v2 .menu-toggle { border-color: rgba(255,255,255,0.3) !important; background: rgba(255,255,255,0.08) !important; } body.home-v3 .main-header--v2 .menu-toggle span { background: #fff !important; } /* ───────────────────────── shared primitives ───────────────────── */ .hx-eyebrow { font-family: var(--hx-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hx-teal-deep); display: inline-flex; align-items: center; gap: 0.7rem; margin: 0; } .hx-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; } .hx-eyebrow--light { color: var(--hx-teal-bright); } .hx-eyebrow--plain::before { display: none; } .hx-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.6rem; font-family: var(--hx-body); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .hx-btn svg { width: 15px; height: 15px; transition: transform .2s ease; } .hx-btn:hover svg { transform: translateX(3px); } .hx-btn--primary { background: var(--hx-teal); color: #fff; } .hx-btn--primary:hover { background: var(--hx-teal-deep); transform: translateY(-2px); } .hx-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); } .hx-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); } .hx-btn--dark { background: var(--hx-ink); color: #fff; } .hx-btn--dark:hover { background: var(--hx-ink-2); transform: translateY(-2px); } .hx-btn--link { padding: 0; color: var(--hx-teal-deep); border: 0; background: none; font-weight: 600; } .hx-btn--link:hover { color: var(--hx-teal); } .hx-btn--link.is-light { color: var(--hx-teal-bright); } [data-hx-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); transition-delay: var(--d, 0s); will-change: opacity, transform; } [data-hx-reveal].is-in { opacity: 1; transform: none; } /* ═══════════════════════════ HERO ══════════════════════════════ */ .hx-hero { position: relative; margin-top: calc(-1 * var(--hx-hh)); min-height: min(940px, 100svh); display: flex; align-items: flex-end; overflow: hidden; background: var(--hx-ink); color: #fff; isolation: isolate; } .hx-hero__media { position: absolute; inset: 0; z-index: 0; } .hx-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: saturate(0.55) contrast(1.06) brightness(0.46); transform: scale(1.1); } .hx-hero__grad { position: absolute; inset: 0; z-index: 1; background: radial-gradient(130% 90% at 12% 8%, rgba(0,129,138,0.32), transparent 55%), linear-gradient(92deg, rgba(6,24,26,0.94) 0%, rgba(6,24,26,0.62) 45%, rgba(6,24,26,0.42) 75%, rgba(6,24,26,0.6) 100%), linear-gradient(180deg, rgba(6,24,26,0.6) 0%, rgba(6,24,26,0.32) 32%, rgba(6,24,26,0.85) 80%, var(--hx-ink) 100%); } .hx-hero__canvas { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0.55; pointer-events: none; } .hx-hero__inner { position: relative; z-index: 3; width: 100%; padding-top: calc(var(--hx-hh) + clamp(2rem, 9vh, 7rem)); padding-bottom: clamp(2.4rem, 7vh, 4.5rem); } .hx-hero__eyebrow { flex-wrap: wrap; } .hx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: end; } .hx-hero__eyebrow { margin-bottom: 1.6rem; color: rgba(255,255,255,0.72); } .hx-hero__eyebrow::before { background: var(--hx-teal-bright); opacity: 1; } .hx-hero__title { font-family: var(--hx-display); font-weight: 800; font-size: clamp(2.6rem, 5.6vw, 4.7rem); line-height: 1; letter-spacing: -0.03em; margin: 0; text-wrap: balance; color: #fff; } .hx-hero__title em { display: block; font-style: normal; color: var(--hx-teal-bright); } .hx-hero__sub { margin: 1.7rem 0 0; font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 46ch; } .hx-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } .hx-hero__aside { align-self: end; border-left: 1px solid var(--hx-line-dark); padding-left: clamp(1.2rem, 2vw, 2rem); } .hx-hero__stats { display: grid; gap: 1.4rem; } .hx-stat__n { font-family: var(--hx-display); font-weight: 700; font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; } .hx-stat__l { display: block; margin-top: 0.35rem; font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); } .hx-hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .hx-hero__scroll span { width: 1px; height: 42px; background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent); animation: hxScroll 2.4s ease-in-out infinite; } @keyframes hxScroll { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } @media (min-width: 900px) { .hx-hero__grid { grid-template-columns: minmax(0, 1.85fr) minmax(200px, 0.78fr); } .hx-hero__stats { grid-template-columns: 1fr 1fr; gap: 1.7rem 1.4rem; } } /* hero entrance */ .hx-hero__eyebrow, .hx-hero__title, .hx-hero__sub, .hx-hero__cta, .hx-hero__aside { opacity: 0; transform: translateY(22px); } .hx-hero.is-ready .hx-hero__eyebrow { animation: hxRise .8s cubic-bezier(.2,.6,.2,1) .05s forwards; } .hx-hero.is-ready .hx-hero__title { animation: hxRise .9s cubic-bezier(.2,.6,.2,1) .14s forwards; } .hx-hero.is-ready .hx-hero__sub { animation: hxRise .9s cubic-bezier(.2,.6,.2,1) .26s forwards; } .hx-hero.is-ready .hx-hero__cta { animation: hxRise .9s cubic-bezier(.2,.6,.2,1) .36s forwards; } .hx-hero.is-ready .hx-hero__aside { animation: hxRise .9s cubic-bezier(.2,.6,.2,1) .46s forwards; } @keyframes hxRise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hx-hero__eyebrow, .hx-hero__title, .hx-hero__sub, .hx-hero__cta, .hx-hero__aside { opacity: 1; transform: none; animation: none; } } /* ═══════════════════════ CLIENT / TRUST WALL ══════════════════════ */ .hx-logos { background: var(--hx-paper); padding: clamp(3.5rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--hx-line); } .hx-logos__grid-wrap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .hx-logos__lead { font-family: var(--hx-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--hx-ink); margin: 0.9rem 0 0; max-width: 20ch; } .hx-logos__note { margin: 1rem 0 0; } .hx-logos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); } .hx-logos__grid img { width: 100%; height: 96px; object-fit: contain; padding: 1.3rem 1.5rem; background: var(--hx-paper-2); filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: 0.66; transition: opacity .3s ease, filter .3s ease; } .hx-logos__grid img:hover { filter: grayscale(0); mix-blend-mode: normal; opacity: 1; } @media (min-width: 820px) { .hx-logos__grid-wrap { grid-template-columns: 0.85fr 1.5fr; } .hx-logos__grid { grid-template-columns: repeat(4, 1fr); } } /* ═══════════════════════════ THE SHIFT ═══════════════════════════ */ .hx-shift { position: relative; background: var(--hx-ink); color: #fff; overflow: hidden; isolation: isolate; padding: clamp(4.5rem, 10vw, 9rem) 0; } .hx-shift__media { position: absolute; inset: 0; z-index: 0; } .hx-shift__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.35) brightness(0.32) contrast(1.1); transform: scale(1.14); } .hx-shift__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 80% 15%, rgba(0,129,138,0.28), transparent 60%), linear-gradient(180deg, rgba(6,24,26,0.82), rgba(6,24,26,0.94)); } .hx-shift__inner { position: relative; z-index: 1; } .hx-shift__statement { font-family: var(--hx-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.1; letter-spacing: -0.026em; margin: 1.6rem 0 0; max-width: 26ch; text-wrap: balance; color: rgba(255,255,255,0.94); } .hx-shift__statement b { color: var(--hx-teal-bright); font-weight: 700; } .hx-shift__lede { margin: 1.6rem 0 0; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; } .hx-figures { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hx-line-dark); border-top: 1px solid var(--hx-line-dark); border-left: 1px solid var(--hx-line-dark); } .hx-figure { background: var(--hx-ink); padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.5vw, 2rem); } .hx-figure__n { font-family: var(--hx-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; display: block; } .hx-figure__n .u { font-size: 0.4em; font-weight: 600; color: var(--hx-teal-bright); letter-spacing: 0; } .hx-figure__l { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.6); max-width: 26ch; } .hx-source { margin: 1.6rem 0 0; font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.42); max-width: 60ch; } .hx-source em { font-style: italic; color: rgba(255,255,255,0.6); } @media (min-width: 820px) { .hx-figures { grid-template-columns: repeat(4, 1fr); } } /* ═══════════════════════════ APPROACH ═══════════════════════════ */ .hx-approach { background: var(--hx-paper); padding: clamp(4.5rem, 10vw, 9rem) 0; } .hx-approach__head { display: grid; gap: 1.4rem; max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); } .hx-approach__head h2 { font-family: var(--hx-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; color: var(--hx-ink); margin: 0; text-wrap: balance; } .hx-approach__head p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--hx-ink-body); max-width: 50ch; } .hx-pillars { display: grid; gap: clamp(3rem, 6vw, 5rem); } .hx-pillar { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: center; } .hx-pillar__media { position: relative; border-radius: 3px; overflow: hidden; background: var(--hx-ink-2); aspect-ratio: 4 / 3; } .hx-pillar__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04) brightness(0.96); transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .5s ease; } .hx-pillar:hover .hx-pillar__media img { transform: scale(1.04); filter: saturate(1) contrast(1) brightness(1); } .hx-pillar__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,24,26,0.4)); pointer-events: none; } .hx-pillar__index { font-family: var(--hx-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; color: var(--hx-teal); font-variant-numeric: tabular-nums; } .hx-pillar__kicker { display: block; margin: 0.9rem 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-ink-body); } .hx-pillar__body h3 { font-family: var(--hx-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -0.022em; color: var(--hx-ink); margin: 0; } .hx-pillar__body p { margin: 1rem 0 0; font-size: 1rem; line-height: 1.62; color: var(--hx-ink-body); max-width: 44ch; } .hx-pillar__body .hx-btn--link { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 0.45rem; } @media (min-width: 900px) { .hx-pillar { grid-template-columns: 1fr 1fr; } .hx-pillar--flip .hx-pillar__media { order: 2; } } .hx-subrow { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--hx-line); display: grid; gap: clamp(2rem, 4vw, 3rem); } .hx-mini__kicker { font-family: var(--hx-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--hx-teal); } .hx-mini h4 { font-family: var(--hx-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -0.015em; color: var(--hx-ink); margin: 0.55rem 0 0; } .hx-mini p { margin: 0.55rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--hx-ink-body); max-width: 40ch; } .hx-mini a { color: var(--hx-teal-deep); font-weight: 600; text-decoration: none; } .hx-mini a:hover { color: var(--hx-teal); } @media (min-width: 760px) { .hx-subrow { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════ TRACK RECORD ═════════════════════════ */ .hx-track { background: var(--hx-paper-2); padding: clamp(4.5rem, 10vw, 9rem) 0; border-top: 1px solid var(--hx-line); } .hx-track__head { max-width: 44rem; margin-bottom: clamp(2.8rem, 5vw, 4rem); } .hx-track__head h2 { font-family: var(--hx-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.08; letter-spacing: -0.028em; color: var(--hx-ink); margin: 1.4rem 0 0; text-wrap: balance; } .hx-track__grid { display: grid; gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .hx-segment { background: var(--hx-paper-2); padding: clamp(1.5rem, 3vw, 2.2rem); } .hx-segment h5 { font-family: var(--hx-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-teal-deep); margin: 0 0 0.7rem; } .hx-segment p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--hx-ink); } @media (min-width: 720px) { .hx-track__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .hx-track__grid { grid-template-columns: repeat(4, 1fr); } } .hx-quote { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem); background: var(--hx-ink); color: #fff; border-radius: 3px; } .hx-quote blockquote { font-family: var(--hx-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.75rem); line-height: 1.32; letter-spacing: -0.018em; margin: 0; max-width: 34ch; text-wrap: balance; } .hx-quote figcaption { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: rgba(255,255,255,0.62); } .hx-quote figcaption b { color: #fff; font-weight: 600; } .hx-quote__avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--hx-teal); display: grid; place-items: center; font-family: var(--hx-display); font-weight: 700; font-size: 0.9rem; color: #fff; flex: none; } @media (min-width: 820px) { .hx-quote { grid-template-columns: 1.4fr 1fr; align-items: center; } .hx-quote figcaption { justify-content: flex-end; } } /* ══════════════════════════ CLOSING CTA ══════════════════════════ */ .hx-cta { position: relative; background: var(--hx-ink); color: #fff; overflow: hidden; isolation: isolate; padding: clamp(5rem, 12vw, 10rem) 0; } .hx-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 100% at 100% 100%, rgba(0,129,138,0.4), transparent 60%), radial-gradient(50% 80% at 0% 0%, rgba(0,129,138,0.18), transparent 55%); } .hx-cta__inner { position: relative; z-index: 1; max-width: 40rem; } .hx-cta h2 { font-family: var(--hx-display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.03; letter-spacing: -0.032em; margin: 1.5rem 0 0; text-wrap: balance; color: #fff; } .hx-cta p { margin: 1.4rem 0 0; font-size: 1.06rem; line-height: 1.55; color: rgba(255,255,255,0.76); max-width: 44ch; } .hx-cta__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; } .hx-cta__phone { font-family: var(--hx-display); font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; letter-spacing: -0.01em; } .hx-cta__phone:hover { color: var(--hx-teal-bright); } /* ─────────────────── calm the floating widgets on home ──────────── */ body.home-v3 .wa-tooltip { opacity: 0; transform: translateX(10px); transition: opacity .25s ease, transform .25s ease; } body.home-v3 .whatsapp-float-btn:hover .wa-tooltip { opacity: 1; transform: translateX(0); } body.home-v3 .wa-icon-ring { width: 52px; height: 52px; animation: waPulse 3s infinite; } /* ───────────────────────── reduced motion ──────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-hx-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .hx-hero__media img, .hx-shift__media img { transform: scale(1.02); } .hx-hero__scroll span { animation: none; } body.home-v3 .wa-icon-ring { animation: none; } }