/* ============================================================ Yalla English — shared brand styles (landing + login) Fonts are loaded via in each page's . ============================================================ */ :root{ --orange:#FA8C1E; --orange-d:#DF7611; --teal:#08BBA9; --teal-d:#069E8F; --cream:#FCFCFB; --ink:#0C3B37; --muted:#5C6B73; --card:#ffffff; --yellow:#FFC93C; --pink:#FF5D8F; --purple:#7C5CFF; --green:#27c281; --shadow:0 10px 30px rgba(12,59,55,.06); --radius:22px; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Cairo', 'Tajawal', sans-serif;color:var(--ink);line-height:1.7; background: radial-gradient(1200px 600px at 100% -10%, #FFF1E1 0, transparent 60%), radial-gradient(900px 500px at -10% 10%, #E6F7F4 0, transparent 55%), var(--cream); min-height:100vh} h1, h2, h3, h4, h5, h6, .h2 { font-family: 'Baloo 2', 'Cairo', 'Tajawal', sans-serif; } .en{font-family:'Poppins', sans-serif;direction:ltr;unicode-bidi:isolate} a{color:inherit} .wrap{max-width:1040px;margin:0 auto;padding:18px} /* header */ .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 6px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.5rem;text-decoration:none} .logo .mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--orange),var(--yellow)); display:grid;place-items:center;color:#fff;font-family:'Poppins';font-weight:800;box-shadow:var(--shadow);transform:rotate(-6deg)} .logo b{color:var(--orange)} .logo span{color:var(--teal)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;border:none;cursor:pointer; font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:1.05rem;padding:13px 26px;border-radius:999px;text-decoration:none; box-shadow:0 8px 20px rgba(250,140,30,.4);transition:transform .15s, box-shadow .15s} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,122,0,.5)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn.teal{background:var(--teal)} .btn.teal:hover{box-shadow:0 12px 26px rgba(6,182,164,.45)} .btn.ghost{background:#fff;color:var(--teal-d);box-shadow:var(--shadow)} .btn.lg{font-size:1.15rem;padding:16px 34px} .btn.block{display:flex;width:100%;justify-content:center} .btn.sm{padding:9px 18px;font-size:.95rem} /* cards / sections */ .card{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .section{padding:34px 6px} .h2{font-size:1.7rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px} .h2 .dot{width:12px;height:12px;border-radius:50%;background:var(--orange)} .lead{color:var(--muted);font-size:1.05rem;margin-bottom:18px} .grid{display:grid;gap:16px} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .feature .ico{font-size:2.2rem} .feature h3{margin:8px 0 4px;font-size:1.15rem} .feature p{color:var(--muted);font-size:.96rem} .pill{background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;box-shadow:var(--shadow);font-size:.95rem;color:var(--teal-d)} .field{margin-bottom:14px} .field label{display:block;font-weight:700;margin-bottom:6px} .field input{width:100%;font-family:'Poppins';font-size:1.1rem;padding:13px 16px;border:2px solid #e7e7ee;border-radius:14px;outline:none;transition:.15s;direction:ltr;text-align:left} .field input:focus{border-color:var(--teal)} .msg{border-radius:12px;padding:11px 14px;font-weight:700;margin-bottom:12px;display:none} .msg.show{display:block} .msg.err{background:#ffe0e6;color:#b3215a} .msg.ok{background:#d8f7e8;color:#127a4e} .msg.info{background:#FFF6E5;color:#8a6d1f} footer{text-align:center;color:var(--muted);padding:30px 10px;font-size:.9rem} html,body{overflow-x:hidden;max-width:100%} img,iframe{max-width:100%} @media(max-width:600px){ .wrap{padding:12px} .h2{font-size:1.35rem} .section{padding:24px 4px} .lead{font-size:.98rem} .grid.c3,.grid.c4{grid-template-columns:1fr 1fr;gap:10px} .feature .ico{font-size:1.8rem} .feature h3{font-size:1rem} .feature p{font-size:.85rem} .card{padding:16px} .btn{padding:12px 18px;font-size:1rem} .btn.lg{font-size:1.05rem;padding:14px 22px} .nav{padding:10px 2px} .logo{font-size:1.25rem} } @media(max-width:380px){ .grid.c3,.grid.c4{grid-template-columns:1fr} }