/* ============================================================ IFT GROUP — shared design system House of brands: one skeleton, per-branch accent, EN/AR mirror ============================================================ */ /* ---- brand tokens ---- */ :root{ --ink:#12281B; --group:#0F241A; /* deep forest-ink, the group lobby */ --group-2:#163324; --green:#23482F; /* IFT brand green */ --cream:#F6F3EA; --paper:#FFFDF8; --stone:#EDE9DD; --sage:#8AA290; --line:rgba(18,40,27,.14); --line-l:rgba(246,243,234,.16); /* per-branch accents (set on ) */ --accent:#23482F; --accent-2:#E4A24A; --accent-ink:#12281B; /* readable text colour on --accent fills */ --display:"Bricolage Grotesque","Trebuchet MS",sans-serif; --display-ar:"Cairo","Tajawal",sans-serif; --body:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --pad:clamp(20px,5vw,72px); --maxw:1240px; } body[data-brand="food"] { --accent:#23482F; --accent-2:#E4A24A; --accent-ink:#F6F3EA; } body[data-brand="telecom"] { --accent:#153A5C; --accent-2:#2FA6C4; --accent-ink:#F2F7FB; } body[data-brand="ecom"] { --accent:#4A2FA0; --accent-2:#FF6B5E; --accent-ink:#F5F2FF; } body[data-brand="marts"] { --accent:#B23A2E; --accent-2:#F2B01E; --accent-ink:#FFF6EC; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.03;margin:0} h1{font-size:clamp(2.5rem,6.2vw,5rem);font-variation-settings:"wdth" 88} h2{font-size:clamp(1.9rem,4vw,3.2rem);font-variation-settings:"wdth" 90} h3{font-size:1.14rem;line-height:1.25} p{margin:0} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ---- utility label ---- */ .stencil{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase} .eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);margin-bottom:18px} .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; padding:13px 22px;border:1px solid var(--accent);border-radius:2px; background:var(--accent);color:var(--accent-ink);transition:.22s ease;cursor:pointer; } .btn:hover{filter:brightness(.88)} .btn.ghost{background:transparent;color:currentColor;border-color:currentColor} .btn.ghost:hover{filter:none;background:rgba(255,255,255,.1)} .btn .arw{transition:transform .2s ease} .btn:hover .arw{transform:translateX(3px)} /* ---- header ---- */ header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 90%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:18px;height:74px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-inline-end:auto} .brand img{width:42px;height:42px} .brand b{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.05;display:block} .brand small{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} nav{display:flex;gap:24px} nav a{text-decoration:none;font-size:.92rem;color:var(--ink);padding:4px 0;border-bottom:1px solid transparent} nav a:hover{border-color:var(--accent-2)} .tools{display:flex;align-items:center;gap:14px} .lang{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;background:none;border:1px solid var(--line); border-radius:2px;padding:8px 12px;cursor:pointer;color:var(--ink);white-space:nowrap} .lang:hover{border-color:var(--accent)} .burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:9px 11px;cursor:pointer} .burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:3.5px 0} .backlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--mono); font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .backlink .arw{transition:transform .2s ease} .backlink:hover .arw{transform:translateX(-3px)} /* ---- sections ---- */ section{padding-block:clamp(62px,8vw,108px)} .head{max-width:60ch;margin-bottom:clamp(34px,4vw,52px)} .head p{margin-top:16px;color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:54ch} /* ---- hero (branch pages) ---- */ .hero{position:relative;overflow:hidden;background:var(--accent);color:var(--accent-ink)} .hero .wrap{position:relative;z-index:2;padding-block:clamp(70px,10vw,120px)} .hero .eyebrow{color:var(--accent-2)} .hero .eyebrow::after{background:color-mix(in srgb,var(--accent-2) 45%,transparent)} .hero h1{max-width:16ch} .hero h1 em{font-style:normal;color:var(--accent-2)} .hero .lede{max-width:54ch;margin-top:24px;font-size:clamp(1rem,1.5vw,1.18rem);opacity:.88} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero-cta .btn{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42} .hero.has-img::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,var(--accent) 24%,color-mix(in srgb,var(--accent) 82%,transparent) 62%,transparent 100%)} [dir=rtl] .hero.has-img::after{background:linear-gradient(255deg,var(--accent) 24%,color-mix(in srgb,var(--accent) 82%,transparent) 62%,transparent 100%)} /* manifest strip */ .manifest{position:relative;z-index:2;border-top:1px solid var(--line-l);background:rgba(0,0,0,.18)} .manifest .wrap{display:grid;grid-template-columns:repeat(4,1fr)} .manifest div{padding:22px 26px 24px;border-inline-start:1px solid var(--line-l)} .manifest div:first-child{border-inline-start:0;padding-inline-start:0} .manifest dt{color:var(--accent-2);margin-bottom:6px} .manifest dd{margin:0;font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.3} /* ---- generic card grid ---- */ .grid{display:grid;gap:16px} .g-auto{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))} .card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:22px; transition:transform .25s ease,box-shadow .25s ease} .card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(18,40,27,.09)} .card .code{display:inline-block;background:var(--accent);color:var(--accent-2);padding:5px 9px;border-radius:2px;margin-bottom:18px} .card h3{margin-bottom:8px} .card p{font-size:.95rem;color:color-mix(in srgb,var(--ink) 68%,transparent)} /* expandable service (telecom) */ details.svc{background:var(--paper);border:1px solid var(--line);border-radius:2px;margin-bottom:12px;overflow:hidden} details.svc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 24px} details.svc summary::-webkit-details-marker{display:none} details.svc .code{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--accent-2); background:var(--accent);padding:6px 10px;border-radius:2px} details.svc h3{flex:1;font-size:1.12rem} details.svc .chev{font-family:var(--mono);color:var(--accent);transition:transform .25s ease} details.svc[open] .chev{transform:rotate(90deg)} [dir=rtl] details.svc[open] .chev{transform:rotate(-90deg)} details.svc .body{padding:0 24px 22px;display:flex;flex-wrap:wrap;gap:8px} details.svc .body span{font-size:.85rem;border:1px solid var(--line);border-radius:2px;padding:7px 12px; color:color-mix(in srgb,var(--ink) 74%,transparent)} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chips span{border:1px solid currentColor;border-radius:2px;padding:11px 18px;font-family:var(--mono); font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9} /* dark band on accent */ .on-accent{background:var(--accent);color:var(--accent-ink)} .on-accent .head p{color:color-mix(in srgb,var(--accent-ink) 78%,transparent)} .on-accent .eyebrow{color:var(--accent-2)} .on-accent .eyebrow::after{background:color-mix(in srgb,var(--accent-ink) 30%,transparent)} /* split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,62px);align-items:center} .split figure{margin:0;position:relative;border-radius:2px;overflow:hidden} .split figure img{width:100%;height:clamp(300px,42vw,460px);object-fit:cover} .split figcaption{position:absolute;inset-inline-start:0;bottom:0;background:var(--accent-2);color:var(--accent-ink);padding:10px 16px} .pts{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)} .pts li{padding:14px 0;padding-inline-start:30px;border-bottom:1px solid var(--line);position:relative;font-size:.97rem} .pts li::before{content:"";position:absolute;inset-inline-start:2px;top:23px;width:12px;height:1.5px;background:var(--accent-2)} [dir=rtl] .pts li::before{transform:scaleX(-1)} /* logo wall */ .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); border-top:1px solid var(--line);border-inline-start:1px solid var(--line)} .wall span{padding:18px 14px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line); font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--accent);text-align:center; transition:background .2s,color .2s} .wall span:hover{background:var(--accent);color:var(--accent-2)} /* contact */ .contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start} .rows{margin-top:6px;border-top:1px solid var(--line-l)} .rows .row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-l)} .rows dt{color:var(--accent-2)} .rows dd{margin:0} .rows a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent-2) 55%,transparent)} .pending{opacity:.6;font-style:italic} .qcard{background:var(--accent);color:var(--accent-ink);border-radius:2px;padding:clamp(26px,3vw,38px)} .qcard img{width:72px;margin-bottom:20px} .qcard h3{font-size:1.4rem;margin-bottom:10px} .qcard p{opacity:.82;font-size:.95rem;margin-bottom:22px} .qcard .btn{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink);width:100%;justify-content:center} /* footer */ footer{background:var(--group);color:var(--cream)} footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-block:30px} footer .fbrand{display:flex;align-items:center;gap:12px} footer .fbrand img{width:38px;height:38px} footer nav{gap:18px;flex-wrap:wrap} footer nav a{color:var(--sage);font-size:.85rem} footer nav a:hover{color:var(--cream)} footer .copy{color:var(--sage);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em} /* whatsapp float */ .wa{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;width:56px;height:56px;border-radius:50%; background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.22);text-decoration:none} .wa svg{width:28px;height:28px;fill:#fff} /* reveal */ .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .rv.in{opacity:1;transform:none} /* ============ RTL / Arabic ============ */ [dir=rtl] body,[dir=rtl]{font-family:var(--body)} [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:var(--display-ar);font-weight:800;letter-spacing:0} [dir=rtl] .stencil,[dir=rtl] .lang,[dir=rtl] .btn,[dir=rtl] .backlink, [dir=rtl] .code,[dir=rtl] .chips span,[dir=rtl] .copy,[dir=rtl] .manifest dd,[dir=rtl] .wall span{ font-family:var(--display-ar);letter-spacing:0;font-weight:600} [dir=rtl] .btn{font-weight:700} [dir=rtl] .arw{display:inline-block;transform:scaleX(-1)} [dir=rtl] .btn:hover .arw{transform:scaleX(-1) translateX(3px)} [dir=rtl] .backlink:hover .arw{transform:scaleX(-1) translateX(3px)} /* responsive */ @media(max-width:940px){ .split,.contact-grid{grid-template-columns:1fr} .manifest .wrap{grid-template-columns:repeat(2,1fr)} .manifest div:nth-child(3){border-inline-start:0;padding-inline-start:0} } @media(max-width:760px){ nav.main{display:none;position:absolute;top:74px;inset-inline:0;flex-direction:column;gap:0; background:var(--cream);border-bottom:1px solid var(--line);padding:6px var(--pad) 18px} nav.main.open{display:flex} nav.main a{padding:13px 0;border-bottom:1px solid var(--line)} .burger{display:block} .bar .btn.top{display:none} .manifest .wrap{grid-template-columns:1fr} .manifest div{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line-l)} .manifest div:first-child{border-top:0} .rows .row{grid-template-columns:1fr;gap:3px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto} } :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}