/* =========================================================
XTECH — CENTRO DE RECURSOS
Arquivo: xtech-recursos.css
Template: page-recursos.php
========================================================= */
/* =========================================================
VARIÁVEIS
========================================================= */
:root {
--xr-navy-950: #061325;
--xr-navy-900: #091a30;
--xr-navy-850: #0c213b;
--xr-navy-800: #102a49;
--xr-blue-800: #064aaf;
--xr-blue-700: #075fd4;
--xr-blue-600: #0874e8;
--xr-blue-500: #1688f8;
--xr-blue-300: #68b8ff;
--xr-blue-100: #dcecff;
--xr-blue-050: #f1f7ff;
--xr-orange-700: #b45309;
--xr-orange-600: #d97706;
--xr-orange-100: #ffedd5;
--xr-orange-050: #fff7ed;
--xr-gray-950: #101828;
--xr-gray-900: #182230;
--xr-gray-800: #253349;
--xr-gray-700: #344054;
--xr-gray-600: #475467;
--xr-gray-500: #667085;
--xr-gray-400: #98a2b3;
--xr-gray-300: #d0d5dd;
--xr-gray-200: #e4e7ec;
--xr-gray-100: #f2f4f7;
--xr-gray-050: #f8fafc;
--xr-white: #ffffff;
--xr-container: 1180px;
--xr-radius-xs: 8px;
--xr-radius-sm: 10px;
--xr-radius-md: 16px;
--xr-radius-lg: 24px;
--xr-radius-xl: 32px;
--xr-shadow-xs: 0 4px 15px rgba(15, 37, 63, 0.05);
--xr-shadow-sm: 0 8px 24px rgba(15, 37, 63, 0.08);
--xr-shadow-md: 0 18px 50px rgba(15, 37, 63, 0.12);
--xr-shadow-lg: 0 30px 80px rgba(4, 19, 40, 0.22);
}
/* =========================================================
CORREÇÕES GERAIS DO TEMA NANOSOFT
========================================================= */
/*
* Remove o título padrão da página:
*
*
*/
body.page-template-page-recursos .content-header,
body.page-template-page-recursos .content-header-center,
body.page-template-page-recursos .content-header-inner,
body.page-template-page-recursos .page-title-wrap,
body.page-template-page-recursos .page-title,
body.page-template-page-recursos .page-title-inner {
display: none !important;
}
/*
* Remove o widget inferior padrão:
*
*
* ...
*
*/
body.page-template-page-recursos .content-bottom-widgets,
body.page-template-page-recursos .content-bottom-inner,
body.page-template-page-recursos .content-bottom-aside-wrap,
body.page-template-page-recursos .content-bottom-aside-wrap aside,
body.page-template-page-recursos .content-bottom-widgets #text-6 {
display: none !important;
}
/*
* Evita espaçamento residual gerado pelo bloco inferior.
*/
body.page-template-page-recursos .content-bottom-widgets + *,
body.page-template-page-recursos .content-bottom-widgets:empty {
margin: 0 !important;
padding: 0 !important;
}
/*
* Libera a largura dos containers principais do Nanosoft.
*/
body.page-template-page-recursos .site-content,
body.page-template-page-recursos .content,
body.page-template-page-recursos .content-wrap,
body.page-template-page-recursos .content-body,
body.page-template-page-recursos .content-inner,
body.page-template-page-recursos .main-content,
body.page-template-page-recursos .main-content-inner,
body.page-template-page-recursos .content-container,
body.page-template-page-recursos .content-area,
body.page-template-page-recursos .site-main {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
/*
* Remove espaçamentos verticais do container principal.
*/
body.page-template-page-recursos .content-body,
body.page-template-page-recursos .content-inner,
body.page-template-page-recursos .site-main {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*
* O .wrap do tema não deve ser alterado globalmente.
* A correção fica limitada aos wrappers diretos do conteúdo.
*/
body.page-template-page-recursos .content > .wrap,
body.page-template-page-recursos .content-body > .wrap,
body.page-template-page-recursos .content-inner > .wrap,
body.page-template-page-recursos .main-content > .wrap,
body.page-template-page-recursos .site-main > .wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Evita rolagem horizontal provocada pelas seções full width.
*/
html {
overflow-x: hidden;
}
body.page-template-page-recursos {
overflow-x: hidden;
}
body.page-template-page-recursos #page,
body.page-template-page-recursos .site,
body.page-template-page-recursos .site-content {
overflow-x: clip;
}
/* =========================================================
RESET LOCAL DA PÁGINA
========================================================= */
.xr-resources-page,
.xr-resources-page *,
.xr-resources-page *::before,
.xr-resources-page *::after {
box-sizing: border-box;
}
.xr-resources-page {
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
overflow: visible;
background: var(--xr-white);
color: var(--xr-gray-950);
font-family: Inter, Arial, Helvetica, sans-serif;
}
.xr-resources-page a {
text-decoration: none;
}
.xr-resources-page img {
display: block;
max-width: 100%;
}
.xr-resources-page button,
.xr-resources-page input {
font: inherit;
}
/* =========================================================
CONTAINER INTERNO
========================================================= */
.xr-container {
position: relative;
width: min(calc(100% - 64px), var(--xr-container));
max-width: var(--xr-container);
margin-right: auto;
margin-left: auto;
}
/* =========================================================
INTEGRAÇÃO COM O TEMA NANOSOFT
========================================================= */
/*
* Remove o título padrão da página Recursos.
*/
body.xtech-recursos-active .content-header,
body.xtech-recursos-active .content-header-center,
body.xtech-recursos-active .content-header-inner,
body.xtech-recursos-active .page-title-wrap,
body.xtech-recursos-active .page-title,
body.xtech-recursos-active .page-title-inner {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/*
* Remove o formulário/widget inferior padrão do tema.
*/
body.xtech-recursos-active .content-bottom-widgets,
body.xtech-recursos-active .content-bottom-inner,
body.xtech-recursos-active .content-bottom-aside-wrap,
body.xtech-recursos-active .content-bottom-aside-wrap aside,
body.xtech-recursos-active .content-bottom-widgets #text-6 {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/*
* Remove sidebar e limitações da área principal.
*/
body.xtech-recursos-active .content-sidebar,
body.xtech-recursos-active .sidebar {
display: none !important;
}
body.xtech-recursos-active .site-content,
body.xtech-recursos-active .content,
body.xtech-recursos-active .content-wrap,
body.xtech-recursos-active .content-body,
body.xtech-recursos-active .content-inner,
body.xtech-recursos-active .main-content,
body.xtech-recursos-active .main-content-inner,
body.xtech-recursos-active .content-container,
body.xtech-recursos-active .content-area,
body.xtech-recursos-active .site-main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
/*
* Containers .wrap usados diretamente pelo conteúdo.
*/
body.xtech-recursos-active .site-content > .wrap,
body.xtech-recursos-active .content > .wrap,
body.xtech-recursos-active .content-wrap > .wrap,
body.xtech-recursos-active .content-body > .wrap,
body.xtech-recursos-active .content-inner > .wrap,
body.xtech-recursos-active .main-content > .wrap,
body.xtech-recursos-active .main-content-inner > .wrap,
body.xtech-recursos-active .content-area > .wrap,
body.xtech-recursos-active .site-main > .wrap {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Remove espaçamento acima e abaixo da página.
*/
body.xtech-recursos-active .content-body,
body.xtech-recursos-active .content-inner,
body.xtech-recursos-active .site-main,
body.xtech-recursos-active .main-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*
* Página Recursos.
*/
body.xtech-recursos-active .xr-resources-page {
position: relative;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
}
/* =========================================================
FUNDOS EM LARGURA TOTAL
========================================================= */
/*
* A seção permanece dentro da estrutura do tema,
* mas o fundo é projetado para toda a largura da tela.
*/
body.xtech-recursos-active .xr-hero,
body.xtech-recursos-active .xr-resource-portals,
body.xtech-recursos-active .xr-featured-section,
body.xtech-recursos-active .xr-technologies,
body.xtech-recursos-active .xr-subjects,
body.xtech-recursos-active .xr-recent-content,
body.xtech-recursos-active .xr-final-cta {
position: relative;
width: 100%;
max-width: none;
margin-right: 0;
margin-left: 0;
}
/*
* Hero: fundo externo azul-marinho.
* O gradiente original continua aplicado dentro da seção.
*/
body.xtech-recursos-active .xr-hero {
box-shadow:
0 0 0 100vmax var(--xr-navy-950);
clip-path:
inset(0 -100vmax);
}
/*
* Área Academy e Blog.
*/
body.xtech-recursos-active .xr-resource-portals {
box-shadow:
0 0 0 100vmax var(--xr-white);
clip-path:
inset(0 -100vmax);
}
/*
* Conteúdo em destaque.
*/
body.xtech-recursos-active .xr-featured-section {
box-shadow:
0 0 0 100vmax var(--xr-gray-050);
clip-path:
inset(0 -100vmax);
}
/*
* Tecnologias.
*/
body.xtech-recursos-active .xr-technologies {
box-shadow:
0 0 0 100vmax var(--xr-white);
clip-path:
inset(0 -100vmax);
}
/*
* Assuntos.
*/
body.xtech-recursos-active .xr-subjects {
box-shadow:
0 0 0 100vmax var(--xr-gray-050);
clip-path:
inset(0 -100vmax);
}
/*
* Conteúdos recentes.
*/
body.xtech-recursos-active .xr-recent-content {
box-shadow:
0 0 0 100vmax var(--xr-white);
clip-path:
inset(0 -100vmax);
}
/*
* CTA final.
*/
body.xtech-recursos-active .xr-final-cta {
box-shadow:
0 0 0 100vmax var(--xr-white);
clip-path:
inset(0 -100vmax);
}
/*
* Impede barra horizontal.
*/
html,
body.xtech-recursos-active {
overflow-x: hidden;
}
/* =========================================================
TIPOGRAFIA E TÍTULOS
========================================================= */
.xr-eyebrow,
.xr-section-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--xr-blue-600);
font-size: 12px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.xr-eyebrow::before,
.xr-section-heading__eyebrow::before {
width: 28px;
height: 2px;
flex: 0 0 28px;
border-radius: 999px;
background: currentColor;
content: "";
}
.xr-section-heading {
margin-bottom: 38px;
}
.xr-section-heading h2 {
max-width: 760px;
margin: 0;
color: var(--xr-gray-950);
font-family: Inter, Arial, sans-serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.04em;
}
.xr-section-heading p {
max-width: 670px;
margin: 18px 0 0;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.72;
}
.xr-section-heading--center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.xr-section-heading--center h2,
.xr-section-heading--center p {
margin-right: auto;
margin-left: auto;
}
.xr-section-heading--split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
gap: 70px;
align-items: end;
}
.xr-section-heading--split p {
margin: 0;
}
/* =========================================================
BOTÕES
========================================================= */
.xr-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--xr-radius-sm);
font-size: 14px;
font-weight: 750;
line-height: 1.2;
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease,
background-color 180ms ease,
color 180ms ease;
}
.xr-button:hover {
transform: translateY(-2px);
}
.xr-button--primary {
border-color: var(--xr-blue-600);
background: var(--xr-blue-600);
color: var(--xr-white);
box-shadow: 0 12px 28px rgba(8, 116, 232, 0.25);
}
.xr-button--primary:hover {
border-color: var(--xr-blue-500);
background: var(--xr-blue-500);
color: var(--xr-white);
box-shadow: 0 16px 34px rgba(8, 116, 232, 0.32);
}
.xr-button--secondary {
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.08);
color: var(--xr-white);
backdrop-filter: blur(12px);
}
.xr-button--secondary:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
color: var(--xr-white);
}
.xr-button--secondary-dark {
border-color: var(--xr-gray-300);
background: var(--xr-white);
color: var(--xr-gray-800);
}
.xr-button--secondary-dark:hover {
border-color: var(--xr-blue-500);
color: var(--xr-blue-700);
box-shadow: var(--xr-shadow-sm);
}
.xr-button--light {
position: relative;
z-index: 3;
flex-shrink: 0;
border-color: var(--xr-white);
background: var(--xr-white);
color: var(--xr-navy-900);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.xr-button--light:hover {
background: var(--xr-blue-050);
color: var(--xr-blue-700);
}
/* =========================================================
HERO
========================================================= */
.xr-hero {
position: relative;
padding: 104px 0 110px;
overflow: hidden;
background:
radial-gradient(
circle at 80% 32%,
rgba(15, 132, 255, 0.27),
transparent 27%
),
radial-gradient(
circle at 62% 110%,
rgba(0, 93, 214, 0.27),
transparent 35%
),
linear-gradient(
132deg,
var(--xr-navy-950) 0%,
var(--xr-navy-900) 52%,
#0a2444 100%
);
}
.xr-hero::before {
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.027) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.027) 1px,
transparent 1px
);
background-size: 64px 64px;
content: "";
pointer-events: none;
mask-image: linear-gradient(
to right,
transparent 5%,
#000 42%,
#000 100%
);
}
.xr-hero::after {
position: absolute;
right: -180px;
bottom: -300px;
width: 700px;
height: 700px;
border: 1px solid rgba(62, 160, 255, 0.14);
border-radius: 50%;
content: "";
pointer-events: none;
}
.xr-hero__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.07fr) minmax(370px, 0.93fr);
gap: 80px;
align-items: center;
}
.xr-hero__content {
max-width: 720px;
}
.xr-hero .xr-eyebrow {
color: #6fb9ff;
}
.xr-hero__title {
max-width: 760px;
margin: 0;
color: var(--xr-white);
font-family: Inter, Arial, sans-serif;
font-size: clamp(44px, 5.7vw, 72px);
font-weight: 700;
line-height: 0.99;
letter-spacing: -0.055em;
}
.xr-hero__subtitle {
max-width: 680px;
margin: 26px 0 0;
color: rgba(255, 255, 255, 0.77);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(18px, 2vw, 21px);
line-height: 1.72;
}
.xr-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
/* =========================================================
BUSCA DO HERO
========================================================= */
.xr-search {
position: relative;
display: flex;
width: min(100%, 690px);
min-height: 62px;
align-items: center;
margin-top: 34px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(16px);
}
.xr-search__icon {
display: inline-flex;
width: 48px;
height: 48px;
flex: 0 0 48px;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.68);
}
.xr-search__icon svg {
width: 21px;
height: 21px;
fill: currentColor;
}
.xr-search input {
width: 100%;
min-width: 0;
height: 48px;
padding: 0 14px 0 0;
border: 0;
outline: none;
background: transparent !important;
color: var(--xr-white) !important;
font-family: Inter, Arial, sans-serif;
font-size: 15px;
box-shadow: none !important;
-webkit-text-fill-color: var(--xr-white) !important;
}
.xr-search input::placeholder {
color: rgba(255, 255, 255, 0.56) !important;
opacity: 1;
-webkit-text-fill-color: rgba(255, 255, 255, 0.56) !important;
}
.xr-search button {
min-width: 118px;
height: 48px;
padding: 0 20px;
border: 0;
border-radius: 10px;
background: var(--xr-blue-600);
color: var(--xr-white);
cursor: pointer;
font-family: Inter, Arial, sans-serif;
font-size: 14px;
font-weight: 750;
transition:
transform 180ms ease,
background-color 180ms ease;
}
.xr-search button:hover {
transform: translateY(-1px);
background: var(--xr-blue-500);
}
/* =========================================================
VISUAL DO HERO
========================================================= */
.xr-hero__visual {
position: relative;
min-height: 480px;
}
.xr-hero-panel {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.14);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0.055)
);
color: var(--xr-white);
box-shadow: var(--xr-shadow-lg);
backdrop-filter: blur(20px);
}
.xr-hero-panel--main {
top: 84px;
left: 50%;
width: min(100%, 390px);
min-height: 270px;
padding: 30px;
border-radius: 26px;
transform: translateX(-50%) rotate(-2deg);
}
.xr-hero-panel__label {
display: block;
color: #75c0ff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
}
.xr-hero-panel__lines {
display: grid;
gap: 13px;
margin-top: 30px;
}
.xr-hero-panel__lines span {
height: 9px;
border-radius: 999px;
background:
linear-gradient(
90deg,
rgba(82, 177, 255, 0.9),
rgba(255, 255, 255, 0.11)
);
}
.xr-hero-panel__lines span:nth-child(1) {
width: 88%;
}
.xr-hero-panel__lines span:nth-child(2) {
width: 67%;
}
.xr-hero-panel__lines span:nth-child(3) {
width: 76%;
}
.xr-hero-panel__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 34px;
}
.xr-hero-panel__stats div {
padding: 17px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(0, 0, 0, 0.1);
}
.xr-hero-panel__stats strong,
.xr-hero-panel__stats small {
display: block;
}
.xr-hero-panel__stats strong {
font-size: 16px;
}
.xr-hero-panel__stats small {
margin-top: 5px;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
}
.xr-hero-panel--small {
display: flex;
width: 145px;
min-height: 110px;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20px;
text-align: center;
}
.xr-hero-panel--top {
top: 6px;
right: 0;
transform: rotate(6deg);
}
.xr-hero-panel--bottom {
bottom: 10px;
left: 0;
transform: rotate(-5deg);
}
.xr-visual-icon {
margin-bottom: 9px;
color: #75c0ff;
font-size: 32px;
}
.xr-hero-panel--small small {
color: rgba(255, 255, 255, 0.74);
font-size: 11px;
font-weight: 700;
}
.xr-hero-orbit {
position: absolute;
border: 1px solid rgba(83, 178, 255, 0.18);
border-radius: 50%;
}
.xr-hero-orbit--one {
inset: 30px 5px;
}
.xr-hero-orbit--two {
inset: 84px 58px;
}
.xr-hero-dot {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: #52b1ff;
box-shadow: 0 0 22px rgba(82, 177, 255, 0.9);
}
.xr-hero-dot--one {
top: 80px;
left: 50px;
}
.xr-hero-dot--two {
top: 210px;
right: 10px;
}
.xr-hero-dot--three {
right: 80px;
bottom: 38px;
}
/* =========================================================
PORTAIS ACADEMY E BLOG
========================================================= */
.xr-resource-portals {
padding: 104px 0;
background: var(--xr-white);
}
.xr-portals-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.xr-portal-card {
position: relative;
display: flex;
min-height: 610px;
flex-direction: column;
padding: 42px;
overflow: hidden;
border: 1px solid var(--xr-gray-200);
border-radius: var(--xr-radius-lg);
background: var(--xr-white);
box-shadow: var(--xr-shadow-sm);
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
}
.xr-portal-card::after {
position: absolute;
top: -100px;
right: -90px;
width: 280px;
height: 280px;
border-radius: 50%;
content: "";
opacity: 0.12;
}
.xr-portal-card--academy::after {
background: var(--xr-blue-500);
}
.xr-portal-card--blog::after {
background: #f59e0b;
}
.xr-portal-card:hover {
transform: translateY(-5px);
border-color: rgba(8, 116, 232, 0.22);
box-shadow: var(--xr-shadow-md);
}
.xr-portal-card__icon {
position: relative;
z-index: 2;
display: inline-flex;
width: 58px;
height: 58px;
align-items: center;
justify-content: center;
margin-bottom: 30px;
border-radius: 16px;
}
.xr-portal-card--academy .xr-portal-card__icon {
background: var(--xr-blue-050);
color: var(--xr-blue-600);
}
.xr-portal-card--blog .xr-portal-card__icon {
background: var(--xr-orange-050);
color: var(--xr-orange-600);
}
.xr-portal-card__icon svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.xr-portal-card__label {
position: relative;
z-index: 2;
display: block;
margin-bottom: 14px;
color: var(--xr-gray-500);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
}
.xr-portal-card h2 {
position: relative;
z-index: 2;
max-width: 490px;
margin: 0;
color: var(--xr-gray-950);
font-size: clamp(27px, 3vw, 38px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.035em;
}
.xr-portal-card > p {
position: relative;
z-index: 2;
margin: 20px 0 0;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.7;
}
.xr-portal-card ul {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.xr-portal-card li {
position: relative;
padding-left: 22px;
color: var(--xr-gray-700);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
.xr-portal-card li::before {
position: absolute;
top: 7px;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--xr-blue-600);
content: "";
}
.xr-portal-card--blog li::before {
background: var(--xr-orange-600);
}
.xr-portal-card__latest {
position: relative;
z-index: 2;
margin-top: 30px;
padding: 18px 20px;
border: 1px solid var(--xr-gray-200);
border-radius: 13px;
background: var(--xr-gray-050);
}
.xr-portal-card__latest span {
display: block;
margin-bottom: 7px;
color: var(--xr-gray-500);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.xr-portal-card__latest a {
color: var(--xr-gray-950);
font-size: 14px;
font-weight: 700;
line-height: 1.45;
}
.xr-portal-card__latest a:hover {
color: var(--xr-blue-700);
}
.xr-portal-card__button {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: auto;
padding-top: 30px;
color: var(--xr-blue-700);
font-size: 14px;
font-weight: 800;
}
.xr-portal-card--blog .xr-portal-card__button {
color: var(--xr-orange-700);
}
.xr-portal-card__button span {
font-size: 22px;
transition: transform 180ms ease;
}
.xr-portal-card__button:hover span {
transform: translateX(5px);
}
/* =========================================================
CONTEÚDO EM DESTAQUE
========================================================= */
.xr-featured-section {
padding: 96px 0;
background: var(--xr-gray-050);
}
.xr-featured-card {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(380px, 0.84fr);
min-height: 500px;
overflow: hidden;
border: 1px solid var(--xr-gray-200);
border-radius: var(--xr-radius-lg);
background: var(--xr-white);
box-shadow: var(--xr-shadow-md);
}
.xr-featured-card__media {
position: relative;
min-height: 500px;
overflow: hidden;
background: var(--xr-gray-100);
}
.xr-featured-card__media::after {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(4, 19, 40, 0.25),
transparent 42%
);
content: "";
}
.xr-featured-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.xr-featured-card:hover .xr-featured-card__media img {
transform: scale(1.035);
}
.xr-content-type {
position: absolute;
z-index: 3;
top: 20px;
left: 20px;
display: inline-flex;
min-height: 27px;
align-items: center;
padding: 6px 11px;
border-radius: 999px;
color: var(--xr-white);
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(9px);
}
.xr-content-type.is-academy {
background: rgba(8, 116, 232, 0.94);
}
.xr-content-type.is-blog {
background: rgba(210, 112, 0, 0.94);
}
.xr-featured-card__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 54px;
}
.xr-featured-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
color: var(--xr-gray-500);
font-size: 12px;
font-weight: 650;
}
.xr-featured-card h2 {
margin: 0;
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 700;
line-height: 1.07;
letter-spacing: -0.04em;
}
.xr-featured-card h2 a {
color: var(--xr-gray-950);
}
.xr-featured-card h2 a:hover {
color: var(--xr-blue-700);
}
.xr-featured-card p {
margin: 24px 0 30px;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.72;
}
.xr-featured-card .xr-button {
align-self: flex-start;
}
/* =========================================================
TECNOLOGIAS
========================================================= */
.xr-technologies {
padding: 100px 0;
background: var(--xr-white);
}
.xr-technology-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.xr-technology-list > a {
position: relative;
display: flex;
min-height: 92px;
flex-direction: column;
justify-content: center;
padding: 20px 48px 20px 21px;
border: 1px solid var(--xr-gray-200);
border-radius: 13px;
background: var(--xr-white);
color: var(--xr-gray-950);
box-shadow: var(--xr-shadow-xs);
transition:
transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.xr-technology-list > a:hover {
transform: translateY(-3px);
border-color: rgba(8, 116, 232, 0.35);
box-shadow: var(--xr-shadow-sm);
}
.xr-technology-list span:first-child {
font-size: 14px;
font-weight: 750;
}
.xr-technology-list small {
margin-top: 6px;
color: var(--xr-gray-500);
font-size: 11px;
}
.xr-technology-list__arrow {
position: absolute;
top: 50%;
right: 18px;
color: var(--xr-blue-600);
font-size: 20px;
transform: translateY(-50%);
transition: transform 180ms ease;
}
.xr-technology-list > a:hover .xr-technology-list__arrow {
transform: translate(4px, -50%);
}
/* =========================================================
ASSUNTOS
========================================================= */
.xr-subjects {
padding: 102px 0;
background:
linear-gradient(
180deg,
var(--xr-gray-050),
var(--xr-white)
);
}
.xr-subjects-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.xr-subject-card {
display: flex;
min-height: 300px;
flex-direction: column;
padding: 30px;
border: 1px solid var(--xr-gray-200);
border-radius: var(--xr-radius-md);
background: var(--xr-white);
color: var(--xr-gray-950);
box-shadow: var(--xr-shadow-xs);
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease;
}
.xr-subject-card:hover {
transform: translateY(-5px);
border-color: rgba(8, 116, 232, 0.28);
color: var(--xr-gray-950);
box-shadow: var(--xr-shadow-md);
}
.xr-subject-card__icon {
display: inline-flex;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
margin-bottom: 24px;
border-radius: 14px;
background: var(--xr-blue-050);
color: var(--xr-blue-600);
}
.xr-subject-card__icon svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.xr-subject-card h3 {
margin: 0;
color: var(--xr-gray-950);
font-size: 21px;
font-weight: 750;
letter-spacing: -0.025em;
}
.xr-subject-card p {
margin: 14px 0 24px;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 15.5px;
line-height: 1.66;
}
.xr-subject-card__link {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: auto;
color: var(--xr-blue-700);
font-size: 13px;
font-weight: 800;
}
.xr-subject-card__link span {
font-size: 19px;
transition: transform 180ms ease;
}
.xr-subject-card:hover .xr-subject-card__link span {
transform: translateX(4px);
}
/* =========================================================
CONTEÚDOS RECENTES
========================================================= */
.xr-recent-content {
padding: 104px 0;
background: var(--xr-white);
}
.xr-content-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -6px 0 34px;
}
.xr-content-filters a {
display: inline-flex;
min-height: 40px;
align-items: center;
justify-content: center;
padding: 9px 17px;
border: 1px solid var(--xr-gray-200);
border-radius: 999px;
background: var(--xr-white);
color: var(--xr-gray-600);
font-size: 12px;
font-weight: 750;
transition:
border-color 180ms ease,
background-color 180ms ease,
color 180ms ease;
}
.xr-content-filters a:hover,
.xr-content-filters a.is-active {
border-color: var(--xr-blue-600);
background: var(--xr-blue-600);
color: var(--xr-white);
}
.xr-content-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.xr-content-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--xr-gray-200);
border-radius: var(--xr-radius-md);
background: var(--xr-white);
box-shadow: var(--xr-shadow-xs);
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease;
}
.xr-content-card:hover {
transform: translateY(-5px);
border-color: rgba(8, 116, 232, 0.25);
box-shadow: var(--xr-shadow-md);
}
.xr-content-card__media {
position: relative;
display: block;
height: 220px;
overflow: hidden;
background: var(--xr-gray-100);
}
.xr-content-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 450ms ease;
}
.xr-content-card:hover .xr-content-card__media img {
transform: scale(1.045);
}
.xr-content-card__body {
display: flex;
min-height: 315px;
flex: 1;
flex-direction: column;
padding: 25px;
}
.xr-content-card__terms {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 13px;
}
.xr-content-card__terms a,
.xr-content-card__terms span {
display: inline-flex;
padding: 5px 8px;
border-radius: 6px;
background: var(--xr-blue-050);
color: var(--xr-blue-700);
font-size: 9px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.xr-content-card__title {
margin: 0;
font-size: 20px;
font-weight: 750;
line-height: 1.28;
letter-spacing: -0.025em;
}
.xr-content-card__title a {
color: var(--xr-gray-950);
}
.xr-content-card__title a:hover {
color: var(--xr-blue-700);
}
.xr-content-card__excerpt {
margin: 15px 0 24px;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.66;
}
.xr-content-card__footer {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--xr-gray-200);
}
.xr-content-card__meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
color: var(--xr-gray-500);
font-size: 10.5px;
font-weight: 600;
}
.xr-content-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--xr-blue-700);
font-size: 12px;
font-weight: 800;
}
.xr-content-card__link span {
font-size: 17px;
transition: transform 180ms ease;
}
.xr-content-card__link:hover span {
transform: translateX(4px);
}
.xr-recent-content__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 42px;
}
/* =========================================================
ESTADO VAZIO
========================================================= */
.xr-empty-state {
display: flex;
min-height: 340px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
border: 1px solid var(--xr-gray-200);
border-radius: var(--xr-radius-lg);
background: var(--xr-gray-050);
text-align: center;
}
.xr-empty-state__icon {
display: flex;
width: 62px;
height: 62px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 50%;
background: var(--xr-blue-050);
color: var(--xr-blue-600);
}
.xr-empty-state__icon svg {
width: 27px;
height: 27px;
fill: currentColor;
}
.xr-empty-state h3 {
margin: 0;
font-size: 25px;
font-weight: 750;
}
.xr-empty-state p {
margin: 13px 0 25px;
color: var(--xr-gray-600);
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
}
/* =========================================================
CTA FINAL
========================================================= */
.xr-final-cta {
padding: 20px 0 100px;
background: var(--xr-white);
}
.xr-final-cta__box {
position: relative;
display: flex;
min-height: 330px;
align-items: center;
justify-content: space-between;
gap: 70px;
padding: 64px 70px;
overflow: hidden;
border-radius: var(--xr-radius-lg);
background:
radial-gradient(
circle at 90% 20%,
rgba(52, 159, 255, 0.28),
transparent 29%
),
linear-gradient(
130deg,
var(--xr-navy-950),
#0c2b52
);
box-shadow: var(--xr-shadow-lg);
}
.xr-final-cta__content {
position: relative;
z-index: 2;
max-width: 720px;
}
.xr-final-cta .xr-section-heading__eyebrow {
color: #6fb9ff;
}
.xr-final-cta h2 {
margin: 0;
color: var(--xr-white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.045em;
}
.xr-final-cta p {
max-width: 690px;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.72);
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.7;
}
.xr-final-cta__decoration {
position: absolute;
inset: 0;
pointer-events: none;
}
.xr-final-cta__decoration span {
position: absolute;
border: 1px solid rgba(106, 190, 255, 0.18);
border-radius: 50%;
}
.xr-final-cta__decoration span:nth-child(1) {
right: -160px;
bottom: -260px;
width: 590px;
height: 590px;
}
.xr-final-cta__decoration span:nth-child(2) {
right: -60px;
bottom: -155px;
width: 380px;
height: 380px;
}
.xr-final-cta__decoration span:nth-child(3) {
top: 30px;
right: 32%;
width: 12px;
height: 12px;
border: 0;
background: #52b1ff;
box-shadow: 0 0 22px rgba(82, 177, 255, 0.8);
}
/* =========================================================
ACESSIBILIDADE
========================================================= */
.xr-resources-page a:focus-visible,
.xr-resources-page button:focus-visible,
.xr-resources-page input:focus-visible {
outline: 3px solid #58b3ff;
outline-offset: 3px;
}
/* =========================================================
TABLET GRANDE
========================================================= */
@media (max-width: 1080px) {
.xr-hero__grid {
grid-template-columns: minmax(0, 1fr) 360px;
gap: 42px;
}
.xr-hero__visual {
min-height: 420px;
}
.xr-hero-panel--main {
width: 320px;
}
.xr-featured-card {
grid-template-columns: 1fr 0.9fr;
}
.xr-featured-card__content {
padding: 40px;
}
.xr-technology-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xr-content-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xr-subjects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.xr-container {
width: min(calc(100% - 40px), var(--xr-container));
}
.xr-hero {
padding: 82px 0 80px;
}
.xr-hero__grid {
grid-template-columns: 1fr;
}
.xr-hero__content {
max-width: 760px;
}
.xr-hero__visual {
display: none;
}
.xr-portals-grid {
grid-template-columns: 1fr;
}
.xr-portal-card {
min-height: auto;
}
.xr-featured-card {
grid-template-columns: 1fr;
}
.xr-featured-card__media {
min-height: 380px;
}
.xr-section-heading--split {
grid-template-columns: 1fr;
gap: 20px;
}
.xr-final-cta__box {
flex-direction: column;
align-items: flex-start;
gap: 34px;
padding: 54px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.xr-container {
width: min(calc(100% - 32px), var(--xr-container));
}
.xr-resource-portals,
.xr-featured-section,
.xr-technologies,
.xr-subjects,
.xr-recent-content {
padding: 76px 0;
}
.xr-hero {
padding: 68px 0 72px;
}
.xr-hero__title {
font-size: clamp(39px, 12vw, 54px);
}
.xr-hero__subtitle {
font-size: 17px;
}
.xr-search {
min-height: 58px;
}
.xr-search__icon {
width: 43px;
flex-basis: 43px;
}
.xr-search button {
min-width: 92px;
padding: 0 13px;
font-size: 12px;
}
.xr-hero__actions {
flex-direction: column;
}
.xr-hero__actions .xr-button {
width: 100%;
}
.xr-section-heading {
margin-bottom: 30px;
}
.xr-section-heading h2 {
font-size: 32px;
}
.xr-section-heading p {
font-size: 16.5px;
}
.xr-portals-grid,
.xr-content-grid,
.xr-subjects-grid,
.xr-technology-list {
grid-template-columns: 1fr;
}
.xr-portal-card {
padding: 30px;
border-radius: 19px;
}
.xr-portal-card ul {
grid-template-columns: 1fr;
}
.xr-featured-card {
border-radius: 19px;
}
.xr-featured-card__media {
min-height: 250px;
}
.xr-featured-card__content {
padding: 30px;
}
.xr-featured-card h2 {
font-size: 30px;
}
.xr-featured-card p {
font-size: 16px;
}
.xr-subject-card {
min-height: 280px;
}
.xr-content-card__media {
height: 215px;
}
.xr-content-card__body {
min-height: auto;
}
.xr-final-cta {
padding-bottom: 76px;
}
.xr-final-cta__box {
min-height: auto;
padding: 40px 28px;
border-radius: 20px;
}
.xr-final-cta h2 {
font-size: 34px;
}
.xr-final-cta p {
font-size: 16.5px;
}
.xr-final-cta .xr-button {
width: 100%;
}
}
/* =========================================================
MOBILE PEQUENO
========================================================= */
@media (max-width: 420px) {
.xr-search {
flex-wrap: wrap;
padding: 8px;
}
.xr-search__icon {
width: 38px;
flex-basis: 38px;
}
.xr-search input {
width: calc(100% - 38px);
}
.xr-search button {
width: 100%;
margin-top: 5px;
}
.xr-portal-card,
.xr-subject-card,
.xr-content-card__body {
padding-right: 23px;
padding-left: 23px;
}
.xr-content-filters {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.xr-content-filters a {
padding-right: 8px;
padding-left: 8px;
}
}