/* =========================================================== Ousama Alshurafa — shared design system "One light, many colours." Spectrum brand · dark-first 2026 =========================================================== */ :root{ --violet:#8B5CF6; --indigo:#6366F1; --azure:#3B82F6; --cyan:#22C3D6; --emerald:#10B981; --gold:#EAB308; --amber:#F59E0B; --sun:#FF7A45; --rose:#F43F5E; --magenta:#E24BC4; /* LIGHT is the default (hybrid). Dark pages opt in via body[data-theme="dark"]. */ --bg:#FBFAF7; --bg-2:#F1EDE6; --fg:#161327; --muted:#6A6478; --panel:#FFFFFF; --hair:rgba(22,19,40,.12); --spectrum:linear-gradient(100deg,var(--violet),var(--azure),var(--cyan),var(--emerald),var(--gold),var(--sun),var(--rose)); --display:'Clash Display',-apple-system,system-ui,sans-serif; --sans:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --ar:'Amiri','Geeza Pro',serif; --maxw:1120px; /* per-page accent — overridden on */ --h:var(--violet); } body[data-accent="harf"]{--h:var(--azure)} body[data-accent="yaqzah"]{--h:var(--sun)} body[data-accent="rizq"]{--h:var(--emerald)} body[data-accent="hikmah"]{--h:var(--cyan)} body[data-accent="questions"]{--h:var(--rose)} body[data-accent="afterlife"]{--h:var(--gold)} body[data-accent="dunya"]{--h:var(--violet)} body[data-accent="collab"]{--h:var(--indigo)} body[data-accent="about"]{--h:var(--cyan)} body[data-accent="contact"]{--h:var(--emerald)} /* ---- DARK pages (hybrid opt-in) ---- */ body[data-theme="dark"]{ --bg:#08080F; --bg-2:#0E0E1A; --fg:#F3F1FB; --muted:#9C99B4; --panel:#13132355; --hair:rgba(255,255,255,.11); } body[data-theme="dark"] .aura span{opacity:.42} body[data-theme="dark"] .dd-menu{background:#0d0d18} body[data-theme="dark"] input,body[data-theme="dark"] textarea,body[data-theme="dark"] select{background:#00000040} *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.03;margin:0;text-wrap:balance} h1{font-size:clamp(44px,8vw,92px);font-weight:700;letter-spacing:-.03em} h2{font-size:clamp(28px,4.4vw,48px)} h3{font-size:21px} h4{font-size:17px} p{margin:0} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .eyebrow.h{color:var(--h)} .spectrum-text{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:170% 100%} .hue-text{color:var(--h)} .bar{height:5px;border-radius:99px;background:var(--spectrum)} .muted{color:var(--muted)} .ar{font-family:var(--ar);direction:rtl} .center{text-align:center} .lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--muted)} .lede b{color:var(--fg);font-weight:500} /* ---------- HEADER / NAV ---------- */ header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 74%,transparent);border-bottom:1px solid var(--hair)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;white-space:nowrap} .brand .mk{width:40px;height:40px;border-radius:12px;background:var(--bg-2);border:1px solid var(--hair); display:grid;place-items:center;position:relative;overflow:hidden;flex:none} .brand .mk b{font-family:var(--display);font-weight:700;font-size:23px} .brand .mk i{position:absolute;bottom:6px;left:7px;right:7px;height:4px;border-radius:2px;background:var(--spectrum)} .brand .sur{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent} .nav-links{display:flex;gap:6px;align-items:center;font-size:15px} .nav-links>a,.dd>button{color:var(--muted);background:none;border:none;font:inherit;cursor:pointer; padding:8px 12px;border-radius:9px;transition:color .2s,background .2s;display:inline-flex;align-items:center;gap:5px} .nav-links>a:hover,.dd:hover>button,.dd:focus-within>button{color:var(--fg)} .dd{position:relative} .dd>button svg{width:10px;height:10px;opacity:.6;transition:transform .2s} .dd:hover>button svg,.dd:focus-within>button svg{transform:rotate(180deg)} .dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#FFFFFF; border:1px solid var(--hair);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px); transition:.18s;box-shadow:0 24px 60px -20px #000} .dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none} .dd-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;color:var(--fg);transition:background .15s} .dd-menu a:hover{background:color-mix(in srgb,var(--h) 12%,transparent)} .dd-menu a small{color:var(--muted);font-size:12.5px} .nav-cta{padding:9px 17px!important;border-radius:99px;border:1px solid var(--hair);color:var(--fg)!important} .nav-cta:hover{background:var(--panel)} .menu-btn{display:none;background:none;border:1px solid var(--hair);border-radius:9px;color:var(--fg);padding:8px 11px;font-size:17px;cursor:pointer} .mobile-menu{display:none} @media(max-width:940px){ .nav-links{display:none} .menu-btn{display:block;flex:none;padding:10px 13px;font-size:18px} .nav{gap:12px;height:64px} .brand{font-size:19px;gap:10px;min-width:0} .brand .mk{width:36px;height:36px;border-radius:11px} .brand .mk b{font-size:21px} .mobile-menu.open{display:block;position:fixed;inset:60px 0 0;background:var(--bg);z-index:70;overflow-y:auto;padding:16px 22px 26px} .mobile-menu h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:14px 0 4px} .mobile-menu a{display:block;padding:11px 0;font-size:17px;border-bottom:1px solid var(--hair)} .mobile-menu a.m-lang{display:flex;align-items:center;gap:13px;padding:11px 14px;margin:2px 0 8px;border:1.5px solid var(--fg);border-radius:14px} .mobile-menu a.m-lang .m-lang-badge{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8B5CF6,#3B82F6,#22C3D6,#10B981,#EAB308,#FF7A45,#F43F5E);color:#fff;border-radius:10px;font-size:19px;font-weight:700} .mobile-menu a.m-lang .m-lang-txt b{display:block;font-size:17px;line-height:1.15;font-weight:700} .mobile-menu a.m-lang .m-lang-txt small{display:block;font-size:12px;color:var(--muted);font-weight:500} } /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:99px;font-weight:600;font-size:15px; transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:1px solid transparent} .btn-primary{background:var(--fg);color:var(--bg)} .btn-primary:hover{transform:translateY(-2px)} .btn-hue{background:var(--h);color:#0a0a12} .btn-hue:hover{transform:translateY(-2px);filter:brightness(1.07)} .btn-ghost{border-color:var(--hair);color:var(--fg)} .btn-ghost:hover{background:var(--panel);transform:translateY(-2px)} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .arrow{width:13px;height:13px} /* ---------- SECTIONS ---------- */ section{padding:clamp(60px,8vw,104px) 0;position:relative} .sec-head{max-width:60ch;margin-bottom:44px;display:flex;flex-direction:column;gap:16px} /* ---------- HERO (generic + product) ---------- */ .hero{position:relative;padding:clamp(64px,12vw,140px) 0 clamp(56px,8vw,100px);overflow:hidden} .aura{position:absolute;inset:0;z-index:-1;pointer-events:none} .aura span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22} .aura .a{width:52vw;height:52vw;left:-12vw;top:-10vw;background:radial-gradient(circle,var(--h),transparent 62%)} .aura .b{width:44vw;height:44vw;right:-12vw;top:2vw;background:radial-gradient(circle,var(--cyan),transparent 60%)} .aura .c{width:42vw;height:42vw;left:28vw;bottom:-24vw;background:radial-gradient(circle,var(--violet),transparent 62%)} .hero .eyebrow{margin-bottom:24px} .hero-lede{margin-top:26px;max-width:54ch} .hero-cta{margin-top:36px} .p-hero h1 .ar{display:inline-block;font-family:var(--ar);font-weight:400;font-size:.42em;color:var(--muted);margin-inline-start:.35em;letter-spacing:0;vertical-align:middle} .stat-row{display:flex;flex-wrap:wrap;gap:26px 44px;margin-top:52px;padding-top:30px;border-top:1px solid var(--hair)} .stat b{font-family:var(--display);font-weight:600;font-size:26px;display:block;letter-spacing:-.02em} .stat span{font-size:13px;color:var(--muted)} /* ---------- PRODUCT CARDS (constellation) ---------- */ .prod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.prod{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.prod{grid-template-columns:1fr}} .p{--c:var(--h);position:relative;border-radius:20px;padding:24px;min-height:210px; display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,var(--bg-2)),var(--bg-2)); border:1px solid color-mix(in srgb,var(--c) 34%,transparent); box-shadow:0 20px 55px -38px var(--c);transition:transform .25s,box-shadow .25s} .p:hover{transform:translateY(-5px);box-shadow:0 30px 65px -32px var(--c)} .p::before{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,var(--c),transparent 68%);opacity:.42;filter:blur(8px);z-index:-1} .p .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)} .p h3{font-size:22px;margin-top:2px} .p .tag{font-size:14px;color:var(--muted);line-height:1.45;margin-top:7px} .p .go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--c)} .p .go svg{transition:transform .2s} .p:hover .go svg{transform:translate(3px,-3px)} .p .ar{font-size:15px;color:var(--muted)} .p.wide{grid-column:span 2} @media(max-width:560px){.p.wide{grid-column:span 1}} /* ---------- FEATURE ROWS ---------- */ .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:clamp(30px,5vw,50px) 0} .feature-row.rev .fr-media{order:2} @media(max-width:820px){.feature-row{grid-template-columns:1fr;gap:26px}.feature-row.rev .fr-media{order:0}} .fr-media{aspect-ratio:4/3;border-radius:18px;border:1px solid var(--hair);overflow:hidden;position:relative; background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--h) 26%,var(--bg-2)),var(--bg-2)); display:grid;place-items:center} .fr-media .glyph{font-family:var(--ar);font-size:clamp(80px,14vw,150px);color:color-mix(in srgb,var(--h) 60%,var(--fg));opacity:.9} .fr-text .eyebrow{margin-bottom:14px} .fr-text h3{font-size:clamp(24px,3vw,32px);margin-bottom:14px} /* ---------- FEATURE TILES ---------- */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:820px){.tiles{grid-template-columns:1fr}} .tile{border:1px solid var(--hair);border-radius:16px;padding:26px;background:var(--panel);transition:border-color .2s} .tile:hover{border-color:color-mix(in srgb,var(--h) 55%,transparent)} .tile .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px; background:color-mix(in srgb,var(--h) 18%,transparent);color:var(--h);font-size:20px} .tile h4{margin-bottom:8px;font-size:19px} .tile p{font-size:14.5px;color:var(--muted)} /* ---------- MODULE / NUMBERED LIST ---------- */ .modules{display:flex;flex-direction:column;border-top:1px solid var(--hair)} .mod{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--hair)} .mod .n{font-family:var(--display);font-weight:600;font-size:20px;color:var(--h)} .mod h4{font-size:18px} .mod p{font-size:14px;color:var(--muted);margin-top:3px} .mod .badge{font-family:var(--mono);font-size:11px;color:var(--muted)} @media(max-width:620px){.mod{grid-template-columns:44px 1fr;gap:14px}.mod .badge{display:none}} /* ---------- PRICING ---------- */ .price-card{max-width:520px;border:1px solid color-mix(in srgb,var(--h) 42%,transparent);border-radius:24px; padding:clamp(28px,4vw,44px);background:linear-gradient(180deg,color-mix(in srgb,var(--h) 12%,var(--bg-2)),var(--bg-2)); box-shadow:0 24px 70px -40px var(--h)} .price-card .amt{font-family:var(--display);font-weight:700;font-size:52px;letter-spacing:-.03em;display:flex;align-items:baseline;gap:12px} .price-card .amt s{font-size:24px;color:var(--muted);font-weight:400} .price-card ul{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:12px} .price-card li{display:flex;gap:11px;align-items:flex-start;font-size:15px} .price-card li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;margin-top:1px; background:color-mix(in srgb,var(--h) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} /* ---------- FORMS ---------- */ .form-card{border-radius:24px;padding:clamp(28px,4vw,48px); background:radial-gradient(120% 130% at 15% 10%,color-mix(in srgb,var(--h) 20%,var(--bg-2)),var(--bg-2)); border:1px solid color-mix(in srgb,var(--h) 28%,transparent)} form.stack{display:flex;flex-direction:column;gap:14px;max-width:520px} form.inline{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin-top:6px} input,textarea,select{width:100%;padding:14px 18px;border-radius:14px;border:1px solid var(--hair); background:#F4F1EB;color:var(--fg);font-family:var(--sans);font-size:15px} form.inline input{flex:1;min-width:200px;border-radius:99px} input:focus,textarea:focus,select:focus{outline:2px solid var(--h);outline-offset:1px} textarea{min-height:130px;resize:vertical} label{font-size:13px;color:var(--muted);margin-bottom:-7px} .hp{position:absolute;left:-9999px} /* ---------- QUOTE ---------- */ .quote{text-align:center;padding:clamp(64px,9vw,110px) 0} .quote p{font-family:var(--display);font-weight:600;font-size:clamp(26px,4.2vw,44px);line-height:1.2;letter-spacing:-.02em;max-width:20ch;margin:0 auto} .quote .by{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:24px} .hadith{border-left:2px solid var(--h);padding:6px 0 6px 22px;max-width:60ch} .hadith .ar{font-size:26px;line-height:1.9;color:var(--fg)} .hadith .tr{color:var(--muted);margin-top:10px;font-style:italic} .hadith .src{font-family:var(--mono);font-size:12px;color:var(--h);margin-top:8px;letter-spacing:.08em} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--hair);max-width:760px} .faq details{border-bottom:1px solid var(--hair);padding:18px 0} .faq summary{font-family:var(--display);font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--h);font-size:22px;line-height:1} .faq details[open] summary::after{content:"–"} .faq p{color:var(--muted);margin-top:12px} /* ---------- BOOK COVER ---------- */ .book-cover{aspect-ratio:3/4;border-radius:12px;background:#F4EFE6;color:#22303a;display:flex;flex-direction:column; justify-content:center;gap:14px;padding:34px 30px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);border:1px solid rgba(0,0,0,.1)} .book-cover .bt{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.3vw,26px);line-height:1.08;letter-spacing:-.01em} .book-cover .bs{font-size:14px;color:#5a6b74} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--hair);padding:60px 0 46px;margin-top:20px} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} @media(max-width:820px){.foot{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot{grid-template-columns:1fr}} .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px} .foot a{color:var(--muted);font-size:14px;display:block;padding:5px 0} .foot a:hover{color:var(--fg)} .socials{display:flex;gap:12px;margin-top:18px} .socials a{width:38px;height:38px;border-radius:10px;border:1px solid var(--hair);display:grid;place-items:center;color:var(--muted);transition:.2s;padding:0} .socials a:hover{color:var(--fg);border-color:var(--fg)} .foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);margin-top:40px;padding-top:24px;border-top:1px solid var(--hair)} /* ---------- MISC ---------- */ .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;border:1px solid var(--hair); background:var(--panel);font-size:13px} .pill .d{width:7px;height:7px;border-radius:50%;background:var(--h)} .grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center} @media(max-width:820px){.grid2{grid-template-columns:1fr;gap:28px}} .divider{height:1px;background:var(--hair);margin:0} .breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:20px} .breadcrumb a:hover{color:var(--fg)} .breadcrumb .sep{opacity:.5;margin:0 8px} @media(prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @keyframes drift{to{background-position:170% 0}} .drift{animation:drift 16s linear infinite alternate} } /* ---------- rich product-page components ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:760px){.split{grid-template-columns:1fr}} .split .col{border:1px solid var(--hair);border-radius:18px;padding:26px;background:var(--panel)} .split .col.hue{border-color:color-mix(in srgb,var(--h) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--h) 12%,var(--bg-2)),var(--bg-2))} .split .col .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .split .col.hue .lbl{color:var(--h)} .split .col h4{font-size:20px;margin-bottom:14px} .split .col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .split .col li{color:var(--muted);font-size:15px;padding-left:16px;position:relative} .split .col li::before{content:"–";position:absolute;left:0;color:var(--h)} .split .col .cap{font-size:13px;color:var(--muted);margin-top:16px;font-style:italic} .names{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:820px){.names{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.names{grid-template-columns:1fr}} .namecard{border:1px solid var(--hair);border-radius:16px;padding:24px 18px;background:var(--panel);text-align:center} .namecard .ar{font-size:36px;color:var(--h);margin-bottom:6px;line-height:1.2} .namecard .tl{font-family:var(--display);font-weight:600;font-size:16px} .namecard .en{font-size:13px;color:var(--muted);margin:3px 0 12px} .namecard p{font-size:13px;color:var(--muted);line-height:1.45} .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:820px){.qgrid{grid-template-columns:1fr}} .qcard{border:1px solid var(--hair);border-radius:16px;padding:24px;background:var(--panel)} .stars{color:var(--h);letter-spacing:3px;font-size:13px;margin-bottom:12px} .qcard p{font-size:14.5px;line-height:1.55} .qcard .who{color:var(--muted);font-size:13px;margin-top:14px} .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} @media(max-width:820px){.prices{grid-template-columns:1fr}} .prices .price-card{max-width:none} .price-card .plan{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--h)} .price-card .amt.sm{font-size:38px} .badge-pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#0a0a12;background:var(--h);padding:4px 10px;border-radius:99px;width:max-content} /* real book cover image */ .book-cover-img{width:100%;max-width:380px;border-radius:12px;display:block; box-shadow:0 34px 80px -34px rgba(20,10,40,.55);border:1px solid var(--hair)} /* inline video embeds */ .videowrap{border-radius:18px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 26px 64px -40px var(--h);background:#000;line-height:0} .videowrap video{width:100%;height:auto;display:block} .vidcap{font-size:12.5px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;font-family:var(--mono);margin-top:12px} /* brand page swatches */ .swgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:640px){.swgrid{grid-template-columns:repeat(2,1fr)}} .sw{border:1px solid var(--hair);border-radius:13px;overflow:hidden;background:var(--panel)} .sw .chip{height:74px} .sw .m{padding:11px 13px} .sw .m b{font-size:13px} .sw .m code{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin:2px 0} .sw .m span{color:var(--muted);font-size:12px} .specimen{border:1px solid var(--hair);border-radius:16px;padding:26px;background:var(--panel)} /* ---- accessibility: visible keyboard focus ---- */ a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--h);outline-offset:2px;border-radius:8px} /* ---- small-phone header safety (never clip the hamburger) ---- */ @media(max-width:400px){ .wrap{padding:0 20px} .nav{gap:10px} .brand{font-size:17px} .brand .mk{width:32px;height:32px;border-radius:10px} .brand .mk b{font-size:19px} } @media(max-width:342px){ .brand .sur{display:none} } /* ---- The Hikmah Way lockup ---- */ .hikmah-lock{display:inline-flex;align-items:center;gap:18px;margin-bottom:28px} .hikmah-ico{width:80px;height:80px;border-radius:20px;flex:none;display:grid;place-items:center; font-family:var(--ar);font-size:34px;line-height:1;color:var(--h); background:linear-gradient(160deg,color-mix(in srgb,var(--h) 28%,var(--bg-2)),var(--bg-2)); border:1px solid color-mix(in srgb,var(--h) 46%,transparent); box-shadow:0 18px 46px -30px var(--h)} .hikmah-word{display:flex;flex-direction:column;font-family:var(--display);font-weight:700; font-size:clamp(42px,7.4vw,70px);letter-spacing:-.035em;line-height:.9;color:var(--fg)} .hikmah-word small{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.26em; color:var(--muted);margin-top:11px} @media(max-width:520px){.hikmah-word small{display:none} .hikmah-ico{width:64px;height:64px;font-size:28px;border-radius:16px}} /* equal, aligned video pair */ .vidpair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} @media(max-width:720px){.vidpair{grid-template-columns:1fr}} .vidpair .videowrap{aspect-ratio:16/9;max-width:none;margin:0} .vidpair .videowrap video{width:100%;height:100%;object-fit:cover} /* ============ Arabic / RTL ============ */ html[dir="rtl"]{--display:'Cairo',-apple-system,system-ui,sans-serif;--sans:'Cairo',-apple-system,system-ui,sans-serif;--mono:'Cairo',ui-monospace,monospace} [dir="rtl"] body{font-size:17px;line-height:1.85} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0;line-height:1.2} [dir="rtl"] .eyebrow{letter-spacing:.02em} [dir="rtl"] .aura .a{left:auto;right:-12vw} [dir="rtl"] .aura .c{left:auto;right:28vw} [dir="rtl"] .arrow,[dir="rtl"] .arw{transform:scaleX(-1)} [dir="rtl"] input,[dir="rtl"] textarea{text-align:right} [dir="rtl"] .dd-menu{left:auto;right:0} [dir="rtl"] .breadcrumb .sep,[dir="rtl"] .hikmah-word{text-align:right} [dir="rtl"] .foot-legal .ar{font-family:var(--sans)} /* language switcher */ .lang{border:1px solid var(--hair)!important;border-radius:99px;padding:8px 15px!important;font-weight:600;color:var(--fg)!important;font-size:14px} .lang:hover{background:var(--bg-2)} @media(max-width:940px){.lang{display:inline-flex!important}} /* Arabic display wordmark font (Belqees Pro, self-hosted; Cairo fallback until file added) */ @font-face{font-family:'Belqees';src:url('/assets/fonts/belqees.woff2') format('woff2'),url('/assets/fonts/belqees.woff') format('woff');font-weight:400 700;font-style:normal;font-display:swap} html[dir="rtl"] .brand{font-family:'Belqees','Cairo',serif;font-weight:700} html[dir="rtl"] .brand .mk b{font-family:'Cairo',sans-serif} html[dir="rtl"] .hikmah-word{font-family:'Belqees','Cairo',serif} html[dir="rtl"] h1.wm{font-family:'Belqees','Cairo',serif;font-weight:700;line-height:1.5} /* About — "Who I am" portrait treatment (illustration cut onto the cream) */ .who{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center} .who-text .lede{max-width:52ch} .who-rule{display:block;height:4px;width:120px;border-radius:3px;margin-top:30px;background:linear-gradient(90deg,#8B5CF6,#3B82F6,#22C3D6,#10B981,#EAB308,#FF7A45,#F43F5E)} .who-media{position:relative;display:flex;justify-content:center;align-items:center;min-height:500px} .who-aura{position:absolute;width:78%;height:78%;left:14%;top:8%;background:conic-gradient(from 210deg,#8B5CF6,#3B82F6,#22C3D6,#10B981,#EAB308,#FF7A45,#F43F5E,#8B5CF6);filter:blur(70px);opacity:.30;border-radius:50%;z-index:0} .who-media img{position:relative;z-index:1;width:100%;max-width:500px;height:auto;filter:drop-shadow(0 26px 40px rgba(22,19,40,.14))} @media(max-width:820px){.who{grid-template-columns:1fr;gap:18px}.who-media{min-height:0;margin-top:6px}.who-media img{max-width:340px}} /* Footer newsletter (Kit) + form messages */ .foot-news{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--hair)} .foot-news-copy h4{font-family:var(--display);font-size:22px;font-weight:700;margin:0 0 6px} .foot-news-copy p{color:var(--muted);font-size:14px;max-width:38ch;margin:0} .foot-news form.inline{flex:1;min-width:280px;max-width:460px;margin-top:0} .kit-msg,.form-msg{width:100%;font-size:15px;font-weight:700;color:var(--muted);margin:12px 0 0} .kit-msg.ok,.form-msg.ok{color:#0E9F6E} .kit-msg.err,.form-msg.err{color:#E11D48}