/* ===================================================================== school kfoo — Premium purple-neon design system (RTL, Arabic) ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700&display=swap'); :root{ /* palette */ --purple:#8B5CF6; --violet:#6D28D9; --electric:#A855F7; --bg:#050505; --bg-2:#0B0B14; --surface:#11111d; --text:#FFFFFF; --muted:#B8B8D0; --line:rgba(255,255,255,.08); --grad:linear-gradient(135deg,#A855F7 0%,#8B5CF6 45%,#6D28D9 100%); --grad-soft:linear-gradient(135deg,rgba(168,85,247,.18),rgba(109,40,217,.10)); --glow:0 0 0 1px rgba(139,92,246,.25),0 18px 60px -12px rgba(139,92,246,.55); --shadow:0 20px 60px -20px rgba(0,0,0,.7); --radius:18px; --radius-sm:12px; --maxw:1200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Cairo','Tajawal',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; position:relative; min-height:100vh; } /* ambient neon blobs */ body::before,body::after{ content:"";position:fixed;z-index:0;border-radius:50%; filter:blur(120px);opacity:.45;pointer-events:none; } body::before{width:520px;height:520px;background:#6D28D9;top:-160px;inset-inline-start:-120px;} body::after{width:480px;height:480px;background:#A855F7;bottom:-180px;inset-inline-end:-140px;opacity:.30;} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{line-height:1.25;font-weight:800} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px;position:relative;z-index:1} section{position:relative;z-index:1} /* utilities ---------------------------------------------------------- */ .text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .muted{color:var(--muted)} .center{text-align:center} .mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px} .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between} .gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.wrap{flex-wrap:wrap} .hide-mobile{} /* glass -------------------------------------------------------------- */ .glass{ background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--radius); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow); } /* buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-weight:700;font-size:.98rem; padding:12px 22px;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:.25s ease;white-space:nowrap; } .btn-lg{padding:15px 30px;font-size:1.05rem} .btn-block{display:flex;width:100%} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px rgba(139,92,246,.7)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(168,85,247,.8)} .btn-ghost{background:rgba(255,255,255,.04);color:#fff;border-color:var(--line)} .btn-ghost:hover{border-color:var(--purple);background:rgba(139,92,246,.12)} /* (The hero's blue «مشاهدة الدورات» button lived here. The hero CTA is now a segmented pill built from .cta-seg — see the .hero-cta block further down.) */ .btn-danger{background:rgba(248,113,113,.12);color:#fca5a5;border-color:rgba(248,113,113,.4)} .btn-danger:hover{background:rgba(248,113,113,.22)} .btn-sm{padding:8px 14px;font-size:.85rem} /* badges ------------------------------------------------------------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700; padding:5px 12px;border-radius:999px;background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid rgba(139,92,246,.3)} .badge-green{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.3)} .badge-amber{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3)} .badge-red{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.3)} .badge-gray{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)} /* ============================ NAVBAR ============================== */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px); background:rgba(5,5,5,.7);border-bottom:1px solid var(--line)} .nav .container{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem} .brand .logo{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center; font-size:1.1rem;box-shadow:0 8px 24px -6px rgba(139,92,246,.8)} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:.2s} .nav-links a:hover{color:#fff} .nav-actions{display:flex;gap:10px;align-items:center} /* Header actions: squared, not pill. * * The roundness came from .btn's own border-radius:999px, which every button * on the site shares — so this is scoped to .nav-actions rather than changed * at the source. Page-level calls to action keep the pill shape on purpose: * a squared header reads as chrome, a rounded button reads as an invitation, * and letting the two differ is what stops the header competing with the hero. * * Slightly smaller than a body button as well. Header controls sit beside the * logo, and matching its weight rather than the hero's is what keeps the bar * feeling like a bar. */ .nav-actions .btn{ border-radius:9px; padding:8px 15px; font-size:.85rem;font-weight:700;letter-spacing:.1px; } /* «تسجيل الدخول» drops its box entirely and becomes a quiet text action. * * Two framed buttons of equal weight sitting next to the logo is what made the * bar feel heavy and crowded — neither one led, and together they pushed the * mark to the edge. Giving the secondary no border and no fill leaves a single * button in the header, so the eye lands on «ابدأ الآن» immediately and the * logo gets its space back. The hit area is unchanged; only the paint is. */ .nav-actions .btn-ghost{ background:transparent;border-color:transparent; color:#c6c6da;padding-inline:11px; } .nav-actions .btn-ghost:hover{ background:rgba(255,255,255,.07); border-color:transparent;color:#fff; } /* A tighter shadow than the hero's — at this size the wide glow smeared into the sticky bar's blur and made the edge look soft. */ .nav-actions .btn-primary{box-shadow:0 6px 18px -9px rgba(139,92,246,.9)} .nav-actions .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -9px rgba(168,85,247,1); } .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer} /* desktop header (RTL): logo → right edge · links centered in the middle · buttons → left edge. Pure flexbox — the links fill the middle & center themselves, so NOTHING is ever pushed off-screen regardless of viewport width (no hardcoded pixel offsets). */ @media(min-width:769px){ .nav-links{flex:1;justify-content:center} } /* ============================ HERO ================================ */ .hero{padding:90px 0 80px;text-align:center} .hero .eyebrow{display:inline-flex;margin-bottom:22px} .hero h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-1px} .hero p{max-width:680px;margin:22px auto 0;color:var(--muted);font-size:1.15rem} /* Hero call to action — one segmented control, not two loose buttons. * * Both actions now sit inside a single pill "track": the primary is a filled * segment, the secondary is bare. Reading them as one object is what makes the * pair feel considered rather than stacked, and it halves the space they take. * * width:max-content + auto margins rather than justify-content:center — the * track has to hug its two segments, otherwise the pill would stretch the * full width of the hero and the framing would be lost. * * No flex-wrap: they are meant to stay side by side at every width, so the * type scales down on small screens instead of the second one dropping under * the first. */ .hero-cta{ display:flex;align-items:center;gap:6px; width:max-content;max-width:100%;margin:36px auto 0;padding:6px; border-radius:999px; background:rgba(255,255,255,.045); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 45px -26px rgba(0,0,0,.95); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .cta-seg{ display:inline-flex;align-items:center;gap:5px; padding:11px 24px;border-radius:999px; font-weight:800;font-size:.95rem;color:#cdcde4; white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s; } /* The small ordinal. Kept in Latin figures and dimmed — it is a typographic detail, not information the reader has to parse. */ .cta-seg sup{font-size:.6em;font-weight:700;opacity:.5;letter-spacing:.5px; transform:translateY(-.15em);display:inline-block} .cta-seg.cta-on{ background:var(--grad);color:#fff; box-shadow:0 10px 24px -12px rgba(139,92,246,.95); } .cta-seg.cta-on:hover{filter:brightness(1.09);box-shadow:0 14px 30px -12px rgba(168,85,247,1)} .cta-seg.cta-on sup{opacity:.65} /* The secondary keeps the blue identity the old button had, but only on hover — a second filled segment would break the segmented reading. */ .cta-seg:not(.cta-on):hover{background:rgba(56,189,248,.14);color:#fff} @media(max-width:600px){ .hero-cta{margin-top:26px;padding:5px;gap:4px} .cta-seg{padding:9px 15px;font-size:.83rem} } @media(max-width:360px){ .cta-seg{padding:8px 11px;font-size:.76rem;gap:4px} } .hero-visual{margin-top:60px;position:relative} /* frameless scaling wrapper: the embed renders at a 1280x720 design canvas and is scaled by JS to fill this box → looks identical (not cramped) on phone/laptop/desktop */ .hero-orb{width:min(960px,100%);margin-inline:auto;aspect-ratio:16/9;position:relative;overflow:hidden} .hero-embed{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;background:transparent;transform-origin:top left} /* site logo (KFOO wordmark) — dark-navy art inverted to white for the dark UI */ .brand-img{height:42px;width:auto;display:block;filter:brightness(0) invert(1)} .sidebar .brand-img{height:38px} .auth-card .brand-img{height:52px;margin-inline:auto} @media(max-width:600px){.brand-img{height:34px}} .float{animation:float 6s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} /* mock chart inside hero */ .chart-mock{width:80%;height:60%;display:flex;align-items:flex-end;gap:10px} .chart-mock span{flex:1;background:var(--grad);border-radius:8px 8px 0 0;opacity:.85;animation:grow 2.4s ease infinite alternate} @keyframes grow{from{transform:scaleY(.45)}to{transform:scaleY(1)}} /* ============================ STATS =============================== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .stat{padding:26px 20px;text-align:center} .stat .num{font-size:2.1rem;font-weight:900} .stat .lbl{color:var(--muted);font-size:.95rem;margin-top:4px} /* section header */ .sec{padding:80px 0} .sec-head{text-align:center;max-width:640px;margin:0 auto 48px} .sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem)} .sec-head p{color:var(--muted);margin-top:12px} /* ============================ FEATURES ============================ */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} /* Landing-page cards — one lit system * * Colours are lifted from the reference: a luminous violet core at the card's * lower edge running out through indigo, over a faintly violet translucent * panel. Five gradient stops rather than two — fewer bands the colour into * visible rings across a wide card. * * Everything here is scoped to .landing, set on the public page's . * .stat, .tutor and .course-card are also used inside the student dashboard, * and this treatment is meant for the shopfront only; without the scope the * signed-in area would have quietly changed too. * * overflow:hidden is what "على قد البطاقة" asks for: the glow is deliberately * wider than the card so its falloff stays smooth, and the card clips it to * its own rounded box so the light belongs to the card, not the page. * * No blur filter anywhere. A radial gradient is already soft, and blurring a * layer that animates every frame is the one thing that would make a dozen of * these expensive on a phone. Only transform and opacity move — both handled * by the compositor with no repaint. * ================================================================== */ .landing .feature, .landing .stat, .landing .tutor, .landing .course-card{ position:relative;overflow:hidden; background:linear-gradient(180deg, rgba(146,136,205,.085) 0%, rgba(92,82,160,.045) 42%, rgba(66,58,120,.03) 100%); border:1px solid rgba(150,140,210,.13); } /* ================================================================== * Feature cards — glass panel, neon rim, lit from within * * Modelled on the reference. What is achievable in CSS and what is not: the * rendered 3-D objects in that mockup are generated images, so the artwork * here is drawn — an SVG of bars and light-trails, tinted per card. The rest * of the language carries over exactly: saturated blue-violet body, a bright * rim, a gloss falling from the top-left corner, and a glowing icon tile. * * Each card owns a bright channel --fc and a deep one --fc2, kept as raw * r,g,b so one pair can build both solid colours and any alpha. Panel, rim, * outer bloom, artwork and icon tile all read from that pair — six surfaces, * two numbers. * ================================================================== */ .landing .feature{--fc:139,92,246;--fc2:76,29,149} /* violet */ .landing .feature:nth-child(2){--fc:96,165,250;--fc2:29,78,216} /* blue */ .landing .feature:nth-child(3){--fc:192,132,252;--fc2:126,34,206} /* purple */ .landing .feature:nth-child(4){--fc:56,189,248;--fc2:3,105,161} /* sky */ .landing .feature:nth-child(5){--fc:167,139,250;--fc2:91,33,182} /* periwinkle */ .landing .feature:nth-child(6){--fc:232,121,249;--fc2:162,28,175} /* fuchsia */ .landing .feature{ padding:26px 24px;border-radius:22px; /* Three layers, top to bottom: the gloss falling off the upper-left corner, the body colour, then a near-black floor so the saturation never washes the text out. Stacking them in one background beats stacking elements — no extra nodes, and the whole thing rasterises once. */ background: radial-gradient(115% 78% at 18% -12%, rgba(255,255,255,.24), rgba(255,255,255,0) 56%), linear-gradient(155deg, rgba(var(--fc),.42) 0%, rgba(var(--fc2),.40) 46%, rgba(14,11,42,.72) 100%), #0a0918; border:1px solid rgba(var(--fc),.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), /* the lit top edge */ inset 0 0 30px -8px rgba(var(--fc),.45), /* rim light bleeding inward */ 0 14px 40px -16px rgba(var(--fc),.65), /* the card sitting on the page */ 0 0 46px -18px rgba(var(--fc),.75); /* the neon bloom around it */ } /* Scenery: opposite the icon. inset-inline-end resolves to the LEFT here — the page is RTL and the icon holds the inline start — so the drawing and the icon never fight for the same corner in either direction. */ .landing .feature .f-art{ position:absolute;inset-inline-end:-3%;bottom:-5%; width:64%;height:80%;pointer-events:none;z-index:0;opacity:.9; } .landing .feature .fa-bars rect{fill:rgba(255,255,255,.11)} .landing .feature .fa-w1{ fill:none;stroke:rgb(var(--fc));stroke-width:5;stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(var(--fc),.95)); } .landing .feature .fa-w2{fill:none;stroke:rgba(255,255,255,.5);stroke-width:3;stroke-linecap:round} .landing .feature .fa-d{fill:rgba(255,255,255,.75)} /* Text and icon ride above the artwork. */ .landing .feature .ic, .landing .feature h3, .landing .feature p{position:relative;z-index:1} .landing .feature p{color:#dcd8f5} /* The icon tile: its own gloss, its own rim, its own glow — a small object sitting on the card rather than a coloured square printed on it. */ .landing .feature .ic{ width:58px;height:58px;border-radius:17px;font-size:1.7rem; background: radial-gradient(95% 72% at 30% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 62%), linear-gradient(160deg, rgba(var(--fc),.95), rgba(var(--fc2),.98)); border:1px solid rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -9px rgba(var(--fc),.95), 0 0 26px -10px rgba(var(--fc),.9); } .landing .feature:hover{ border-color:rgba(var(--fc),.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 34px -8px rgba(var(--fc),.6), 0 18px 48px -16px rgba(var(--fc),.8), 0 0 62px -16px rgba(var(--fc),.95); } /* The drifting bloom keeps running, but now in the card's own colour instead of the shared periwinkle — six different rims lit by one violet glow looked like a mistake rather than a scheme. */ .landing .feature::before{ background:radial-gradient(62% 74% at 50% 104%, rgba(var(--fc),.60) 0%, rgba(var(--fc),.34) 26%, rgba(var(--fc2),.22) 52%, rgba(var(--fc2),.07) 74%, rgba(var(--fc2),0) 92%); } /* The hairline is retired for features: the inset top highlight in the box shadow above already draws that edge, and two of them read as a double border. Stat and tutor cards keep theirs. */ .landing .feature::after{content:none} .landing .feature::before, .landing .stat::before, .landing .tutor::before, .landing .course-card::before{ content:"";position:absolute;z-index:-1;pointer-events:none; /* Box is the card's height but 150% of its width. The extra width is what lets the light drift sideways without ever exposing a bare corner. */ left:-25%;right:-25%;top:0;bottom:0; /* Focal point just BELOW the bottom edge (104%), not far under the card. The first attempt pushed this box 46% below the card, which put the bright core outside the clip entirely — all that survived inside was the dim outer tail, and the cards read as flat. Sitting it a hair under the edge is what makes the light rise INTO the card the way the reference does. */ /* 78% of the card's height, so the bloom climbs well into the panel and washes it the way the reference does, instead of hugging the bottom rim. */ /* Read off the reference: a MUTED periwinkle, not a saturated purple. The earlier mix was too neon — the bloom in the image is pastel and slightly grey, which is why it looks like light and not like paint. */ background:radial-gradient(62% 78% at 50% 104%, rgba(168,152,246,.92) 0%, /* #a898f6 — the pale core */ rgba(134,116,224,.68) 24%, /* #8674e0 */ rgba(104,88,190,.42) 46%, /* #6858be */ rgba(78,66,150,.20) 66%, rgba(64,54,120,.06) 82%, rgba(64,54,120,0) 94%); /* Not `alternate`. The keyframes already return to their own start, so alternating would replay the circuit backwards — and a path that retraces itself is exactly the metronome the new keyframes were written to avoid. Duration is set per-card further down. */ animation:cardGlow 15s ease-in-out infinite; } /* A hairline catching light along the top edge — the detail that separates a dark panel from a dark rectangle. Course cards are left out: they open with a thumbnail, and a bright line laid over a photograph reads as a seam. */ .landing .feature::after, .landing .stat::after, .landing .tutor::after{ content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); } /* The path is a slow loop, not a swing. * * A two-keyframe left-right drift is legible as a mechanism: the eye catches * the turning points and the whole grid starts to look like a metronome. * Four waypoints with the vertical offset out of phase with the horizontal * trace a soft circuit instead, so the light never visibly reverses — it * drifts, the way light pooling under something would. Scale and opacity ride * along, brightest at the low point of the loop. * * Only transform and opacity animate. Both are composited, so twelve of these * running at once cost no layout and no repaint. */ @keyframes cardGlow{ 0% {transform:translate(-13%, 4%) scale(.94); opacity:.66} 25% {transform:translate( -4%, -4%) scale(1.05);opacity:.90} 50% {transform:translate( 12%, 3%) scale(1.00);opacity:1} 75% {transform:translate( 2%, -5%) scale(1.08);opacity:.84} 100% {transform:translate(-13%, 4%) scale(.94); opacity:.66} } /* Every card gets its own duration AND its own negative start offset. * * Staggering the delay alone is not enough: identical durations mean the grid * drifts apart once and then locks back into the same relative pattern forever. * Giving each card a different period means the arrangement of the six lights * never repeats — which is what separates a designed background from a loop. * * Negative delays put every card mid-circuit on the first frame, so nothing * has to wait for the animation to "arrive". */ .landing .feature::before, .landing .stat::before, .landing .tutor::before, .landing .course-card::before{animation-duration:15s} .landing .feature:nth-child(1)::before, .landing .stat:nth-child(1)::before, .landing .tutor:nth-child(1)::before, .landing .course-card:nth-child(1)::before{animation-duration:15s;animation-delay:-1s} .landing .feature:nth-child(2)::before, .landing .stat:nth-child(2)::before, .landing .tutor:nth-child(2)::before, .landing .course-card:nth-child(2)::before{animation-duration:18s;animation-delay:-5s} .landing .feature:nth-child(3)::before, .landing .stat:nth-child(3)::before, .landing .tutor:nth-child(3)::before, .landing .course-card:nth-child(3)::before{animation-duration:13s;animation-delay:-9s} .landing .feature:nth-child(4)::before, .landing .stat:nth-child(4)::before, .landing .course-card:nth-child(4)::before{animation-duration:20s;animation-delay:-3s} .landing .feature:nth-child(5)::before, .landing .course-card:nth-child(5)::before{animation-duration:16s;animation-delay:-12s} .landing .feature:nth-child(6)::before, .landing .course-card:nth-child(6)::before{animation-duration:22s;animation-delay:-7s} /* ================================================================== * A colour per course * * Every course card carries two channels — a bright core and a deep shade — * as raw "r,g,b" triplets in --cc / --cc2. Everything the card tints reads * from those two: the bloom underneath, the border, the level chip, the price * and the subscribe button. One pair of numbers per card, six things follow. * That is why they are stored unwrapped: rgb() can build both a solid colour * and any alpha from the same variable, which a finished rgba() cannot. * * The palette is deliberately desaturated. Six saturated hues side by side * would read as a toy; muted ones keep the page premium and still tell the * courses apart at a glance. It cycles every six, so any number of courses * is covered and neighbours in a four-wide row never repeat. * ================================================================== */ .landing .course-card{--cc:168,152,246;--cc2:92,76,190} /* periwinkle */ .landing .course-card:nth-child(6n+2){--cc:106,214,206;--cc2:30,118,124} /* aqua */ .landing .course-card:nth-child(6n+3){--cc:226,182,110;--cc2:140,96,36} /* gold */ .landing .course-card:nth-child(6n+4){--cc:232,140,180;--cc2:140,58,100} /* rose */ .landing .course-card:nth-child(6n+5){--cc:127,182,245;--cc2:44,92,176} /* azure */ .landing .course-card:nth-child(6n){--cc:132,214,155;--cc2:46,120,78} /* mint */ /* The course bloom is tuned down from the feature cards'. These panels are twice as tall and mostly body copy, and at the feature strength the colour flooded the text instead of sitting under it. */ .landing .course-card::before{ background:radial-gradient(58% 60% at 50% 104%, rgba(var(--cc),.55) 0%, rgba(var(--cc),.34) 26%, rgba(var(--cc2),.22) 50%, rgba(var(--cc2),.08) 72%, rgba(var(--cc2),0) 90%); } .landing .course-card{border-color:rgba(var(--cc),.20)} .landing .course-card:hover{border-color:rgba(var(--cc),.55)} /* The level chip, the price and the subscribe button all take the course's own colour, so the card reads as one object rather than a violet template with a picture on top. */ .landing .course-card .badge.lvl{ background:rgba(var(--cc),.16);color:rgb(var(--cc)); border-color:rgba(var(--cc),.42); } .landing .course-card .price{ background-image:linear-gradient(135deg,rgb(var(--cc)),rgb(var(--cc2))); } .landing .course-card .js-sub{ background:linear-gradient(135deg,rgb(var(--cc2)),rgb(var(--cc))); box-shadow:0 8px 22px -10px rgba(var(--cc),.95); } .landing .course-card .js-sub:hover{ filter:brightness(1.09); box-shadow:0 12px 28px -10px rgba(var(--cc),1); } .landing .feature:hover, .landing .tutor:hover{border-color:rgba(139,92,246,.45)} .landing .feature:hover::before, .landing .tutor:hover::before, .landing .course-card:hover::before{opacity:1;animation-duration:5s} .feature .ic{width:54px;height:54px;border-radius:14px;background:var(--grad-soft); border:1px solid rgba(139,92,246,.3);display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px} .feature h3{font-size:1.2rem} .feature p{color:var(--muted);margin-top:8px;font-size:.95rem} .card-hover{transition:.3s} .card-hover:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:var(--glow)} /* ============================ COURSES ============================= */ .course-card{overflow:hidden;display:flex;flex-direction:column} .course-thumb{aspect-ratio:16/9;background:var(--grad-soft);position:relative;display:grid;place-items:center; border-bottom:1px solid var(--line);font-size:2.4rem} .course-thumb .lvl{position:absolute;top:12px;inset-inline-start:12px} .course-thumb .reg-chip{position:absolute;top:12px;inset-inline-end:12px;background:rgba(248,113,113,.20);color:#fecaca;border:1px solid rgba(248,113,113,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* registration countdown line (sits under the instructor row) */ .reg-cd{font-size:.82rem;color:#a5b4fc;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .reg-cd b{font-weight:800;font-variant-numeric:tabular-nums;color:#c7d2fe;letter-spacing:.3px} .reg-cd.closed,.reg-cd.closed b{color:#fca5a5} .btn.disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.4)} .course-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1} .course-body h3{font-size:1.12rem} .course-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem} .course-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .price{font-weight:900;font-size:1.2rem} .stars{color:#fcd34d;font-size:.9rem;letter-spacing:1px} /* ============================ INSTRUCTORS ========================= */ .tutor{padding:26px;text-align:center} .tutor .pfp{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;background:var(--grad); display:grid;place-items:center;font-size:1.8rem;font-weight:900;box-shadow:var(--glow)} .tutor h3{font-size:1.15rem} .tutor .spec{color:var(--electric);font-size:.9rem;margin-top:2px} /* ============================ TESTIMONIALS ======================= */ .testi{padding:30px;display:flex;flex-direction:column;gap:16px} .testi .quote{color:#e5e5f0} .testi .who{display:flex;align-items:center;gap:12px} .testi .who .pfp{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800} /* ============================ FAQ ================================= */ .faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;background:rgba(255,255,255,.02)} .faq-q{width:100%;text-align:start;background:none;border:0;color:#fff;font-family:inherit; font-weight:700;font-size:1.02rem;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px} .faq-q .chev{transition:.3s;color:var(--electric)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)} .faq-a div{padding:0 20px 18px} .faq-item.open .faq-a{max-height:300px} .faq-item.open .chev{transform:rotate(180deg)} /* ============================ FOOTER ============================== */ .footer{border-top:1px solid var(--line);margin-top:40px;padding:56px 0 28px;background:rgba(11,11,20,.6)} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px} .footer h4{margin-bottom:14px;font-size:1rem} .footer a{color:var(--muted);display:block;padding:5px 0;font-size:.92rem} .footer a:hover{color:#fff} .socials{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center} .socials a{width:34px;height:34px;border-radius:50%;background:transparent!important;border:none!important;box-shadow:none!important;padding:0; display:grid;place-items:center;overflow:visible;transition:transform .2s ease,filter .2s ease} .socials a img{width:100%;height:100%;object-fit:contain;display:block} .socials a:hover{transform:translateY(-2px) scale(1.08);filter:brightness(1.12);background:transparent!important} @media(max-width:600px){.socials{gap:8px}.socials a{width:30px;height:30px}} .copyright{text-align:center;color:var(--muted);margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem} /* ============================ AUTH =============================== */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px} .auth-card{width:100%;max-width:460px;padding:40px} .auth-card .brand{justify-content:center;margin-bottom:8px} .auth-card h1{text-align:center;font-size:1.7rem} .auth-card .sub{text-align:center;color:var(--muted);margin:8px 0 26px} .field{margin-bottom:16px} .field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px;color:#d8d8ea} /* 11px, down from 13px: two pixels off the top and bottom of every field in the product — auth, dashboard, admin panel — which is a visibly shorter form without the inputs becoming cramped or hard to tap. */ .input{width:100%;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04); border:1px solid var(--line);color:#fff;font-family:inherit;font-size:1rem;transition:.2s} .input::placeholder{color:#6b6b85} .input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18);background:rgba(139,92,246,.06)} .input.code{letter-spacing:3px;text-align:center;font-weight:700;text-transform:uppercase} /* invalid required field on submit → clear red highlight */ .input.field-invalid,.input.field-invalid:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.22)!important;background:rgba(239,68,68,.06)!important} /* international phone field (country dropdown + dial code) */ .intl-phone{position:relative;display:flex;gap:8px} .intl-phone .iph-input{flex:1;min-width:0} .iph-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:0 12px;color:#fff;cursor:pointer;font-family:inherit;font-weight:700;white-space:nowrap} .iph-btn:hover{background:rgba(255,255,255,.08)} .iph-flag{font-size:1.25rem;line-height:1} .iph-dial{font-size:.95rem;direction:ltr} .iph-caret{opacity:.5;font-size:.7rem} .iph-dd{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:min(340px,92vw);background:#15131f;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60;padding:8px;max-height:330px;display:flex;flex-direction:column} .iph-search{margin-bottom:6px} .iph-list{overflow-y:auto;overscroll-behavior:contain} .iph-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;color:#fff;font-size:.9rem} .iph-item:hover,.iph-item.on{background:rgba(139,92,246,.18)} .iph-item .iph-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iph-item .iph-code{opacity:.6;direction:ltr;font-size:.85rem} .iph-empty{padding:14px;text-align:center;color:var(--muted)} .row-between{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;margin-bottom:18px} .checkbox{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer} /* Declared here, not inline on the element: an inline style would outrank the phone override further down and the terms row would keep its desktop gap. */ .auth-card .checkbox{margin-bottom:18px} .divider{display:flex;align-items:center;gap:14px;color:var(--muted);margin:22px 0;font-size:.85rem} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)} .oauth{display:flex;gap:12px} .oauth .btn{flex:1} .auth-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:.92rem} .auth-foot a{color:var(--electric);font-weight:700} .tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);padding:6px;border-radius:14px;margin-bottom:24px} .tabs button{flex:1;padding:11px;border:0;border-radius:10px;background:none;color:var(--muted); font-family:inherit;font-weight:700;cursor:pointer;transition:.2s;font-size:.92rem} .tabs button.active{background:var(--grad);color:#fff;box-shadow:0 8px 22px -8px rgba(139,92,246,.7)} /* alerts */ .alert{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:.92rem;font-weight:600} .alert-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5} .alert-success{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#6ee7b7} .alert-info{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4);color:#c4b5fd} /* ============================ DASHBOARD LAYOUT ==================== */ .app{display:flex;min-height:100vh} .sidebar{width:268px;flex-shrink:0;background:rgba(11,11,20,.85);border-inline-end:1px solid var(--line); backdrop-filter:blur(16px);position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:60; display:flex;flex-direction:column;padding:22px 16px;transition:transform .3s} .sidebar .brand{padding:6px 8px 22px} .side-nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1} /* THE HAND CURSOR ON HREF-LESS LINKS. A browser shows the pointing hand only for an that HAS an href. Across this panel and the student dashboard there are ~42 anchors that route through a JS click handler instead — the whole sidebar, the section links, several actions — so they rendered with the plain arrow and gave no hint they were clickable at all. Matching on the attributes that make them interactive (rather than on a:not([href]) blindly) keeps genuinely inert anchors, like text placeholders, unaffected. */ a[data-view],a[onclick]{cursor:pointer} .side-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer; color:var(--muted);font-weight:600;font-size:.95rem;transition:.2s} .side-nav a .ic{width:22px;text-align:center;font-size:1.05rem} .side-nav a:hover{background:rgba(255,255,255,.05);color:#fff} .side-nav a.active{background:var(--grad-soft);color:#fff;border:1px solid rgba(139,92,246,.35)} .side-nav .group{color:#6b6b85;font-size:.72rem;font-weight:700;padding:16px 14px 6px;letter-spacing:1px} .side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:10px} .main{flex:1;margin-inline-start:268px;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;transition:margin-inline-start .3s} /* collapsible sidebar on DESKTOP too (☰ near the logo) → content takes full width */ body.side-collapsed .sidebar{transform:translateX(100%)} body.side-collapsed .main{margin-inline-start:0} .topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:0 26px;border-bottom:1px solid var(--line);background:rgba(5,5,5,.6); backdrop-filter:blur(14px);position:sticky;top:0;z-index:40} .topbar .menu-btn{display:block;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px} .topbar .menu-btn:hover{background:rgba(255,255,255,.08)} .topbar h1{font-size:1.2rem} .topbar .right{display:flex;align-items:center;gap:14px} .icon-btn{position:relative;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.05); border:1px solid var(--line);display:grid;place-items:center;color:#fff;cursor:pointer;font-size:1.15rem} .icon-btn.has-unread{animation:bellWiggle 2.8s ease-in-out infinite;transform-origin:50% 18%} @keyframes bellWiggle{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-13deg)}94%{transform:rotate(11deg)}96%{transform:rotate(-7deg)}98%{transform:rotate(4deg)}} .icon-btn .dot{position:absolute;top:5px;inset-inline-end:6px;min-width:9px;height:9px;border-radius:50%; background:#f87171;border:2px solid var(--bg-2);box-sizing:border-box;display:grid;place-items:center; color:#fff;font-size:.6rem;font-weight:800;line-height:1} .icon-btn .dot.count{min-width:18px;height:18px;top:1px;inset-inline-end:1px;padding:0 4px;border-radius:9px} /* professional glowing radial pulse around the unread dot */ .icon-btn .dot.live{animation:dotGlow 1.5s ease-in-out infinite} .icon-btn .dot.live::before{content:'';position:absolute;inset:-3px;border-radius:inherit;background:#f87171;opacity:.55;z-index:-1;animation:dotRing 1.5s ease-out infinite} @keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.55)}50%{box-shadow:0 0 12px 3px rgba(248,113,113,.95)}} @keyframes dotRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.5);opacity:0}} /* "unread messages" floating label */ .bell-tip{position:absolute;top:48px;inset-inline-end:0;white-space:nowrap;background:#f87171;color:#fff; font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:9px;box-shadow:0 8px 18px rgba(0,0,0,.35); opacity:0;transform:translateY(-5px) scale(.9);pointer-events:none;transition:.25s;z-index:30} .bell-tip::before{content:'';position:absolute;top:-4px;inset-inline-end:13px;border:5px solid transparent;border-bottom-color:#f87171;border-top:0} .icon-btn.has-unread .bell-tip{opacity:1;transform:translateY(0) scale(1);animation:tipBounce 2s ease-in-out infinite} @keyframes tipBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}} /* universal back button */ .back-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.05); border:1px solid var(--line);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:.2s;flex:0 0 auto} .back-btn:hover{background:rgba(255,255,255,.12)} .back-btn .chev{display:inline-block;transform:scaleX(-1)} .notif-item{cursor:default;border-radius:12px;transition:background .15s;padding:12px 8px} .notif-item.clickable{cursor:pointer} .notif-item.clickable:hover{background:rgba(255,255,255,.05)} .notif-item.clickable strong::after{content:'‹';display:inline-block;transform:scaleX(-1);opacity:.45;margin-inline-start:6px;font-weight:400} .avatar{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800} .content{padding:28px;flex:1} .page-title{margin-bottom:22px} .page-title h1{font-size:1.6rem} .page-title p{color:var(--muted);margin-top:4px} /* stat tiles (dashboard) */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px} .tile{padding:22px} .tile .top{display:flex;justify-content:space-between;align-items:flex-start} .tile .ic{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(139,92,246,.3);display:grid;place-items:center;font-size:1.3rem} .tile .num{font-size:1.9rem;font-weight:900;margin-top:14px} .tile .lbl{color:var(--muted);font-size:.9rem} .tile .trend{font-size:.8rem;font-weight:700} .trend.up{color:#6ee7b7}.trend.down{color:#fca5a5} /* cards & panels */ .panel{padding:24px;margin-bottom:22px} .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap} .panel-head h2{font-size:1.2rem} /* progress bar */ .progress{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .progress > i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .5s} .progress-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:6px} /* tables */ .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)} table.data{width:100%;border-collapse:collapse;min-width:640px} table.data th,table.data td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--line);font-size:.92rem} table.data th{color:var(--muted);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.02)} table.data tr:last-child td{border-bottom:0} table.data tr:hover td{background:rgba(139,92,246,.05)} .actions{display:flex;gap:6px;flex-wrap:wrap} .mono{font-family:monospace;direction:ltr;letter-spacing:1px} /* ===================== COURSE / PLAYER PAGE ====================== */ .player-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start} .player-layout>*{min-width:0} /* let grid columns shrink → no horizontal overflow on mobile */ .video-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--glow);max-width:100%} /* ---------- video copyright protection (watermark + anti-capture cover) ---------- */ .kfoo-wm{position:absolute;z-index:8;pointer-events:none;user-select:none;white-space:nowrap;text-align:center; line-height:1.3;opacity:0;transition:opacity .5s ease;transform:translate(-50%,-50%);font-weight:800; color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)} .kfoo-wm .b{display:block;font-size:clamp(13px,2.5vw,22px);letter-spacing:.5px} .kfoo-wm .d{display:block;font-size:clamp(11px,1.9vw,16px);opacity:.85;letter-spacing:3px;direction:ltr} .kfoo-wm .u{display:block;font-size:clamp(9px,1.4vw,12px);opacity:.55;font-weight:600;direction:ltr;margin-top:2px} .kfoo-wm-fixed{position:absolute;z-index:7;pointer-events:none;user-select:none;bottom:8px;inset-inline-end:10px; text-align:end;line-height:1.25;opacity:.13;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);direction:ltr} .kfoo-wm-fixed b{display:block;font-size:11px;letter-spacing:.5px} .kfoo-wm-fixed small{display:block;font-size:9px;opacity:.85} .kfoo-cover{position:absolute;inset:0;z-index:30;display:none;place-items:center;text-align:center; background:rgba(8,8,12,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:18px} .kfoo-cover.on{display:grid} .kfoo-cover .ic{font-size:3rem;margin-bottom:10px;animation:warnPulse 1s ease-in-out infinite} .kfoo-cover strong{font-size:1.25rem;display:block;margin-bottom:6px} .kfoo-cover span{color:rgba(255,255,255,.72);font-size:.9rem;display:block} @keyframes warnPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.13);opacity:.82}} /* ---------- admin permission checklist ---------- */ .perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px} .perm-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.86rem;background:rgba(255,255,255,.02);transition:.15s;user-select:none} .perm-item:hover{background:rgba(255,255,255,.06)} .perm-item input{width:17px;height:17px;accent-color:#8B5CF6;flex:none;cursor:pointer} .perm-item.perm-full{grid-column:1/-1;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.07);font-weight:700} .perm-item.perm-wide{grid-column:1/-1;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)} .perm-tags{display:flex;flex-wrap:wrap;gap:5px} @media(max-width:560px){.perm-grid{grid-template-columns:1fr}} /* adapt to the video's real aspect (portrait phone recordings included) + always centered. block (NOT flex) + explicit width:100% so the video can NEVER exceed the viewport → no horizontal overflow / right-shift on mobile. */ .video-shell video{display:block;width:100%;max-width:100%;min-width:0;height:auto;max-height:82vh;margin:0 auto;background:#000;object-fit:contain} .video-locked{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:var(--muted); background:radial-gradient(circle at 50% 40%,rgba(139,92,246,.15),transparent 60%),#0a0a14;gap:10px} .video-locked .lockic{font-size:3rem} .lesson-list{padding:16px;max-height:560px;overflow-y:auto} .lesson{display:flex;gap:12px;align-items:center;padding:13px;border-radius:12px;margin-bottom:8px; border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;transition:.2s} .lesson:hover{border-color:rgba(139,92,246,.4)} .lesson.active{background:var(--grad-soft);border-color:rgba(139,92,246,.5)} .lesson.locked{opacity:.55;cursor:not-allowed} .lesson .ix{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0; background:rgba(139,92,246,.15);font-weight:800;font-size:.85rem} .lesson.done .ix{background:var(--grad);color:#fff} .lesson .meta{flex:1;min-width:0} .lesson .meta .t{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lesson .meta .d{color:var(--muted);font-size:.78rem} .lesson .state{font-size:1.1rem} /* upload widget */ .dropzone{border:2px dashed rgba(139,92,246,.4);border-radius:var(--radius);padding:40px;text-align:center; cursor:pointer;transition:.2s;background:rgba(139,92,246,.04)} .dropzone:hover,.dropzone.drag{background:rgba(139,92,246,.1);border-color:var(--purple)} .dropzone .big{font-size:2.4rem} .upload-item{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-top:12px} .upload-item .row{display:flex;justify-content:space-between;font-size:.88rem} /* empty state */ .empty{text-align:center;padding:60px 20px;color:var(--muted)} .empty .big{font-size:3rem;margin-bottom:12px} /* code chips list (admin codes) */ .codebox{display:inline-flex;align-items:center;gap:8px;font-family:monospace;direction:ltr; background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);padding:6px 12px;border-radius:10px} /* forms in grid */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} textarea.input{min-height:110px;resize:vertical;line-height:1.7} select.input{appearance:none} /* ============================ RESPONSIVE ========================= */ @media(max-width:1024px){ .stats,.grid-4,.tiles{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .player-layout{grid-template-columns:1fr} /* the ambient neon blobs are 520px fixed with NEGATIVE insets → horizontal-overflow source. Drop them on all small/medium screens. */ body::before,body::after{display:none} } @media(max-width:768px){ .nav-links{display:none} .nav-toggle{display:block} .nav.open .nav-links{display:flex;position:absolute;top:72px;inset-inline:0;flex-direction:column; background:rgba(11,11,20,.97);padding:18px 22px;border-bottom:1px solid var(--line);gap:14px} .grid-3,.grid-2,.form-grid{grid-template-columns:1fr} /* closed → display:none so the off-screen panel can't create horizontal scroll on iOS Safari */ .sidebar{display:none;transform:translateX(100%);width:80%;max-width:300px} body.side-open .sidebar{display:flex;transform:translateX(0)} .main{margin-inline-start:0;max-width:100%;overflow-x:hidden} .topbar .menu-btn{display:block} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55} body.side-open .sidebar-backdrop{display:block} } @media(max-width:768px){ .content{padding:16px} .page-title h1{font-size:1.35rem} .panel{padding:16px} .topbar{padding:0 16px;height:62px} .topbar h1{font-size:1.05rem} /* drag/sort rows + library items stack neatly */ .sort-item{flex-wrap:wrap} .sort-item .info{flex:1 1 55%;min-width:0} .sort-item .thumb{width:80px;height:46px} .vid-modal-box{max-width:100%} } @media(max-width:560px){ .stats,.grid-4,.tiles{grid-template-columns:1fr} .hero{padding:60px 0 50px} .content{padding:14px} } /* Data tables become stacked cards on phones (labels via data-label) */ @media(max-width:640px){ .table-wrap{border:0;overflow:visible} table.data{min-width:0;display:block} table.data thead{display:none} table.data tbody{display:block} table.data tr{display:block;border:1px solid var(--line);border-radius:14px;margin-bottom:12px; padding:6px 14px;background:rgba(255,255,255,.025)} table.data tr:hover td{background:none} table.data td{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem;text-align:start} table.data td:last-child{border-bottom:0} table.data td::before{content:attr(data-label);color:var(--muted);font-size:.76rem;font-weight:700;flex:0 0 auto} table.data td .actions{justify-content:flex-end;flex-wrap:wrap;gap:6px} .btn-sm{padding:7px 12px} } /* ============================ SPA additions ====================== */ .hidden{display:none!important} .view{animation:fade .25s ease} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* loading spinner */ .spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(139,92,246,.2); border-top-color:var(--electric);animation:spin .8s linear infinite;margin:40px auto} @keyframes spin{to{transform:rotate(360deg)}} .loading{display:grid;place-items:center;padding:50px;color:var(--muted)} /* toast */ #toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center} .toast{padding:13px 22px;border-radius:12px;font-weight:700;color:#fff;box-shadow:var(--shadow); backdrop-filter:blur(10px);animation:fade .25s ease;max-width:90vw} .toast.ok{background:rgba(52,211,153,.92)} .toast.err{background:rgba(248,113,113,.92)} .toast.info{background:rgba(139,92,246,.92)} /* modal */ .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;place-items:center;padding:20px;backdrop-filter:blur(4px)} .modal-bg.open{display:grid} .modal{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:28px} .modal h2{margin-bottom:16px} /* clickable code chip */ .codebox{cursor:pointer} .codebox:hover{background:rgba(139,92,246,.2)} /* tab pills for SPA sections */ .subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .subnav button{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04); color:var(--muted);font-family:inherit;font-weight:700;cursor:pointer;font-size:.9rem;transition:.2s} .subnav button.active{background:var(--grad);color:#fff;border-color:transparent} /* ============== persistent upload dock ============== */ .up-dock{position:fixed;bottom:18px;inset-inline-start:18px;z-index:9000;width:330px;max-width:90vw; background:rgba(17,17,29,.96);border:1px solid rgba(139,92,246,.4);border-radius:16px; box-shadow:var(--glow);backdrop-filter:blur(14px);overflow:hidden} .up-dock.hidden{display:none} .up-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px; background:var(--grad-soft);border-bottom:1px solid var(--line);font-size:.9rem} .up-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:8px; width:30px;height:28px;cursor:pointer;font-size:.85rem;margin-inline-start:4px} .up-list{max-height:260px;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px} .up-dock.collapsed .up-list{display:none} .up-item .up-row{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;margin-bottom:5px} .up-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .up-st{color:var(--electric);font-weight:700;flex-shrink:0} /* ============== course cover images ============== */ .course-thumb{background-size:cover;background-position:center} .course-thumb.has-cover{font-size:0} .cover-preview{width:200px;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line); background:var(--grad-soft);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:.85rem} .cover-preview img{width:100%;height:100%;object-fit:cover} /* ============== dark dropdown (native is stretched over the pill: the tap opens the phone's own language wheel (the familiar mobile pattern) while the visible chip stays ours and shows the current choice. Building a custom sheet would look the same and behave worse. */ .cc-top{position:relative;display:inline-flex;align-items:center;gap:5px;flex-shrink:0; background:#202b38;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:6px 11px; font-size:.8rem;font-weight:700;color:#cfe0f0;cursor:pointer;max-width:132px;transition:.15s} .cc-top .ic{font-size:.95rem;line-height:1} .cc-cur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cc-top>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; -webkit-appearance:none;appearance:none;border:none;background:none} .cc-top::after{content:"▾";font-size:.62rem;opacity:.6;flex-shrink:0} .cc-top:active{transform:scale(.97)} .cc-top.on{background:linear-gradient(135deg,#7c5cff,#5b8def);border-color:transparent;color:#fff; box-shadow:0 5px 16px -6px rgba(124,92,255,.95)} .cc-top.on::after{opacity:.85} @media(max-width:420px){ .cc-top{max-width:104px;padding:6px 9px;font-size:.74rem} } /* ---- فيديو دخول المدرّب: شريط داخل بطاقة كل مدير ---- */ .adm-intro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding:8px 11px; border:1px dashed var(--line);border-radius:11px;background:rgba(255,255,255,.02);font-size:.83rem} .adm-intro.on{border-style:solid;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.07)} .adm-intro .ai-ic{font-size:1.05rem;flex-shrink:0} .adm-intro .ai-txt{flex:1;min-width:120px} .adm-intro .ai-prog{font-size:.78rem;color:#f59e0b} /* ---- طبقة عرض الفيديو عند دخول المدرّب ---- */ .intro-ov{position:fixed;inset:0;z-index:2147483000;background:#000;display:flex;align-items:center; justify-content:center;animation:introIn .25s ease} @keyframes introIn{from{opacity:0}to{opacity:1}} .intro-ov.out{animation:introOut .4s ease forwards} @keyframes introOut{to{opacity:0;visibility:hidden}} .intro-ov video{width:100%;height:100%;object-fit:contain;background:#000} .intro-nm{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));inset-inline-start:0;inset-inline-end:0; text-align:center;color:#fff;font-weight:800;font-size:clamp(1rem,2.4vw,1.6rem); text-shadow:0 2px 14px rgba(0,0,0,.95);pointer-events:none} .intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-end:16px; background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px; padding:8px 16px;font-size:.85rem;font-weight:800;cursor:pointer;backdrop-filter:blur(6px)} .intro-skip:hover{background:rgba(0,0,0,.85);border-color:#fff} .intro-unmute{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-start:16px; background:rgba(124,92,255,.9);border:none;color:#fff;border-radius:999px;padding:8px 16px; font-size:.85rem;font-weight:800;cursor:pointer;display:none} .intro-unmute.show{display:block;animation:introIn .2s} /* ---- لوحة صاحب المنصّة أعلى الفيديو ---- Sits INSIDE the stage so it travels with the picture through resizing, panel moves and full-screen. pointer-events:none — a nameplate must never eat a click meant for the video. */ .king-plate{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8; display:inline-flex;align-items:center;gap:8px;max-width:88%; padding:6px 16px;border-radius:999px;pointer-events:none; background:linear-gradient(135deg,rgba(20,14,0,.86),rgba(48,34,0,.86)); border:1px solid rgba(255,210,63,.55); box-shadow:0 6px 24px -8px rgba(255,200,60,.55),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(6px)} .king-plate .kp-crown{font-size:1rem;line-height:1;filter:drop-shadow(0 0 6px rgba(255,210,63,.85)); animation:kpGlow 2.6s ease-in-out infinite} @keyframes kpGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}} .king-plate .kp-nm{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;letter-spacing:.2px; background:linear-gradient(180deg,#fff3c4,#ffd23f 45%,#e8a300); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 1px 8px rgba(255,200,60,.25)} @media(max-width:760px){ .king-plate{top:8px;padding:5px 12px} .king-plate .kp-nm{font-size:.8rem} } /* his name reads gold wherever the admin panel prints it */ .name-king{background:linear-gradient(180deg,#fff3c4,#ffd23f 45%,#e8a300); -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900} .badge-king{background:linear-gradient(135deg,#4a3500,#7a5a00);color:#ffd23f; border:1px solid rgba(255,210,63,.5)} .badge-owner{background:linear-gradient(135deg,#4a3500,#7a5a00);color:#ffc93c;border:1px solid rgba(255,201,60,.45)} .badge-instr{background:rgba(34,197,94,.16);color:#4ade80;border:1px solid rgba(34,197,94,.45)} /* the rank badge sits inline with the sender name inside a chat bubble */ .mc-sender .badge{font-size:.6rem;padding:1px 6px;vertical-align:middle;margin-inline-start:4px;line-height:1.6} /* ============ الكيبورد مفتوح على الجوال ============ While the on-screen keyboard is up the room has roughly half its height. Everything that is not the conversation gives way: the share box disappears, the picture shrinks, the header thins and the call buttons drop their captions. Nothing is REMOVED — every control stays reachable, just smaller — so a trainer can still cut the mic mid-sentence. */ @media(max-width:860px){ body.kb-open .live-console.live-host .lv-share{display:none} body.kb-open .live-console.live-host .lp-head{padding:3px 10px} body.kb-open .live-console.live-host .lp-htxt .sub{display:none} body.kb-open .live-console.live-host .lp-logo{height:15px} body.kb-open .live-host .hh-stage .host-stage{max-height:19vh;aspect-ratio:auto;height:19vh} body.kb-open .hh-stage .tgctrl-bar.host-ctrl{padding:4px 6px max(4px,env(safe-area-inset-bottom));gap:4px} body.kb-open .live-console.live-host .tgctrl-ic{width:34px;height:34px} body.kb-open .live-console.live-host .tgctrl-ic svg{width:16px;height:16px} body.kb-open .live-console.live-host .tgctrl-lbl{display:none} body.kb-open .hh-chat{margin-top:0;border-radius:10px 10px 0 0} /* the message list must keep a real minimum, or it collapses to a single line */ body.kb-open .hh-chat .midchat-msgs{min-height:96px} } @media(max-width:760px){ body.kb-open .tk-live .tk-stage{max-height:19vh;height:19vh;flex:none} body.kb-open .tk-top{padding:3px 10px} body.kb-open .tk-ttl .sub{display:none} body.kb-open .tk-acts.callbar{padding:4px 6px max(4px,env(safe-area-inset-bottom));gap:4px} body.kb-open .tk-acts .tgctrl-ic{width:34px;height:34px} body.kb-open .tk-acts .tgctrl-ic svg{width:16px;height:16px} body.kb-open .tk-acts .tgctrl-lbl{display:none} body.kb-open .tk-mid .midchat-msgs{min-height:96px} body.kb-open .cc-top{padding:4px 8px;font-size:.72rem} } /* the greeting fades out on its own instead of sitting over the lesson */ .king-plate{transition:opacity .5s ease,transform .5s ease} .king-plate.out{opacity:0;transform:translateX(-50%) translateY(-10px)} /* ---- the message box must never be the thing that gets covered ---- The console shell is already resized to the visible viewport by JS, so the column simply has to put the input LAST and let it keep its natural height while the message list absorbs the loss. flex-shrink:0 on the input is the whole trick: without it the flexbox happily squeezes the input to nothing (or pushes it past the fold) to keep the list big. */ @media(max-width:860px){ body.kb-open .live-console.live-host{display:flex;flex-direction:column;overflow:hidden} body.kb-open .hh-body.hh3{flex:1;min-height:0;overflow:hidden} body.kb-open .hh-chat{flex:1;min-height:0;display:flex;flex-direction:column} body.kb-open .hh-chat .midchat{flex:1;min-height:0;display:flex;flex-direction:column} body.kb-open .hh-chat .midchat-msgs{flex:1;min-height:60px;overflow-y:auto} body.kb-open .hh-chat .midchat-input{flex-shrink:0;position:relative;z-index:3; padding-bottom:max(6px,env(safe-area-inset-bottom));background:var(--mc-surface,#0e1621)} /* the control bar is the least useful thing while typing — it yields its space to the box */ body.kb-open .hh-stage .tgctrl-bar.host-ctrl{display:none} } @media(max-width:760px){ body.kb-open .tk-live{display:flex;flex-direction:column;overflow:hidden} body.kb-open .tk-mid{flex:1;min-height:0;display:flex;flex-direction:column} body.kb-open .tk-mid .midchat-msgs{flex:1;min-height:60px;overflow-y:auto} body.kb-open .tk-mid .midchat-input{flex-shrink:0;position:relative;z-index:3; padding-bottom:max(6px,env(safe-area-inset-bottom))} body.kb-open .tk-acts.callbar{display:none} } /* the reply bar must never be squeezed away, and must line up with the message box below it */ @media(max-width:860px){ .mc-replybar{margin:0 6px 5px;padding:5px 8px;font-size:.78rem;gap:7px} .mc-replyx{width:26px;height:26px} body.kb-open .mc-replybar{flex-shrink:0} } /* ---- نافذة التأكيد الداخلية ---- Replaces window.confirm(), which mobile and in-app browsers block outright. Sits above every other layer including the whiteboard, because it is always the most urgent thing on screen. */ .ask-ov{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(4,8,14,.72);backdrop-filter:blur(4px);animation:askIn .16s ease} @keyframes askIn{from{opacity:0}to{opacity:1}} .ask-ov.out{opacity:0;transition:opacity .18s} .ask-box{width:min(420px,100%);background:#141d2b;border:1px solid rgba(255,255,255,.12); border-radius:18px;padding:24px 22px 18px;text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.9);animation:askPop .2s cubic-bezier(.2,.9,.3,1.2)} @keyframes askPop{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:none;opacity:1}} .ask-ov.danger .ask-box{border-color:rgba(239,68,68,.55)} .ask-ic{font-size:2.1rem;line-height:1;margin-bottom:10px} .ask-ttl{font-size:1.06rem;font-weight:800;color:#fff;line-height:1.5} .ask-body{margin-top:9px;font-size:.86rem;color:#9fb2c7;line-height:1.75} .ask-btns{display:flex;gap:10px;margin-top:20px} .ask-btns button{flex:1;padding:13px 10px;border-radius:12px;border:none;font-family:inherit; font-size:.92rem;font-weight:800;cursor:pointer;transition:.14s} .ask-no{background:rgba(255,255,255,.09);color:#dbe6f2} .ask-no:hover{background:rgba(255,255,255,.17)} .ask-yes{background:linear-gradient(135deg,#7c5cff,#5b8def);color:#fff} .ask-ov.danger .ask-yes{background:linear-gradient(135deg,#ef4444,#b91c1c)} .ask-btns button:hover{transform:translateY(-1px)} .ask-btns button:active{transform:none} /* the trainer must SEE that the room dropped — silence was the old behaviour */ .live-drop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom)); z-index:2147483400;display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:999px; background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fff;font-weight:800;font-size:.86rem; box-shadow:0 14px 40px -12px rgba(239,68,68,.9);max-width:94vw} .live-drop .ld-dot{width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;animation:ldPulse 1s infinite} @keyframes ldPulse{0%,100%{opacity:1}50%{opacity:.25}} .live-drop .ld-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .live-drop .ld-btn{flex-shrink:0;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45); color:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:.8rem;cursor:pointer} .live-drop .ld-btn:hover{background:#fff;color:#b91c1c} /* ================================================================== * Auth cards on phones (login · register · forgot · reset) * * The card was authored for desktop — 40px padding, a 52px logo and a * 1.7rem heading — and on a phone that pushed the footer past the fold, so * people scrolled to reach «دخول». Everything below is the same card at a * phone's scale: nothing is hidden, only tightened. * * These selectors deliberately repeat the .auth-card prefix. The existing * mobile rule for the logo (.brand-img inside @media) never applied because * .auth-card .brand-img outranks it — specificity, not source order, decides. * ================================================================== */ @media(max-width:600px){ /* dvh, not vh: on mobile browsers vh includes the collapsing address bar, which is what let the card overflow the visible area on first paint. */ .auth-wrap{min-height:100dvh;padding:16px 14px} .auth-card{max-width:400px;padding:22px 18px;border-radius:18px} .auth-card .brand{margin-bottom:2px} .auth-card .brand-img{height:34px} .auth-card h1{font-size:1.2rem;margin:4px 0 0} .auth-card .sub{font-size:.84rem;margin:6px 0 14px} .auth-card .field{margin-bottom:11px} .auth-card .field label{font-size:.8rem;margin-bottom:5px} .auth-card .input{padding:10px 12px;font-size:.95rem;border-radius:11px} /* 3px of tracking on a 12-char code no longer fits the field at this width */ .auth-card .input.code{letter-spacing:1.5px;font-size:.92rem} .auth-card .btn-lg{padding:12px 20px;font-size:1rem;border-radius:12px} .auth-card .divider{margin:13px 0;font-size:.78rem;gap:10px} .auth-card .auth-foot{margin-top:13px;font-size:.85rem} .auth-card .dev-credit{font-size:.62rem;padding:10px 4px 0} .auth-card .row-between{font-size:.82rem;margin-bottom:13px} /* The two method tabs. flex:1 alone does not make them equal — a flex item will not shrink below its content, so «بالبريد وكلمة المرور» stayed wider than «بالكود» and the pair sat lopsided. min-width:0 releases that floor. */ .auth-card .flex.gap-1>.btn-sm{flex:1 1 0;min-width:0;padding:9px 6px; font-size:.8rem;white-space:nowrap;text-align:center;justify-content:center} /* The sign-up card carries six fields, a notice and a checkbox — roughly twice the login card — so the shared sizes above are not enough on their own. These trim the pieces only that form has. */ .auth-card .alert{font-size:.8rem;padding:9px 11px;margin-bottom:10px;border-radius:11px} .auth-card .checkbox{font-size:.84rem;margin-bottom:12px} .auth-card .iph-btn{padding:0 10px} .auth-card .iph-flag{font-size:1.1rem} .auth-card .iph-dial{font-size:.86rem} .auth-card .intl-phone{gap:7px} /* label + its grey hint, e.g. «رقم الهاتف (اختر دولتك)» */ .auth-card .field label .muted{font-size:.72rem} } @media(max-width:360px){ .auth-card{padding:18px 14px} .auth-card h1{font-size:1.1rem} .auth-card .flex.gap-1>.btn-sm{font-size:.74rem;padding:8px 4px} .auth-card .input.code{letter-spacing:1px} } /* ================================================================== * Auth card — the comet * * A single light runs the perimeter of the card. * * The first build drove this with an animated registered angle property. It * looked right on desktop and froze on real phones: that feature is recent, * and a browser without it simply holds the angle at zero — the card kept a * handsome but motionless lit edge, which is exactly what was reported from * devices in the field. * * This version animates a plain transform:rotate instead. Rotation has been * supported since long before any phone that can run this app, it is * composited on the GPU, and it needs no registered custom property at all. * * The shape: .comet is a card-sized box whose MASK leaves only the border * band; inside it a much larger square carries the conic gradient and spins. * The parent's mask clips that spinning square down to the band, so what you * see is a light tracking the rounded edge. The mask is on the parent and the * rotation on the child on purpose — put both on one element and the mask * would turn along with the gradient and the band would leave the edge. * ================================================================== */ .auth-card{position:relative} .auth-card .comet{ position:absolute;inset:-1.5px;border-radius:inherit; padding:1.5px;pointer-events:none;overflow:hidden;z-index:0; -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; } /* The wider, blurred twin: the same light spilling past the card onto the page. It shares the animation name and duration, so the two stay in step. */ .auth-card .comet.cm-glow{inset:-5px;padding:5px;filter:blur(7px);opacity:.8} /* 250% of the card's WIDTH, held square by aspect-ratio, so the sheet still covers a tall sign-up card's diagonal at every angle of the turn. */ .auth-card .comet>i{ position:absolute;left:50%;top:50%;width:250%;aspect-ratio:1; background:conic-gradient( transparent 0deg 236deg, rgba(139,92,246,.30) 280deg, rgba(139,92,246,.85) 316deg, rgba(94,234,212,.95) 344deg, #ffffff 357deg, transparent 360deg); will-change:transform; /* One knob for the speed — change it here and both rings follow. */ animation:cometSpin var(--comet-speed,5s) linear infinite; } @keyframes cometSpin{ from{transform:translate(-50%,-50%) rotate(0deg)} to {transform:translate(-50%,-50%) rotate(360deg)} } /* No reduced-motion override here, and that is a decision rather than an * oversight. Android switches that preference on by itself whenever battery * saver is active, so honouring it did not single out people who asked for * calmer motion — it quietly slowed the light to a crawl on ordinary phones, * which is what was reported next. The effect is a soft glow tracing a border: * no flashing, no parallax, nothing that provokes motion sensitivity. So it * runs at one speed for everyone. */ /* Card content sits above the ring, never under it. */ .auth-card>:not(.comet){position:relative;z-index:1} /* ===== Live chat on PHONES: TikTok-style type ========================================== TikTok draws comments in the device's own UI face (SF on iPhone, Roboto + Noto Arabic on Android). Cairo/Tajawal draw very tall Arabic, so at the same px they read a size bigger - which is why the phone chat looked oversized. This swaps the face for the comment list only (the input keeps its 16px iOS anti-zoom size) and trims every size a step. Scope = phones only, desktop untouched: student page: .tk-live exists only in the phone layout (isMobileLive, <=760px) admin page: #liveChat (host) / #stChat (supervisor) under the console's phone layout (<=860px) */ .tk-live .tk-mid .midchat-msgs{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans Arabic','Helvetica Neue',Arial,sans-serif;gap:9px} .tk-live .tk-msg{gap:8px} .tk-live .tk-msg-ava{width:28px;height:28px;font-size:.68rem} .tk-live .tk-msg-name{font-size:.75rem;font-weight:600;line-height:1.45} .tk-live .tk-msg-name.host{font-weight:700} .tk-live .tk-msg-text{font-size:.84rem;font-weight:400;line-height:1.42;color:#f1f3f5} .tk-live .tk-msg-reply{font-size:.66rem;font-weight:600} .tk-live .tk-msg-line .badge{font-size:.56rem;padding:0 6px;line-height:1.6;border-radius:6px;gap:3px} @media(max-width:860px){ #liveChat,#stChat{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans Arabic','Helvetica Neue',Arial,sans-serif} #liveChat .mc-row,#stChat .mc-row{gap:.4rem;max-width:86%} #liveChat .mc-ava,#stChat .mc-ava{width:26px;height:26px;font-size:.66rem} #liveChat .mc-bubble,#stChat .mc-bubble{font-size:.84rem;line-height:1.42;padding:.38rem .7rem;border-radius:.9rem} #liveChat .mc-sender,#stChat .mc-sender{font-size:.72rem;font-weight:700} #liveChat .mc-sender .badge,#stChat .mc-sender .badge{font-size:.54rem;padding:0 5px;line-height:1.6} #liveChat .mc-time,#stChat .mc-time{font-size:.58rem;margin-top:.1rem} #liveChat .mc-quote,#stChat .mc-quote{font-size:.7rem;padding:3px 8px} } /* ===== Live chat: name INLINE with the text (one flowing line that wraps), not name-above-a-block ===== The sender name + its rank badge sit on the same line as the message, which then wraps under them when it's long — like a normal comment ("Owner مدرّب: مرحبا مرحبا…") instead of a stacked block. */ .mc-bubble{direction:rtl;text-align:right} /* BiDi isolation: keep title+name pinned on the RIGHT and the message text on the LEFT, each run reading in its own direction — otherwise an English name+text merge into one LTR run and the text jumps to the right of the name. plaintext = the text picks its own direction from its first letter. */ .mc-bubble .mc-sender{display:inline;margin:0 0 0 .35em;unicode-bidi:isolate} .mc-bubble .mc-text{display:inline;unicode-bidi:plaintext} /* 1px white frame around the broadcast display — every stage, desktop + mobile, viewer + trainer console. `.hh-stage .host-stage` and `.tk-live .tk-stage` are listed so this out-ranks their own (more specific) border rules; box-sizing:border-box keeps the frame from shifting the layout. */ .live-stage,.host-stage,.dl-stage,.cm-stage,.hh-stage .host-stage,.tk-live .tk-stage{border:1px solid rgba(255,255,255,.9)} /* ── Emoji picker (chat composer) ── */ .emoji-open{font-size:1.15rem;line-height:1} .emoji-panel{z-index:2147483600;width:min(328px,92vw);max-height:320px;overflow-y:auto;background:#1b2531;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.55);padding:8px 10px;-webkit-overflow-scrolling:touch} .emoji-panel::-webkit-scrollbar{width:7px}.emoji-panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px} .emoji-cat{font-size:.72rem;color:#8ea3b8;font-weight:800;margin:8px 2px 4px;position:sticky;top:0;background:#1b2531;padding:3px 0;z-index:1} .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px} .emoji-btn{border:none;background:none;cursor:pointer;font-size:1.32rem;line-height:1;padding:5px 0;border-radius:8px;transition:background .12s} .emoji-btn:hover{background:rgba(255,255,255,.1)} .emoji-empty{color:#8ea3b8;font-size:.86rem;text-align:center;padding:18px} /* ── Emoji manager (control panel) ── */ .emoji-mgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:5px;max-height:380px;overflow-y:auto;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:12px;margin:6px 0 12px} .emoji-tgl{border:1px solid transparent;background:rgba(255,255,255,.05);cursor:pointer;font-size:1.35rem;line-height:1;padding:7px 0;border-radius:9px;position:relative;transition:.12s} .emoji-tgl:hover{background:rgba(255,255,255,.1)} .emoji-tgl.blocked{opacity:.3;filter:grayscale(1)} .emoji-tgl.blocked::after{content:'🚫';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;opacity:.95} .emoji-mgr-cat{grid-column:1/-1;font-size:.74rem;color:#8ea3b8;font-weight:800;margin:6px 0 2px} /* Comments as plain text: drop the bubble background/box so only the text shows, aligned at the top beside the avatar/logo. Username stays bold (.mc-sender); the body stays normal (.mc-text). */ .mc-row:not(.sent) .mc-bubble,.mc-row.sent .mc-bubble, .live-console .mc-row:not(.sent) .mc-bubble,.live-console .mc-row.sent .mc-bubble{background:none;padding:0;border-radius:0} #liveChat .mc-bubble,#stChat .mc-bubble{padding:0;border-radius:0} .mc-ava{align-self:flex-start}