/* ============================================================ 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('/certifi/static/Fredoka-Medium.ttf') format('truetype'); } @font-face { font-family:'Fredoka'; font-style:normal; font-weight:600; font-display:swap; src:url('/certifi/static/Fredoka-SemiBold.ttf') format('truetype'); } @font-face { font-family:'Fredoka'; font-style:normal; font-weight:700; font-display:swap; src: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",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; filter:drop-shadow(0 12px 16px rgba(90,28,10,.18)); animation:mascotFloat 5.5s var(--ease) infinite; } [dir="rtl"] .web-mascot-bg img{ transform:scaleX(-1); } @keyframes mascotFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } [dir="rtl"] .web-mascot-bg img{ animation-name:mascotFloatRtl; } @keyframes mascotFloatRtl{ 0%,100%{ transform:scaleX(-1) translateY(0);} 50%{ transform:scaleX(-1) 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:26px; } .web-eyebrow{ font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); } .web-h1{ font-family:var(--display); font-weight:600; font-size:clamp(40px,4vw,70px); letter-spacing:-.025em; margin:14px 0 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; } .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; } .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; } .mm-plans{ display:flex; flex-direction:column; gap:12px; } .mm-plan{ border:2px solid var(--field-line); background:var(--surface); border-radius:var(--r-md); padding:16px 18px; 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); } .mm-plan.pop{ padding-top:34px; } .mm-plan-pop{ position:absolute; inset-inline-end:0; top:0; background:var(--brand-600); color:#fff; font-family:var(--ui); font-weight:700; font-size:10.5px; letter-spacing:.03em; padding:5px 13px; border-bottom-left-radius:10px; } .mm-plan-head{ display:flex; align-items:flex-start; gap:12px; } .mm-plan-rad{ margin-top:3px; 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; } .mm-plan-name{ font-family:var(--ui); font-weight:700; font-size:16px; color:var(--teal-600); } .mm-plan-price{ font-family:var(--display); font-weight:700; font-size:24px; color:var(--ink); } .mm-plan-cur{ font-family:var(--ui); font-weight:600; font-size:12px; color:var(--muted); } .mm-plan-was{ font-family:var(--ui); font-size:12.5px; color:var(--muted); } .mm-plan-off{ font-family:var(--ui); font-weight:700; font-size:11px; color:var(--brand-600); background:var(--brand-50); padding:2px 8px; border-radius:var(--r-pill); } .mm-plan-feats{ margin:12px 0 2px; padding:0; list-style:none; display:grid; gap:7px; } .mm-plan-feats li{ font-family:var(--ui); font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; } .mm-plan-feats svg{ color:var(--ok); flex-shrink:0; } /* 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); } /* success */ .mm-success{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 28px; } .mm-success .badge{ width:84px; height:84px; border-radius:26px; background:var(--ok); color:#fff; display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(5,150,105,.55); margin-bottom:24px; } .mm-success h2{ font-size:28px; font-weight:600; color:var(--head); } .mm-success p{ font-family:var(--ui); font-size:15px; color:var(--muted); margin:12px 0 22px; line-height:1.55; max-width:34ch; } .mm-ref{ display:inline-flex; align-items:center; gap:10px; background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r-md); padding:12px 18px; margin-bottom:26px; } .mm-ref .k{ font-family:var(--ui); font-size:12.5px; color:var(--muted); font-weight:600; } .mm-ref .v{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--brand-600); letter-spacing:.02em; } /* ===================== 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 (768-1199): hero-text + mascot row on top, card below ---- */ @media (min-width:768px) and (max-width:1199px){ .web-main{ display:flex; flex-direction:column; align-items:center; gap:clamp(26px,4vw,40px); align-content:start; padding-block:clamp(20px,4vw,40px); } .web-herowrap{ order:0; width:100%; max-width:1000px; justify-content:center; } .web-aside{ text-align:start; } .web-cardwrap{ order:1; width:100%; } /* fewer floating cards on tablet: keep the front chips, drop the behind panels */ .web-fc-win,.web-fc-robot{ display:none; } } /* ---- 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-eyebrow,.web-lead,.web-points{ display:none !important; } /* keep H1 + chips + STEM badge */ .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; } } /* ---- 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-success{ padding:32px 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; } /* 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; } } .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:60px; height:auto; 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