/* ============================================================ PakTaxFiling.com.pk — Main Stylesheet Bootstrap 5 Extension + Custom Design System ============================================================ */ /* ─── CSS Custom Properties ─────────────────────────────── */ :root { /* Brand Palette */ --ptf-primary: #1a3c6e; --ptf-primary-light: #2353a0; --ptf-primary-dark: #102648; --ptf-accent: #e8a020; --ptf-accent-light: #f5b840; --ptf-accent-dark: #c98010; --ptf-green: #198754; --ptf-red: #dc3545; /* Neutral Palette */ --ptf-white: #ffffff; --ptf-off-white: #f8f9fc; --ptf-light-gray: #f0f2f7; --ptf-mid-gray: #dee2e6; --ptf-gray: #6c757d; --ptf-dark-gray: #343a40; --ptf-dark: #0d1b2a; /* Typography */ --ptf-font-body: 'Inter', system-ui, -apple-system, sans-serif; --ptf-font-heading: 'Poppins', 'Inter', sans-serif; /* Spacing */ --ptf-section-py: 5rem; --ptf-section-py-sm: 3rem; /* Shadows */ --ptf-shadow-sm: 0 2px 8px rgba(26,60,110,.08); --ptf-shadow: 0 4px 20px rgba(26,60,110,.12); --ptf-shadow-lg: 0 8px 40px rgba(26,60,110,.18); --ptf-shadow-card: 0 2px 16px rgba(26,60,110,.10); /* Border Radius */ --ptf-radius: 0.75rem; --ptf-radius-sm: 0.5rem; --ptf-radius-lg: 1rem; --ptf-radius-xl: 1.5rem; /* Transitions */ --ptf-transition: all 0.25s ease; --ptf-transition-fast:all 0.15s ease; } /* ─── Global Reset & Base ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; /* BUG FIX: only had overflow-x:hidden. Any element that escapes the body's clipping box (position:fixed children — WhatsApp float, back-to-top — or a stray element wider than the viewport) is clipped by the *initial containing block* (), not by . Without this, mobile browsers let the whole page be dragged sideways, revealing blank white space to the right of the content. Setting the same rule on closes that gap. */ overflow-x: hidden; width: 100%; } body { font-family: var(--ptf-font-body); color: var(--ptf-dark-gray); background: var(--ptf-white); line-height: 1.7; overflow-x: hidden; width: 100%; max-width: 100vw; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Safety net: nothing should ever be intrinsically wider than its column, whatever content editors/plugins drop in (images, embeds, tables). */ img, svg, video, iframe, embed, table { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: var(--ptf-font-heading); font-weight: 700; line-height: 1.3; color: var(--ptf-dark); } a { color: var(--ptf-primary-light); text-decoration: none; transition: var(--ptf-transition-fast); } a:hover { color: var(--ptf-primary); } img { max-width: 100%; height: auto; display: block; } /* ─── Utility Classes ────────────────────────────────────── */ .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } /* CSS-011 fix: the original #e8a020 gold on a white/light background is ~2.22:1 contrast (fails WCAG AA for text). This darker gold keeps the same accent hue but reaches ~5.3:1 so headings, values, and labels that use this class as real text remain legible. Decorative icon uses are unaffected in meaning, only in exact shade. */ .text-primary-custom { color: #96600c !important; } .bg-primary-custom { background-color: var(--ptf-primary) !important; } .bg-accent { background-color: var(--ptf-accent) !important; } .bg-off-white { background-color: var(--ptf-off-white) !important; } .bg-light-gray { background-color: var(--ptf-light-gray) !important; } .section-py { padding-top: var(--ptf-section-py); padding-bottom: var(--ptf-section-py); } .section-py-sm { padding-top: var(--ptf-section-py-sm); padding-bottom: var(--ptf-section-py-sm); } /* ─── Bootstrap Overrides ────────────────────────────────── */ .btn-primary-custom { background: var(--ptf-primary); border-color: var(--ptf-primary); color: var(--ptf-white); font-weight: 600; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition); } .btn-primary-custom:hover, .btn-primary-custom:focus { background: var(--ptf-primary-light); border-color: var(--ptf-primary-light); color: var(--ptf-white); box-shadow: 0 4px 16px rgba(26,60,110,.30); transform: translateY(-1px); } .btn-accent { background: var(--ptf-accent); border-color: var(--ptf-accent); color: var(--ptf-dark); font-weight: 700; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition); } .btn-accent:hover { background: var(--ptf-accent-light); border-color: var(--ptf-accent-light); color: var(--ptf-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,160,32,.35); } .btn-outline-primary-custom { border: 1.5px solid var(--ptf-primary); color: var(--ptf-primary); font-weight: 600; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition); background: transparent; } .btn-outline-primary-custom:hover { background: var(--ptf-primary); color: #fff; transform: translateY(-1px); } /* ─── Top Bar ────────────────────────────────────────────── */ .ptf-topbar { background: var(--ptf-primary-dark); font-size: 0.8rem; } .topbar-link { color: rgba(255,255,255,.85); text-decoration: none; transition: var(--ptf-transition-fast); } .topbar-link:hover { color: var(--ptf-accent-light); } .topbar-divider { color: rgba(255,255,255,.3); } .topbar-social { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); font-size: 0.85rem; transition: var(--ptf-transition); text-decoration: none; } .topbar-social:hover { background: var(--ptf-primary-light); color: #fff; } .topbar-whatsapp:hover { background: #0f7a3f; } /* ─── Main Navbar ────────────────────────────────────────── */ .ptf-navbar { background: var(--ptf-white); box-shadow: 0 2px 12px rgba(26,60,110,.10); padding: 0.6rem 0; transition: background 0.3s, box-shadow 0.3s; } .ptf-navbar.scrolled { box-shadow: var(--ptf-shadow); } .ptf-logo-img { border-radius: var(--ptf-radius-sm); } .ptf-brand-name { font-family: var(--ptf-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--ptf-primary); line-height: 1; } .ptf-brand-tagline { font-size: 0.65rem; color: var(--ptf-gray); text-transform: uppercase; letter-spacing: .05em; } .ptf-navbar .nav-link { font-weight: 500; font-size: 0.92rem; color: var(--ptf-dark-gray); padding: 0.5rem 0.75rem; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition-fast); position: relative; } .ptf-navbar .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--ptf-primary); transition: all 0.25s ease; border-radius: 2px; } .ptf-navbar .nav-link:hover::after, .ptf-navbar .nav-link.active::after { left: 10%; right: 10%; } .ptf-navbar .nav-link:hover, .ptf-navbar .nav-link.active { color: var(--ptf-primary); background: rgba(26,60,110,.05); } /* Mega Menu */ .ptf-mega-menu { width: 600px; border: none; box-shadow: var(--ptf-shadow-lg); border-radius: var(--ptf-radius); padding: 0.25rem; margin-top: 0.25rem; border-top: 3px solid var(--ptf-primary); } @media (max-width: 991.98px) { .ptf-mega-menu { width: 100%; } } /* ─── Mobile Nav CTA / Profile Dropdown ────────────────────────────────── BUG FIX: on mobile the collapsed navbar stacks the nav links, then the CTA row (Login/Register, or the logged-in profile button) below them. That CTA row had no justify-content, so it sat flush against the LEFT edge of the screen. The profile dropdown uses Bootstrap's `.dropdown-menu-end`, which anchors the menu's RIGHT edge to the toggle button and grows leftward — with the button pinned to the far left, most of the 200px-wide menu (including the "Dashboard" and "Logout" items) rendered off-screen to the left and got clipped by `overflow-x: hidden` on . Right-aligning the CTA row on mobile keeps the whole dropdown inside the viewport, matching how it already behaves on desktop where the row sits at the far right of the navbar. */ @media (max-width: 991.98px) { #navbarMain > .d-flex { justify-content: flex-end; flex-wrap: wrap; } #navbarMain .dropdown-menu { /* Keep the menu fully on-screen and independently scrollable if the viewport is short, instead of being cut off by any ancestor. */ max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; /* Sit above the fixed WhatsApp/back-to-top buttons (z-index 1040/1050) so they can never visually cover the open dropdown. */ z-index: 1060; } #navbarMain .dropdown-menu .dropdown-item { /* Touch-friendly spacing per the mobile UX requirement. */ padding-top: 0.65rem; padding-bottom: 0.65rem; } } .ptf-mega-menu .dropdown-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ptf-primary); font-weight: 700; padding-top: 0.75rem; } .ptf-mega-menu .dropdown-item { font-size: 0.85rem; padding: 0.35rem 0.75rem; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition-fast); } .ptf-mega-menu .dropdown-item:hover { background: var(--ptf-light-gray); color: var(--ptf-primary); padding-left: 1rem; } /* ─── Section Headings ───────────────────────────────────── */ .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--ptf-dark); margin-bottom: 0.75rem; } .section-subtitle { font-size: 1.05rem; color: var(--ptf-gray); max-width: 600px; } .section-badge { display: inline-block; background: rgba(26,60,110,.08); color: var(--ptf-primary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 0.3rem 0.9rem; border-radius: 2rem; margin-bottom: 0.75rem; } .title-underline { display: inline-block; position: relative; } .title-underline::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 60%; height: 4px; background: var(--ptf-accent); border-radius: 2px; } /* ─── Cards ──────────────────────────────────────────────── */ .ptf-card { background: var(--ptf-white); border-radius: var(--ptf-radius); box-shadow: var(--ptf-shadow-card); border: 1px solid rgba(26,60,110,.06); transition: var(--ptf-transition); overflow: hidden; } .ptf-card:hover { transform: translateY(-4px); box-shadow: var(--ptf-shadow-lg); border-color: rgba(26,60,110,.12); } /* Service Card */ .service-card { cursor: pointer; } .service-card .service-icon { width: 56px; height: 56px; background: rgba(26,60,110,.08); border-radius: var(--ptf-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ptf-primary); transition: var(--ptf-transition); } .service-card:hover .service-icon { background: var(--ptf-primary); color: var(--ptf-white); } .service-card .service-title { font-size: 1rem; font-weight: 700; } .service-card .service-price { font-size: 0.85rem; font-weight: 700; color: var(--ptf-primary); background: rgba(26,60,110,.06); padding: 0.2rem 0.6rem; border-radius: 1rem; } .service-card .service-turnaround { font-size: 0.78rem; color: var(--ptf-gray); } /* ─── Breadcrumb ─────────────────────────────────────────── */ .ptf-breadcrumb { background: var(--ptf-light-gray); padding: 0.65rem 0; } .ptf-breadcrumb .breadcrumb { margin: 0; font-size: 0.85rem; } .ptf-breadcrumb .breadcrumb-item a { color: var(--ptf-primary); } .ptf-breadcrumb .breadcrumb-item.active { color: var(--ptf-gray); } .ptf-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ptf-gray); } /* ─── Page Banner (templates/page-banner.php) ──────────────────────────── BUG FIX: this component is used on 7 pages (services, order, blog, knowledge, order-tracking, blog-post, knowledge-article) but had ZERO matching CSS anywhere in the project — every class it renders (.ptf-page-banner, .page-banner-badge, .page-banner-title, .page-banner-subtitle) was undefined, so it rendered as unstyled black text on a white background instead of the intended hero banner. ───── */ .ptf-page-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ptf-primary-dark), var(--ptf-primary) 60%, var(--ptf-primary-light)); color: var(--ptf-white); } .ptf-page-banner-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .ptf-page-banner-shape-1, .ptf-page-banner-shape-2 { position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); } .ptf-page-banner-shape-1 { width: 340px; height: 340px; top: -140px; right: -80px; } .ptf-page-banner-shape-2 { width: 220px; height: 220px; bottom: -120px; left: 8%; background: rgba(232,160,32,.10); } .page-banner-badge { display: inline-flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: var(--ptf-white); font-size: 0.78rem; font-weight: 600; letter-spacing: .02em; padding: 0.35rem 0.85rem; border-radius: 2rem; } .page-banner-title { color: var(--ptf-white); font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin: 0; } .page-banner-subtitle { color: rgba(255,255,255,.82); font-size: 1rem; max-width: 640px; } .ptf-page-banner .breadcrumb-item a { color: rgba(255,255,255,.85); } .ptf-page-banner .breadcrumb-item.active { color: rgba(255,255,255,.6); } .ptf-page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); } /* ─── Category Filter Tabs (Services page) ───────────────────────────── */ .ptf-category-tabs .nav-link { background: var(--ptf-off-white); border: 1px solid var(--ptf-mid-gray); color: var(--ptf-dark-gray); font-weight: 600; font-size: 0.88rem; border-radius: 2rem; padding: 0.5rem 1.15rem; transition: var(--ptf-transition-fast); } .ptf-category-tabs .nav-link:hover { background: rgba(26,60,110,.08); color: var(--ptf-primary); } .ptf-category-tabs .nav-link.active { background: var(--ptf-primary); border-color: var(--ptf-primary); color: var(--ptf-white); box-shadow: 0 4px 14px rgba(26,60,110,.25); } /* ─── Service Card (pages/services.php) ────────────────────────────────── BUG FIX: pages/services.php renders .ptf-service-card / .ptf-service-icon / .ptf-service-body / .ptf-service-badge / etc., which is a DIFFERENT, unrelated set of class names from the unprefixed .service-card block defined above (used on the homepage). None of the .ptf-service-* classes had any CSS, so the Services listing page rendered as plain unstyled text/links stacked on top of each other with no card boundaries, icons, spacing, or hover states — exactly the "broken/incomplete CSS" reported. This block gives it a real card treatment consistent with the rest of the site's design system (same tokens as .ptf-card above) and is fully responsive (stacks cleanly at tablet/mobile widths via Bootstrap's col-lg-4/col-md-6 grid already used in the markup). ───────────────── */ .ptf-service-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ptf-white); border: 1px solid rgba(26,60,110,.08); border-radius: var(--ptf-radius-lg); box-shadow: var(--ptf-shadow-card); padding: 1.75rem 1.5rem 1.5rem; transition: var(--ptf-transition); } .ptf-service-card:hover { transform: translateY(-6px); box-shadow: var(--ptf-shadow-lg); border-color: rgba(26,60,110,.16); } .ptf-service-badge { position: absolute; top: 1rem; right: 1rem; background: var(--ptf-primary); color: var(--ptf-white); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0.3rem 0.7rem; border-radius: 2rem; z-index: 2; } .ptf-service-badge.ptf-badge-featured { background: var(--ptf-accent); color: var(--ptf-dark); top: 2.4rem; } .ptf-service-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: var(--ptf-radius); background: rgba(26,60,110,.08); color: var(--ptf-primary); font-size: 1.65rem; margin-bottom: 1.1rem; transition: var(--ptf-transition); } .ptf-service-card:hover .ptf-service-icon { background: var(--ptf-primary); color: var(--ptf-white); transform: scale(1.06); } .ptf-service-body { flex: 1 1 auto; display: flex; flex-direction: column; } .ptf-service-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ptf-accent-dark); margin-bottom: 0.4rem; } .ptf-service-title { font-size: 1.15rem; margin-bottom: 0.6rem; } .ptf-service-title a { color: var(--ptf-dark); transition: var(--ptf-transition-fast); } .ptf-service-title a:hover { color: var(--ptf-primary); } .ptf-service-desc { font-size: 0.9rem; color: var(--ptf-gray); line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ptf-service-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--ptf-mid-gray); } .ptf-service-meta-item { font-size: 0.8rem; color: var(--ptf-gray); } .ptf-service-price { font-size: 0.85rem; font-weight: 700; color: var(--ptf-primary); background: rgba(26,60,110,.06); padding: 0.25rem 0.65rem; border-radius: 1rem; } .ptf-service-footer { display: flex; align-items: stretch; gap: 0.5rem; margin-top: 1.25rem; } .ptf-service-footer .btn-accent { flex: 0 0 auto; width: 42px; display: flex; align-items: center; justify-content: center; padding: 0; } @media (max-width: 767.98px) { .ptf-service-card { padding: 1.4rem 1.15rem 1.15rem; } .ptf-category-tabs .nav-link { font-size: 0.82rem; padding: 0.45rem 0.9rem; } } /* ─── Testimonials ───────────────────────────────────────── */ .testimonial-card { background: var(--ptf-white); border-radius: var(--ptf-radius); padding: 1.75rem; box-shadow: var(--ptf-shadow-card); border-left: 4px solid var(--ptf-accent); transition: var(--ptf-transition); } .testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--ptf-shadow); } .testimonial-stars { color: var(--ptf-accent); font-size: 0.9rem; } .testimonial-quote { font-size: 2.5rem; line-height: 1; color: var(--ptf-accent); font-family: Georgia, serif; } .testimonial-text { font-size: 0.95rem; color: var(--ptf-dark-gray); line-height: 1.7; font-style: italic; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ptf-accent); } .testimonial-name { font-weight: 700; font-size: 0.9rem; } .testimonial-meta { font-size: 0.78rem; color: var(--ptf-gray); } /* ─── Stats Counter ──────────────────────────────────────── */ .stats-section { background: var(--ptf-primary); } .stat-item { text-align: center; } .stat-card { text-align: center; } .stat-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.10); color: var(--ptf-accent-light); font-size: 1.5rem; } .stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--ptf-white); font-family: var(--ptf-font-heading); line-height: 1; } .stat-suffix { color: var(--ptf-accent); } .stat-label { font-size: 0.9rem; color: rgba(255,255,255,.75); margin-top: 0.25rem; } /* ─── Why Choose Us ──────────────────────────────────────── */ .ptf-why-us.bg-primary-dark-texture { background: linear-gradient(135deg, var(--ptf-primary-dark) 0%, var(--ptf-primary) 100%); position: relative; overflow: hidden; } .section-badge-light { background: rgba(255,255,255,.12); color: var(--ptf-white); } .text-white-70 { color: rgba(255,255,255,.70); } .text-accent-light { color: var(--ptf-accent-light); } .trust-badges .trust-badge-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--ptf-white); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 2rem; padding: 0.4rem 0.85rem; } .trust-badges .trust-badge-item i { color: var(--ptf-accent-light); } .why-card { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--ptf-white); border-radius: var(--ptf-radius); box-shadow: var(--ptf-shadow-card); padding: 1.25rem; height: 100%; transition: var(--ptf-transition); } .why-card:hover { transform: translateY(-3px); box-shadow: var(--ptf-shadow-lg); } .why-card-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--ptf-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .why-icon-accent { background: rgba(232,160,32,.12); color: var(--ptf-accent-dark); } .why-icon-success { background: rgba(25,135,84,.12); color: var(--ptf-green); } .why-icon-primary { background: rgba(26,60,110,.12); color: var(--ptf-primary); } .why-icon-warning { background: rgba(253,126,20,.12); color: #fd7e14; } .why-icon-info { background: rgba(13,202,240,.12); color: #0891a8; } .why-card-content h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--ptf-dark); } .why-card-content p { font-size: 0.82rem; color: var(--ptf-gray); line-height: 1.6; margin-bottom: 0; } /* ─── FAQ Accordion ──────────────────────────────────────── */ .ptf-accordion .accordion-button { font-weight: 600; color: var(--ptf-dark); background: var(--ptf-white); box-shadow: none; border: none; font-size: 0.95rem; } .ptf-accordion .accordion-button:not(.collapsed) { color: var(--ptf-primary); background: rgba(26,60,110,.04); } .ptf-accordion .accordion-button::after { filter: none; } .ptf-accordion .accordion-item { border: 1px solid var(--ptf-mid-gray); border-radius: var(--ptf-radius-sm) !important; margin-bottom: 0.5rem; overflow: hidden; } .ptf-accordion .accordion-body { font-size: 0.9rem; color: var(--ptf-gray); line-height: 1.8; } /* ─── Hero Section ───────────────────────────────────────── */ .ptf-hero { background: linear-gradient(135deg, var(--ptf-primary-dark) 0%, var(--ptf-primary) 50%, var(--ptf-primary-light) 100%); position: relative; overflow: hidden; min-height: 600px; } .ptf-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(232,160,32,.15) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .ptf-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; color: var(--ptf-white); line-height: 1.2; } .ptf-hero-accent { color: var(--ptf-accent-light); } .ptf-hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,.80); max-width: 580px; line-height: 1.7; } .ptf-hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 2rem; margin-bottom: 1rem; } .ptf-hero-badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ptf-accent); animation: blink 1.4s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .ptf-hero-trust { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: rgba(255,255,255,.80); } /* ─── Hero Section (markup used on home.php) ─────────────── These classes are emitted directly by pages/home.php. They were missing from this stylesheet, which is why hero text rendered in the browser's default dark color on top of the dark hero gradient background (invisible / low contrast). */ .ptf-hero { padding: 6rem 0 4rem; color: var(--ptf-white); } .ptf-hero .min-vh-hero { min-height: 460px; } .hero-badge { display: inline-flex; align-items: center; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: var(--ptf-white); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 2rem; } .hero-headline { color: var(--ptf-white); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.25; margin-bottom: 0; } .text-accent-gradient { background: linear-gradient(90deg, var(--ptf-accent-light), var(--ptf-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-highlight { color: var(--ptf-accent-light); } .hero-subtext { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.7; max-width: 560px; } .hero-trust-pills .trust-pill { display: inline-flex; align-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: var(--ptf-white); font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.75rem; border-radius: var(--ptf-radius-sm); } .hero-cta-primary { color: var(--ptf-dark); } /* CSS-006 fix: white text on the raw WhatsApp brand green (#25d366) is only ~1.98:1 contrast, failing WCAG AA. Using a darker, still-recognizably- green shade for the text-bearing surface (~5.4:1 with white) fixes the "Free Consultation"/"Chat" label contrast without changing the WhatsApp icon itself. */ .btn-whatsapp-hero { background: #0f7a3f; border-color: #0f7a3f; color: var(--ptf-white); font-weight: 700; border-radius: var(--ptf-radius-sm); transition: var(--ptf-transition); } .btn-whatsapp-hero:hover { background: #0c6633; border-color: #0c6633; color: var(--ptf-white); transform: translateY(-1px); } .hero-micro-stats { color: var(--ptf-white); } .hero-micro-stat strong { font-size: 1.35rem; font-weight: 800; color: var(--ptf-accent-light); } .hero-micro-stat small { color: rgba(255,255,255,.75); font-size: 0.78rem; } .hero-micro-stat-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.2); } /* Right-side visual card */ .hero-visual-wrap { position: relative; width: 100%; max-width: 460px; } .hero-illustration-card { background: var(--ptf-white); border-radius: var(--ptf-radius-lg); box-shadow: var(--ptf-shadow-lg); overflow: hidden; } .hic-header { display: flex; gap: 0.4rem; padding: 0.9rem 1.1rem; background: var(--ptf-off-white); border-bottom: 1px solid var(--ptf-mid-gray); } .hic-logo-dot { width: 10px; height: 10px; border-radius: 50%; } .hic-body { padding: 1.25rem; color: var(--ptf-dark-gray); } .hic-title { font-weight: 700; color: var(--ptf-primary); font-size: 1rem; } .hic-subtitle { font-size: 0.8rem; color: var(--ptf-gray); margin-bottom: 0.5rem; } .hic-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .hic-mini-service { display: flex; align-items: center; gap: 0.4rem; background: var(--ptf-off-white); border-radius: var(--ptf-radius-sm); padding: 0.5rem 0.6rem; font-size: 0.78rem; color: var(--ptf-dark-gray); } .hic-mini-service i { color: var(--svc-color, var(--ptf-primary)); } .hero-card-float { position: absolute; z-index: 2; background: var(--ptf-white); border-radius: var(--ptf-radius); box-shadow: var(--ptf-shadow); padding: 0.6rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--ptf-dark-gray); display: none; } .hero-card-float .hcf-inner { display: flex; align-items: center; white-space: nowrap; } @media (min-width: 992px) { .hero-card-float { display: block; } .hero-card-float-1 { top: -1rem; right: 2rem; } .hero-card-float-2 { top: 40%; left: -1.5rem; } .hero-card-float-3 { bottom: -1rem; right: 3rem; } } .trust-item i { color: var(--ptf-accent-light); } /* ─── Newsletter Strip ───────────────────────────────────── */ .ptf-newsletter-strip { background: linear-gradient(90deg, var(--ptf-primary) 0%, var(--ptf-primary-light) 100%); color: white; } .ptf-newsletter-strip .form-control { border: none; border-radius: var(--ptf-radius-sm); height: 44px; } /* ─── Footer ─────────────────────────────────────────────── */ .ptf-footer { background: var(--ptf-dark); color: rgba(255,255,255,.80); } .footer-desc { font-size: 0.88rem; color: rgba(255,255,255,.65); line-height: 1.7; } .footer-contact-link { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.83rem; color: rgba(255,255,255,.70); text-decoration: none; transition: var(--ptf-transition-fast); } .footer-contact-link:hover { color: var(--ptf-accent-light); } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.10); color: rgba(255,255,255,.80); font-size: 0.9rem; transition: var(--ptf-transition); text-decoration: none; } .footer-social:hover { background: var(--ptf-primary-light); color: #fff; } .footer-whatsapp:hover { background: #0f7a3f; color: #fff; } .footer-heading { font-size: 0.88rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ptf-accent-light); margin-bottom: 1rem; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { margin-bottom: 0.4rem; } .footer-list a { font-size: 0.84rem; color: rgba(255,255,255,.65); text-decoration: none; transition: var(--ptf-transition-fast); } .footer-list a:hover { color: var(--ptf-white); padding-left: 4px; } .footer-hr { border-color: rgba(255,255,255,.08); } .footer-copy { font-size: 0.8rem; color: rgba(255,255,255,.50); } .footer-bottom-link { color: rgba(255,255,255,.50); text-decoration: none; } .footer-bottom-link:hover { color: var(--ptf-accent-light); } /* ─── WhatsApp Float ─────────────────────────────────────── */ .ptf-whatsapp-float { position: fixed; bottom: 6rem; right: 1.5rem; width: 52px; height: 52px; background: #0f7a3f; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(15,122,63,.45); z-index: 1050; text-decoration: none; transition: var(--ptf-transition); animation: whatsapp-pulse 2.5s infinite; } .ptf-whatsapp-float:hover { background: #0c6633; color: #fff; transform: scale(1.1); } @media (prefers-reduced-motion: reduce) { .ptf-whatsapp-float { animation: none; } } .ptf-whatsapp-badge { position: absolute; top: -6px; right: -6px; background: var(--ptf-accent); color: var(--ptf-dark); font-size: 0.55rem; font-weight: 700; padding: 1px 5px; border-radius: 1rem; text-transform: uppercase; letter-spacing: .05em; } @keyframes whatsapp-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(15,122,63,.45); } 50% { box-shadow: 0 4px 28px rgba(15,122,63,.70); } } /* ─── PWA Install Button ─────────────────────────────────── */ .ptf-install-float { position: fixed; bottom: 1.5rem; left: 1.5rem; display: flex; align-items: center; gap: 0.5rem; background: var(--ptf-primary); color: #fff; border: none; border-radius: 2rem; padding: 0.7rem 1.1rem; font-size: 0.85rem; font-weight: 600; box-shadow: var(--ptf-shadow-lg); z-index: 1045; cursor: pointer; transition: var(--ptf-transition); } .ptf-install-float:hover { background: var(--ptf-primary-light); transform: translateY(-2px); } .ptf-install-float i { font-size: 1rem; } .ptf-install-float.d-none { display: none; } @media (max-width: 575.98px) { /* Keep it clear of the WhatsApp float / back-to-top stack on small phones by pinning it to the opposite (left) edge, slightly higher than the bottom nav-bar area some Android browsers reserve. */ .ptf-install-float { left: 1rem; bottom: 1rem; padding: 0.6rem 0.9rem; font-size: 0.8rem; } } .ptf-ios-install-sheet { position: fixed; inset: 0; background: rgba(13,27,42,.55); z-index: 1070; display: flex; align-items: flex-end; justify-content: center; } .ptf-ios-install-sheet.d-none { display: none; } .ptf-ios-install-card { position: relative; background: #fff; width: 100%; max-width: 420px; margin: 0 auto 1.25rem; border-radius: var(--ptf-radius-lg); padding: 1.5rem 1.5rem 1.25rem; box-shadow: var(--ptf-shadow-lg); font-size: 0.9rem; color: var(--ptf-dark-gray); } .ptf-ios-install-close { position: absolute; top: 0.75rem; right: 0.75rem; border: none; background: var(--ptf-light-gray); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--ptf-gray); } /* ─── Back to Top ────────────────────────────────────────── */ .ptf-back-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 42px; height: 42px; background: var(--ptf-primary); color: #fff; border: none; border-radius: 50%; font-size: 1rem; cursor: pointer; box-shadow: var(--ptf-shadow); z-index: 1040; opacity: 0; transform: translateY(12px); transition: var(--ptf-transition); display: flex; align-items: center; justify-content: center; } .ptf-back-top.visible { opacity: 1; transform: translateY(0); } .ptf-back-top:hover { background: var(--ptf-primary-light); transform: translateY(-2px); } /* ─── Lazy Load Images ───────────────────────────────────── */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].loaded { opacity: 1; } /* ─── Skeleton Loading ───────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--ptf-light-gray) 25%, var(--ptf-mid-gray) 50%, var(--ptf-light-gray) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; border-radius: var(--ptf-radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Form Styles ────────────────────────────────────────── */ .ptf-form .form-label { font-size: 0.87rem; font-weight: 600; color: var(--ptf-dark-gray); } .ptf-form .form-control, .ptf-form .form-select { border-color: var(--ptf-mid-gray); border-radius: var(--ptf-radius-sm); font-size: 0.9rem; transition: var(--ptf-transition-fast); box-shadow: none; } .ptf-form .form-control:focus, .ptf-form .form-select:focus { border-color: var(--ptf-primary-light); box-shadow: 0 0 0 3px rgba(26,60,110,.12); } .ptf-form .form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(25,135,84,.12); } .ptf-form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.12); } /* ─── Pagination ─────────────────────────────────────────── */ .pagination .page-link { color: var(--ptf-primary); border-radius: var(--ptf-radius-sm); margin: 0 2px; font-size: 0.88rem; } .pagination .page-item.active .page-link { background: var(--ptf-primary); border-color: var(--ptf-primary); } /* ─── Alerts ─────────────────────────────────────────────── */ .alert { border-radius: var(--ptf-radius-sm); font-size: 0.9rem; } .alert-success { border-left: 4px solid var(--ptf-green); } .alert-danger { border-left: 4px solid var(--ptf-red); } .alert-warning { border-left: 4px solid var(--ptf-accent); } .alert-info { border-left: 4px solid var(--ptf-primary-light); } /* ─── Tables ─────────────────────────────────────────────── */ .ptf-table { font-size: 0.88rem; } .ptf-table thead th { background: var(--ptf-primary); color: var(--ptf-white); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; border: none; padding: 0.85rem 1rem; } .ptf-table tbody td { padding: 0.8rem 1rem; vertical-align: middle; } .ptf-table tbody tr:hover td { background: rgba(26,60,110,.03); } /* ─── CSS-002 fix: page banner heading classes ─────────────────────────── Several templates (services, order, order-tracking, blog, blog-post, knowledge, knowledge-article) render `.ptf-page-title` / `.ptf-page-subtitle` inside `.ptf-page-banner`, but only the unprefixed `.page-banner-title` / `.page-banner-subtitle` were styled. Without this, the headings fell back to the global dark `h1..h6` color on the dark banner gradient. These rules give the actually-used class names the same light banner treatment. */ .ptf-page-banner .ptf-page-title { color: var(--ptf-white); font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin: 0; } .ptf-page-banner .ptf-page-subtitle { color: rgba(255,255,255,.82); font-size: 1rem; max-width: 640px; } /* ─── CSS-001 fix: service detail hero ────────────────────────────────── pages/service-detail.php wraps its hero content in `.ptf-service-hero`, which had no CSS at all, while `.ptf-hero-title` / `.ptf-hero-subtitle` are globally white/white-alpha text (meant for the dark `.ptf-hero` on the homepage). With no dark background of its own, the service title and description rendered as white text on the plain white page background. This gives `.ptf-service-hero` the same dark gradient treatment as the other page banners, plus styling for the category badge, meta pills, and the circular hero icon that also had no matching declarations. */ .ptf-service-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ptf-primary-dark), var(--ptf-primary) 60%, var(--ptf-primary-light)); color: var(--ptf-white); padding: 2rem 0 3rem; } .ptf-service-hero .breadcrumb-item a { color: rgba(255,255,255,.85); } .ptf-service-hero .breadcrumb-item.active { color: rgba(255,255,255,.6); } .ptf-service-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); } .ptf-hero-cat-badge { display: inline-flex; align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: var(--ptf-white); font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 2rem; margin-bottom: 0.85rem; } .ptf-hero-meta-pill { display: inline-flex; align-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.92); font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.85rem; border-radius: 2rem; } .ptf-service-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); color: var(--ptf-white); font-size: 3.5rem; } @media (max-width: 991.98px) { .ptf-service-hero-icon { width: 100px; height: 100px; font-size: 2.5rem; } } /* ─── CSS-003 fix: homepage service card ──────────────────────────────── pages/home.php emits `.service-card-icon` / `-title` / `-desc` / `-price` / `-link` inside `.service-card`, but the stylesheet's only inner rules targeted a differently-named set (`.service-icon`, `.service-title`, `.service-price`, `.service-turnaround`) used elsewhere. These classes give the homepage's actual markup the intended card look (icon tile, title/description hierarchy, price pill, link footer, equal-height column layout). */ .service-card { display: flex; flex-direction: column; height: 100%; background: var(--ptf-white); border: 1px solid rgba(26,60,110,.08); border-radius: var(--ptf-radius-lg); box-shadow: var(--ptf-shadow-card); padding: 1.75rem 1.5rem 1.5rem; transition: var(--ptf-transition); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--ptf-shadow-lg); border-color: rgba(26,60,110,.16); } .service-card-icon { width: 56px; height: 56px; background: rgba(26,60,110,.08); border-radius: var(--ptf-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ptf-primary); margin-bottom: 1rem; transition: var(--ptf-transition); } .service-card:hover .service-card-icon { background: var(--ptf-primary); color: var(--ptf-white); } .service-card-title { font-size: 1.05rem; font-weight: 700; color: var(--ptf-dark); margin-bottom: 0.5rem; } .service-card-desc { font-size: 0.88rem; color: var(--ptf-gray); line-height: 1.6; margin-bottom: 1rem; flex: 1 1 auto; } .service-card-price { font-size: 0.85rem; color: var(--ptf-gray); background: rgba(26,60,110,.06); padding: 0.4rem 0.7rem; border-radius: var(--ptf-radius-sm); margin-bottom: 0.9rem; } .service-card-price strong { color: var(--ptf-primary); font-size: 0.95rem; } .service-card-link { font-size: 0.88rem; font-weight: 600; color: var(--ptf-primary); text-decoration: none; transition: var(--ptf-transition-fast); } .service-card-link:hover { color: var(--ptf-accent-dark); } /* ─── CSS-015 fix: service detail body content ────────────────────────── pages/service-detail.php renders a large set of content/process/ requirements/pricing/sidebar classes with no matching declaration anywhere in the shipped CSS, so — beyond the hero fixed in CSS-001 — the rest of the service detail page (features, process timeline, requirements, pricing cards, sidebar) fell back to plain block text and default Bootstrap. */ .ptf-service-content { font-size: 1rem; line-height: 1.85; color: var(--ptf-dark-gray); } .ptf-service-content p { margin-bottom: 1.1rem; } .ptf-section-title { font-size: 1.4rem; font-weight: 800; color: var(--ptf-dark); margin-bottom: 0.5rem; } .ptf-feature-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--ptf-white); border: 1px solid rgba(26,60,110,.08); border-radius: var(--ptf-radius); padding: 1.1rem 1.25rem; height: 100%; } .ptf-feature-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(26,60,110,.08); color: var(--ptf-primary); font-size: 1.15rem; } .ptf-process-timeline { position: relative; padding-left: 2.5rem; } .ptf-process-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--ptf-mid-gray); } .ptf-process-step { position: relative; margin-bottom: 1.75rem; } .ptf-process-step:last-child { margin-bottom: 0; } .ptf-step-number { position: absolute; left: -2.5rem; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ptf-primary); color: var(--ptf-white); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--ptf-white); } .ptf-step-content h5 { font-size: 1rem; font-weight: 700; color: var(--ptf-dark); } .ptf-req-group { } .ptf-req-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .ptf-req-list li { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.92rem; color: var(--ptf-dark-gray); } .ptf-service-sidebar { position: sticky; top: 90px; } .ptf-sidebar-section { } .ptf-sidebar-heading { font-size: 1rem; font-weight: 700; color: var(--ptf-dark); margin-bottom: 0.9rem; } .ptf-pricing-card { position: relative; border: 1.5px solid rgba(26,60,110,.10); border-radius: var(--ptf-radius); padding: 1.25rem; background: var(--ptf-white); } .ptf-pricing-card.ptf-pricing-popular { border-color: var(--ptf-accent); box-shadow: var(--ptf-shadow-card); } .ptf-pricing-badge { position: absolute; top: -0.6rem; right: 1rem; background: var(--ptf-accent); color: var(--ptf-dark); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0.25rem 0.65rem; border-radius: 1rem; } .ptf-pricing-tier { font-size: 0.85rem; font-weight: 700; color: var(--ptf-gray); text-transform: uppercase; letter-spacing: .04em; } .ptf-pricing-amount { margin: 0.4rem 0 0.75rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; } .ptf-pricing-original { font-size: 0.85rem; color: var(--ptf-gray); text-decoration: line-through; } .ptf-pricing-price { font-size: 1.5rem; font-weight: 800; color: var(--ptf-primary); } .ptf-pricing-cycle { font-size: 0.8rem; color: var(--ptf-gray); } .ptf-pricing-features { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.4rem; } .ptf-pricing-features li { font-size: 0.85rem; color: var(--ptf-dark-gray); display: flex; align-items: flex-start; gap: 0.3rem; } .ptf-sidebar-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .ptf-sidebar-info-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.85rem; } .ptf-sidebar-info-list li i { font-size: 1.15rem; margin-top: 0.15rem; } .ptf-sidebar-cta { background: var(--ptf-light-gray); border-radius: var(--ptf-radius); padding: 1.25rem; text-align: center; } .ptf-sidebar-cta h4 { font-size: 1.05rem; margin-bottom: 0.3rem; } .ptf-related-service-link { display: flex; align-items: center; gap: 0.3rem; padding: 0.6rem 0.25rem; border-bottom: 1px dashed var(--ptf-mid-gray); text-decoration: none; color: var(--ptf-dark-gray); font-size: 0.9rem; font-weight: 600; transition: var(--ptf-transition-fast); } .ptf-related-service-link:last-child { border-bottom: none; } .ptf-related-service-link:hover { color: var(--ptf-primary); padding-left: 0.5rem; } @media (max-width: 991.98px) { .ptf-service-sidebar { position: static; margin-top: 2rem; } } /* ─── CSS-008 / CSS-016 fix: blog, knowledge, article & contact components These component classes are emitted by pages/blog.php, pages/blog-post.php, pages/knowledge.php, pages/knowledge-article.php, and pages/contact.php, but had no matching CSS anywhere in the project and were falling back to unstyled/Bootstrap-default presentation. */ .ptf-section { padding: var(--ptf-section-py) 0; } .ptf-blog-hero { border-radius: var(--ptf-radius); } .ptf-blog-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,27,42,0) 40%, rgba(13,27,42,.72) 100%); } .ptf-article { background: var(--ptf-white); border-radius: var(--ptf-radius); } .ptf-article-content { font-size: 1rem; color: var(--ptf-dark-gray); line-height: 1.85; } .ptf-article-content h2, .ptf-article-content h3 { margin-top: 1.75rem; margin-bottom: 0.75rem; } .ptf-article-content p { margin-bottom: 1.1rem; } .ptf-article-content img { border-radius: var(--ptf-radius-sm); margin: 1rem 0; } .ptf-article-content ul, .ptf-article-content ol { margin-bottom: 1.1rem; padding-left: 1.4rem; } .ptf-widget { background: var(--ptf-white); border: 1px solid rgba(26,60,110,.08); border-radius: var(--ptf-radius); box-shadow: var(--ptf-shadow-card); padding: 1.25rem; } .ptf-widget-title { font-size: 0.95rem; font-weight: 700; color: var(--ptf-dark); margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ptf-accent); } .contact-form-card { background: var(--ptf-white); border: 1px solid rgba(26,60,110,.08); border-radius: var(--ptf-radius); box-shadow: var(--ptf-shadow-card); overflow: hidden; } .contact-form-header { background: linear-gradient(135deg, var(--ptf-primary-dark), var(--ptf-primary)); color: var(--ptf-white); padding: 1.5rem 1.75rem; } .contact-form-header p { color: rgba(255,255,255,.80); font-size: 0.9rem; } .contact-form-body { padding: 1.75rem; } .contact-method-btn { display: flex; align-items: center; gap: 1rem; background: var(--ptf-white); border: 1px solid rgba(26,60,110,.10); border-radius: var(--ptf-radius); padding: 1rem 1.15rem; text-decoration: none; color: var(--ptf-dark-gray); transition: var(--ptf-transition); } .contact-method-btn:hover { border-color: var(--ptf-primary-light); box-shadow: var(--ptf-shadow-card); transform: translateY(-2px); color: var(--ptf-dark-gray); } .cmb-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: rgba(26,60,110,.08); color: var(--ptf-primary); } .contact-method-whatsapp .cmb-icon { background: rgba(15,122,63,.10); color: #0f7a3f; } .cmb-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .cmb-content strong { font-size: 0.92rem; color: var(--ptf-dark); } .cmb-content small { font-size: 0.78rem; color: var(--ptf-gray); } .cmb-arrow { flex: 0 0 auto; color: var(--ptf-gray); transition: var(--ptf-transition-fast); } .contact-method-btn:hover .cmb-arrow { color: var(--ptf-primary); transform: translateX(3px); } /* ─── CSS-024 fix: homepage testimonial subcomponents ─────────────────── Complements the existing `.testimonial-card/-text/-avatar/-name/-meta` rules with the additional classes home.php emits for the slider. */ .testimonial-author { } .testimonial-avatar-initials { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ptf-primary); color: var(--ptf-white); font-weight: 700; font-size: 1rem; border: 2px solid var(--ptf-accent); } .testimonial-slider-wrap { } .testimonial-indicators { } .testimonial-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--ptf-mid-gray); padding: 0; transition: var(--ptf-transition-fast); } .testimonial-dot.active { background: var(--ptf-primary); width: 22px; border-radius: 5px; } /* ─── CSS-017 fix: visible keyboard focus ──────────────────────────────── Hover states were defined extensively across the custom component classes, but there was no site-wide `:focus-visible` treatment for links, nav items, cards-as-links, or floating controls, so keyboard users could lose track of where focus is. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .ptf-navbar .nav-link:focus-visible, .footer-list a:focus-visible, .footer-social:focus-visible, .topbar-social:focus-visible, .service-card-link:focus-visible, .ptf-service-title a:focus-visible, .ptf-related-service-link:focus-visible, .contact-method-btn:focus-visible, .ptf-whatsapp-float:focus-visible, .ptf-back-top:focus-visible, .ptf-category-tabs .nav-link:focus-visible, .testimonial-dot:focus-visible { outline: 3px solid var(--ptf-accent); outline-offset: 2px; border-radius: var(--ptf-radius-sm); } /* ─── CSS-025 fix: respect reduced-motion preference ───────────────────── Continuous pulse/blink animations and transform-based hover/entrance transitions ran unconditionally. Users who request reduced motion at the OS/browser level should not receive them. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ─── CSS-013 fix: newsletter strip on narrow screens ──────────────────── The form was a non-wrapping flex row with a `text-nowrap` button and fixed padding, with no small-screen rule, so at 320–414px the input could be squeezed very narrow. Stacking it removes that risk. */ @media (max-width: 575.98px) { .ptf-newsletter-strip form.d-flex { flex-direction: column; align-items: stretch !important; } .ptf-newsletter-strip .btn.text-nowrap { white-space: normal; width: 100%; } } /* ─── Order Page: /order form components ───────────────────────────────── pages/order.php emits an entire step-by-step order form (step headers, selectable plan cards, selectable payment-method cards, a drag & drop upload dropzone, and an order-summary sidebar) using custom classes that had ZERO matching CSS anywhere in the project. The page was rendering as plain Bootstrap defaults with no step numbering, no card selection states, and a raw native file input — this block gives it the actual design treatment. */ /* Step header */ .ptf-step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .ptf-step-header h3 { font-size: 1.15rem; margin: 0; color: var(--ptf-dark); } .ptf-step-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ptf-primary); color: var(--ptf-white); font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; } /* Selectable pricing plan card */ .ptf-plan-card { position: relative; display: block; height: 100%; border: 1.5px solid var(--ptf-mid-gray); border-radius: var(--ptf-radius); padding: 1.1rem 1rem; text-align: center; cursor: pointer; background: var(--ptf-white); transition: var(--ptf-transition); } .ptf-plan-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .ptf-plan-card:hover { border-color: var(--ptf-primary-light); box-shadow: var(--ptf-shadow-card); } .ptf-plan-card.selected, .ptf-plan-card:has(input:checked) { border-color: var(--ptf-primary); background: rgba(26,60,110,.04); box-shadow: 0 0 0 2px rgba(26,60,110,.15); } .ptf-plan-card:focus-within { outline: 3px solid var(--ptf-accent); outline-offset: 2px; } .ptf-plan-popular { position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%); background: var(--ptf-accent); color: var(--ptf-dark); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0.2rem 0.6rem; border-radius: 1rem; } .ptf-plan-name { font-weight: 700; font-size: 0.92rem; color: var(--ptf-dark); margin-top: 0.3rem; } .ptf-plan-price { font-size: 1.15rem; font-weight: 800; color: var(--ptf-primary); margin-top: 0.2rem; } .ptf-plan-original { font-size: 0.8rem; color: var(--ptf-gray); text-decoration: line-through; } /* Selectable payment method card */ .ptf-payment-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; border: 1.5px solid var(--ptf-mid-gray); border-radius: var(--ptf-radius); padding: 1rem 0.5rem; text-align: center; cursor: pointer; background: var(--ptf-white); transition: var(--ptf-transition); } .ptf-payment-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .ptf-payment-card i { font-size: 1.5rem; color: var(--ptf-primary); } .ptf-payment-card span { font-size: 0.82rem; font-weight: 600; color: var(--ptf-dark-gray); } .ptf-payment-card:hover { border-color: var(--ptf-primary-light); box-shadow: var(--ptf-shadow-card); } .ptf-payment-card:has(input:checked) { border-color: var(--ptf-primary); background: rgba(26,60,110,.05); box-shadow: 0 0 0 2px rgba(26,60,110,.15); } .ptf-payment-card:focus-within { outline: 3px solid var(--ptf-accent); outline-offset: 2px; } /* Upload dropzone */ .ptf-upload-area { position: relative; border: 2px dashed var(--ptf-mid-gray); border-radius: var(--ptf-radius); padding: 2.25rem 1.5rem; text-align: center; background: var(--ptf-off-white); transition: var(--ptf-transition); } .ptf-upload-area:hover, .ptf-upload-area.dragover { border-color: var(--ptf-primary-light); background: rgba(26,60,110,.03); } .ptf-upload-area h5 { font-size: 1rem; margin: 0.5rem 0 0.25rem; color: var(--ptf-dark); } .ptf-upload-icon { font-size: 2.25rem; color: var(--ptf-primary-light); } .ptf-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ptf-file-item { display: flex; align-items: center; background: var(--ptf-white); border: 1px solid var(--ptf-mid-gray); border-radius: var(--ptf-radius-sm); padding: 0.5rem 0.85rem; font-size: 0.85rem; margin-bottom: 0.4rem; } /* Order summary sidebar */ .ptf-order-summary #orderSummary .fw-semibold { color: var(--ptf-dark); } .ptf-order-summary hr { border-color: var(--ptf-mid-gray); } @media (max-width: 767.98px) { .ptf-step-header h3 { font-size: 1.02rem; } .ptf-plan-card { padding: 0.9rem 0.75rem; } .ptf-upload-area { padding: 1.5rem 1rem; } } /* ─── Page Hero ──────────────────────────────────────────── */ .ptf-page-hero { background: linear-gradient(135deg, var(--ptf-primary-dark), var(--ptf-primary)); padding: 3.5rem 0 2.5rem; color: white; position: relative; overflow: hidden; } .ptf-page-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 40px; background: var(--ptf-white); clip-path: ellipse(55% 100% at 50% 100%); } .ptf-page-hero h1 { color: white; font-size: clamp(1.6rem, 3vw, 2.4rem); } .ptf-page-hero .lead { color: rgba(255,255,255,.80); font-size: 1rem; } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 767.98px) { :root { --ptf-section-py: 3rem; --ptf-section-py-sm: 2rem; } .ptf-navbar .navbar-nav { padding: 0.75rem 0; } .ptf-whatsapp-float { width: 46px; height: 46px; font-size: 1.25rem; } } @media (max-width: 575.98px) { .ptf-hero-title { font-size: 1.75rem; } .section-title { font-size: 1.5rem; } } /* ─── Print ──────────────────────────────────────────────── */ @media print { .ptf-topbar, .ptf-navbar, .ptf-whatsapp-float, .ptf-back-top, .ptf-newsletter-strip, .ptf-footer, .btn { display: none !important; } body { color: #000 !important; font-size: 12pt; } }