/* IBM Plex Sans Arabic, original IBM font files. Licence: SIL OFL 1.1. Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL ----------------------------------------------------------- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ----------------------------------------------------------- PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. "Reserved Font Name" refers to any names specified as such after the copyright statement(s). "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. */ @font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/plex-arabic-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/plex-arabic-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/plex-arabic-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/plex-arabic-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} :root{--ui-font:'IBM Plex Sans Arabic',Arial,sans-serif} html{font-synthesis:none} body{font-family:var(--ui-font);font-variant-numeric:tabular-nums} button,input,select,textarea{font-family:inherit} h1,h2,h3{font-weight:600;letter-spacing:normal} @font-face{font-family:'Noto Naskh Arabic';src:url('/assets/noto-naskh-arabic.woff') format('woff');font-weight:400 700;font-style:normal;font-display:swap} :root{--blue:#2256d9;--ink:#182431;--muted:#606d80;--paper:#f6f8fc;--line:#e1e6ef;--preview-brand:#2256d9;--preview-font:var(--ui-font)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.7 var(--ui-font)}button,input,select{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}button,a,input,select{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue)}button{border:0;background:none}h1,h2,h3,p{margin:0}fieldset{min-width:0}h1,h2,h3{letter-spacing:normal}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-90px;right:20px;z-index:100;padding:12px 20px;background:var(--blue);color:white;border-radius:8px}.skip-link:focus{top:12px}.section-shell{width:min(1440px,calc(100% - 64px));margin-inline:auto} .site-header{display:flex;flex-wrap:wrap;padding-block:12px;align-items:center;justify-content:space-between;gap:20px;min-height:84px;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:11px}.wordmark b{font:600 1.4375rem/1.3 var(--ui-font);letter-spacing:-.6px}.brand-dot{color:var(--blue)}.brand-icon{width:29px;height:29px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.brand-icon i{background:var(--blue);border-radius:3px}.brand-icon i:nth-child(2){opacity:.5}.brand-icon i:nth-child(3){opacity:.7}.customize-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:7px 14px;background:white;border:1px solid var(--line);border-radius:8px;font-size:0.875rem;font-weight:700}.customize-toggle svg{width:20px;height:20px}.customize-toggle:hover{border-color:var(--blue);color:var(--blue)} .projects-section{padding-block:24px 32px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px}.catalog-toolbar h1{font-size:1.625rem;font-weight:700;line-height:1.5}.project-filters{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.project-filters button{min-height:44px;padding:7px 17px;font-size:0.875rem;border-radius:7px;color:var(--muted);transition:background .15s,color .15s}.project-filters button[aria-pressed=true]{background:#e7eeff;color:#1847b3;font-weight:700}.project-filters button:hover{background:#e7eeff;color:#1847b3}.project-filters button span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding-inline:4px;margin-inline-start:6px;background:white;border-radius:4px;font:600 0.75rem/1 var(--ui-font)} .project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.project{min-width:0;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:border-color .18s,box-shadow .18s}.project:hover,.project:focus-within{border-color:#b3c5eb;box-shadow:0 7px 20px #142b5509}.project-visual{display:block;background:#e9eef6;border-bottom:1px solid var(--line);overflow:hidden}.project-visual img{width:100%;aspect-ratio:8/5;object-fit:cover;transition:transform .25s}.project-visual:hover img{transform:scale(1.015)}.project-visual:focus-visible{outline-offset:-4px}.project-content{padding:20px}.project-content h2{font:600 1.4375rem/1.4 var(--ui-font);letter-spacing:-.35px;text-align:start;overflow-wrap:anywhere}.project-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:0.875rem;margin-top:5px}.project-meta>span:last-child{font-size:0.8125rem}.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:19px}.button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border-radius:7px;font-size:0.875rem;font-weight:700;text-align:center}.primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}.primary:hover{background:#194ac8}.secondary{border:1px solid #d8dfeb;background:white;color:#3c4f6b}.secondary:hover{background:#f1f5fc;border-color:#b3c5eb} .customizer{width:min(740px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:white;box-shadow:0 25px 90px #101b3a30}.customizer::backdrop{background:#17233e73}.customizer-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 22px;border-bottom:1px solid var(--line)}.customizer-heading h2{font-size:1.25rem;line-height:1.5}.close-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font:1.75rem/1 var(--ui-font);border-radius:7px;color:var(--muted)}.close-button:hover{background:#f0f3f9}.customizer-open{overflow:hidden}.design-lab{background:#fff;overflow:hidden}.preview-stage{background:#f2f5fb}.browser-frame{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;font-family:var(--preview-font)}.browser-chrome{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid var(--line);color:var(--muted);font:0.75rem/1.5 var(--ui-font)}.browser-dots{display:flex;gap:4px}.browser-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#c7d0df}.identity-lab{margin:0}.name-field{display:grid;gap:6px}.name-field input{width:100%;border:1px solid #d6deeb;border-radius:7px;background:#fff}.palette{margin:0;padding:0;border:0}.palette button{border-radius:50%;background:var(--swatch);border:4px solid #fff;box-shadow:0 0 0 1px #d8dfeb}.palette button[aria-pressed=true]{box-shadow:0 0 0 2px var(--swatch)}.lab-open{color:var(--blue);font-weight:700}.font-field{display:flex;align-items:center;gap:10px}.font-field select{border:1px solid var(--line);border-radius:7px;background:white}.role-toggle{background:#eaf0fa;border-radius:7px;display:flex}.role-toggle button[aria-pressed=true]{background:#fff;color:var(--blue);box-shadow:0 1px 3px #18365b10;border-radius:5px}.lab-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line)}.lab-tabs>[role=tab][aria-selected=true]{color:var(--blue);background:#eaf0ff;border-radius:6px}.preview-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted)} /* On-demand identity previews. */ .check-icon{display:grid;place-items:center;width:17px;height:17px;border:1px solid #b9c8bb;border-radius:50%;color:#287347;font:12px var(--ui-font);flex-shrink:0} .lab-tabs{display:flex;align-items:center;gap:8px;padding:0 17px 12px;border-bottom:1px solid #e7ecf2} .lab-tabs>[role=tab]{display:flex;align-items:center;gap:7px;padding:8px 11px;font-size:13px;border-radius:6px;color:#687586;border:1px solid transparent} .lab-tabs>[role=tab] span{font:10px var(--ui-font)} .lab-tabs>[aria-selected=true]{background:#edf2fc;color:var(--blue);border-color:#d8e2f9} .role-toggle{display:flex;margin-inline-start:auto;padding:3px;border:1px solid #e0e6ee;border-radius:6px;background:#f5f7fa;gap:2px} .role-toggle button{font-size:11px;padding:4px 7px;border-radius:4px;min-height:30px;color:#6b7788} .role-toggle [aria-pressed=true]{background:#fff;color:#1d3555;box-shadow:0 1px 3px #15274012} .preview-stage{padding:28px 30px 17px;position:relative;background:#edf2fa;isolation:isolate;overflow:hidden} .browser-frame{border:1px solid #ced9e9;background:white;box-shadow:0 18px 30px #15355e12;border-radius:9px;overflow:hidden;transform:rotate(1deg);transition:transform .25s;font-family:var(--preview-font)} .design-lab:hover .browser-frame{transform:rotate(0)} .browser-chrome{padding:9px 12px;display:flex;align-items:center;gap:15px;background:#fff;border-bottom:1px solid #e7e9ec;direction:ltr} .browser-dots{display:flex;gap:4px} .browser-dots i{width:5px;height:5px;border-radius:50%;background:#d2d8e0} .browser-dots i:first-child{background:#ddac9f} .browser-dots i:nth-child(2){background:#dfd29d} .browser-dots i:last-child{background:#acc3ae} .browser-chrome>span:nth-child(2){margin:auto;font:9px var(--ui-font);color:#8a94a2} .browser-chrome>span:last-child{font:14px var(--ui-font);color:#a1aab6} .mini-store-nav{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;gap:15px;font-size:10px} .mini-store-nav strong{color:var(--preview-brand);font-size:13px;max-width:58%;overflow-wrap:anywhere} .mini-store-nav>span{font-size:9px;color:#667281} .mini-store-nav i{font-style:normal;padding:0 4px} .mini-store-nav .mini-bag{font:22px var(--ui-font);color:var(--preview-brand)} .mini-store-hero{position:relative;height:253px;background:#ebe1d2;overflow:hidden} .mini-store-hero img{width:100%;height:100%;object-fit:cover;object-position:60% center} .mini-store-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eee5d68c 0%,#eee5d600 52%)} .mini-store-copy{position:absolute;left:22px;top:32px;z-index:1;max-width:50%;color:#2d342e} .mini-store-copy small{font-size:10px} .mini-store-copy h2{font-size:31px;line-height:1.65;margin-top:8px;font-weight:700} .mini-static-button{display:inline-flex;align-items:center;gap:12px;color:white;background:var(--preview-brand);padding:8px 11px;border-radius:4px;margin-top:15px;font-size:10px} .mini-store-bottom{display:flex;justify-content:space-between;gap:15px;padding:9px 14px;font-size:9px;color:#7d837b} .mini-store-bottom>span:last-child{font:8px var(--ui-font);letter-spacing:.6px;align-self:center} .preview-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;font-size:10px;color:#77869a} .preview-count{color:#3d5675} .identity-lab{padding:16px 20px 17px;background:white} .identity-controls{display:flex;gap:20px;align-items:end} .name-field{display:grid;gap:5px;flex:1;min-width:0} .name-field>span{font-size:10px;color:#6d7988} .name-field input{width:100%;min-width:0;border:1px solid #dce2eb;border-radius:6px;font-size:12px;padding:8px 11px;background:#fbfcfe;min-height:41px} .name-field input::placeholder{color:#8691a1} .palette{border:0;margin:0;padding:0;display:flex;gap:7px} .palette legend{font-size:10px;color:#6d7988;padding:0;margin-bottom:8px} .palette button{width:27px;height:27px;border:3px solid white;outline:1px solid transparent;border-radius:50%;background:var(--swatch);position:relative;margin-block:5px} .palette button[aria-pressed=true]{outline:1px solid var(--swatch)} .palette button[aria-pressed=true]:after{content:'✓';color:white;font:11px var(--ui-font);position:absolute;inset:0;display:grid;place-items:center} .palette button:focus-visible{outline:3px solid var(--blue);outline-offset:3px} .lab-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px} .font-field{display:flex;align-items:center;gap:6px;min-width:0} .font-field>span{font-size:10px;color:#6d7988} .font-field select{font:10px var(--ui-font);max-width:150px;border:0;background:#f3f5f8;border-radius:4px;padding:6px 7px;min-height:32px} .lab-open{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:var(--blue);padding:5px 0} .lab-open>span{font:16px var(--ui-font)} .mini-admin{display:grid;grid-template-columns:105px minmax(0,1fr);min-height:316px;background:#f4f6fa} .mini-sidebar{display:flex;flex-direction:column;gap:8px;padding:18px 10px;background:white;border-inline-end:1px solid #e8edf3} .mini-sidebar>b{font-size:10px;margin-bottom:12px;color:var(--preview-brand);overflow-wrap:anywhere} .mini-sidebar>span{padding:7px 6px;border-radius:4px;font-size:9px;color:#7a8595} .mini-sidebar .selected{background:color-mix(in srgb,var(--preview-brand) 9%,white);color:var(--preview-brand)} .mini-admin-main{padding:17px 14px} .mini-admin-title{display:flex;align-items:center;justify-content:space-between;gap:6px} .mini-admin-title small{font-size:8px;color:#8793a3} .mini-admin-title h2{font-size:19px;line-height:1.65;margin-top:3px} .mini-avatar{display:grid;place-items:center;width:28px;height:28px;background:color-mix(in srgb,var(--preview-brand) 10%,white);color:var(--preview-brand);font-size:12px;border-radius:50%;flex-shrink:0} .mini-metrics{display:flex;gap:8px;margin:17px 0} .mini-metrics>div{background:white;border:1px solid #e3e9f1;border-radius:6px;flex:1;padding:10px} .mini-metrics small{font-size:8px;color:#758399} .mini-metrics b{display:block;font:600 26px var(--ui-font);color:var(--preview-brand);margin-top:6px} .mini-metrics span{font-size:7px;color:#92a0b1} .mini-table{background:white;border:1px solid #e4eaf2;border-radius:5px;padding:1px 10px} .mini-table>div{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:8px;border-bottom:1px solid #ecf0f5;gap:8px} .mini-table>div:first-child{font-size:9px} .mini-table>div:last-child{border:0} .status{font-size:7px;border-radius:20px;padding:2px 6px;white-space:nowrap} .mini-personal{padding:16px 24px 21px;min-height:316px;background:linear-gradient(145deg,color-mix(in srgb,var(--preview-brand) 9%,white),#fff 78%)} .mini-personal-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;color:var(--preview-brand)} .mini-personal-top strong{overflow-wrap:anywhere;max-width:86%} .mini-personal>p{font-size:11px;margin-top:18px;color:#74869d} .mini-personal>p span{margin-inline-start:5px;color:#b49643} .mini-personal h2{font-size:29px;line-height:1.45;margin-top:5px} .arrival-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dfe9f1;border-radius:9px;padding:14px 18px;margin-top:15px} .arrival-card div>span{font-size:9px;color:#7c8b9d;display:block} .arrival-card strong{display:block;font:600 30px var(--ui-font);color:var(--preview-brand);margin-top:5px} .arrival-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--preview-brand);background:color-mix(in srgb,var(--preview-brand) 10%,white);font:23px var(--ui-font)} .mini-personal-links{display:flex;justify-content:space-around;font-size:9px;color:#7b8a9d;padding-top:17px} .status-dot{width:5px;height:5px;display:inline-block;background:#468d70;border-radius:50%;margin-inline-end:5px} .attendance-chart{display:flex;gap:24px;align-items:center;padding:13px 0} .ring{width:88px;height:88px;background:conic-gradient(#2256d9 0deg 309deg,#e8eef6 309deg);border-radius:50%;padding:8px;flex-shrink:0} .ring>span{display:flex;align-items:center;justify-content:center;flex-direction:column;background:white;width:100%;height:100%;border-radius:50%} .ring b{font:600 24px var(--ui-font);color:#2c4260} .ring small{font-size:6px;color:#8492a5} .ring-legend{display:grid;gap:12px;font-size:8px;color:#7a8b9e} .ring-legend span{display:flex;align-items:center;gap:7px} .ring-legend i{width:6px;height:6px;border-radius:50%;background:#2256d9} .ring-legend>span:last-child i{background:#cbd7e5} .pulse-person{display:flex;gap:9px;align-items:center;border-top:1px solid #edf1f6;padding-top:10px;font-size:8px} .person-initial{width:25px;height:25px;background:#edf2fc;border-radius:50%;display:grid;place-items:center;color:#45689f} .pulse-person small{display:block;font-size:6px;color:#8396a9;margin-top:2px} .pulse-person>b{font:8px var(--ui-font);color:#72859c;margin-inline-start:auto} .identity-art{margin-inline:-23px;background:#233c53;overflow:hidden;border-top:1px solid #3a4f65} .identity-art img{width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.78} .identity-art>span{position:absolute;top:42%;right:24%;color:#fff;font-size:20px;font-weight:700;transform:rotate(-7deg);text-shadow:0 2px 4px #10263f66;max-width:60%;overflow-wrap:anywhere} @media(max-width:1100px){.lab-tabs{padding-inline:12px;gap:4px} .lab-tabs>[role=tab]{padding:7px 8px;font-size:11px} .lab-tabs>[role=tab] span{font-size:8px} .role-toggle button{font-size:10px;padding-inline:5px} .preview-stage{padding-inline:20px} .mini-store-hero{height:225px} .mini-store-copy h2{font-size:26px} .mini-store-copy{left:17px;top:30px} .mini-admin,.mini-personal{min-height:288px} .mini-sidebar{padding-inline:7px} .mini-admin{grid-template-columns:86px minmax(0,1fr)} .mini-admin-main{padding-inline:9px} .mini-metrics{gap:5px} .mini-metrics>div{padding:8px} .mini-admin-title h2{font-size:16px} .mini-admin-title small{font-size:7px} .identity-lab{padding-inline:15px} .identity-controls{gap:12px} .palette{gap:5px} .palette button{width:23px;height:23px} .lab-bottom{gap:6px} .font-field select{font-size:9px;max-width:128px} .lab-open{font-size:10px;gap:7px} .attendance-chart{gap:13px;padding-block:11px} .ring{width:73px;height:73px;padding:7px} .identity-art{margin-inline:-18px}} @media(max-width:850px){.lab-tabs{padding-inline:20px;gap:8px} .lab-tabs>[role=tab]{padding:8px 12px;font-size:13px} .lab-tabs>[role=tab] span{font-size:10px} .role-toggle button{font-size:11px;padding-inline:10px} .preview-stage{padding:25px 40px 18px} .mini-store-hero{height:265px} .mini-store-copy h2{font-size:33px} .mini-store-copy{left:26px;top:35px} .mini-admin,.mini-personal{min-height:329px} .mini-admin{grid-template-columns:120px minmax(0,1fr)} .mini-admin-main{padding:20px} .mini-admin-title h2{font-size:21px} .mini-admin-title small{font-size:9px} .mini-sidebar{padding-inline:12px} .mini-sidebar>span{font-size:10px} .mini-metrics{margin-block:18px} .mini-metrics>div{padding:13px} .mini-metrics small{font-size:9px} .mini-table>div{font-size:9px} .identity-lab{padding-inline:23px} .identity-controls{gap:24px} .palette{gap:8px} .palette button{width:28px;height:28px} .name-field input{font-size:13px} .font-field select{font-size:10px;max-width:160px} .lab-open{font-size:12px} .ring-legend{font-size:7px;gap:8px} .attendance-chart{gap:9px} .ring{width:64px;height:64px;padding:6px} .ring b{font-size:21px} .ring small{font-size:5px} .pulse-person{font-size:7px} .identity-art{margin-inline:-15px}} @media(max-width:620px){.check-icon{margin-top:2px} .lab-tabs{padding-inline:10px;padding-bottom:10px;gap:3px} .lab-tabs>[role=tab]{padding:7px 8px;font-size:11px;gap:4px} .lab-tabs>[role=tab] span{font-size:8px} .role-toggle{padding:2px;gap:1px} .role-toggle button{font-size:9px;padding:4px 6px;min-height:28px} .preview-stage{padding:25px 17px 14px} .browser-chrome{padding:8px 10px} .mini-store-nav{padding:10px;font-size:8px;gap:6px} .mini-store-nav strong{font-size:11px;max-width:60%} .mini-store-nav>span{font-size:8px} .mini-store-hero{height:221px} .mini-store-copy{left:15px;top:25px;max-width:49%} .mini-store-copy small{font-size:8px} .mini-store-copy h2{font-size:26px} .mini-static-button{font-size:9px;padding:7px 8px;gap:8px;margin-top:13px} .mini-store-bottom{font-size:8px;padding:8px 10px} .mini-store-bottom>span:last-child{font-size:6px} .preview-caption{font-size:9px;padding-top:12px} .identity-lab{padding:13px 14px 16px} .identity-controls{gap:12px} .palette{gap:5px} .palette button{width:25px;height:25px;border-width:3px} .palette legend,.name-field>span{font-size:9px} .name-field input{font-size:11px;padding:7px 9px;min-height:39px} .lab-bottom{margin-top:11px;gap:6px} .lab-open{font-size:10px;gap:5px} .font-field{gap:5px} .font-field>span{font-size:9px} .font-field select{max-width:135px;font-size:9px;padding:6px} .mini-admin{grid-template-columns:84px minmax(0,1fr);min-height:278px} .mini-sidebar{padding:15px 7px;gap:5px} .mini-sidebar>b{font-size:9px;margin-bottom:10px} .mini-sidebar>span{font-size:8px;padding:6px 4px} .mini-admin-main{padding:15px 10px} .mini-admin-title small{font-size:7px} .mini-admin-title h2{font-size:16px} .mini-avatar{width:24px;height:24px;font-size:10px} .mini-metrics{gap:6px;margin-block:15px} .mini-metrics>div{padding:9px 7px} .mini-metrics small{font-size:7px} .mini-metrics b{font-size:23px} .mini-metrics span{font-size:6px} .mini-table{padding-inline:8px} .mini-table>div{font-size:7px;gap:4px;padding-block:9px} .mini-table>div:first-child{font-size:8px} .status{font-size:6px;padding:2px 4px} .mini-personal{min-height:278px;padding:13px 20px 16px} .mini-personal-top{font-size:10px} .mini-personal>p{font-size:10px;margin-top:15px} .mini-personal h2{font-size:26px;line-height:1.5} .arrival-card{margin-top:12px;padding:10px 13px} .arrival-card div>span{font-size:8px} .arrival-card strong{font-size:27px} .arrival-icon{width:32px;height:32px;font-size:20px} .mini-personal-links{padding-top:14px;font-size:8px} .attendance-chart{gap:17px;padding-block:12px} .ring{width:77px;height:77px;padding:7px} .ring b{font-size:23px} .ring small{font-size:6px} .ring-legend{font-size:8px} .pulse-person{font-size:8px} .identity-art{margin:0 -23px 0 0;height:100%;min-height:179px;border:0;border-radius:8px 0 0 0;align-self:stretch} .identity-art>span{font-size:14px;right:15%;top:45%;max-width:75%} .identity-art img{object-position:48% center}} @media(max-width:370px){.lab-tabs>[role=tab]{font-size:10px;padding-inline:6px} .lab-tabs>[role=tab] span{font-size:7px} .role-toggle button{font-size:8px;padding-inline:5px} .identity-controls{gap:9px} .palette{gap:3px} .palette button{width:23px;height:23px} .font-field select{max-width:119px;font-size:8px} .lab-open{font-size:9px} .mini-store-copy h2{font-size:23px} .mini-store-copy small{font-size:7px} .mini-store-hero{height:204px} .mini-admin{grid-template-columns:74px minmax(0,1fr);min-height:262px} .mini-admin-main{padding-inline:8px} .mini-metrics small{font-size:6px} .mini-admin-title h2{font-size:14px} .mini-personal{min-height:262px} .ring{width:67px;height:67px} .attendance-chart{gap:9px} .ring-legend{font-size:7px} .identity-art{margin-inline-start:-18px}} @media(prefers-reduced-motion:reduce){.browser-frame,.design-lab:hover .browser-frame{transform:none}} .mini-business-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fff;padding:16px 22px} .mini-business-nav strong{font-size:16px;max-width:70%;overflow-wrap:anywhere;color:var(--preview-brand)} .mini-business-nav>span{font-size:13px;color:#66748b} .mini-business-hero{display:grid;grid-template-columns:1fr 1fr;background:#f7f8fa;min-height:267px} .mini-business-hero img{height:100%;width:100%;object-fit:cover;order:2} .mini-business-hero>div{padding:29px 22px;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:16px} .mini-business-hero small{font-size:13px;color:var(--preview-brand)} .mini-business-hero h2{font-size:28px;line-height:1.5} .mini-business-hero .mini-static-button{font-size:14px;padding:9px 14px;background:var(--preview-brand);color:#fff} .mini-business-bottom{padding:13px 22px;background:var(--preview-brand);color:white;font-size:14px} .mini-business-admin{padding:23px;background:#f6f8fc;min-height:363px} .mini-business-admin-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:14px;color:#69778b} .mini-business-admin-top strong{font-size:17px;color:var(--preview-brand);max-width:70%;overflow-wrap:anywhere} .mini-business-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block:20px} .mini-business-metrics>div{background:#fff;border:1px solid #dce5f1;padding:14px;border-radius:7px;display:grid;gap:5px} .mini-business-metrics b{font:600 27px var(--ui-font)} .mini-business-metrics span{font-size:13px;color:#66748b} .mini-business-admin h2{font-size:22px;margin-bottom:17px} .mini-business-requests{background:#fff;border:1px solid #dce5f1;border-radius:7px;padding:6px 13px} .mini-business-requests>div{display:flex;justify-content:space-between;gap:15px;padding:8px 0;font-size:14px} .mini-business-requests>div+div{border-top:1px solid #e1e7ef} .mini-business-requests b{font-size:13px;color:var(--preview-brand)} @media(max-width:1100px){.lab-tabs{flex-wrap:wrap} .lab-tabs .role-toggle{margin-inline-start:auto} .mini-business-nav{padding:14px 17px} .mini-business-nav>span{display:none} .mini-business-hero>div{padding:22px 17px} .mini-business-hero h2{font-size:26px} .mini-business-hero{min-height:244px} .mini-business-admin{min-height:338px}} @media(max-width:620px){.lab-tabs{gap:7px;padding-inline:13px} .lab-tabs>[role=tab]{font-size:13px;padding:7px 9px} .lab-tabs>[role=tab] span{font-size:12px} .lab-tabs .role-toggle{flex-basis:100%;justify-content:flex-start;margin-top:3px;margin-inline-start:0} .role-toggle button{font-size:13px;padding:5px 10px} .mini-business-nav{padding:13px 14px} .mini-business-nav strong{font-size:15px;max-width:100%} .mini-business-hero{min-height:275px;grid-template-columns:1.1fr 1fr} .mini-business-hero>div{padding:17px 12px;gap:13px} .mini-business-hero h2{font-size:24px} .mini-business-hero small{font-size:13px} .mini-business-hero .mini-static-button{font-size:14px;padding:8px 10px} .mini-business-bottom{font-size:13px;padding:11px 14px} .mini-business-admin{padding:18px 14px;min-height:351px} .mini-business-admin-top strong{font-size:16px} .mini-business-admin-top{font-size:13px} .mini-business-metrics{gap:9px} .mini-business-metrics>div{padding:11px} .mini-business-metrics span{font-size:13px} .mini-business-admin h2{font-size:21px} .mini-business-requests>div{font-size:14px;gap:8px} .mini-business-requests b{font-size:13px}} .customizer .lab-tabs{padding:12px 18px;gap:6px}.customizer .lab-tabs>[role=tab]{font-size:0.875rem;min-height:44px;padding:7px 12px;gap:6px}.customizer .lab-tabs>[role=tab] span{font-size:0.8125rem}.customizer .role-toggle{margin-inline-start:auto;padding:3px}.customizer .role-toggle button{min-height:40px;font-size:0.875rem;padding:6px 12px}.customizer .preview-stage{padding:18px 24px 12px}.customizer .browser-frame{transform:none;box-shadow:none}.customizer .browser-chrome{padding:9px 13px}.customizer .preview-caption{font-size:0.8125rem;padding-top:11px}.customizer .identity-lab{padding:18px 24px 22px}.customizer .identity-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end}.customizer .palette{display:flex;gap:10px}.customizer .palette legend,.customizer .name-field>span,.customizer .font-field>span{font-size:0.875rem;line-height:1.6}.customizer .palette legend{margin-bottom:8px}.customizer .palette button{width:40px;height:40px;flex-shrink:0}.customizer .name-field input{min-height:44px;padding:8px 12px;font-size:1rem}.customizer .lab-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:18px}.customizer .lab-open{font-size:0.875rem;min-height:44px;display:flex;align-items:center}.customizer .font-field{gap:9px}.customizer .font-field select{font-size:0.875rem;min-height:44px;max-width:none;padding:8px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--preview-brand);border-radius:50%;margin-inline-end:4px} @media(max-width:1050px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.section-shell{width:calc(100% - 48px)}} @media(max-width:650px){.section-shell{width:calc(100% - 32px)}.site-header{min-height:74px;gap:12px}.wordmark{gap:8px}.wordmark b{font-size:1.25rem}.brand-icon{width:25px;height:25px;gap:3px}.customize-toggle{padding-inline:11px}.projects-section{padding-block:20px 24px}.catalog-toolbar{gap:12px;margin-bottom:18px}.catalog-toolbar h1{font-size:1.4375rem}.project-filters{width:100%;gap:4px}.project-filters button{flex:1;padding-inline:8px}.project-grid{grid-template-columns:1fr;gap:20px}.project-content{padding:18px}.project-content h2{font-size:1.4375rem}.project-actions{gap:10px;margin-top:17px}.customizer-heading{padding:12px 15px}.customizer .lab-tabs{padding:10px 12px}.customizer .role-toggle{flex-basis:100%;justify-content:start;margin-inline-start:0}.customizer .preview-stage{padding:14px 12px 10px}.customizer .identity-lab{padding:14px 16px 18px}.customizer .identity-controls{grid-template-columns:1fr;gap:14px}.customizer .lab-bottom{margin-top:14px}.customizer .font-field{flex-wrap:wrap;gap:6px}.customizer .font-field select{max-width:100%}.customizer .lab-open{font-size:0.875rem}.customizer .browser-chrome{padding:8px 9px}} @media(max-width:370px){.wordmark b{font-size:1.125rem}.customize-toggle{padding-inline:9px;gap:5px}.brand-icon{width:23px;height:23px}.project-content{padding:15px}.project-actions{gap:8px}.button{padding-inline:6px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.project-visual:hover img{transform:none}} .project-preview{--ui-font:var(--preview-font);font-family:var(--preview-font)} @media(min-width:1280px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.project-content{padding:18px}.project-content h2{font-size:1.3rem}} .lab-tabs{flex-wrap:wrap}.mini-folio-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;padding:28px;align-items:center;background:#f4f0f5}.mini-folio-hero h2{font-size:36px;margin:15px 0;line-height:1.5}.mini-folio-hero small{color:#693f73}.mini-folio-hero img{width:100%;height:270px;object-fit:cover;object-position:center 25%;border-radius:120px 120px 12px 12px}.mini-folio-hero .mini-static-button{background:var(--preview-brand)}@media(max-width:600px){.mini-folio-hero{padding:16px;gap:14px}.mini-folio-hero h2{font-size:24px}.mini-folio-hero img{height:190px}.mini-folio-hero small{font-size:12px}} .mini-school-hero{padding:24px;background:#fffef6}.mini-school-hero small{color:var(--preview-brand);font-size:13px}.mini-school-hero h2{font-size:36px;line-height:1.5;margin:8px 0 18px}.mini-school-hero img{width:100%;height:220px;object-fit:cover;border-radius:6px}.mini-school-hero>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;font-size:13px}.mini-school-hero .mini-static-button{background:var(--preview-brand)}@media(max-width:600px){.mini-school-hero{padding:16px}.mini-school-hero h2{font-size:27px}.mini-school-hero img{height:180px}.mini-school-hero>div{flex-wrap:wrap}} .mini-estate-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;padding:25px;background:#fff}.mini-estate-hero>div{align-self:center}.mini-estate-hero small{color:var(--preview-brand);font-size:13px}.mini-estate-hero h2{font-size:27px;line-height:1.6;margin:13px 0 20px}.mini-estate-hero img{width:100%;height:280px;object-fit:cover;border-radius:4px}.mini-estate-hero .mini-static-button{background:var(--preview-brand)}@media(max-width:600px){.mini-estate-hero{padding:16px;gap:14px}.mini-estate-hero h2{font-size:20px}.mini-estate-hero img{height:230px}} .mini-mono-hero{padding:20px;background:white}.mini-mono-hero small{font-size:13px;color:var(--preview-brand)}.mini-mono-hero h2{font-size:31px;line-height:1.5;margin:10px 0 20px}.mini-mono-hero img{width:100%;height:190px;object-fit:cover;border-radius:3px}.mini-mono-hero>div{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-size:13px}.mono-project .project-visual{background:#232323}@media(max-width:600px){.mini-mono-hero{padding:16px}.mini-mono-hero h2{font-size:25px}.mini-mono-hero img{height:155px}} .booking-project .project-visual img{object-position:center 28%}.mini-clinic-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding:30px;background:#edf5f7;color:#123b50}.mini-clinic-layout img{height:290px;width:100%;object-fit:cover;border-radius:10px}.mini-clinic-layout h2{font-size:32px;margin:10px 0}.mini-clinic-types,.mini-clinic-slots{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;font-size:14px}.mini-clinic-types span,.mini-clinic-slots b{padding:7px;background:white;border:1px solid #bcd1d9;border-radius:6px}.mini-clinic-layout .mini-static-button{background:var(--preview-brand);color:white}@media(max-width:600px){.mini-clinic-layout{grid-template-columns:1fr;padding:18px}.mini-clinic-layout img{height:180px;object-position:center 25%}} .registration-visual{position:relative;background:#e3eafa}.registration-visual>img{object-fit:cover;object-position:center 38%}.mini-admit-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px;padding:25px;background:#f7f9fc;color:#1d2b43}.mini-admit-hero h2{font-size:27px;line-height:1.55;margin:12px 0}.mini-admit-hero small{font-size:11px;color:var(--preview-brand)}.mini-admit-hero p{font-size:12px;line-height:1.9}.mini-admit-hero>img{width:100%;height:240px;object-fit:cover;border-radius:12px}.mini-admit-programs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 25px 25px;background:#f7f9fc}.mini-admit-programs article{border:1px solid #e2e7f0;border-radius:8px;overflow:hidden;background:#fff}.mini-admit-programs img{width:100%;height:115px;object-fit:cover;display:block}.mini-admit-programs b{font-size:11px;display:block;color:var(--preview-brand);padding:10px 12px 0}.mini-admit-programs span{font-size:13px;line-height:1.7;display:block;padding:6px 12px 14px}@media(max-width:540px){.mini-admit-hero{grid-template-columns:1fr;padding:22px}.mini-admit-hero>img{height:180px}.mini-admit-programs{padding:0 22px 22px;gap:12px}} .mini-summit-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding:28px;background:#fff;color:#172b35}.mini-summit-hero h2{font-size:34px;line-height:1.4;margin:12px 0}.mini-summit-hero small{color:var(--preview-brand);font-size:12px}.mini-summit-hero p{font-size:13px;line-height:1.8}.mini-summit-hero img{height:290px;width:100%;object-fit:cover;border-radius:8px}.mini-summit-hero .mini-static-button{background:var(--preview-brand)}.mini-summit-band{padding:18px;background:var(--preview-brand);color:#fff;display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap;font-size:13px}@media(max-width:540px){.mini-summit-hero{grid-template-columns:1fr;padding:20px}.mini-summit-hero h2{font-size:28px}.mini-summit-hero img{height:180px}} /* Marketplace surfaces preserve the approved catalog; the header carries INEXCWEB. */ /* Existing original embedded font weights and their licence are retained. */ :root { --im-primary: #0056fd; --im-primary-hover: #004ce1; --im-text: #050b31; --im-muted: #5772a6; --im-border: #dce6f8; --im-surface: #ffffff; --im-page: #f4f8ff; --im-font: "IBM Plex Sans Arabic", Arial, sans-serif; --im-page-padding: 24px; --im-grid-gap: 16px; --im-card-radius: 16px; --im-button-radius: 7px; --im-card-shadow: 0 4px 16px rgb(62 111 214 / 7%); } .im-purchase-error{padding:14px 18px;border:1px solid #e6c4b9;border-radius:9px;background:#fff5f0;color:#8a3824;margin-bottom:18px!important;font-size:14px} .im-card-actions button:disabled{opacity:.6;cursor:wait} .im-marketplace, .im-marketplace * { box-sizing: border-box; } .im-marketplace { margin: 0; width: 100%; min-height: 100dvh; background: linear-gradient(180deg, #f5f9ff 0%, #f1f7ff 100%); color: var(--im-text); font-family: var(--im-font); font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .im-marketplace h1, .im-marketplace h2, .im-marketplace p { margin: 0; } .im-marketplace button, .im-marketplace input, .im-marketplace select { font: inherit; font-synthesis: none; color: inherit; } .im-marketplace button, .im-marketplace a { -webkit-tap-highlight-color: transparent; } .im-marketplace button { cursor: pointer; } .im-marketplace a { color: inherit; text-decoration: none; } .im-marketplace svg { width: 20px; height: 20px; flex: none; } .im-marketplace :is(a, button, input, select):focus-visible { outline: 3px solid rgb(0 86 253 / 35%); outline-offset: 3px; } .im-header { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / 96%); border-bottom: 1px solid #dde5f1; box-shadow: 0 3px 20px rgb(20 35 66 / 3%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .im-header-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; min-height: 90px; max-width: 1600px; margin-inline: auto; padding: 16px var(--im-page-padding); } .im-navigation { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .im-navigation > * { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 19px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #33425e; font-size: .9375rem; font-weight: 500; line-height: 1.6; max-width: 100%; white-space: normal; transition: background-color .18s, border-color .18s, color .18s, transform .18s; } .im-navigation svg { width: 19px; height: 19px; } .im-navigation > * > span { min-width: 0; overflow-wrap: anywhere; } .im-navigation .im-customize { background: #142342; color: #fff; border-color: #142342; box-shadow: 0 4px 10px rgb(20 35 66 / 10%); } .im-navigation .im-customize:hover { background: #0756ef; border-color: #0756ef; transform: translateY(-1px); } .im-navigation .im-support:hover { background: #f1f5fb; border-color: #e2e8f3; color: #142342; } .im-header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; padding-inline-start: 20px; border-inline-start: 1px solid #e2e8f3; } .im-cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 14px; border: 1px solid #dbe5f7; border-radius: 12px; background: #eef4ff; color: #244a92 !important; font-size: .9375rem !important; font-weight: 500 !important; line-height: 1.6; white-space: nowrap; transition: background-color .18s, border-color .18s; } .im-cart:hover { background: #e3edff; border-color: #bed0f1; } .im-cart svg { width: 20px; height: 20px; } .im-language { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 14px; border: 1px solid #dde4ee; border-radius: 12px; background: #fff; color: #33425e; font-size: .875rem; font-weight: 500; line-height: 1.6; white-space: nowrap; transition: background-color .18s, border-color .18s; } .im-language svg { width: 18px; height: 18px; color: #62738d; } .im-language:hover { background: #f6f8fc; border-color: #becae0; } .im-header :is(a, button):focus-visible { outline: 2px solid #0756ef; outline-offset: 4px; } .im-content { scroll-margin-block-start: 112px; } .im-content { width: 100%; padding: 24px var(--im-page-padding) 0; } .im-toolbar { display: grid; grid-template-columns: 278px minmax(0, 1fr) 356px; gap: 16px; align-items: center; margin-bottom: 22px; min-height: 52px; } .im-intro h1 { font-size: 22px; line-height: 30px; font-weight: 700; white-space: nowrap; } .im-intro p { font-size: 13px; line-height: 20px; color: var(--im-muted); margin-top: 2px; } .im-filter-tools { display: flex; align-items: center; gap: 8px; min-width: 0; } .im-category-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1; } .im-filter { border: 1px solid var(--im-border); background: var(--im-surface); border-radius: 11px; height: 40px; padding: 0 12px; white-space: nowrap; font-size: 13px !important; font-weight: 500 !important; } .im-filter.is-active { color: white; background: var(--im-primary); border-color: var(--im-primary); } .im-sort { flex: none; } .im-sort select { height: 40px; max-width: 112px; min-width: 106px; border: 1px solid var(--im-border); border-radius: 11px; background: white; padding-inline: 12px 24px; font-size: 13px; } .im-search { position: relative; display: flex; align-items: center; height: 40px; border: 1px solid var(--im-border); border-radius: 11px; background: white; } .im-search input { border: 0; border-radius: inherit; background: transparent; min-width: 0; width: 100%; height: 100%; padding-inline: 14px 44px; outline: none; font-size: 13px; direction: inherit; } .im-search input::placeholder { color: #6680af; opacity: 1; } .im-search svg { position: absolute; inset-inline-end: 14px; } .im-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-grid-gap); } .im-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--im-surface); border: 1px solid #e6edf9; border-radius: var(--im-card-radius); box-shadow: var(--im-card-shadow); } .im-preview { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 456 / 304; overflow: hidden; isolation: isolate; background: white; } .im-reference-slice { position: absolute; inset: 0; overflow: hidden; } .im-reference-slice img { position: absolute; display: block; max-width: none; height: auto; } .im-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px; } .im-card-summary { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .im-card-identity { min-width: 0; width: 100%; text-align: center; } .im-card-identity h2 { direction: ltr; unicode-bidi: isolate; font-size: 22px; line-height: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .im-category { direction: rtl; text-align: center; font-size: 16px; line-height: 24px; color: var(--im-muted); } [lang="en"] .im-category { direction: ltr; } .im-price { display: flex; justify-content: center; align-items: baseline; gap: 4px; font-size: 28px; line-height: 32px; font-weight: 700; color: var(--im-primary); } .im-price span { font-size: 19px; line-height: 24px; } .im-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; } .im-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 38px; padding: 5px 8px; border: 1px solid var(--im-primary); border-radius: var(--im-button-radius); font-size: 14px !important; line-height: 24px; font-weight: 500 !important; white-space: nowrap; } .im-button-primary { color: white !important; background: var(--im-primary); } .im-button-outline { color: var(--im-primary) !important; background: white; } .im-button-primary:hover { background: var(--im-primary-hover); } .im-button-outline:hover { background: #f1f6ff; } .im-button svg { width: 20px; height: 20px; } .im-screen-stage { position: absolute; inset: 0; background: var(--im-preview-tone, #f0f6ff); } .im-device { position: absolute; overflow: hidden; background: white; border: 2px solid #606b7b; border-radius: 10px; box-shadow: 0 4px 8px rgb(20 39 69 / 22%); } .im-device img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } .im-browser-chrome { position: absolute; top: 0; left: 0; right: 0; height: 10px; z-index: 1; background: #f6f7f9; display: flex; align-items: center; gap: 3px; padding-left: 6px; } .im-browser-chrome i { width: 3px; height: 3px; border-radius: 50%; background: #f05b51; } .im-browser-chrome i:nth-child(2) { background: #efb940; } .im-browser-chrome i:nth-child(3) { background: #3dbd7d; } .im-desktop { top: 5%; right: 3%; width: 74%; height: 91%; z-index: 2; border-width: 3px; } .im-desktop img, .im-secondary img { padding-top: 10px; } .im-secondary { top: 17%; left: 3%; width: 29%; height: 77%; z-index: 1; } .im-detail { bottom: 3%; left: 3%; width: 27%; height: 45%; z-index: 3; border-color: #cbd3df; } .im-mobile { bottom: 1.5%; right: 1.5%; width: 17%; height: 52%; z-index: 4; border: 3px solid #10141c; border-radius: 13px; } .im-phone-notch { position: absolute; top: 0; left: 25%; width: 50%; height: 4%; background: #10141c; z-index: 1; border-radius: 0 0 5px 5px; } .im-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 32px 6px; color: var(--im-muted); min-height: 32px; } .im-footer > div { display: flex; gap: 12px; font-size: 11px; } .im-footer strong { font-size: 22px; color: var(--im-primary); line-height: 26px; } .im-empty { margin: 32px auto !important; text-align: center; color: var(--im-muted); font-size: 16px; } .im-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (min-width: 1600px) { .im-content, .im-footer { max-width: 1600px; margin-inline: auto; } } @media (max-width: 1300px) { .im-toolbar { grid-template-columns: minmax(250px, 1fr) 356px; } .im-intro { grid-column: 1; } .im-search { grid-column: 2; grid-row: 1; } .im-filter-tools { grid-column: 1 / -1; } .im-category-filters { flex: none; flex-wrap: wrap; } .im-sort { margin-inline-start: auto; } .im-card-identity h2 { font-size: 20px; } } @media (max-width: 1099px) { .im-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .im-card-identity h2 { font-size: 22px; } } @media (max-width: 759px) { .im-marketplace { --im-page-padding: 16px; --im-grid-gap: 16px; } .im-header-shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 14px 12px; min-height: 0; } .im-header-actions { margin-inline-start: auto; padding-inline-start: 0; border-inline-start: 0; } .im-language, .im-cart { min-height: 44px; padding: 9px 12px; } .im-cart > span { display: none; } .im-navigation { order: 3; flex: 1 1 100%; gap: 8px; padding-top: 12px; border-top: 1px solid #edf0f6; } .im-navigation > * { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: .875rem; } .im-navigation .im-support { background: #f5f7fb; border-color: #e3e9f3; } .im-content { scroll-margin-block-start: 156px; } .im-content { padding-top: 20px; } .im-toolbar { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; } .im-intro, .im-search, .im-filter-tools { grid-column: 1; grid-row: auto; } .im-intro h1 { font-size: 22px; white-space: normal; } .im-intro p { font-size: 13px; } .im-search { height: 44px; } .im-filter-tools { flex-wrap: wrap; } .im-category-filters { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; } .im-filter { min-height: 40px; } .im-sort { margin-inline-start: 0; } .im-grid { grid-template-columns: 1fr; } .im-card-identity h2 { white-space: normal; overflow-wrap: anywhere; } .im-button { min-height: 44px; } .im-footer { padding: 12px 16px; } } @media (max-width: 380px) { .im-card-summary { gap: 6px; } .im-card-identity h2 { font-size: 18px; } .im-category { font-size: 14px; } .im-price { font-size: 25px; } .im-button { gap: 6px; font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { .im-marketplace * { scroll-behavior: auto !important; transition: none !important; } } /* Every record is shown in one grid and reuses the same card layout. */ .im-marketplace [hidden] { display: none !important; } .im-device iframe { position: absolute; top: 10px; left: 0; border: 0; transform-origin: top left; pointer-events: none; background: white; } .im-mobile iframe { top: 4px; } .im-cart b { min-width: 22px; background: var(--im-primary); color: white; border-radius: 12px; font-size: 12px; text-align: center; } .im-dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--im-border); border-radius: 16px; color: var(--im-text); box-shadow: 0 24px 80px rgb(5 11 49 / 20%); } .im-dialog::backdrop { background: rgb(5 11 49 / 45%); } .im-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--im-border); } .im-dialog-heading h2 { font-size: 20px; } .im-dialog-heading button { width: 44px; height: 44px; font-size: 26px; } .im-dialog-body { padding: 20px; font-size: 16px; line-height: 1.9; } .im-dialog-body > p + p { margin-top: 16px; } .im-notice { padding: 12px; border: 1px solid var(--im-border); border-radius: 8px; background: #f1f6ff; color: var(--im-text); } .im-cart-item { padding: 16px 0; border-bottom: 1px solid var(--im-border); } .im-cart-item h3 { font-size: 20px; text-align: start; } .im-cart-item p { color: var(--im-muted); margin-top: 5px; } .im-cart-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .im-cart-actions .im-button { min-height: 44px; } .im-remove { min-height: 44px; padding: 8px 12px; text-decoration: underline; } .im-cart-total { margin-top: 16px; font-weight: 600; } .im-dialog-open { overflow: hidden; } .im-preview-dialog { width: min(660px, calc(100% - 32px)); overflow: auto; overscroll-behavior: contain; } .im-preview-dialog .im-dialog-heading { position: relative; justify-content: center; min-height: 72px; padding: 18px 64px; text-align: center; } .im-preview-dialog .im-dialog-heading button { position: absolute; inset-inline-end: 16px; flex: none; border: 0; border-radius: 10px; background: #f1f6ff; color: var(--im-muted); } .im-preview-dialog .im-dialog-heading button:hover { color: var(--im-primary); background: #e8f0ff; } .im-preview-dialog .im-dialog-body { padding: 22px; } .im-preview-name { font-size: 22px; line-height: 1.4; font-weight: 600; text-align: center; overflow-wrap: anywhere; } .im-preview-intro { margin-top: 6px !important; font-size: 14px; color: var(--im-muted); text-align: center; } .im-preview-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; } .im-preview-option { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; min-height: 246px; padding: 22px 18px; border: 1px solid var(--im-border); border-radius: 18px; background: #fbfdff; text-align: center; transition: background-color 160ms, border-color 160ms; } .im-preview-option:hover { border-color: var(--im-primary); background: #f1f6ff; } .im-option-icon { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border: 1px solid #dce6f8; border-radius: 18px; background: #edf3ff; color: var(--im-primary); } .im-option-icon svg { width: 32px; height: 32px; } .im-option-copy { display: grid; gap: 6px; width: 100%; justify-items: center; text-align: center; } .im-option-copy strong { font-size: 18px; font-weight: 600; line-height: 1.5; } .im-option-copy > span { max-width: 250px; font-size: 14px; line-height: 1.8; color: var(--im-muted); } .im-option-arrow { display: grid; place-items: center; align-self: center; width: 28px; height: 28px; margin-top: auto; border-radius: 50%; background: #edf3ff; color: var(--im-primary); } .im-option-arrow svg { width: 16px; height: 16px; } [dir="ltr"] .im-option-arrow svg { transform: rotate(180deg); } @media (max-width: 480px) { .im-preview-dialog .im-dialog-heading { padding: 16px 62px; } .im-preview-dialog .im-dialog-body { padding: 16px; } .im-preview-options { gap: 12px; margin-top: 16px; } .im-preview-option { gap: 12px; min-height: 244px; padding: 18px 10px; } .im-option-icon { width: 52px; height: 52px; border-radius: 16px; } .im-option-icon svg { width: 28px; height: 28px; } .im-option-copy strong { font-size: 16px; } .im-option-copy > span { font-size: 13px; } } @media (max-width: 759px) { .im-filter { min-height: 44px; height: auto; } .im-sort select { min-height: 44px; } } @media (max-width: 380px) { .im-intro h1 { font-size: 20px; } } .im-preview-language{position:absolute;inset:0;width:100%;height:100%}.im-preview-language[hidden]{display:none!important} /* Compact buttons retain the approved horizontal icon-and-label layout. */ .im-card{container-type:inline-size;container-name:website-card} .im-card-actions{grid-template-columns:minmax(0,1.35fr) minmax(0,1.52fr) minmax(0,1.04fr);gap:6px} .im-card-actions .im-button{flex-direction:row;flex-wrap:nowrap;gap:4px;min-height:40px;padding:6px 4px;font-size:0.875rem!important;line-height:1.5;white-space:normal;text-align:center;transition:background-color .15s,border-color .15s} .im-card-actions .im-button svg{width:1rem;height:1rem;flex:none} .im-card-actions .im-button span{min-width:0;overflow-wrap:anywhere} .im-card-actions .im-action-label-short{display:none} .im-card-actions .im-button:focus-visible{outline:2px solid var(--im-primary);outline-offset:2px} .im-button-whatsapp{color:#157347!important;background:#fff;border-color:#94c7aa} .im-button-whatsapp:hover:not(:disabled){background:#f0faf4;border-color:#157347} .im-card-actions .im-button-whatsapp:focus-visible{outline-color:#157347} .im-card-actions .im-button-whatsapp:disabled{cursor:not-allowed;color:#347a50!important;background:#fff;border-color:#b9d8c5;opacity:.65} [lang="en"] .im-card-actions{grid-template-columns:minmax(0,1.14fr) minmax(0,1.42fr) minmax(0,1.03fr)} @container website-card (max-width:400px){ [lang="en"] .im-card-actions{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr)} [lang="en"] .im-card-actions .im-action-label-full{display:none} [lang="en"] .im-card-actions .im-action-label-short{display:inline} } @container website-card (max-width:310px){ .im-card-actions{gap:4px} .im-card-actions .im-button{padding-inline:3px;gap:3px} .im-card-actions .im-button svg{width:14px;height:14px} } @media(max-width:430px){.im-language-label{display:none}.im-language,.im-cart{min-width:44px;padding-inline:10px}} @media(max-width:1000px) and (min-width:760px){.im-header-shell{gap:16px}.im-header-actions{padding-inline-start:14px}.im-navigation>*{padding-inline:14px}.im-cart>span{display:none}} @media(max-width:759px){.im-card-actions .im-button{min-height:44px}} @media(prefers-reduced-motion:reduce){.im-card-actions .im-button,.im-navigation>*,.im-language,.im-cart{transition:none}.im-navigation .im-customize:hover{transform:none}} .mini-landing-frame{position:relative;width:100%;height:365px;overflow:hidden;background:white;border:1px solid #dce2eb;border-radius:12px}.mini-landing-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none;background:white} @media(max-width:600px){.mini-landing-frame{height:310px}} /* Manrope by Mikhail Sharanda and Thomas Gillett, SIL OFL 1.1. Original font, source hash and licence: public/assets/INEXCWEB-FONT-SOURCE.json. */ @font-face { font-family: "INEXCWEB Manrope"; src: url("/assets/inexcweb-manrope-700.woff") format("woff"); font-style: normal; font-weight: 700; font-display: swap; } .iw-brand { display: inline-flex; flex-direction: row; align-items: center; min-height: 44px; max-width: 100%; gap: 11px; direction: ltr; text-align: left; flex-shrink: 0; color: #142342; line-height: 1; text-decoration: none; } .iw-brand .iw-brand-symbol { display: block; flex: none; width: 40px; height: 40px; margin: 0; color: #0756ef; border-radius: 12px; box-shadow: 0 4px 12px rgb(7 86 239 / 15%); } .iw-brand .iw-brand-symbol svg { display: block; width: 100%; height: 100%; } .iw-brand .iw-wordmark { display: inline-block; font: 700 1.875rem/1.15 "INEXCWEB Manrope", Arial, sans-serif; font-synthesis: none; letter-spacing: -.065em; color: #142342; white-space: nowrap; } .iw-brand .iw-wordmark-accent { color: #0756ef; font: inherit; letter-spacing: inherit; margin: 0; } .iw-brand-small .iw-brand-symbol { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; } .iw-brand-small .iw-wordmark { font-size: 1.25rem; } @media (max-width: 759px) { .iw-brand { gap: 8px; } .iw-brand .iw-brand-symbol { width: 34px; height: 34px; border-radius: 10px; } .iw-brand .iw-wordmark { font-size: 1.5rem; } .iw-brand-small .iw-brand-symbol { width: 26px; height: 26px; } .iw-brand-small .iw-wordmark { font-size: 1.125rem; } } @media (max-width: 380px) { .iw-brand .iw-brand-symbol { width: 32px; height: 32px; } .iw-brand .iw-wordmark { font-size: 1.375rem; } .iw-brand-small .iw-brand-symbol { width: 26px; height: 26px; } .iw-brand-small .iw-wordmark { font-size: 1.125rem; } } /* Public marketplace: bounded content, touch controls and reflow at phone widths. */ .im-marketplace .im-intro, .im-marketplace .im-search, .im-marketplace .im-dialog-body, .im-marketplace .customizer .design-lab, .im-marketplace .customizer .lab-controls { min-width: 0; } .im-marketplace .im-intro h1 { white-space: normal; overflow-wrap: anywhere; } .im-marketplace .im-category-filters { flex: 1 1 0%; } .im-marketplace .im-intro { grid-column: 1; grid-row: 1; } .im-marketplace .im-filter-tools { grid-column: 2; grid-row: 1; } .im-marketplace .im-search { grid-column: 3; grid-row: 1; } .im-marketplace .im-footer { flex-wrap: wrap; justify-content: center; gap: 16px; padding: 20px var(--im-page-padding); } .im-marketplace .im-footer > div { min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .875rem; } .im-marketplace .im-footer > div a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; } .im-marketplace :is(.im-dialog, .customizer) { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; } .im-marketplace :is(.im-dialog-heading, .customizer-heading) { position: sticky; top: 0; z-index: 5; gap: 12px; background: #fff; } .im-marketplace :is(.im-dialog-heading, .customizer-heading) h2 { min-width: 0; overflow-wrap: anywhere; } .im-marketplace :is(.im-dialog-heading, .customizer-heading) button { flex: none; min-width: 44px; min-height: 44px; } .im-marketplace .im-dialog-body { overflow-wrap: anywhere; } .im-marketplace .customizer .lab-controls { border-bottom: 1px solid var(--im-border); } .im-marketplace .customizer .lab-tabs { border-bottom: 0; } .im-marketplace .customizer .role-toggle { width: fit-content; max-width: calc(100% - 36px); margin: 0 18px 12px; } .im-marketplace .customizer .role-toggle button { min-height: 44px; } .im-marketplace .customizer .browser-chrome > span { min-width: 0; overflow-wrap: anywhere; } .im-marketplace .customizer .preview-caption { flex-wrap: wrap; } .im-marketplace .customizer .project-preview :is(h2, strong, b, p, span) { overflow-wrap: anywhere; } .im-marketplace .im-contact-header { flex-wrap: wrap; } .im-marketplace .im-contact-header > a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; } .im-marketplace .im-contact-action { max-width: 100%; } @media (max-width: 1300px) { .im-marketplace .im-search { grid-column: 2; } .im-marketplace .im-filter-tools { grid-column: 1 / -1; grid-row: 2; } } @container website-card (max-width: 400px) { .im-marketplace .im-card-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .im-marketplace .im-card-actions .im-action-label-full { display: none; } .im-marketplace .im-card-actions .im-action-label-short { display: inline; } [lang="en"] .im-marketplace .im-card-actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr); } } /* The middle navigation needs its own row before the desktop header gets crowded. */ @media (min-width: 760px) and (max-width: 1023px) { .im-marketplace .im-header-shell { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; padding-block: 12px; } .im-marketplace .im-navigation { grid-column: 1 / -1; grid-row: 2; } .im-marketplace .im-header-actions { grid-column: 2; grid-row: 1; } .im-marketplace .im-content { scroll-margin-block-start: 154px; } } @media (max-width: 759px) { .im-marketplace { --im-page-padding: 16px; --im-grid-gap: 18px; } .im-marketplace .im-header-shell { gap: 8px 12px; padding-block: 10px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); } .im-marketplace .im-header-shell > * { max-width: 100%; } .im-marketplace .im-header-actions { flex: 0 1 auto; flex-wrap: wrap; gap: 6px; } .im-marketplace .im-navigation { padding-top: 8px; gap: 8px; } .im-marketplace .im-navigation > * { padding-block: 7px; } .im-marketplace .im-language-label { display: none; } .im-marketplace :is(.im-language, .im-cart) { min-width: 44px; padding: 8px 10px; } .im-marketplace .im-content { padding-top: 20px; scroll-margin-block-start: 138px; } .im-marketplace .im-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; margin-bottom: 18px; } .im-marketplace .im-intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; } .im-marketplace .im-intro h1 { font-size: 1.375rem; line-height: 1.55; } .im-marketplace .im-intro p { font-size: .875rem; line-height: 1.7; } .im-marketplace .im-search { grid-column: 1; grid-row: 2; height: 48px; } .im-marketplace .im-search input { font-size: 1rem; padding-inline: 12px 40px; } .im-marketplace .im-filter-tools { display: contents; } .im-marketplace .im-sort { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; } .im-marketplace .im-sort select { width: 7.5rem; min-width: 0; max-width: 128px; height: 48px; font-size: 1rem; padding-inline: 8px 20px; } .im-marketplace .im-category-filters { grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: #c8d7ef transparent; } .im-marketplace .im-filter { flex: none; min-height: 44px; padding-inline: 14px; font-size: .875rem !important; } .im-marketplace .im-grid { grid-template-columns: minmax(0, 1fr); } .im-marketplace .im-card-body { padding: 14px 12px; gap: 10px; } .im-marketplace .im-card-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } [lang="en"] .im-marketplace .im-card-actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr); } .im-marketplace .im-card-actions .im-button { min-height: 46px; padding: 8px 4px; gap: 4px; } .im-marketplace .im-card-actions .im-action-label-full { display: none; } .im-marketplace .im-card-actions .im-action-label-short { display: inline; } .im-marketplace .im-footer { flex-direction: column-reverse; align-items: center; gap: 12px; padding-block: 24px max(20px, env(safe-area-inset-bottom)); } .im-marketplace .im-footer > div { width: 100%; justify-content: center; gap: 4px 16px; text-align: center; } .im-marketplace .im-footer > div > span { display: none; } .im-marketplace :is(.im-dialog, .customizer) { width: calc(100% - 24px); max-width: none; margin: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 16px; } .im-marketplace :is(.im-dialog-heading, .customizer-heading) { padding: 10px 12px; } .im-marketplace :is(.im-dialog-heading, .customizer-heading) h2 { font-size: 1.125rem; line-height: 1.6; } .im-marketplace .im-preview-dialog .im-dialog-heading { min-height: 64px; padding: 12px 60px; } .im-marketplace .im-preview-dialog .im-dialog-heading button { inset-inline-end: 10px; } .im-marketplace .im-dialog-body { padding: 16px; } .im-marketplace .im-preview-dialog .im-dialog-body { padding: 16px; } .im-marketplace .im-preview-options { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; } .im-marketplace .im-preview-option { flex-direction: row; align-items: center; min-height: 112px; gap: 12px; padding: 16px 12px; text-align: start; border-radius: 12px; } .im-marketplace .im-option-icon { width: 44px; height: 44px; border-radius: 12px; } .im-marketplace .im-option-icon svg { width: 25px; height: 25px; } .im-marketplace .im-option-copy { flex: 1; min-width: 0; width: auto; justify-items: start; text-align: start; } .im-marketplace .im-option-copy strong { font-size: 1rem; } .im-marketplace .im-option-copy > span { font-size: .875rem; line-height: 1.75; } .im-marketplace .im-option-arrow { margin: 0; flex: none; width: 22px; height: 22px; } .im-marketplace .customizer .lab-tabs { width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 10px 12px; scroll-padding-inline: 12px; overscroll-behavior-x: contain; scrollbar-width: thin; } .im-marketplace .customizer .lab-tabs > [role=tab] { flex: none; white-space: nowrap; } .im-marketplace .customizer .role-toggle { width: auto; max-width: none; margin: 0 12px 12px; gap: 4px; } .im-marketplace .customizer .role-toggle button { flex: 1; min-width: 0; } .im-marketplace .customizer .preview-stage { padding: 12px; } .im-marketplace .customizer .identity-lab { padding: 16px 12px 20px; } .im-marketplace .customizer .identity-controls { grid-template-columns: minmax(0, 1fr); gap: 16px; } .im-marketplace .customizer .palette { flex-wrap: wrap; gap: 10px; min-width: 0; } .im-marketplace .customizer .palette button { width: 44px; height: 44px; } .im-marketplace .customizer .font-field { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .im-marketplace .customizer .font-field select { width: 100%; min-width: 0; max-width: 100%; font-size: 1rem; } .im-marketplace .customizer .lab-open { width: 100%; justify-content: center; text-align: center; padding: 10px; border-radius: 9px; background: #edf3ff; overflow-wrap: anywhere; } .im-marketplace .customizer .project-preview * { min-width: 0; } .im-marketplace .customizer :is(.mini-business-nav, .mini-store-nav, .mini-business-admin-top, .mini-store-bottom, .mini-business-requests > div) { flex-wrap: wrap; gap: 8px; } .im-marketplace .customizer :is(.mini-business-hero, .mini-folio-hero, .mini-estate-hero) { grid-template-columns: minmax(0, 1fr); } .im-marketplace .customizer .mini-sidebar { display: none; } .im-marketplace .customizer .mini-admin { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1023px) and (max-height: 500px) { .im-marketplace .im-header { position: relative; } .im-marketplace .im-content { scroll-margin-block-start: 16px; } } @font-face{font-family:'Noto Naskh Arabic';src:url('/assets/noto-naskh-arabic.woff') format('woff');font-weight:400 700;font-display:swap} .im-cms-featured{position:absolute;top:14px;inset-inline-start:14px;z-index:3;background:#fff;color:#194b7a;border:1px solid #c5d5eb;border-radius:7px;padding:5px 10px;font-size:.875rem}.co-offer-description{font-size:1rem;line-height:1.85;color:#526782;margin:12px 0;overflow-wrap:anywhere} .cms-brand-logo{width:40px;height:40px;object-fit:contain;flex:none}.im-managed-cover{display:block;width:100%;height:100%;object-fit:cover}.im-managed-name{height:100%;display:grid;place-items:center;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:600;padding:24px;color:#183253}.im-import-device{inset:10% 5%!important;width:90%!important;height:80%!important;overflow:hidden}.cms-public-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;margin:22px 0;padding:26px;background:#fff;border:1px solid #dae3f0;border-radius:16px;align-items:center;min-width:0}.cms-public-section:not(:has(img)){grid-template-columns:1fr}.cms-public-section img{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:10px}.cms-public-section h2{font-size:1.5rem;margin:0 0 12px}.cms-public-section p{font-size:1rem;line-height:1.9;white-space:normal;overflow-wrap:anywhere}.cms-public-section a{display:inline-flex;margin-top:18px;padding:10px 18px;border-radius:8px;background:var(--im-blue,#0056fd);color:#fff;text-decoration:none;font-size:1rem}.co-custom-packages{display:grid;gap:20px}.co-custom-package-name{font-size:1.25rem;padding:15px 4px} @media(max-width:640px){.cms-public-section{grid-template-columns:1fr;padding:19px;gap:18px}.cms-public-section h2{font-size:1.25rem}.cms-brand-logo{width:34px;height:34px}} .cms-content-offline main{display:none!important}[data-cms-offline]{max-width:900px;margin:40px auto;padding:25px;grid-template-columns:1fr}[data-cms-offline] button{justify-self:start;font:inherit;font-size:1rem;min-height:44px;background:#0756ef;color:#fff;border:0;border-radius:8px;padding:10px 18px;cursor:pointer} .cms-draft-banner{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:12px max(16px,calc((100vw - 1320px)/2));background:#fff3d9;border-bottom:1px solid #e2cd9c;color:#56411c;font-size:1rem;line-height:1.7;flex-wrap:wrap}.cms-draft-banner a{color:#254d87;font-weight:500}.cms-draft-preview #co-buy-website{opacity:.5;cursor:default} [data-site-pages],[data-site-socials]{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px}[data-site-pages] a,[data-site-socials] a{color:#49627f;line-height:1.8}[data-site-socials]{margin-top:16px}[data-site-socials]:empty{display:none}.co-footer,.im-footer{padding:28px 24px;display:block;text-align:center} /* Restore the approved preview chooser without changing the catalogue or admin. */ #marketplace-preview{--im-text:#172b45;--im-muted:#52647c;--im-border:#dce3ec;width:min(860px,calc(100vw - 40px));max-width:860px;border-radius:16px} #marketplace-preview .im-dialog-heading{border-bottom-color:var(--im-border)} #marketplace-preview .im-dialog-body{padding:24px} #marketplace-preview .im-preview-name{font-size:1.5rem;font-weight:600;margin-bottom:6px;text-align:start} #marketplace-preview .im-preview-cover{margin:0 0 22px;height:210px;overflow:hidden;border:1px solid var(--im-border);border-radius:10px;background:#f4f6f9} #marketplace-preview .im-preview-cover img{display:block;width:100%;height:100%;object-fit:cover} #marketplace-preview .im-preview-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px} #marketplace-preview .im-preview-option{display:flex;flex-direction:row;text-align:start;min-height:132px;align-items:center;gap:14px;padding:22px;border:1px solid var(--im-border);border-radius:12px;min-width:0} #marketplace-preview .im-option-copy{justify-items:start;text-align:start;min-width:0} #marketplace-preview .im-option-copy strong{font-size:1.125rem;font-weight:600} #marketplace-preview .im-option-copy>span{font-size:1rem;line-height:1.8} #marketplace-preview .im-preview-intro{text-align:start;font-size:1rem} #marketplace-preview .im-option-icon{width:48px;height:48px;border-radius:10px} #marketplace-preview .im-option-icon svg{width:26px;height:26px} #marketplace-preview [hidden]{display:none!important} #marketplace-preview :is(button,a):focus-visible{outline:3px solid #0756ef;outline-offset:3px} @media(max-width:759px){ #marketplace-preview{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0} #marketplace-preview .im-dialog-heading{position:sticky;top:0} #marketplace-preview .im-dialog-body{padding:20px} #marketplace-preview .im-preview-options{grid-template-columns:minmax(0,1fr)} #marketplace-preview .im-preview-cover{height:180px} #marketplace-preview .im-preview-option{min-height:110px;padding:18px} }