/* ============================================================ Megaminds Student Portal — Booking Journey + Login Ported from the approved Claude Design (brand.css + prototype). Self-contained (no Tailwind/Vite). Light + Dark via [data-theme]. RTL-first via CSS logical properties. Fonts: Fredoka + Cairo. ============================================================ */ /* ---- Fonts: Fredoka (display) self-hosted, Cairo (ui) via Google ---- */ @font-face { font-family:'Fredoka'; font-style:normal; font-weight:500; font-display:swap; src:url('/frontend/fonts/fredoka-medium.woff2') format('woff2'),url('/certifi/static/Fredoka-Medium.ttf') format('truetype'); } @font-face { font-family:'Fredoka'; font-style:normal; font-weight:600; font-display:swap; src:url('/frontend/fonts/fredoka-semibold.woff2') format('woff2'),url('/certifi/static/Fredoka-SemiBold.ttf') format('truetype'); } @font-face { font-family:'Fredoka'; font-style:normal; font-weight:700; font-display:swap; src:url('/frontend/fonts/fredoka-bold.woff2') format('woff2'),url('/certifi/static/Fredoka-Bold.ttf') format('truetype'); } :root { --brand-500:#fb6514; --brand-600:color-mix(in srgb,var(--brand-500) 84%,#000); --brand-400:color-mix(in srgb,var(--brand-500) 80%,#fff); --brand-100:color-mix(in srgb,var(--brand-500) 24%,#fff); --brand-50:color-mix(in srgb,var(--brand-500) 11%,#fff); --head:#0f3d3c; --teal-600:#0d9488; --teal-500:#14b8a6; --teal-100:#ccfbf1; --teal-50:#f0fdfa; --wa-500:#25d366; --wa-600:#1da851; --ink:#1c1917; --ink-soft:#44403c; --muted:#78716c; --faint:#a8a29e; --line:#ece7e1; --line-2:#ded7cf; --surface:#ffffff; --surface-2:#faf7f3; --bg:#fbf7f2; --bg-tint:#fff4ea; --ok:#059669; --ok-bg:#d1fae5; --warn:#d97706; --err:#e11d48; --err-bg:#ffe4e6; --info:#0284c7; --field-bg:#ffffff; --field-line:#ded7cf; --ring:color-mix(in srgb,var(--brand-500) 22%,transparent); --r-xs:8px; --r-sm:13px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px; --sh-sm:0 1px 2px rgba(28,25,23,.06),0 1px 3px rgba(28,25,23,.04); --sh-md:0 4px 14px -6px rgba(28,25,23,.12),0 2px 6px -3px rgba(28,25,23,.08); --sh-lg:0 24px 60px -24px rgba(124,45,18,.28),0 8px 24px -12px rgba(28,25,23,.12); --sh-brand:0 10px 30px -10px color-mix(in srgb,var(--brand-500) 52%,transparent); --display:"Fredoka","Cairo",system-ui,sans-serif; --ui:"Cairo","Cairo Fallback",system-ui,-apple-system,sans-serif; --ease:cubic-bezier(0.22,1,0.36,1); --fast:150ms; --base:240ms; --slow:360ms; } :root[data-theme="dark"]{ --ink:#f5f1ea; --ink-soft:#e3ddd3; --muted:#a8a097; --faint:#6f675e; --line:#2c2723; --line-2:#3a342e; --surface:#221d19; --surface-2:#1b1714; --bg:#14110e; --bg-tint:#1d1813; --field-bg:#1b1714; --field-line:#3a342e; --ring:color-mix(in srgb,var(--brand-500) 30%,transparent); --brand-50:color-mix(in srgb,var(--brand-500) 18%,#14110e); --brand-100:color-mix(in srgb,var(--brand-500) 30%,#14110e); --head:#e9f5f1; --ok-bg:#06372a; --err-bg:#3d1420; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 6px 18px -8px rgba(0,0,0,.6); --sh-lg:0 28px 64px -24px rgba(0,0,0,.7); --sh-brand:0 12px 34px -12px color-mix(in srgb,var(--brand-500) 55%,transparent); } /* dark hero gradient on the canvas (one continuous surface) */ :root[data-theme="dark"]{ background: radial-gradient(150% 120% at 50% -30%,#d85e22 0%,transparent 55%), linear-gradient(160deg,#c4561a 0%,#b14c16 60%,#9e4212 100%); background-color:#b14c16; } :root[data-theme="dark"] body{ background:transparent; } @media (prefers-reduced-motion:reduce){ :root{ --fast:1ms; --base:1ms; --slow:1ms; } } *{ box-sizing:border-box; } /* The hero gradient lives on the root canvas, so it is ONE continuous surface across the whole viewport — top/bottom safe areas, content, and iOS rubber-band overscroll all share it (no seams, no separate orange bars). body + .web-root stay transparent and sit on top of it. */ html{ min-height:100dvh; background: radial-gradient(150% 120% at 50% -30%,#fb8a45 0%,transparent 55%), radial-gradient(130% 120% at 100% 120%,#d8521b 0%,transparent 60%), linear-gradient(160deg,#f37322 0%,#ec6420 58%,#e15a18 100%); background-color:#ec6420; } body{ margin:0; font-family:var(--ui); background:transparent; color:var(--ink-soft); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } .tnum{ font-variant-numeric:tabular-nums; } h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; line-height:1.1; } a{ color:var(--brand-600); text-decoration:none; } ::selection{ background:var(--brand-100); color:var(--ink); } [x-cloak]{ display:none !important; } /* ===================== Web shell ===================== */ .web-root{ --terra:#ef6c2a; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; position:relative; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background:transparent; } /* gradient lives on as one continuous canvas (no safe-area seams) */ /* decorative constellation network + doodles (ported from MCP WebDecor) */ .web-decor{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .web-net{ position:absolute; inset:0; width:100%; height:100%; } .web-doodle{ position:absolute; color:#fff; opacity:.6; filter:drop-shadow(0 2px 7px rgba(120,40,18,.22)); } .web-tag{ font-family:var(--display); font-weight:700; color:#fff; letter-spacing:.03em; text-shadow:0 2px 8px rgba(120,40,18,.25); opacity:1; } /* floating mascot beside the hero */ .web-mascot-bg{ position:relative; z-index:1; pointer-events:none; } /* in-flow flex item; size/visibility set in RESPONSIVE section */ .web-mascot-bg img{ display:block; width:100%; height:auto; aspect-ratio:946/1357; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(90,28,10,.18)); animation:mascotFloat 5.5s var(--ease) infinite; } @keyframes mascotFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } @media (prefers-reduced-motion:reduce){ .web-mascot-bg img{ animation:none; } } /* mascot visibility handled in the RESPONSIVE section (shown only >=1360px) */ /* ============================================================ Floating educational / coding cards framing the mascot. Visual language ported 1:1 from the Admin Login hero (.mm-chip / .mm-win in resources/css/filament/theme.css): identical glass fill, white border, backdrop blur, soft shadow and gentle vertical float. Namespaced .web-fcard* because portal.css already uses .mm-chip for the hero pills. Scoped to the mascot box so they inherit its responsive show/hide. ============================================================ */ .web-fcards{ display:contents; } /* group only; children stack inside .web-mascot-bg */ .web-mascot-bg > img{ position:relative; z-index:2; } /* mascot sits ABOVE the behind-cards, below the front chips */ /* shared glass treatment — identical values to admin .mm-chip / .mm-win */ .web-fcard{ position:absolute; z-index:3; display:grid; place-items:center; color:oklch(1 0 0 / .92); background:oklch(1 0 0 / .12); border:1px solid oklch(1 0 0 / .26); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 10px 24px -12px oklch(.3 .1 40 / .5); } /* code chips: square, monospace glyph */ .web-fcard--chip{ width:46px; height:46px; border-radius:14px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:700; font-size:1.02rem; letter-spacing:.02em; } /* icon cards: square with an SVG (color via currentColor) */ .web-fcard--icon{ width:44px; height:44px; border-radius:14px; } .web-fcard--icon svg{ width:22px; height:22px; } /* window card: a little browser/code panel that peeks from behind the mascot */ .web-fcard--win{ display:flex; flex-direction:column; gap:6px; width:clamp(92px,8vw,108px); padding:11px; border-radius:13px; border-color:oklch(1 0 0 / .24); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); box-shadow:0 14px 30px -16px oklch(.3 .1 40 / .55); } .web-fwin-bar{ display:flex; gap:5px; margin-bottom:1px; } .web-fwin-bar i{ width:7px; height:7px; border-radius:50%; background:oklch(1 0 0 / .45); } .web-fwin-row{ height:6px; width:var(--w,60%); border-radius:4px; background:oklch(1 0 0 / .38); } /* positions — logical insets so the framing mirrors correctly in RTL. Small outward offsets stay within the .web-main side padding so they never trigger horizontal scroll. The window + robot cards use z-index:1 so the mascot occludes their inner half (clean "peek from behind"). */ .web-fc-tag { inset-block-start:1%; inset-inline-end:-4%; animation:webFloat 5.5s ease-in-out infinite; } .web-fc-brace{ inset-block-end:11%; inset-inline-end:-2%; width:40px; height:40px; font-size:.9rem; animation:webFloat 7s ease-in-out infinite .4s; } .web-fc-win { inset-block-start:9%; inset-inline-start:-8%; z-index:1; animation:webFloat 6.5s ease-in-out infinite .2s; } .web-fc-robot{ inset-block-end:8%; inset-inline-start:-6%; z-index:1; animation:webFloat 6s ease-in-out infinite .8s; } .web-fc-learn{ inset-block-start:-8%; inset-inline-start:28%; animation:webFloat 6.2s ease-in-out infinite .15s; } .web-fc-ai { inset-block-start:31%; inset-inline-end:-7%; width:40px; height:40px; animation:webFloat 6.8s ease-in-out infinite .6s; } @keyframes webFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } /* AI spark: only on wide desktops, so the set never feels crowded */ .web-fc-ai{ display:none; } @media (min-width:1500px){ .web-fc-ai{ display:grid; } } /* Dark mode (portal uses [data-theme="dark"]): warm amber-tinted glass, mirroring admin's .dark .mm-chip / .dark .mm-win treatment. */ :root[data-theme="dark"] .web-fcard{ color:oklch(.86 .13 60); background:oklch(.70 .19 42 / .12); border-color:oklch(.70 .19 42 / .30); box-shadow:0 0 0 1px oklch(.70 .19 42 / .10), 0 14px 30px -16px oklch(0 0 0 / .6); } :root[data-theme="dark"] .web-fwin-row, :root[data-theme="dark"] .web-fwin-bar i{ background:oklch(.80 .12 55 / .5); } @media (prefers-reduced-motion:reduce){ .web-fcard{ animation:none !important; } } /* in-page top bar: lang + theme */ .web-top{ position:relative; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px clamp(16px,5vw,48px) 0; } .web-brandrow{ display:inline-flex; align-items:center; gap:10px; } .web-brandrow img{ height:38px; width:auto; border-radius:9px; box-shadow:var(--sh-sm); } .web-pillbtn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-weight:700; font-size:13.5px; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); border-radius:var(--r-pill); padding:9px 15px; min-width:120px; justify-content:center; white-space:nowrap; cursor:pointer; transition:all var(--fast); } .web-pillbtn:hover{ background:rgba(255,255,255,.26); } .web-toolbar{ display:inline-flex; gap:8px; } /* main split */ .web-main{ flex:1; position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; max-width:1780px; width:100%; margin:0 auto; padding:clamp(14px,3vw,40px) clamp(16px,4.5vw,48px) clamp(20px,4vw,48px); } .web-aside{ position:relative; min-width:0; } .web-asidetop{ display:flex; align-items:center; gap:10px; margin-bottom:22px; } .web-h1{ font-family:var(--display); font-weight:600; font-size:clamp(40px,4vw,70px); letter-spacing:-.025em; margin:0; line-height:1.0; color:#fff; } .web-h1 .h1a{ display:block; color:var(--head); } .web-h1 .h1b{ display:block; color:#fff; } .web-lead{ font-family:var(--ui); font-size:19px; line-height:1.5; color:rgba(255,255,255,.94); margin:18px 0 0; max-width:42ch; } .web-points{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; } .web-points li{ font-family:var(--ui); font-size:17px; font-weight:600; color:#fff; display:flex; align-items:center; gap:12px; } .web-points svg{ color:#fff; flex-shrink:0; } /* wrapper for chips + STEM badge; transparent by default (desktop + mobile keep the chips row and the STEM badge on its own row exactly as designed). Tablet overrides this to flow all four into one row. */ .web-featurewrap{ display:contents; } .web-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .web-chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-weight:700; font-size:14.5px; color:#fff; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.30); padding:8px 15px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .web-chip svg{ color:#fff; } /* STEM trust badge on its own centered row */ .web-trust-row{ display:flex; justify-content:flex-start; margin-top:18px; } .web-trustbadge{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.48); padding:10px 18px; font-size:15px; gap:9px; box-shadow:0 6px 18px -8px rgba(120,40,18,.35); } .web-trustbadge svg{ color:#fff; } /* Responsive overrides consolidated in the RESPONSIVE section at end of file. */ /* flow toggle (segmented) */ .web-flowseg{ margin-top:30px; } .seg{ display:inline-flex; background:var(--surface); border-radius:var(--r-pill); padding:4px; border:1px solid var(--line); gap:2px; box-shadow:var(--sh-sm); } .seg button{ border:none; cursor:pointer; font-family:var(--ui); font-weight:700; font-size:14.5px; padding:10px 18px; border-radius:var(--r-pill); background:transparent; color:var(--muted); transition:all var(--fast); display:inline-flex; align-items:center; gap:8px; } .seg button.on{ background:var(--brand-500); color:#fff; box-shadow:var(--sh-brand); } /* card */ .web-cardwrap{ display:flex; justify-content:center; min-width:0; } .web-cardshell{ position:relative; width:clamp(360px,33vw,500px); max-width:100%; } /* progress-bar "finish line" mascot — small, stands on the last segment */ .mm-seg-wrap{ position:relative; } .mm-mascot-finish{ position:absolute; inset-inline-end:-9px; bottom:0; width:clamp(30px,3.6vw,38px); height:auto; z-index:5; pointer-events:none; filter:drop-shadow(0 5px 7px rgba(120,40,18,.30)); transform-origin:bottom center; animation:mascotFinish 2.6s var(--ease) infinite; } @keyframes mascotFinish{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} } @media (prefers-reduced-motion:reduce){ .mm-mascot-finish{ animation:none; } } @media (max-width:520px){ .mm-mascot-finish{ width:26px; inset-inline-end:-5px; } } .web-card{ width:100%; overflow:hidden; position:relative; z-index:1; background:var(--surface); border-radius:30px; display:flex; flex-direction:column; box-shadow:0 26px 64px -22px rgba(124,45,18,.45),0 0 44px rgba(70,25,10,.20),0 4px 16px rgba(0,0,0,.10); border:1px solid var(--line); } /* Column order + stacking handled in the RESPONSIVE section at end of file. */ /* step animation */ .mm-step{ animation:mmIn var(--base) var(--ease) backwards; } @keyframes mmIn{ from{ transform:translateY(10px); opacity:.6; } to{ transform:none; opacity:1; } } .mm-pop{ animation:mmPop 460ms var(--ease) backwards; } @keyframes mmPop{ 0%{ transform:scale(.4);} 60%{ transform:scale(1.08);} 100%{ transform:scale(1);} } .mm-spin{ animation:mmSpin .7s linear infinite; } @keyframes mmSpin{ to{ transform:rotate(360deg);} } /* ===================== Fields / inputs ===================== */ .mm-field{ margin-bottom:12px; } .mm-field > label{ display:block; font-family:var(--ui); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:-.01em; } .mm-hint{ font-family:var(--ui); font-size:12.5px; color:var(--muted); margin-top:6px; } .mm-err{ font-family:var(--ui); font-size:12.5px; color:var(--err); margin-top:6px; display:flex; align-items:center; gap:6px; } .mm-err::before{ content:""; width:5px; height:5px; border-radius:9px; background:var(--err); flex-shrink:0; } .mm-input,.mm-select,.mm-textarea{ width:100%; height:52px; padding:0 16px; border-radius:var(--r-md); background:var(--field-bg); color:var(--ink); font-family:var(--ui); font-size:16px; font-weight:500; border:1.5px solid var(--field-line); outline:none; transition:border-color var(--fast),box-shadow var(--fast); } .mm-textarea{ height:auto; padding:13px 16px; resize:vertical; line-height:1.5; min-height:92px; } .mm-input:focus,.mm-select:focus,.mm-textarea:focus{ border-color:var(--brand-500); box-shadow:0 0 0 4px var(--ring); } .mm-input.is-bad,.mm-select.is-bad{ border-color:var(--err); } .mm-select{ appearance:none; -webkit-appearance:none; padding-inline-end:34px; cursor:pointer; } .mm-selectwrap{ position:relative; } .mm-selectwrap::after{ content:"▾"; position:absolute; inset-inline-end:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); font-size:11px; } .mm-dob{ display:grid; grid-template-columns:.85fr 1.3fr 1fr; gap:10px; } /* buttons */ .mm-btn{ font-family:var(--ui); font-weight:700; font-size:16px; cursor:pointer; height:52px; padding:0 22px; border-radius:var(--r-pill); border:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform var(--fast) var(--ease),background var(--fast),box-shadow var(--fast); } .mm-btn.full{ width:100%; } .mm-btn:active{ transform:scale(.97); } .mm-btn:disabled{ opacity:.5; cursor:not-allowed; } .mm-btn.primary{ background:var(--brand-500); color:#fff; box-shadow:var(--sh-brand); } .mm-btn.primary:hover{ background:var(--brand-600); } .mm-btn.wa{ background:var(--wa-500); color:#fff; box-shadow:0 10px 26px -10px rgba(37,211,102,.6); } .mm-btn.wa:hover{ background:var(--wa-600); } .mm-btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--field-line); } .mm-btn.ghost:hover{ background:var(--surface-2); } /* phone input (dial + number) */ .mm-phone{ position:relative; direction:ltr; } /* country code selector stays on the LEFT in LTR + RTL */ .mm-phone-row{ display:flex; gap:8px; } .mm-dial{ display:inline-flex; align-items:center; gap:7px; height:52px; padding:0 13px; border-radius:var(--r-md); border:1.5px solid var(--field-line); background:var(--field-bg); color:var(--ink); font-family:var(--ui); font-weight:700; font-size:15px; cursor:pointer; flex-shrink:0; } .mm-dial .caret{ font-size:10px; color:var(--muted); } .mm-phone-num{ flex:1; } /* fixed -> floats above the card (never clipped); top/left/width/max-height set in JS */ .mm-dialmenu{ position:fixed; z-index:50; background:var(--surface); border-radius:var(--r-md); box-shadow:var(--sh-lg); border:1px solid var(--line); padding:5px; max-height:60vh; display:flex; flex-direction:column; } .mm-dialsearch{ display:flex; align-items:center; gap:7px; height:27px; padding:0 10px; margin-bottom:5px; border:1.5px solid var(--field-line); border-radius:9px; background:var(--field-bg); } /* compact search (~60% height) */ .mm-dialsearch svg{ color:var(--muted); flex-shrink:0; width:14px; height:14px; } .mm-dialsearch input{ flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--ink); font-family:var(--ui); font-size:13.5px; font-weight:600; } .mm-dialsearch input::placeholder{ color:var(--faint); } .mm-diallist{ overflow:auto; display:flex; flex-direction:column; gap:1px; } .mm-dialmenu button{ width:100%; display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; line-height:21px; border:none; background:transparent; color:var(--ink); font-family:var(--ui); font-size:14px; font-weight:600; cursor:pointer; text-align:start; } /* tighter, touch-friendly rows (~35px) */ .mm-dialmenu button > span:first-child{ font-size:17px; } /* flag size, keeps the row compact */ .mm-dialmenu button.on,.mm-dialmenu button:hover{ background:var(--brand-50); } .mm-dialmenu .nm{ flex:0 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; } /* name keeps the code right beside it */ .mm-dialmenu .code{ color:var(--muted); flex-shrink:0; } /* code sits right beside the name (row gap only), not pushed to the far edge */ .mm-dialempty{ padding:14px 12px; text-align:center; color:var(--muted); font-family:var(--ui); font-size:13px; } /* whatsapp note + trust row */ .mm-wanote{ display:flex; align-items:center; gap:11px; background:color-mix(in srgb,var(--wa-500) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--wa-500) 30%,transparent); border-radius:var(--r-md); padding:12px 14px; margin-top:4px; } .mm-wanote .ic{ width:34px; height:34px; border-radius:10px; background:var(--wa-500); color:#fff; display:grid; place-items:center; flex-shrink:0; } .mm-wanote span{ font-family:var(--ui); font-size:13px; color:var(--ink-soft); line-height:1.5; } .mm-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:4px 0; } .mm-trust-i{ display:flex; align-items:flex-start; gap:8px; } .mm-trust-i svg{ color:var(--teal-600); flex-shrink:0; margin-top:1px; } .mm-trust-t{ font-family:var(--ui); font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.2; } .mm-trust-s{ font-family:var(--ui); font-size:11px; color:var(--muted); line-height:1.25; margin-top:1px; } /* ===================== Progress header ===================== */ .mm-phead{ padding:22px 26px 0; } .mm-phead-top{ display:flex; align-items:center; gap:16px; margin-bottom:14px; } .mm-phead-top img{ width:56px; height:56px; border-radius:16px; object-fit:cover; box-shadow:var(--sh-sm); flex-shrink:0; } /* The logo is the way back out of the booking flow. It stays visually identical — the anchor only has to stop being a text box and keep the flex sizing the used to own, since it is now the flex child in both headers. */ .mm-homelink{ display:block; line-height:0; flex-shrink:0; border-radius:16px; transition:transform var(--fast) var(--ease); } .mm-homelink:hover{ transform:translateY(-2px); } .mm-homelink:focus-visible{ outline:2px solid var(--brand-500); outline-offset:3px; } .mm-phead-div{ width:1px; align-self:stretch; min-height:44px; background:var(--line); flex-shrink:0; } .mm-phead-title{ font-family:var(--display); font-size:25px; font-weight:700; color:var(--head); letter-spacing:-.01em; line-height:1.08; } .mm-phead-sub{ font-family:var(--ui); font-size:13.5px; color:var(--muted); margin-top:3px; } .mm-seg{ display:flex; gap:6px; } .mm-seg-i{ flex:1; height:6px; border-radius:4px; overflow:hidden; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); } .mm-seg-i > span{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--brand-500),var(--brand-400)); transition:width var(--slow) var(--ease); } .mm-seg-i.fill > span{ width:100%; } .mm-phead-row{ display:flex; align-items:center; gap:12px; margin-top:9px; min-height:18px; } .mm-back{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:var(--muted); font-family:var(--ui); font-weight:700; font-size:13.5px; padding:0; } .mm-stepcount{ margin-inline-start:auto; font-family:var(--ui); font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; } .mm-stepcount b{ color:var(--brand-600); } .mm-body{ padding:6px 26px 8px; } .mm-foot{ padding:14px 22px 20px; border-top:1px solid var(--line); background:var(--surface); } .mm-foot-left{ text-align:center; margin-top:12px; font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--faint); } /* ===================== Wizard pickers ===================== */ /* program (division) picker: stable single-column, full-width rows (no reflow) */ .mm-tiles{ display:flex; flex-direction:column; gap:12px; } .mm-tile{ display:flex; flex-direction:row; align-items:center; gap:14px; width:100%; min-height:74px; padding:14px 16px; border:2px solid var(--field-line); background:var(--surface); border-radius:var(--r-md); text-align:start; cursor:pointer; transition:border-color var(--fast),background var(--fast),box-shadow var(--fast),transform var(--fast) var(--ease); box-shadow:var(--sh-sm); } .mm-tile:hover{ border-color:color-mix(in srgb,var(--brand-500) 45%,var(--field-line)); } .mm-tile.on{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px var(--ring); } .mm-tile .ic{ width:46px; height:46px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; background:var(--bg-tint); color:var(--brand-600); transition:all var(--fast); } .mm-tile.on .ic{ background:var(--brand-500); color:#fff; } .mm-tile .ic svg{ width:24px; height:24px; } /* consistent icon size/weight */ .mm-tile .nm{ flex:1; min-width:0; font-family:var(--ui); font-weight:700; font-size:16px; color:var(--ink); line-height:1.25; } .mm-tile-check{ flex-shrink:0; color:var(--brand-500); } .mm-tile .ds{ font-family:var(--ui); font-size:12px; color:var(--muted); margin-top:-4px; } .mm-chips{ display:flex; flex-wrap:wrap; gap:9px; } .mm-chip{ border-radius:var(--r-pill); padding:11px 18px; font-family:var(--ui); font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid var(--field-line); background:var(--surface); color:var(--ink-soft); box-shadow:var(--sh-sm); transition:all var(--fast) var(--ease); } .mm-chip.on{ border-color:var(--brand-500); background:var(--brand-500); color:#fff; box-shadow:var(--sh-brand); } .mm-timing{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mm-timeopt{ border:2px solid var(--field-line); background:var(--surface); border-radius:var(--r-md); padding:20px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; cursor:pointer; transition:all var(--fast) var(--ease); box-shadow:var(--sh-sm); } .mm-timeopt.on{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px var(--ring); } .mm-timeopt .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--bg-tint); color:var(--brand-600); } .mm-timeopt.on .ic{ background:var(--brand-500); color:#fff; } .mm-timeopt .nm{ font-family:var(--ui); font-weight:700; font-size:15px; color:var(--ink); } .mm-timeopt .ds{ font-family:var(--ui); font-size:12px; color:var(--muted); margin-top:-4px; } /* This step shows at most a handful of cards and is the one place in the wizard where the parent compares rather than fills in — so the cards get room to sit apart and breathe inside, instead of the tight rhythm the input steps use. */ .mm-plans{ display:flex; flex-direction:column; gap:14px; } .mm-plan{ border:2px solid var(--field-line); background:var(--surface); border-radius:var(--r-md); padding:20px 22px; text-align:start; position:relative; overflow:hidden; cursor:pointer; transition:all var(--fast) var(--ease); box-shadow:var(--sh-sm); } .mm-plan.on{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px var(--ring); } /* Best-offer plan: the same featured treatment the homepage pricing grid uses (.mm-price-feat) — brand gradient, white type, white badge carrying the same gold star — so a parent arriving from the homepage meets the same card. */ .mm-plan.pop{ padding-top:36px; border-color:transparent; color:#fff; box-shadow:var(--sh-brand); background:linear-gradient(168deg,#FF7A45 0%,var(--brand-600) 100%); } /* The badge is welded to the card's top and start edges and curves in on its one free corner, so it reads as part of the card. Centred and tucked inside, it sat alone in a 38px band of empty gradient and read as a sticker on a blank wall. `overflow:hidden` above clips the badge's outer corner to the card's own radius, which is what makes the two shapes look cut from one piece. Its size is the middle of two rejections: at 11.5px in a 6/14px box it was a white slab covering the corner, at 10px in a 3/9px box it stopped registering as a badge at all. */ .mm-plan-pop{ position:absolute; top:0; inset-inline-start:0; display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--brand-600); font-family:var(--ui); font-weight:800; font-size:11px; padding:5px 12px 6px; border-end-end-radius:13px; white-space:nowrap; box-shadow:0 3px 10px -6px rgba(90,35,10,.5); } .mm-plan-pop svg{ flex-shrink:0; width:11px; height:11px; } /* Selection needs a different signal here: the brand-50 fill vanishes into the gradient, and a white halo vanishes into the white wizard card behind it. A white inner border sits directly on the orange, so it reads in both themes; the outer ring stays the same brand halo every other plan card uses. */ .mm-plan.pop.on{ background:linear-gradient(168deg,#FF7A45 0%,var(--brand-600) 100%); border-color:#fff; box-shadow:0 0 0 4px var(--ring), var(--sh-brand); } .mm-plan.pop .mm-plan-name, .mm-plan.pop .mm-plan-price{ color:#fff; } .mm-plan.pop .mm-plan-price{ text-shadow:0 1px 0 rgba(120,40,10,.18); } .mm-plan.pop .mm-plan-cur{ color:#fff; opacity:.82; } .mm-plan.pop .mm-plan-was{ color:rgba(255,255,255,.78); } .mm-plan.pop .mm-plan-was s{ color:#fff; text-decoration-color:rgba(255,255,255,.6); } .mm-plan.pop .mm-plan-feats li{ color:rgba(255,255,255,.94); } .mm-plan.pop .mm-plan-feats svg{ color:#fff; } .mm-plan.pop .mm-plan-rad{ border-color:rgba(255,255,255,.6); } .mm-plan.pop.on .mm-plan-rad{ background:#fff; border-color:#fff; color:var(--brand-600); } .mm-plan-head{ display:flex; align-items:flex-start; gap:14px; } .mm-plan-rad{ margin-top:5px; width:22px; height:22px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; border:2px solid var(--field-line); background:transparent; } .mm-plan.on .mm-plan-rad{ border-color:var(--brand-500); background:var(--brand-500); color:#fff; } /* name and price share a baseline row; the wrap is the safety net on narrow phones */ .mm-plan-topline{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; } .mm-plan-name{ font-family:var(--ui); font-weight:700; font-size:16.5px; color:var(--teal-600); } /* The price answers the question this step asks, so it leads the card: Fredoka at 32px with the currency in the same face beside it, not a 12px grey afterthought. .mm-plan-money carries dir="ltr" in the markup so "EGP 11,900" holds that order in both locales — the same pairing the homepage pricing grid uses. */ .mm-plan-money{ display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; } .mm-plan-price{ font-family:var(--display); font-weight:700; font-size:32px; line-height:1; letter-spacing:-.5px; color:var(--head); } .mm-plan-cur{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink-soft); opacity:.72; } /* Mirrors .mm-plan-topline's space-between so the saving lines up under the plan name and the struck-through figure under the price. */ .mm-plan-offrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px; } /* "instead of" stays a label, but the old figure itself is information the parent is meant to read — at 12.5px and 78% opacity it was the faintest thing here. */ .mm-plan-was{ font-family:var(--ui); font-size:15px; font-weight:600; color:var(--muted); } .mm-plan-was s{ font-weight:700; color:var(--ink-soft); text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent); } /* The saving is the strongest reason to choose a plan and used to be the smallest mark on the card. Gold rather than brand orange: orange sinks into the featured card's gradient, and on a white card it reads as a warning rather than a reward. The featured card gets a lighter, creamier gold for the same reason. */ .mm-plan-off{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-weight:800; font-size:13.5px; line-height:1; padding:7px 13px; border-radius:10px; white-space:nowrap; background:linear-gradient(180deg,#FFE08F 0%,#F2B01F 100%); color:#5A3703; box-shadow:0 4px 10px -4px rgba(190,140,20,.75), inset 0 1px 0 rgba(255,255,255,.65); } .mm-plan-off svg{ flex-shrink:0; opacity:.85; } .mm-plan.pop .mm-plan-off{ background:linear-gradient(180deg,#FFF0C4 0%,#FFD469 100%); color:#6B4104; box-shadow:0 5px 12px -4px rgba(90,40,5,.45), inset 0 0 0 1px rgba(255,255,255,.55); } /* the benefits only unfold on the selected card, and that is the state where the Continue button is closest to the fold — so this list keeps its original rhythm rather than spending the same vertical budget the cards above just took. Every benefit stays on one line. The list uses the card's full width, starting under the checkbox (its 22px plus the 14px head gap), one benefit per line; pairFeats() in portal/shell.blade.php adds .is-paired (two columns, filled row by row so the reading order and RTL hold) only when every benefit still fits on one line that way. Text longer than the whole card still wraps rather than spills. */ .mm-plan-feats{ margin:13px 0 2px; margin-inline-start:calc(-22px - 14px); padding:0; list-style:none; display:grid; gap:7px 12px; } .mm-plan-feats.is-paired{ grid-template-columns:repeat(2, minmax(max-content, 1fr)); } .mm-plan-feats li{ font-family:var(--ui); font-size:13px; line-height:1.45; color:var(--ink-soft); display:flex; align-items:flex-start; gap:8px; } .mm-plan-feats.is-paired li{ white-space:nowrap; } .mm-plan-feats li span{ min-width:0; overflow-wrap:break-word; } .mm-plan-feats svg{ color:var(--ok); flex-shrink:0; margin-top:1.5px; } /* review summary */ .mm-sum{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 16px; margin-bottom:18px; } .mm-sumrow{ display:flex; justify-content:space-between; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); } .mm-sumrow:last-child{ border-bottom:none; } .mm-sumrow .k{ font-family:var(--ui); font-size:13px; color:var(--muted); font-weight:600; flex-shrink:0; } .mm-sumrow .v{ font-family:var(--ui); font-size:13.5px; color:var(--ink); font-weight:700; text-align:end; } .mm-nopay{ display:flex; align-items:center; gap:9px; justify-content:center; color:var(--muted); font-family:var(--ui); font-size:12.5px; } .mm-nopay svg{ color:var(--teal-600); } /* ===================== Post-booking payment ===================== The confirmation screen is also where the family pays: the plan's amount, the admin's Payment Methods for their region as expand-on-tap cards, then one WhatsApp step to send the proof. From the approved "Post-booking Payment Flow" design; the shared atoms (.mm-btn, .mm-wanote, .mm-nopay) are reused. */ .mm-pay{ flex:1; display:flex; flex-direction:column; padding:30px 28px 26px; } .mm-pay-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; } .mm-pay-head .badge{ width:46px; height:46px; border-radius:14px; background:var(--ok); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 12px 28px -12px rgba(5,150,105,.6); } .mm-pay-head .tx{ min-width:0; padding-top:1px; } .mm-pay-head h2{ font-size:23px; font-weight:600; color:var(--head); } .mm-pay-head p{ font-family:var(--ui); font-size:13.5px; line-height:1.55; color:var(--muted); margin:4px 0 0; } .mm-pay-head .ref{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; font-weight:600; color:var(--ink); unicode-bidi:isolate; } .mm-pay-amount{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; margin-bottom:22px; background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r-md); } .mm-pay-amount .k{ display:flex; flex-direction:column; gap:3px; min-width:0; } .mm-pay-amount .lb{ font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink-soft); } .mm-pay-amount .pl{ font-family:var(--ui); font-size:12.5px; color:var(--muted); } /* Inline spans on purpose: under dir="ltr" the bidi algorithm puts "$" before the figure and "ج.م" after it, as the design shows. Flex items would not. */ .mm-pay-amount .v{ flex-shrink:0; white-space:nowrap; line-height:1; } .mm-pay-amount .num{ font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.01em; color:var(--ink); } .mm-pay-amount .cur{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--muted); } .mm-pay-label{ font-family:var(--ui); font-size:14px; font-weight:700; color:var(--ink); margin-bottom:12px; } .mm-pay-methods{ display:flex; flex-direction:column; gap:12px; } .mm-paym{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--fast),box-shadow var(--fast); } .mm-paym.on{ border-color:var(--brand-500); box-shadow:0 14px 32px -20px color-mix(in srgb,var(--brand-500) 70%,transparent); } .mm-paym-head{ width:100%; display:flex; align-items:center; gap:13px; padding:13px 16px; border:none; background:transparent; color:inherit; font:inherit; text-align:start; cursor:pointer; transition:background var(--fast); } .mm-paym.on .mm-paym-head{ background:var(--brand-50); } .mm-paym-head:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--ring); } .mm-paym-head .ic{ width:44px; height:44px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; flex-shrink:0; overflow:hidden; } .mm-paym.on .mm-paym-head .ic{ background:var(--brand-100); } .mm-paym-head .ic img{ width:100%; height:100%; object-fit:cover; } .mm-paym-head .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .mm-paym-head .nm{ font-family:var(--ui); font-size:15.5px; font-weight:700; line-height:1.3; color:var(--ink); } .mm-paym-head .ds{ font-family:var(--ui); font-size:12.5px; line-height:1.45; color:var(--muted); } .mm-paym-head .chev{ flex-shrink:0; color:var(--muted); transition:transform var(--base) var(--ease); } .mm-paym.on .mm-paym-head .chev{ transform:rotate(180deg); } .mm-paym-body{ display:flex; flex-direction:column; gap:14px; padding:14px 16px 16px; border-top:1px solid var(--line); } .mm-paym-body .mm-btn{ text-decoration:none; } .mm-paym-ins{ font-family:var(--ui); font-size:14.5px; line-height:1.6; color:var(--ink-soft); overflow-wrap:anywhere; } .mm-paym-ins p{ margin:0; } .mm-paym-ins p + p, .mm-paym-ins ul, .mm-paym-ins ol{ margin:6px 0 0; } .mm-paym-ins ul, .mm-paym-ins ol{ padding-inline-start:20px; } .mm-paym-ins a{ color:var(--brand-600); text-decoration:underline; } .mm-paym-note{ margin-top:-4px; } .mm-paym-note svg, .mm-pay-secure svg{ color:var(--muted); } /* wallet numbers: one copyable line each, with its operator label */ .mm-wallets{ display:flex; flex-direction:column; gap:8px; } .mm-wallet{ display:flex; align-items:center; gap:10px; padding-block:8px; padding-inline:14px 8px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); } .mm-wallet .tx{ flex:1; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:9px; } .mm-wallet .num{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.02em; color:var(--ink); } .mm-wallet .lb{ font-family:var(--ui); font-size:12.5px; color:var(--muted); } .mm-wallet-copy{ height:34px; padding:0 12px; flex-shrink:0; border:none; border-radius:var(--r-pill); cursor:pointer; background:var(--brand-50); color:var(--brand-600); font-family:var(--ui); font-size:12.5px; font-weight:700; transition:background var(--fast),color var(--fast); } .mm-wallet-copy:hover{ background:var(--brand-100); } .mm-wallet-copy.ok{ background:var(--ok-bg); color:var(--ok); } .mm-wallet-copy > span{ display:inline-flex; align-items:center; gap:6px; } /* after you pay */ .mm-pay-div{ display:flex; align-items:center; gap:12px; margin:22px 0 14px; font-family:var(--ui); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } [dir="rtl"] .mm-pay-div{ letter-spacing:0; font-size:12.5px; } /* tracking would break Arabic joining */ .mm-pay-div::before, .mm-pay-div::after{ content:""; flex:1; height:1px; background:var(--line); } .mm-pay-after{ align-items:flex-start; margin-top:0; } .mm-pay-after b{ font-weight:700; color:var(--ink); } .mm-pay-send{ margin-top:12px; text-decoration:none; } .mm-pay-secure{ margin-top:14px; } .mm-pay-empty{ display:flex; flex-direction:column; gap:14px; } .mm-pay-empty p{ margin:0; font-family:var(--ui); font-size:14px; line-height:1.55; color:var(--ink-soft); text-align:center; } .mm-pay-empty .mm-btn{ text-decoration:none; } @media (max-width:480px){ .mm-pay{ padding:24px 18px 20px; } .mm-pay-head h2{ font-size:21px; } .mm-pay-amount{ padding:13px 15px; } .mm-pay-amount .num{ font-size:30px; } } /* ===================== Login / not-found / selection ===================== */ .mm-login{ display:flex; flex-direction:column; padding:34px 30px 26px; } .mm-login-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; } .mm-login-head img{ width:60px; height:60px; border-radius:16px; object-fit:cover; box-shadow:var(--sh-sm); flex-shrink:0; } .mm-login-head .div{ width:1px; align-self:stretch; min-height:52px; background:var(--line); flex-shrink:0; } .mm-login-head h2{ font-family:var(--display); font-size:27px; font-weight:700; color:var(--head); letter-spacing:-.01em; line-height:1.06; } .mm-login-head p{ font-family:var(--ui); font-size:15px; color:var(--muted); margin:5px 0 0; line-height:1.4; } .mm-or{ display:flex; align-items:center; gap:14px; margin:18px 0; } .mm-or span{ font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--faint); } .mm-or::before,.mm-or::after{ content:""; flex:1; height:1px; background:var(--line); } .mm-emailbtn{ width:100%; height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1.5px solid var(--field-line); background:var(--surface); color:var(--ink); border-radius:var(--r-md); font-family:var(--ui); font-weight:700; font-size:16px; cursor:pointer; transition:all var(--fast); } .mm-emailbtn:hover{ border-color:var(--brand-500); color:var(--brand-600); background:var(--brand-50); } .mm-emailbtn svg{ color:var(--brand-500); } /* not found state */ .mm-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 30px; } .mm-state .ic{ width:74px; height:74px; border-radius:22px; display:grid; place-items:center; margin-bottom:20px; } .mm-state.warn .ic{ background:var(--err-bg); color:var(--err); } .mm-state h2{ font-size:24px; font-weight:600; color:var(--head); } .mm-state p{ font-family:var(--ui); font-size:14.5px; color:var(--muted); margin:10px 0 22px; line-height:1.55; max-width:36ch; } /* student selection */ .mm-pick{ padding:34px 30px 28px; display:flex; flex-direction:column; } .mm-pick h2{ font-family:var(--display); font-size:26px; font-weight:700; color:var(--head); } .mm-pick .sub{ font-family:var(--ui); font-size:14px; color:var(--muted); margin:6px 0 4px; } .mm-pick .masked{ font-family:var(--ui); font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:20px; } .mm-students{ display:flex; flex-direction:column; gap:10px; } .mm-student{ display:flex; align-items:center; gap:14px; width:100%; text-align:start; padding:14px 16px; border-radius:var(--r-md); border:1.5px solid var(--field-line); background:var(--surface); cursor:pointer; transition:all var(--fast) var(--ease); } .mm-student:hover{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px var(--ring); } .mm-student-av{ width:50px; height:50px; border-radius:14px; object-fit:cover; flex-shrink:0; background:var(--bg-tint); display:grid; place-items:center; color:var(--brand-600); font-family:var(--display); font-weight:700; font-size:20px; overflow:hidden; } .mm-student-av img{ width:100%; height:100%; object-fit:cover; } .mm-student-meta{ min-width:0; flex:1; } .mm-student-nm{ font-family:var(--ui); font-weight:700; font-size:16px; color:var(--ink); line-height:1.2; } .mm-student-sub{ font-family:var(--ui); font-size:12.5px; color:var(--muted); margin-top:2px; } .mm-student-go{ color:var(--faint); flex-shrink:0; } .mm-pick-foot{ margin-top:18px; text-align:center; } .mm-textbtn{ background:none; border:none; color:var(--muted); font-family:var(--ui); font-weight:600; font-size:14px; cursor:pointer; } .mm-textbtn:hover{ color:var(--brand-600); } /* standalone selection page wrapper (no card chrome variant) */ .mm-pageroot{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:clamp(16px,5vw,40px); background:radial-gradient(150% 120% at 50% -30%,#fb8a45 0%,transparent 55%),linear-gradient(160deg,#f37322 0%,#ec6420 58%,#e15a18 100%); } :root[data-theme="dark"] .mm-pageroot{ background:linear-gradient(160deg,#c4561a 0%,#9e4212 100%); } .mm-pageroot .web-card{ width:clamp(340px,42vw,460px); max-width:100%; } /* RTL arrow flip */ [dir="rtl"] .flip-x{ transform:scaleX(-1); } /* LEARN doodle arrow points INTO the page (toward content) in RTL, not off-screen */ [dir="rtl"] .web-tag svg{ transform:scaleX(-1); } /* ============================================================ RESPONSIVE LAYOUT SYSTEM (authored last -> wins the cascade) Hero text + the mascot share one flex zone (.web-herowrap), so they can never overlap at any width. Collisions are solved by letting flex distribute the width (content adapts) -- NOT by shrinking the mascot. The mascot scales fluidly with clamp(240px,21vw,330px) and only hides on phones. Verified: 1920 / 1600 / 1440 / 1280 / 1200 / 1024 / 900 / 768 / 480 / 390 Zoom 80-150% maps onto these same breakpoints. Bands: >=1200 desktop : [ card | hero-text | mascot ] one row 768-1199 tablet : [ hero-text | mascot ] row on top, card below <=767 mobile : mascot hidden, compact hero (H1+chips+badge)+form ============================================================ */ /* No-overflow + graceful text reflow guards (every width) */ .web-h1{ overflow-wrap:break-word; } .web-lead,.web-points li,.web-chip{ overflow-wrap:break-word; } /* Trust indicators: supporting info, sits BELOW the primary CTA */ .mm-foot-trust{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .mm-foot-trust .mm-trust-t{ font-weight:600; } .mm-foot-trust .mm-trust-s{ opacity:.85; } .mm-foot-trust .mm-trust-i svg{ width:15px; height:15px; opacity:.9; } /* hero zone = text + mascot, always a centered flex row (no overlap, ever) */ .web-herowrap{ display:flex; align-items:center; gap:clamp(24px,2.8vw,56px); min-width:0; } .web-aside{ flex:1 1 auto; min-width:0; } .web-mascot-bg{ flex:0 0 clamp(240px,21vw,330px); align-self:center; } /* ---- Desktop (>=1200): [ card | hero-text | mascot ] in one row ---- */ @media (min-width:1200px){ .web-main{ display:flex; flex-direction:row; align-items:center; gap:clamp(60px,6.4vw,140px); } .web-main{ max-width:1780px; } /* wider hero section (~+10%) */ .web-cardwrap{ flex:0 0 clamp(380px,37%,640px); order:-1; } /* form = primary, largest */ .web-herowrap{ flex:1 1 auto; justify-content:flex-start; } .web-aside{ max-width:620px; } /* content = comfortable, roomier on wide */ } /* ---- Tablet / constrained medium (768-1199): single column, form-first ---- The whole middle range is one clean, centered single column. The mascot is a desktop-only element here (hidden); the secondary paragraph and the three checkmark benefits are dropped so the form rises near the top; and the four feature/trust pills collapse into ONE row. Desktop (>=1200) keeps everything. */ @media (min-width:768px) and (max-width:1199px){ .web-main{ display:flex; flex-direction:column; align-items:center; gap:clamp(20px,2.6vw,30px); align-content:start; padding-block:clamp(20px,3vw,34px); } .web-mascot-bg{ display:none; } .web-herowrap{ order:0; width:100%; max-width:720px; justify-content:center; } .web-aside{ width:100%; max-width:720px; text-align:center; display:flex; flex-direction:column; align-items:center; } .web-asidetop{ justify-content:center; } /* drop the secondary paragraph + the three checkmark benefits (form-first) */ .web-lead{ display:none; } .web-points{ display:none; } /* the four feature/trust pills collapse into ONE centered row; flex-wrap only falls back to 3 + 1 by itself if they genuinely cannot fit the width. */ .web-featurewrap{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px; margin-top:18px; } .web-featurewrap .web-chips, .web-featurewrap .web-trust-row{ display:contents; } .web-chip{ padding:8px 13px; font-size:14px; } /* compact pills so four fit one row */ .web-trustbadge{ padding:8px 14px; font-size:14px; } .web-cardwrap{ order:1; width:100%; display:flex; justify-content:center; } .web-cardshell{ width:min(540px,100%); } } /* ---- Mobile (<=767): mascot hidden, keep H1 + chips + STEM badge, form first ---- */ @media (max-width:767px){ .web-main{ display:flex; flex-direction:column; align-items:center; gap:16px; align-content:start; padding-block:clamp(14px,5vw,24px); } .web-herowrap{ order:0; width:100%; justify-content:center; } .web-mascot-bg{ display:none; } .web-aside{ width:100%; max-width:540px; text-align:center; display:flex; flex-direction:column; align-items:center; } .web-lead,.web-points{ display:none !important; } /* keep H1 + chips + STEM badge */ .web-chip--langs{ display:none !important; } /* mobile = 3 items: code, live, STEM */ .web-h1{ font-size:clamp(30px,8.5vw,40px); margin-top:2px; } .web-asidetop{ justify-content:center; margin-bottom:12px; } .web-chips{ justify-content:center; } .web-trust-row{ justify-content:center; margin-top:14px; } .web-flowseg{ display:flex; justify-content:center; margin-top:20px; width:100%; max-width:360px; } .web-flowseg .seg{ display:flex; width:100%; } .web-flowseg .seg button{ flex:1; justify-content:center; } .web-cardwrap{ order:1; width:100%; display:flex; justify-content:center; } } /* ---- Decoration intensity across the breakpoints ---- Below desktop the floating code-cards drop out entirely (a shrunk or hidden mascot cannot frame them, and their negative offsets must never cause horizontal scroll). On tablet/mobile the hand-lettered tags (LEARN / IDEA!) are hidden and the small doodles softened -- the brand gradient + constellation stay as atmosphere. */ @media (max-width:1199px){ .web-fcard{ display:none !important; } .web-tag{ display:none !important; } /* !important: LEARN/IDEA carry an inline display */ .web-doodle{ opacity:.32 !important; } /* !important: some doodles carry an inline opacity */ } /* ---- Short viewport height ---- Only desktop (>=1200) is a row layout; a short/un-maximized window there would vertically center a tall hero and lift the form's top off-screen. Anchor to the top and trim vertical padding. The single-column tablet + mobile bands already flow from the top. */ @media (min-width:1200px) and (max-height:760px){ .web-main{ align-items:flex-start; padding-block:clamp(10px,2vh,22px); } } /* ---- Small phones (<=480) ---- */ @media (max-width:480px){ .web-main{ padding-inline:12px; } /* use more device width */ .web-cardshell{ width:100%; } .web-card{ border-radius:22px; } .mm-phead{ padding:18px 16px 0; } .mm-body{ padding:6px 16px 8px; } .mm-foot{ padding:14px 16px 18px; } .mm-login,.mm-pick{ padding:26px 18px 22px; } .mm-state{ padding:36px 18px; } .mm-login-head h2{ font-size:24px; } .web-h1{ font-size:clamp(28px,8.5vw,36px); } /* date group: Day / Month / Year never clip (tighter padding + caret) */ .mm-dob{ gap:8px; } .mm-dob .mm-select{ padding:0 11px; padding-inline-end:28px; } .mm-dob .mm-selectwrap::after{ inset-inline-end:10px; } /* phone: dial compact so the number field keeps usable room */ .mm-dial{ padding:0 11px; gap:5px; } } /* ---- Small phones (<=360): maximize width, guarantee no clipped text ---- */ @media (max-width:360px){ .web-main{ padding-inline:9px; } .mm-phead{ padding:16px 13px 0; } .mm-body{ padding:6px 13px 8px; } .mm-foot{ padding:13px 13px 16px; } .mm-login,.mm-pick{ padding:22px 14px 18px; } .mm-field > label{ font-size:16px; } .mm-dob{ gap:6px; grid-template-columns:1fr 1.2fr 1fr; } .mm-dob .mm-select{ padding:0 8px; padding-inline-end:23px; font-size:14px; } .mm-dob .mm-selectwrap::after{ inset-inline-end:8px; font-size:10px; } .mm-dial{ padding:0 8px; gap:4px; font-size:14px; } .mm-dialmenu{ max-height:300px; } } /* ============================================================ STUDENT SELECTION — premium picker (MCP portal) Full white panel on the brand, 2-col card grid (1 col mobile), distinct colored avatars, select-then-continue. ============================================================ */ .mm-selroot{ align-items:center; justify-content:center; padding:clamp(14px,2.6vw,40px); } .mm-selpanel{ position:relative; z-index:2; width:100%; max-width:1140px; background:var(--surface); border:1px solid var(--line); border-radius:clamp(22px,2.4vw,38px); box-shadow:0 44px 100px -44px rgba(124,45,18,.50), 0 14px 44px -22px rgba(28,25,23,.20); padding:clamp(22px,3.2vw,52px); } /* utility controls sit on the white panel -> dark text variant */ .mm-seltop{ position:absolute; top:clamp(16px,2vw,26px); inset-inline-end:clamp(16px,2vw,26px); display:flex; gap:8px; z-index:6; } .mm-seltop .web-pillbtn{ color:var(--ink); background:var(--surface-2); border-color:var(--line); } .mm-seltop .web-pillbtn:hover{ background:var(--bg-tint); } .mm-selhead{ margin-bottom:clamp(18px,2.2vw,28px); max-width:62ch; } .mm-seleyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-weight:700; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--brand-600); } .mm-seltitle{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4.2vw,50px); color:var(--head); letter-spacing:-.02em; margin:10px 0 0; line-height:1.04; } .mm-selsub{ font-family:var(--ui); font-size:clamp(14px,1.2vw,16px); color:var(--muted); margin:10px 0 0; line-height:1.55; } .mm-selwa{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:8px 16px 8px 9px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--wa-500) 13%,var(--surface)); border:1px solid color-mix(in srgb,var(--wa-500) 30%,transparent); } [dir="rtl"] .mm-selwa{ padding:8px 9px 8px 16px; } .mm-selwa .ic{ width:26px; height:26px; border-radius:50%; background:var(--wa-500); color:#fff; display:grid; place-items:center; flex-shrink:0; } .mm-selwa .ic svg{ width:15px; height:15px; } .mm-selwa > span:last-child{ font-family:var(--ui); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:.02em; } .mm-selgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.3vw,18px); } .mm-selcard{ display:flex; align-items:center; gap:clamp(13px,1.3vw,18px); text-align:start; cursor:pointer; width:100%; background:var(--surface); border:1.5px solid var(--field-line); border-radius:20px; padding:clamp(14px,1.4vw,18px); box-shadow:var(--sh-sm); transition:border-color var(--fast),box-shadow var(--fast),background var(--fast),transform var(--fast) var(--ease); } .mm-selcard:hover{ border-color:color-mix(in srgb,var(--avc) 50%,var(--field-line)); box-shadow:var(--sh-md); transform:translateY(-2px); } .mm-selcard.on{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 4px var(--ring),var(--sh-md); } .mm-selav{ flex-shrink:0; width:clamp(54px,4vw,64px); height:clamp(54px,4vw,64px); border-radius:50%; display:grid; place-items:center; overflow:hidden; font-family:var(--display); font-weight:700; font-size:clamp(21px,1.8vw,25px); line-height:1; color:var(--avc); background:color-mix(in srgb,var(--avc) 15%,#fff); border:2.5px solid color-mix(in srgb,var(--avc) 42%,#fff); } :root[data-theme="dark"] .mm-selav{ background:color-mix(in srgb,var(--avc) 28%,#14110e); border-color:color-mix(in srgb,var(--avc) 52%,#14110e); color:color-mix(in srgb,var(--avc) 72%,#fff); } .mm-selav img{ width:100%; height:100%; object-fit:cover; } .mm-selmeta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .mm-selname{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.5vw,20px); color:var(--ink); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mm-selfacts{ font-family:var(--ui); font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:5px; } .mm-selfacts .k{ font-weight:500; color:var(--muted); } .mm-selfacts b{ font-weight:700; color:var(--ink-soft); } .mm-selfacts .dot{ color:var(--faint); margin:0 3px; } .mm-selgo{ flex-shrink:0; width:clamp(36px,3vw,42px); height:clamp(36px,3vw,42px); border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); transition:all var(--fast); } .mm-selcard:hover .mm-selgo{ background:color-mix(in srgb,var(--avc) 14%,var(--surface)); color:var(--avc); border-color:transparent; } .mm-selcard.on .mm-selgo{ background:var(--brand-500); color:#fff; border-color:transparent; box-shadow:var(--sh-brand); } .mm-selfoot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(20px,2.2vw,30px); padding-top:clamp(18px,1.8vw,24px); border-top:1px solid var(--line); } .mm-seltextbtn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--ui); font-weight:700; font-size:14.5px; color:var(--brand-600); } .mm-seltextbtn:hover{ color:var(--brand-500); } .mm-selcontinue{ min-width:clamp(230px,22vw,300px); } .mm-selcontinue:disabled{ background:var(--surface-2); color:var(--faint); box-shadow:none; cursor:not-allowed; opacity:1; } @media (max-width:768px){ .mm-selgrid{ grid-template-columns:1fr; } .mm-selpanel{ padding:56px 16px 20px; border-radius:24px; } .mm-seltop{ top:14px; inset-inline-end:14px; } .mm-selfoot{ flex-direction:column-reverse; align-items:stretch; } .mm-selcontinue{ width:100%; } .mm-seltextbtn{ justify-content:center; } } /* ============================================================ STUDENT DASHBOARD (authenticated portal shell + dashboard) Layout follows the MCP design (sidebar app); visuals reuse the portal token system. Dark mode = [data-theme="dark"] (portal convention, NOT .dark). Cream app surface overrides the orange gradient used by the book/login pages, scoped via :has(). ============================================================ */ html:has(.mm-app){ background:#FDF5EA; } :root[data-theme="dark"]:has(.mm-app){ background:#14110D; } .mm-app{ /* warm cream surface palette (design cream-*) + brand/teal/semantic from portal tokens */ --d-page:#FDF5EA; --d-card:#ffffff; --d-soft:#FFFBF6; --d-soft2:#FDF5EA; --d-line:#F3E1C9; --d-line2:#EAD4B6; --d-ink:#1F1410; --d-ink2:#3A241A; --d-muted:#8a6450; --d-faint:#b08c78; --d-shadow:0 1px 2px rgba(45,20,10,.05), 0 10px 30px -22px rgba(120,45,18,.5); --d-brand:var(--brand-500); --d-brand-600:#ea580c; --d-brand-700:#c2410c; --d-brand-50:#FFF4ED; --d-brand-100:#FFE6D5; --d-teal:#159C88; --d-teal-50:#ECFBF7; --d-teal-600:#0C7C6E; position:relative; z-index:1; min-height:100dvh; display:flex; align-items:stretch; background:var(--d-page); color:var(--d-ink); font-family:var(--ui); overflow-x:clip; /* shell-level guard: decorative/topbar content can never cause horizontal scroll (clip ≠ scroll container, so sticky topbar is unaffected) */ } :root[data-theme="dark"] .mm-app{ --d-page:#14110D; --d-card:#211b15; --d-soft:#1b1611; --d-soft2:#1f1913; --d-line:#342a22; --d-line2:#40342a; --d-ink:#f6f1ea; --d-ink2:#e6ddd2; --d-muted:#b6a595; --d-faint:#7d7065; --d-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.7); --d-brand-50:#2a1a0f; --d-brand-100:#34200f; --d-teal-50:#0e2a26; } /* ---- MCP constellation layer (shared) ---- */ .mcp-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .mcp-layer svg{ width:100%; height:100%; display:block; } .mcp-line{ stroke:rgba(255,255,255,.5); } .mcp-dot{ fill:rgba(255,255,255,.7); } .mcp-spark{ fill:rgba(255,255,255,.9); } .mcp-on-cream .mcp-line{ stroke:rgba(249,115,22,.28); } .mcp-on-cream .mcp-dot{ fill:rgba(249,115,22,.45); } .mcp-on-cream .mcp-spark{ fill:rgba(249,115,22,.6); } @keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:.95; transform:scale(1.15); } } .twinkle{ animation:twinkle 3s ease-in-out infinite; } /* ---- Sidebar rail ---- */ .mm-side{ position:sticky; top:0; z-index:50; align-self:flex-start; height:100dvh; width:268px; flex:0 0 auto; color:#fff; display:flex; flex-direction:column; overflow:hidden; transition:width .3s var(--ease), transform .3s var(--ease); background: radial-gradient(120% 80% at 10% 0%, #FF8A3D 0%, transparent 55%), radial-gradient(120% 90% at 100% 100%, #E0490B 0%, transparent 60%), linear-gradient(180deg, #FB7A22 0%, #F2670F 48%, #E25608 100%); box-shadow:18px 0 40px -24px rgba(120,45,18,.55); } :root[data-theme="dark"] .mm-side{ background: radial-gradient(120% 80% at 10% 0%, #F4842F 0%, transparent 55%), radial-gradient(120% 90% at 100% 100%, #B8430A 0%, transparent 60%), linear-gradient(180deg, #E86A14 0%, #C9530B 52%, #A8440A 100%); } @media (min-width:768px){ .mm-side.is-collapsed{ width:84px; } } /* collapse is desktop-only; mobile uses the drawer */ .mm-side-inner{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; padding:14px; overflow-y:auto; } .mm-side-inner::-webkit-scrollbar{ width:6px; } .mm-side-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:999px; } .mm-side-inner::-webkit-scrollbar-track{ background:transparent; } .mm-brand{ display:flex; align-items:center; gap:12px; padding:6px 6px 14px; } @media (min-width:768px){ .mm-side.is-collapsed .mm-brand{ justify-content:center; } } /* Glassmorphism brand tile: floating frosted glass above the orange sidebar */ .mm-brand-logo{ width:52px; height:52px; border-radius:18px; flex:none; position:relative; display:grid; place-items:center; padding:4px; background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 32px rgba(255,255,255,.12), 0 4px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4); } .mm-brand-logo img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:14px; } .mm-brand-txt{ line-height:1.12; min-width:0; flex:1; } .mm-brand-txt b{ display:block; font-size:17.5px; font-weight:800; letter-spacing:-.005em; } .mm-brand-txt small{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.82); } /* (legacy .mm-side-iconbtn removed — unused after the brand/toggle refactor) */ /* Sidebar collapse/expand toggle — circular translucent button below the brand, shown in both states (incl. after collapsing so it can be reopened) */ .mm-side-toggle{ display:grid; place-items:center; width:40px; height:40px; margin:8px auto 6px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; transition:background var(--fast); } .mm-side-toggle::-moz-focus-inner{ border:0; padding:0; } /* kill Firefox's inner button border */ .mm-side-toggle:hover{ background:rgba(255,255,255,.30); } .mm-side-toggle:focus, .mm-side-toggle:active{ outline:none; } /* no UA outline on click / tap */ .mm-side-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.55); } /* keyboard-only: soft white ring on the orange rail */ .mm-side-toggle-ic{ display:grid; place-items:center; transition:transform .3s var(--ease); } .mm-nav{ display:flex; flex-direction:column; gap:6px; margin-top:4px; } .mm-navlink{ display:flex; align-items:center; gap:13px; height:48px; padding:0 14px; border-radius:14px; font-family:var(--ui); font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:rgba(255,255,255,.86); position:relative; cursor:pointer; white-space:nowrap; outline:none; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s; } .mm-navlink:hover{ background:rgba(255,255,255,.14); color:#fff; } .mm-navlink:focus-visible{ outline:2px solid rgba(255,255,255,.8); outline-offset:-2px; } /* keyboard only */ .mm-navlink.active{ background:#fff; color:#E2560A; box-shadow:0 10px 22px -10px rgba(120,45,18,.65), 0 2px 0 rgba(255,255,255,.6) inset; } :root[data-theme="dark"] .mm-navlink.active{ background:#FFF7F0; color:#C2410C; } .mm-navlink.soon{ opacity:.62; cursor:default; } .mm-navlink.soon:hover{ background:transparent; color:rgba(255,255,255,.86); } .mm-nav-ic{ flex:none; } /* Sidebar count badge (Assessment: exams waiting for the student). The topbar bell's pill, inverted for the orange rail: white on the rail, brand on the white active link. On the collapsed desktop rail it sits on the icon's top corner. */ .mm-nav-badge{ margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; flex:none; display:grid; place-items:center; background:#fff; color:#E2560A; font-size:11px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 2px 6px -2px rgba(120,45,18,.45); } .mm-navlink.active .mm-nav-badge{ background:var(--brand-500); color:#fff; box-shadow:none; } @media (min-width:768px){ .mm-side.is-collapsed .mm-nav-badge, html.mm-pre-collapsed .mm-side .mm-nav-badge{ position:absolute; top:5px; inset-inline-end:12px; min-width:18px; height:18px; padding:0 4px; font-size:10px; } } /* Desktop collapse = icon-only rail (labels hidden). Scoped to >=768px so the MOBILE drawer is never affected: on mobile every label stays visible (no icon-only state). */ @media (min-width:768px){ .mm-side.is-collapsed .mm-navlink{ justify-content:center; padding:0; } .mm-side.is-collapsed .mm-navlink span, .mm-side.is-collapsed .mm-brand-txt, .mm-side.is-collapsed .mm-keep, .mm-side.is-collapsed .mm-prof-txt, .mm-side.is-collapsed .mm-prof-caret{ display:none; } } /* Pre-paint collapsed mirror (desktop only): the persisted collapsed sidebar is painted already-collapsed by the inline head script (class on ) BEFORE Alpine boots, so navigating pages never shows a 268->84 width snap, reflow, or shake. Mirrors .is-collapsed exactly; Alpine adopts the same value then removes this class (x-init), leaving the toggle button as the ONLY thing that animates the width. Scoped to desktop so the mobile drawer (full-width overlay) is never affected. */ @media (min-width:768px){ html.mm-pre-collapsed .mm-side{ width:84px; } html.mm-pre-collapsed .mm-side .mm-brand{ justify-content:center; } html.mm-pre-collapsed .mm-side .mm-navlink{ justify-content:center; padding:0; } html.mm-pre-collapsed .mm-side .mm-navlink span, html.mm-pre-collapsed .mm-side .mm-brand-txt, html.mm-pre-collapsed .mm-side .mm-keep, html.mm-pre-collapsed .mm-side .mm-prof-txt, html.mm-pre-collapsed .mm-side .mm-prof-caret{ display:none; } html.mm-pre-collapsed .mm-side .mm-prof{ justify-content:center; } html.mm-pre-collapsed .mm-side .mm-side-toggle-ic{ transform:rotate(180deg); } } .mm-keep{ position:relative; margin-top:20px; border-radius:16px; padding:16px; overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } .mm-keep-row{ position:relative; display:flex; align-items:center; gap:12px; } .mm-keep img{ width:auto; height:60px; flex:none; filter:drop-shadow(0 6px 10px rgba(90,28,10,.35)); } .mm-keep b{ display:block; font-size:14.5px; font-weight:800; line-height:1.15; } .mm-keep p{ margin:5px 0 0; font-size:11.5px; line-height:1.35; color:rgba(255,255,255,.85); } .mm-side-spacer{ flex:1; } /* Profile card is a