/* ===================================================================== modes-studio-light.css — Bespoke LIGHT theme (Direction B: พาสเทลสดใส) for the Mode Studio hub (modes-studio.html, body.mode-studio-v2-body). SAFETY: every selector gated behind [data-v2-mode-theme="light"] → DARK untouched. [lang] on boosts specificity above the :where() blanket; !important where the blanket also uses it. Linked only on modes-studio.html. ===================================================================== */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] { --ms-ink: #133a52; --ms-muted: #5b6b7a; --ms-sky: #0ea5e9; --ms-sky-2: #38bdf8; --ms-mint: #10b981; --ms-mint-2: #34d399; --ms-peach: #f97362; --ms-peach-2: #fb9da0; --ms-lav: #8b7cf0; --ms-lav-2: #a78bfa; --ms-amber: #f59e0b; --ms-amber-2: #fbbf24; --ms-card: #ffffff; --ms-line: rgba(70, 120, 150, 0.16); --ms-shadow: 0 16px 40px rgba(60, 110, 140, 0.13); --ms-shadow-lift: 0 26px 56px rgba(60, 110, 140, 0.18); } /* ---- page background: pastel multi-glow ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] { background-color: #f6fbff !important; background-image: radial-gradient(circle at 9% 12%, rgba(56, 189, 248, 0.20), transparent 34%), radial-gradient(circle at 92% 14%, rgba(251, 146, 160, 0.16), transparent 32%), radial-gradient(circle at 80% 88%, rgba(110, 231, 183, 0.18), transparent 36%), radial-gradient(circle at 16% 92%, rgba(167, 139, 250, 0.14), transparent 34%), linear-gradient(140deg, #f6fbff 0%, #fff6f2 48%, #f1fdf7 100%) !important; background-attachment: fixed !important; } /* ===================================================================== DARK theme: richer navy background + visible decorative shapes. (Previously the scene was display:none in dark = flat navy.) Deep navy multi-glow bg + blue-glow shapes = the dark analog of the light scene. Gated to [data-v2-mode-theme="dark"]; light path untouched. ===================================================================== */ html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] { background-color: #07152c !important; background-image: radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.24), transparent 42%), radial-gradient(circle at 88% 14%, rgba(129, 140, 248, 0.20), transparent 42%), radial-gradient(circle at 86% 88%, rgba(45, 212, 191, 0.22), transparent 46%), radial-gradient(circle at 12% 86%, rgba(59, 130, 246, 0.22), transparent 44%), linear-gradient(140deg, #07152c 0%, #0b2143 48%, #0e2a4d 100%) !important; background-attachment: fixed !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .background-scene { display: block !important; position: fixed !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: -1 !important; background: transparent !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .background-scene .blob, html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .background-scene .curve, html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .background-scene .geo { display: block !important; position: absolute !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .background-scene .blob { border-radius: 50% !important; filter: blur(78px) !important; opacity: 0.6 !important; mix-blend-mode: screen !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .blob-a { width: 260px !important; height: 260px !important; left: 8% !important; right: auto !important; top: 6% !important; bottom: auto !important; background: #3b9bff !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .blob-b { width: 320px !important; height: 320px !important; right: 10% !important; left: auto !important; bottom: 6% !important; top: auto !important; background: #2fe0c4 !important; animation: msBlobDrift 14s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .blob-c { width: 190px !important; height: 190px !important; left: 52% !important; right: auto !important; top: 50% !important; bottom: auto !important; background: #8fc4ff !important; animation: msBlobDrift 16s ease-in-out infinite reverse; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .curve { border-radius: 999px !important; border: 1px solid rgba(130, 195, 255, 0.5) !important; opacity: 1 !important; background: transparent !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .curve-a { width: 720px !important; height: 720px !important; left: -320px !important; right: auto !important; top: 120px !important; bottom: auto !important; transform: rotate(-20deg) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .curve-b { width: 900px !important; height: 540px !important; right: -420px !important; left: auto !important; top: 240px !important; bottom: auto !important; transform: rotate(8deg) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo { opacity: 0.9 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-ring { border-radius: 50% !important; border: 1px solid rgba(135, 201, 255, 0.6) !important; box-shadow: 0 0 22px rgba(59, 130, 246, 0.35) !important; background: transparent !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-ring-a { width: 120px !important; height: 120px !important; top: 16% !important; bottom: auto !important; left: 54% !important; right: auto !important; animation: msGeoFloat 12s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-ring-b { width: 80px !important; height: 80px !important; bottom: 18% !important; top: auto !important; left: 12% !important; right: auto !important; animation: msGeoPulse 9s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-square { border-radius: 14px !important; border: 1px solid rgba(126, 189, 255, 0.6) !important; box-shadow: 0 0 18px rgba(0, 174, 239, 0.28) !important; background: transparent !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-square-a { width: 72px !important; height: 72px !important; top: 30% !important; bottom: auto !important; right: 34% !important; left: auto !important; transform: rotate(16deg); animation: msGeoSpinA 13s linear infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-square-b { width: 46px !important; height: 46px !important; bottom: 31% !important; top: auto !important; right: 10% !important; left: auto !important; transform: rotate(-22deg); animation: msGeoFloat 11s ease-in-out infinite reverse; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-triangle { width: 0 !important; height: 0 !important; border-left: 18px solid transparent !important; border-right: 18px solid transparent !important; border-bottom: 30px solid rgba(124, 196, 255, 0.5) !important; filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-triangle-a { top: 18% !important; bottom: auto !important; right: 16% !important; left: auto !important; transform: rotate(8deg); animation: msGeoSpinB 14s linear infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-triangle-b { bottom: 24% !important; top: auto !important; left: 44% !important; right: auto !important; transform: rotate(-14deg); animation: msGeoPulse 10s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-line { height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(0, 174, 239, 0.04), rgba(125, 206, 255, 0.75), rgba(0, 174, 239, 0.04)) !important; box-shadow: 0 0 12px rgba(0, 174, 239, 0.35) !important; border: 0 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-line-a { width: 180px !important; top: 22% !important; bottom: auto !important; left: 22% !important; right: auto !important; transform: rotate(26deg); animation: msGeoFloat 10s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .geo-line-b { width: 140px !important; bottom: 20% !important; top: auto !important; right: 28% !important; left: auto !important; transform: rotate(-20deg); animation: msGeoFloat 12s ease-in-out infinite reverse; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .background-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .background-scene .blob, html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .background-scene .curve, html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .background-scene .geo { position: absolute; pointer-events: none; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .background-scene .blob { border-radius: 50%; filter: blur(80px); opacity: 0.30; mix-blend-mode: multiply; } /* geometry/positions copied 1:1 from index.css so the scene matches exactly */ html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .blob-a { width: 260px; height: 260px; left: 8%; top: 6%; background: #38bdf8; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .blob-b { width: 320px; height: 320px; right: 10%; bottom: 6%; top: auto; background: #34d399; animation: msBlobDrift 14s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .blob-c { width: 190px; height: 190px; left: 52%; top: 50%; bottom: auto; background: #fb9da0; animation: msBlobDrift 16s ease-in-out infinite reverse; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .curve { border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.32) !important; opacity: 0.85 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .curve-a { width: 720px; height: 720px; left: -320px; top: 120px; transform: rotate(-20deg); } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .curve-b { width: 900px; height: 540px; right: -420px; top: 240px; transform: rotate(8deg); } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo { opacity: 0.85 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-ring { border-radius: 50%; border: 1px solid rgba(14, 165, 233, 0.45) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-ring-a { width: 120px; height: 120px; top: 16%; left: 54%; --geo-rot: 0deg; animation: msGeoFloat 12s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-ring-b { width: 80px; height: 80px; bottom: 18%; left: 12%; --geo-rot: 0deg; animation: msGeoPulse 9s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-square { border-radius: 14px; border: 1px solid rgba(167, 139, 250, 0.5); } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-square-a { width: 72px; height: 72px; top: 30%; right: 34%; transform: rotate(16deg); animation: msGeoSpinA 13s linear infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-square-b { width: 46px; height: 46px; bottom: 31%; right: 10%; --geo-rot: -22deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 11s ease-in-out infinite reverse; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid rgba(251, 146, 160, 0.55); } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-triangle-a { top: 18%; right: 16%; transform: rotate(8deg); animation: msGeoSpinB 14s linear infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-triangle-b { bottom: 24%; left: 44%; transform: rotate(-14deg); animation: msGeoPulse 10s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-line { height: 1px; border-radius: 999px; background: rgba(16, 185, 129, 0.5); } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-line-a { width: 180px; top: 22%; left: 22%; --geo-rot: 26deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 10s ease-in-out infinite; } html[lang][data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="light"] .geo-line-b { width: 140px; bottom: 20%; right: 28%; --geo-rot: -20deg; transform: rotate(var(--geo-rot)); animation: msGeoFloat 12s ease-in-out infinite reverse; } @keyframes msBlobDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(16px, -18px, 0); } } @keyframes msGeoFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--geo-rot, 0deg)); } 50% { transform: translate3d(0, -12px, 0) rotate(var(--geo-rot, 0deg)); } } @keyframes msGeoSpinA { from { transform: rotate(16deg); } to { transform: rotate(376deg); } } @keyframes msGeoSpinB { from { transform: rotate(8deg); } to { transform: rotate(-352deg); } } @keyframes msGeoPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } } /* ---- hero kicker → colored eyebrow ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-kicker { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; } /* ---- hero title → gradient text ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-hero h1, html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] #modeV2HubTitle { background: linear-gradient(120deg, #0ea5e9 0%, #10b981 52%, #f97362 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-hero-copy p { color: var(--ms-muted) !important; -webkit-text-fill-color: var(--ms-muted) !important; } /* ---- count badge → pastel chip ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-count-badge { background: rgba(56, 189, 248, 0.14) !important; color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; } /* ---- mode cards → white + colored top accent + hover lift ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card { position: relative; overflow: hidden; background: var(--ms-card) !important; border: 1px solid var(--ms-line) !important; box-shadow: var(--ms-shadow) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ms-sky), var(--ms-sky-2)); z-index: 1; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+2)::before { background: linear-gradient(90deg, var(--ms-mint), var(--ms-mint-2)); } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+3)::before { background: linear-gradient(90deg, var(--ms-peach), var(--ms-peach-2)); } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+4)::before { background: linear-gradient(90deg, var(--ms-lav), var(--ms-lav-2)); } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+5)::before { background: linear-gradient(90deg, var(--ms-amber), var(--ms-amber-2)); } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-lift) !important; } /* ---- card icon → gradient chip (rotate hue) ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-icon { background: linear-gradient(135deg, var(--ms-sky), var(--ms-sky-2)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+2) .mode-v2-icon { background: linear-gradient(135deg, var(--ms-mint), var(--ms-mint-2)) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+3) .mode-v2-icon { background: linear-gradient(135deg, var(--ms-peach), var(--ms-peach-2)) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+4) .mode-v2-icon { background: linear-gradient(135deg, var(--ms-lav), var(--ms-lav-2)) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card:nth-child(5n+5) .mode-v2-icon { background: linear-gradient(135deg, var(--ms-amber), var(--ms-amber-2)) !important; } /* ---- plan-tier badges on mode cards (Free=blue, Pro=violet, Premium=amber) ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-plan-badge--free { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-plan-badge--pro { background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-plan-badge--premium { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; color: #5c3a00 !important; -webkit-text-fill-color: #5c3a00 !important; border: 0 !important; } /* keep DARK mode visually unchanged: hide the new plan badge there */ html[data-index-v2-theme] body.mode-studio-v2-body[data-v2-mode-theme="dark"] .mode-v2-plan-badge { display: none !important; } /* ---- card title / body text ---- */ html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card h3, html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card__top { color: var(--ms-ink) !important; -webkit-text-fill-color: var(--ms-ink) !important; } html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card__body, html[lang][data-index-v2-theme] body.mode-studio-v2-body.has-site-topbar-v2[data-v2-mode-theme="light"] .mode-v2-card__body p { color: var(--ms-muted) !important; -webkit-text-fill-color: var(--ms-muted) !important; }