/* ============================================================ Recursivitum — site.css Site layer on top of the design system (tokens.css + neumorphism.css). Full-neumorphism skin. Trilingual ES/EN/PT via [data-lang] on . ============================================================ */ /* ---------- Trilingual visibility ---------- */ .lang { display: none; } html[data-lang="es"] .lang-es, html[data-lang="en"] .lang-en, html[data-lang="pt"] .lang-pt { display: block; } /* inline i18n spans (nav, buttons, footer) */ .i { display: none; } html[data-lang="es"] .i-es, html[data-lang="en"] .i-en, html[data-lang="pt"] .i-pt { display: inline; } /* ---------- Base / canvas ---------- */ html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--rx-font-text); background: var(--neu-bg); color: var(--neu-text); } img { max-width: 100%; } h1, h2, h3, h4 { font-family: var(--rx-font-display); color: var(--neu-text); text-wrap: balance; } p { margin: 0; } a.plain { color: inherit; text-decoration: none; } /* ---------- Layout ---------- */ .wrap { max-width: var(--rx-container); margin-inline: auto; padding-inline: var(--rx-gutter); } .section { padding-block: var(--rx-section-y); } .section--tight { padding-block: clamp(44px, 5vw, 72px); } .stack { display: flex; flex-direction: column; } .grid { display: grid; } .center { text-align: center; } /* ---------- Section intro rhythm: eyebrow → heading → lead ---------- */ .eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--neu-accent); margin: 0 0 16px; } .h-display { font-weight: 700; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.1; letter-spacing: -.02em; margin: 0; } .h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.25; letter-spacing: -.015em; margin: 0; } .h3 { font-weight: 700; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; margin: 0; } .lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--neu-text-2); max-width: 58ch; } .body { font-size: 18px; line-height: 1.65; color: var(--neu-text-2); max-width: 64ch; } .muted { color: var(--neu-text-3); } /* ---------- Top bar (glass) : language + theme + nav ---------- */ .rx-topbar__logo { height: 32px; } .langsw { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; } .langsw button { background: none; border: none; cursor: pointer; padding: 4px 6px; font: inherit; color: var(--neu-text-3); border-radius: 8px; } .langsw button.on { color: var(--rx-steel); font-weight: 800; } .langsw .sep { color: #C6CFE2; } .navlinks { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .navlinks a { font-size: 15px; font-weight: 600; } @media (max-width: 720px) { .navlinks .hide-sm { display: none; } } /* ---------- Buttons row ---------- */ .btns { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Checklist ---------- */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .checks.two { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .checks li { font-size: 16px; color: var(--neu-text-2); display: flex; gap: 9px; align-items: flex-start; } .checks li::before { content: "✓"; color: var(--neu-accent); font-weight: 800; } .arrows li::before { content: "→"; } /* ---------- Numbered offer / step chip ---------- */ .numchip { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-raised-md); color: var(--neu-accent); font-family: var(--rx-font-display); font-weight: 700; font-size: 18px; flex: none; } /* ---------- Split (two-up) ---------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; } .cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } /* ---------- Result cards (loss / gain) — stay flat ---------- */ .res { border-radius: 16px; padding: 16px 18px; } .res--loss { background: var(--rx-danger-bg); } .res--gain { background: var(--rx-success-bg); } .res .k { font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .res--loss .k { color: var(--rx-danger); } .res--gain .k { color: var(--rx-success); } .res .v { font-family: var(--rx-font-display); font-weight: 700; font-size: 26px; } .res--loss .v { color: var(--rx-danger); } .res--gain .v { color: var(--rx-success); } /* ---------- Lead-magnet form ---------- */ .form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; } .form label { font-size: 15px; font-weight: 600; color: var(--neu-text-2); } .formmsg { display: none; } .formmsg.on { display: block; } /* ---------- Client wall ---------- */ .wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .wall .cell { background: #E4E9F4; border-radius: 16px; box-shadow: var(--neu-raised-sm); display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 18px; } html[data-theme="dark"] .wall .cell { background: #E4E9F4; } /* keep client logos on light plate */ .wall .cell img { max-height: 48px; object-fit: contain; } /* ---------- Footer ---------- */ .foot { padding-block: clamp(40px, 5vw, 64px); } .foot a { font-size: 15px; } .foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; } .foot .lbl { font-family: var(--rx-font-display); font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--neu-text-3); margin: 0 0 12px; } .foot .foot__links { display: flex; flex-direction: column; gap: 8px; } .hr { height: 1px; background: var(--neu-shadow-dark); opacity: .4; border: 0; margin: 32px 0; } /* ---------- Service index cards (home) ---------- */ .svc { text-decoration: none; color: inherit; display: block; } .svc .neu-card { transition: box-shadow .22s var(--rx-ease), transform .22s var(--rx-ease); height: 100%; box-sizing: border-box; } .svc:hover .neu-card { transform: translateY(-2px); box-shadow: var(--neu-raised-lg); } .svc:focus-visible { outline: 2px solid var(--neu-accent); outline-offset: 4px; border-radius: 20px; } /* ---------- Breadcrumb ---------- */ .crumb { font-size: 15px; color: var(--neu-text-3); } .crumb a { color: var(--neu-text-3); } .crumb a:hover { color: var(--neu-accent); } @media (prefers-reduced-motion: reduce) { .svc:hover .neu-card { transform: none; } } /* ---------- Photography (tasteful, brand-unified) ---------- */ .photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--neu-raised-lg); background: var(--neu-bg); } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* navy duotone overlay so any photo harmonizes with the palette */ .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(36,42,86,.22), rgba(34,63,97,.48)); mix-blend-mode: multiply; } .photo--hero { aspect-ratio: 4 / 5; } .photo--wide { aspect-ratio: 16 / 10; } .hero-split { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .photo--hero { aspect-ratio: 16 / 10; } } /* Full-width dark image band with brand line */ .imgband { position: relative; overflow: hidden; border-radius: 26px; margin-inline: auto; box-shadow: var(--neu-raised-lg); } .imgband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .imgband::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(30,36,74,.95) 0%, rgba(34,63,97,.9) 60%, rgba(34,63,97,.82) 100%); } .imgband__in { position: relative; z-index: 2; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 60px); } /* ---------- Success-case cards (white logo tiles → 3D tilt + reveal) ---------- */ .cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; perspective: 1200px; } .case-card { position: relative; height: 180px; border-radius: 20px; cursor: pointer; overflow: hidden; background: #FFFFFF; box-shadow: var(--neu-raised-lg); outline: none; transform-style: preserve-3d; transform: rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg)); transition: transform .18s ease, box-shadow .3s ease; } .case-card:focus-visible { outline: 2px solid var(--neu-accent); outline-offset: 3px; } /* default: logo on clean white */ .case-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 26px; background: #FFFFFF; transition: opacity .4s ease, transform .4s ease; } .case-logo img { max-height: 56px; max-width: 80%; object-fit: contain; } .case-hint { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--neu-text-3); transition: opacity .3s ease; z-index: 3; } /* reveal: navy card with teal accents */ .case-reveal { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px; opacity: 0; transition: opacity .45s ease; z-index: 2; background: linear-gradient(45deg, #242A56, #223F61); border: 1.5px solid rgba(105,171,193,.28); } .case-tag { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #84D0E9; } .case-title { font-family: var(--rx-font-display); font-weight: 800; font-size: 21px; line-height: 1.3; color: #79C5DE; } .case-desc { font-size: 15.5px; line-height: 1.5; color: #C9D2EA; } /* cyber flourishes (brand teal) */ .case-glow { position: absolute; width: 130px; height: 130px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(105,171,193,.4) 0%, rgba(105,171,193,0) 70%); filter: blur(14px); opacity: 0; transition: opacity .4s ease; } .case-glow.g1 { top: -34px; left: -24px; } .case-glow.g2 { bottom: -34px; right: -14px; } .case-corners span { position: absolute; width: 14px; height: 14px; border: 2px solid rgba(132,208,233,.6); z-index: 3; opacity: 0; transition: opacity .4s ease; } .case-corners span:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .case-corners span:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; } .case-corners span:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; } .case-corners span:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; } .case-scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: linear-gradient(to bottom, transparent, rgba(105,171,193,.14), transparent); transform: translateY(-100%); } /* active states: hover OR .is-open (tap) */ .case-card:hover .case-logo, .case-card.is-open .case-logo { opacity: 0; transform: scale(.9); } .case-card:hover .case-hint, .case-card.is-open .case-hint { opacity: 0; } .case-card:hover .case-reveal, .case-card.is-open .case-reveal { opacity: 1; } .case-card:hover .case-glow, .case-card.is-open .case-glow { opacity: 1; } .case-card:hover .case-corners span, .case-card.is-open .case-corners span { opacity: 1; } .case-card:hover .case-scan, .case-card.is-open .case-scan { opacity: 1; animation: caseScan 2.2s linear infinite; } @keyframes caseScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .case-card { transition: box-shadow .3s ease; transform: none !important; } .case-scan { animation: none; } } /* Impeccable: prevent cramped-padding on content containers */ .neu-card, .rx-card, .rx-glow-card__inner { padding: clamp(20px, 3vw, 32px) !important; }