@font-face{font-family:'Base';src:url('../assets/fonts/base-sans-regular.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:'BaseText';src:url('../assets/fonts/base-sans-text.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap} :root{--paper:#f6f4ed;--ink:#1a1b1f;--blue:#263bff;--line:#d9d8d0;--muted:#686966;--lime:#dcf77a}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;max-width:100%;overflow-x:clip}body{margin:0;max-width:100%;overflow-x:clip;width:100%;position:relative;background:var(--paper);color:var(--ink);font-family:Base,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}img,svg{display:block;max-width:100%}button{color:inherit}::selection{background:var(--blue);color:white}.hidden{display:none!important}.wrap,.creative-opening{width:calc(100% - 96px);max-width:1440px;margin:auto;box-sizing:border-box}section[id]{scroll-margin-top:90px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip-link{position:fixed;top:-80px;left:20px;background:var(--lime);padding:15px;z-index:100}.skip-link:focus{top:15px} .studio-nav{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:7px;font-size:34px;letter-spacing:-2px}.logo-star{width:18px;height:18px;background:var(--blue);clip-path:polygon(50% 0,60% 35%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 35%)}.wordmark small{font-size:10px;letter-spacing:0;max-width:40px;margin-left:10px;line-height:1.2}.studio-nav nav{display:flex;align-items:center;gap:35px;font-size:14px}.studio-nav sup{color:var(--blue);font-size:10px;margin-left:4px}.nav-project{background:var(--ink);color:white;padding:15px 22px;border-radius:30px}.nav-project span{margin-left:20px}.studio-nav a:hover{color:var(--blue)}.studio-nav .nav-project:hover{color:var(--lime)} .hero{position:relative;overflow:hidden;padding-top:25px}#pixel-field{position:absolute;inset:0;width:100%;height:100%;opacity:.2;pointer-events:none}.creative-opening{position:relative}.opening-note{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;color:var(--muted)}.live-square{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:7px}.hero h1{font-size:clamp(76px,8.8vw,140px);font-weight:400;letter-spacing:-.065em;line-height:.98;padding-top:66px;margin:0;position:relative;z-index:2;width:70%}.idea-word{color:var(--blue);position:relative;display:inline-block}.idea-word svg{position:absolute;inset:-7% -9%;width:118%;height:120%;pointer-events:none}.idea-word path{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-dasharray:800;stroke-dashoffset:800;animation:sketch 1.5s .5s forwards}.opening-bottom{display:flex;align-items:center;gap:35px;padding:40px 0 0;position:relative;z-index:3;width:63%}.opening-bottom p{font-family:BaseText,Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--muted);margin:0;max-width:260px}.opening-work{background:var(--blue);color:#fff;padding:19px 24px;border-radius:40px;display:flex;align-items:center;gap:28px;white-space:nowrap;font-size:14px;transition:background .2s,transform .2s}.opening-work:hover{background:var(--ink);transform:translateY(-3px)}.opening-work span{font-size:25px}.opening-art{position:absolute;right:0;top:95px;width:30%;height:390px}.opening-art:before{content:'';position:absolute;inset:15px -25px 10px;border:1px solid var(--line);border-radius:50%;transform:rotate(-30deg)}.opening-poster{position:absolute;width:72%;box-shadow:0 25px 50px #1b1c2430;border:7px solid #fff;background:white;transition:transform .4s}.opening-poster img{width:100%;max-height:285px;object-fit:contain}.opening-poster>span{display:block;font-size:9px;line-height:1.4;padding:9px 3px 3px}.opening-poster-one{left:-14%;top:0;transform:rotate(-9deg)}.opening-poster-two{right:-1%;top:100px;transform:rotate(9deg)}.opening-poster:hover{transform:rotate(0) translateY(-10px);z-index:4}.art-annotation{position:absolute;right:0;top:-30px;font-size:9px;color:var(--muted);line-height:1.5;letter-spacing:.07em}.stack-controls{position:absolute;bottom:-15px;right:0;display:flex;align-items:center;gap:12px}.stack-count{font-size:11px;color:var(--muted);margin-right:10px}.stack-controls button{width:35px;height:35px;border:1px solid var(--line);background:var(--paper);border-radius:50%}.stack-controls button:hover{background:var(--blue);color:white}.opening-wordmark{font-size:clamp(90px,17.6vw,264px);line-height:.85;letter-spacing:-.08em;margin-top:86px;color:var(--blue);white-space:nowrap}.wordmark-letter{display:inline-block;transition:transform .3s}.wordmark-letter:hover{transform:translateY(-10px)}.hero-footnote{display:none}.destination-track{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:35px;overflow:hidden;padding:18px 0}.destination-track>div{width:max-content;animation:marquee 38s linear infinite;font-size:12px;word-spacing:12px}.destination-track span{color:var(--blue);margin:0 20px}.destination-track:hover>div{animation-play-state:paused} .creative-reel{background:var(--blue);color:white;padding:30px 0 42px;margin:30px 18px 0;border-radius:8px;overflow:hidden}.reel-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 35px 25px;font-size:10px;letter-spacing:.08em}.reel-pause{border:1px solid #ffffff70;border-radius:30px;padding:8px 12px;background:none;color:white;font-size:10px}.reel-label>span:nth-child(2){margin-left:auto}.reel-track{display:flex;gap:30px;overflow-x:auto;padding:10px 45px 15px;scrollbar-width:none}.reel-track::-webkit-scrollbar{display:none}.reel-item{flex:0 0 230px;transform:rotate(-3deg);transition:transform .4s}.reel-item:nth-child(even){transform:rotate(3deg)}.reel-item:hover{transform:rotate(0) translateY(-7px)}.reel-item img{height:250px;width:100%;object-fit:contain;background:#f3f3ee;padding:12px;box-shadow:0 10px 20px #10138a30}.reel-item>span{display:block;font-size:11px;padding-top:14px}.reel-signature{display:none} .work-section{padding:100px 0}.work-kicker,.chapter-line{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;color:var(--muted)}.work-display{display:flex;align-items:center;justify-content:space-between;padding:30px 0}.work-display h2{font-size:clamp(100px,15.5vw,235px);line-height:.85;letter-spacing:-.075em;font-weight:400;margin:0}.work-o{position:relative;display:inline-block;color:var(--blue)}.work-orbit{position:absolute;left:29%;top:32%;font-size:.25em;letter-spacing:0}.work-period{color:var(--blue)}.work-count-stamp{display:flex;align-items:center;gap:14px;background:var(--lime);border-radius:50%;width:170px;height:170px;justify-content:center;transform:rotate(-12deg)}.work-count-stamp strong{font-size:58px;font-weight:400;letter-spacing:-.05em}.work-count-stamp>span{font-size:10px;line-height:1.6}.work-opening-bottom{display:flex;justify-content:space-between;align-items:end;margin:10px 0 35px}.work-opening-bottom p{font-size:19px;color:var(--muted);line-height:1.4;margin:0}.work-opening-bottom>span{font-size:10px;letter-spacing:.05em;color:var(--muted)}.work-controls{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:flex;gap:20px;justify-content:space-between;align-items:center}.work-tabs{display:flex;gap:7px;flex-wrap:wrap}.work-tabs button{border:0;background:transparent!important;color:var(--muted)!important;border-radius:25px;padding:9px 13px;font-size:12px}.work-tabs button.active-filter{background:var(--ink)!important;color:white!important}.work-tabs button:hover{color:var(--blue)!important}.work-tabs sup{margin-left:4px;font-size:9px}.work-controls input{background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 0;width:175px;font-size:12px;color:var(--ink)}.gallery-view-switch{display:flex;gap:16px;justify-content:flex-end;margin-top:20px}.gallery-view-switch button{border:0;background:none;font-size:11px;padding:5px 0;color:var(--muted)}.gallery-view-switch button.is-active{color:var(--blue)}.archive-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:20px 0 30px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 23px}.project-card{padding:0;border:0;background:none;text-align:left;min-width:0;perspective:1200px}.project-art{height:355px;background:#e7e8e2;position:relative;display:flex;align-items:center;justify-content:center;padding:30px;overflow:hidden;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s}.art-1{background:#e5e8ff}.art-2{background:#e8e5db}.art-3{background:#e1e9e3}.project-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px #20202120);transition:transform .5s}.project-card:hover img{transform:scale(1.04)}.project-open{position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-size:23px;transition:transform .3s}.project-card:hover .project-open{transform:rotate(-35deg)}.project-caption{display:flex;justify-content:space-between;gap:12px;padding-top:16px}.project-category{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.project-caption h3{font-size:16px;line-height:1.35;font-weight:400;letter-spacing:-.02em;margin:7px 0 0}.project-number{font-size:10px;color:var(--blue);padding-top:2px}.project-grid.index-view{display:block}.index-view .project-card{display:flex;align-items:center;gap:25px;width:100%;border-top:1px solid var(--line);padding:18px 0}.index-view .project-art{width:95px;height:90px;flex-shrink:0;padding:8px;transform:none}.index-view .project-caption{width:100%;padding:0;align-items:center}.index-view h3{font-size:23px}.index-view .project-open{display:none}.empty-state{padding:60px 0} .studio-chapter{background:var(--ink);color:var(--paper);padding:65px 0 85px}.studio-chapter .chapter-line{color:#a5a6a0}.studio-manifesto{display:flex;justify-content:space-between;align-items:end;gap:35px;padding:55px 0}.studio-manifesto h2{font-size:clamp(60px,7.5vw,110px);font-weight:400;line-height:1;letter-spacing:-.06em;margin:0}.studio-manifesto h2>span{color:var(--lime);position:relative;display:inline-block}.studio-manifesto svg{position:absolute;bottom:-10px;left:0;width:100%;height:25px}.studio-manifesto path{fill:none;stroke:var(--lime);stroke-width:2}.studio-side-note{width:235px}.studio-asterisk{font-size:100px;line-height:1;color:var(--lime);display:inline-block;animation:turn 30s linear infinite}.studio-side-note p{font-size:16px;line-height:1.5;color:#b7b9b3}.studio-detail{display:grid;grid-template-columns:1fr 1.5fr;gap:35px;border-top:1px solid #444640;padding:35px 0 60px}.studio-detail>span{font-size:10px;letter-spacing:.08em;color:#a5a6a0}.studio-detail p{font-size:25px;line-height:1.45;margin:0;max-width:750px}.creative-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.creative-service{border-top:1px solid #444640;padding-top:20px;display:flex;flex-direction:column}.service-index{font-size:10px;color:#a5a6a0;letter-spacing:.07em}.creative-service h3{font-size:38px;line-height:1.08;font-weight:400;letter-spacing:-.04em;margin:25px 0}.service-art{height:230px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.service-art-one{background:var(--lime);color:var(--ink)}.service-art-one>span{font-size:60px;line-height:.9;letter-spacing:-.05em;transform:rotate(-8deg);transition:transform .4s}.service-arrow{position:absolute;right:-40px;top:-10px;font-size:45px}.creative-service:hover .service-art-one>span{transform:rotate(5deg)}.service-art-two{background:var(--blue);color:white;flex-direction:column;padding:20px;align-items:start}.service-art-two>span{font-size:72px;line-height:.9;letter-spacing:-.065em;transition:translate .4s}.service-art-two>span:nth-child(2){color:transparent;-webkit-text-stroke:1px white;align-self:end}.creative-service:hover .service-art-two>span:nth-child(2){translate:-20px}.service-art-three{background:#ecb5a4;color:var(--ink)}.service-art-three>span{font-size:180px;letter-spacing:-.1em;line-height:1}.service-art-three>span>span{display:inline-block;transform:rotate(-12deg);transition:transform .4s}.creative-service:hover .service-art-three>span>span{transform:rotate(12deg)}.creative-service p{font-family:BaseText,Arial,sans-serif;font-size:14px;color:#b7b9b3;line-height:1.7;margin:25px 0}.service-link{margin-top:auto;font-size:12px;border-top:1px solid #444640;padding-top:18px;color:var(--lime)} .process-section{padding:85px 0}.process-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:35px 0 45px}.process-intro h2{font-size:clamp(40px,5vw,74px);line-height:1.05;letter-spacing:-.05em;font-weight:400;margin:0}.process-intro p{max-width:320px;line-height:1.6;font-size:15px;color:var(--muted)}.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.process-step{border-top:1px solid var(--line);padding-top:23px}.process-step>span{font-size:12px;color:var(--blue)}.process-step h3{font-size:26px;font-weight:400;letter-spacing:-.03em;margin:30px 0 15px}.process-step p{font-family:BaseText,Arial,sans-serif;font-size:14px;line-height:1.7;color:var(--muted);max-width:360px}.process-step small{display:inline-block;margin-top:16px;font-size:10px;letter-spacing:.06em;border:1px solid var(--line);padding:8px 12px;border-radius:30px} .contact-finale{background:var(--blue);color:white;padding:60px 0 0;overflow:hidden}.contact-finale .chapter-line{color:#b9c0ff}.contact-finale h2{font-size:clamp(70px,10.4vw,155px);line-height:.96;letter-spacing:-.06em;font-weight:400;margin:60px 0 50px}.contact-question{color:var(--lime);display:inline-block;transform:rotate(10deg)}.contact-finale h2 a{color:var(--lime);border-bottom:2px solid var(--lime)}.contact-finale h2 a>span{display:inline-block;transition:transform .3s}.contact-finale h2 a:hover>span{transform:translate(10px,-10px)}.brief-builder{border-top:1px solid #ffffff50;padding-top:30px;display:grid;grid-template-columns:1fr 1.3fr;gap:60px;margin-bottom:50px}.brief-intro h3{font-size:27px;font-weight:400;letter-spacing:-.03em;margin:0 0 15px}.brief-intro p{font-size:15px;line-height:1.6;max-width:300px;color:#c7ceff}.brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.brief-fields label{font-size:11px;display:block;color:#d9ddff}.brief-fields input,.brief-fields select,.brief-fields textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #ffffff60;border-radius:0;color:white;padding:13px 0;margin-top:5px;outline-offset:3px;font-size:16px}.brief-fields select option{color:var(--ink);background:white}.brief-fields textarea{height:75px;resize:vertical}.brief-fields input::placeholder,.brief-fields textarea::placeholder{color:#aeb8ff}.brief-wide{grid-column:1/-1}.brief-fields button{border:0;border-radius:40px;background:var(--lime);color:var(--ink);padding:17px 24px;display:flex;justify-content:space-between;font-size:14px}.brief-fields small{color:#c7ceff;font-size:11px;line-height:1.5}.contact-bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #ffffff50;padding-top:25px;margin-bottom:60px}.contact-bottom p{font-size:15px;line-height:1.6;color:#c7ceff;margin:0}.contact-bottom>a{font-size:24px;display:flex;gap:45px}.contact-signature{font-size:clamp(90px,17.5vw,264px);letter-spacing:-.08em;line-height:.85;white-space:nowrap;color:white}.studio-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 0}.studio-footer .wordmark{font-size:26px}.studio-footer>span,.studio-footer>a:last-child{font-size:10px;color:var(--muted)} #design-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:25px}#modal-backdrop{position:absolute;inset:0;background:#11131de0;backdrop-filter:blur(8px)}#modal-content{position:relative;z-index:1;background:var(--paper);color:var(--ink);width:100%;max-width:1200px;max-height:calc(100dvh - 50px);overflow:auto;border-radius:5px}.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 25px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.viewer-toolbar>div{display:flex;gap:20px}.viewer-toolbar button{border:0;background:none;font-size:16px;padding:7px}.viewer-toolbar button:last-child{font-size:12px}.viewer-layout{display:grid;grid-template-columns:1.5fr 1fr}.viewer-art{background:#e3e5df;padding:35px;display:flex;align-items:center;justify-content:center;min-height:440px}.viewer-art img{max-height:calc(100dvh - 180px);max-width:100%;object-fit:contain}.viewer-info{padding:40px 30px;display:flex;flex-direction:column;align-items:start}.viewer-category{font-size:10px;text-transform:uppercase;color:var(--blue);letter-spacing:.06em}.viewer-info h2{font-size:32px;line-height:1.15;letter-spacing:-.04em;font-weight:400;margin:22px 0 35px}.viewer-info dl{margin:0;width:100%}.viewer-info dl>div{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:15px 0;font-size:12px}.viewer-info dt{color:var(--muted)}.viewer-info dd{margin:0}.viewer-links{margin-top:auto;padding-top:40px;width:100%}.viewer-links a,.viewer-links button{display:flex;justify-content:space-between;width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--line);background:none;font-size:13px;text-align:left}.viewer-links a:hover,.viewer-links button:hover{color:var(--blue)}#toast{position:fixed;bottom:20px;right:20px;z-index:80}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}.reveal.is-visible{opacity:1;transform:none}.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;z-index:90} @keyframes sketch{to{stroke-dashoffset:0}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}} @media(min-width:1500px){.opening-art{height:450px}.opening-poster img{max-height:330px}} @media(max-width:1100px){.wrap,.creative-opening{width:calc(100% - 60px)}.hero h1{font-size:9vw}.opening-art{top:90px;height:340px}.opening-bottom{gap:20px}.opening-bottom p{font-size:15px}.opening-work{padding:15px 20px;font-size:12px;gap:18px}.opening-wordmark{margin-top:100px}.work-controls{align-items:start;flex-direction:column}.work-controls input{width:100%}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-art{height:400px}.service-art{height:200px}.creative-service h3{font-size:30px}.service-art-one>span{font-size:46px}.service-art-two>span{font-size:58px}.studio-manifesto h2{font-size:8vw}} @media(max-width:700px){.wrap,.creative-opening{width:calc(100% - 36px)}.studio-nav{height:80px}.wordmark{font-size:26px}.wordmark small{display:none}.studio-nav nav{gap:18px;font-size:12px}.nav-project{padding:11px 14px}.nav-project span{margin-left:8px}.studio-nav nav>a:nth-child(2){display:none}.opening-note{font-size:8px}.opening-note>span:last-child{max-width:120px;text-align:right}.hero h1{font-size:clamp(56px,11.7vw,82px);width:100%;padding-top:35px}.opening-bottom{width:100%;padding-top:30px;justify-content:space-between;gap:15px}.opening-bottom p{font-size:13px;max-width:170px}.opening-work{padding:13px 17px;font-size:12px;gap:10px}.opening-art{position:relative;top:auto;right:auto;width:100%;height:305px;margin-top:45px}.opening-art:before{inset:0 30px 30px}.opening-poster{width:42%;max-width:200px}.opening-poster img{max-height:220px}.opening-poster-one{left:9%;top:0}.opening-poster-two{right:9%;top:45px}.art-annotation{top:-20px;right:0;font-size:8px}.stack-controls{bottom:0;right:9%}.opening-wordmark{font-size:17.2vw;margin-top:35px}.destination-track{margin-top:25px;padding:15px 0}.creative-reel{margin:20px 8px 0;padding:22px 0 25px}.reel-label{padding:0 20px 20px;font-size:8px}.reel-label>span:nth-child(2){display:none}.reel-item{flex-basis:185px}.reel-item img{height:215px}.reel-track{padding-left:25px;gap:22px}.work-section{padding:60px 0}.work-kicker,.chapter-line{font-size:8px}.work-kicker>span:last-child,.chapter-line>span:last-child{max-width:130px;text-align:right}.work-display{padding:30px 0}.work-display h2{font-size:23vw}.work-count-stamp{width:85px;height:85px;flex-direction:column;gap:0;flex-shrink:0}.work-count-stamp strong{font-size:32px;line-height:1.1}.work-count-stamp>span{font-size:6px;line-height:1.3}.work-opening-bottom{gap:15px}.work-opening-bottom p{font-size:15px}.work-opening-bottom>span{font-size:8px;max-width:95px;text-align:right}.work-tabs{gap:3px}.work-tabs button{font-size:11px;padding:8px 10px}.archive-meta{font-size:8px;gap:15px}.archive-meta>span:last-child{max-width:150px;text-align:right}.project-grid{gap:30px 12px}.project-art{height:240px;padding:15px}.project-open{width:28px;height:28px;font-size:18px;bottom:8px;right:8px}.project-category{font-size:7px;letter-spacing:.04em}.project-caption{gap:5px;padding-top:12px}.project-caption h3{font-size:13px}.project-number{font-size:8px}.index-view .project-art{width:65px;height:75px}.index-view .project-card{gap:15px}.index-view h3{font-size:17px}.studio-chapter{padding:45px 0 55px}.studio-manifesto{display:block;padding:40px 0}.studio-manifesto h2{font-size:12vw}.studio-side-note{display:flex;align-items:center;gap:25px;width:auto;margin-top:30px}.studio-asterisk{font-size:65px}.studio-side-note p{font-size:14px;margin:0}.studio-detail{grid-template-columns:1fr;gap:20px;padding-bottom:40px}.studio-detail p{font-size:21px}.creative-services{grid-template-columns:1fr;gap:40px}.creative-service h3{font-size:38px}.service-art{height:260px}.service-art-one>span{font-size:65px}.service-art-two>span{font-size:82px}.process-section{padding:55px 0}.process-intro{display:block;margin:30px 0}.process-intro h2{font-size:43px}.process-intro p{font-size:14px}.process-steps{grid-template-columns:1fr;gap:30px}.process-step h3{margin:18px 0 12px}.process-step p{max-width:none}.process-step small{margin-top:7px}.contact-finale{padding:40px 0 0}.contact-finale h2{font-size:13vw;margin:40px 0}.brief-builder{grid-template-columns:1fr;gap:25px}.brief-intro p{max-width:none}.brief-fields{gap:20px 15px}.brief-fields input,.brief-fields select{font-size:14px}.contact-bottom{display:block;margin-bottom:45px}.contact-bottom p{margin-bottom:20px;font-size:14px}.contact-bottom>a{font-size:22px;justify-content:space-between}.contact-signature{font-size:17.2vw}.studio-footer{flex-wrap:wrap;padding:28px 0}.studio-footer>span:nth-child(2){display:none}.studio-footer .wordmark{font-size:24px}#design-modal{padding:10px}#modal-content{max-height:calc(100dvh - 20px)}.viewer-layout{grid-template-columns:1fr}.viewer-art{min-height:0;padding:25px}.viewer-art img{max-height:50dvh}.viewer-info{padding:25px}.viewer-info h2{font-size:27px;margin:18px 0 25px}.viewer-links{padding-top:20px}.viewer-toolbar{padding:10px 15px;font-size:8px}.viewer-toolbar>div{gap:7px}.viewer-toolbar button{padding:6px}.viewer-toolbar button:last-child{font-size:10px}} @media(max-width:380px){.project-grid{grid-template-columns:1fr}.project-art{height:350px}.studio-nav nav{gap:10px}.opening-work{padding:12px;font-size:11px}.opening-bottom p{font-size:12px}.brief-fields{grid-template-columns:1fr}.brief-wide{grid-column:auto}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.idea-word path{stroke-dashoffset:0}.reveal{opacity:1;transform:none}.project-art{transform:none!important}.reel-pause{display:none}} .nav-project{white-space:nowrap}#toast{opacity:0;pointer-events:none}#toast.opacity-100{opacity:1;background:var(--ink);color:white;padding:15px 20px;border-radius:5px} @media(max-width:360px){.studio-nav .wordmark{font-size:23px}.studio-nav nav{gap:10px}.studio-nav .nav-project{font-size:10px;padding:12px}.studio-nav .nav-project span{margin-left:3px}} @media(min-width:701px){.stack-controls{bottom:-60px}.opening-wordmark{margin-top:105px}} .work-display h2{white-space:nowrap}@media(max-width:700px){.work-display h2{font-size:20vw}} /* Restore the original white-and-blue studio direction and supplied identity. */ :root{--paper:#fff;--ink:#111;--blue:#0343fa;--line:#e5e5e5;--muted:#777;--lime:#fff} .brand-logo{width:205px;height:58px;object-fit:cover}.studio-nav .wordmark{gap:12px;letter-spacing:0}.studio-nav .wordmark small{margin:0}.studio-nav{border:0}.nav-project{background:var(--blue)}.studio-nav .nav-project:hover{background:#111;color:#fff}.opening-work{background:none;color:#111;border-radius:0;padding:0 0 12px;border-bottom:1px solid var(--line)}.opening-work span{color:var(--blue)}.opening-work:hover{background:none;color:var(--blue);transform:none}.opening-art:before{display:none}.opening-poster{border:0;box-shadow:0 14px 30px #0000000d}.opening-poster-one,.opening-poster-two{transform:none}.opening-poster:hover{transform:translateY(-8px)}.opening-poster>span{padding:12px;font-size:9px;color:var(--muted)}.opening-wordmark{height:clamp(120px,24vw,355px);margin-top:75px;line-height:1;letter-spacing:0;overflow:hidden}.opening-wordmark img{width:100%;height:100%;object-fit:cover}.destination-track{border:0;margin-top:15px;color:var(--muted)}.creative-reel{margin:0;border-radius:0;padding-top:35px}.work-count-stamp{background:white;border:1px solid var(--blue);color:var(--blue);border-radius:0;width:auto;height:auto;padding:25px;transform:rotate(-7deg);flex-direction:row}.work-tabs button.active-filter{background:transparent!important;color:var(--blue)!important;border-radius:0;box-shadow:0 2px var(--blue)}.work-tabs button{padding-left:0;padding-right:0;margin-right:17px}.project-grid{grid-template-columns:1.1fr .9fr;gap:65px 40px}.project-art{background:#f3f4f5;background-image:linear-gradient(#0343fa04 1px,transparent 1px),linear-gradient(90deg,#0343fa04 1px,transparent 1px);background-size:32px 32px;padding:40px;height:450px}.art-1{background-color:#f1f2ff}.art-2{background-color:#f2f5f2}.art-3{background-color:#f6f5f2}.project-caption{margin-top:15px;border-top:1px solid var(--line);padding-top:16px}.project-caption h3{font-size:18px}.project-category{font-size:11px;text-transform:none;letter-spacing:0}.project-number{color:var(--muted);font-size:11px}.project-open{border-radius:0}.studio-chapter{background:var(--blue);color:#fff}.studio-chapter .chapter-line,.service-index,.studio-detail>span{color:#ffffffb0}.studio-manifesto h2>span{color:white}.studio-manifesto path{stroke:white}.studio-emblem{width:105px;height:105px;object-fit:cover;border-radius:50%;margin-bottom:24px}.studio-side-note p,.creative-service p{color:#ffffffcc}.studio-detail,.creative-service,.service-link{border-color:#ffffff60}.service-link{color:white}.service-art-one,.service-art-two,.service-art-three{background:white;color:var(--blue)}.service-art-two>span:nth-child(2){-webkit-text-stroke-color:var(--blue)}.contact-finale{background:white;color:#111}.contact-finale .chapter-line{color:var(--muted)}.contact-question,.contact-finale h2 a{color:var(--blue)}.contact-finale h2 a{border-color:var(--blue)}.brief-builder,.contact-bottom{border-color:var(--line)}.brief-intro p,.brief-fields label,.brief-fields small,.contact-bottom p{color:var(--muted)}.brief-fields input,.brief-fields textarea,.brief-fields select{color:#111;border-color:var(--line)}.brief-fields input::placeholder,.brief-fields textarea::placeholder{color:#999}.brief-fields button{background:var(--blue);color:#fff}.contact-signature{height:clamp(120px,24vw,355px);overflow:hidden}.contact-signature img{width:100%;height:100%;object-fit:cover}.studio-footer .brand-logo{width:160px;height:48px} @media(min-width:1000px){.project-card:nth-child(4n+1){padding-right:45px}.project-card:nth-child(4n+2){padding-top:100px}.project-card:nth-child(4n+2) .project-art{height:380px}.project-card:nth-child(4n+4){padding-left:45px;padding-top:70px}.project-grid.index-view .project-card{padding:18px 0}.project-grid.index-view .project-art{height:90px}} @media(max-width:700px){.brand-logo{width:145px;height:44px}.studio-nav nav{gap:12px}.studio-nav .nav-project{font-size:11px}.opening-wordmark{height:25vw;margin-top:35px}.opening-work{font-size:13px;padding-bottom:10px}.project-grid{gap:40px;grid-template-columns:1fr}.project-art{height:400px;padding:35px}.project-caption h3{font-size:18px}.project-category{font-size:12px}.work-count-stamp{padding:12px;gap:8px;flex-direction:column}.work-count-stamp>span{font-size:8px}.studio-emblem{width:65px;height:65px;margin-bottom:0}.contact-signature{height:25vw}.studio-footer .brand-logo{width:140px;height:42px}.project-grid.index-view .project-art{height:75px}.project-grid.index-view .project-caption{border:0;margin:0}.project-grid.index-view h3{font-size:16px}} /* Resolution-independent brand artwork. */ .brand-logo{object-fit:contain;width:205px;height:auto;max-height:58px}.opening-wordmark,.contact-signature{height:auto;padding:35px 0 20px;overflow:visible}.opening-wordmark img,.contact-signature img{height:auto;width:100%;object-fit:contain}.hero h1{font-size:clamp(62px,7.4vw,112px);width:73%}.opening-bottom p{max-width:305px}.service-art-two>span{font-size:clamp(40px,4.5vw,68px)} @media(max-width:700px){.brand-logo{width:135px;height:auto}.hero h1{font-size:clamp(42px,9.7vw,68px);width:100%}.opening-wordmark,.contact-signature{padding:15px 0}.opening-bottom p{max-width:215px}.service-art-two>span{font-size:65px}.studio-footer .brand-logo{height:auto}} .monthly-package{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;padding:75px 0;border-bottom:1px solid var(--line)}.package-label{font-size:10px;letter-spacing:.08em;color:var(--blue)}.monthly-package h2{font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.05em;margin:25px 0}.monthly-package p{font-size:16px;line-height:1.6;color:var(--muted);max-width:480px}.package-offer{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.package-price{font-size:clamp(38px,4vw,60px);letter-spacing:-.04em;color:var(--blue)}.package-period{font-size:14px;color:var(--muted);margin:12px 0 30px}.package-offer a{background:var(--blue);color:white;padding:17px 23px;border-radius:30px;font-size:14px}.package-offer a:hover{background:#111}@media(max-width:700px){.monthly-package{grid-template-columns:1fr;gap:25px;padding:50px 0}.monthly-package h2{font-size:48px}.package-price{font-size:43px}} /* Composed service artwork. */ .service-composition{height:285px;position:relative;isolation:isolate;background:#f4f6ff;display:block}.service-composition:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#0343fa15 .8px,transparent .8px);background-size:14px 14px;z-index:-1}.service-composition img{display:block}.service-art-one .service-orbit{position:absolute;width:240px;height:240px;border:1px solid #0343fa30;border-radius:50%;top:20px;left:calc(50% - 120px);transform:rotate(-25deg)}.service-art-one .campaign-mini{position:absolute;width:39%;height:195px;object-fit:contain;box-shadow:0 14px 25px #13236220;background:white;border:5px solid white;transition:transform .5s}.service-art-one .mini-a{left:13%;top:32px;transform:rotate(-11deg)}.service-art-one .mini-b{right:13%;top:55px;transform:rotate(10deg)}.service-art-one .destination-ticket{position:absolute;left:20px;bottom:20px;background:var(--blue);color:white;font-size:9px;line-height:1.7;letter-spacing:.08em;padding:10px 14px;transform:rotate(-4deg)}.destination-ticket b{font-weight:400}.creative-service:hover .mini-a{transform:rotate(-5deg) translateY(-6px)}.creative-service:hover .mini-b{transform:rotate(5deg) translateY(-5px)}.social-sheet{position:absolute;width:51%;height:215px;box-shadow:0 15px 25px #13236220;transition:transform .5s}.sheet-back{left:13%;top:26px;background:var(--blue);color:#fff;transform:rotate(-12deg);padding:30px 15px;font-size:30px;line-height:1.1;letter-spacing:-.04em}.sheet-front{right:12%;top:40px;background:white;padding:9px;transform:rotate(10deg)}.sheet-front img{width:100%;height:170px;object-fit:cover}.sheet-front>span{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.06em;padding-top:10px;color:var(--blue)}.social-dot{position:absolute;width:25px;height:25px;background:var(--blue);border-radius:50%;border:5px solid #fff}.dot-one{left:17px;bottom:25px}.dot-two{right:20px;top:25px;width:14px;height:14px;border:0}.creative-service:hover .sheet-front{transform:rotate(3deg) translateY(-7px)}.creative-service:hover .sheet-back{transform:rotate(-6deg)}.brand-paper{position:absolute;left:13%;top:26px;width:53%;height:225px;padding:23px 20px;background:white;box-shadow:0 12px 25px #13236215;transform:rotate(-8deg);transition:transform .5s}.brand-paper img{width:100%;height:40px;object-fit:contain}.brand-paper>span{display:block;font-size:7px;letter-spacing:.06em;line-height:1.5;margin-top:23px;color:var(--blue)}.brand-paper i{display:block;width:100%;height:1px;background:#dce3ff;margin-top:12px}.brand-paper i:last-child{width:65%}.brand-card{position:absolute;width:55%;height:105px;right:8%;bottom:28px;background:var(--blue);padding:27px 18px;transform:rotate(12deg);box-shadow:0 10px 22px #13236225;transition:transform .5s}.brand-card img{width:100%;height:100%;object-fit:contain}.brand-seal{position:absolute;right:16px;top:18px;width:65px;height:65px;border:1px solid var(--blue);border-radius:50%;display:grid;place-content:center;text-align:center;font-size:9px;line-height:1.4;transform:rotate(12deg)}.creative-service:hover .brand-card{transform:rotate(5deg) translateY(-7px)}.creative-service:hover .brand-paper{transform:rotate(-3deg)} @media(max-width:1000px) and (min-width:701px){.service-composition{height:250px}.service-art-one .campaign-mini{height:170px}.social-sheet{height:190px}.sheet-front img{height:145px}.sheet-back{font-size:24px}.brand-paper{height:200px;padding:18px 12px}.brand-card{height:90px}.brand-seal{width:50px;height:50px;font-size:7px}} @media(max-width:700px){.service-composition{height:300px}.service-art-one .campaign-mini{height:210px}.social-sheet{height:230px}.sheet-front img{height:185px}.brand-paper{height:240px}.brand-card{height:115px}} .service-composition .brand-seal{font-size:9px;letter-spacing:0;line-height:1.4}.service-composition .social-dot{font-size:0;line-height:0}.service-art-two.service-composition{padding:0}.service-composition .destination-ticket{font-size:9px;letter-spacing:.08em;line-height:1.7} /* Clean homepage and abstract service graphics; campaign images live in the gallery. */ .hero h1{width:100%;font-size:clamp(64px,8.3vw,126px);padding-top:65px}.opening-bottom{width:100%;justify-content:space-between;padding-top:40px}.opening-bottom p{max-width:410px;font-size:18px}.opening-work{min-width:175px;justify-content:space-between}.opening-wordmark{margin-top:55px;max-width:960px;padding-top:25px}.service-symbol{height:245px;background:#fff;display:grid;place-items:center;overflow:hidden}.service-symbol svg{width:85%;height:85%;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}.service-symbol .symbol-sheet{fill:white}.service-symbol .symbol-arrow{stroke-width:4}.creative-service:hover .service-symbol svg{transform:translateY(-5px) rotate(-3deg)}.creative-service .service-link{padding-top:18px;margin-top:0} @media(max-width:700px){.hero h1{font-size:11vw;padding-top:35px}.opening-bottom{gap:25px;align-items:end}.opening-bottom p{font-size:14px;max-width:215px}.opening-work{min-width:105px;font-size:12px}.opening-wordmark{margin-top:40px}.service-symbol{height:240px}} .dashain-offer{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:60px;margin-top:55px;border:1px solid var(--line);padding:30px 45px;background:#fff}.dashain-art img{width:100%;max-height:320px;object-fit:contain}.dashain-label{color:var(--blue);font-size:10px;letter-spacing:.08em}.dashain-copy h2{font-size:clamp(32px,3.5vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:20px 0}.dashain-copy p{font-size:15px;line-height:1.6;color:var(--muted);max-width:490px}.dashain-price{font-size:32px;color:var(--blue);letter-spacing:-.035em;margin:20px 0}.dashain-price>span{font-size:13px;color:var(--muted);letter-spacing:0}.dashain-copy>a{display:inline-flex;gap:25px;align-items:center;padding:15px 22px;background:var(--blue);color:white;border-radius:30px;font-size:12px}.dashain-copy>a:hover{background:#111} @media(max-width:700px){.dashain-offer{grid-template-columns:1fr;gap:20px;padding:22px;margin-top:35px}.dashain-art img{max-height:220px}.dashain-copy h2{font-size:34px}.dashain-copy p{font-size:14px}.dashain-price{font-size:30px}.dashain-copy>a{font-size:11px;gap:15px}} /* Integrated welcome layout: typography and one seasonal offer. */ .welcome-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:8%;align-items:center;padding:45px 0 40px}.hero .welcome-message h1{font-size:clamp(65px,7vw,108px);padding:0;line-height:1.03;width:100%;letter-spacing:-.06em}.welcome-message>p{max-width:440px;font-size:18px;line-height:1.6;color:var(--muted);margin:35px 0}.welcome-message .opening-work{display:inline-flex;gap:40px;min-width:0}.welcome-tags{display:flex;gap:18px;flex-wrap:wrap;font-size:9px;letter-spacing:.08em;color:var(--muted);margin-top:40px}.welcome-offer{border:1px solid var(--line);padding:22px 28px;background:#fff;position:relative;box-shadow:12px 12px 0 #0343fa06}.offer-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.08em;color:var(--blue)}.offer-top>span:last-child{font-size:24px}.offer-art{height:155px;margin:10px 0;display:flex;align-items:center;justify-content:center}.offer-art img{height:100%;width:100%;object-fit:contain}.welcome-offer h2{font-size:34px;line-height:1.05;letter-spacing:-.04em;font-weight:400;margin:15px 0}.offer-price{font-size:37px;letter-spacing:-.045em;color:var(--blue)}.welcome-offer p{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0 20px}.welcome-offer>a{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:white;background:var(--blue);padding:15px 18px;border-radius:30px}.welcome-offer>a:hover{background:#111}.welcome-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0;font-size:9px;letter-spacing:.06em;color:var(--muted)}.destination-track{margin-top:0}.service-symbol{background:transparent;border:1px solid #ffffff40;border-radius:4px}.service-symbol svg{stroke:#fff}.service-symbol .symbol-sheet{fill:var(--blue)}.creative-service h3{min-height:82px}.work-section{padding-top:75px}.contact-finale{border-top:1px solid var(--line)} @media(max-width:1000px){.welcome-grid{gap:5%;grid-template-columns:1.25fr 1fr}.hero .welcome-message h1{font-size:7vw}.welcome-offer{padding:20px}.welcome-message>p{font-size:16px}} @media(max-width:700px){.welcome-grid{grid-template-columns:1fr;padding:35px 0 30px;gap:35px}.hero .welcome-message h1{font-size:13vw}.welcome-message>p{font-size:16px;margin:25px 0}.welcome-tags{margin-top:25px;font-size:8px}.welcome-offer{padding:22px;box-shadow:7px 7px 0 #0343fa06}.offer-art{height:155px}.welcome-offer h2{font-size:32px}.offer-price{font-size:36px}.welcome-bottom{font-size:8px;gap:15px}.welcome-bottom>span{max-width:155px}.creative-service h3{min-height:0}.work-section{padding-top:50px}.work-controls{gap:15px}.monthly-package{padding:45px 0}} /* Restore a flowing editorial opening with a seasonal offer below it. */ .studio-nav{border-bottom:1px solid var(--line)}.welcome-grid{display:block;padding:55px 0 0}.hero .welcome-message h1{font-size:clamp(82px,10.3vw,155px);line-height:.98;letter-spacing:-.065em}.welcome-message{position:relative;padding-bottom:45px}.welcome-message>p{max-width:435px;margin:35px 0 0;font-size:18px;line-height:1.6}.welcome-message .opening-work{position:absolute;right:0;bottom:92px;font-size:16px;gap:65px}.welcome-tags{margin-top:32px;font-size:10px;gap:25px}.welcome-offer{display:grid;grid-template-columns:.8fr 1.1fr 1fr;gap:12px 35px;align-items:center;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:none;padding:27px 0;background:none}.offer-top{grid-column:1;grid-row:1;align-self:start}.offer-art{grid-column:1;grid-row:1/5;height:130px;margin:24px 0 0}.welcome-offer h2{grid-column:2;grid-row:1/3;font-size:36px;margin:0}.offer-price{grid-column:3;grid-row:1;font-size:38px}.welcome-offer p{grid-column:2;grid-row:3/5;font-size:13px;margin:0}.welcome-offer>a{grid-column:3;grid-row:3/5;border-radius:0;background:none;color:var(--blue);border-bottom:1px solid var(--blue);padding:12px 0;font-size:13px}.welcome-offer>a:hover{background:none;color:#111}.welcome-bottom{position:relative;border-top:0;padding:35px 0 35px 40px}.scroll-thread{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--line)}.scroll-thread:after{content:"";position:absolute;left:-2px;top:0;width:5px;height:22px;background:var(--blue);animation:thread-down 2.8s ease-in-out infinite}.destination-track{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.work-kicker,.chapter-line{padding-bottom:17px;border-bottom:1px solid var(--line)}.studio-chapter .chapter-line{border-color:#ffffff50}.work-section{padding-top:65px}.service-symbol svg{transition:transform .55s}.work-orbit{animation:arrow-drift 4s ease-in-out infinite}.monthly-package{position:relative}.monthly-package:before{content:"";position:absolute;top:0;left:0;width:70px;height:3px;background:var(--blue)} @keyframes thread-down{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:calc(100% - 22px);opacity:0}}@keyframes arrow-drift{0%,100%{transform:translate(-3px,3px)}50%{transform:translate(3px,-3px)}} @media(max-width:1100px) and (min-width:701px){.hero .welcome-message h1{font-size:11vw}.welcome-offer{gap:20px}.welcome-offer h2{font-size:30px}.offer-price{font-size:33px}.welcome-message .opening-work{bottom:95px;gap:35px}} @media(max-width:700px){.welcome-grid{padding-top:30px}.hero .welcome-message h1{font-size:15vw;line-height:1.03}.welcome-message{padding-bottom:30px}.welcome-message>p{font-size:16px;max-width:100%;margin:25px 0}.welcome-message .opening-work{position:static;font-size:14px;gap:45px}.welcome-tags{font-size:8px;gap:17px;margin-top:25px}.welcome-offer{grid-template-columns:110px 1fr;gap:12px 18px;padding:23px 0}.offer-top{grid-column:1/-1;grid-row:1;align-self:auto;font-size:9px}.offer-art{grid-column:1;grid-row:2/5;height:125px;margin:0}.welcome-offer h2{grid-column:2;grid-row:2;font-size:25px;line-height:1.1}.offer-price{grid-column:2;grid-row:3;font-size:28px}.welcome-offer p{grid-column:2;grid-row:4;font-size:11px}.welcome-offer>a{grid-column:1/-1;grid-row:5;font-size:12px;margin-top:5px}.welcome-bottom{font-size:8px;padding:25px 0 25px 22px;gap:12px}.welcome-bottom>span:not(.scroll-thread){max-width:155px}.destination-track{padding:15px 0}.work-section{padding-top:45px}.work-display h2{font-size:19vw}.work-count-stamp{padding:10px}.work-count-stamp strong{font-size:30px}.work-display{gap:15px}.contact-finale h2{font-size:14vw}.studio-manifesto h2{font-size:11vw}.service-symbol{height:225px}} @media(prefers-reduced-motion:reduce){.scroll-thread:after,.work-orbit{animation:none}} /* A standalone Dashain greeting in the welcome section. */ .welcome-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:5%;align-items:center;padding:50px 0 35px}.welcome-message{padding-bottom:0}.hero .welcome-message h1{font-size:clamp(70px,8.5vw,125px)}.welcome-message .opening-work{position:static;display:inline-flex;margin-top:28px;font-size:14px;gap:45px}.welcome-message>p{font-size:17px;max-width:435px}.welcome-dashain{width:100%;display:flex;justify-content:center;align-items:center}.welcome-dashain img{width:100%;max-width:460px;height:auto;object-fit:contain}.welcome-bottom{border-top:1px solid var(--line)} @media(max-width:1000px) and (min-width:701px){.hero .welcome-message h1{font-size:9vw}.welcome-message>p{font-size:15px}} @media(max-width:700px){.welcome-grid{grid-template-columns:1fr;gap:20px;padding:30px 0 25px}.hero .welcome-message h1{font-size:15vw}.welcome-message>p{font-size:16px;margin:25px 0}.welcome-message .opening-work{margin-top:0}.welcome-dashain img{max-width:340px}.welcome-tags{margin-bottom:10px}} /* Consistent seamless destination strip. */ .destination-track{padding:17px 0;overflow:hidden}.destination-track .destination-loop{display:flex;width:max-content;word-spacing:normal;animation:marquee 35s linear infinite;font-size:13px;color:var(--muted)}.destination-group{display:flex;align-items:center;flex-shrink:0}.destination-track .destination-item{display:flex;align-items:center;gap:34px;margin:0;padding:0 17px;color:var(--muted);white-space:nowrap}.destination-item i{font-style:normal;color:var(--blue);font-size:11px}.work-section{padding-top:45px}.welcome-bottom{padding-top:24px;padding-bottom:24px}.destination-track:hover .destination-loop{animation-play-state:paused}@media(max-width:700px){.destination-track{padding:14px 0}.destination-track .destination-loop{font-size:12px}.destination-track .destination-item{gap:24px;padding:0 12px}.work-section{padding-top:35px}} /* Keep every destination fully visible at all viewport widths. */ .destination-track{overflow:visible;padding:17px 18px}.destination-track .destination-loop{width:100%;animation:none;justify-content:center}.destination-group{flex-wrap:wrap;justify-content:center;gap:14px 0;max-width:1440px}.destination-track .destination-item{padding:0 15px;gap:30px;line-height:1.5}.destination-item:last-child i{display:none}@media(max-width:700px){.destination-track{padding:16px 12px}.destination-track .destination-item{padding:0 9px;gap:18px;font-size:12px}} /* Continuous text flow with soft viewport edges. */ .destination-track{overflow:hidden;padding:17px 0;mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}.destination-track .destination-loop{width:max-content;justify-content:flex-start;animation:marquee 32s linear infinite;will-change:transform}.destination-group{flex-wrap:nowrap;max-width:none;gap:0}.destination-track .destination-item{padding:0 18px;gap:36px;flex-shrink:0;white-space:nowrap}.destination-item:last-child i{display:inline}.destination-track:hover .destination-loop{animation-play-state:paused}@media(max-width:700px){.destination-track{padding:16px 0;mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent)}.destination-track .destination-loop{animation-duration:26s}.destination-track .destination-item{padding:0 13px;gap:26px;font-size:12px}}@media(prefers-reduced-motion:reduce){.destination-track{mask-image:none;overflow:visible;padding:16px}.destination-track .destination-loop{animation:none;width:100%}.destination-group{flex-wrap:wrap;justify-content:center}.destination-group[aria-hidden="true"]{display:none}} /* Phone-first hierarchy, including tablets in portrait. */ @media(max-width:900px){ .wrap,.creative-opening{width:calc(100% - 40px)}.studio-nav{height:78px;gap:18px}.studio-nav .brand-logo{width:145px;max-height:42px}.studio-nav .wordmark small{display:none}.studio-nav nav{gap:15px;font-size:12px}.studio-nav nav>a:nth-child(2){display:none}.nav-project{padding:12px 15px;font-size:11px}.nav-project span{margin-left:9px}.hero{padding-top:20px}.opening-note{font-size:8px;line-height:1.5;gap:20px}.opening-note>span:first-child{max-width:180px}.opening-note>span:last-child{display:none}.welcome-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:30px 0 20px}.hero .welcome-message h1{font-size:clamp(48px,12.9vw,86px);line-height:1.01;letter-spacing:-.055em}.welcome-message>p{font-size:16px;line-height:1.55;max-width:460px;margin:23px 0}.welcome-message .opening-work{margin-top:0;font-size:14px;padding-bottom:12px;gap:35px}.welcome-tags{margin-top:24px;gap:18px;font-size:8px}.welcome-dashain img{width:230px;max-width:65vw}.welcome-bottom{padding:20px 0 20px 20px;font-size:8px;gap:15px}.welcome-bottom>span:not(.scroll-thread){max-width:150px}.destination-track{padding:14px 0}.work-section{padding-top:35px;padding-bottom:50px}.work-kicker{font-size:8px;gap:15px}.work-kicker>span:last-child{max-width:140px;text-align:right}.work-display{padding:25px 0 20px;gap:12px;align-items:center}.work-display h2{font-size:clamp(65px,19vw,130px);white-space:nowrap;line-height:.95}.work-count-stamp{transform:none;border:0;border-left:1px solid var(--line);padding:8px 0 8px 14px;gap:4px;flex-direction:column;align-items:start;min-width:65px}.work-count-stamp strong{font-size:32px;line-height:1}.work-count-stamp>span{font-size:7px;line-height:1.35}.work-opening-bottom{margin:5px 0 22px;display:block}.work-opening-bottom p{font-size:15px;line-height:1.5}.work-opening-bottom>span{display:none}.work-controls{margin-top:0;padding:17px 0;gap:15px;align-items:stretch}.work-tabs{gap:8px;display:flex;flex-wrap:wrap}.work-tabs button{margin:0;border:1px solid var(--line)!important;border-radius:22px;padding:9px 12px;font-size:11px;white-space:normal;box-shadow:none!important}.work-tabs button.active-filter{background:var(--blue)!important;color:white!important;border-color:var(--blue)!important}.work-controls input{width:100%;font-size:14px;padding:12px 0}.gallery-view-switch{justify-content:flex-start;gap:22px;margin-top:16px}.gallery-view-switch button{font-size:12px}.archive-meta{font-size:9px;margin:16px 0 22px}.archive-meta>span:last-child{display:none}.project-grid{grid-template-columns:1fr;gap:32px}.project-card{padding:0!important}.project-art{height:auto;min-height:290px;aspect-ratio:1/1;padding:28px}.project-caption{margin-top:10px}.project-caption h3{font-size:17px}.project-category{font-size:11px}.project-number{font-size:10px}.project-grid.index-view .project-art{aspect-ratio:auto;min-height:0;height:75px!important}.project-grid.index-view .project-card{padding:16px 0!important}.studio-manifesto h2{font-size:clamp(42px,10vw,75px)}.studio-manifesto{display:block}.studio-side-note{display:flex;align-items:center;gap:20px;width:auto;margin-top:25px}.studio-emblem{width:60px;height:60px;margin:0}.studio-detail{grid-template-columns:1fr;gap:18px}.studio-detail p{font-size:20px;line-height:1.5}.creative-services{grid-template-columns:1fr;gap:30px}.creative-service h3{font-size:34px;min-height:0;margin:20px 0}.service-symbol{height:210px}.monthly-package{grid-template-columns:1fr;gap:22px}.brief-builder{grid-template-columns:1fr;gap:25px}.contact-finale h2{font-size:clamp(52px,13vw,90px)}.contact-bottom{display:block}.contact-bottom>a{margin-top:20px;justify-content:space-between;font-size:21px} } @media(max-width:380px){.wrap,.creative-opening{width:calc(100% - 32px)}.studio-nav .brand-logo{width:122px}.studio-nav nav{gap:10px}.nav-project{padding:11px 12px;font-size:10px}.nav-project span{display:none}.work-display h2{font-size:18vw}.work-count-stamp{min-width:58px;padding-left:10px}.welcome-dashain img{width:210px}} .work-controls{justify-content:flex-end}.project-grid{margin-top:28px}.project-caption h3{margin-top:0} .welcome-dashain img{max-width:510px}@media(max-width:900px){.welcome-dashain img{width:300px;max-width:82vw}}@media(max-width:380px){.welcome-dashain img{width:270px;max-width:85vw}} /* Every repeated marquee group fills at least one viewport. */ .destination-track .destination-group{min-width:100vw;justify-content:space-around;flex:0 0 auto}.destination-track .destination-loop{gap:0}.destination-track .destination-item{flex:0 0 auto}.destination-track .destination-loop{animation-name:destination-flow}@keyframes destination-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.destination-track .destination-group{min-width:0;flex-wrap:wrap}.destination-track .destination-loop{animation:none}} #hero-title { position: relative; letter-spacing: -0.04em; color: #0f172a; line-height: 1.04; font-weight: 400; user-select: none; } #hero-title.tech-ready { color: transparent !important; } #hero-title.tech-ready * { color: transparent !important; } .tech-text-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .tech-word { color: var(--orange); font-weight: inherit; } .graphy-word { color: var(--blue); font-weight: inherit; } .hero-dot, .hero-square-dot { color: var(--blue); display: inline-block; } .hero .welcome-message h1 { font-size: clamp(52px, 6.5vw, 98px); line-height: 1.04; } .destination-track{position:relative;mask-image:none;overflow:hidden;padding:23px 0}.destination-track .destination-loop{animation:none!important;display:flex;width:max-content;gap:0;user-select:none;will-change:transform}.destination-track .destination-group{min-width:0;display:flex;flex-wrap:nowrap;justify-content:flex-start;flex:0 0 auto}.destination-track .destination-item{font-size:16px;padding:0 30px;gap:60px;line-height:1.2;color:var(--muted)}.destination-item i{font-size:13px}.destination-track:before,.destination-track:after{content:"";position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:2}.destination-track:before{left:0;background:linear-gradient(to right,#fff,transparent)}.destination-track:after{right:0;background:linear-gradient(to left,#fff,transparent)}.destination-item:hover{color:var(--blue)}@media(max-width:700px){.destination-track{padding:19px 0}.destination-track .destination-item{font-size:14px;padding:0 20px;gap:40px}}@media(prefers-reduced-motion:reduce){.destination-track .destination-loop{width:100%;transform:none!important}.destination-track .destination-group{flex-wrap:wrap;justify-content:center;gap:15px}.destination-track:before,.destination-track:after{display:none}} .flex-carousel{position:relative;width:100%;height:560px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;overscroll-behavior:contain;margin-top:20px}.flex-carousel[hidden]{display:none}.flex-carousel[data-hover="open"]{cursor:zoom-in}.flex-carousel[data-hover="close"]{cursor:zoom-out}.flex-carousel[data-dragging]{cursor:grabbing}.flex-carousel-caption{position:absolute;left:15px;right:15px;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;pointer-events:none;z-index:2;font-size:15px}.flex-carousel-caption>span:last-child{font-size:11px;color:var(--muted)}.carousel-mode #gallery-grid{display:none}.flex-carousel:focus-visible{outline:2px solid var(--blue);outline-offset:3px}@media(max-width:900px){.flex-carousel{height:440px}.flex-carousel-caption{font-size:13px;bottom:12px}} /* Full-screen welcome: headline and seasonal art occupy the opening viewport. */ @media(min-width:901px){.hero{min-height:calc(100svh - 100px);display:flex;flex-direction:column;padding-top:26px}.hero .creative-opening{flex:1;display:flex;flex-direction:column}.welcome-grid{flex:1;grid-template-columns:1.35fr 1fr;align-items:center;padding:35px 0;gap:4%;min-height:500px}.hero .welcome-message h1{font-size:clamp(85px,8vw,145px);line-height:1.02}.welcome-dashain img{width:100%;max-width:620px;max-height:calc(100svh - 230px);object-fit:contain}.welcome-message>p{font-size:18px;max-width:465px;margin:35px 0 25px}.welcome-bottom{margin-top:auto;padding:22px 0}.destination-track{flex-shrink:0}.work-section{padding-top:65px}} @media(max-width:900px){.hero{min-height:calc(100svh - 78px)}.welcome-grid{gap:15px;padding-bottom:20px}.welcome-dashain img{width:clamp(250px,65vw,410px);max-width:85vw}.welcome-message>p{margin:22px 0}.hero .welcome-message h1{font-size:clamp(48px,12.9vw,100px)}} .flex-carousel[hidden]{display:none}.gallery-view-switch{flex-wrap:wrap}.gallery-view-switch button{cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:24px}.gallery-view-switch button.is-active{background:var(--blue);color:white;border-color:var(--blue)} /* A quiet festival pattern across the entire welcome screen. */ .hero{position:relative;isolation:isolate;background-image:url("../assets/seasonal/mandala-pattern.svg");background-size:640px 640px;background-position:center top;background-repeat:repeat}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.63);pointer-events:none}.hero .creative-opening,.hero .opening-note,.hero .welcome-bottom{position:relative}.welcome-dashain{mix-blend-mode:multiply}.destination-track{background:rgba(255,255,255,.8)}@media(max-width:900px){.hero{background-size:420px 420px}} .welcome-dashain{mix-blend-mode:normal}.welcome-dashain img{height:auto;object-fit:contain;border-radius:18px}@media(min-width:901px){.welcome-dashain img{max-width:720px;width:100%}.welcome-grid{grid-template-columns:1.15fr 1.1fr}}@media(max-width:900px){.welcome-dashain img{width:100%;max-width:620px}} .welcome-dashain{align-self:start;padding-top:12px}.welcome-dashain img{border-radius:0;background:transparent}@media(min-width:901px){.welcome-grid{align-items:start;padding-top:50px}.welcome-message{padding-top:35px}}@media(max-width:900px){.welcome-dashain{padding-top:0}} /* Desktop composition; keep the approved mobile layout. */ @media(min-width:901px){ .welcome-grid{grid-template-columns:1.3fr 1fr;gap:4%;align-items:center;padding:24px 0;min-height:0} .welcome-message{padding-top:0;padding-bottom:20px;min-width:0} .hero .welcome-message h1{font-size:clamp(54px,5.2vw,96px);line-height:1.06} .welcome-dashain{align-self:center;padding-top:0;min-width:0} .welcome-dashain img{width:100%;max-width:660px;max-height:60svh;object-fit:contain} .welcome-message>p{margin:28px 0 22px;font-size:17px} .welcome-bottom{padding:18px 0} } @media(min-width:901px){ .hero .creative-opening{justify-content:flex-start} .welcome-grid{flex:0 0 auto;display:grid;margin-top:clamp(28px,5svh,65px);padding:0 0 32px;align-items:center} .welcome-bottom{margin-top:auto} .hero .welcome-message h1{margin-top:0} .welcome-dashain img{max-height:52svh} } @media(min-width:901px){.welcome-grid{grid-template-columns:1.15fr 1.15fr;gap:3%}.welcome-dashain{width:100%}.welcome-dashain img{width:112%;max-width:none;max-height:65svh;transform:translateX(-4%)}.hero .welcome-message h1{font-size:clamp(60px,5.8vw,112px)}} @media(min-width:901px){ .hero{min-height:0;height:auto} .hero .creative-opening{flex:none} .welcome-grid{margin-top:28px;padding-bottom:18px} .welcome-bottom{margin-top:10px;padding:18px 0} .welcome-dashain img{max-height:560px} } @media(min-width:901px){ .hero{min-height:calc(100svh - 100px);display:flex;flex-direction:column} .hero .creative-opening{flex:1;display:flex;flex-direction:column} .welcome-grid{flex:1;margin-top:0;padding:32px 0;align-content:center;align-items:center;grid-template-columns:1.15fr 1.15fr} .welcome-dashain img{max-height:68svh;width:112%} .hero .welcome-message h1{font-size:clamp(64px,6.05vw,116px)} .welcome-bottom{margin-top:0;flex-shrink:0} .destination-track{flex-shrink:0} } .technology-section{padding:85px 0}.technology-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:40px 0}.technology-heading h2{font-size:clamp(42px,5.5vw,82px);font-weight:400;letter-spacing:-.055em;line-height:1.05;margin:0}.technology-heading h2 span{color:var(--blue)}.technology-heading>p{max-width:280px;color:var(--muted);line-height:1.6}.technology-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.technology-services>a{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}.technology-services>a:hover{border-color:var(--blue);transform:translateY(-4px)}.tech-number{font-size:11px;color:var(--blue);letter-spacing:.05em}.technology-services h3{font-size:27px;font-weight:400;letter-spacing:-.035em;margin:45px 0 16px}.technology-services p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 28px}.tech-link{margin-top:auto;font-size:13px;color:var(--blue)}.package-period{line-height:1.6}.monthly-package p{max-width:480px}@media(max-width:900px){.technology-section{padding:50px 0}.technology-heading{display:block;margin:28px 0}.technology-services{grid-template-columns:1fr;gap:16px}.technology-services h3{margin-top:25px}.technology-services>a{padding:24px}} /* Seasonal kite frame keeps the package price at the heart of the artwork. */ .package-offer{align-items:center}.kite-package{position:relative;width:100%;max-width:510px;aspect-ratio:1;margin:-20px 0 8px}.kite-package>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;animation:kite-drift 6s ease-in-out infinite}.kite-package-copy{position:absolute;left:28%;top:38%;width:44%;height:28%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.kite-package .package-price{font-size:clamp(32px,3.3vw,48px);line-height:1.1;white-space:nowrap}.kite-package .package-price small{display:block;font-size:12px;letter-spacing:.12em;margin-bottom:8px}.kite-package .package-period{font-size:12px;margin:10px 0 0;line-height:1.5}@keyframes kite-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@media(max-width:900px){.kite-package{max-width:430px;margin:0}.kite-package .package-price{font-size:clamp(30px,8vw,44px)}.kite-package .package-period{font-size:11px}}@media(prefers-reduced-motion:reduce){.kite-package>img{animation:none}} .contact-stepper{border:1px solid var(--line);border-radius:20px;padding:32px;background:#fff}.stepper-progress{display:flex;align-items:center;margin-bottom:35px}.stepper-progress button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--muted);flex-shrink:0;cursor:pointer}.stepper-progress button.is-current,.stepper-progress button.is-complete{background:var(--blue);border-color:var(--blue);color:white}.stepper-progress>span{flex:1;height:2px;background:var(--line);margin:0 12px;transition:background .3s}.stepper-progress>span.is-complete{background:var(--blue)}.stepper-panel[hidden],.stepper-navigation button[hidden]{display:none}.stepper-panel h3{font-size:25px;letter-spacing:-.03em;font-weight:400;margin:0 0 25px}.stepper-panel small{display:block;color:var(--muted);margin-top:18px;font-size:12px}.stepper-navigation{display:flex;justify-content:space-between;gap:20px;margin-top:32px}.stepper-navigation button{border:0;padding:13px 23px;border-radius:30px;cursor:pointer;font-size:14px}.stepper-navigation #brief-next{background:var(--blue);color:white;margin-left:auto}.stepper-navigation #brief-back{background:transparent;color:var(--muted);padding-left:0}.contact-stepper button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}@media(max-width:700px){.contact-stepper{padding:24px 20px}.stepper-panel .brief-fields{grid-template-columns:1fr}.stepper-panel h3{font-size:23px}} .tech-accordion{display:flex;gap:14px;min-height:450px}.tech-panel{flex:1;min-width:0;border-radius:18px;background:#f0f3ff;border:1px solid #dce3ff;overflow:hidden;transition:flex .6s cubic-bezier(.22,1,.36,1),background .4s;position:relative}.tech-panel.is-open{flex:2.5;background:var(--blue);color:white}.tech-panel-toggle{display:flex;flex-direction:column;align-items:flex-start;gap:28px;background:none;border:0;color:inherit;width:100%;text-align:left;padding:28px;cursor:pointer}.tech-panel-toggle>span:first-child{font-size:11px;letter-spacing:.06em;opacity:.7}.tech-panel-toggle strong{font-size:clamp(22px,2.2vw,34px);line-height:1.15;font-weight:400;letter-spacing:-.04em}.tech-expand{align-self:flex-end;font-size:25px}.tech-panel-detail{padding:0 28px 28px}.tech-panel-detail[hidden]{display:none}.tech-panel-detail p{font-size:15px;line-height:1.65;max-width:440px;color:#ffffffce}.tech-panel-detail>a{display:inline-block;font-size:14px;border-bottom:1px solid #ffffff70;padding:12px 0;color:white}.tech-art{height:160px;position:relative;display:grid;place-items:center;margin-bottom:20px}.tech-window{width:78%;height:140px;border:1px solid #ffffff70;border-radius:8px;background:#ffffff12;transform:rotate(-3deg);transition:transform .6s}.tech-panel:hover .tech-window{transform:rotate(0)}.tech-window-bar{height:24px;border-bottom:1px solid #ffffff50;display:flex;align-items:center;gap:5px;padding:0 10px}.tech-window-bar i{width:4px;height:4px;border-radius:50%;background:white}.tech-window-layout{display:flex;gap:12px;height:115px;padding:14px}.tech-window-nav{width:18%;background:#ffffff25;border-radius:3px}.tech-window-blocks{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.tech-window-blocks i{background:#ffffff30;border-radius:3px}.tech-art-static .tech-window-blocks i:first-child{grid-column:1/-1}.tech-art-dynamic .tech-window-blocks i:last-child{background:#ffffff80}.tech-art-systems .tech-window-blocks{grid-template-columns:repeat(4,1fr);align-items:end}.tech-art-systems .tech-window-blocks i{height:45%}.tech-art-systems .tech-window-blocks i:nth-child(2){height:80%}.tech-art-systems .tech-window-blocks i:nth-child(3){height:60%}.tech-art-systems .tech-window-blocks i:last-child{height:100%}.tech-art-orbit{position:absolute;width:40px;height:40px;border:1px solid #ffffff60;border-radius:50%;right:0;top:0}.tech-panel-toggle:focus-visible{outline:2px solid currentColor;outline-offset:-5px}@media(max-width:900px){.tech-accordion{flex-direction:column;min-height:0}.tech-panel-toggle{padding:24px;gap:16px}.tech-panel-toggle strong{font-size:27px}.tech-expand{position:absolute;right:24px;top:22px}.tech-panel-detail{padding:0 24px 24px}.tech-art{height:150px}}@media(prefers-reduced-motion:reduce){.tech-panel,.tech-window{transition:none}} /* Refined service chapters: bold design, precise tech, a focused monthly offer. */ .studio-chapter{position:relative;overflow:hidden;padding:72px 0 80px}.studio-chapter .wrap{position:relative}.division-mark{font-size:24px;line-height:1;color:inherit;letter-spacing:-.08em}.studio-chapter .studio-manifesto{padding:42px 0 48px}.creative-services{gap:18px}.creative-service{border:1px solid #ffffff45;border-radius:16px;padding:25px;background:#ffffff08;transition:background .3s,transform .3s}.creative-service:hover{background:#ffffff16;transform:translateY(-5px)}.creative-service h3{font-size:clamp(26px,2.8vw,40px);min-height:86px;margin:26px 0}.creative-service .service-index{color:#ffffffb0}.service-symbol{height:215px;border-radius:12px;background:#fff;position:relative}.service-symbol:after{content:"";position:absolute;width:125px;height:125px;border:1px solid #0343fa12;border-radius:50%;right:-35px;bottom:-35px;pointer-events:none}.creative-service .service-link{margin-top:20px;border-top:1px solid #ffffff35;padding-top:18px}.technology-section{padding:85px 0 75px}.technology-heading{margin:34px 0 38px}.tech-panel{box-shadow:0 8px 30px #0343fa05}.tech-panel.is-open{background:linear-gradient(135deg,#0343fa,#002dc5)}.tech-art{height:185px}.tech-window{height:160px;box-shadow:0 20px 25px #001c7225}.tech-window-layout{height:135px}.tech-panel-toggle{gap:24px}.monthly-package{border:1px solid #dce3ff;border-radius:24px;background:linear-gradient(120deg,#f4f6ff,#fff 65%);padding:48px;gap:32px;align-items:center;margin-top:20px;margin-bottom:80px;overflow:hidden}.monthly-package:before{display:none}.monthly-package h2{font-size:clamp(42px,4.8vw,70px);margin:24px 0}.monthly-package h2>span{color:var(--blue)}.package-inclusions{display:flex;gap:35px;border-top:1px solid #dce3ff;border-bottom:1px solid #dce3ff;padding:22px 0;margin:26px 0}.package-inclusions>div{display:flex;flex-direction:column;gap:6px}.package-inclusions strong{font-size:38px;line-height:1;font-weight:400;color:var(--blue);letter-spacing:-.06em}.package-inclusions span{font-size:12px;color:var(--muted)}.monthly-package .package-story>p{font-size:15px;max-width:350px}.package-offer>a{padding:16px 28px}.kite-package{margin:-20px 0 0}.monthly-package .package-price{font-weight:500}@media(max-width:900px){.studio-chapter{padding:48px 0}.studio-chapter .studio-manifesto{padding:30px 0}.creative-service{padding:24px}.creative-service h3{min-height:0}.technology-section{padding:50px 0}.monthly-package{padding:28px 22px;margin-bottom:50px;border-radius:18px;gap:12px}.monthly-package h2{font-size:46px}.package-inclusions{gap:40px;margin:22px 0;padding:18px 0}.kite-package{margin:0}.division-mark{font-size:20px}}@media(prefers-reduced-motion:reduce){.creative-service{transition:none}} /* Final editorial pass: consistent spacing, useful content, restrained surfaces. */ .studio-chapter{padding:64px 0;background:var(--blue)}.studio-manifesto h2{font-size:clamp(44px,5.5vw,78px)}.studio-chapter .studio-manifesto{padding:35px 0 42px}.creative-services{gap:32px}.creative-service{border:0;border-top:1px solid #ffffff60;border-radius:0;padding:24px 0;background:none}.creative-service:hover{background:none;transform:none}.creative-service h3{font-size:clamp(25px,2.7vw,36px);min-height:80px;margin:24px 0}.service-symbol{height:120px;background:none;place-items:start;border-radius:0}.service-symbol svg{width:145px;height:115px;stroke:white}.service-symbol .symbol-sheet{fill:var(--blue)}.service-symbol:after{display:none}.creative-service .service-link{border:0;margin-top:12px;padding-top:14px}.technology-section{padding:70px 0}.technology-heading{margin:32px 0}.technology-heading h2{font-size:clamp(42px,5.4vw,76px)}.technology-heading>p{font-size:14px;max-width:220px}.tech-accordion{display:block;min-height:0;border-top:1px solid var(--line)}.tech-panel,.tech-panel.is-open{background:white;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;transition:none}.tech-panel-toggle{display:grid;grid-template-columns:130px 1fr 30px;align-items:center;gap:24px;padding:27px 0}.tech-panel-toggle strong{font-size:clamp(24px,2.8vw,36px)}.tech-panel-toggle>span:first-child{color:var(--muted);opacity:1}.tech-expand{align-self:center;transition:transform .3s;color:var(--blue)}.tech-panel.is-open .tech-expand{transform:rotate(90deg)}.tech-panel-detail{padding:0 50px 28px 154px}.tech-panel-detail p{color:var(--muted);font-size:16px;margin:0 0 12px;max-width:580px}.tech-panel-detail>a{color:var(--blue);border-bottom:1px solid #0343fa40;padding:8px 0}.monthly-package{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:white;padding:45px 0;margin-top:0;margin-bottom:70px;grid-template-columns:1.2fr 1fr}.monthly-package h2{font-size:clamp(44px,5vw,72px)}.package-inclusions{border:0;padding:0;gap:28px;margin:24px 0}.package-inclusions strong{font-size:28px}.kite-package{max-width:400px;margin:-15px 0}.kite-package>img{animation:none}.package-offer>a{font-size:13px}.contact-finale h2{font-size:clamp(44px,6vw,84px);line-height:1.1}.contact-stepper{border-radius:10px;box-shadow:none}.chapter-line,.work-kicker{font-size:11px;letter-spacing:.04em}.hero:before{background:rgba(255,255,255,.8)}.gallery-view-switch button{border-radius:5px}.project-art{border-radius:0}.work-section{padding-bottom:65px}@media(max-width:900px){.studio-chapter{padding:45px 0}.creative-services{gap:22px}.creative-service h3{min-height:0;font-size:30px;margin:20px 0}.service-symbol{height:100px}.service-symbol svg{height:95px;width:125px}.technology-section{padding:48px 0}.technology-heading h2{font-size:clamp(36px,8.7vw,62px)}.tech-panel-toggle{grid-template-columns:1fr 25px;padding:24px 0;gap:12px}.tech-panel-toggle>span:first-child{grid-column:1/-1;font-size:10px}.tech-panel-toggle strong{font-size:25px}.tech-expand{position:static;grid-column:2;grid-row:2}.tech-panel-detail{padding:0 0 24px}.tech-panel-detail p{font-size:15px}.monthly-package{padding:35px 0;grid-template-columns:1fr;margin-bottom:45px}.package-offer{width:100%}.kite-package{max-width:370px}.contact-finale h2{font-size:clamp(38px,9vw,64px)}.technology-heading>p{max-width:none}.contact-stepper{padding:24px 18px}} /* Responsive spacing and artwork sizing across the complete page. */ .wrap{width:calc(100% - 64px);max-width:1440px;margin-left:auto;margin-right:auto}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.project-grid:not(.index-view) .project-card{grid-column:auto;grid-row:auto;margin:0;padding:0!important;align-self:start}.project-grid:not(.index-view) .project-art{height:auto!important;min-height:0;aspect-ratio:1;padding:20px}.project-grid:not(.index-view) .project-caption{padding-top:12px;margin-top:0}.project-caption h3{font-size:16px;line-height:1.4;margin-top:0}.contact-signature{max-width:650px;margin:0 auto!important}.contact-bottom{margin-bottom:35px}.contact-finale h2{margin:32px 0}.brief-builder{margin-bottom:30px}.contact-finale{padding-bottom:35px}.contact-signature img{width:100%;height:auto}.technology-section{padding:55px 0}.monthly-package{margin-bottom:50px}.work-section{padding-top:50px;padding-bottom:50px}.tech-panel-toggle{min-height:80px}.stepper-navigation button,.gallery-view-switch button{min-height:44px} @media(min-width:701px) and (max-width:1100px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-dashain img{max-height:350px}.welcome-grid{gap:20px}.creative-services{gap:20px}.brief-builder{grid-template-columns:1fr 1.6fr;gap:28px}} @media(max-width:700px){.wrap{width:calc(100% - 36px)}.project-grid{grid-template-columns:1fr;gap:26px}.project-grid:not(.index-view) .project-art{aspect-ratio:1;max-height:410px;padding:16px}.hero{min-height:0}.welcome-grid{padding-top:24px;padding-bottom:20px;gap:16px}.welcome-message{padding-bottom:0}.welcome-message>p{margin:20px 0}.welcome-dashain img{max-height:300px;width:100%;object-fit:contain}.welcome-bottom{padding:16px 0;margin-top:8px}.work-section{padding:35px 0}.studio-chapter{padding:35px 0}.studio-chapter .studio-manifesto{padding:25px 0}.technology-section{padding:35px 0}.technology-heading{margin:24px 0}.monthly-package{padding:28px 0;margin-bottom:35px}.package-inclusions{margin:18px 0}.kite-package{max-width:300px}.contact-finale{padding:35px 0 25px}.contact-finale h2{margin:25px 0}.brief-builder{grid-template-columns:1fr;gap:18px}.contact-bottom{margin-bottom:22px}.contact-signature{max-width:350px}.gallery-view-switch{gap:8px}.gallery-view-switch button{font-size:11px;padding:10px}.contact-stepper input,.contact-stepper select,.contact-stepper textarea{font-size:16px}.brief-intro h3{margin-top:0}.technology-heading h2{overflow-wrap:normal}} /* Consistent final spacing and accessible field sizing. */ section[id]{scroll-margin-top:24px}.brief-fields input,.brief-fields select,.brief-fields textarea{max-width:100%;min-width:0}.tech-panel-toggle strong{overflow-wrap:anywhere}.package-story p{margin:22px 0 0}.stepper-panel .brief-fields{gap:20px}.contact-stepper{min-width:0}.contact-stepper label{min-width:0}.project-card:focus-visible{outline:2px solid var(--blue);outline-offset:6px}.brief-fields textarea{resize:vertical;min-height:120px}@media(max-width:700px){.studio-nav .brand-logo{max-width:145px}.technology-heading{margin-bottom:24px}.contact-signature{margin-top:10px!important}} /* Expressive details within the established blue-and-white layout. */ .studio-manifesto{position:relative}.studio-manifesto h2{position:relative;z-index:1}.creative-orbit{position:absolute;right:55px;top:20px;width:210px;height:210px;display:grid;place-items:center;color:white}.creative-orbit i{position:absolute;inset:0;border:1px solid #ffffff65;border-radius:50%;transform:rotate(-25deg) scaleY(.48)}.creative-orbit i:nth-child(2){transform:rotate(55deg) scaleY(.48)}.creative-orbit b{font-size:95px;font-weight:400;animation:creative-spin 30s linear infinite}.creative-service{position:relative}.creative-service:before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:white;transition:width .5s}.creative-service:hover:before{width:100%}.creative-service:hover .service-symbol svg{transform:rotate(-7deg) translateY(-4px)}.creative-service .service-link{display:flex;justify-content:space-between}.tech-panel-toggle strong{transition:transform .25s,color .25s}.tech-panel-toggle:hover strong{transform:translateX(8px);color:var(--blue)}.tech-panel.is-open{border-bottom-color:var(--blue)}.tech-panel-detail{animation:detail-enter .3s ease-out}.work-display h2{position:relative}.work-display h2:after{content:"";display:block;width:65px;height:3px;background:var(--blue);margin-top:22px}.package-story h2 span{position:relative;display:inline-block}.package-story h2 span:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;border-bottom:1px solid var(--blue);border-radius:50%;transform:rotate(-2deg)}.contact-stepper{position:relative;overflow:hidden}.contact-stepper:before{content:"";position:absolute;left:0;top:0;width:55px;height:3px;background:var(--blue)}.contact-finale h2 a{display:inline-flex;gap:16px;align-items:center}.contact-finale h2 a span{display:inline-block;transition:transform .3s}.contact-finale h2 a:hover span{transform:translate(7px,-7px)}@keyframes creative-spin{to{transform:rotate(360deg)}}@keyframes detail-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.creative-orbit{right:0;width:145px;height:145px}.creative-orbit b{font-size:65px}.studio-manifesto h2{max-width:75%}}@media(max-width:700px){.creative-orbit{width:85px;height:85px;top:24px;right:0}.creative-orbit b{font-size:40px}.studio-manifesto h2{max-width:83%;font-size:clamp(36px,9.2vw,55px)}.contact-finale h2 a{gap:8px}.tech-panel-toggle:hover strong{transform:none}}@media(prefers-reduced-motion:reduce){.creative-orbit b,.tech-panel-detail{animation:none}.tech-panel-toggle strong,.contact-finale h2 a span{transition:none}} .enquiry-art{display:block;width:100%;max-width:390px;height:auto;color:var(--blue);margin:24px 0 0}.enquiry-envelope{animation:enquiry-float 7s ease-in-out infinite}.contact-signature{max-width:1050px;width:100%;padding-top:12px;margin:0 auto!important}.contact-signature img{display:block;width:100%;height:auto;object-fit:contain}.contact-finale{overflow:visible;padding-bottom:40px}.contact-bottom{margin-bottom:24px}.brief-builder{grid-template-columns:1fr 1.25fr;align-items:start;gap:48px}.contact-stepper{padding:36px}.stepper-panel h3{font-size:27px}.brief-fields label{font-size:13px}.brief-fields input,.brief-fields select{min-height:46px}@keyframes enquiry-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-width:900px){.brief-builder{grid-template-columns:1fr;gap:22px}.brief-intro{display:flex;align-items:center;justify-content:space-between;gap:16px}.enquiry-art{width:160px;margin:0}.contact-signature{max-width:none}.contact-stepper{padding:26px 20px}}@media(max-width:450px){.enquiry-art{width:115px}.brief-intro h3{font-size:22px}.contact-signature{padding-top:10px}.contact-finale{padding-bottom:24px}}@media(prefers-reduced-motion:reduce){.enquiry-envelope{animation:none}} .tech-preview{border:1px solid #dce3ff;border-radius:9px;overflow:hidden;max-width:720px;background:#fff;margin:4px 0 24px;box-shadow:0 12px 30px #0343fa08;color:#172047}.preview-bar{height:30px;border-bottom:1px solid #e4e8f4;background:#f6f8ff;display:flex;align-items:center;gap:5px;padding:0 12px}.preview-bar>i{height:5px;width:5px;border-radius:50%;background:#9aa9cf}.preview-bar>span{margin-left:auto;font-size:8px;letter-spacing:.1em;color:#667391}.preview-site{padding:20px}.preview-site-nav{display:flex;justify-content:space-between;gap:12px;font-size:9px}.preview-site-nav b{color:var(--blue)}.preview-site-nav span{color:#667391}.preview-site-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0}.preview-site-hero strong{font-size:clamp(22px,3vw,36px);line-height:1.05;letter-spacing:-.04em;font-weight:400}.preview-button{display:inline-block;background:var(--blue);color:white;padding:7px 11px;border-radius:4px;font-size:9px;font-style:normal}.preview-site-hero .preview-button{display:table;margin-top:15px}.preview-globe{font-size:100px;line-height:1;color:var(--blue)}.preview-site-footer{display:flex;justify-content:space-between;border-top:1px solid #e4e8f4;padding-top:14px;font-size:10px;color:#667391}.preview-admin{display:grid;grid-template-columns:125px 1fr;min-height:210px}.preview-side{background:#f5f7ff;border-right:1px solid #e4e8f4;display:flex;flex-direction:column;gap:16px;padding:20px 15px;font-size:10px;color:#667391}.preview-side b{color:var(--blue)}.preview-editor,.preview-dashboard{padding:20px;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px}.preview-input{border:1px solid #e4e8f4;padding:12px;font-size:12px;margin:20px 0 14px;border-radius:4px}.preview-lines{display:flex;flex-direction:column;gap:8px}.preview-lines i{height:5px;background:#e9edf7;width:100%;border-radius:3px}.preview-lines i:last-child{width:65%}.preview-editor-bottom{display:flex;justify-content:space-between;margin-top:22px;font-size:9px;color:#667391}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-metrics>div{padding:12px;background:#f5f7ff;border-radius:5px}.preview-metrics small{font-size:9px;display:block;color:#667391}.preview-metrics b{font-size:24px;font-weight:400;color:var(--blue);display:block;margin-top:6px}.preview-table{margin-top:18px;font-size:10px}.preview-table>div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf0f8;gap:10px}.preview-table em{font-style:normal;color:var(--blue);font-size:9px}@media(max-width:700px){.tech-preview{margin-bottom:18px}.preview-admin{grid-template-columns:85px 1fr}.preview-side{padding:16px 10px;font-size:9px;gap:14px}.preview-editor,.preview-dashboard{padding:14px}.preview-metrics{gap:5px}.preview-metrics>div{padding:8px 5px}.preview-metrics small{font-size:8px}.preview-metrics b{font-size:20px}.preview-globe{font-size:75px}.preview-site{padding:16px}.preview-site-nav span{font-size:8px}.preview-site-footer{font-size:9px}.preview-toolbar{font-size:11px}} .tech-panel-toggle{list-style:none}.tech-panel-toggle::-webkit-details-marker{display:none}.tech-panel[open]{border-bottom-color:var(--blue)}.tech-panel[open] .tech-expand{transform:rotate(90deg)} .tech-accordion{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.tech-panel-toggle{cursor:default;padding:22px 0;display:flex;align-items:flex-start}.tech-panel-toggle:hover strong{transform:none;color:inherit}.tech-expand{display:none}.tech-panel-detail{padding:0 0 24px}.tech-panel-toggle strong{font-size:26px}.tech-preview{height:255px}.preview-admin{min-height:224px;grid-template-columns:85px 1fr}.preview-side{padding:18px 10px;font-size:9px}.preview-dashboard,.preview-editor{padding:14px}.preview-metrics{gap:5px}.preview-metrics>div{padding:8px 5px}.preview-site-hero strong{font-size:26px}.preview-globe{font-size:70px}.preview-site-nav span{font-size:8px}@media(max-width:1100px){.tech-accordion{grid-template-columns:1fr}.tech-preview{height:auto;max-width:720px}.preview-admin{grid-template-columns:125px 1fr}.tech-panel-toggle strong{font-size:27px}}@media(max-width:700px){.preview-admin{grid-template-columns:85px 1fr}} .work-types{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 20px}.work-types button{background:white;border:1px solid var(--line);border-radius:30px;padding:12px 18px;min-height:44px;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}.work-types button.active-filter{background:var(--blue);border-color:var(--blue);color:white}.work-types button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.project-type{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}@media(max-width:700px){.work-types{gap:7px;margin-top:18px}.work-types button{padding:10px 13px;font-size:12px}} .preview-site-nav b{font-size:12px;letter-spacing:-.035em}.preview-site-nav{align-items:center}.preview-bar>span{font-size:9px}.preview-side b{font-size:11px}.preview-input{font-size:11px}.preview-table{font-size:11px}.preview-table em{white-space:nowrap}.preview-site-hero strong{font-size:28px}.preview-editor .preview-lines i:first-child{height:35px;background:linear-gradient(90deg,#0343fa 0 24%,#edf1ff 24%);border-radius:4px}.preview-side span:first-of-type{color:var(--blue);font-weight:600}@media(max-width:700px){.preview-site-nav{flex-wrap:wrap;gap:6px}.preview-site-hero strong{font-size:25px}.preview-table{font-size:9px}.preview-side b{font-size:10px}.preview-bar>span{font-size:8px}} .tech-preview{height:325px}.preview-admin{min-height:294px}.preview-services{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.preview-services>div{border:1px solid #e4e8f4;padding:12px;border-radius:5px}.preview-services b{display:block;font-size:11px;font-weight:500}.preview-services span{display:block;font-size:9px;color:#667391;margin-top:5px}.preview-publish{display:grid;grid-template-columns:1fr auto;gap:10px;border-top:1px solid #edf0f8;margin-top:20px;padding-top:14px;font-size:10px}.preview-publish span{color:#667391}.preview-publish b{font-weight:500;color:var(--blue)}.preview-workflow{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:20px;border:1px solid #e4e8f4;padding:12px 8px;border-radius:5px;font-size:9px;color:#667391}.preview-workflow i{font-style:normal;color:var(--blue)}@media(max-width:1100px){.tech-preview{height:auto}.preview-admin{min-height:285px}}@media(max-width:700px){.preview-services{gap:7px}.preview-services>div{padding:10px}.preview-services b{font-size:10px}.preview-services span{font-size:8px}.preview-workflow{font-size:8px;padding:10px 5px}.tech-panel-toggle{padding:18px 0}.tech-panel-detail{padding-bottom:20px}} /* ========================================================================== illuugraphy × tech — Design Systems, Interactive Sandboxes & UI Specs ========================================================================== */ .tech-badge-sub { font-size: 11px !important; font-weight: 700; letter-spacing: 0.12em; background: var(--blue); color: white; padding: 3px 8px; border-radius: 4px; margin-left: 8px; } .hero-actions-row { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; } .opening-secondary-link { font-size: 14px; font-weight: 600; color: var(--blue); padding: 12px 20px; border: 1px solid #0343fa40; border-radius: 30px; transition: all 0.25s ease; } .opening-secondary-link:hover { background: #0343fa0c; border-color: var(--blue); transform: translateY(-2px); } .hero-character-stage { position: relative; width: 100%; max-width: 520px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .hero-character-img { width: 100%; max-width: 440px; height: auto; object-fit: contain; filter: drop-shadow(0 20px 32px rgba(3, 67, 250, 0.08)); animation: heroFloat 6s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } .tech-float-pill { position: absolute; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); display: flex; align-items: center; gap: 10px; z-index: 10; transition: transform 0.3s ease, border-color 0.3s ease; } .tech-float-pill:hover { transform: scale(1.04) translateY(-2px); border-color: #0343fa; } .tech-float-pill strong { display: block; font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; } .tech-float-pill small { display: block; font-size: 10px; color: #64748b; margin-top: 2px; } .pill-top-right { top: 10px; right: -10px; border-left: 3.5px solid #ff5500; } .pill-bottom-left { bottom: 25px; left: -20px; border-left: 3.5px solid #0343fa; } .pill-bottom-right { bottom: 10px; right: 10px; border-left: 3.5px solid #10b981; } .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5500; box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.7); animation: pulseTech 2s infinite; flex-shrink: 0; } @keyframes pulseTech { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 85, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 85, 0, 0); } } .badge-lang { background: #ecfdf5; color: #059669; font-size: 10px; font-weight: 800; padding: 4px 6px; border-radius: 6px; border: 1px solid #a7f3d0; white-space: nowrap; } @media(max-width: 900px) { .hero-character-stage { max-width: 360px; } .tech-float-pill { padding: 6px 10px; font-size: 10px; } .pill-top-right { top: 5px; right: -5px; } .pill-bottom-left { bottom: 10px; left: -10px; } .pill-bottom-right { bottom: -15px; right: 0; display: flex !important; } } .hero-metrics-quick { font-size: 11px; color: var(--blue); font-weight: 600; letter-spacing: 0.04em; } /* Card Shell Architecture */ .tech-project-card { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .tech-project-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(3, 67, 250, 0.1); border-color: #0343fa40; } .tech-project-card .project-art { height: 340px; padding: 0; border-radius: 8px; overflow: hidden; background: #f8fafc; border: 1px solid #e2e8f0; position: relative; } .project-art-shell { width: 100%; height: 100%; display: flex; flex-direction: column; } .project-art-bar { height: 28px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 9px; color: #64748b; } .shell-dots { display: flex; gap: 4px; } .shell-dots i { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; } .shell-badge { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 600; } .project-art-canvas { flex: 1; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffffff; } .project-art-canvas img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .tech-project-card:hover .project-art-canvas img { transform: scale(1.05); } .project-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .project-metric-pill { font-size: 9px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 2px 7px; border-radius: 20px; font-weight: 600; } .project-subtitle { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 6px 0 12px; } .project-stack-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .tech-stack-tag { font-size: 10px; font-family: ui-monospace, SFMono-Regular, monospace; background: #f1f5f9; color: #334155; padding: 3px 8px; border-radius: 4px; border: 1px solid #e2e8f0; } /* Systems Sandbox Tab Navigation */ .system-tabs-bar { display: flex; gap: 12px; margin: 35px 0 25px; flex-wrap: wrap; } .system-tab-btn { background: #ffffff; border: 1px solid var(--line); padding: 12px 20px; border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all 0.2s ease; } .system-tab-btn.is-active { background: var(--blue); color: white; border-color: var(--blue); } .system-interactive-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06); color: #0f172a; } .system-bar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #475569; } .system-dots { display: flex; gap: 6px; } .system-dots i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; } .system-dots i:nth-child(1) { background: #ef4444; } .system-dots i:nth-child(2) { background: #f59e0b; } .system-dots i:nth-child(3) { background: #10b981; } .system-status-pill { color: #059669; font-weight: 700; font-size: 10px; letter-spacing: 0.05em; } .system-uptime { color: #64748b; font-size: 10px; } .system-content-grid { display: grid; grid-template-columns: 210px 1fr; min-height: 480px; } .system-side-nav { background: #ffffff; border-right: 1px solid #e2e8f0; padding: 24px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; color: #475569; } .system-side-nav b { color: #0f172a; font-size: 14px; margin-bottom: 8px; } .system-side-nav .nav-active { color: #2563eb; font-weight: 700; background: #eff6ff; border: 1px solid #bfdbfe; padding: 8px 12px; border-radius: 8px; } .system-main-body { padding: 24px; background: #fafafa; } .system-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .system-kpi { background: #ffffff; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); } .system-kpi small { display: block; font-size: 10px; font-weight: 600; color: #64748b; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .system-kpi strong { display: block; font-size: 22px; font-weight: 800; color: #0f172a; } .system-kpi span { display: block; font-size: 10px; color: #64748b; margin-top: 4px; } .system-kpi .kpi-pos { color: #059669; font-weight: 700; } .system-kanban-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kanban-col { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; min-height: 280px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); } .kanban-header { display: block; font-size: 11px; font-weight: 700; color: #0f172a; margin-bottom: 12px; border-bottom: 1px solid #f1f5f9; padding-bottom: 6px; } .kanban-mini-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 10px; transition: all 0.2s ease; } .kanban-mini-card:hover { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } .kanban-mini-card.highlight { border-color: #86efac; background: #f0fdf4; } .kanban-mini-card b { display: block; font-size: 12.5px; font-weight: 700; color: #0f172a; } .kanban-mini-card small { display: block; font-size: 10.5px; color: #64748b; margin: 4px 0 8px; } .kanban-tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; } .kanban-tag.blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .kanban-tag.purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; } .kanban-tag.green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .kanban-tag.solid-green { background: #059669; color: #ffffff; } /* Mobile Simulator */ .mobile-sim-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding: 35px; align-items: center; } .mobile-sim-device { width: 280px; background: #0f172a; border: 6px solid #334155; border-radius: 36px; overflow: hidden; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25); margin: auto; } .mobile-notch { width: 80px; height: 18px; background: #020617; border-radius: 0 0 12px 12px; margin: 0 auto 10px; } .mobile-screen-content { padding: 12px 16px 20px; } .mobile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .mobile-head small { font-size: 8px; color: #94a3b8; } .mobile-head h4 { font-size: 14px; margin: 0; color: #fff; } .mobile-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; } .mobile-visa-banner { background: var(--blue); padding: 14px; border-radius: 12px; color: white; margin-bottom: 16px; } .visa-badge { font-size: 8px; letter-spacing: 0.05em; opacity: 0.85; } .mobile-visa-banner h3 { font-size: 15px; margin: 4px 0 2px; } .mobile-visa-banner p { font-size: 10px; opacity: 0.9; margin: 0 0 10px; } .mobile-btn-pill { background: rgba(0, 0, 0, 0.3); font-size: 9px; padding: 6px 10px; border-radius: 6px; text-align: center; font-weight: 600; } .mobile-steps { font-size: 11px; } .mobile-steps b { display: block; font-size: 11px; margin-bottom: 8px; color: #cbd5e1; } .step-item { padding: 6px 0; border-bottom: 1px solid #1e293b; color: #94a3b8; font-size: 10px; } .step-item.done { color: #34d399; } .step-item.active { color: #60a5fa; font-weight: 600; } .mobile-sim-features h3 { font-size: 28px; font-weight: 800; margin: 0 0 12px; color: #0f172a; } .mobile-sim-features p { font-size: 15px; line-height: 1.6; color: #64748b; max-width: 540px; } .mobile-feat-list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; } .mobile-feat-list li { font-size: 13.5px; line-height: 1.5; color: #475569; } .mobile-feat-list strong { color: #2563eb; } .mobile-cta-btn { display: inline-block; background: var(--blue); color: white; padding: 14px 24px; border-radius: 30px; font-size: 13px; font-weight: 600; } /* Web View Simulator */ .web-preview-mockup { padding: 40px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; } .web-kicker { font-size: 10px; letter-spacing: 0.1em; color: #2563eb; font-weight: 700; } .web-mockup-hero h3 { font-size: clamp(26px, 3.5vw, 42px); color: #0f172a; margin: 12px 0; font-weight: 800; line-height: 1.15; } .web-mockup-hero p { font-size: 16px; color: #64748b; max-width: 600px; line-height: 1.6; } .web-search-bar { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 30px; padding: 6px 6px 6px 20px; max-width: 580px; margin-top: 24px; font-size: 13px; color: #475569; } .web-search-bar button { background: var(--blue); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; } .web-mockup-stats { display: flex; gap: 40px; margin-top: 35px; border-top: 1px solid #e2e8f0; padding-top: 24px; } .web-mockup-stats strong { display: block; font-size: 26px; font-weight: 800; color: #0f172a; } .web-mockup-stats small { font-size: 11px; color: #64748b; } /* Packages Grid */ .tech-packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tech-card-package { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 24px; display: flex; flex-direction: column; position: relative; } .tech-card-package.featured-pkg { border-color: var(--blue); box-shadow: 0 16px 36px rgba(3, 67, 250, 0.12); } .pkg-badge { position: absolute; top: -12px; left: 24px; background: #0f172a; color: white; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 12px; } .pkg-badge.highlight { background: var(--blue); } .tech-card-package h3 { font-size: 24px; margin: 12px 0 10px; font-weight: 600; } .tech-card-package p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; } .pkg-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; font-size: 13px; color: #334155; } .pkg-cta { margin-top: auto; text-align: center; padding: 13px; border: 1px solid var(--line); border-radius: 30px; font-size: 13px; font-weight: 600; color: #111; transition: all 0.2s; } .pkg-cta:hover { background: #f1f5f9; } .pkg-cta.primary { background: var(--blue); color: white; border-color: var(--blue); } .pkg-cta.primary:hover { background: #111; } /* Modal Specs Viewer */ .tech-viewer-layout { display: grid; grid-template-columns: 1.4fr 1fr; } .tech-viewer-art { background: #f8fafc; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 520px; border-right: 1px solid #e2e8f0; } .viewer-art-frame { width: 100%; max-height: 480px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border: 1px solid #e2e8f0; } .viewer-art-frame img { width: 100%; height: auto; max-height: 460px; object-fit: contain; } .viewer-metrics-banner { margin-top: 18px; font-size: 11px; font-weight: 700; background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; padding: 8px 16px; border-radius: 20px; } .tech-viewer-info { padding: 35px 30px; background: #ffffff; overflow-y: auto; } .viewer-subtitle { font-size: 14px; color: var(--muted); margin-top: 4px; } .viewer-stack-section { margin: 20px 0; border-top: 1px solid var(--line); padding-top: 16px; } .viewer-stack-section h4, .viewer-highlights-section h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .modal-stack-wrap { display: flex; gap: 6px; flex-wrap: wrap; } .modal-stack-chip { font-size: 11px; font-family: ui-monospace, SFMono-Regular, monospace; background: #0343fa10; color: var(--blue); padding: 4px 10px; border-radius: 4px; font-weight: 600; } .viewer-highlights-section { border-top: 1px solid var(--line); padding-top: 16px; } .viewer-highlights-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .viewer-highlights-list li { font-size: 13px; line-height: 1.5; color: #334155; } .highlight-bullet { color: var(--blue); margin-right: 6px; } .viewer-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; } .viewer-spec-grid dt { font-size: 10px; color: var(--muted); text-transform: uppercase; } .viewer-spec-grid dd { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #111; } .modal-cta-primary { width: 100%; background: var(--blue); color: white; border: none; padding: 14px; border-radius: 30px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 8px; } .modal-cta-secondary { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 8px; } /* Responsive adjustments */ @media (max-width: 1000px) { .system-content-grid { grid-template-columns: 1fr; } .system-side-nav { display: none; } .system-kpi-row { grid-template-columns: repeat(2, 1fr); } .system-kanban-preview { grid-template-columns: repeat(2, 1fr); } .mobile-sim-layout { grid-template-columns: 1fr; } .tech-packages-grid { grid-template-columns: 1fr; } .tech-viewer-layout { grid-template-columns: 1fr; } } @media (max-width: 600px) { .system-kpi-row, .system-kanban-preview { grid-template-columns: 1fr; } .web-mockup-stats { flex-direction: column; gap: 16px; } } /* ========================================================================== Tech Social Media Feed Simulator & Pricing Tag Styles ========================================================================== */ .social-feed-simulator { padding: 35px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; } .social-feed-intro h3 { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0 0 8px; } .social-feed-intro p { font-size: 14px; color: #64748b; max-width: 620px; margin: 0 0 28px; line-height: 1.5; } .social-grid-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .social-preview-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: all 0.3s ease; } .social-preview-item:hover { transform: translateY(-4px); border-color: #cbd5e1; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08); } .social-preview-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f8fafc; } .social-item-meta { padding: 14px; } .social-item-meta b { display: block; font-size: 13px; font-weight: 700; color: #0f172a; } .social-item-meta small { display: block; font-size: 11px; color: #64748b; margin-top: 4px; } .package-price-tag { font-size: 28px; font-weight: 700; color: var(--blue); margin-top: auto; margin-bottom: 20px; letter-spacing: -0.03em; } .package-price-tag small { font-size: 12px; font-weight: 400; color: var(--muted); } @media (max-width: 800px) { .social-grid-preview { grid-template-columns: 1fr; } } /* ========================================================================== CONSULTHUB CLOUD ERP — REAL-LIFE WORKING APPLICATION ENGINE STYLES ========================================================================== */ .dashboard-section { padding: 80px 0 60px; scroll-margin-top: 130px; } .dashboard-header-block { margin-bottom: 25px; padding-top: 10px; overflow: visible; } .dashboard-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-top: 15px; } .dashboard-title-row h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.15; letter-spacing: -0.04em; margin: 0; padding-top: 4px; color: var(--ink); } .dashboard-title-row h2 span { color: var(--blue); } .dashboard-title-row p { font-size: 16px; color: var(--muted); max-width: 620px; margin: 10px 0 0; line-height: 1.55; } .link-external-brand { color: var(--blue) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 0.2s !important; } .link-external-brand:hover { color: var(--orange) !important; } .dashboard-live-link-box { display: flex; align-items: center; align-self: flex-start; margin-top: 10px; } .btn-live-portal-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 30px !important; padding: 8px 16px !important; font-size: 12.5px !important; font-weight: 700 !important; color: #0f172a !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; } .btn-live-portal-link:hover { background: var(--blue) !important; color: #ffffff !important; border-color: var(--blue) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22) !important; } .live-dot-pulse { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6) !important; animation: pulse-green 2s infinite !important; flex-shrink: 0 !important; } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .dashboard-controls-quick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .branch-select-wrap { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 30px; font-size: 12px; color: var(--muted); } .branch-select-wrap select { border: none; background: transparent; font-weight: 600; color: var(--ink); outline: none; cursor: pointer; } .btn-primary-action { background: var(--blue); color: #ffffff; border: none; padding: 12px 22px; border-radius: 30px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .btn-primary-action:hover { background: #1d4ed8; transform: translateY(-1px); } .btn-secondary-action { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; padding: 11px 20px; border-radius: 30px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-secondary-action:hover { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; } /* LIVE WORKING APPLICATION CONTAINER */ .live-dashboard-app { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08); color: #0f172a; overflow: hidden; position: relative; } /* Topbar */ .app-topbar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .topbar-left { display: flex; align-items: center; gap: 16px; } .app-dots { display: flex; gap: 6px; } .app-dots i { width: 9px; height: 9px; border-radius: 50%; } .app-dots i:nth-child(1) { background: #ef4444; } .app-dots i:nth-child(2) { background: #f59e0b; } .app-dots i:nth-child(3) { background: #10b981; } .app-brand-badge { font-size: 11px; font-weight: 800; color: var(--orange); letter-spacing: 0.06em; } .app-status-live { font-size: 10px; font-weight: 600; color: var(--orange); background: var(--orange-light); border: 1px solid var(--orange-border); padding: 3px 10px; border-radius: 12px; } .topbar-right { display: flex; align-items: center; gap: 16px; } .topbar-clock { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #64748b; } .topbar-bell-btn { background: #ffffff; border: 1px solid #e2e8f0; color: #1e293b; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; position: relative; } .notif-count { background: #ef4444; color: #ffffff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 4px; } .user-chip { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; padding: 4px 12px 4px 6px; border-radius: 24px; } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: white; display: grid; place-items: center; font-size: 10px; font-weight: 700; } .user-details { display: flex; flex-direction: column; } .user-name { font-size: 11px; font-weight: 700; color: #0f172a; } .user-role { font-size: 9px; color: #64748b; } /* Notification Dropdown */ .notif-dropdown-panel { position: absolute; top: 56px; right: 24px; width: 360px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.1); z-index: 50; overflow: hidden; } .notif-header { padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #0f172a; } .notif-header span { color: var(--blue); cursor: pointer; } .notif-list { max-height: 280px; overflow-y: auto; } .notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 11px; } .notif-item.unread { background: #f8fafc; } .notif-item span { font-size: 16px; } .notif-item p { margin: 0 0 4px; line-height: 1.4; color: #1e293b; } .notif-item small { color: #64748b; } /* App Container & Sidebar */ .app-container { display: grid; grid-template-columns: 240px 1fr; min-height: 680px; background: #ffffff; } .app-sidebar { background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 20px 14px; display: flex; flex-direction: column; } .sidebar-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: #64748b; margin-bottom: 12px; padding-left: 8px; } .sidebar-nav { display: flex; flex-direction: column; gap: 6px; } .side-nav-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; color: #64748b; padding: 10px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: all 0.18s; width: 100%; } .side-nav-btn:hover { background: #e2e8f0; color: #0f172a; } .side-nav-btn.is-active { background: #eff6ff; border-color: #bfdbfe; color: var(--blue); font-weight: 700; } .nav-icon { font-size: 15px; } .nav-text { flex: 1; } .nav-counter { font-size: 9px; background: #e2e8f0; color: #475569; padding: 2px 7px; border-radius: 10px; font-weight: 700; } .nav-counter.alert { background: #fee2e2; color: #dc2626; } .nav-counter.live { background: #dcfce7; color: #16a34a; } .sidebar-footer-card { margin-top: auto; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; font-size: 11px; } .sidebar-footer-card small { font-size: 8px; color: #64748b; letter-spacing: 0.08em; } .sidebar-footer-card b { display: block; font-size: 13px; color: #0f172a; margin: 4px 0 8px; } .intake-progress-bar { height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .intake-progress-bar span { display: block; height: 100%; background: var(--blue); } .sidebar-footer-card p { margin: 0; font-size: 10px; color: #64748b; } /* Main Content Area */ .app-main-content { padding: 24px; background: #ffffff; overflow-x: hidden; } /* KPI Bar */ .app-kpi-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .app-kpi-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; } .kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; } .kpi-icon.blue { background: #eff6ff; color: var(--blue); } .kpi-icon.purple { background: #f3e8ff; color: #9333ea; } .kpi-icon.green { background: #f0fdf4; color: #16a34a; } .kpi-icon.amber { background: #fffbeb; color: #d97706; } .app-kpi-item small { display: block; font-size: 10px; color: #64748b; } .app-kpi-item strong { display: block; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; margin: 2px 0; } .kpi-trend { font-size: 9px; font-weight: 600; color: #16a34a; } .kpi-subtext { font-size: 9px; color: #64748b; } /* View Header */ .view-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; } .view-header-row h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 4px; } .view-header-row p { font-size: 12px; color: #64748b; margin: 0; } .view-filters { display: flex; gap: 10px; align-items: center; } .view-filters input, .view-filters select { background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; padding: 8px 14px; border-radius: 20px; font-size: 12px; outline: none; } .view-filters input:focus, .view-filters select:focus { border-color: var(--blue); } /* KANBAN BOARD */ .kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-height: 480px; } .kanban-stage-col { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 12px; display: flex; flex-direction: column; } .col-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; } .stage-name { font-size: 11px; font-weight: 700; color: #0f172a; } .stage-badge { font-size: 10px; font-weight: 700; background: #e2e8f0; color: #475569; padding: 2px 8px; border-radius: 10px; } .stage-badge.blue { background: #dbeafe; color: #1e40af; } .stage-badge.purple { background: #f3e8ff; color: #7e22ce; } .stage-badge.green { background: #dcfce7; color: #15803d; } .col-cards-list { display: flex; flex-direction: column; gap: 12px; flex: 1; } .kanban-item-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: all 0.2s ease; } .kanban-item-card:hover { border-color: var(--orange-border); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 85, 0, 0.08); } .kanban-item-card.card-visa-done { border-color: #86efac; background: #f0fdf4; } .k-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .k-card-top b { font-size: 13px; font-weight: 700; color: #0f172a; } .k-avatar { width: 22px; height: 22px; border-radius: 50%; background: #eff6ff; color: var(--blue); font-size: 9px; font-weight: 700; display: grid; place-items: center; } .k-degree { font-size: 11px; color: #64748b; margin: 0 0 8px; } .k-univ-badge { font-size: 10px; color: #334155; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; margin-bottom: 10px; font-weight: 500; } .k-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-bottom: 12px; } .k-pill { padding: 2px 6px; border-radius: 4px; font-weight: 600; } .k-pill.blue { background: #dbeafe; color: #1e40af; } .k-pill.green { background: #dcfce7; color: #15803d; } .k-pill.orange { background: #ffedd5; color: #c2410c; } .k-counselor { color: #64748b; } .k-card-actions { display: flex; gap: 6px; border-top: 1px solid #f1f5f9; padding-top: 10px; } .btn-inspect-dossier { flex: 1; background: #f1f5f9; border: 1px solid #e2e8f0; color: #0f172a; padding: 6px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; } .btn-inspect-dossier:hover { background: #e2e8f0; color: var(--blue); } .btn-advance-stage { background: var(--orange); border: none; color: #ffffff; padding: 6px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; } .btn-advance-stage:hover { background: #ea580c; } /* DATA TABLES */ .data-table-wrap { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; } .dashboard-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; } .dashboard-table th { background: #f8fafc; color: #64748b; font-size: 10px; letter-spacing: 0.05em; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; } .dashboard-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; color: #0f172a; } .dashboard-table tr:hover td { background: #f8fafc; } .tbl-student-cell { display: flex; align-items: center; gap: 10px; } .tbl-avatar { width: 30px; height: 30px; border-radius: 50%; background: #0343fa25; color: #60a5fa; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .tbl-pill { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; padding: 3px 8px; border-radius: 6px; font-size: 11px; } .tbl-status-pill { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 12px; display: inline-block; } .status-leads { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } .status-docs { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .status-offers { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; } .status-visa { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .tbl-action-btn { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .tbl-action-btn:hover { background: #2563eb; color: #ffffff; } .tbl-code { font-family: ui-monospace, SFMono-Regular, monospace; color: #2563eb; font-weight: 600; } .text-green { color: #059669 !important; } .text-muted { color: #64748b !important; } /* DOCUMENT VAULT */ .docs-vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .doc-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: all 0.2s ease; } .doc-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; } .doc-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .doc-icon { font-size: 22px; } .doc-card-head b { display: block; font-size: 13.5px; font-weight: 700; color: #0f172a; } .doc-card-head small { font-size: 10px; color: #64748b; } .doc-card-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 10.5px; color: #64748b; } .doc-badge { padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 10px; } .doc-badge.verified { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .doc-badge.pending { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; } .doc-actions { display: flex; gap: 8px; margin-top: auto; } .btn-doc-verify { flex: 1; background: #2563eb; color: white; border: none; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-doc-verify:hover { background: #1d4ed8; } .btn-doc-view { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-doc-view:hover { background: #f1f5f9; color: #0f172a; } /* UNIVERSITIES CATALOG */ .univ-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .univ-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: all 0.2s ease; } .univ-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; } .univ-card-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .univ-flag { font-size: 24px; } .univ-card-top b { display: block; font-size: 14px; font-weight: 700; color: #0f172a; } .univ-card-top small { font-size: 10px; color: #64748b; } .univ-spec-row { display: flex; justify-content: space-between; margin-bottom: 12px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; font-size: 11px; color: #0f172a; } .univ-spec-row small { display: block; color: #64748b; font-size: 9px; font-weight: 600; } .univ-schol-pill { background: #eff6ff; color: #2563eb; border: 1px solid #dbeafe; padding: 5px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; margin-bottom: 10px; } .univ-entry-text { font-size: 11px; color: #64748b; line-height: 1.5; margin: 0 0 16px; } .btn-match-student { margin-top: auto; background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a; padding: 9px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-match-student:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } /* FINANCE LEDGER */ .ledger-metrics-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .ledger-metric { background: #ffffff; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .ledger-metric span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: #64748b; text-transform: uppercase; } .ledger-metric strong { display: block; font-size: 20px; font-weight: 800; color: #059669; margin-top: 4px; } /* MOBILE APP SIMULATOR (STUDENT & COUNSELOR IOS / ANDROID APP) */ .mobile-sim-container { display: grid; grid-template-columns: 310px 1fr; gap: 36px; align-items: start; padding: 10px 0 20px; } .mobile-device-shell { width: 300px; background: #ffffff; border: 8px solid #0f172a; border-radius: 40px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px #cbd5e1; overflow: hidden; margin: 0 auto; position: relative; } .mobile-speaker-notch { width: 80px; height: 18px; background: #0f172a; border-radius: 0 0 12px 12px; margin: 0 auto 4px; } .mobile-sim-screen { height: 520px; display: flex; flex-direction: column; background: #f8fafc; overflow: hidden; } .sim-phone-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 6px; font-size: 10px; font-weight: 700; color: #0f172a; } .sim-role-pill-quick { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; padding: 2px 7px; border-radius: 12px; font-size: 8.5px; font-weight: 700; cursor: pointer; } .sim-role-pill-quick.counselor-mode { background: #f0fdf4; border-color: #86efac; color: #16a34a; } .sim-phone-icons { display: flex; gap: 4px; font-size: 9px; color: #64748b; } .sim-screen-tab { flex: 1; padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .sim-screen-tab.hidden { display: none !important; } /* Tab 1: Home Screen */ .sim-user-header { display: flex; justify-content: space-between; align-items: center; } .sim-user-header small { font-size: 7.5px; font-weight: 700; color: #64748b; letter-spacing: 0.05em; } .sim-user-header h4 { font-size: 13px; font-weight: 800; color: #0f172a; margin: 1px 0; } .sim-univ-tag { font-size: 9px; color: #2563eb; font-weight: 600; display: block; } .sim-avatar { width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #ffffff; display: grid; place-items: center; font-size: 10px; font-weight: 800; } .sim-visa-card { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; padding: 12px; border-radius: 12px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); } .sim-visa-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .sim-sub-tag { font-size: 8px; font-weight: 700; letter-spacing: 0.05em; opacity: 0.9; } .sim-live-indicator { font-size: 7.5px; font-weight: 800; background: rgba(255, 255, 255, 0.2); padding: 2px 5px; border-radius: 6px; } .sim-visa-card h4 { font-size: 13px; font-weight: 800; margin: 0 0 2px; } .sim-visa-card p { font-size: 9.5px; opacity: 0.9; margin: 0 0 8px; } .sim-card-btn { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; padding: 5px 10px; border-radius: 6px; font-size: 9px; font-weight: 700; width: 100%; cursor: pointer; } .sim-card-btn:hover { background: rgba(255, 255, 255, 0.3); } .sim-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .sim-quick-btn { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: #0f172a; transition: all 0.2s; } .sim-quick-btn svg { stroke: #2563eb; } .sim-quick-btn span { font-size: 7.5px; font-weight: 700; white-space: nowrap; } .sim-quick-btn:hover { background: #eff6ff; border-color: #bfdbfe; } .sim-tasks-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; } .sim-tasks-box h5 { font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; margin: 0 0 6px; } .sim-milestone { font-size: 9px; padding: 4px 0; border-bottom: 1px solid #f1f5f9; color: #475569; display: flex; align-items: center; gap: 5px; } .sim-milestone:last-child { border-bottom: none; } .sim-milestone.done { color: #059669; font-weight: 600; } .sim-milestone.active { color: #2563eb; font-weight: 700; } /* Phone Bottom Nav */ .sim-phone-bottom-nav { display: flex; background: #ffffff; border-top: 1px solid #e2e8f0; padding: 3px 0; } .sim-nav-btn { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 1px; color: #64748b; font-size: 8px; font-weight: 700; cursor: pointer; } .sim-nav-btn.is-active { color: #2563eb; } .sim-nav-btn.is-active svg { stroke: #2563eb; } .sim-chat-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #10b981; } /* Chat Tab */ .sim-chat-head { padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; } .sim-chat-counselor { display: flex; align-items: center; gap: 6px; } .counselor-avatar { width: 26px; height: 26px; border-radius: 50%; background: #059669; color: #ffffff; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; } .sim-chat-counselor b { display: block; font-size: 11px; font-weight: 700; color: #0f172a; } .sim-chat-counselor small { color: #059669; font-size: 8px; font-weight: 600; } .sim-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .chat-msg { max-width: 85%; padding: 6px 9px; border-radius: 8px; font-size: 9.5px; line-height: 1.35; } .chat-msg.counselor { background: #f1f5f9; color: #0f172a; align-self: flex-start; border: 1px solid #e2e8f0; } .chat-msg.student { background: #2563eb; color: #ffffff; align-self: flex-end; } .chat-msg small { display: block; font-size: 7px; opacity: 0.7; margin-top: 2px; } .sim-chat-input-bar { display: flex; gap: 5px; padding-top: 6px; border-top: 1px solid #e2e8f0; } .sim-chat-input-bar input { flex: 1; background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; padding: 5px 8px; border-radius: 14px; font-size: 9.5px; outline: none; } .sim-chat-input-bar button { background: #2563eb; color: white; border: none; padding: 5px 10px; border-radius: 14px; font-size: 9.5px; font-weight: 700; cursor: pointer; } /* Services Tab */ .sim-tab-heading h4 { font-size: 11.5px; font-weight: 800; color: #0f172a; margin: 0; } .sim-tab-heading small { font-size: 8px; color: #64748b; } .sim-services-scroll { display: flex; flex-direction: column; gap: 6px; } .sim-service-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; } .sim-service-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } .sim-badge-srv { font-size: 7px; font-weight: 800; padding: 1px 4px; border-radius: 3px; } .sim-badge-srv.red { background: #fef2f2; color: #dc2626; } .sim-badge-srv.blue { background: #eff6ff; color: #2563eb; } .sim-badge-srv.orange { background: #fff7ed; color: #ea580c; } .sim-badge-srv.green { background: #f0fdf4; color: #16a34a; } .sim-service-item b { font-size: 10px; color: #0f172a; } .sim-service-item p { font-size: 8.5px; color: #64748b; margin: 0 0 5px; } .sim-srv-action-btn { background: #f8fafc; border: 1px solid #e2e8f0; color: #2563eb; padding: 4px 6px; border-radius: 5px; font-size: 8.5px; font-weight: 700; cursor: pointer; width: 100%; } /* Status Tab */ .sim-flight-ticket-card { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px; } .sim-flight-head { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 800; color: #2563eb; margin-bottom: 4px; } .flight-badge-confirmed { background: #dcfce7; color: #15803d; padding: 1px 4px; border-radius: 3px; } .sim-flight-route-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .sim-flight-route-row strong { font-size: 13px; font-weight: 800; color: #0f172a; } .sim-flight-route-row small { font-size: 7px; color: #64748b; display: block; } .flight-arrow-mid { font-size: 8.5px; font-weight: 700; color: #2563eb; } .sim-flight-meta-row { display: flex; justify-content: space-between; font-size: 8px; color: #475569; } .sim-docs-checklist-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; } .sim-docs-checklist-box h5 { font-size: 9px; font-weight: 800; color: #64748b; margin: 0 0 4px; text-transform: uppercase; } .sim-doc-row { display: flex; justify-content: space-between; font-size: 8.5px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; color: #0f172a; } /* Profile Tab */ .sim-profile-card-top { display: flex; gap: 8px; align-items: center; } .sim-avatar-lg { width: 32px; height: 32px; border-radius: 50%; background: #2563eb; color: #ffffff; display: grid; place-items: center; font-size: 11px; font-weight: 800; } .sim-prof-title h4 { font-size: 12px; font-weight: 800; color: #0f172a; margin: 0; } .sim-prof-title small { font-size: 7.5px; color: #64748b; } .sim-profile-details-box, .sim-test-scores-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; } .sim-prof-row { font-size: 8px; margin-bottom: 4px; } .sim-prof-row span { color: #64748b; display: block; } .sim-prof-row strong { color: #0f172a; font-size: 9px; } .sim-test-scores-box h5 { font-size: 9px; font-weight: 800; color: #64748b; margin: 0 0 4px; } .sim-test-pills-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .sim-test-pill { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px; } .sim-test-pill small { font-size: 7px; color: #64748b; display: block; } .sim-test-pill strong { font-size: 10px; font-weight: 800; color: #2563eb; display: block; } .sim-test-pill span { font-size: 7px; color: #64748b; display: block; } /* MOBILE APP SIMULATOR GUIDE & CARDS */ .mobile-sim-guide { padding-left: 20px; } .sim-guide-tag { font-size: 10px; font-weight: 800; color: #2563eb; letter-spacing: 0.08em; } .mobile-sim-guide h3 { font-size: 26px; font-weight: 800; color: #0f172a; margin: 6px 0 10px; letter-spacing: -0.02em; } .mobile-sim-guide p { font-size: 13.5px; color: #64748b; line-height: 1.6; margin: 0 0 20px; } .sim-feature-cards { display: flex; flex-direction: column; gap: 12px; } .sim-feat-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); transition: all 0.2s ease; } .sim-feat-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.06); } .sim-feat-card b { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .sim-feat-card p { font-size: 12px; line-height: 1.5; color: #64748b; margin: 0; } /* 30-POST SOCIAL STUDIO */ .social-studio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .social-studio-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .social-card-img { position: relative; background: #f8fafc; aspect-ratio: 1 / 1; } .social-card-img img { width: 100%; height: 100%; object-fit: cover; } .social-tag-overlay { position: absolute; top: 10px; left: 10px; background: #2563eb; color: white; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; } .social-card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; } .social-card-body b { font-size: 13px; font-weight: 700; color: #0f172a; } .social-card-body small { font-size: 10px; color: #64748b; } .social-caption-preview { font-size: 11px; color: #64748b; line-height: 1.4; margin: 8px 0 12px; flex: 1; } .social-btn-row { display: flex; gap: 6px; } .btn-copy-caption { flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; padding: 6px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-copy-caption:hover { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } .btn-download-creative { background: #2563eb; color: white; padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; text-decoration: none; display: grid; place-items: center; } /* CUSTOM MODALS */ .modal-backdrop-custom { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-dialog-custom { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; width: 100%; max-width: 480px; color: #0f172a; overflow: hidden; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15); } .modal-dialog-custom.modal-wide { max-width: 760px; } .modal-head-custom { background: #f8fafc; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; } .modal-head-custom h4 { font-size: 15px; font-weight: 700; margin: 0; color: #0f172a; } .dossier-tag { font-size: 9px; color: #2563eb; font-weight: 700; letter-spacing: 0.08em; } .btn-close-custom { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; } .modal-form-custom { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .modal-form-custom label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; color: #475569; } .modal-form-custom input, .modal-form-custom select { background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; padding: 10px 12px; border-radius: 8px; font-size: 12px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Dossier Body */ .dossier-body { padding: 24px; } .dossier-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; } .dossier-section h5, .dossier-col-side h5 { font-size: 12px; font-weight: 700; color: #0f172a; margin: 0 0 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; } .dossier-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; } .dossier-dl dt { font-size: 9px; color: #64748b; text-transform: uppercase; } .dossier-dl dd { font-size: 12px; color: #0f172a; font-weight: 600; margin: 2px 0 0; } .dossier-notes { background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; font-size: 12px; color: #475569; line-height: 1.5; margin: 0; } .dossier-timeline { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; } .dossier-timeline li { font-size: 11px; color: #059669; } /* Responsive Dashboard Styles */ @media (max-width: 1100px) { .app-container { grid-template-columns: 1fr; } .app-sidebar { border-right: none; border-bottom: 1px solid #1e293b; padding: 12px 16px; } .sidebar-section-title { display: none; } .sidebar-footer-card { display: none; } .sidebar-nav { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .side-nav-btn { flex: 0 0 auto; width: auto; padding: 8px 14px; font-size: 11.5px; border-radius: 20px; white-space: nowrap; } .app-kpi-bar { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; } .kanban-board { grid-template-columns: repeat(2, 1fr); } .docs-vault-grid, .univ-cards-grid, .social-studio-grid { grid-template-columns: repeat(2, 1fr); } .mobile-sim-container { grid-template-columns: 1fr; } .dossier-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dashboard-section { padding: 40px 0 30px; } .dashboard-header-block { margin-bottom: 16px; } .dashboard-title-row { flex-direction: column; gap: 14px; align-items: stretch; } .dashboard-controls-quick { display: flex; flex-wrap: wrap; gap: 8px; } .branch-select-wrap { width: 100%; } .branch-select-wrap select { width: 100%; } #btn-student-login-modal, #btn-add-lead-modal { flex: 1; text-align: center; justify-content: center; font-size: 11px; padding: 8px 12px; } .app-topbar { flex-direction: column; height: auto; padding: 10px 14px; gap: 8px; align-items: stretch; } .topbar-left, .topbar-right { display: flex; justify-content: space-between; align-items: center; width: 100%; } .app-status-live { display: none; } .app-sidebar { padding: 10px 12px; background: #090d16; border-bottom: 1px solid #1e293b; } .sidebar-nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .side-nav-btn { flex: 0 0 auto; width: auto; padding: 7px 12px; font-size: 11px; border-radius: 18px; gap: 6px; background: #111827; border: 1px solid #1e293b; } .side-nav-btn.is-active { background: #0343fa; border-color: #0343fa; color: #ffffff; } .app-main-content { padding: 14px 12px; } .app-kpi-bar { display: grid; grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin-bottom: 14px; } .app-kpi-item { padding: 10px; gap: 8px; border-radius: 10px; } .kpi-icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; } .kpi-icon svg { width: 15px; height: 15px; } .app-kpi-item small { font-size: 9px; } .app-kpi-item strong { font-size: 14px; margin: 1px 0; } .kpi-trend { font-size: 8px; } .view-header-row { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; } .view-filters { width: 100%; flex-direction: column; gap: 6px; } .view-filters input, .view-filters select { width: 100%; font-size: 12px; padding: 8px 12px; } .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; margin-top: 6px; border: 1px solid #1e293b; } .dashboard-table { min-width: 760px; } .dashboard-table th, .dashboard-table td { padding: 9px 12px; font-size: 11px; } .kanban-board { grid-template-columns: 1fr; gap: 12px; } .docs-vault-grid, .univ-cards-grid, .social-studio-grid { grid-template-columns: 1fr; gap: 12px; } .staff-kpi-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; } .visas-tickets-layout { grid-template-columns: 1fr; } } /* ========================================================================== FIXED PACKAGES & CAPABILITIES LAYOUT (Clean full-width 3-column architecture) ========================================================================== */ /* Capabilities Section Fix */ .studio-chapter { background: var(--blue) !important; color: #ffffff !important; padding: 85px 0 95px !important; overflow: visible !important; } .studio-chapter .chapter-line { color: #ffffffb0 !important; border-bottom: 1px solid #ffffff35 !important; padding-bottom: 14px !important; margin-bottom: 25px !important; } .studio-manifesto { padding: 10px 0 40px !important; display: flex !important; justify-content: space-between !important; align-items: flex-end !important; } .studio-manifesto h2 { color: #ffffff !important; font-size: clamp(40px, 5vw, 76px) !important; line-height: 1.05 !important; letter-spacing: -0.05em !important; margin: 0 !important; } .creative-services { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 20px !important; width: 100% !important; } @media (max-width: 1100px) { .creative-services { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } @media (max-width: 600px) { .creative-services { grid-template-columns: 1fr !important; gap: 16px !important; } } .creative-service { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 16px !important; padding: 28px 24px !important; display: flex !important; flex-direction: column !important; transition: all 0.3s ease !important; color: #ffffff !important; text-decoration: none !important; } .creative-service:hover { background: rgba(255, 255, 255, 0.14) !important; transform: translateY(-5px) !important; border-color: rgba(255, 255, 255, 0.5) !important; } .creative-service.highlight-creative-card { border: 2px solid var(--lime) !important; background: rgba(220, 247, 122, 0.08) !important; } .creative-service.highlight-creative-card:hover { background: rgba(220, 247, 122, 0.16) !important; } .service-index { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: #bfdbfe !important; } .creative-service h3 { font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.03em !important; color: #ffffff !important; margin: 14px 0 8px !important; min-height: auto !important; } .service-symbol { height: 90px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 10px 0 16px !important; background: none !important; border: none !important; } .service-symbol svg { height: 75px !important; width: auto !important; max-width: 120px !important; stroke: #ffffff !important; } .creative-service p { font-size: 13.5px !important; line-height: 1.55 !important; color: #e0e7ff !important; margin: 0 0 20px !important; } .creative-service .service-link { color: #ffffff !important; font-weight: 600 !important; font-size: 13px !important; margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Creative Branding Callout Banner */ .creative-brand-callout-banner { margin-top: 40px !important; background: rgba(0, 0, 0, 0.22) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 16px !important; padding: 28px 32px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; color: #ffffff !important; flex-wrap: wrap !important; } .callout-banner-copy { max-width: 680px !important; } .callout-pill-tag { display: inline-block !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; color: var(--lime) !important; margin-bottom: 6px !important; text-transform: uppercase !important; } .creative-brand-callout-banner h3 { font-size: clamp(20px, 2.4vw, 26px) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; margin: 0 0 6px !important; color: #ffffff !important; } .creative-brand-callout-banner p { font-size: 13.5px !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1.5 !important; margin: 0 !important; } .btn-creative-portal-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #ffffff !important; color: #0343fa !important; font-size: 13px !important; font-weight: 700 !important; padding: 12px 24px !important; border-radius: 30px !important; text-decoration: none !important; transition: all 0.2s ease !important; white-space: nowrap !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; flex-shrink: 0 !important; } .btn-creative-portal-link:hover { background: var(--lime) !important; color: var(--ink) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; } @media (max-width: 768px) { .creative-brand-callout-banner { padding: 22px 18px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .btn-creative-portal-link { width: 100% !important; justify-content: center !important; } } /* Packages Section Layout Fix */ .monthly-package { display: block !important; width: 100% !important; padding: 75px 0 85px !important; border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; background: #ffffff !important; box-sizing: border-box !important; overflow: hidden !important; } .monthly-package .wrap { width: calc(100% - 64px) !important; max-width: 1440px !important; margin: 0 auto !important; box-sizing: border-box !important; padding: 0 !important; } .package-story { margin-bottom: 40px !important; text-align: left !important; box-sizing: border-box !important; } .package-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: var(--blue) !important; display: block !important; margin-bottom: 8px !important; } .package-story h2 { font-size: clamp(32px, 4.2vw, 56px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; margin: 0 0 14px !important; color: var(--ink) !important; word-break: break-word !important; overflow-wrap: break-word !important; } .package-story h2 span { color: var(--blue) !important; } .package-story p { font-size: 15px !important; color: var(--muted) !important; max-width: 640px !important; margin: 0 !important; line-height: 1.55 !important; word-break: break-word !important; overflow-wrap: break-word !important; } .tech-packages-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; align-items: stretch !important; box-sizing: border-box !important; } .tech-card-package { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 24px 20px !important; display: flex !important; flex-direction: column !important; min-height: 480px !important; position: relative !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .tech-card-package:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(255, 85, 0, 0.08) !important; border-color: var(--orange-border) !important; } .tech-card-package.featured-pkg { border: 2px solid var(--orange) !important; box-shadow: 0 16px 36px rgba(255, 85, 0, 0.1) !important; } .pkg-badge { position: static !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; padding: 4px 10px !important; border-radius: 20px !important; background: #0f172a !important; color: #ffffff !important; display: inline-block !important; width: fit-content !important; margin-bottom: 14px !important; } .pkg-badge.highlight { background: var(--orange) !important; } .tech-card-package h3 { font-size: 19px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 8px !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; word-break: break-word !important; overflow-wrap: break-word !important; } .tech-card-package p { font-size: 12.5px !important; line-height: 1.45 !important; color: #64748b !important; margin: 0 0 16px !important; min-height: 48px !important; word-break: break-word !important; overflow-wrap: break-word !important; } .pkg-features { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-bottom: 20px !important; font-size: 11.5px !important; color: #334155 !important; line-height: 1.35 !important; box-sizing: border-box !important; } .pkg-features span { display: flex !important; align-items: flex-start !important; gap: 6px !important; word-break: break-word !important; overflow-wrap: break-word !important; } .package-price-tag { font-size: 26px !important; font-weight: 800 !important; color: var(--orange) !important; margin-top: auto !important; margin-bottom: 4px !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; display: flex !important; align-items: baseline !important; gap: 4px !important; flex-wrap: wrap !important; } .package-price-tag small { font-size: 11.5px !important; font-weight: 600 !important; color: #64748b !important; } .pkg-scope-note { font-size: 10px !important; color: #64748b !important; margin-bottom: 14px !important; font-weight: 600 !important; min-height: 24px !important; line-height: 1.3 !important; word-break: break-word !important; overflow-wrap: break-word !important; } .pkg-cta { display: block !important; text-align: center !important; padding: 10px 14px !important; border-radius: 24px !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; background: #ffffff !important; transition: all 0.2s ease !important; box-sizing: border-box !important; width: 100% !important; } .pkg-cta:hover { background: var(--orange) !important; color: #ffffff !important; border-color: var(--orange) !important; transform: translateY(-2px); } .pkg-cta.primary { background: var(--orange) !important; color: #ffffff !important; border-color: var(--orange) !important; } .pkg-cta.primary:hover { background: #ea580c !important; border-color: #ea580c !important; transform: translateY(-2px); } /* Responsive Overrides for Packages & Capabilities */ @media (max-width: 1080px) { .tech-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } } @media (max-width: 768px) { .monthly-package { padding: 42px 0 48px !important; } .monthly-package .wrap { width: calc(100% - 32px) !important; max-width: 100% !important; } .package-story { margin-bottom: 24px !important; } .package-story h2 { font-size: clamp(26px, 7.2vw, 38px) !important; line-height: 1.15 !important; } .creative-services { grid-template-columns: 1fr !important; gap: 16px !important; } .tech-packages-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .tech-card-package { min-height: auto !important; padding: 22px 18px !important; } .tech-card-package p { min-height: 0 !important; } } /* ========================================================================== BRANDING COLOR THEME: NO BLACK BACKGROUND — CLEAN LIGHT + TECH ORANGE ========================================================================== */ :root { --orange: #ff5500; --orange-light: #fff4ed; --orange-border: #fed7aa; } /* Co-Branded Logo & Badging: illuu x illuugraphy */ .wordmark, .tech-graphy-wordmark { display: inline-flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; } .brand-logo { height: 32px !important; width: auto !important; max-width: 140px !important; object-fit: contain !important; display: block !important; } @media (max-width: 768px) { .brand-logo { height: 26px !important; max-width: 110px !important; } } /* Hero Terminal Card: Clean light surface with Tech Orange accent */ .hero-terminal-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; box-shadow: 0 16px 36px rgba(255, 85, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important; } .terminal-bar { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } .terminal-bar small { color: #64748b !important; } .t-blue { color: var(--blue) !important; } .t-white { color: #0f172a !important; } .t-green { color: #16a34a !important; } .t-muted { color: #475569 !important; } .t-lime { color: var(--orange) !important; font-weight: 700 !important; } /* ========================================================================== CONSULTHUB CLOUD ERP LIVE DASHBOARD — PIXEL PERFECT REPLICA (media_1791210636039.jpg) ========================================================================== */ .live-dashboard-app.ch-app-shell { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08), 0 4px 20px rgba(15, 23, 42, 0.03) !important; overflow: hidden !important; position: relative !important; display: grid !important; grid-template-columns: 240px 1fr !important; min-height: 860px !important; color: #0f172a !important; font-family: Base, Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; } .live-dashboard-app *, .live-dashboard-app button, .live-dashboard-app input, .live-dashboard-app select, .live-dashboard-app textarea { font-family: Base, Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; } .live-dashboard-app p, .live-dashboard-app small, .live-dashboard-app span.muted, .live-dashboard-app .ch-card-desc, .live-dashboard-app .ch-note-text, .live-dashboard-app .dashboard-table td { font-family: BaseText, Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; } .live-dashboard-app svg { stroke-linecap: round !important; stroke-linejoin: round !important; flex-shrink: 0 !important; } .ch-sidebar-overlay { display: none !important; } /* LEFT WHITE / LIGHT SIDEBAR (PIXEL PERFECT REPLICA OF MOCKUP) */ .ch-sidebar { background: #ffffff !important; color: #0f172a !important; border-right: 1px solid #e2e8f0 !important; display: flex !important; flex-direction: column !important; padding: 16px 12px !important; user-select: none !important; } .ch-sidebar-brand { padding: 8px 10px 16px !important; border-bottom: 1px solid #f1f5f9 !important; margin-bottom: 14px !important; } .ch-sidebar-close-btn { display: none !important; } .ch-brand-logo-wrap { display: flex !important; align-items: center !important; gap: 10px !important; } .ch-brand-name { font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; letter-spacing: -0.03em !important; display: block !important; line-height: 1.1 !important; } .ch-brand-tagline { font-size: 8px !important; font-weight: 700 !important; color: #64748b !important; letter-spacing: 0.08em !important; display: block !important; } .ch-main-nav-btn-wrap { margin-bottom: 16px !important; } .ch-primary-nav-btn { width: 100% !important; background: #2563eb !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important; } .ch-primary-nav-btn:hover { background: #1d4ed8 !important; transform: translateY(-1px) !important; } .ch-sidebar-scroll { flex: 1 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 14px !important; scrollbar-width: thin !important; scrollbar-color: #cbd5e1 transparent !important; } .ch-nav-group { display: flex !important; flex-direction: column !important; gap: 3px !important; } .ch-group-title { font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; color: #94a3b8 !important; padding: 6px 10px 4px !important; } .ch-nav-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; border-radius: 8px !important; background: transparent !important; border: 1px solid transparent !important; color: #475569 !important; font-size: 11.5px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.18s !important; text-align: left !important; width: 100% !important; } .ch-nav-item:hover { background: #f1f5f9 !important; color: #0f172a !important; } .ch-nav-item.is-active { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; font-weight: 700 !important; } .ch-nav-item svg { flex-shrink: 0 !important; } .ch-nav-item span { flex: 1 !important; } .ch-badge { font-size: 9px !important; font-weight: 700 !important; background: #eff6ff !important; color: #2563eb !important; padding: 2px 7px !important; border-radius: 10px !important; } .ch-badge-live { font-size: 8.5px !important; font-weight: 800 !important; background: #ecfdf5 !important; color: #059669 !important; padding: 2px 7px !important; border-radius: 10px !important; text-transform: uppercase !important; } .ch-intake-card { margin-top: auto !important; background: #f0f7ff !important; border: 1px solid #dbeafe !important; border-radius: 10px !important; padding: 12px 10px !important; font-size: 10px !important; } .ch-intake-card small { font-size: 7.5px !important; color: #64748b !important; letter-spacing: 0.08em !important; font-weight: 700 !important; } .ch-intake-card b { display: block !important; font-size: 12px !important; color: #0f172a !important; margin: 3px 0 6px !important; } .ch-intake-bar { height: 4px !important; background: #e2e8f0 !important; border-radius: 2px !important; overflow: hidden !important; margin-bottom: 5px !important; } .ch-intake-bar span { display: block !important; height: 100% !important; background: #2563eb !important; } .ch-intake-card p { margin: 0 !important; color: #64748b !important; font-size: 9px !important; } /* RIGHT MAIN LAYOUT */ .ch-main-area { background: #f8fafc !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow-x: hidden !important; } /* TOPBAR */ .ch-topbar { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; padding: 10px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } .ch-topbar-left { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 !important; max-width: 460px !important; } .ch-menu-toggle { background: transparent !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; cursor: pointer !important; color: #475569 !important; } .ch-global-search { display: flex !important; align-items: center !important; gap: 8px !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 6px 12px !important; flex: 1 !important; } .ch-global-search input { border: none !important; background: transparent !important; outline: none !important; font-size: 11.5px !important; color: #0f172a !important; width: 100% !important; } .ch-kbd-badge { font-size: 9px !important; font-weight: 700 !important; background: #e2e8f0 !important; color: #64748b !important; padding: 2px 6px !important; border-radius: 4px !important; } .ch-topbar-right { display: flex !important; align-items: center !important; gap: 12px !important; } .ch-branch-pill { display: flex !important; align-items: center !important; gap: 6px !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 5px 10px !important; font-size: 11px !important; color: #334155 !important; } .ch-branch-pill select { border: none !important; background: transparent !important; outline: none !important; font-weight: 600 !important; color: #0f172a !important; cursor: pointer !important; font-size: 11px !important; appearance: none !important; } .ch-status-pill { font-size: 10px !important; font-weight: 700 !important; background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; padding: 4px 10px !important; border-radius: 20px !important; } .ch-notif-btn { position: relative !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; cursor: pointer !important; color: #475569 !important; } .ch-notif-badge { position: absolute !important; top: -3px !important; right: -3px !important; background: #ef4444 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 800 !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; } .ch-user-chip { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; padding: 3px 8px !important; border-radius: 20px !important; transition: background 0.2s !important; } .ch-user-chip:hover { background: #f1f5f9 !important; } .ch-avatar-circle { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #2563eb !important; color: #ffffff !important; display: grid !important; place-items: center !important; font-size: 10px !important; font-weight: 800 !important; } .ch-user-info b { display: block !important; font-size: 11.5px !important; color: #0f172a !important; line-height: 1.1 !important; } .ch-user-info small { display: block !important; font-size: 9px !important; color: #64748b !important; } /* CONTENT BODY */ .ch-content-body { padding: 20px 24px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; } /* PANORAMIC GREETING BANNER */ .ch-hero-banner { background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #f0fdf4 100%) !important; border: 1px solid #bfdbfe !important; border-radius: 14px !important; padding: 22px 28px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; position: relative !important; overflow: hidden !important; } .ch-hero-banner:after { content: "" !important; position: absolute !important; right: 180px !important; top: 0 !important; bottom: 0 !important; width: 260px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' opacity='0.15'%3E%3Cpath d='M0 100 L40 60 L80 85 L130 40 L180 90 L240 30 L300 80 L360 45 L400 100 Z' fill='%232563eb'/%3E%3Cpath d='M100 100 L160 55 L220 95 L280 45 L340 85 L400 100 Z' fill='%23059669'/%3E%3C/svg%3E") !important; background-size: cover !important; background-repeat: no-repeat !important; pointer-events: none !important; } .ch-hero-copy { max-width: 620px !important; position: relative !important; z-index: 2 !important; } .ch-greeting-tag { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; font-weight: 700 !important; color: #2563eb !important; margin-bottom: 6px !important; } .ch-hero-copy h1 { font-size: clamp(22px, 2.6vw, 30px) !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.15 !important; margin: 0 0 6px !important; letter-spacing: -0.04em !important; } .ch-hero-copy h1 span { color: #2563eb !important; } .ch-hero-copy p { font-size: 12.5px !important; color: #475569 !important; line-height: 1.5 !important; margin: 0 !important; } .ch-hero-side-card { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px) !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 190px !important; position: relative !important; z-index: 2 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important; } .ch-side-card-inner { display: flex !important; align-items: center !important; gap: 10px !important; } .ch-side-icon-box { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #eff6ff !important; display: grid !important; place-items: center !important; color: #2563eb !important; } .ch-side-card-inner b { display: block !important; font-size: 12px !important; color: #0f172a !important; } .ch-side-card-inner small { display: block !important; font-size: 9.5px !important; color: #64748b !important; } .ch-btn-branch-overview { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; color: #334155 !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 6px 10px !important; cursor: pointer !important; text-align: center !important; transition: all 0.2s !important; } .ch-btn-branch-overview:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } /* 4 KPI METRICS ROW */ .ch-kpi-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; } .ch-kpi-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 16px 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important; transition: transform 0.2s, box-shadow 0.2s !important; } .ch-kpi-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05) !important; } .ch-kpi-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } .ch-kpi-icon.blue { background: #eff6ff !important; color: #2563eb !important; } .ch-kpi-icon.purple { background: #faf5ff !important; color: #9333ea !important; } .ch-kpi-icon.green { background: #f0fdf4 !important; color: #16a34a !important; } .ch-kpi-icon.orange { background: #fff7ed !important; color: #ea580c !important; } .ch-kpi-body { flex: 1 !important; } .ch-kpi-body small { display: block !important; font-size: 10.5px !important; color: #64748b !important; font-weight: 600 !important; } .ch-kpi-body strong { display: block !important; font-size: 21px !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.15 !important; margin: 2px 0 !important; letter-spacing: -0.035em !important; } .ch-trend.green { font-size: 9.5px !important; font-weight: 700 !important; color: #16a34a !important; } .ch-sub { font-size: 9.5px !important; color: #64748b !important; } .ch-sparkline { flex-shrink: 0 !important; } /* QUICK ACTION BUTTONS TOOLBAR */ .ch-quick-actions-bar { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; } .ch-btn-action { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 11.5px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; transition: all 0.18s !important; box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; } .ch-btn-action:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; } .ch-btn-action.primary { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important; } .ch-btn-action.primary:hover { background: #1d4ed8 !important; } /* ADMISSIONS PIPELINE KANBAN */ .ch-kanban-section { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 20px 22px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important; } .ch-section-head { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; margin-bottom: 18px !important; flex-wrap: wrap !important; } .ch-section-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; } .ch-section-icon.blue { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #eff6ff !important; display: grid !important; place-items: center !important; color: #2563eb !important; } .ch-section-title-wrap h3 { font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 !important; } .ch-section-title-wrap p { font-size: 11px !important; color: #64748b !important; margin: 2px 0 0 !important; } .ch-filter-controls { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } .ch-search-box { display: flex !important; align-items: center !important; gap: 6px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 6px 10px !important; } .ch-search-box input { border: none !important; background: transparent !important; outline: none !important; font-size: 11px !important; color: #0f172a !important; width: 170px !important; } .ch-select-box { display: flex !important; align-items: center !important; gap: 6px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 6px 10px !important; color: #475569 !important; } .ch-select-box select { border: none !important; background: transparent !important; outline: none !important; font-size: 11px !important; color: #0f172a !important; cursor: pointer !important; } .ch-view-toggles { display: flex !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; overflow: hidden !important; } .ch-toggle-btn { background: #ffffff !important; border: none !important; padding: 6px 9px !important; color: #64748b !important; cursor: pointer !important; display: grid !important; place-items: center !important; } .ch-toggle-btn.is-active { background: #eff6ff !important; color: #2563eb !important; } /* 4 PASTEL COLUMNS GRID */ .ch-kanban-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; min-height: 480px !important; } .ch-column { border-radius: 12px !important; padding: 12px !important; display: flex !important; flex-direction: column !important; border: 1px solid #e2e8f0 !important; background: #fafafa !important; } .ch-column.col-leads { border-color: #bfdbfe !important; background: #f8fbff !important; } .ch-column.col-docs { border-color: #e9d5ff !important; background: #fbf8ff !important; } .ch-column.col-offers { border-color: #fde68a !important; background: #fffdf5 !important; } .ch-column.col-visa { border-color: #bbf7d0 !important; background: #f6fdf8 !important; } .ch-col-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 10px !important; border-radius: 8px !important; margin-bottom: 12px !important; } .ch-col-header.blue { background: #eff6ff !important; color: #1d4ed8 !important; } .ch-col-header.purple { background: #faf5ff !important; color: #7e22ce !important; } .ch-col-header.orange { background: #fffbeb !important; color: #b45309 !important; } .ch-col-header.green { background: #f0fdf4 !important; color: #15803d !important; } .ch-col-title { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11.5px !important; font-weight: 800 !important; } .ch-col-badge { width: 20px !important; height: 20px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 10px !important; font-weight: 800 !important; } .ch-col-badge.blue { background: #dbeafe !important; color: #1d4ed8 !important; } .ch-col-badge.purple { background: #f3e8ff !important; color: #7e22ce !important; } .ch-col-badge.orange { background: #fef3c7 !important; color: #b45309 !important; } .ch-col-badge.green { background: #dcfce7 !important; color: #15803d !important; } .ch-cards-container { display: flex !important; flex-direction: column !important; gap: 12px !important; flex: 1 !important; } /* STUDENT CARDS */ .ch-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 14px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; transition: all 0.2s ease !important; } .ch-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; border-color: #94a3b8 !important; } .ch-card-header { display: flex !important; align-items: flex-start !important; gap: 10px !important; } .ch-card-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 9.5px !important; font-weight: 800 !important; flex-shrink: 0 !important; } .ch-card-avatar.blue { background: #eff6ff !important; color: #2563eb !important; } .ch-card-avatar.purple { background: #faf5ff !important; color: #9333ea !important; } .ch-card-avatar.orange { background: #fff7ed !important; color: #ea580c !important; } .ch-card-avatar.green { background: #f0fdf4 !important; color: #16a34a !important; } .ch-card-title-group { flex: 1 !important; } .ch-card-name { font-size: 13px !important; font-weight: 800 !important; color: #0f172a !important; line-height: 1.2 !important; display: block !important; } .ch-card-degree { font-size: 11px !important; color: #64748b !important; margin-top: 2px !important; display: block !important; } .ch-card-univ { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; color: #334155 !important; font-weight: 600 !important; background: #f8fafc !important; padding: 4px 8px !important; border-radius: 6px !important; } .ch-card-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding-top: 4px !important; } .ch-pill { font-size: 9px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 6px !important; display: inline-block !important; } .ch-pill.blue { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important; } .ch-pill.orange { background: #fff7ed !important; color: #ea580c !important; border: 1px solid #fed7aa !important; } .ch-pill.green { background: #f0fdf4 !important; color: #16a34a !important; border: 1px solid #bbf7d0 !important; } .ch-counselor-tag { font-size: 9.5px !important; color: #64748b !important; } .ch-card-buttons { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 4px !important; } .ch-btn-details { flex: 1 !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; border-radius: 6px !important; padding: 6px 8px !important; font-size: 10.5px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s !important; text-align: center !important; } .ch-btn-details:hover { background: #e2e8f0 !important; color: #0f172a !important; } .ch-btn-move { flex: 1 !important; border: none !important; border-radius: 6px !important; padding: 6px 8px !important; font-size: 10.5px !important; font-weight: 700 !important; cursor: pointer !important; color: #ffffff !important; transition: all 0.2s !important; text-align: center !important; } .ch-btn-move.blue { background: #2563eb !important; } .ch-btn-move.blue:hover { background: #1d4ed8 !important; } .ch-btn-move.purple { background: #9333ea !important; } .ch-btn-move.purple:hover { background: #7e22ce !important; } .ch-btn-move.orange { background: #ea580c !important; } .ch-btn-move.orange:hover { background: #c2410c !important; } .ch-btn-move.green { background: #16a34a !important; } .ch-btn-move.green:hover { background: #15803d !important; } .ch-btn-more-dots { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; color: #64748b !important; width: 26px !important; height: 28px !important; display: grid !important; place-items: center !important; cursor: pointer !important; font-size: 13px !important; font-weight: 800 !important; flex-shrink: 0 !important; transition: all 0.18s !important; } .ch-btn-more-dots:hover { background: #e2e8f0 !important; color: #0f172a !important; } .ch-live-clock-strip { display: flex !important; justify-content: flex-end !important; align-items: center !important; margin-bottom: -10px !important; } .ch-date-live-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 10.5px !important; font-weight: 600 !important; color: #64748b !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; padding: 3px 10px !important; border-radius: 20px !important; } .ch-clock-bell-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #ef4444 !important; display: inline-block !important; } /* BOTTOM WIDGETS GRID */ .ch-bottom-widgets-grid { display: grid !important; grid-template-columns: 1fr 1fr 1.25fr !important; gap: 16px !important; } .ch-widget-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 16px 18px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .ch-widget-head { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 10px !important; border-bottom: 1px solid #f1f5f9 !important; } .ch-widget-title { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12.5px !important; font-weight: 800 !important; color: #0f172a !important; } .ch-link-btn { background: none !important; border: none !important; color: #2563eb !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; } .ch-tasks-list { display: flex !important; flex-direction: column !important; gap: 10px !important; } .ch-task-item { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; } .ch-task-item input { cursor: pointer !important; width: 15px !important; height: 15px !important; accent-color: #2563eb !important; } .ch-task-info { flex: 1 !important; } .ch-task-info span { display: block !important; font-size: 11.5px !important; font-weight: 600 !important; color: #0f172a !important; } .ch-task-info small { display: block !important; font-size: 9.5px !important; color: #64748b !important; } .ch-priority-pill { font-size: 9px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 10px !important; } .ch-priority-pill.high { background: #fee2e2 !important; color: #dc2626 !important; } .ch-priority-pill.medium { background: #dbeafe !important; color: #1d4ed8 !important; } .ch-activity-list { display: flex !important; flex-direction: column !important; gap: 10px !important; } .ch-activity-item { display: flex !important; align-items: center !important; gap: 10px !important; } .ch-act-icon { width: 26px !important; height: 26px !important; border-radius: 6px !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } .ch-act-icon.green { background: #f0fdf4 !important; color: #16a34a !important; } .ch-act-icon.purple { background: #faf5ff !important; color: #9333ea !important; } .ch-act-info span { display: block !important; font-size: 11.5px !important; color: #0f172a !important; font-weight: 600 !important; } .ch-act-info small { display: block !important; font-size: 9.5px !important; color: #64748b !important; } .ch-reports-mini-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } .ch-report-mini-btn { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 10px 6px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: all 0.18s !important; text-align: center !important; } .ch-report-mini-btn:hover { background: #eff6ff !important; border-color: #bfdbfe !important; transform: translateY(-1px) !important; } .ch-rep-icon { width: 28px !important; height: 28px !important; border-radius: 8px !important; display: grid !important; place-items: center !important; } .ch-rep-icon.blue { background: #eff6ff !important; color: #2563eb !important; } .ch-rep-icon.green { background: #f0fdf4 !important; color: #16a34a !important; } .ch-rep-icon.orange { background: #fff7ed !important; color: #ea580c !important; } .ch-rep-icon.purple { background: #faf5ff !important; color: #9333ea !important; } .ch-report-mini-btn span { font-size: 9.5px !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.2 !important; } /* RESPONSIVE LAYOUT FOR DASHBOARD */ @media (max-width: 1100px) { .live-dashboard-app.ch-app-shell { grid-template-columns: 1fr !important; position: relative !important; overflow: hidden !important; } .ch-sidebar { display: none !important; } .ch-sidebar.is-mobile-open { display: flex !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 270px !important; max-width: 85% !important; z-index: 60 !important; background: #ffffff !important; box-shadow: 4px 0 25px rgba(15, 23, 42, 0.15) !important; border-right: 1px solid #e2e8f0 !important; } .ch-sidebar-overlay.is-active { display: block !important; position: absolute !important; inset: 0 !important; background: rgba(15, 23, 42, 0.3) !important; backdrop-filter: blur(2px) !important; z-index: 55 !important; } .ch-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .ch-kanban-grid { grid-template-columns: repeat(2, 1fr) !important; } .ch-bottom-widgets-grid { grid-template-columns: 1fr !important; } } @media (max-width: 650px) { .ch-kpi-grid { grid-template-columns: 1fr !important; } .ch-kanban-grid { grid-template-columns: 1fr !important; } .ch-hero-banner { flex-direction: column !important; align-items: stretch !important; } } /* ========================================================================== CUSTOM TEST PREP APP SUITE STYLES (IELTS, PTE, JAPANESE JLPT, GERMAN GOETHE) ========================================================================== */ .test-prep-app-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .test-prep-module-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 24px !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; transition: all 0.25s ease !important; } .test-prep-module-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(255, 85, 0, 0.08) !important; border-color: var(--orange-border) !important; } .module-card-top { margin-bottom: 18px !important; } .test-tag { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; padding: 4px 10px !important; border-radius: 12px !important; display: inline-block !important; margin-bottom: 12px !important; } .test-tag.ielts { background: #fee2e2 !important; color: #dc2626 !important; } .test-tag.pte { background: #eff6ff !important; color: var(--blue) !important; } .test-tag.japanese { background: #fdf2f8 !important; color: #db2777 !important; } .test-tag.german { background: #fefce8 !important; color: #ca8a04 !important; } .test-prep-module-card h4 { font-size: 18px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 8px !important; } .test-prep-module-card p { font-size: 13px !important; line-height: 1.5 !important; color: #64748b !important; margin: 0 !important; } .module-interactive-widget { margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid #e2e8f0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .mock-audio-box, .mock-kanji-box, .mock-german-box { background: #ffffff !important; border: 1px solid #e2e8f0 !important; padding: 12px 14px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; gap: 14px !important; } .waveform-anim { display: flex !important; align-items: center !important; gap: 3px !important; height: 24px !important; } .waveform-anim i { width: 3px !important; height: 100% !important; background: var(--orange) !important; border-radius: 2px !important; animation: wave 1.2s ease-in-out infinite !important; } .waveform-anim i:nth-child(2) { animation-delay: 0.2s !important; height: 60% !important; } .waveform-anim i:nth-child(3) { animation-delay: 0.4s !important; height: 80% !important; } .waveform-anim i:nth-child(4) { animation-delay: 0.1s !important; height: 100% !important; } .waveform-anim i:nth-child(5) { animation-delay: 0.3s !important; height: 70% !important; } .waveform-anim i:nth-child(6) { animation-delay: 0.5s !important; height: 40% !important; } .waveform-anim i:nth-child(7) { animation-delay: 0.2s !important; height: 90% !important; } @keyframes wave { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } } .mock-audio-box b, .mock-kanji-box b, .mock-german-box b { display: block !important; font-size: 12px !important; color: #0f172a !important; } .mock-audio-box small, .mock-kanji-box small, .mock-german-box small { font-size: 10px !important; color: #64748b !important; } .kanji-symbol, .german-symbol { font-size: 18px !important; font-weight: 800 !important; background: var(--orange-light) !important; color: var(--orange) !important; padding: 6px 10px !important; border-radius: 8px !important; } .mock-score-pills { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .mock-score-pills > div { background: #ffffff !important; border: 1px solid #e2e8f0 !important; padding: 8px 10px !important; border-radius: 8px !important; text-align: center !important; } .mock-score-pills small { display: block !important; font-size: 9px !important; color: #64748b !important; } .mock-score-pills b { font-size: 15px !important; color: var(--orange) !important; } .btn-test-sim { background: var(--orange) !important; color: #ffffff !important; border: none !important; padding: 10px 16px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s !important; } .btn-test-sim:hover { background: #ea580c !important; transform: translateY(-2px) !important; } @media (max-width: 800px) { .test-prep-app-grid { grid-template-columns: 1fr !important; } } /* ========================================================================== LIGHT NOTIFICATION DROPDOWN, SVG ICONS & CLEAN THEME ENHANCEMENTS ========================================================================== */ .notif-dropdown-panel { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(255, 85, 0, 0.04) !important; color: #0f172a !important; } .notif-header { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } .notif-header b { color: #0f172a !important; font-size: 12px !important; } .notif-header span { color: var(--orange) !important; font-weight: 700 !important; font-size: 10.5px !important; } .notif-item { border-bottom: 1px solid #f1f5f9 !important; background: #ffffff !important; color: #334155 !important; transition: background 0.15s ease !important; } .notif-item:hover { background: #f8fafc !important; } .notif-item.unread { background: #fff9f5 !important; border-left: 3px solid var(--orange) !important; } .notif-item p { color: #0f172a !important; font-size: 11px !important; margin-bottom: 3px !important; } .notif-item small { color: #64748b !important; font-size: 9.5px !important; } .notif-icon-pill { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .notif-icon-pill.green { background: #dcfce7; color: #16a34a; } .notif-icon-pill.orange { background: var(--orange-light); color: var(--orange); } .notif-icon-pill.blue { background: #eff6ff; color: var(--blue); } /* Nav SVG Icons */ .nav-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; color: inherit !important; } .nav-svg-icon { stroke: currentColor !important; } .app-bolt-icon { color: var(--orange) !important; display: inline-block !important; vertical-align: middle !important; margin-right: 3px !important; } .bell-svg-icon { stroke: #475569 !important; } .topbar-bell-btn:hover .bell-svg-icon { stroke: var(--orange) !important; } /* University Country Code Pill */ .univ-country-code { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 4px 8px; border-radius: 6px; } .k-univ-icon { display: inline-block; vertical-align: -1px; margin-right: 4px; stroke: #64748b; } .doc-icon svg { stroke: var(--orange); } /* Secondary Action Button (e.g. Student Portal) */ .btn-secondary-action { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; padding: 8px 14px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; } .btn-secondary-action:hover { background: #f1f5f9 !important; border-color: var(--orange) !important; color: var(--orange) !important; } /* ========================================================================== GMAIL MCP INTELLIGENCE VIEW ========================================================================== */ .gmail-mcp-container { display: flex; flex-direction: column; gap: 16px; } .gmail-mcp-top-bar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .mcp-status-pill { display: flex; align-items: center; gap: 8px; color: #334155; } .mcp-dot-live { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); display: inline-block; } .mcp-sync-stats { display: flex; gap: 14px; color: #64748b; font-weight: 600; } .gmail-inbox-grid { display: flex; flex-direction: column; gap: 12px; } .gmail-email-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); transition: all 0.2s ease; } .gmail-email-card:hover { border-color: var(--orange-border); box-shadow: 0 8px 20px rgba(255, 85, 0, 0.06); } .email-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .email-sender-wrap { display: flex; align-items: center; gap: 10px; } .email-badge-type { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; } .email-badge-type.green { background: #dcfce7; color: #16a34a; } .email-badge-type.orange { background: var(--orange-light); color: var(--orange); } .email-sender { font-size: 12px; color: #0f172a; } .email-date { font-size: 11px; color: #94a3b8; } .email-subject { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 6px; } .email-summary { font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 14px; } .email-bottom-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 12px; flex-wrap: wrap; gap: 10px; } .email-linked-student { font-size: 11px; color: #64748b; } .email-linked-student strong { color: #0f172a; margin-left: 4px; } .email-actions-group { display: flex; gap: 8px; } .btn-sync-email { background: var(--orange); color: #ffffff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.2s ease; } .btn-sync-email:hover { background: #ea580c; } .btn-view-raw-email { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; } /* ========================================================================== STAFF, VISAS & SUPPORT TICKETS VIEW ========================================================================== */ .staff-kpi-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .staff-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); transition: all 0.2s ease; } .staff-card:hover { border-color: var(--orange-border); box-shadow: 0 4px 12px rgba(255, 85, 0, 0.05); } .staff-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .staff-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--orange-light); color: var(--orange); font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } .staff-card-top b { display: block; font-size: 12px; color: #0f172a; line-height: 1.2; } .staff-card-top small { font-size: 9.5px; color: #64748b; white-space: nowrap; } .staff-stats-strip { display: flex; justify-content: space-between; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 9.5px; } .staff-stats-strip small { display: block; font-size: 8px; color: #64748b; font-weight: 700; text-transform: uppercase; } .staff-stats-strip strong { font-size: 11px; color: #0f172a; font-weight: 800; } .visas-tickets-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } .visa-flight-tracker, .support-tickets-panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .card-inner-header { margin-bottom: 12px; } .card-inner-header h4 { font-size: 13.5px; font-weight: 800; color: #0f172a; margin: 0 0 2px; } .flight-tag { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--blue); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; display: inline-block; } .tickets-list { display: flex; flex-direction: column; gap: 10px; } .ticket-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; transition: all 0.2s ease; } .ticket-card.resolved { background: #f0fdf4; border-color: #86efac; opacity: 0.75; } .ticket-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ticket-priority { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .ticket-priority.urgent { background: #fee2e2; color: #dc2626; } .ticket-priority.high { background: var(--orange-light); color: var(--orange); } .ticket-priority.normal { background: #eff6ff; color: var(--blue); } .ticket-id { color: #94a3b8; font-weight: 700; } .ticket-card b { font-size: 12px; color: #0f172a; display: block; } .ticket-student { font-size: 10.5px; color: #64748b; margin: 4px 0 10px; } .ticket-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 8px; font-size: 10px; } .btn-toggle-ticket { background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; padding: 3px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; cursor: pointer; } /* ========================================================================== STUDENT ID SELF-SERVICE PORTAL MODAL ========================================================================== */ .student-portal-modal-body { padding: 20px 24px; } .student-id-selector-bar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; } .student-id-selector-bar label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #334155; font-weight: 600; flex: 1; } .student-id-selector-bar select { flex: 1; background: #ffffff; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #0f172a; } .student-portal-sheet { display: flex; flex-direction: column; gap: 18px; } .portal-profile-bar { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; } .portal-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #ffffff; font-size: 15px; font-weight: 800; display: grid; place-items: center; } .portal-main-info h3 { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 2px; } .portal-main-info p { font-size: 12px; color: #64748b; margin: 0; } .portal-status-badge { margin-left: auto; } .status-pill-lg { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 6px 14px; border-radius: 20px; display: inline-block; } .status-pill-lg.green { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; } .status-pill-lg.orange { background: var(--orange-light); color: var(--orange); border: 1px solid var(--orange-border); } .portal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .portal-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; } .portal-card h5 { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; color: #0f172a; margin: 0 0 12px; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; } .portal-docs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 11px; } .portal-docs-list li { display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; padding: 7px 10px; border-radius: 6px; } .portal-visa-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; margin-top: auto; } .visa-status-title { display: block; font-size: 13px; font-weight: 800; color: #16a34a; margin-bottom: 6px; } .portal-visa-box p { font-size: 11px; color: #64748b; line-height: 1.4; margin: 0; } .portal-flight-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 12px; } .flight-route { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; color: var(--blue); } .flight-plane { font-size: 16px; } .flight-meta { font-size: 11px; color: #3b82f6; font-weight: 600; margin: 4px 0 0; } .portal-counselor-strip { margin-top: auto; font-size: 11px; } .portal-counselor-strip small { display: block; color: #64748b; } .portal-counselor-strip strong { display: block; color: #0f172a; font-size: 13px; margin: 2px 0 8px; } .btn-chat-counselor-portal { width: 100%; background: var(--orange); color: #ffffff; border: none; padding: 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; cursor: pointer; } /* ========================================================================== EXCEL VS CUSTOM ERP INTERACTIVE COMPARISON SECTION ========================================================================== */ .excel-vs-system-section { padding: 60px 0 30px; } .excel-comparison-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 40px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04); } .excel-header-block { text-align: center; max-width: 780px; margin: 0 auto 36px; } .comparison-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--orange); text-transform: uppercase; display: block; margin-bottom: 8px; } .excel-header-block h3 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 12px; } .excel-header-block p { font-size: 15px; color: #64748b; line-height: 1.6; margin: 0; } .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .comp-card { border-radius: 16px; padding: 28px; display: flex; flex-direction: column; } .comp-card.legacy-excel { background: #fff5f5; border: 1px solid #fecaca; } .comp-card.modern-erp { background: #f0fdf4; border: 2px solid #86efac; box-shadow: 0 12px 30px rgba(22, 163, 74, 0.06); } .comp-card-head { margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 16px; } .comp-badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-bottom: 8px; } .comp-badge.legacy { background: #fee2e2; color: #dc2626; } .comp-badge.active { background: #dcfce7; color: #16a34a; } .comp-card-head h4 { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0; } .comp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .comp-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; color: #334155; line-height: 1.5; } .comp-icon { flex-shrink: 0; margin-top: 3px; } .comp-icon.red { stroke: #dc2626; } .comp-icon.green { stroke: #16a34a; } .comp-list strong { color: #0f172a; display: block; font-weight: 700; margin-bottom: 2px; } @media (max-width: 900px) { .staff-kpi-matrix { grid-template-columns: 1fr 1fr; } .visas-tickets-layout { grid-template-columns: 1fr; } .portal-grid-3 { grid-template-columns: 1fr; } .comparison-grid { grid-template-columns: 1fr; } } /* ========================================================================== MOBILE APP SIMULATOR 5-SCREEN SUITE STYLING (LIGHT THEME + TECH ORANGE) ========================================================================== */ .sim-role-pill-quick { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2px 8px; cursor: pointer; transition: all 0.2s ease; font-weight: 700; font-size: 9px; color: var(--orange); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .sim-role-pill-quick:hover { background: var(--orange-light); border-color: var(--orange-border); } .sim-role-pill-quick.counselor-mode { background: #eff6ff; border-color: #bfdbfe; color: var(--blue); } .sim-tab-heading { margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; } .sim-tab-heading h4 { font-size: 13px; font-weight: 800; color: #0f172a; margin: 0 0 2px; } .sim-tab-heading small { font-size: 9px; color: #64748b; } /* Quick Shortcuts Grid */ .sim-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .sim-quick-btn { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; } .sim-quick-btn:hover { border-color: var(--orange); background: var(--orange-light); transform: translateY(-2px); } .sim-quick-btn svg { stroke: var(--orange); } .sim-quick-btn span { font-size: 8.5px; font-weight: 700; color: #334155; white-space: nowrap; } /* Services Scroll Screen */ .sim-services-scroll { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 380px; padding-right: 2px; } .sim-service-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); } .sim-service-top { display: flex; flex-direction: column; gap: 3px; } .sim-service-top b { font-size: 11px; color: #0f172a; line-height: 1.3; } .sim-badge-srv { font-size: 8px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; } .sim-badge-srv.red { background: #fee2e2; color: #dc2626; } .sim-badge-srv.blue { background: #dbeafe; color: var(--blue); } .sim-badge-srv.orange { background: var(--orange-light); color: var(--orange); } .sim-badge-srv.green { background: #dcfce7; color: #16a34a; } .sim-service-item p { font-size: 9.5px; color: #64748b; margin: 0; line-height: 1.35; } .sim-srv-action-btn { background: #ffffff; border: 1px solid #cbd5e1; color: var(--orange); padding: 5px 8px; border-radius: 6px; font-size: 9px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; width: 100%; } .sim-srv-action-btn:hover { background: var(--orange); color: #ffffff; border-color: var(--orange); } /* Flight Ticket Card */ .sim-flight-ticket-card { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .sim-flight-head { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; font-weight: 800; color: #1e40af; margin-bottom: 8px; } .flight-badge-confirmed { background: #dcfce7; color: #16a34a; padding: 2px 6px; border-radius: 10px; font-size: 8px; } .sim-flight-route-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .sim-flight-route-row strong { font-size: 14px; color: #0f172a; display: block; } .sim-flight-route-row small { font-size: 8px; color: #64748b; } .flight-arrow-mid { font-size: 10px; font-weight: 800; color: var(--blue); background: #ffffff; padding: 3px 8px; border-radius: 20px; border: 1px solid #bfdbfe; display: flex; align-items: center; } .sim-flight-meta-row { display: flex; justify-content: space-between; font-size: 8.5px; color: #475569; border-top: 1px dashed #bfdbfe; padding-top: 6px; } /* Revived Document Status Box */ .sim-docs-checklist-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; } .sim-docs-checklist-box h5 { font-size: 10.5px; font-weight: 800; color: #0f172a; margin: 0 0 8px; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; } .sim-doc-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 9.5px; border-bottom: 1px solid #f1f5f9; color: #334155; } .sim-doc-row:last-child { border-bottom: none; } /* Profile Screen */ .sim-profile-card-top { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; } .sim-avatar-lg { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #ffffff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; } .sim-prof-title h4 { font-size: 12px; color: #0f172a; margin: 0 0 2px; font-weight: 800; } .sim-prof-title small { font-size: 8.5px; color: #64748b; display: block; } .sim-profile-details-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .sim-prof-row { display: flex; justify-content: space-between; font-size: 9.5px; border-bottom: 1px solid #f1f5f9; padding-bottom: 4px; } .sim-prof-row:last-child { border-bottom: none; padding-bottom: 0; } .sim-prof-row span { color: #64748b; } .sim-prof-row strong { color: #0f172a; text-align: right; max-width: 140px; font-size: 9px; } .sim-test-scores-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .sim-test-scores-box h5 { font-size: 10px; font-weight: 800; color: #0f172a; margin: 0 0 8px; text-transform: uppercase; } .sim-test-pills-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sim-test-pill { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .sim-test-pill small { font-size: 8px; color: #64748b; font-weight: 700; } .sim-test-pill strong { font-size: 11px; color: var(--orange); font-weight: 800; } .sim-test-pill span { font-size: 7.5px; color: #475569; } /* Phone Bottom Nav Icons */ .sim-phone-bottom-nav { display: flex; background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; padding: 4px 0; justify-content: space-around; } .sim-nav-btn { flex: 1; background: none; border: none; color: #64748b; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; transition: all 0.15s ease; } .sim-nav-btn span { font-size: 8.5px; font-weight: 700; } .sim-nav-btn.is-active { color: var(--orange) !important; } .sim-nav-btn.is-active svg { stroke: var(--orange) !important; } .sim-nav-icon { stroke: #64748b; transition: stroke 0.15s ease; } /* ========================================================================== STUDENT CRM & APPLICATION DOSSIER TABLE STYLING ========================================================================== */ .student-id-tag { display: inline-block; font-size: 9px; font-weight: 700; color: #64748b; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; margin-left: 4px; } .tbl-student-cell { display: flex; align-items: flex-start; gap: 12px; min-width: 250px; } .student-meta-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .student-name-row { display: flex; align-items: center; gap: 6px; } .student-name-text { font-size: 13px; font-weight: 700; color: #0f172a; } .student-contact-sub { font-size: 11px; color: #64748b; margin-top: 4px; display: flex; flex-direction: column; gap: 3px; } .contact-line { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .contact-mini-svg { stroke: #94a3b8; flex-shrink: 0; } .contact-link { color: #475569; text-decoration: none; font-size: 11px; white-space: nowrap; transition: color 0.15s ease; } .contact-link:hover { color: var(--blue); text-decoration: underline; } .contact-link.phone-link { color: #0f172a; font-weight: 700; letter-spacing: 0.2px; } .dest-country-pill { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: #eff6ff; color: var(--blue); border: 1px solid #bfdbfe; padding: 1px 6px; border-radius: 4px; margin-top: 4px; } /* Language Exam Status Badges */ .status-test-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .status-test-pill.haven_not_taken { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } .status-test-pill.exam_booked { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; } .status-test-pill.verified { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } .sub-test-details { display: block; font-size: 9px; color: #64748b; margin-top: 2px; } /* Applied Date & Days Turnaround Tracker */ .applied-date-box { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: #334155; } .days-tracker-pill { display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 12px; width: fit-content; } .days-tracker-pill.days-fresh { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .days-tracker-pill.days-mid { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; } .days-tracker-pill.days-long { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; } /* Flight Itinerary Tag */ .flight-itinerary-tag { display: block; font-size: 9px; font-weight: 600; color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; padding: 2px 6px; border-radius: 4px; margin-top: 3px; width: fit-content; } /* ========================================================================== MOBILE & TABLET RESPONSIVE ENGINE (Clean section layouts, sleek tabs & tables) ========================================================================== */ @media (max-width: 860px) { /* ConsultHub ERP App Mobile Shell */ .dashboard-section { padding: 40px 0 30px !important; } .live-dashboard-app.ch-app-shell { grid-template-columns: 1fr !important; border-radius: 16px !important; min-height: auto !important; position: relative !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important; } .ch-sidebar-overlay { display: none; } .ch-sidebar-overlay.is-active { display: block !important; position: absolute !important; inset: 0 !important; background: rgba(15, 23, 42, 0.35) !important; backdrop-filter: blur(2px) !important; z-index: 55 !important; } .ch-sidebar { display: none !important; } .ch-sidebar.is-mobile-open { display: flex !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 270px !important; max-width: 85% !important; z-index: 60 !important; background: #ffffff !important; box-shadow: 4px 0 30px rgba(15, 23, 42, 0.15) !important; border-right: 1px solid #e2e8f0 !important; padding: 16px 12px !important; } .ch-sidebar-brand { display: flex !important; align-items: center !important; justify-content: space-between !important; } .ch-sidebar-close-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; font-size: 13px !important; cursor: pointer !important; margin-left: auto !important; } .ch-sidebar .ch-nav-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 8px !important; color: #475569 !important; background: transparent !important; border: 1px solid transparent !important; font-size: 12px !important; font-weight: 600 !important; width: 100% !important; box-sizing: border-box !important; } .ch-sidebar .ch-nav-item.is-active { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; font-weight: 700 !important; } .ch-sidebar .ch-nav-item span { flex: 1 !important; text-align: left !important; } .ch-sidebar .ch-badge { margin-left: auto !important; flex-shrink: 0 !important; font-size: 9px !important; padding: 2px 7px !important; background: #eff6ff !important; color: #2563eb !important; border-radius: 10px !important; } /* Top Bar Mobile */ .ch-topbar { padding: 12px 14px !important; flex-wrap: wrap !important; gap: 10px !important; } .ch-topbar-left { flex: 1 1 auto !important; } .ch-global-search { max-width: none !important; flex: 1 !important; } .ch-topbar-right { flex-wrap: wrap !important; gap: 8px !important; } .ch-user-chip .ch-user-info { display: none !important; } /* Content Body */ .ch-content-body { padding: 14px 12px 24px !important; } .ch-hero-banner { flex-direction: column !important; gap: 14px !important; padding: 16px 14px !important; } .ch-hero-side-card { min-width: auto !important; width: 100% !important; } /* KPI Grid */ .ch-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .ch-kpi-card { padding: 12px 10px !important; } .ch-kpi-value { font-size: 16px !important; } /* Quick Actions Bar Rail */ .ch-quick-actions-bar { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; padding-bottom: 4px !important; scrollbar-width: none !important; } .ch-quick-actions-bar::-webkit-scrollbar { display: none !important; } .ch-quick-act-btn { flex: 0 0 auto !important; white-space: nowrap !important; padding: 7px 12px !important; font-size: 11px !important; } /* Kanban Touch Rail */ .ch-kanban-grid { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 12px !important; padding-bottom: 12px !important; scrollbar-width: thin !important; } .ch-column { flex: 0 0 280px !important; min-width: 280px !important; scroll-snap-align: start !important; max-height: 520px !important; } /* Bottom Widgets Grid */ .ch-bottom-widgets-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .ch-reports-mini-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Table & Vault Scroll */ .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; background: #ffffff !important; margin-top: 10px !important; } .dashboard-table { min-width: 820px !important; background: #ffffff !important; } .dashboard-table th { padding: 10px 12px !important; font-size: 9.5px !important; background: #f8fafc !important; } .dashboard-table td { padding: 10px 12px !important; } .view-header-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin-bottom: 12px !important; } .view-filters { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .view-filters input, .view-filters select { width: 100% !important; padding: 8px 14px !important; font-size: 12px !important; } /* Packages on Mobile */ .tech-packages-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .tech-card-package { min-height: auto !important; padding: 20px 16px !important; } /* Mobile App Simulator in Tab */ .mobile-sim-layout { grid-template-columns: 1fr !important; gap: 16px !important; } .sim-phone-frame { margin: 0 auto !important; max-width: 320px !important; } /* Section 04: Contact & Brief Builder Mobile Containment */ #contact, .contact-finale { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; padding: 35px 0 20px !important; box-sizing: border-box !important; } #contact .wrap { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; } #contact h2 { font-size: clamp(28px, 7.5vw, 42px) !important; line-height: 1.15 !important; letter-spacing: -0.03em !important; word-break: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; margin: 20px 0 30px !important; } #contact h2 a { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; font-size: inherit !important; word-break: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; } .brief-builder { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 20px !important; margin-bottom: 30px !important; box-sizing: border-box !important; } .brief-intro { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; } .brief-intro h3 { font-size: 22px !important; margin: 0 !important; } .enquiry-art { width: 100px !important; max-width: 100px !important; height: auto !important; margin: 0 !important; } .contact-stepper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 16px 14px !important; box-sizing: border-box !important; border-radius: 12px !important; } .stepper-progress { max-width: 100% !important; justify-content: center !important; gap: 8px !important; margin-bottom: 20px !important; } .brief-fields { grid-template-columns: 1fr !important; width: 100% !important; gap: 14px !important; } .brief-fields label, .brief-fields input, .brief-fields select, .brief-fields textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .brief-fields textarea { min-height: 90px !important; } .contact-bottom { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; margin-bottom: 25px !important; word-break: break-word !important; overflow-wrap: break-word !important; } .contact-bottom a { font-size: 16px !important; word-break: break-all !important; } .contact-signature { width: 100% !important; max-width: 100% !important; padding: 16px 0 !important; overflow: hidden !important; text-align: center !important; } .contact-signature img { max-width: 100% !important; height: auto !important; max-height: 60px !important; object-fit: contain !important; margin: 0 auto !important; } .signature-subtext { font-size: 9px !important; line-height: 1.5 !important; letter-spacing: 0.5px !important; word-break: break-word !important; overflow-wrap: break-word !important; color: #64748b !important; font-weight: 700 !important; margin-top: 10px !important; text-transform: uppercase !important; } /* Section 01 Dashboard Header & Live Link Mobile */ .dashboard-title-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .dashboard-live-link-box { width: 100% !important; margin-top: 4px !important; } .btn-live-portal-link { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } /* Section 02 Solutions & Creative Brand Banner Mobile */ .studio-chapter { padding: 45px 0 !important; } .studio-chapter .wrap { width: calc(100% - 32px) !important; max-width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } .creative-services { grid-template-columns: 1fr !important; gap: 16px !important; width: 100% !important; } .creative-service { padding: 22px 18px !important; width: 100% !important; box-sizing: border-box !important; } .creative-service h3 { font-size: 20px !important; } .creative-brand-callout-banner { margin-top: 24px !important; padding: 20px 16px !important; border-radius: 14px !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; box-sizing: border-box !important; } .btn-creative-portal-link { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } .studio-footer { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: center !important; text-align: center !important; padding: 24px 0 !important; } } .contact-signature { text-align: center; padding: 32px 0 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .contact-signature img, .footer-illuu-logo { height: 52px; width: auto; max-width: 140px; background: transparent; display: block; margin: 0 auto; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .signature-subtext { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #64748b; margin-top: 14px; text-transform: uppercase; } /* ========================================================================== CONTACT STEPPER & BRIEF BUILDER ENHANCEMENTS ========================================================================== */ .contact-finale { padding: 60px 0 40px; } .contact-finale h2 { font-family: Base, Arial, sans-serif; letter-spacing: -0.035em; } .brief-builder { display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: start; margin-top: 24px; margin-bottom: 40px; } .brief-intro h3 { font-family: Base, Arial, sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: #0f172a; } .contact-stepper { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } .stepper-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .stepper-progress button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #ffffff; color: #64748b; font-family: Base, Arial, sans-serif; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .stepper-progress button.is-current { background: #2563eb; border-color: #2563eb; color: #ffffff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); } .stepper-progress button.is-complete { background: #0f172a; border-color: #0f172a; color: #ffffff; } .stepper-progress > span { flex: 1; height: 2px; background: #e2e8f0; margin: 0 10px; transition: background 0.3s ease; } .stepper-progress > span.is-complete { background: #0f172a; } .stepper-panel h3 { font-family: Base, Arial, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: #0f172a; margin: 0 0 20px; } .brief-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .brief-fields .brief-wide { grid-column: 1 / -1; } .brief-fields label { font-family: Base, Arial, sans-serif; font-size: 13px; font-weight: 600; color: #334155; display: flex; flex-direction: column; gap: 6px; } .brief-fields input, .brief-fields select, .brief-fields textarea { width: 100%; box-sizing: border-box; font-family: BaseText, Arial, sans-serif; font-size: 14px; color: #0f172a; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; min-height: 44px; outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .brief-fields textarea { min-height: 110px; resize: vertical; line-height: 1.5; } .brief-fields input:focus, .brief-fields select:focus, .brief-fields textarea:focus { background: #ffffff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .stepper-navigation { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9; } .stepper-navigation #brief-next { background: #2563eb; color: #ffffff; font-family: Base, Arial, sans-serif; font-size: 14px; font-weight: 600; border: none; border-radius: 8px; padding: 12px 24px; cursor: pointer; margin-left: auto; transition: background 0.2s, transform 0.1s; } .stepper-navigation #brief-next:hover { background: #1d4ed8; transform: translateY(-1px); } .stepper-navigation #brief-back { background: transparent; color: #64748b; font-family: Base, Arial, sans-serif; font-size: 14px; font-weight: 600; border: none; padding: 12px 16px; cursor: pointer; transition: color 0.2s; } .stepper-navigation #brief-back:hover { color: #0f172a; } .contact-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2e8f0; padding-top: 24px; margin-top: 20px; font-family: BaseText, Arial, sans-serif; gap: 20px; flex-wrap: wrap; } .contact-bottom p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.6; } .contact-direct-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn-wa-direct { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #ffffff !important; font-family: Base, Arial, sans-serif; font-weight: 700; font-size: 14px !important; padding: 10px 18px; border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; } .btn-wa-direct:hover { background: #1eb954; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); } .btn-email-direct { color: #2563eb; font-family: Base, Arial, sans-serif; font-weight: 700; text-decoration: none; font-size: 15px; padding: 10px 14px; border-radius: 8px; transition: color 0.2s, background 0.2s; } .btn-email-direct:hover { color: #1d4ed8; background: #f1f5f9; } .stepper-actions-group { display: flex; align-items: center; gap: 10px; margin-left: auto; } .btn-brief-wa { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #ffffff; font-family: Base, Arial, sans-serif; font-size: 14px; font-weight: 700; border: none; border-radius: 8px; padding: 12px 20px; cursor: pointer; box-shadow: 0 3px 12px rgba(37, 211, 102, 0.25); transition: background 0.2s, transform 0.1s; } .btn-brief-wa:hover { background: #1eb954; transform: translateY(-1px); } /* Floating WhatsApp Button - Compact Circular Icon */ .floating-wa-btn { position: fixed; bottom: 22px; right: 22px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #25d366; color: #ffffff; border-radius: 50%; text-decoration: none; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, background 0.2s; } .floating-wa-btn:hover { background: #1eb954; transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55); color: #ffffff; } .floating-wa-btn svg { width: 22px; height: 22px; display: block; } @media(max-width: 700px) { .contact-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .contact-direct-ctas { width: 100% !important; flex-direction: column !important; align-items: stretch !important; } .btn-wa-direct, .btn-email-direct { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; text-align: center !important; } .stepper-actions-group { width: 100% !important; flex-direction: column !important; gap: 10px !important; } .stepper-actions-group button { width: 100% !important; justify-content: center !important; } .floating-wa-btn { bottom: 18px; right: 18px; width: 40px; height: 40px; } .floating-wa-btn svg { width: 20px; height: 20px; } } /* Tech workspace: shared website typography and responsive component sizing. */ #main-dashboard-app, #main-dashboard-app *, .modal-backdrop-custom, .modal-backdrop-custom * { font-family: Base, Arial, sans-serif !important; } #main-dashboard-app { grid-template-columns: 220px minmax(0,1fr) !important; border-color: var(--line) !important; } #main-dashboard-app .ch-main-area, #main-dashboard-app .ch-content-body { min-width: 0; } #main-dashboard-app .ch-content-body { padding: 24px !important; } #main-dashboard-app .ch-nav-item { font-size: 12px !important; line-height: 1.4 !important; } #main-dashboard-app .ch-group-title { font-size: 10px !important; letter-spacing: .09em !important; } #main-dashboard-app .ch-hero-banner { background: #f1f3ff !important; border-color: #dce0ff !important; } #main-dashboard-app .ch-hero-banner h1, #main-dashboard-app .ch-hero-banner h2 { font-size: clamp(24px,2.4vw,34px) !important; line-height: 1.12 !important; letter-spacing: -.035em !important; font-weight: 400 !important; } #main-dashboard-app .ch-hero-banner p { font-size: 13px !important; line-height: 1.6 !important; } #main-dashboard-app .ch-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #main-dashboard-app .ch-kpi-body small { font-size: 12px !important; } #main-dashboard-app .ch-kpi-body strong { font-size: 28px !important; font-weight: 400 !important; } #main-dashboard-app .ch-sub, #main-dashboard-app .ch-trend { font-size: 11px !important; line-height: 1.5; } #main-dashboard-app .ch-kanban-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px !important; } #main-dashboard-app .ch-card { padding: 16px !important; box-shadow: none !important; cursor: grab; } #main-dashboard-app .ch-card:active { cursor: grabbing; } #main-dashboard-app .ch-card-name { font-size: 14px !important; line-height: 1.4 !important; } #main-dashboard-app .ch-card-degree, #main-dashboard-app .ch-card-univ { font-size: 12px !important; line-height: 1.5 !important; } #main-dashboard-app .ch-pill, #main-dashboard-app .ch-counselor-tag { font-size: 11px !important; line-height: 1.5 !important; } #main-dashboard-app .ch-card-meta { flex-wrap: wrap !important; gap: 8px !important; } #main-dashboard-app .ch-btn-details, #main-dashboard-app .ch-btn-move { font-size: 12px !important; min-height: 36px; } #main-dashboard-app .ch-btn-action { min-height: 40px; font-size: 12px !important; } #main-dashboard-app .ch-quick-actions-bar { flex-wrap: wrap !important; } #main-dashboard-app .ch-global-search input { font-size: 12px !important; } #main-dashboard-app .ch-topbar { gap: 12px !important; flex-wrap: wrap !important; } #main-dashboard-app .ch-topbar-left { min-width: 180px; flex: 1 !important; } #main-dashboard-app .ch-topbar-right { flex-wrap: wrap; } #main-dashboard-app .ch-bottom-widgets-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #main-dashboard-app .ch-bottom-widgets-grid > :last-child { grid-column: 1 / -1; } #main-dashboard-app .ch-cards-container:empty::after { content: 'No students match your search.'; display: block; padding: 24px 12px; font-size: 13px; color: #64748b; text-align: center; } #main-dashboard-app .dashboard-table { font-size: 13px; } #main-dashboard-app .ch-card-title-group, #main-dashboard-app .ch-kpi-body { min-width: 0; overflow-wrap: anywhere; } body.modal-open { overflow: hidden; } #toast { position: fixed; right: 24px; bottom: 24px; z-index: 1000; max-width: min(420px,calc(100vw - 32px)); padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 40px #1a1b1f20; transition: opacity .2s, transform .2s; } #toast.opacity-0 { opacity: 0; transform: translateY(20px); pointer-events: none; } #toast.opacity-100 { opacity: 1; transform: translateY(0); background: #fff; color: var(--ink); border-radius: 12px; } #toast-message { font-size: 13px; line-height: 1.5; } @media (min-width: 1500px) { #main-dashboard-app .ch-kanban-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } #main-dashboard-app .ch-kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } } @media (max-width: 860px) { #main-dashboard-app { grid-template-columns: minmax(0,1fr) !important; } #main-dashboard-app .ch-content-body { padding: 16px !important; } #main-dashboard-app .ch-bottom-widgets-grid { grid-template-columns: minmax(0,1fr) !important; } #main-dashboard-app .ch-card { padding: 14px !important; } #main-dashboard-app .ch-column { flex-basis: min(300px,82vw) !important; min-width: min(300px,82vw) !important; } } @media (max-width: 480px) { #main-dashboard-app .ch-kpi-card { flex-wrap: wrap !important; } #main-dashboard-app .ch-kpi-icon { width: 30px !important; height: 30px !important; } #main-dashboard-app .ch-kpi-body strong { font-size: 23px !important; } #main-dashboard-app .ch-topbar-right { width: 100%; justify-content: space-between; } #main-dashboard-app .ch-sub { overflow-wrap: anywhere; } } #main-dashboard-app .ch-hero-banner h2 { margin: 12px 0 !important; }