/* Lokey design system — v2 (2026 homepage refresh) Site-wide reusable pieces: design tokens, buttons, nav, footer, auth modal. Page-specific sections (hero, pricing, quiz, etc.) live in css/homepage.css. */ :root{ --blue:#007FF6; --blue-deep:#0063C4; --blue-tint:#EAF3FF; --green:#266e48; --green-deep:#266e48; --green-tint:#E9F8EE; --gold:#FFCD00; --gold-tint:#FFF6D6; --navy:#1E2B3C; --ink:#22303F; --grey:#5B6B7C; --line:#E6EBF1; --coral:#FF5A3C; --r-l:24px; --r-m:16px; --r-s:10px; --wrap:1140px; } .lokey-app, .lokey-app *, .lokey-app *::before, .lokey-app *::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body.lokey-app{margin:0;} .lokey-app{ font-family:'Inter',sans-serif; color:var(--ink); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; } .lokey-app img{max-width:100%; display:block;} .lokey-app h1, .lokey-app h2, .lokey-app h3{font-family:'Bricolage Grotesque',sans-serif; margin:0; line-height:1.1; letter-spacing:-0.02em;} .lokey-app p{margin:0;} .lokey-app .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;} .lokey-app :focus-visible{outline:3px solid var(--blue); outline-offset:2px;} /* shared section/heading rhythm — reused by every page, not just the homepage */ .lokey-app section{padding:90px 0;} .lokey-app .kicker{font-weight:800; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;} .lokey-app .h2{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:800; margin-top:12px;} .lokey-app .sub2{color:var(--grey); font-size:1.06rem; margin-top:14px; max-width:560px;} /* buttons */ .lokey-app .btn{font-family:'Inter',sans-serif; font-weight:700; font-size:1rem; padding:15px 28px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .15s, box-shadow .15s;} .lokey-app .btn-green{background:var(--green); color:#fff; box-shadow:0 6px 18px -6px rgba(40,172,78,0.55);} .lokey-app .btn-green:hover{transform:translateY(-2px); box-shadow:0 10px 22px -6px rgba(40,172,78,0.6); color:#fff;} .lokey-app .btn-navy{background:var(--navy); color:#fff;} .lokey-app .btn-navy:hover{transform:translateY(-2px); color:#fff;} .lokey-app .btn-ghost{background:#fff; color:var(--ink); border:2px solid var(--line);} .lokey-app .btn-ghost:hover{border-color:var(--navy); color:var(--ink);} .lokey-app .btn-gold{background:var(--gold); color:var(--navy); box-shadow:0 6px 18px -6px rgba(255,205,0,0.5);} .lokey-app .btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 22px -6px rgba(255,205,0,0.6); color:var(--navy);} .lokey-app .pill{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.85rem; padding:7px 16px; border-radius:999px;} /* navbar.js toggles this on login-state elements (Bootstrap's utility class in the old shared navbar.css — restated here since this page doesn't load Bootstrap or navbar.css). Without it, .d-none does nothing and the signed-out and signed-in nav groups render on top of each other. */ .d-none{display:none !important;} .lokey-app .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;} .lokey-app .reveal.in{opacity:1; transform:translateY(0);} @media (prefers-reduced-motion:reduce){.lokey-app .reveal{opacity:1;transform:none;transition:none;}} /* scroll progress bar */ .progress{position:fixed; top:0; left:0; height:4px; background:linear-gradient(90deg,var(--coral),var(--gold),var(--green)); width:0%; z-index:120; transition:width .1s linear;} /* ===== NAV ===== */ /* The translucent blur lives on a ::before layer rather than directly on nav.top itself — Safari/WebKit has a long-standing bug where combining `position:sticky` with `backdrop-filter` on the same element stops the element from sticking at all. Keeping the sticky element's own background opaque-free of backdrop-filter sidesteps it in every browser. */ nav.top{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line); font-family:'Inter',sans-serif;} nav.top::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);} nav.top .nav-in{max-width:var(--wrap); margin:0 auto; padding:5px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;} nav.top .nav-logo img{height:80px; width:auto; display:block;} nav.top .navbar-menu{display:flex; align-items:center; gap:36px;} nav.top .nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:1rem; font-weight:600;} nav.top .nav-links a{text-decoration:none; color:var(--grey);} nav.top .nav-links a:hover{color:var(--ink);} nav.top .nav-actions{display:flex; align-items:center; gap:12px;} nav.top .nav-actions .btn{padding:12px 22px; font-size:0.95rem;} nav.top .nav-actions .btn-green{padding:12px 24px;} .user-profile-menu{position:relative; display:flex; align-items:center; gap:12px;} .user-profile-menu #temp{display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 12px 5px 5px; border-radius:999px; border:1.5px solid var(--line); transition:border-color .15s, background .15s;} .user-profile-menu #temp:hover{border-color:#C6CFDA; background:#FAFBFD;} .user-profile-menu .username{font-size:0.9rem; font-weight:700; color:var(--ink); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .user-profile-menu .avatar-initial{width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; font-family:'Inter',sans-serif; flex-shrink:0;} .user-profile-menu .dropdown-caret{width:6px; height:6px; border-right:1.5px solid var(--grey); border-bottom:1.5px solid var(--grey); transform:rotate(45deg); transition:transform .2s; flex-shrink:0;} .user-profile-menu:has(.dropdown-menu.show-dropdown) .dropdown-caret{transform:rotate(-135deg);} .user-profile-menu .dropdown-menu{position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-m); box-shadow:0 20px 44px -20px rgba(30,43,60,0.35); padding:8px; min-width:190px; display:none; flex-direction:column; z-index:70;} .user-profile-menu .dropdown-menu.show-dropdown{display:flex;} .user-profile-menu .dropdown-item{background:none; border:none; text-align:left; padding:10px 12px; border-radius:10px; font-size:0.88rem; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif;} .user-profile-menu .dropdown-item:hover{background:var(--green-tint); color:var(--green-deep);} .user-profile-menu .dropdown-divider{border:none; border-top:1px solid var(--line); margin:6px 4px;} .blue-btn-up-line{padding:9px 16px; border-radius:999px; border:1.5px solid var(--green); color:var(--green); font-weight:700; font-size:0.85rem; text-decoration:none;} .blue-btn-up-line:hover{background:var(--green-tint); color:var(--green-deep);} .mobile-menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;} .mobile-menu-toggle .bar{display:block; flex:none; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s;} @media (max-width:900px){ nav.top .nav-in{padding:14px 24px;} nav.top .nav-logo img{height:65px;} .mobile-menu-toggle{display:flex;} /* The whole nav-links + nav-actions group becomes a single fixed dropdown panel toggled by the hamburger — one cohesive mobile menu instead of two independently-hidden pieces. */ nav.top .navbar-menu{ position:fixed; inset:66px 0 auto 0; z-index:59; background:#fff; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line); padding:10px 24px 22px; max-height:calc(100vh - 66px); overflow-y:auto; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 20px 40px -20px rgba(30,43,60,0.3); } nav.top .navbar-menu.active{opacity:1; transform:translateY(0); pointer-events:auto;} nav.top .nav-links{flex-direction:column; gap:0; width:100%;} nav.top .nav-links a{display:block; padding:14px 0; border-bottom:1px solid var(--line);} nav.top .nav-actions{flex-direction:column; align-items:stretch; gap:12px; width:100%; margin-top:16px;} nav.top .nav-actions .btn{width:100%; justify-content:center;} /* Signed-in state: skip the click-to-reveal avatar dropdown (redundant inside an already-open mobile menu) and just lay "My Interviews" / "Logout" out as plain full-width rows. */ .user-profile-menu{flex-direction:column; align-items:stretch; width:100%; gap:10px;} .user-profile-menu #temp{width:100%; border:none; padding:10px 0; border-bottom:1px solid var(--line); border-radius:0;} .user-profile-menu .blue-btn-up-line{width:100%; text-align:center;} .user-profile-menu .dropdown-menu{display:flex !important; position:static; flex-direction:column; box-shadow:none; border:none; padding:0; min-width:0; width:100%;} .user-profile-menu .dropdown-item{padding:12px 0;} } /* ===== FOOTER ===== */ footer.lokey-footer{border-top:1px solid var(--line); padding:36px 0 24px; margin-top:20px; font-family:'Inter',sans-serif;} footer.lokey-footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;} footer.lokey-footer .footer-logo img{height:55px;} footer.lokey-footer .footer-links{list-style:none; display:flex; gap:24px; margin:0; padding:0; font-size:0.88rem; font-weight:600;} footer.lokey-footer .footer-links a{text-decoration:none; color:var(--grey);} footer.lokey-footer .footer-links a:hover{color:var(--ink);} footer.lokey-footer .footer-legal{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);} footer.lokey-footer .footer-legal p{font-size:0.75rem; color:#9AA7B4; line-height:1.6;} footer.lokey-footer .footer-legal a{color:#9AA7B4;} /* ===== AUTH MODAL ===== */ /* Structural/behavioral classes below are consumed as-is by js/login-signup.js (.auth-form.active toggling, .auth-container.signup-active, error-message.show/success, otp-timer.show) — only re-themed here, not renamed, so the auth logic keeps working untouched. */ /* z-index above .progress (120) so the scroll-progress bar can't render a stray line over the modal. */ .modal-overlay{position:fixed; inset:0; background:rgba(20,30,45,0.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); z-index:130; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; font-family:'Inter',sans-serif;} .modal-overlay.open{opacity:1; pointer-events:auto;} /* Locking scroll on both html and body: depending on the browser, the *viewport's* own scrollbar can belong to either element, and locking only one leaves the other's scrollbar rendered — a thin vertical line running the full page height right past the modal's edge, ignoring its rounded corners entirely because it was never part of the modal's box at all. */ html.modal-lock, body.modal-lock{overflow:hidden; height:100%;} /* border-radius + overflow:hidden live here, on a box that never scrolls itself — the actual scrolling happens one level in, on .auth-scroll. A scrollbar can't be rounded, so keeping it off the rounded element entirely (rather than trying to style around it) is what actually fixes the scrollbar-cutting-into-the-corner look. */ .auth-container{background:#fff; border-radius:var(--r-l); width:100%; max-width:460px; position:relative; overflow:hidden; box-shadow:0 40px 90px -30px rgba(20,30,45,0.6); transform:translateY(14px) scale(0.98); transition:transform .25s; max-height:calc(100vh - 40px); margin:0;} .modal-overlay.open .auth-container{transform:translateY(0) scale(1);} .auth-container.signup-active{max-width:560px;} .auth-scroll{padding:36px 34px 30px; max-height:calc(100vh - 40px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#C6CFDA transparent;} .auth-scroll::-webkit-scrollbar{width:6px;} .auth-scroll::-webkit-scrollbar-track{background:transparent;} .auth-scroll::-webkit-scrollbar-thumb{background:#C6CFDA; border-radius:999px;} .auth-scroll::-webkit-scrollbar-thumb:hover{background:#AEB9C6;} .m-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:#F1F4F8; color:var(--grey); cursor:pointer; font-size:1rem; font-weight:700; line-height:1; z-index:5;} .m-close:hover{background:#E4EAF1; color:var(--ink);} .m-tabs{display:flex; background:#F1F4F8; border-radius:999px; padding:4px; margin-bottom:22px;} .m-tab{flex:1; border:none; background:none; padding:10px; border-radius:999px; font-weight:700; font-size:0.9rem; color:var(--grey); cursor:pointer; transition:background .2s, color .2s; font-family:'Inter',sans-serif;} .m-tab.active{background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(20,30,45,0.12);} .auth-header{text-align:center; margin-bottom:1.25rem;} .auth-header img.logo-image{height:32px; width:auto; margin:0 auto 10px;} /* login-signup.js rewrites this h1's innerHTML on every tab switch (it only ever sets an icon + text, no styling), so the heading is styled here rather than via an inline style attribute that would get wiped out the first time a tab fires. */ .auth-header h1{font-size:1.5rem; font-weight:800; font-family:'Bricolage Grotesque',sans-serif; color:var(--ink); margin:0;} .auth-header h1 i{display:none;} .auth-header p{color:var(--grey); font-size:0.9rem; margin:8px 0 0;} .auth-form{display:none; opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease;} .auth-form.active{display:block; opacity:1; transform:translateY(0);} .form-group{margin-bottom:14px; position:relative;} .form-group label{display:block; font-size:0.8rem; font-weight:700; margin-bottom:6px; color:var(--ink);} .form-group input, .form-group select{width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-family:'Inter',sans-serif; font-size:0.95rem; transition:border-color .15s; background:#fff; color:var(--ink);} .form-group input::placeholder{color:#AEB8C2; opacity:1;} .form-group input:focus, .form-group select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,127,246,0.12);} .form-group input.input-invalid{border-color:#B3261E;} .form-group input.input-invalid:focus{box-shadow:0 0 0 3px rgba(179,38,30,0.12);} .field-hint{display:block; margin-top:6px; font-size:0.75rem; color:var(--grey);} .field-error{display:none; margin-top:6px; font-size:0.78rem; font-weight:600; color:#B3261E;} .field-error.show{display:block;} .form-row{display:flex; gap:12px;} /* min-width:0 overrides flexbox's default min-width:auto, which otherwise refuses to shrink a flex item below its content's intrinsic width — the nationality