/* * Stylesheet for the Digital KW website. * The design takes inspiration from Safeweb's clean and modern layout but * introduces its own identity through a unique colour palette and typography. */ /* Global variables for colours and fonts */ :root { /* * Updated palette for the Digital KW website. * The colours below reflect the requested scheme: * - Neon cyan for highlights and calls to action * - Dark petrol blue for secondary elements * - Light grey for light section backgrounds * - Bluish black for dark sections * - Muted grey for secondary text */ --primary-color: #00e6ff; /* Ciano Neon accent */ --secondary-color: #013f5c; /* Azul petróleo escuro */ --background-light: #f5f7fa; /* Cinza médio clarinho */ --background-dark: #0a192f; /* Preto azulado */ --text-dark: #0a192f; /* Dark text for light backgrounds */ --text-muted: #6c8aa6; /* Muted grey for secondary information */ --border-radius: 0.5rem; --shadow: 0 4px 8px rgba(0, 0, 0, 0.1); --font-family: 'Montserrat', sans-serif; } /* Global reset and typography */ * { margin: 0; padding: 0; box-sizing: border-box; } /* * Page-specific styles for the e‑CPF product page. We set a custom * background image to give the page more visual depth. The image is * configured to cover the entire viewport and remain fixed during * scrolling so that content appears to move over it. This rule only * applies when the element has the class "ecpf-page". */ .ecpf-page { /* Replace the photographic background with a lightweight gradient. The gradient blends the site's dark base into the secondary petrol blue. This eliminates large image downloads and improves scroll performance while preserving the moody atmosphere. */ background: linear-gradient(135deg, var(--background-dark) 0%, var(--secondary-color) 100%); background-repeat: no-repeat; background-size: cover; color: inherit; } /* * Custom layout rules for the e‑CPF page hero. We hide the illustrative image * and centre the text content horizontally. Without the image, the hero * becomes a single column, so we adjust justification accordingly. */ .ecpf-page .hero-image { display: none; } .ecpf-page .hero-layout { justify-content: center; text-align: center; } .ecpf-page .hero-text-content { text-align: center; } /* * Styles for the e‑CNPJ page. The e‑CNPJ product page shares the same * futuristic background as the e‑CPF page and uses glassmorphism panels to * enhance readability. The hero image is hidden, and the hero text is * centred. */ .ecnpj-page { /* Use the same gradient treatment as the e‑CPF page to reduce asset downloads and maintain consistency across product pages. */ background: linear-gradient(135deg, var(--background-dark) 0%, var(--secondary-color) 100%); background-repeat: no-repeat; background-size: cover; color: inherit; } .ecnpj-page .info, .ecnpj-page .pricing, .ecnpj-page .contact { background: rgba(10, 25, 47, 0.8); /* Lower blur intensity for improved performance */ backdrop-filter: blur(2px); } .ecnpj-page .hero-image { display: none; } .ecnpj-page .hero-layout { justify-content: center; text-align: center; } /* * Styles for the SafeID page. * * The SafeID product page shares the same futuristic background and glassmorphism * panels as the e‑CPF and e‑CNPJ pages. The hero section contains only * textual content (no illustration) and is centred horizontally. By * reusing the same background image and linear gradient, we maintain * consistency across all product pages. The glass panels improve * readability against the dark, patterned backdrop. */ .safeid-page { /* Use a gradient instead of a photograph to reduce load times. The gradient flows from the dark base to the secondary colour for a cohesive look across product pages. */ background: linear-gradient(135deg, var(--background-dark) 0%, var(--secondary-color) 100%); background-repeat: no-repeat; background-size: cover; color: inherit; } /* * Improve performance on mobile devices by disabling fixed backgrounds. * Fixed attachments can cause heavy repaints on mobile browsers, * especially when combined with large images and blur effects. * On small screens we switch to the default scroll attachment, which * still preserves the overall look because iOS and many Android * browsers ignore `background-attachment: fixed` anyway. This change * reduces jank without altering the visual appearance on supported * platforms. */ @media (max-width: 1024px) { .ecpf-page, .ecnpj-page, .safeid-page { background-attachment: scroll; } } .safeid-page .info, .safeid-page .contact { background: rgba(10, 25, 47, 0.8); /* Reduce blur on SafeID panels to improve performance without compromising legibility. */ backdrop-filter: blur(2px); } .safeid-page .hero-image { /* Hide the illustration on the SafeID page. The SafeID hero relies only on text content without an accompanying image for a cleaner look. */ display: none; } .safeid-page .hero-layout { /* Centre the SafeID hero text horizontally on the page. Since this page does not display an illustration, centring the content enhances focus on the headline and subtitle. */ justify-content: center; text-align: center; flex-wrap: wrap; } /* * SafeID feature and usage styles * * To modernise the SafeID product page we present feature lists and * use‑case lists as responsive cards. Each list item becomes a card with * a coloured accent dot and subtle border. Usage lists are displayed * in two columns on larger screens and stack vertically on small * devices. These classes are applied only within the SafeID page. */ .safeid-page .feature-list, .safeid-page .security-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; list-style: none; margin-top: 1.5rem; padding: 0; } .safeid-page .feature-list li, .safeid-page .security-list li { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.25rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem; /* Remove blur from cards to eliminate GPU intensive effects */ /* No backdrop-filter to ensure lightweight rendering */ } /* Accent dot before each feature item */ .safeid-page .feature-list li::before, .safeid-page .security-list li::before { content: ''; width: 10px; height: 10px; margin-top: 0.35rem; background-color: var(--primary-color); border-radius: 50%; flex-shrink: 0; } .safeid-page .feature-list li span, .safeid-page .security-list li span { display: block; font-size: 0.95rem; line-height: 1.4; color: #cfd9e6; } /* Usage columns layout */ .safeid-page .use-columns { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; } /* * e‑CPF and e‑CNPJ usage lists as cards * * To modernise the "Uso e aplicações" sections on the e‑CPF and e‑CNPJ * pages we convert the unordered lists into responsive cards. Each * list item becomes its own card with a subtle border, rounded * corners and an accent dot. This design draws inspiration from the * Safeweb examples while preserving the site's dark colour palette. */ /* * Modernise the "Uso e aplicações" sections on e‑CPF and e‑CNPJ pages to * mirror the SafeID style. We use a responsive grid of cards with * circular accent markers, similar to the feature and security lists * on the SafeID page. A subtle blur is applied to each card to * separate it from the gradient background without adding * noticeable weight. Cards automatically wrap onto new rows on * smaller screens, and all items align in a single row on * sufficiently wide displays. */ /* * e‑CPF/e‑CNPJ usage lists * * For the product pages we want the usage/applications lists to mirror * the SafeID layout: responsive cards arranged side by side across * wider screens. We remove any max‑width restriction inherited from * the base `.app-list` class so the grid can expand to fill the * container. Cards wrap naturally on smaller viewports. */ .ecpf-page .app-list, .ecnpj-page .app-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; list-style: none; /* Allow the list to occupy the full width of the container */ max-width: none; margin: 1.5rem 0; padding: 0; } .ecpf-page .app-list li, .ecnpj-page .app-list li { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.25rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem; /* Remove blur from e‑CPF/e‑CNPJ cards to eliminate GPU intensive effects */ /* No backdrop-filter to ensure lightweight rendering */ color: #cfd9e6; font-size: 0.95rem; line-height: 1.4; } .ecpf-page .app-list li::before, .ecnpj-page .app-list li::before { content: ''; width: 10px; height: 10px; margin-top: 0.35rem; background-color: var(--primary-color); border-radius: 50%; flex-shrink: 0; } .safeid-page .use-column { flex: 1 1 280px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.5rem; /* Remove blur from usage cards to eliminate GPU intensive effects */ /* No backdrop-filter to ensure lightweight rendering */ } .safeid-page .use-column h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; color: #ffffff; } .safeid-page .use-column ul { list-style: none; margin: 0; padding: 0; } .safeid-page .use-column ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; font-size: 0.95rem; color: #cfd9e6; } .safeid-page .use-column ul li::before { content: ''; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; position: absolute; left: 0; top: 0.4rem; } .ecnpj-page .hero-text-content { text-align: center; } /* * When viewing the e‑CPF page, allow the underlying background image to * peek through the content sections. We replace the solid dark * backgrounds on informational and pricing sections with semi‑transparent * panels and apply a subtle blur. This creates a glassmorphism effect * that enhances the abstract background while preserving text legibility. */ .ecpf-page .info, .ecpf-page .pricing, .ecpf-page .contact { background: rgba(10, 25, 47, 0.8); /* Lower blur intensity for improved performance */ backdrop-filter: blur(2px); } body { font-family: var(--font-family); line-height: 1.6; /* Use a light text colour globally since the site now adopts a dark theme. */ color: #cfd9e6; /* Use the darkest shade as the base page colour so the hero video blends into the background instead of appearing as a separate box. */ background-color: var(--background-dark); } a { text-decoration: none; color: inherit; } ul { list-style: none; padding: 0; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } /* Navigation bar */ /* Navigation bar */ .navbar { /* Use the dark background for the navigation bar */ background: var(--background-dark); box-shadow: var(--shadow); position: sticky; top: 0; /* Ensure the navigation (and its dropdown) sit above other page sections */ z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; /* Increase vertical padding further to provide a more substantial navigation bar height. This additional space helps the logo fit neatly without overflowing and improves overall proportions. */ padding: 0.75rem 0; } /* * Override the default container centring for the navigation bar. We want * the logo to sit flush with the left edge rather than being offset by * the generic 5% margin applied to other containers. The nav container * now spans the full width of the viewport with a small horizontal * padding for visual comfort. */ .navbar .nav-container { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 1rem; padding-right: 1rem; } .logo { /* When a logo image is used, treat this anchor as a flex container so that the image aligns nicely vertically. Remove font styles because the image will display the brand. */ display: flex; align-items: center; gap: 0.5rem; position: relative; /* Allow the large logo image to overflow outside the anchor without clipping */ overflow: visible; } /* Style for the logo image inside the navigation bar */ .logo img { /* Keep a small intrinsic height so the navigation bar height remains compact. The logo is visually enlarged using CSS transforms rather than increasing the element's height. */ height: 32px; width: auto; display: block; /* Enlarge the logo using a scale transform. This enlarges the rendered image without affecting the layout flow, so the navigation bar height stays the same. The transform origin ensures the enlargement anchors to the left centre of the logo, preventing it from shifting vertically. */ transform: scale(3); transform-origin: left center; } @media (min-width: 768px) { .logo img { /* Maintain the same intrinsic height on larger screens and further increase the scale factor for desktop to make the logo more prominent. */ height: 32px; transform: scale(4); transform-origin: left center; } } .nav-menu { display: flex; gap: 2rem; } /* * Dropdown navigation styles * * The navigation bar includes a dropdown for the "Certificado Digital" * item. These rules position the dropdown menu, style the toggle and * arrow, and provide a simple show/hide mechanism when the menu is * toggled via JavaScript. The dropdown uses flex properties to align * its contents and preserves the dark theme of the navigation. */ .nav-menu .dropdown { position: relative; } /* Align the dropdown toggle content (label and arrow) */ .nav-menu .dropdown > .dropdown-toggle { display: flex; align-items: center; gap: 0.25rem; } /* Styling for the arrow icon */ .nav-menu .dropdown .arrow { display: inline-flex; margin-left: 0.25rem; transition: transform 0.3s ease; } /* Rotate the arrow when the dropdown is open */ .nav-menu .dropdown.open .arrow { transform: rotate(180deg); } /* Dropdown menu container */ .nav-menu .dropdown-menu { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; background: var(--background-dark); padding: 0.5rem 0; list-style: none; border-radius: var(--border-radius); box-shadow: var(--shadow); /* Raise the z-index so the dropdown appears above content in the hero section */ z-index: 1001; min-width: 160px; } /* Dropdown menu links */ .nav-menu .dropdown-menu li a { display: block; padding: 0.5rem 1rem; white-space: nowrap; color: #ffffff; } /* Hover effect for dropdown links */ .nav-menu .dropdown-menu li a:hover { background: var(--secondary-color); color: #ffffff; } /* Show the dropdown menu when the parent has the "open" class */ .nav-menu .dropdown.open .dropdown-menu { display: block; } .nav-menu li a { font-weight: 500; /* White text on dark navbar */ color: #ffffff; transition: color 0.2s ease; } .nav-menu li a:hover { color: var(--primary-color); } /* * Prevent the last dropdown (e.g., "Suporte") from overflowing off the right edge of * the navigation bar. Align its menu to the right instead of the default left alignment. */ .nav-menu > li.dropdown:last-child .dropdown-menu { left: auto; right: 0; } /* Hero section */ /* * Hero section * * The hero now acts as a full‑height introduction with an interactive * particle canvas behind the content. To focus attention on the text, * the entire section is centred both vertically and horizontally. A * translucent backdrop on the text container improves legibility * against the moving particles while still allowing the animation to * shine through. A solid dark colour anchors the section in the overall * dark theme. */ .hero { /* Solid dark background ensures that the particle effect blends seamlessly into the rest of the page without appearing as a boxed video. */ background: #0d1b2a; color: #ffffff; position: relative; overflow: hidden; /* Vertically and horizontally centre all hero contents */ display: flex; align-items: center; justify-content: center; /* Provide enough height for the introduction to feel balanced on most screens */ min-height: 80vh; text-align: center; padding: 2rem; } /* Hero layout: allow text and image side by side on larger screens */ .hero-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; /* Ensure the text and buttons appear above the particle canvas */ position: relative; z-index: 1; } /* Particle canvas overlay in the hero section */ #particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero-text { /* Constrain the width of the text container to enhance readability */ max-width: 600px; width: 100%; margin: 0 auto; /* Centre the contents of the hero text column */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* Apply a semi‑transparent backdrop with slight blur so the text remains legible against the moving particles. */ /* A slightly lighter translucency improves readability without completely obscuring the animated background. */ background: rgba(13, 27, 42, 0.55); /* Reduce blur on the hero text container to lighten the GPU workload while retaining readability against the particle background. */ /* Further reduce the blur on the hero text container. A 2px blur provides a subtle glass effect without overburdening GPU compositing, improving scroll smoothness on lower‑powered devices. */ backdrop-filter: blur(2px); padding: 2rem 1.5rem; border-radius: 1rem; } .hero-image img { width: 100%; max-width: 500px; border-radius: var(--border-radius); box-shadow: var(--shadow); /* apply a subtle filter so media in the hero blends with the gradient */ filter: brightness(0.95) saturate(1.05); } /* Ensure that both images and videos in the hero section share the same styling */ .hero-image video { width: 100%; /* Allow the video to fill its container on larger screens instead of constraining it to a fixed maximum width. This helps the video blend into the dark hero background and removes the perception of it being confined to a square box. */ max-width: 100%; /* Remove rounded corners and drop shadow so the video blends seamlessly with the dark hero background. We still use object-fit to ensure the video covers its container without distortion. */ border-radius: 0; box-shadow: none; object-fit: cover; /* Apply the same subtle grading used on images */ filter: brightness(0.95) saturate(1.05); } @media (min-width: 768px) { .hero-content { /* Keep a column orientation on larger screens to centre the introductory content. This prevents the hero from feeling empty on wider displays and ensures the text remains the focal point. */ flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero-text { /* Do not force flex expansion; the width is controlled by max-width */ flex: none; } /* The hero image container is not used in this design, but if present it should be centred and stacked below the text. */ .hero-image { flex: none; display: flex; justify-content: center; } } .hero-title { font-size: 2.5rem; font-weight: 600; /* Reduce the space below the main heading to tighten the layout */ margin-bottom: 0.5rem; } .typewriter { font-size: 2rem; font-weight: 500; min-height: 2.5rem; /* Reduce the gap after the typewriter line to bring elements closer together */ margin-bottom: 1.25rem; position: relative; } .typewriter .cursor { display: inline-block; width: 2px; /* Set the height relative to the text so the cursor spans the full vertical size of the typed characters. A small left margin separates the cursor from the last letter. */ height: 1.2em; margin-left: 0.1em; /* Use the accent colour for the blinking cursor */ background: var(--primary-color); animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .cta-button { background: var(--primary-color); /* Dark text on neon background for contrast */ color: var(--background-dark); padding: 0.75rem 1.5rem; border-radius: var(--border-radius); font-weight: 600; box-shadow: var(--shadow); transition: background 0.3s ease, color 0.3s ease; } .cta-button:hover { background: var(--secondary-color); color: #ffffff; } /* * Additional elements for the hero section * These classes style the optional subtitle and a row of benefit items that * summarise Digital KW's key advantages. They help fill vertical space * beneath the typewriter effect and make the hero feel less empty. */ .hero-subtitle { font-size: 1.2rem; color: #cfd9e6; margin-bottom: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.4; } /* Tagline inside the product hero. A bit larger and coloured using the primary accent. */ .hero-tagline { font-size: 1.4rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.75rem; } .hero-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; list-style: none; padding: 0; } .hero-benefits li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #cfd9e6; } .hero-benefits svg { width: 20px; height: 20px; color: var(--primary-color); flex-shrink: 0; } .hero-benefits svg path { fill: currentColor; } /* Section titles */ .section-title { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; text-align: center; } .section-subtitle { font-size: 1rem; color: var(--text-muted); margin-bottom: 2rem; text-align: center; } /* Pricing section */ .pricing { padding: 4rem 0; /* Dark background to match the rest of the site */ background: var(--background-dark); color: #cfd9e6; } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; } .pricing-card { /* Use a translucent dark card so it contrasts subtly against the dark background. The border adds definition without being too bright. */ /* Slightly increase the opacity of the card background so text is more legible against the dark page. */ background: rgba(255, 255, 255, 0.08); border-radius: 0.8rem; padding: 2rem 1.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } .pricing-card h3 { font-size: 1.4rem; font-weight: 600; /* Make the certificate type stand out with the primary accent colour */ color: var(--primary-color); margin-bottom: 0.25rem; } .pricing-description { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; } /* Bullet list styling inside pricing cards for certificate details */ .pricing-details { list-style: disc; padding-left: 1.5rem; margin: 1rem 0 1.5rem; color: #cfd9e6; font-size: 0.95rem; } .pricing-details li { margin-bottom: 0.4rem; } /* Colour bullets for pricing details using the primary accent */ .pricing-details li::marker { color: var(--primary-color); } /* Small footnote under pricing cards */ .small-note { font-size: 0.8rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 1rem; } .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .pill { display: flex; align-items: center; gap: 0.3rem; /* Use a semi–transparent accent colour for pill backgrounds */ background: rgba(0, 230, 255, 0.15); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; } /* Circle wrapper for icons inside pills */ /* * Circular wrapper for the small icons inside the pricing pills. The wrapper * ensures that all icons are consistently sized and centred within a * coloured circle, improving alignment and readability. We avoid * styling the SVG directly so that the circle background remains * separate from the icon shape itself. The wrapper uses flexbox to * centre the icon. */ .pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); color: var(--background-dark); flex-shrink: 0; /* Add a small margin to separate the circle from the label text */ margin-right: 0.3rem; } .pill-icon svg { width: 12px; height: 12px; fill: currentColor; } .pricing-card .price { font-size: 1.6rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; } .pricing-card .btn { width: 100%; text-align: center; background: var(--primary-color); /* Dark text on neon background */ color: var(--background-dark); padding: 0.6rem 0; border-radius: var(--border-radius); font-weight: 600; transition: background 0.3s ease, color 0.3s ease; } .pricing-card .btn:hover { background: var(--secondary-color); color: #ffffff; } /* Uses section */ /* Why choose section */ .why { /* Dark gradient for the why section using the updated palette */ background: linear-gradient(160deg, var(--background-dark) 0%, var(--secondary-color) 100%); color: #ffffff; padding: 4rem 0; } .why-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .why-card { background: rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 1.5rem; /* Reduce blur on the why cards for smoother scrolling */ backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .why-card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .why-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; font-weight: 600; } /* Body text within why cards */ .why-card p { font-size: 0.95rem; line-height: 1.4; /* Use a softer colour for body text on dark cards */ color: #cfd9e6; } /* Icon styling inside why cards */ .why-icon { /* Use the accent colour in a semi–transparent pill behind the icon */ background: rgba(0, 230, 255, 0.15); color: var(--primary-color); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 1rem; } .why-icon svg { width: 24px; height: 24px; } .why-icon svg path { fill: currentColor; } /* Info section */ .info { /* Use a dark background for the information section to match the rest of the site */ background: var(--background-dark); color: #cfd9e6; padding: 4rem 0; } /* ---------------------------------------------------------------------*/ /* FAQ accordion styles */ /* These styles define the layout and interactivity for the questions */ /* and answers on the Perguntas Frequentes page. Each FAQ item is a */ /* card with a question header and a collapsible answer section. */ /* Category wrapper around a group of FAQ items */ .faq-category { margin-bottom: 3rem; } /* Style for the category heading */ .faq-category > h2.section-title { margin-bottom: 1rem; color: var(--primary-color); text-align: left; } /* Individual FAQ item container */ .faq-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); margin-top: 1.5rem; } /* The clickable question header */ .faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; color: inherit; font-family: var(--font-family); font-size: 1rem; font-weight: 600; padding: 1rem 1.25rem; cursor: pointer; text-align: left; } /* Arrow container within the question header */ .faq-question .arrow { transition: transform 0.3s ease; margin-left: 1rem; } /* Rotate the arrow when the item is open */ .faq-item.active .faq-question .arrow { transform: rotate(180deg); } /* The answer container remains collapsed by default */ .faq-answer { max-height: 0; overflow: hidden; padding: 0 1.25rem; transition: max-height 0.4s ease, padding 0.4s ease; } /* Expanded answer state adds bottom padding and height */ .faq-item.active .faq-answer { max-height: 2000px; padding: 0 1.25rem 1.25rem; } /* Provide spacing on paragraphs and lists within answers */ .faq-answer p, .faq-answer ul, .faq-answer ol { margin-top: 0.75rem; } /* Indentation for nested lists in answers */ .faq-answer ul, .faq-answer ol { padding-left: 1rem; } .info .sub-heading { font-size: 1.4rem; font-weight: 600; /* Use the primary accent colour for sub-headings to stand out on the dark background */ color: var(--primary-color); margin-top: 2rem; margin-bottom: 1.5rem; text-align: center; } .apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .app-card { /* Dark translucent card style similar to the pricing cards */ background: rgba(255, 255, 255, 0.05); border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .app-card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } .app-icon { width: 48px; height: 48px; margin-bottom: 0.75rem; color: var(--primary-color); } /* Ensure that icons in the information section inherit the colour from their container, so they appear in the accent colour on the dark cards */ .app-icon svg path { fill: currentColor; } .app-card p { font-size: 0.9rem; color: #cfd9e6; } /* Fade-in animation for sections */ [data-animate="true"] { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } [data-animate="true"].show { opacity: 1; transform: translateY(0); } /* Contact section */ .contact { /* Use the darkest background for the contact section */ background: var(--background-dark); color: #ffffff; padding: 4rem 0; } /* Wrapper for the WhatsApp contact button Center-align the button horizontally within the contact section. Using flexbox allows the button to remain centered across different screen sizes while preserving its margin and padding. */ .contact-button-wrapper { display: flex; justify-content: center; /* Add a small top margin to separate the button from preceding text */ margin-top: 1.5rem; } /* Sub hero section used for product pages (e.g., e‑CPF). Provides a dark backdrop and centred content. */ .sub-hero { /* Dark backdrop to distinguish product pages */ background: var(--background-dark); color: #ffffff; display: flex; align-items: center; justify-content: center; padding: 6rem 0; /* Centre text on smaller screens; alignment is overridden in hero-layout */ text-align: center; } /* Restrict the width of hero content in the sub-hero to improve readability */ .sub-hero .hero-content { max-width: 1100px; margin: 0 auto; } /* Layout within sub‑hero: display text and image side by side on larger viewports */ .sub-hero .hero-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; /* Align text to the left on wider screens */ text-align: left; } .sub-hero .hero-text-content { flex: 1 1 300px; } .sub-hero .hero-image { flex: 1 1 300px; text-align: center; } .sub-hero .hero-image img { width: 100%; height: auto; max-width: 400px; border-radius: 0.5rem; box-shadow: var(--shadow); } /* The SafeID page does not display a hero illustration, so no size constraints are necessary on the hero image. */ /* List styling for informational sections on product pages */ .app-list { list-style: disc; margin: 1.5rem auto; max-width: 800px; padding-left: 1.5rem; color: #cfd9e6; } .app-list li { margin-bottom: 0.5rem; } /* Colour bullets using the primary accent colour */ .app-list li::marker { color: var(--primary-color); } .contact-form { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 0 auto; } .form-group { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .form-group { flex-direction: row; } .form-group input { flex: 1; } } .contact-form input, .contact-form textarea { padding: 0.75rem; border-radius: var(--border-radius); border: none; font-size: 1rem; } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form button { align-self: flex-start; background: var(--primary-color); /* Dark text on neon background */ color: var(--background-dark); padding: 0.75rem 1.5rem; border: none; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } .contact-form button:hover { background: var(--secondary-color); color: #ffffff; } /* Footer */ .footer { background: var(--background-dark); color: #8da2b7; padding: 2rem 0; } .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .footer-menu { display: flex; gap: 1.5rem; } .footer-menu a { color: #8da2b7; font-size: 0.9rem; transition: color 0.2s ease; } .footer-menu a:hover { color: var(--primary-color); } /* Primary button (general purpose) */ .btn.primary { background: var(--primary-color); /* Dark text on neon background */ color: var(--background-dark); padding: 0.6rem 1rem; border-radius: var(--border-radius); font-weight: 600; display: inline-block; text-align: center; transition: background 0.3s ease, color 0.3s ease; } .btn.primary:hover { background: var(--secondary-color); color: #ffffff; } /* Secondary button style for outlined actions */ .btn.secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 0.6rem 1rem; border-radius: var(--border-radius); font-weight: 600; display: inline-block; text-align: center; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* --------------------------------------------------------------------------- * Footer styles * These classes style the footer in multiple columns with links, social icons, * logos and a copyright note. They ensure the layout remains responsive and * consistent across all pages of the site. */ .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .footer-column h4 { font-size: 1rem; margin-bottom: 1rem; color: var(--primary-color); } .footer-column ul { list-style: none; padding-left: 0; } .footer-column li { margin-bottom: 0.5rem; } .footer-column a { color: #8da2b7; font-size: 0.9rem; transition: color 0.2s ease; } .footer-column a:hover { color: var(--primary-color); } .social-links a { display: flex; align-items: center; gap: 0.5rem; } .social-links svg { width: 20px; height: 20px; fill: var(--primary-color); flex-shrink: 0; } .social-links span { font-size: 0.9rem; color: #8da2b7; } .footer-logos { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; } .footer-logos img { /* Reduce the height of the footer logos so they appear more subtle and aligned with the design. */ height: 24px; width: auto; opacity: 0.8; transition: opacity 0.2s ease; } .footer-logos img:hover { opacity: 1; } .footer-note { text-align: center; color: #8da2b7; font-size: 0.8rem; margin-top: 1rem; } .btn.secondary:hover { background: var(--primary-color); color: var(--background-dark); } /* * SafeID hero button centring * * On the SafeID product page the call‑to‑action button within the hero * should appear centred beneath the headline and subtitle. We turn the * hero text container into a flex column and centre its children. A * top margin is added to the button to separate it from the text. */ .safeid-page .hero-text-content { display: flex; flex-direction: column; align-items: center; } .safeid-page .hero-text-content .btn { margin-top: 1.5rem; } /* * Usage section: "Como você vai usar o seu certificado digital?" * * This section introduces tabbed content for e‑CPF and e‑CNPJ. It * maintains the dark theme while adding interactive tabs that switch * content without reloading the page. Tabs are keyboard accessible * and visually distinguished when selected. Each panel shows a grid * of usage items with icons and descriptions. */ .usage { background: var(--background-dark); color: #cfd9e6; padding: 4rem 0; } .usage-tabs { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; margin-bottom: 2rem; } .usage-tab { background: rgba(0, 230, 255, 0.1); color: var(--primary-color); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2rem; padding: 0.5rem 1.5rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .usage-tab:hover, .usage-tab:focus { background: rgba(0, 230, 255, 0.2); outline: none; } .usage-tab.active { background: var(--primary-color); color: var(--background-dark); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .usage-content { position: relative; } /* Hide inactive panels; active panels are displayed below */ .usage .tab-panel { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.25s ease, transform 0.25s ease; } .usage .tab-panel.active { display: block; opacity: 1; transform: translateY(0); } .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .usage-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.8rem; padding: 1.5rem; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .usage-item:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } .usage-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 230, 255, 0.15); color: var(--primary-color); margin: 0 auto 0.75rem; } .usage-icon svg { width: 24px; height: 24px; fill: currentColor; } .usage-item h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: #ffffff; } .usage-item p { font-size: 0.9rem; color: #cfd9e6; line-height: 1.4; } /* Layout for the updated usage panels (image + text) */ .usage-panel-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; } @media (min-width: 768px) { .usage-panel-content { flex-direction: row; align-items: flex-start; } } .usage-image { flex: 1; max-width: 480px; } .usage-image img { width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); object-fit: cover; } .usage-text { flex: 1; color: #cfd9e6; } .usage-text h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--primary-color); } .usage-text p { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .usage-highlight { background: rgba(0, 230, 255, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem; border-radius: 0.5rem; font-size: 0.95rem; line-height: 1.4; } /* Styles for the 'Seja um Parceiro' page */ /* * Partner hero section * * Instead of loading a heavy background image, the partner page now * uses a gradient background. The gradient gently transitions between * the site’s secondary colour and the dark background, providing * contrast without the cost of downloading an image. The content is * centered and padded similarly to the original hero for continuity. */ .partner-hero { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--background-dark) 100%); color: #ffffff; padding: 6rem 1rem; text-align: center; } .partner-hero .hero-content { max-width: 800px; margin: 0 auto; } .partner-hero .hero-content h1 { font-size: 2rem; margin-bottom: 1rem; line-height: 1.2; } .partner-hero .hero-content .subtitle { font-size: 1.25rem; margin-bottom: 2rem; color: var(--text-muted); } .partner-indicator-section { background: var(--background-dark); padding: 4rem 0; color: #ffffff; } .partner-card { background: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius); padding: 2rem; max-width: 800px; margin: 0 auto; text-align: center; /* Reduce blur on partner cards to lighten GPU work */ backdrop-filter: blur(2px); } .partner-card h2 { margin-bottom: 1rem; font-size: 1.75rem; } .partner-card p { margin-bottom: 1rem; } .benefits-list { list-style: none; padding: 0; margin: 1rem 0; } .benefits-list li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .benefits-list li::before { content: '✓'; color: var(--primary-color); font-weight: 700; } .partner-card .note { margin-top: 1rem; font-style: italic; color: var(--text-muted); } .partner-form-section { background: var(--background-dark); padding: 4rem 0; color: #ffffff; } .partner-form-section h2 { text-align: center; margin-bottom: 2rem; } .partner-form-section .contact-form { max-width: 800px; } .partner-form-section .form-message { margin-top: 1rem; color: var(--primary-color); } .partner-steps-section { background: var(--background-dark); padding: 4rem 0; color: #ffffff; } .partner-steps-section h2 { text-align: center; margin-bottom: 2rem; } .steps { display: flex; flex-direction: column; gap: 2rem; } .step { background: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius); padding: 2rem; text-align: center; flex: 1; } .step-icon { font-size: 1.5rem; background: var(--primary-color); color: var(--background-dark); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 1rem; } @media (min-width: 768px) { .steps { flex-direction: row; } } .partner-faq-section { background: var(--background-dark); padding: 4rem 0; color: #ffffff; } .partner-faq-section h2 { text-align: center; margin-bottom: 2rem; } .faq-item { margin-bottom: 1.5rem; } .faq-item h3 { font-weight: 600; margin-bottom: 0.5rem; } .faq-item p { color: var(--text-muted); margin: 0; } /* * Styles for the FAQ list on the partner page ("Seja um Parceiro"). * * The standard `.faq-item` rule above provides minimal spacing, but for the * partner page we want the questions to appear in card-like containers * similar to those used on the dedicated FAQ page. These rules apply * only to FAQ items within `.partner-faq-section` and give them a * semi‑transparent background, border, padding and a subtle shadow. They * also adjust the heading and paragraph margins to align text neatly. */ .partner-faq-section .faq-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .partner-faq-section .faq-item h3 { font-weight: 600; margin: 0 0 0.5rem 0; } .partner-faq-section .faq-item p { margin: 0; color: var(--text-muted); } /* --------------------------------------------------------------------- */ /* Performance improvements for mobile devices * * Large fixed background images can cause jank on mobile browsers due to * excessive repaints. To mitigate this without altering the look on * larger screens, we disable the `background-attachment: fixed` property * on smaller viewports. The background remains stationary on desktop * while scrolling smoothly on phones and tablets. */ @media (max-width: 768px) { .ecpf-page, .ecnpj-page, .safeid-page { background-attachment: scroll; } } /* --------------------------------------------------------------------- */ /* Lightweight background fragments for product pages * * The original product pages used full‑screen illustrations with * `background‑attachment: fixed`. These heavy images caused jank * because the browser repainted on every scroll. Inspired by * Safeweb’s design, we replace them with small decorative fragments * positioned in opposite corners of a solid dark base. Each fragment * is cropped from the original art and weighs only a few kilobytes, * retaining the neon network aesthetic without the performance cost. */