/* ============================================================ PsychEvalUS Coming Soon Landing Page ============================================================ */ :root { --pe-primary: #0d6efd; --pe-primary-dark: #0a58ca; --pe-dark: #172033; --pe-text: #24324a; --pe-muted: #6c757d; --pe-soft: #f5f8fc; --pe-border: #e3e9f1; --pe-white: #ffffff; } /* ============================================================ GLOBAL ============================================================ */ html { scroll-behavior: smooth; } body { color: var(--pe-text); background-color: var(--pe-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } section[id] { scroll-margin-top: 80px; } .lead { line-height: 1.65; } /* ============================================================ NAVIGATION ============================================================ */ .navbar-brand img { width: auto; max-width: 220px; height: 32px; object-fit: contain; } .navbar .nav-link { color: #374151; font-weight: 500; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--pe-primary); } /* ============================================================ HERO ============================================================ */ .hero-section { padding: 6rem 0; background: radial-gradient( circle at 85% 10%, rgba(13, 110, 253, 0.11), transparent 34% ), linear-gradient( 180deg, #f7faff 0%, #ffffff 100% ); } .hero-heading { max-width: 800px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; } .coming-soon-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-radius: 100px; font-weight: 600; } .hero-benefits { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; color: var(--pe-muted); font-size: 0.92rem; } .hero-benefits span { display: inline-flex; align-items: center; gap: 0.35rem; } .hero-benefits i { color: var(--pe-primary); font-size: 1.05rem; } /* ============================================================ SECTION LABELS ============================================================ */ .section-label { color: var(--pe-primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } /* ============================================================ NOTIFICATION FORM ============================================================ */ .notify-card { overflow: hidden; border: 0; border-radius: 1.5rem; background-color: #ffffff; box-shadow: 0 1.25rem 3.5rem rgba(22, 38, 70, 0.13); } .notify-card .card-body { padding: clamp(1.5rem, 4vw, 2.5rem); } .form-label { color: #27364f; } .form-control, .form-select { min-height: 50px; border-color: #d7deea; border-radius: 0.65rem; } .form-control:focus, .form-select:focus { border-color: rgba(13, 110, 253, 0.55); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12); } /* Honeypot Real visitors will not see this field. */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ============================================================ FEATURE CARDS ============================================================ */ .feature-card { border: 1px solid var(--pe-border); border-radius: 1rem; background-color: #ffffff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .feature-card:hover { transform: translateY(-3px); border-color: #d2dcec; box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.06); } .feature-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(13, 110, 253, 0.10); color: var(--pe-primary); font-size: 1.45rem; } /* ============================================================ PROCESS ============================================================ */ .process-step { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; } .process-step:last-child { margin-bottom: 0; } .process-step h3 { margin-bottom: 0.4rem; color: var(--pe-dark); font-size: 1.1rem; font-weight: 700; } .process-step p { margin-bottom: 0; color: var(--pe-muted); line-height: 1.6; } .step-number { width: 42px; height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--pe-primary); color: #ffffff; font-weight: 700; } /* ============================================================ ASSESSMENT CATEGORIES ============================================================ */ .category-card { display: flex; align-items: flex-start; gap: 1rem; height: 100%; padding: 1.1rem; border: 1px solid var(--pe-border); border-radius: 1rem; background-color: #ffffff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .category-card:hover { transform: translateY(-3px); border-color: #d2dcec; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.06); } .category-card > i { margin-top: 0.1rem; color: var(--pe-primary); font-size: 1.5rem; } .category-card h3 { margin-bottom: 0.3rem; color: var(--pe-dark); font-size: 1rem; font-weight: 700; } .category-card p { margin-bottom: 0; color: var(--pe-muted); font-size: 0.875rem; line-height: 1.45; } /* ============================================================ BENEFITS ============================================================ */ .benefit-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; } .benefit-row:last-child { margin-bottom: 0; } .benefit-row > i { margin-top: 0.1rem; color: var(--pe-primary); font-size: 1.8rem; } .benefit-row h3 { margin-bottom: 0.35rem; color: var(--pe-dark); font-size: 1.1rem; font-weight: 700; } .benefit-row p { margin-bottom: 0; color: var(--pe-muted); line-height: 1.6; } /* ============================================================ FINAL CTA ============================================================ */ .launch-section { overflow: hidden; border-radius: 2rem; background-color: var(--pe-dark); color: #ffffff; } .launch-image { width: 100%; height: 100%; min-height: 430px; object-fit: cover; } /* ============================================================ DISCLAIMER ============================================================ */ .disclaimer { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; border: 1px solid var(--pe-border); border-radius: 1rem; background-color: var(--pe-soft); } .disclaimer > i { margin-top: 0.1rem; color: var(--pe-primary); font-size: 1.5rem; } .disclaimer h2 { margin-bottom: 0.4rem; color: var(--pe-dark); font-size: 1rem; font-weight: 700; } .disclaimer p { margin-bottom: 0; color: var(--pe-muted); font-size: 0.875rem; line-height: 1.6; } /* ============================================================ BUTTONS ============================================================ */ .btn { border-radius: 0.65rem; font-weight: 600; } .btn-primary:hover { background-color: var(--pe-primary-dark); border-color: var(--pe-primary-dark); } /* ============================================================ FOOTER ============================================================ */ footer a { color: rgba(255, 255, 255, 0.75); } footer a:hover, footer a:focus { color: #ffffff; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .hero-section { padding: 4rem 0; } .launch-image { min-height: 360px; max-height: 450px; } } @media (max-width: 575.98px) { .hero-section { padding: 3rem 0; } .hero-heading { font-size: 2.5rem; } .hero-benefits { gap: 1rem; } .launch-section { border-radius: 1.25rem; } .notify-card { border-radius: 1.15rem; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }