/* * 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; } img, video { max-width: 100%; height: 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; gap: 1rem; } /* * 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; flex-shrink: 0; } /* Style for the logo image inside the navigation bar */ .logo img { height: 52px; width: auto; display: block; object-fit: contain; } .nav-menu { display: flex; gap: 2rem; align-items: center; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.06); color: #ffffff; cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; fill: currentColor; } /* * 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); } @media (max-width: 767px) { body { overflow-x: hidden; } .container { width: min(100% - 2rem, 1200px); } .navbar .nav-container { flex-wrap: wrap; align-items: center; padding-top: 1rem; padding-bottom: 1rem; } .logo img { height: 42px; } .nav-toggle { display: inline-flex; } .nav-menu { display: none; width: 100%; flex-direction: column; gap: 0.75rem; } .navbar.menu-open .nav-menu { display: flex; } .nav-menu > li { width: 100%; } .nav-menu li a, .nav-menu .dropdown > .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0.9rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; } .nav-menu .dropdown-menu { display: none; position: static; width: 100%; margin-top: 0.5rem; border-radius: 0.75rem; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.08); } .hero, .sub-hero, .partner-hero { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; } .hero { padding-left: 1rem; padding-right: 1rem; } .hero-text { padding: 1.5rem 1rem; } .hero-title { font-size: 2rem; } .typewriter { font-size: 1.5rem; min-height: 2rem; } .hero-subtitle, .partner-hero .hero-content .subtitle, .usage-text p, .faq-question { font-size: 1rem; } .section-title, .partner-hero .hero-content h1, .usage-text h3, .partner-card h2 { font-size: 1.65rem; } .pricing, .why, .info, .usage, .contact, .partner-indicator-section, .partner-form-section, .partner-steps-section, .partner-faq-section, .footer { padding-top: 3rem; padding-bottom: 3rem; } .pricing-cards, .why-cards, .apps-grid, .usage-grid, .safeid-page .feature-list, .safeid-page .security-list, .ecpf-page .app-list, .ecnpj-page .app-list { grid-template-columns: 1fr; gap: 1rem; } .usage-tabs { flex-direction: column; align-items: stretch; gap: 0.75rem; } .usage-tab { width: 100%; text-align: center; } .usage-panel-content, .sub-hero .hero-layout, .footer-grid, .footer-logos { gap: 1.25rem; } .sub-hero .hero-layout, .footer-grid { flex-direction: column; } .sub-hero .hero-layout { text-align: center; } .sub-hero .hero-text-content, .sub-hero .hero-image, .footer-column { width: 100%; } .contact-form button, .btn.primary, .btn.secondary, .cta-button { width: 100%; text-align: center; justify-content: center; } .footer-logos { flex-wrap: wrap; } .footer-menu, .social-links a, .benefits-list li { align-items: flex-start; } } @media (max-width: 479px) { .hero-title { font-size: 1.75rem; } .typewriter { font-size: 1.25rem; } .section-title, .partner-hero .hero-content h1, .usage-text h3, .partner-card h2 { font-size: 1.45rem; } .pricing-card, .why-card, .usage-item, .partner-card, .step, .partner-faq-section .faq-item { padding: 1.25rem; } .footer-logos img { height: 20px; } } /* * 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. */