/* ================================================================== WEBBFINANCEIRO - HOME PORTAL V1 (Country Portal) Escopo: Aplica SOMENTE quando .wf-home está no ================================================================== */ /* ========== TOKENS E FUNDAMENTOS ========== */ .wf-home { /* Cores */ --wf-portal-bg: #ffffff; --wf-portal-surface: #f8fafc; --wf-portal-surface-elevated: #ffffff; --wf-portal-text: #0f172a; --wf-portal-text-muted: #64748b; --wf-portal-text-light: #94a3b8; --wf-portal-brand: #2563eb; --wf-portal-brand-hover: #1d4ed8; --wf-portal-brand-light: #3b82f6; --wf-portal-border: #e2e8f0; --wf-portal-border-light: #f1f5f9; --wf-portal-accent: #8b5cf6; --wf-portal-success: #10b981; /* Tipografia */ --wf-portal-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wf-portal-font-display: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Tamanhos de fonte fluidos */ --wf-portal-fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --wf-portal-fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --wf-portal-fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --wf-portal-fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem); --wf-portal-fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --wf-portal-fs-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem); --wf-portal-fs-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* Espaçamentos */ --wf-portal-space-xs: 0.5rem; --wf-portal-space-sm: 0.75rem; --wf-portal-space-md: 1rem; --wf-portal-space-lg: 1.5rem; --wf-portal-space-xl: 2rem; --wf-portal-space-2xl: 3rem; --wf-portal-space-3xl: 4rem; --wf-portal-space-4xl: 6rem; --wf-portal-space-5xl: 8rem; /* Radius */ --wf-portal-r-sm: 0.5rem; --wf-portal-r-md: 0.75rem; --wf-portal-r-lg: 1rem; --wf-portal-r-xl: 1.5rem; --wf-portal-r-2xl: 2rem; --wf-portal-r-full: 9999px; /* Sombras */ --wf-portal-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --wf-portal-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --wf-portal-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --wf-portal-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --wf-portal-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --wf-portal-shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3); /* Container */ --wf-portal-container: min(100% - 2rem, 1280px); --wf-portal-container-narrow: min(100% - 2rem, 960px); /* Transições */ --wf-portal-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --wf-portal-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark Mode Support */ @media (prefers-color-scheme: dark) { .wf-home { --wf-portal-bg: #0f172a; --wf-portal-surface: #1e293b; --wf-portal-surface-elevated: #334155; --wf-portal-text: #f1f5f9; --wf-portal-text-muted: #cbd5e1; --wf-portal-text-light: #94a3b8; --wf-portal-border: #334155; --wf-portal-border-light: #475569; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .wf-home *, .wf-home *::before, .wf-home *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========== RESET E BASE (escopo .wf-home) ========== */ .wf-home { font-family: var(--wf-portal-font-sans); font-size: var(--wf-portal-fs-base); line-height: 1.6; color: var(--wf-portal-text); background: var(--wf-portal-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wf-home .wf-main { padding: 0; } /* ========== CONTAINER MODERNO ========== */ .wf-home .wf-container { max-width: var(--wf-portal-container); margin-left: auto; margin-right: auto; padding-left: var(--wf-portal-space-lg); padding-right: var(--wf-portal-space-lg); } @media (min-width: 768px) { .wf-home .wf-container { padding-left: var(--wf-portal-space-xl); padding-right: var(--wf-portal-space-xl); } } /* ========== HEADER STICKY SUAVE ========== */ .wf-home .wf-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--wf-portal-border-light); transition: var(--wf-portal-transition); } @media (prefers-color-scheme: dark) { .wf-home .wf-header { background: rgba(15, 23, 42, 0.8); } } .wf-home .wf-header__inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--wf-portal-space-lg); } .wf-home .wf-logo { font-size: var(--wf-portal-fs-lg); font-weight: 700; color: var(--wf-portal-text); text-decoration: none; letter-spacing: -0.02em; transition: var(--wf-portal-transition); } .wf-home .wf-logo:hover { color: var(--wf-portal-brand); } .wf-home .wf-nav__list a { color: var(--wf-portal-text-muted); font-size: var(--wf-portal-fs-sm); font-weight: 500; padding: var(--wf-portal-space-sm) var(--wf-portal-space-md); border-radius: var(--wf-portal-r-md); transition: var(--wf-portal-transition); } .wf-home .wf-nav__list a:hover, .wf-home .wf-nav__list a:focus-visible { color: var(--wf-portal-text); background: var(--wf-portal-surface); text-decoration: none; } .wf-home .wf-nav__list a:focus-visible { outline: 2px solid var(--wf-portal-brand); outline-offset: 2px; } /* ========== HERO SECTION ========== */ .wf-home .wf-portal-hero { position: relative; padding: var(--wf-portal-space-5xl) 0 var(--wf-portal-space-4xl); background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); background-attachment: fixed; overflow: hidden; margin-bottom: 0; border-radius: 0; } .wf-home .wf-portal-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .wf-home .wf-portal-hero .wf-container { position: relative; z-index: 1; text-align: center; max-width: var(--wf-portal-container-narrow); } .wf-home .wf-portal-hero__kicker { display: inline-block; font-size: var(--wf-portal-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.95); margin-bottom: var(--wf-portal-space-lg); padding: var(--wf-portal-space-xs) var(--wf-portal-space-md); background: rgba(255, 255, 255, 0.2); border-radius: var(--wf-portal-r-full); backdrop-filter: blur(10px); } .wf-home .wf-portal-hero__title { font-size: var(--wf-portal-fs-3xl); font-weight: 800; line-height: 1.1; color: #ffffff; margin-bottom: var(--wf-portal-space-xl); letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); } .wf-home .wf-portal-hero__subtitle { font-size: var(--wf-portal-fs-lg); line-height: 1.6; color: rgba(255, 255, 255, 0.95); margin-bottom: var(--wf-portal-space-2xl); max-width: 42rem; margin-left: auto; margin-right: auto; } .wf-home .wf-portal-hero__cta { display: inline-flex; align-items: center; gap: var(--wf-portal-space-sm); padding: var(--wf-portal-space-md) var(--wf-portal-space-xl); font-size: var(--wf-portal-fs-base); font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--wf-portal-r-full); text-decoration: none; backdrop-filter: blur(10px); transition: var(--wf-portal-transition); cursor: pointer; } .wf-home .wf-portal-hero__cta:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .wf-home .wf-portal-hero__cta:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.5); outline-offset: 4px; } .wf-home .wf-portal-hero__cta::after { content: '↓'; font-size: 1.2em; transition: var(--wf-portal-transition); } .wf-home .wf-portal-hero__cta:hover::after { transform: translateY(4px); } /* ========== SEARCH SECTION ========== */ .wf-home .wf-portal-search { padding: var(--wf-portal-space-2xl) 0; background: var(--wf-portal-bg); border-bottom: 1px solid var(--wf-portal-border-light); position: sticky; top: 72px; z-index: 90; backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.95); } @media (prefers-color-scheme: dark) { .wf-home .wf-portal-search { background: rgba(15, 23, 42, 0.95); } } .wf-home .wf-portal-search__container { max-width: var(--wf-portal-container-narrow); margin: 0 auto; padding: 0 var(--wf-portal-space-lg); } @media (min-width: 768px) { .wf-home .wf-portal-search__container { padding: 0 var(--wf-portal-space-xl); } } .wf-home .wf-portal-search__input-wrapper { position: relative; max-width: 600px; margin: 0 auto; } .wf-home .wf-portal-search__input { width: 100%; padding: var(--wf-portal-space-md) var(--wf-portal-space-xl) var(--wf-portal-space-md) var(--wf-portal-space-3xl); font-size: var(--wf-portal-fs-base); font-family: var(--wf-portal-font-sans); color: var(--wf-portal-text); background: var(--wf-portal-surface); border: 2px solid var(--wf-portal-border); border-radius: var(--wf-portal-r-full); transition: var(--wf-portal-transition); outline: none; } .wf-home .wf-portal-search__input::placeholder { color: var(--wf-portal-text-muted); } .wf-home .wf-portal-search__input:focus { border-color: var(--wf-portal-brand); background: var(--wf-portal-surface-elevated); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); } .wf-home .wf-portal-search__icon { position: absolute; left: var(--wf-portal-space-lg); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--wf-portal-text-muted); pointer-events: none; } .wf-home .wf-portal-search__input:focus + .wf-portal-search__icon { color: var(--wf-portal-brand); } .wf-home .wf-portal-search__clear { position: absolute; right: var(--wf-portal-space-md); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: none; align-items: center; justify-content: center; background: var(--wf-portal-surface); border: none; border-radius: var(--wf-portal-r-full); color: var(--wf-portal-text-muted); cursor: pointer; transition: var(--wf-portal-transition); } .wf-home .wf-portal-search__clear:hover { background: var(--wf-portal-border); color: var(--wf-portal-text); } .wf-home .wf-portal-search__clear:focus-visible { outline: 2px solid var(--wf-portal-brand); outline-offset: 2px; } .wf-home .wf-portal-search__clear--visible { display: flex; } /* ========== COUNTRIES GRID ========== */ .wf-home .wf-portal-countries { padding: var(--wf-portal-space-4xl) 0; background: var(--wf-portal-bg); } .wf-home .wf-portal-countries__header { text-align: center; margin-bottom: var(--wf-portal-space-3xl); } .wf-home .wf-portal-countries__kicker { display: inline-block; font-size: var(--wf-portal-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wf-portal-brand); margin-bottom: var(--wf-portal-space-md); } .wf-home .wf-portal-countries__title { font-size: var(--wf-portal-fs-2xl); font-weight: 700; line-height: 1.2; color: var(--wf-portal-text); margin-bottom: var(--wf-portal-space-lg); letter-spacing: -0.02em; } .wf-home .wf-portal-countries__subtitle { font-size: var(--wf-portal-fs-base); color: var(--wf-portal-text-muted); max-width: 42rem; margin-left: auto; margin-right: auto; } .wf-home .wf-portal-countries__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--wf-portal-space-lg); margin-top: var(--wf-portal-space-2xl); } @media (min-width: 640px) { .wf-home .wf-portal-countries__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--wf-portal-space-xl); } } @media (min-width: 1024px) { .wf-home .wf-portal-countries__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } @media (min-width: 1280px) { .wf-home .wf-portal-countries__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1536px) { .wf-home .wf-portal-countries__grid { grid-template-columns: repeat(5, 1fr); } } /* ========== COUNTRY CARD ========== */ .wf-home .wf-portal-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wf-portal-space-md); padding: var(--wf-portal-space-xl); background: var(--wf-portal-surface-elevated); border: 2px solid var(--wf-portal-border); border-radius: var(--wf-portal-r-xl); text-decoration: none; color: var(--wf-portal-text); transition: var(--wf-portal-transition); box-shadow: var(--wf-portal-shadow-sm); position: relative; overflow: hidden; min-height: 180px; } .wf-home .wf-portal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--wf-portal-brand) 0%, var(--wf-portal-accent) 100%); opacity: 0; transition: var(--wf-portal-transition); } .wf-home .wf-portal-card > * { position: relative; z-index: 1; } .wf-home .wf-portal-card__flag { width: 64px; height: 48px; object-fit: cover; border-radius: var(--wf-portal-r-sm); border: 1px solid var(--wf-portal-border); background: var(--wf-portal-surface); box-shadow: var(--wf-portal-shadow-sm); transition: var(--wf-portal-transition); } .wf-home .wf-portal-card__name { font-size: var(--wf-portal-fs-base); font-weight: 600; color: var(--wf-portal-text); text-align: center; transition: var(--wf-portal-transition); } .wf-home .wf-portal-card__code { font-size: var(--wf-portal-fs-sm); font-weight: 500; color: var(--wf-portal-text-muted); text-transform: uppercase; letter-spacing: 0.05em; transition: var(--wf-portal-transition); } .wf-home .wf-portal-card__arrow { position: absolute; right: var(--wf-portal-space-lg); top: 50%; transform: translateY(-50%) translateX(-8px); font-size: var(--wf-portal-fs-lg); color: var(--wf-portal-text-muted); opacity: 0; transition: var(--wf-portal-transition); } .wf-home .wf-portal-card:hover { transform: translateY(-8px); box-shadow: var(--wf-portal-shadow-xl); border-color: var(--wf-portal-brand); text-decoration: none; } .wf-home .wf-portal-card:hover::before { opacity: 0.05; } .wf-home .wf-portal-card:hover .wf-portal-card__flag { transform: scale(1.1); box-shadow: var(--wf-portal-shadow-md); } .wf-home .wf-portal-card:hover .wf-portal-card__name { color: var(--wf-portal-brand); } .wf-home .wf-portal-card:hover .wf-portal-card__code { color: var(--wf-portal-brand); } .wf-home .wf-portal-card:hover .wf-portal-card__arrow { opacity: 1; transform: translateY(-50%) translateX(0); color: var(--wf-portal-brand); } .wf-home .wf-portal-card:focus-visible { outline: 3px solid var(--wf-portal-brand); outline-offset: 4px; border-color: var(--wf-portal-brand); } /* Card hidden state (for search filter) */ .wf-home .wf-portal-card--hidden { display: none; } /* ========== NO RESULTS MESSAGE ========== */ .wf-home .wf-portal-no-results { display: none; text-align: center; padding: var(--wf-portal-space-4xl) var(--wf-portal-space-lg); color: var(--wf-portal-text-muted); } .wf-home .wf-portal-no-results--visible { display: block; } .wf-home .wf-portal-no-results__icon { font-size: 3rem; margin-bottom: var(--wf-portal-space-lg); opacity: 0.5; } .wf-home .wf-portal-no-results__text { font-size: var(--wf-portal-fs-lg); margin-bottom: var(--wf-portal-space-sm); } .wf-home .wf-portal-no-results__hint { font-size: var(--wf-portal-fs-sm); color: var(--wf-portal-text-light); } /* ========== FOOTER ELEGANTE ========== */ .wf-home .wf-footer { background: var(--wf-portal-surface); border-top: 1px solid var(--wf-portal-border); padding: var(--wf-portal-space-3xl) 0 var(--wf-portal-space-xl); margin-top: var(--wf-portal-space-4xl); } .wf-home .wf-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wf-portal-space-xl); align-items: start; } .wf-home .wf-footer__col strong { display: block; font-size: var(--wf-portal-fs-lg); font-weight: 700; color: var(--wf-portal-text); margin-bottom: var(--wf-portal-space-md); } .wf-home .wf-footer__col .wf-muted { font-size: var(--wf-portal-fs-sm); color: var(--wf-portal-text-muted); line-height: 1.6; } .wf-home .wf-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wf-portal-space-sm); } .wf-home .wf-footer__list a { font-size: var(--wf-portal-fs-sm); color: var(--wf-portal-text-muted); text-decoration: none; transition: var(--wf-portal-transition); padding: var(--wf-portal-space-xs) 0; } .wf-home .wf-footer__list a:hover { color: var(--wf-portal-brand); text-decoration: none; padding-left: var(--wf-portal-space-sm); } .wf-home .wf-footer__list a:focus-visible { outline: 2px solid var(--wf-portal-brand); outline-offset: 2px; border-radius: var(--wf-portal-r-sm); } /* ========== RESPONSIVIDADE ========== */ @media (max-width: 640px) { .wf-home .wf-portal-hero { padding: var(--wf-portal-space-3xl) 0 var(--wf-portal-space-2xl); } .wf-home .wf-portal-hero__title { font-size: var(--wf-portal-fs-2xl); } .wf-home .wf-portal-hero__subtitle { font-size: var(--wf-portal-fs-base); } .wf-home .wf-portal-search { top: 0; padding: var(--wf-portal-space-lg) 0; } .wf-home .wf-portal-countries { padding: var(--wf-portal-space-2xl) 0; } .wf-home .wf-portal-countries__grid { grid-template-columns: 1fr; gap: var(--wf-portal-space-md); } .wf-home .wf-portal-card { min-height: 160px; padding: var(--wf-portal-space-lg); } } /* ========== ACESSIBILIDADE ========== */ .wf-home a:focus-visible, .wf-home button:focus-visible { outline: 2px solid var(--wf-portal-brand); outline-offset: 2px; border-radius: var(--wf-portal-r-sm); } .wf-home .wf-portal-card:focus-visible { outline: 3px solid var(--wf-portal-brand); outline-offset: 4px; } /* ========== UTILITÁRIOS ========== */ .wf-home .wf-stack { display: flex; flex-direction: column; gap: var(--wf-portal-space-lg); } .wf-home .wf-surface { background: var(--wf-portal-surface); }