/* ========================================================================== PQFY marketing site — hand-written styles layered on top of Tailwind CDN. Tailwind (loaded via CDN in ) handles layout/spacing/grid utilities; this file only holds things Tailwind's CDN build can't express: design tokens, font wiring, the mobile nav, and a couple of bespoke components. ========================================================================== */ :root { /* Brand tokens — swap these to re-skin the whole site from one place. Values sampled from the real PQFY logo (assets/pqfy-logo-navbar.jpg) and matched against 3-goods.com's actual navy/indigo UI (per stakeholder screenshots), rather than the earlier black/gold guess. */ --background: #ffffff; --foreground: #1b1b4d; /* headings — matches logo navy */ --body-text: #44475a; /* paragraph copy — dark slate, not pure black */ --muted: #f2f1fa; /* pale lavender hero/section band, matches original */ --muted-foreground: #6b7280; --card: #ffffff; --border: #e6e5f2; --primary: #1b1b4d; /* dark navy — cards, buttons, footer, dark bands */ --primary-foreground: #ffffff; --accent: #4f46e5; /* indigo — icons, checkmarks, eyebrows, nav hover */ --accent-foreground: #ffffff; --accent-2: #38bdf8; /* cyan — logo underline, small decorative accents */ --dark-surface: #1b1b4d; --dark-surface-2: #23234f; /* slightly lighter navy for cards on a dark band */ --dark-icon-bg: rgba(255, 255, 255, 0.1); --radius: 0.75rem; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-heading: "Space Grotesk", var(--font-body); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--body-text); font-family: var(--font-body); margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: -0.01em; color: var(--foreground); } a { color: inherit; } /* Minimum touch target size on small screens */ @media (max-width: 768px) { button, a[role="button"] { min-height: 44px; } } /* ---- Top utility bar ---- */ .utility-bar { background-color: var(--muted); border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--foreground); } .utility-bar .check { color: var(--accent); font-weight: 700; margin-right: 0.35rem; } /* ---- Header / nav ---- */ .site-header { position: sticky; top: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav-link { position: relative; display: inline-block; color: var(--muted-foreground); font-weight: 500; transition: color 0.15s ease; padding-bottom: 4px; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--accent); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .nav-link:hover, .nav-link.active { color: var(--accent); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } /* ---- Eyebrow labels ---- */ .eyebrow { color: var(--accent); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; } .mobile-menu { display: none; } .mobile-menu.open { display: block; } /* ---- Buttons ---- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); font-weight: 700; padding: 0.75rem 1.5rem; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.85rem; } /* Light-sweep shine, sweeps left-to-right across the button on hover */ .btn::after { content: ""; position: absolute; inset: 0; left: -75%; width: 50%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none; } .btn:hover::after { left: 125%; } .logo-badge { width: 2.25rem; height: 2.25rem; border-radius: 999px; background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 3px; } .logo-badge img { width: 100%; height: 100%; object-fit: contain; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px) scale(0.98); transition-duration: 0.05s; } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); box-shadow: 0 4px 14px -4px rgba(27, 27, 77, 0.4); } .btn-primary:hover { background-color: var(--accent); box-shadow: 0 12px 28px -8px rgba(79, 70, 229, 0.55); } .btn-outline { background-color: transparent; color: var(--foreground); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background-color: var(--muted); box-shadow: 0 10px 22px -10px rgba(27, 27, 77, 0.3); } /* ---- Cards ---- */ .card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(27, 27, 77, 0.15); border-color: var(--accent); } .icon-badge { width: 3rem; height: 3rem; border-radius: 0.6rem; background-color: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } /* Icon badge variant for use on a dark navy background (cards, dark bands) */ .icon-badge-on-dark { background-color: var(--dark-icon-bg); color: #ffffff; } /* ---- Dark navy section band (e.g. "How It Works") ---- */ .section-dark { background-color: var(--dark-surface); color: #ffffff; } .section-dark .eyebrow { color: var(--accent-2); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: #ffffff; } .section-dark p { color: rgba(255, 255, 255, 0.75); } /* ---- Dark stat/capability cards ---- */ .card-dark { background-color: var(--dark-surface); color: #ffffff; border-radius: var(--radius); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .card-dark:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.35); background-color: var(--dark-surface-2); } .card-dark p { color: rgba(255, 255, 255, 0.7); } /* ---- Checklist (checkmark bullet lists) ---- */ .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; } .checklist .check-icon { width: 1.25rem; height: 1.25rem; border-radius: 999px; background-color: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; } .section-dark .checklist .check-icon { background-color: rgba(255, 255, 255, 0.15); } /* ---- Stat banner (e.g. "Since 2019") ---- */ .stat-banner { background-color: var(--primary); color: #fff; border-radius: var(--radius); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; } .stat-banner .stat-number { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; line-height: 1; } .stat-banner .stat-label { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; } /* ---- Step numbers (How It Works) ---- */ .step-number { width: 2.5rem; height: 2.5rem; border-radius: 999px; background-color: #ffffff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; flex-shrink: 0; } /* ---- Placeholder media blocks (real images arrive later via Azure) ---- */ .media-placeholder { background: repeating-linear-gradient( 45deg, var(--muted), var(--muted) 10px, #ececef 10px, #ececef 20px ); border: 1px dashed var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 0.875rem; min-height: 220px; text-align: center; padding: 1rem; } /* ---- Auto-sliding "brand" carousel ---- Slow, seamless, infinite scroll of PQFY's real partner brand logos (assets/brand-logo-01..17). The track below duplicates the same 17 tiles once so the loop has no visible seam. */ .brand-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .brand-marquee-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: brand-marquee-scroll 30s linear infinite; } .brand-marquee:hover .brand-marquee-track { animation-play-state: paused; } @keyframes brand-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brand-tile { flex-shrink: 0; width: 9rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem; transition: transform 0.2s ease; } .brand-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) opacity(0.7); transition: filter 0.2s ease; } .brand-tile:hover { transform: translateY(-3px); } .brand-tile:hover img { filter: grayscale(0) opacity(1); } .marquee-arrow { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--foreground); flex-shrink: 0; } /* ---- Contact form ---- */ .form-field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; } .form-field input, .form-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.65rem 0.85rem; font-family: var(--font-body); font-size: 0.95rem; background-color: #fff; } .form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } #form-status { display: none; border-radius: var(--radius); padding: 0.85rem 1rem; font-size: 0.9rem; } #form-status.visible { display: block; }