/* ========================================================================== Bright Volition — Site Stylesheet Brand: Navy #201747 / Cream #F6F2F4 / Lavender #B4B5DF / Gold #F1B434 ========================================================================== */ @font-face{font-family:"Gotham";src:url("../assets/fonts/Gotham-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Gotham";src:url("../assets/fonts/Gotham-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Gotham";src:url("../assets/fonts/Gotham-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Gotham";src:url("../assets/fonts/Gotham-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;} /* Arabic — UniSIRWAN Somar */ @font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Somar";src:url("../assets/fonts/Somar-SemiBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;} /* Kurdish (Sorani) — UniSIRWAN Ping */ @font-face{font-family:"Ping";src:url("../assets/fonts/Ping-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Ping";src:url("../assets/fonts/Ping-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Ping";src:url("../assets/fonts/Ping-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Ping";src:url("../assets/fonts/Ping-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;} :root{ --navy:#201747; --cream:#F6F2F4; --lavender:#B4B5DF; --gold:#F1B434; --font-body:"Gotham","Segoe UI",Arial,sans-serif; --font-head:"Gotham","Segoe UI",Arial,sans-serif; --wght-body:400; --wght-medium:500; --wght-bold:700; --wght-black:900; --container:1200px; --radius-sm:8px; --radius:14px; --radius-lg:26px; } html.lang-ar{ --font-body:"Somar","Segoe UI",Tahoma,Arial,sans-serif; --font-head:"Somar","Segoe UI",Tahoma,Arial,sans-serif; } html.lang-ckb{ --font-body:"Ping","Segoe UI",Tahoma,Arial,sans-serif; --font-head:"Ping","Segoe UI",Tahoma,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-body); font-weight:var(--wght-body); color:var(--navy); background:var(--cream); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{ font-family:var(--font-head); font-weight:var(--wght-black); line-height:1.15; margin:0 0 .5em; color:var(--navy); letter-spacing:-.01em; } /* Arabic (Somar) / Kurdish (Ping) headings run taller and more connected than Latin Gotham — the Latin-tuned tight leading + negative tracking above makes multi-line headlines look crowded/touching in those scripts, so loosen both. */ html.lang-ar h1,html.lang-ar h2,html.lang-ar h3,html.lang-ar h4, html.lang-ckb h1,html.lang-ckb h2,html.lang-ckb h3,html.lang-ckb h4{ line-height:1.55; letter-spacing:0; } p{margin:0 0 1em;color:var(--navy);} button{font-family:inherit;cursor:pointer;} /* ---------- language visibility (scoped to body so itself is never hidden) ---------- */ body [lang="en"]{display:revert;} body [lang="ar"]{display:none;} body [lang="ckb"]{display:none;} html.lang-ar body [lang="en"]{display:none;} html.lang-ar body [lang="ar"]{display:revert;} html.lang-ckb body [lang="en"]{display:none;} html.lang-ckb body [lang="ckb"]{display:revert;} .ltr-fixed{unicode-bidi:isolate;direction:ltr;display:inline-block;} /* ---------- layout helpers ---------- */ .container{max-width:var(--container);margin:0 auto;padding-inline:24px;} .section{padding:88px 0;} .section-sm{padding:56px 0;} .section-tight{padding:64px 0;} .bg-cream{background:var(--cream);} .bg-navy{background:var(--navy);color:var(--lavender);} .bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--cream);} .bg-navy p{color:var(--lavender);} .bg-navy .checklist li{color:var(--cream);} .grad-navy{background:var(--navy);} .grad-navy h1,.grad-navy h2,.grad-navy h3,.grad-navy h4{color:var(--cream);} .grad-navy p{color:var(--lavender);} .grad-navy .eyebrow{color:var(--gold);} .grad-navy .checklist li{color:var(--cream);} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-head);font-weight:var(--wght-bold); font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--navy);margin-bottom:14px; } .eyebrow::before{content:"";width:22px;height:3px;background:var(--gold);border-radius:2px;display:inline-block;} .bg-navy .eyebrow{color:var(--gold);} .cta-band .eyebrow{color:var(--gold);} h1{font-size:clamp(2.1rem,4.4vw,3.6rem);} h2{font-size:clamp(1.7rem,3.2vw,2.5rem);} h3{font-size:1.28rem;} .lede{font-size:1.15rem;color:var(--navy);max-width:64ch;} .bg-navy .lede{color:var(--lavender);} .section-head{max-width:760px;margin-bottom:48px;} .section-head.center{margin-inline:auto;text-align:center;} .grid{display:grid;gap:28px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-5{grid-template-columns:repeat(5,1fr);} @media (max-width:980px){.grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 28px;border-radius:100px; font-family:var(--font-head);font-weight:var(--wght-bold);font-size:.95rem; border:2px solid transparent;transition:.2s ease;white-space:nowrap; } .btn-gold{background:var(--gold);color:var(--navy);} .btn-gold:hover{background:var(--navy);color:var(--cream);transform:translateY(-2px);} .btn-outline{border-color:var(--cream);color:var(--cream);} .btn-outline:hover{background:var(--cream);color:var(--navy);transform:translateY(-2px);} .btn-outline-navy{border-color:var(--navy);color:var(--navy);} .btn-outline-navy:hover{background:var(--navy);color:var(--cream);} .btn-sm{padding:10px 20px;font-size:.85rem;} .btn-arrow{transition:transform .2s;} html:not(.lang-ar):not(.lang-ckb) .btn:hover .btn-arrow{transform:translateX(4px);} html.lang-ar .btn:hover .btn-arrow,html.lang-ckb .btn:hover .btn-arrow{transform:translateX(-4px) rotate(180deg);} html.lang-ar .btn-arrow,html.lang-ckb .btn-arrow{transform:rotate(180deg);} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:200; background:var(--cream);backdrop-filter:blur(10px); border-bottom:1px solid var(--lavender); } .site-header .container{display:flex;align-items:center;justify-content:space-between;height:112px;gap:24px;} .brand img{height:150px;width:auto;} .brand{display:flex;align-items:center;} .main-nav{display:flex;align-items:center;gap:6px;} .main-nav a{ font-family:var(--font-head);font-weight:var(--wght-medium);font-size:.94rem; padding:10px 16px;border-radius:100px;color:var(--navy);transition:.2s; } .main-nav a:hover,.main-nav a.active{background:var(--navy);color:var(--cream);} .header-actions{display:flex;align-items:center;gap:12px;} .lang-toggle{ display:flex;border:1.5px solid var(--lavender);border-radius:100px;overflow:hidden; font-family:var(--font-head);font-weight:var(--wght-bold);font-size:.8rem; } .lang-toggle button{ background:none;border:0;padding:8px 14px;color:var(--navy);transition:.2s; } .lang-toggle button.active{background:var(--navy);color:var(--cream);} .header-cta{white-space:nowrap;} @media (max-width:960px){.header-cta{display:none;}} .nav-toggle{display:none;background:none;border:0;padding:8px;} .nav-toggle span{display:block;width:24px;height:2.5px;background:var(--navy);margin:5px 0;border-radius:2px;} @media (max-width:960px){ .main-nav{ /* top:100% + height:calc(100vh - 100%) instead of inset/bottom:0 — .site-header's backdrop-filter makes it the containing block for this fixed element, so a bottom:0 offset resolves against the header's own height and collapses to 0. */ position:fixed;top:100%;left:0;right:0;height:calc(100vh - 100%);background:var(--cream); flex-direction:column;align-items:stretch;padding:20px 24px;gap:4px; transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s ease; overflow-y:auto; } .main-nav a{padding:14px 16px;font-size:1.05rem;border-bottom:1px solid var(--lavender);border-radius:0;} .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;} .nav-toggle{display:block;} } @media (max-width:640px){ .site-header .container{height:104px;gap:10px;padding-inline:16px;} .brand img{height:130px;} .lang-toggle button{padding:7px 10px;font-size:.75rem;} .header-actions{gap:8px;} } @media (max-width:380px){ .site-header .container{height:92px;} .brand img{height:112px;} } /* ---------- hero ---------- */ .hero{ position:relative;color:var(--cream);overflow:hidden; padding:130px 0 100px; } .hero-bg{position:absolute;inset:0;z-index:0;} .hero-bg img{width:100%;height:100%;object-fit:cover;} .hero-bg::after{ content:"";position:absolute;inset:0; background:var(--navy);opacity:.82; } .hero-inner{position:relative;z-index:1;max-width:760px;} .hero-inner.wide{max-width:900px;} .hero h1,.hero h2,.hero h3,.hero h4{color:var(--cream);} .hero .lede{color:var(--lavender);} .hero .eyebrow{color:var(--gold);} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;} .hero-stats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap;} .hero-stats div strong{display:block;font-family:var(--font-head);font-weight:var(--wght-black);font-size:1.9rem;color:var(--gold);} .hero-stats div span{font-size:.85rem;color:var(--lavender);} .page-hero{padding:150px 0 90px;} .breadcrumb{font-size:.85rem;color:var(--lavender);margin-bottom:16px;font-weight:var(--wght-medium);} .breadcrumb a:hover{color:var(--gold);} /* ---------- cards ---------- */ .card{ background:var(--cream);border:1px solid var(--lavender);border-radius:var(--radius); padding:32px;transition:.25s ease;height:100%; } .card:hover{transform:translateY(-6px);border-color:var(--gold);} .card .icon{ width:56px;height:56px;border-radius:16px;background:var(--lavender); display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--navy); } .card .icon svg{width:26px;height:26px;} .card h3{margin-bottom:10px;} .card p{margin-bottom:0;font-size:.95rem;} .card ul{margin-top:14px;} .card ul li{ position:relative;padding-inline-start:20px;margin-bottom:8px;font-size:.92rem;color:var(--navy); } .card ul li::before{ content:"";position:absolute;inset-inline-start:0;top:.55em;width:7px;height:7px; border-radius:2px;background:var(--gold); } .card-dark{ background:var(--navy);color:var(--cream);border:none; } .card-dark p{color:var(--lavender);} .card-dark h3{color:var(--cream);} .card-dark ul li{color:var(--lavender);} .card-dark .icon{background:var(--lavender);color:var(--navy);} .num-card{position:relative;padding-top:44px;} .num-card .num{ position:absolute;top:-18px;inset-inline-start:28px; width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold); display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--wght-black); } /* ---------- timeline (about) ---------- */ .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;} .timeline::before{ content:"";position:absolute;top:20px;left:8%;right:8%;height:2px;background:var(--lavender); } @media (max-width:820px){.timeline{grid-template-columns:1fr;}.timeline::before{display:none;}} .timeline-item{position:relative;padding-top:44px;} .timeline-item::before{ content:"";position:absolute;top:10px;inset-inline-start:0;width:20px;height:20px;border-radius:50%; background:var(--gold);border:4px solid var(--cream);box-shadow:0 0 0 2px var(--navy); } .timeline-item h4{font-family:var(--font-head);font-weight:var(--wght-bold);color:var(--navy);margin-bottom:10px;font-size:1.05rem;} .timeline-item ul li{position:relative;padding-inline-start:18px;margin-bottom:10px;font-size:.94rem;color:var(--navy);} .timeline-item ul li::before{content:"—";position:absolute;inset-inline-start:0;color:var(--navy);} /* ---------- tag / badge ---------- */ .tag{ display:inline-block;padding:6px 14px;border-radius:100px;background:var(--lavender); color:var(--navy);font-size:.78rem;font-weight:var(--wght-bold);font-family:var(--font-head); } .tag-gold{background:var(--gold);} .tag-navy{background:var(--navy);color:var(--cream);} .tag-outline{background:none;border:1.5px solid var(--lavender);color:var(--navy);} /* ---------- table ---------- */ .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--lavender);} table{width:100%;border-collapse:collapse;min-width:640px;background:var(--cream);} thead th{ background:var(--navy);color:var(--cream);text-align:start;padding:16px 20px; font-family:var(--font-head);font-weight:var(--wght-bold);font-size:.88rem;letter-spacing:.02em; } tbody td{padding:16px 20px;border-top:1px solid var(--lavender);font-size:.92rem;color:var(--navy);vertical-align:top;} tbody tr:nth-child(even){background:var(--lavender);} tbody td strong{color:var(--navy);font-family:var(--font-head);font-weight:var(--wght-bold);} /* ---------- logo strip ---------- */ .logo-strip{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px; padding:20px 0; } .logo-strip img{ height:96px;width:210px;object-fit:contain;object-position:center; filter:grayscale(1);opacity:.8;transition:.2s;padding:6px 10px; } .logo-strip img:hover{filter:none;opacity:1;} .logo-strip.large img{height:112px;width:230px;} @media (max-width:620px){ .logo-strip img{height:72px;width:160px;} .logo-strip.large img{height:84px;width:175px;} } /* ---------- split / feature blocks ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} @media (max-width:860px){.split{grid-template-columns:1fr;gap:32px;}} .split img,.split .media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--lavender);} .media{position:relative;aspect-ratio:4/3;} .media img{width:100%;height:100%;object-fit:cover;} .checklist li{ position:relative;padding-inline-start:32px;margin-bottom:14px;font-size:.98rem;color:var(--navy);font-weight:var(--wght-medium); font-family:var(--font-head); } .checklist li::before{ content:"✓";position:absolute;inset-inline-start:0;top:-1px;width:22px;height:22px;border-radius:7px; background:var(--gold);color:var(--navy);font-weight:900;font-size:.75rem;display:flex;align-items:center;justify-content:center; } /* ---------- process / steps ---------- */ .steps{display:flex;flex-wrap:wrap;gap:0;counter-reset:step;} .step{flex:1 1 200px;position:relative;padding:0 20px;} .step:not(:last-child)::after{ content:"";position:absolute;top:26px;inset-inline-end:-10px;width:40%;border-top:2px dashed var(--lavender); } @media (max-width:820px){.step:not(:last-child)::after{display:none;}} .step .step-num{ width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--gold); display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--wght-black); margin-bottom:16px;font-size:1.1rem; } /* ---------- project spec ---------- */ .spec-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--lavender);border-radius:var(--radius);overflow:hidden;} .spec-list div{padding:18px 22px;border-bottom:1px solid var(--lavender);} .spec-list div:nth-child(4n),.spec-list div:nth-child(4n-1){background:var(--lavender);} .spec-list dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);font-weight:var(--wght-bold);font-family:var(--font-head);margin-bottom:4px;} .spec-list dd{margin:0;font-family:var(--font-head);font-weight:var(--wght-bold);color:var(--navy);} @media (max-width:620px){.spec-list{grid-template-columns:1fr;}.spec-list div:nth-child(4n),.spec-list div:nth-child(4n-1){background:none;}.spec-list div:nth-child(even){background:var(--lavender);}} /* ---------- CTA band ---------- */ .cta-band{ border-radius:var(--radius-lg);padding:56px;text-align:center; background:var(--navy); color:var(--cream); } .cta-band h2{color:var(--cream);margin-bottom:12px;} .cta-band p{color:var(--lavender);max-width:560px;margin-inline:auto;margin-bottom:28px;} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* ---------- footer ---------- */ .site-footer{background:var(--navy);color:var(--lavender);padding:72px 0 0;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;} @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}} .footer-grid img{height:36px;margin-bottom:16px;} .footer-grid p{color:var(--lavender);font-size:.92rem;} .footer-grid h4{color:var(--cream);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;font-family:var(--font-head);} .footer-grid ul li{margin-bottom:11px;} .footer-grid ul li a{color:var(--lavender);font-size:.94rem;transition:.2s;} .footer-grid ul li a:hover{color:var(--gold);} .footer-contact li{display:flex;gap:10px;align-items:flex-start;color:var(--lavender);font-size:.92rem;margin-bottom:14px;} .footer-contact svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:2px;} .social-row{display:flex;gap:10px;margin-top:18px;} .social-row a{ width:38px;height:38px;border-radius:50%;border:1.5px solid var(--lavender); display:flex;align-items:center;justify-content:center;transition:.2s; } .social-row a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);} .social-row svg{width:16px;height:16px;} .footer-bottom{ border-top:1px solid var(--lavender);padding:22px 0; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; font-size:.84rem;color:var(--lavender); } .footer-bottom a:hover{color:var(--gold);} /* ---------- misc ---------- */ .divider{height:1px;background:var(--lavender);margin:64px 0;} .text-center{text-align:center;} .mt-0{margin-top:0;} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1;transform:none;} .back-to-top{ position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:150; width:48px;height:48px;border-radius:50%;background:var(--navy);color:var(--gold); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:.25s;border:none; } .back-to-top.show{opacity:1;pointer-events:auto;} @media (max-width:640px){ .section{padding:64px 0;} .cta-band{padding:36px 22px;} .hero{padding:110px 0 70px;} .page-hero{padding:130px 0 60px;} }