``` *Remember to create a default image at `assets/images/default-uf-mask-bg.jpg` or change the path.* **3. `style.css` (Styling for Dynamic News and UF Mask)** Add these new styles to your existing `style.css`. ```css /* ... (Keep all previous CSS - Normalize, Global, Header, Footer, etc.) ... */ /*-------------------------------------------------------------- ## Homepage Sections Styling (Updates for Group 51.jpg) --------------------------------------------------------------*/ /* General Section Styling - (from previous response, ensure it's present) */ .homepage-section { padding-top: 60px; padding-bottom: 60px; border-bottom: 1px solid #f0f0f0; } .homepage-section:last-of-type { border-bottom: none; } .section-header { margin-bottom: 40px; text-align: left; } .section-header .section-kicker { display: block; font-size: 0.9em; color: #777; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .section-header .section-title { font-size: 2.8em; color: #333; font-weight: 400; line-height: 1.2; } /* Uses .sumana-font */ .section-header .section-subtitle { font-size: 1.1em; color: #666; margin-top: 5px; } /* --- Hero Section: "Cultivamos Excelência na Prática" (Adjusted for new UI) --- */ .hero-section { background-color: #ffffff; padding-top: 50px; padding-bottom: 50px; } .hero-content { display: flex; align-items: flex-start; /* Align text to top, image might be taller */ justify-content: space-between; gap: 40px; } .hero-text { flex-basis: 45%; /* More space for text */ max-width: 45%; } .hero-main-title { /* This is the H1 */ font-size: 4.8em; /* Very large title */ color: #222222; /* Darker title color */ line-height: 1.05; margin-bottom: 20px; font-weight: 400; /* Sumana regular */ } .hero-main-title span { display: block; } /* Each line of title on new line */ .hero-subtitle { font-size: 1.1em; /* Slightly smaller subtitle */ color: #555; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; } .hero-image-placeholder { /* Placeholder for the grey rectangle */ flex-basis: 50%; max-width: 50%; background-color: #e9ecef; /* Light grey for the placeholder block */ min-height: 250px; /* Give it some height */ display: flex; align-items: center; justify-content: center; border-radius: 4px; } .hero-image-placeholder img { /* If you use an actual image inside */ max-width: 100%; height: auto; object-fit: contain; } /* --- Passion Section (Styles from previous response are generally okay) --- */ .passion-section { background-color: #f9f9f9; } .passion-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; } .passion-text { flex-basis: 60%; font-size: 1.1em; line-height: 1.7; color: #444; } .passion-stats { flex-basis: 35%; text-align: right; } .stat-item { margin-bottom: 25px; } .stat-item:last-child { margin-bottom: 0; } .stat-number { display: block; font-size: 3.5em; font-weight: 700; color: #4A5568; line-height: 1; } .stat-label { display: block; font-size: 0.9em; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; } /* --- Beyond Theory Section (Styles from previous response are generally okay) --- */ .beyond-theory-section { background-color: #ffffff; } .beyond-theory-section .section-header { text-align: left; margin-bottom: 30px; } /* Align left as per new UI */ .beyond-theory-section .section-header .section-subtitle { display: none; } /* Subtitle not visible in new UI for this section */ .theory-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .theory-card { background-color: #ffffff; border: 1px solid #e9e9e9; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; } .theory-card img { width: 100%; height: 220px; object-fit: cover; } .theory-card-content { padding: 20px 25px; flex-grow: 1; } .theory-card-content h3 { font-size: 1.5em; color: #333; margin-bottom: 8px; font-weight: 400; } /* Uses .sumana-font */ .theory-card-content p { font-size: 0.95em; color: #555; line-height: 1.6; } /* --- Market Economy Section (Dynamic News - Adjusted for Group 51.jpg) --- */ .market-economy-section { background-color: #f9f9f9; } .market-economy-section .section-header .section-kicker { text-transform: none; } /* "MANTENHA-SE ATUALIZADO" is normal case in UI */ .market-content-area { display: flex; gap: 35px; align-items: flex-start; } .featured-article-column { flex: 0 0 60%; /* Approx 60% width */ } .featured-article { background-color: #ffffff; border-radius: 4px; /* Subtle radius */ box-shadow: 0 2px 8px rgba(0,0,0,0.03); overflow: hidden; } .featured-article-link { display: block; text-decoration: none; color: inherit; } .featured-article-image { width: 100%; height: 300px; /* Fixed height for featured image */ object-fit: cover; display: block; } .featured-article-content { padding: 20px 25px 25px; } .featured-article-content h3 { /* Uses .sumana-font */ font-size: 1.8em; /* Prominent title */ color: #333; margin-bottom: 8px; line-height: 1.25; font-weight: 400; } .article-meta { font-size: 0.8em; color: #777; margin-bottom: 12px; display: block; } .article-meta .article-category a, .article-meta .article-category { color: #666; text-decoration: none; } .article-meta .article-category a:hover { text-decoration: underline; } .article-excerpt p { /* Target WP's default excerpt p tag */ font-size: 1em; color: #555; margin-bottom: 18px; line-height: 1.6; } .btn.article-readmore { display: inline-block; background-color: #7399c6; /* Using the blue from newsletter button */ color: #ffffff; padding: 9px 18px; text-decoration: none; border-radius: 3px; font-size: 0.9em; font-weight: 500; transition: background-color 0.2s ease; } .btn.article-readmore:hover { background-color: #5a80b3; } .article-list-column { flex: 0 0 calc(40% - 35px); /* Remaining space minus gap */ } .article-list-title { /* Uses .sumana-font */ font-size: 1.6em; color: #333; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #7399c6; /* Accent color from button */ font-weight: 400; } .article-list ul { list-style: none; padding: 0; margin: 0; } .article-list ul li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e9e9e9; /* Lighter separator */ } .article-list ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .article-list ul li a { text-decoration: none; color: #383838; /* Darker link color */ font-size: 1em; font-weight: 500; /* Slightly less bold than featured */ line-height: 1.4; display: block; } .article-list ul li a:hover { color: #0073aa; } .article-list-meta { font-size: 0.75em; color: #888; display: block; margin-top: 4px; } /* --- Newsletter Signup Section: "Inscreva-se no Briefings" (with UF Mask) --- */ .newsletter-signup-section { background-color: #f0f0f0; /* Matching the UI */ overflow: hidden; /* Important for the large UF text if it bleeds */ } .newsletter-content-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 30px; /* Reduced gap */ min-height: 300px; /* Ensure section has some height for UF */ } .newsletter-form-area { flex-basis: 50%; /* More space for form */ max-width: 500px; /* Limit form width */ z-index: 2; /* Ensure form is above UF if they overlap slightly */ position: relative; /* For z-index to work */ } .newsletter-form-area .section-title { font-size: 2.5em; } .newsletter-form-area .section-description { font-family: 'Inter', sans-serif; margin-bottom: 25px; } .newsletter-form .form-group { margin-bottom: 15px; } .newsletter-form input[type="text"], .newsletter-form input[type="email"] { width: 100%; padding: 12px 15px; /* Slightly less padding */ border: 1px solid #cccccc; border-radius: 3px; font-family: 'Inter', sans-serif; font-size: 0.95em; background-color: #ffffff; } .newsletter-form input[type="text"]::placeholder, .newsletter-form input[type="email"]::placeholder { color: #888; font-family: 'Inter', sans-serif; } .newsletter-submit-button { background-color: #7399c6; color: #ffffff; padding: 12px 22px; border: none; border-radius: 3px; font-family: 'Inter', sans-serif; font-size: 0.95em; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease; } .newsletter-submit-button:hover { background-color: #5a80b3; } .newsletter-success { font-size: 1.5em; color: #343435; padding-top: 15px; } /* Uses .sumana-font */ .newsletter-graphic-area { flex-basis: 50%; /* Take remaining space */ display: flex; justify-content: flex-end; /* Align UF to the right */ align-items: center; position: relative; /* For z-index and potential absolute positioning of text */ overflow: hidden; /* Clip the UF if it's too wide for its container */ min-height: 280px; /* Ensure it has some height */ } .uf-text-mask-homepage { /* Uses .sree-krushnadevaraya-font */ font-size: 280px; /* ADJUST THIS for desired size. This is very large. */ line-height: 0.8; /* Adjust for vertical fit */ font-weight: normal; color: transparent; /* Text color is transparent */ -webkit-background-clip: text; background-clip: text; background-size: cover; background-position: center center; text-align: right; /* Align F to right */ /* The background image is set inline via PHP */ background-color: #ccc; /* Fallback if image fails */ user-select: none; /* To make F touch edge of its container, which is pushed by form */ /* We might need to use transform to nudge it if text-align isn't enough */ /* transform: translateX(15%); /* Example: Push F further to the right */ width: 100%; /* Make it take full width of its container to allow text-align right */ /* margin-right: -5%; */ /* Pull it slightly to the right if needed */ } /* Responsive Adjustments from previous response are generally good, review as needed */ @media (max-width: 992px) { /* Tablet */ .hero-title { font-size: 3.5em; } .passion-content { flex-direction: column; align-items: center; text-align: center; } .passion-text { flex-basis: 100%; margin-bottom: 40px; } .passion-stats { flex-basis: 100%; text-align: center; display: flex; justify-content: space-around; } .stat-item { margin-bottom: 0; } .market-content-area { flex-direction: column; } .featured-article-column, .article-list-column { flex-basis: 100%; } .article-list-column { margin-top: 40px; } .newsletter-content-wrapper { flex-direction: column-reverse; text-align: center; } /* UF above form on tablet */ .newsletter-graphic-area { margin-bottom: 30px; width: 100%; justify-content: center;} .uf-text-mask-homepage { font-size: 200px; text-align: center; } } @media (max-width: 768px) { /* Mobile */ .hero-content { flex-direction: column-reverse; text-align: center; } .hero-text, .hero-image-placeholder { flex-basis: 100%; max-width: 100%; } .hero-image-placeholder { margin-bottom: 30px; min-height: 200px; } .hero-main-title { font-size: 2.5em; } .hero-subtitle { font-size: 1em; } .section-header .section-title { font-size: 2em; } .passion-stats { flex-direction: column; align-items: center; } .stat-item { margin-bottom: 20px; } .stat-number { font-size: 2.8em; } .theory-cards-grid { grid-template-columns: 1fr; } .theory-card img { height: 200px; } .uf-text-mask-homepage { font-size: 150px; } /* Smaller UF on mobile */ }

Cultivamos Excelência na Prática

CONECTANDO TALENTOS AO MERCADO FINANCEIRO

Forma abstrata decorativa
QUEM SOMOS

Paixão Que Molda Carreiras

Acreditamos no aprendizado que vai além da teoria. Nossa missão é capacitar jovens universitários com as habilidades práticas e o network estratégico essenciais para construir uma carreira de sucesso no mercado financeiro. Oferecemos programas, mentorias e conexões que transformam potencial em excelência profissional.

+5 ANOS DE ATUAÇÃO
+100 ALUNOS FORMADOS
+60% ALOCADOS NO MERCADO

Além da Teoria

EXPERIÊNCIAS QUE PREPARAM PARA O MERCADO REAL

Networking Estratégico

Networking Estratégico

Conecte-se com profissionais renomados e construa uma rede de contatos valiosa para sua trajetória.

Projetos Práticos

Projetos Práticos

Desenvolva cases reais do mercado financeiro e aplique seus conhecimentos de forma intensiva.

Mentoria Individualizada

Mentoria Individualizada

Receba orientação de especialistas para lapidar suas habilidades e direcionar sua carreira.

MANTENHA-SE ATUALIZADO

Mercado, Economia & Muito Mais

Olá, mundo!

Olá, mundo!

Boas-vindas ao WordPress. Esse é o seu primeiro post. Edite-o ou exclua-o, e então comece a escrever!

Leia Mais