/* ========================================================= PeopleGrid — HR Management Software landing page styles Font: Poppins (loaded in index.html ) Icons: Google Material Symbols (loaded in index.html ) ========================================================= */ :root{ --ink:#12233D; --paper:#F5F7FA; --paper-alt:#FFFFFF; --violet:#5B5FEF; --violet-dark:#4245C7; --sage:#2FAE87; --slate:#64748B; --line:#E2E6ED; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Poppins', sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.display-font{ font-family:'Poppins', sans-serif; font-weight:600; letter-spacing:-0.02em; } .mono{ font-family:'Poppins', sans-serif; letter-spacing:0.04em; text-transform:uppercase; font-size:0.75rem; font-weight:600; } /* Material Symbols base sizing so icons line up with Poppins text */ .material-symbols-outlined{ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align:middle; line-height:1; } a{ text-decoration:none; } /* ---------- NAVBAR ---------- */ .navbar-custom{ background:rgba(245,247,250,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .navbar-brand{ font-family:'Poppins', sans-serif; font-weight:700; font-size:1.3rem; color:var(--ink) !important; } .navbar-brand .dot{ color:var(--violet); } .nav-link{ color:var(--ink) !important; font-weight:500; font-size:0.95rem; margin:0 0.6rem; } .nav-link:hover{ color:var(--violet) !important; } .btn-violet{ background:var(--violet); border:none; color:#fff; font-weight:600; padding:0.65rem 1.4rem; border-radius:8px; transition:transform .15s ease, background .15s ease; } .btn-violet:hover{ background:var(--violet-dark); color:#fff; transform:translateY(-1px); } .btn-outline-ink{ border:1.5px solid var(--ink); color:var(--ink); font-weight:600; padding:0.6rem 1.3rem; border-radius:8px; } .btn-outline-ink:hover{ background:var(--ink); color:#fff; } /* ---------- HERO ---------- */ .hero{ padding:7.5rem 0 5rem; background: radial-gradient(circle at 85% 10%, rgba(91,95,239,0.10), transparent 45%), var(--paper); overflow:hidden; } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); padding:.35rem .8rem; border-radius:999px; color:var(--violet-dark); font-weight:600; } .eyebrow .material-symbols-outlined{ font-size:1.05rem; } .hero h1{ font-size:3.2rem; line-height:1.08; margin:1.3rem 0 1.2rem; } .hero p.lead{ color:var(--slate); font-size:1.15rem; max-width:520px; } .hero-stats{ display:flex; gap:2.2rem; margin-top:2.5rem; } .hero-stats .num{ font-family:'Poppins',sans-serif; font-size:1.6rem; font-weight:700; color:var(--ink); } .hero-stats .lbl{ color:var(--slate); font-size:0.85rem; } /* Signature: org-chart card stack */ .org-visual{ position:relative; height:460px; } .org-card{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 20px 40px -18px rgba(18,35,61,0.25); width:210px; display:flex; align-items:center; gap:10px; animation:float 6s ease-in-out infinite; } .org-card .avatar{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Poppins',sans-serif; font-weight:700;color:#fff;font-size:0.85rem; flex-shrink:0; } .org-card .name{ font-weight:600; font-size:0.88rem; } .org-card .role{ color:var(--slate); font-size:0.72rem; } .card-a{ top:0; left:10%; z-index:3; } .card-b{ top:150px; left:0; animation-delay:.6s; } .card-c{ top:150px; left:calc(100% - 210px); animation-delay:1.2s; } .card-d{ top:310px; left:8%; animation-delay:1.8s; } .card-e{ top:330px; left:calc(100% - 220px); animation-delay:2.4s; } .org-svg-lines{ position:absolute; inset:0; z-index:1; width:100%; height:100%; } @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } @media (prefers-reduced-motion: reduce){ .org-card{ animation:none; } } /* ---------- SECTION HELPERS ---------- */ section{ padding:5.5rem 0; } .section-alt{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .kicker{ color:var(--violet-dark); font-weight:700; } .section-title{ font-size:2.1rem; margin-bottom:0.8rem; } .section-sub{ color:var(--slate); max-width:600px; } /* ---------- FEATURES ---------- */ .feature-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:2rem 1.7rem; height:100%; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .feature-card:hover{ transform:translateY(-5px); box-shadow:0 24px 40px -24px rgba(18,35,61,0.25); border-color:transparent; } .feature-icon{ width:48px;height:48px; border-radius:12px; display:flex;align-items:center;justify-content:center; color:#fff; margin-bottom:1.1rem; } .feature-icon .material-symbols-outlined{ font-size:1.4rem; } .bg-violet{ background:var(--violet); } .bg-sage{ background:var(--sage); } .bg-ink{ background:var(--ink); } /* ---------- IMAGE + CONTENT SPLIT ---------- */ .split-img{ border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(18,35,61,0.3); } .split-img img{ width:100%; height:100%; object-fit:cover; display:block; } .check-list li{ display:flex; gap:.7rem; margin-bottom:.9rem; color:var(--ink); align-items:flex-start; } .check-list .material-symbols-outlined{ color:var(--sage); font-size:1.25rem; margin-top:1px; } /* ---------- PROCESS ---------- */ .step-num{ font-family:'Poppins',sans-serif; font-weight:600; font-size:0.85rem; color:var(--violet-dark); border:1px solid var(--violet); border-radius:999px; width:38px;height:38px; display:flex;align-items:center;justify-content:center; margin-bottom:1rem; } /* ---------- STATS BAND ---------- */ .stat-band{ background:var(--ink); color:#fff; } .stat-band .num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:2.4rem; color:#fff; } .stat-band .lbl{ color:#B9C2D6; font-size:0.9rem; } /* ---------- TESTIMONIAL ---------- */ .testimonial-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:2.2rem; } .testimonial-card .quote-mark{ font-family:'Poppins',sans-serif; font-weight:700; font-size:3rem; color:var(--violet); line-height:1; } /* ---------- LEAD FORM ---------- */ .lead-section{ background: radial-gradient(circle at 10% 20%, rgba(47,174,135,0.12), transparent 40%), var(--ink); color:#fff; border-radius:28px; padding:3.5rem; } .lead-section .section-sub{ color:#B9C2D6; } .form-card{ background:#fff; border-radius:20px; padding:2.2rem; color:var(--ink); } .form-label{ font-weight:600; font-size:0.88rem; } .form-control, .form-select{ border:1.5px solid var(--line); border-radius:9px; padding:0.65rem 0.8rem; font-family:'Poppins', sans-serif; } .form-control:focus, .form-select:focus{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,95,239,0.15); } #formSuccess, #formError{ display:none; } /* ---------- FOOTER ---------- */ footer{ background:#0E1B30; color:#B9C2D6; padding:3.5rem 0 1.5rem; } footer a{ color:#B9C2D6; } footer a:hover{ color:#fff; } footer h6{ color:#fff; font-family:'Poppins',sans-serif; font-weight:600; } .footer-brand{ color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem; } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); margin-top:2.5rem; padding-top:1.5rem; font-size:0.85rem; } .social-link{ font-size:0.85rem; font-weight:600; border:1px solid rgba(255,255,255,0.25); border-radius:999px; padding:.3rem .9rem; } .social-link:hover{ background:#fff; color:var(--ink) !important; } /* Focus visibility */ a:focus-visible, button:focus-visible, .form-control:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; } @media (max-width: 991px){ .hero h1{ font-size:2.4rem; } .org-visual{ height:340px; margin-top:2rem; } .lead-section{ padding:2rem 1.3rem; border-radius:20px; } }