:root { --palette-dark-base: #121415; --palette-content-box: #1e1f22; --font-color-primary: #d0d0d0; --font-color-headings: #fdfdfd; --accent-color-main: #28B047; --accent-color-vibrant: #3cff20; --accent-color-secondary: #f7c81c; --accent-color-secondary-glow: #ffe00a; --alert-color-danger: #ff4548; --alert-color-danger-glow: #ff0000; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--palette-dark-base); color: var(--font-color-primary); line-height: 1.6; font-size: 17px; } .zb-layout-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; } h1, h2, h3 { color: var(--font-color-headings); font-weight: 700; line-height: 1.3; } .zb-content-section { padding: 60px 0; } .zb-content-section:nth-child(even) { background-color: #161618; } a { color: var(--accent-color-vibrant); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--font-color-headings); } strong { font-weight: 400; } .zb-page-masthead { background-color: #000000; padding: 15px 0; border-bottom: 1px solid #2b2b2b; } .zb-page-masthead .zb-layout-container { display: flex; justify-content: space-between; align-items: center; } .zb-site-logo-link { font-size: 24px; font-weight: 900; color: var(--accent-color-main); text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; } .zb-site-logo-link:hover { animation: logo-glow-pulse 2.5s forwards; } @keyframes logo-glow-pulse { 0%, 7%, 15%, 23% { color: var(--accent-color-main); text-shadow: none; } 3%, 11%, 19% { color: #fff; text-shadow: 0 0 11px #fff, 0 0 26px #fff, 0 0 52px #fff; } 31%, 100% { color: var(--accent-color-vibrant); text-shadow: 0 0 6px var(--accent-color-vibrant), 0 0 12px var(--accent-color-vibrant), 0 0 22px var(--accent-color-vibrant); } } .zb-main-menu-nav ul { list-style: none; display: flex; gap: 25px; } .zb-main-menu-nav a { color: var(--font-color-primary); font-weight: 700; text-transform: uppercase; font-size: 14px; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; } .zb-main-menu-nav a:hover { border-bottom-color: var(--accent-color-vibrant); animation: menu-item-highlight 1.2s ease-out; color: var(--accent-color-vibrant); } .zb-main-menu-nav a.current-page-link { color: var(--font-color-headings); border-bottom-color: var(--accent-color-main); } @keyframes menu-item-highlight { 0% { color: #fff; text-shadow: 0 0 6px #fff, 0 0 11px #fff, 0 0 21px var(--accent-color-vibrant); } 100% { color: var(--accent-color-vibrant); text-shadow: none; } } .zb-hero-banner-section, .zb-page-visual-header { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('../images/main-banner.jpg') no-repeat center center; background-size: cover; text-align: center; padding: 100px 0; } .zb-page-visual-header { padding: 80px 0; } .zb-intro-subtitle { font-size: 1.2rem; color: var(--font-color-primary); } .zb-intro-title { font-size: 3.5rem; text-transform: uppercase; margin: 20px 0; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .zb-page-visual-header .zb-intro-title { font-size: 3rem; } .zb-intro-tagline { font-size: 1.5rem; max-width: 800px; margin: 0 auto 40px; font-weight: 400; } .zb-page-visual-header .zb-intro-tagline { font-size: 1.3rem; } .zb-primary-cta-button { display: inline-block; padding: 12px 30px; font-size: 18px; font-weight: bold; color: #fff; background-color: transparent; border: 2px solid var(--accent-color-vibrant); border-radius: 8px; text-transform: uppercase; box-shadow: 0 0 5px var(--accent-color-vibrant), 0 0 10px var(--accent-color-vibrant); transition: all 0.3s ease; cursor: pointer; } .zb-primary-cta-button:hover { animation: action-button-pop 1.5s ease-out; } @keyframes action-button-pop { 0% { background-color: var(--accent-color-vibrant); color: #000; box-shadow: 0 0 22px var(--accent-color-vibrant), 0 0 44px var(--accent-color-vibrant), 0 0 66px #fff; } 100% { background-color: transparent; color: #fff; box-shadow: 0 0 5px var(--accent-color-vibrant), 0 0 10px var(--accent-color-vibrant); } } .zb-prose-content-block { text-align: left; overflow-wrap: break-word; word-wrap: break-word; } .zb-prose-content-block h3 { text-align: center; margin-bottom: 40px; font-size: 2rem; } .zb-prose-content-block p { margin-bottom: 25px; text-align: justify; hyphens: auto; } .zb-prose-content-block a { position: relative; padding-bottom: 2px; } .zb-prose-content-block a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--accent-color-vibrant); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-out; } .zb-prose-content-block a:hover::after { transform: scaleX(1); } .zb-services-comparison-grid, .zb-testimonial-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .zb-service-card-item, .zb-testimonial-entry { background-color: var(--palette-content-box); padding: 25px; border-radius: 12px; border: 1px solid #2a2a2a; text-align: left; display: flex; flex-direction: column; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; } .zb-service-card-item:hover, .zb-testimonial-entry:hover { transform: scale(1.02); box-shadow: 0 0 25px rgba(57, 255, 20, 0.5); } .zb-product-option-heading { font-size: 1.3rem; font-weight: 700; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #333; text-align: center; } .zb-product-option-heading a.header-link { color: inherit; text-decoration: none; } .zb-service-variant-official .zb-product-option-heading { color: var(--accent-color-main); } .zb-service-variant-donor .zb-product-option-heading { color: var(--accent-color-secondary); } .zb-service-variant-warning .zb-product-option-heading { color: var(--alert-color-danger); } .zb-service-variant-official:hover .zb-product-option-heading { animation: card-fx-official 1.2s ease-out; } .zb-service-variant-donor:hover .zb-product-option-heading { animation: card-fx-donor 1.2s ease-out; } .zb-service-variant-warning:hover .zb-product-option-heading { animation: card-fx-warning 1.2s ease-out; } @keyframes card-fx-official { 0% { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent-color-vibrant); } 100% { color: var(--accent-color-main); text-shadow: none; } } @keyframes card-fx-donor { 0% { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent-color-secondary-glow); } 100% { color: var(--accent-color-secondary); text-shadow: none; } } @keyframes card-fx-warning { 0% { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--alert-color-danger), 0 0 30px var(--alert-color-danger-glow); } 100% { color: var(--alert-color-danger); text-shadow: none; } } .zb-service-card-item ul { list-style: none; flex-grow: 1; } .zb-service-card-item ul li { margin-bottom: 10px; display: flex; align-items: center; } .zb-service-card-item ul li::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background-size: contain; background-repeat: no-repeat; } .zb-service-card-item ul li.check-positive::before { background-image: url('data:image/svg+xml;utf8,<svg fill="%2328B047"viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>'); } .zb-service-card-item ul li.check-negative::before { background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff4548"viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'); } .zb-service-cost-panel { margin-top: 20px; padding-top: 15px; border-top: 1px solid #333; text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--font-color-headings); } .zb-internal-links-list { display: flex; flex-direction: column; align-items: center; gap: 15px; } .zb-internal-links-list a { display: block; width: 100%; max-width: 400px; background-color: var(--palette-content-box); padding: 12px 20px; border-radius: 8px; border: 1px solid #2a2a2a; transition: all 0.3s ease; text-align: center; } .zb-internal-links-list a:hover { background-color: #2a2a2a; color: var(--font-color-headings); border-color: var(--accent-color-vibrant); } .zb-testimonial-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; gap: 15px; } .zb-testimonial-author-name { font-size: 1.1rem; color: var(--font-color-headings); } .zb-feedback-rating-stars { color: #f5c518; } .zb-feedback-body { flex-grow: 1; } .zb-feedback-body p { margin: 0; } .zb-service-type-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0; } .zb-service-tag-new { background-color: rgba(40, 176, 71, 0.2); border: 1px solid var(--accent-color-main); color: var(--accent-color-main); } .zb-service-tag-duplicate { background-color: rgba(247, 200, 28, 0.2); border: 1px solid var(--accent-color-secondary); color: var(--accent-color-secondary); } .zb-page-basement { background-color: #000000; padding: 30px 0; margin-top: 60px; text-align: center; font-size: 14px; } .zb-footer-navigation ul { list-style: none; display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .zb-footer-navigation a { color: var(--font-color-primary); } .zb-footer-navigation a:hover { color: var(--font-color-headings); } .zb-footer-legal-info { border-top: 1px solid #2a2a2a; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; } .zb-auxiliary-links a { margin-left: 15px; color: #777; } .zb-auxiliary-links a:hover { color: var(--font-color-primary); } .timeline-wrapper { max-width: 800px; margin: 0 auto; position: relative; padding: 20px 0; } .timeline-wrapper::before { content: ''; position: absolute; left: 30px; top: 0; width: 4px; height: 100%; background-color: #333; } .timeline-event { position: relative; margin-bottom: 50px; padding-left: 80px; } .timeline-event:last-child { margin-bottom: 0; } .timeline-icon { position: absolute; left: 0; top: 0; width: 64px; height: 64px; background-color: var(--accent-color-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid var(--palette-dark-base); z-index: 1; } .timeline-icon svg { width: 32px; height: 32px; fill: #fff; } .timeline-content { background-color: var(--palette-content-box); padding: 25px; border-radius: 12px; border: 1px solid #2a2a2a; } .timeline-content h4 { font-size: 1.5rem; margin-bottom: 10px; color: var(--font-color-headings); } .violations-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .violations-list li { background-color: var(--palette-content-box); padding: 20px 25px; border-radius: 12px; border-left: 4px solid var(--accent-color-secondary); border-right: 4px solid var(--accent-color-secondary); display: flex; align-items: center; gap: 20px; font-size: 1.05rem; } .violations-list li svg { width: 40px; height: 40px; fill: var(--accent-color-secondary-glow); flex-shrink: 0; } .comparison-table { width: 100%; border-collapse: collapse; margin-top: 30px; } .comparison-table th, .comparison-table td { padding: 15px; text-align: center; border: 1px solid #333; } .comparison-table th { background-color: var(--palette-content-box); font-size: 1.2rem; } .comparison-table td { background-color: #222326; } .comparison-table .feature-column { text-align: left; width: 40%; } .comparison-table .check-positive { color: var(--accent-color-vibrant); font-weight: 700; } .comparison-table .check-negative { color: var(--alert-color-danger); font-weight: 700; } .qa-section { max-width: 900px; margin: 0 auto; } .qa-group { margin-bottom: 50px; } .qa-group-title { text-align: center; font-size: 1.8rem; border-bottom: 2px solid var(--accent-color-main); padding-bottom: 15px; margin-bottom: 30px; } .qa-item { background-color: var(--palette-content-box); border-radius: 12px; margin-bottom: 20px; border: 1px solid #2a2a2a; } .qa-question { font-size: 1.2rem; font-weight: 700; color: var(--font-color-headings); padding: 20px; cursor: pointer; position: relative; } .qa-answer { padding: 0 20px 20px; text-align: justify; } .key-points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } .key-point-card { background-color: var(--palette-content-box); padding: 25px; border-radius: 12px; border-top: 4px solid var(--accent-color-main); text-align: center; } .key-point-card h4 { font-size: 1.3rem; margin-bottom: 15px; } .feedback-grid-full { display: flex; flex-direction: column; gap: 25px; } .feedback-card-full { background-color: var(--palette-content-box); padding: 25px; border-radius: 12px; border: 1px solid #2a2a2a; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; } .feedback-card-full:hover { transform: scale(1.01); box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); } .feedback-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; gap: 15px; } .feedback-card-author { font-size: 1.2rem; font-weight: 700; } .feedback-card-full .zb-feedback-rating-stars { margin-top: 10px; } .zb-service-type-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0; } .zb-service-tag-new { background-color: rgba(40, 176, 71, 0.2); border: 1px solid var(--accent-color-main); color: var(--accent-color-main); } .zb-service-tag-duplicate { background-color: rgba(247, 200, 28, 0.2); border: 1px solid var(--accent-color-secondary); color: var(--accent-color-secondary); } .final-cta-block { text-align: center; padding: 40px 25px; border-top: 2px solid var(--accent-color-main); border-bottom: 2px solid var(--accent-color-main); margin-top: 60px; } .final-cta-block h3 { margin-bottom: 20px; } .final-cta-block p { max-width: 600px; margin: 0 auto 30px; } .review-capture-area { max-width: 700px; margin: 80px auto 0; padding: 40px; background-color: var(--palette-content-box); border-radius: 12px; border: 1px solid #2a2a2a; } .review-capture-area h3 { margin-bottom: 10px; text-align: center; } .review-capture-area p { text-align: center; margin-bottom: 30px; } .add-testimonial-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: flex; gap: 20px; } .form-row input { flex: 1; } .add-testimonial-form input, .add-testimonial-form textarea { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid #333; background-color: var(--palette-dark-base); color: #fff; font-size: 16px; transition: all 0.3s ease; } .add-testimonial-form input::placeholder, .add-testimonial-form textarea::placeholder { color: #777; } .add-testimonial-form input:focus, .add-testimonial-form textarea:focus { outline: none; border-color: var(--accent-color-vibrant); box-shadow: 0 0 10px rgba(60, 255, 32, 0.3); } .add-testimonial-form textarea { resize: vertical; min-height: 120px; } .rating-input-stars { display: flex; flex-direction: row-reverse; justify-content: center; } .rating-input-stars input[type="radio"] { display: none; } .rating-input-stars label { font-size: 30px; color: #444; cursor: pointer; transition: color 0.2s; padding: 0 5px; } .rating-input-stars input[type="radio"]:checked ~ label, .rating-input-stars label:hover, .rating-input-stars label:hover ~ label { color: var(--accent-color-secondary); } .add-testimonial-form .zb-primary-cta-button { align-self: center; width: 60%; } .form-success-message { padding: 30px; border: 1px solid var(--accent-color-main); border-radius: 12px; background-color: rgba(40, 176, 71, 0.1); text-align: center; transition: opacity 0.4s ease; } .form-success-message h3 { margin-bottom: 15px; color: var(--accent-color-vibrant); } .geo-grid-link { display: block; background: var(--palette-content-box); color: var(--font-color-primary); text-decoration: none; padding: 15px; border-radius: 8px; transition: all 0.3s ease; text-align: center; border: 1px solid #2a2a2a; } .geo-grid-link:hover { background: #2a2a2a; color: var(--accent-color-vibrant); transform: translateY(-3px); border-color: var(--accent-color-vibrant); } .mobile-text { display: none; } @media (max-width: 992px) { .zb-services-comparison-grid, .zb-testimonial-showcase, .key-points-grid, .feedback-grid-full { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .zb-intro-title { font-size: 2.5rem; } .zb-page-visual-header .zb-intro-title { font-size: 2.2rem; } .zb-intro-tagline { font-size: 1.2rem; } .zb-page-masthead .zb-layout-container { flex-direction: column; gap: 15px; } .zb-services-comparison-grid, .zb-testimonial-showcase, .key-points-grid, .feedback-grid-full { grid-template-columns: 1fr; } .zb-footer-legal-info { flex-direction: column; gap: 15px; } .timeline-wrapper::before { left: 20px; } .timeline-event { padding-left: 60px; } .timeline-icon { width: 44px; height: 44px; } .timeline-icon svg { width: 22px; height: 22px; } .violations-list { grid-template-columns: 1fr; } .feedback-card-header { flex-direction: column; align-items: flex-start; } .zb-testimonial-entry .zb-testimonial-header { flex-direction: row; align-items: center; } .input-group { flex-direction: column; } .desktop-text { display: none; } .mobile-text { display: inline; } } @media (max-width: 480px) { .zb-main-menu-nav ul, .zb-footer-navigation ul { flex-direction: column; text-align: center; gap: 15px; } .zb-intro-title { font-size: 2rem; } }