{"id":2888,"date":"2026-05-31T01:23:28","date_gmt":"2026-05-31T01:23:28","guid":{"rendered":"https:\/\/nadersaied.com\/?page_id=2888"},"modified":"2026-07-12T21:27:16","modified_gmt":"2026-07-12T21:27:16","slug":"elwataneldawlianews","status":"publish","type":"page","link":"https:\/\/nadersaied.com\/ar\/elwataneldawlianews\/","title":{"rendered":"ElwatanEldawliaNews"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2888\" class=\"elementor elementor-2888\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0ea4ca e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f0ea4ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acbfc72 elementor-widget elementor-widget-html\" data-id=\"acbfc72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Al Watan International News \u2014 New Premium Case Study -->\n<section class=\"wtn-page\" id=\"wtnPage\">\n\n  <div class=\"wtn-separator\" aria-hidden=\"true\"><span><\/span><\/div>\n\n  <div class=\"wtn-shell\">\n\n    <header class=\"wtn-hero\">\n      <div class=\"wtn-brand\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/Elwaten.png\" alt=\"Al Watan International News Logo\">\n        <span>AL WATAN INTERNATIONAL NEWS<\/span>\n      <\/div>\n\n      <div class=\"wtn-hero__grid\">\n        <div class=\"wtn-copy\">\n          <span class=\"wtn-kicker\">NEWS PLATFORM CASE STUDY<\/span>\n\n          <h1>\n            \u0627\u0644\u0648\u0637\u0646 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u0646\u064a\u0648\u0632\n            <small>Al Watan International News<\/small>\n          <\/h1>\n\n          <p>\n            A premium digital presentation for an Arabic news platform, combining\n            a formal media identity with clear content hierarchy, elegant typography\n            and a responsive reading experience.\n          <\/p>\n\n          <div class=\"wtn-actions\">\n            <a href=\"#wtnGallery\" class=\"wtn-btn wtn-btn--gold\">View Project<\/a>\n            <a href=\"https:\/\/elwataneldawlia.com\/\" target=\"_blank\" rel=\"noopener\" class=\"wtn-btn wtn-btn--line\">Visit Website<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"wtn-feature\">\n          <div class=\"wtn-feature__frame\">\n            <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-1.jpg\" alt=\"Homepage Presentation\" loading=\"eager\" decoding=\"async\">\n          <\/div>\n\n          <div class=\"wtn-feature__label\">\n            <span>Featured Screen<\/span>\n            <strong>Homepage Presentation<\/strong>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n\n    <section class=\"wtn-overview\">\n      <article>\n        <span>01<\/span>\n        <h2>Editorial Structure<\/h2>\n        <p>Clear hierarchy for headlines, categories, articles and important updates.<\/p>\n      <\/article>\n\n      <article>\n        <span>02<\/span>\n        <h2>Premium Media Identity<\/h2>\n        <p>Royal purple, white and gold for a confident and recognizable news brand.<\/p>\n      <\/article>\n\n      <article>\n        <span>03<\/span>\n        <h2>Responsive Experience<\/h2>\n        <p>Consistent presentation across desktop, tablet and mobile screens.<\/p>\n      <\/article>\n    <\/section>\n\n    <section class=\"wtn-gallery-section\" id=\"wtnGallery\">\n      <div class=\"wtn-gallery-head\">\n        <div>\n          <span>PROJECT GALLERY<\/span>\n          <h2>Selected Screens<\/h2>\n        <\/div>\n\n        <p>\n          Five key visuals presenting the website direction, news interface and mobile experience.\n        <\/p>\n      <\/div>\n\n      <div class=\"wtn-gallery\">\n        \n      <button class=\"wtn-card\" type=\"button\" data-index=\"0\" aria-label=\"Open Homepage Presentation\">\n        <div class=\"wtn-card__media\">\n          <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-1.jpg\" alt=\"Homepage Presentation\" loading=\"eager\" decoding=\"async\">\n          <span class=\"wtn-card__number\">01<\/span>\n          <span class=\"wtn-card__open\">\u2197<\/span>\n        <\/div>\n        <div class=\"wtn-card__meta\">\n          <strong>Homepage Presentation<\/strong>\n          <span>Al Watan International News<\/span>\n        <\/div>\n      <\/button>\n    \n      <button class=\"wtn-card\" type=\"button\" data-index=\"1\" aria-label=\"Open News Interface\">\n        <div class=\"wtn-card__media\">\n          <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-2.jpg\" alt=\"News Interface\" loading=\"eager\" decoding=\"async\">\n          <span class=\"wtn-card__number\">02<\/span>\n          <span class=\"wtn-card__open\">\u2197<\/span>\n        <\/div>\n        <div class=\"wtn-card__meta\">\n          <strong>News Interface<\/strong>\n          <span>Al Watan International News<\/span>\n        <\/div>\n      <\/button>\n    \n      <button class=\"wtn-card\" type=\"button\" data-index=\"2\" aria-label=\"Open Article Experience\">\n        <div class=\"wtn-card__media\">\n          <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-3.jpg\" alt=\"Article Experience\" loading=\"lazy\" decoding=\"async\">\n          <span class=\"wtn-card__number\">03<\/span>\n          <span class=\"wtn-card__open\">\u2197<\/span>\n        <\/div>\n        <div class=\"wtn-card__meta\">\n          <strong>Article Experience<\/strong>\n          <span>Al Watan International News<\/span>\n        <\/div>\n      <\/button>\n    \n      <button class=\"wtn-card\" type=\"button\" data-index=\"3\" aria-label=\"Open Mobile News Layout\">\n        <div class=\"wtn-card__media\">\n          <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-4.jpg\" alt=\"Mobile News Layout\" loading=\"lazy\" decoding=\"async\">\n          <span class=\"wtn-card__number\">04<\/span>\n          <span class=\"wtn-card__open\">\u2197<\/span>\n        <\/div>\n        <div class=\"wtn-card__meta\">\n          <strong>Mobile News Layout<\/strong>\n          <span>Al Watan International News<\/span>\n        <\/div>\n      <\/button>\n    \n      <button class=\"wtn-card\" type=\"button\" data-index=\"4\" aria-label=\"Open Media Visual Direction\">\n        <div class=\"wtn-card__media\">\n          <img src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-5.jpg\" alt=\"Media Visual Direction\" loading=\"lazy\" decoding=\"async\">\n          <span class=\"wtn-card__number\">05<\/span>\n          <span class=\"wtn-card__open\">\u2197<\/span>\n        <\/div>\n        <div class=\"wtn-card__meta\">\n          <strong>Media Visual Direction<\/strong>\n          <span>Al Watan International News<\/span>\n        <\/div>\n      <\/button>\n    \n      <\/div>\n    <\/section>\n\n    <section class=\"wtn-details\">\n      <div class=\"wtn-details__copy\">\n        <span>DESIGN DIRECTION<\/span>\n        <h2>Formal, clear and built for fast news consumption.<\/h2>\n      <\/div>\n\n      <div class=\"wtn-details__list\">\n        <div><span>01<\/span><p>Strong headline hierarchy for immediate readability.<\/p><\/div>\n        <div><span>02<\/span><p>Elegant article presentation with balanced spacing.<\/p><\/div>\n        <div><span>03<\/span><p>Visual consistency across homepage and inner pages.<\/p><\/div>\n        <div><span>04<\/span><p>Responsive layouts optimized for mobile readers.<\/p><\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"wtn-final\">\n      <div>\n        <span>AL WATAN INTERNATIONAL NEWS<\/span>\n        <h2>A modern digital identity for a trusted news platform.<\/h2>\n      <\/div>\n\n      <a href=\"https:\/\/nadersaied.com\/contact\/\" class=\"wtn-btn wtn-btn--gold\">Start a Similar Project<\/a>\n    <\/section>\n\n  <\/div>\n<\/section>\n\n<div class=\"wtn-lightbox\" id=\"wtnLightbox\" aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"wtn-lightbox__backdrop\"><\/div>\n\n  <button class=\"wtn-lightbox__close\" type=\"button\" aria-label=\"Close\">\u00d7<\/button>\n  <button class=\"wtn-lightbox__nav wtn-lightbox__prev\" type=\"button\" aria-label=\"Previous\">\u2039<\/button>\n\n  <div class=\"wtn-lightbox__stage\">\n    <img decoding=\"async\" class=\"wtn-lightbox__image\" src=\"\" alt=\"\">\n    <div class=\"wtn-lightbox__caption\">\n      <strong><\/strong>\n      <span><\/span>\n    <\/div>\n  <\/div>\n\n  <button class=\"wtn-lightbox__nav wtn-lightbox__next\" type=\"button\" aria-label=\"Next\">\u203a<\/button>\n\n  <div class=\"wtn-lightbox__thumbs\">\n    \n      <button type=\"button\" data-index=\"0\" aria-label=\"Open image 1\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-1.jpg\" alt=\"\">\n      <\/button>\n    \n      <button type=\"button\" data-index=\"1\" aria-label=\"Open image 2\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-2.jpg\" alt=\"\">\n      <\/button>\n    \n      <button type=\"button\" data-index=\"2\" aria-label=\"Open image 3\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-3.jpg\" alt=\"\">\n      <\/button>\n    \n      <button type=\"button\" data-index=\"3\" aria-label=\"Open image 4\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-4.jpg\" alt=\"\">\n      <\/button>\n    \n      <button type=\"button\" data-index=\"4\" aria-label=\"Open image 5\">\n        <img decoding=\"async\" src=\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-5.jpg\" alt=\"\">\n      <\/button>\n    \n  <\/div>\n<\/div>\n\n<style>\n.wtn-page,\n.wtn-page *,\n.wtn-lightbox,\n.wtn-lightbox * {\n  box-sizing: border-box;\n}\n\n.wtn-page {\n  --bg:#12091d;\n  --bg2:#241039;\n  --purple:#6d3ca0;\n  --purple2:#b48ad8;\n  --gold:#d7b56d;\n  --gold2:#f5dfac;\n  --white:#fff;\n  --muted:rgba(255,255,255,.65);\n  --line:rgba(255,255,255,.11);\n\n  position:relative;\n  overflow:hidden;\n  padding:84px 5% 74px;\n  color:var(--white);\n  background:\n    radial-gradient(circle at 85% 10%,rgba(109,60,160,.28),transparent 28%),\n    radial-gradient(circle at 12% 84%,rgba(215,181,109,.08),transparent 24%),\n    linear-gradient(145deg,var(--bg),var(--bg2) 62%,#0b0611);\n  font-family:Inter,Poppins,Arial,sans-serif;\n}\n\n.wtn-page::before {\n  content:\"\";\n  position:absolute;\n  inset:0;\n  pointer-events:none;\n  opacity:.14;\n  background-image:\n    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),\n    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);\n  background-size:52px 52px;\n}\n\n.wtn-shell {\n  position:relative;\n  z-index:2;\n  width:min(1380px,100%);\n  margin:0 auto;\n}\n\n.wtn-separator {\n  position:absolute;\n  top:0;\n  left:50%;\n  width:min(86%,1150px);\n  height:2px;\n  transform:translateX(-50%);\n  background:linear-gradient(90deg,transparent,rgba(215,181,109,.35),var(--gold),rgba(215,181,109,.35),transparent);\n  box-shadow:0 0 18px rgba(215,181,109,.30);\n}\n\n.wtn-separator span {\n  position:absolute;\n  top:-7px;\n  left:50%;\n  width:14px;\n  height:14px;\n  transform:translateX(-50%) rotate(45deg);\n  border:2px solid var(--gold);\n  background:#160b22;\n  box-shadow:0 0 15px rgba(215,181,109,.55);\n}\n\n.wtn-hero {\n  padding:24px 0 72px;\n  border-bottom:1px solid var(--line);\n}\n\n.wtn-brand {\n  display:flex;\n  align-items:center;\n  gap:15px;\n  margin-bottom:48px;\n}\n\n.wtn-brand img {\n  width:120px;\n  height:120px;\n  object-fit:contain;\n  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));\n}\n\n.wtn-brand span {\n  color:var(--gold2);\n  font-size:10px;\n  font-weight:900;\n  letter-spacing:2.3px;\n}\n\n.wtn-hero__grid {\n  display:grid;\n  grid-template-columns:.92fr 1.08fr;\n  gap:62px;\n  align-items:center;\n}\n\n.wtn-kicker,\n.wtn-gallery-head span,\n.wtn-details__copy span,\n.wtn-final span {\n  display:block;\n  color:var(--gold);\n  font-size:10px;\n  font-weight:900;\n  letter-spacing:2.4px;\n}\n\n.wtn-copy h1 {\n  margin:14px 0 0;\n  font-size:clamp(48px,5.5vw,82px);\n  line-height:1.02;\n  font-weight:900;\n}\n\n.wtn-copy h1 small {\n  display:block;\n  margin-top:14px;\n  color:var(--gold2);\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(28px,3.4vw,52px);\n  line-height:1.1;\n  font-weight:500;\n}\n\n.wtn-copy p {\n  max-width:650px;\n  margin:24px 0 0;\n  color:var(--muted);\n  font-size:15px;\n  line-height:1.9;\n}\n\n.wtn-actions {\n  display:flex;\n  flex-wrap:wrap;\n  gap:12px;\n  margin-top:30px;\n}\n\n.wtn-btn {\n  min-height:52px;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  padding:0 24px;\n  border-radius:12px;\n  text-decoration:none !important;\n  font-size:12px;\n  font-weight:850;\n  transition:transform .25s ease;\n}\n\n.wtn-btn:hover {\n  transform:translateY(-3px);\n}\n\n.wtn-btn--gold {\n  color:#1a0e26 !important;\n  background:linear-gradient(135deg,var(--gold2),var(--gold));\n  box-shadow:0 14px 34px rgba(215,181,109,.20);\n}\n\n.wtn-btn--line {\n  border:1px solid rgba(255,255,255,.18);\n  color:#fff !important;\n  background:rgba(255,255,255,.035);\n}\n\n.wtn-feature {\n  padding:12px;\n  border:1px solid rgba(255,255,255,.12);\n  border-radius:26px;\n  background:rgba(255,255,255,.045);\n  box-shadow:0 30px 84px rgba(0,0,0,.34);\n}\n\n.wtn-feature__frame {\n  overflow:hidden;\n  aspect-ratio:16\/10;\n  border-radius:18px;\n  background:#1a0d29;\n}\n\n.wtn-feature__frame img {\n  width:100%;\n  height:100%;\n  display:block;\n  object-fit:cover;\n}\n\n.wtn-feature__label {\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  padding:14px 6px 2px;\n}\n\n.wtn-feature__label span {\n  color:var(--muted);\n  font-size:10px;\n}\n\n.wtn-feature__label strong {\n  color:#fff;\n  font-size:13px;\n}\n\n.wtn-overview {\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:15px;\n  padding:56px 0 92px;\n}\n\n.wtn-overview article {\n  padding:25px;\n  border:1px solid var(--line);\n  border-radius:20px;\n  background:rgba(255,255,255,.035);\n}\n\n.wtn-overview span {\n  color:var(--gold);\n  font-size:10px;\n  font-weight:900;\n}\n\n.wtn-overview h2 {\n  margin:13px 0 9px;\n  font-size:20px;\n}\n\n.wtn-overview p {\n  margin:0;\n  color:var(--muted);\n  font-size:13px;\n  line-height:1.8;\n}\n\n.wtn-gallery-section {\n  padding-bottom:96px;\n}\n\n.wtn-gallery-head {\n  display:flex;\n  align-items:end;\n  justify-content:space-between;\n  gap:30px;\n  margin-bottom:34px;\n}\n\n.wtn-gallery-head h2 {\n  margin:9px 0 0;\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(42px,5vw,72px);\n  line-height:1;\n  font-weight:500;\n}\n\n.wtn-gallery-head p {\n  max-width:430px;\n  margin:0;\n  color:var(--muted);\n  font-size:13px;\n  line-height:1.8;\n}\n\n.wtn-gallery {\n  display:grid;\n  grid-template-columns:repeat(12,1fr);\n  gap:20px;\n}\n\n.wtn-card {\n  grid-column:span 4;\n  display:block;\n  width:100%;\n  padding:0;\n  border:0;\n  background:transparent;\n  color:#fff;\n  text-align:left;\n  cursor:zoom-in;\n}\n\n.wtn-card:nth-child(1),\n.wtn-card:nth-child(4) {\n  grid-column:span 8;\n}\n\n.wtn-card__media {\n  position:relative;\n  overflow:hidden;\n  width:100%;\n  aspect-ratio:1\/1;\n  border:1px solid rgba(255,255,255,.10);\n  border-radius:18px;\n  background:#1a0d29;\n}\n\n.wtn-card:nth-child(1) .wtn-card__media,\n.wtn-card:nth-child(4) .wtn-card__media {\n  aspect-ratio:2\/1;\n}\n\n.wtn-card__media img {\n  width:100%;\n  height:100%;\n  display:block;\n  object-fit:cover;\n  transition:transform .45s ease;\n}\n\n.wtn-card:hover img {\n  transform:scale(1.035);\n}\n\n.wtn-card__number,\n.wtn-card__open {\n  position:absolute;\n  z-index:2;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border:1px solid rgba(255,255,255,.18);\n  background:rgba(18,9,29,.72);\n  color:#fff;\n  backdrop-filter:blur(8px);\n}\n\n.wtn-card__number {\n  top:12px;\n  right:12px;\n  min-width:40px;\n  height:28px;\n  border-radius:999px;\n  font-size:9px;\n  font-weight:900;\n}\n\n.wtn-card__open {\n  left:12px;\n  bottom:12px;\n  width:40px;\n  height:40px;\n  border-radius:50%;\n  font-size:20px;\n}\n\n.wtn-card__meta {\n  padding:14px 2px 0;\n}\n\n.wtn-card__meta strong,\n.wtn-card__meta span {\n  display:block;\n}\n\n.wtn-card__meta strong {\n  font-size:14px;\n}\n\n.wtn-card__meta span {\n  margin-top:4px;\n  color:var(--muted);\n  font-size:10px;\n}\n\n.wtn-details {\n  display:grid;\n  grid-template-columns:.85fr 1.15fr;\n  gap:54px;\n  padding:0 0 90px;\n}\n\n.wtn-details__copy h2 {\n  margin:13px 0 0;\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(38px,4vw,62px);\n  line-height:1.08;\n  font-weight:500;\n}\n\n.wtn-details__list {\n  display:grid;\n  gap:12px;\n}\n\n.wtn-details__list div {\n  display:grid;\n  grid-template-columns:44px 1fr;\n  gap:14px;\n  align-items:center;\n  padding:18px 0;\n  border-top:1px solid var(--line);\n}\n\n.wtn-details__list span {\n  color:var(--gold);\n  font-size:11px;\n  font-weight:900;\n}\n\n.wtn-details__list p {\n  margin:0;\n  color:var(--muted);\n  font-size:13px;\n  line-height:1.75;\n}\n\n.wtn-final {\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:28px;\n  padding:34px;\n  border:1px solid rgba(215,181,109,.14);\n  border-radius:22px;\n  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.025));\n}\n\n.wtn-final h2 {\n  max-width:820px;\n  margin:9px 0 0;\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(28px,3vw,46px);\n  line-height:1.25;\n  font-weight:500;\n}\n\n\/* Fullscreen *\/\n.wtn-lightbox {\n  position:fixed;\n  inset:0;\n  z-index:9999999;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  visibility:hidden;\n  opacity:0;\n  pointer-events:none;\n  transition:.2s ease;\n}\n\n.wtn-lightbox.is-open {\n  visibility:visible;\n  opacity:1;\n  pointer-events:auto;\n}\n\n.wtn-lightbox__backdrop {\n  position:absolute;\n  inset:0;\n  background:rgba(10,4,16,.97);\n  backdrop-filter:blur(14px);\n}\n\n.wtn-lightbox__stage {\n  position:relative;\n  z-index:2;\n  width:min(86vw,1300px);\n  height:calc(100vh - 160px);\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  gap:12px;\n}\n\n.wtn-lightbox__image {\n  max-width:100%;\n  max-height:calc(100% - 44px);\n  object-fit:contain;\n}\n\n.wtn-lightbox__caption {\n  display:flex;\n  align-items:center;\n  gap:14px;\n  color:#fff;\n}\n\n.wtn-lightbox__caption strong {\n  font-size:12px;\n}\n\n.wtn-lightbox__caption span {\n  color:var(--gold);\n  font-size:10px;\n}\n\n.wtn-lightbox__close,\n.wtn-lightbox__nav {\n  position:fixed;\n  z-index:5;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border:1px solid rgba(255,255,255,.18);\n  background:#1a0d29;\n  color:#fff;\n  cursor:pointer;\n}\n\n.wtn-lightbox__close {\n  top:14px;\n  right:14px;\n  width:52px;\n  height:52px;\n  border-radius:50%;\n  font-size:34px;\n}\n\n.wtn-lightbox__nav {\n  top:50%;\n  width:52px;\n  height:64px;\n  margin-top:-32px;\n  border-radius:999px;\n  font-size:38px;\n}\n\n.wtn-lightbox__prev { left:16px; }\n.wtn-lightbox__next { right:16px; }\n\n.wtn-lightbox__thumbs {\n  position:fixed;\n  right:0;\n  bottom:0;\n  left:0;\n  z-index:4;\n  display:flex;\n  justify-content:center;\n  gap:7px;\n  overflow-x:auto;\n  padding:10px 14px 14px;\n  background:linear-gradient(0deg,rgba(10,4,16,.98),transparent);\n}\n\n.wtn-lightbox__thumbs button {\n  flex:0 0 46px;\n  width:46px;\n  height:46px;\n  padding:0;\n  overflow:hidden;\n  border:2px solid transparent;\n  border-radius:8px;\n  background:transparent;\n  opacity:.42;\n}\n\n.wtn-lightbox__thumbs button.active {\n  border-color:var(--gold);\n  opacity:1;\n}\n\n.wtn-lightbox__thumbs img {\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n\nbody.wtn-lock {\n  overflow:hidden !important;\n}\n\n@media(max-width:1024px) {\n  .wtn-hero__grid,\n  .wtn-details {\n    grid-template-columns:1fr;\n  }\n\n  .wtn-overview {\n    grid-template-columns:1fr;\n  }\n\n  .wtn-card,\n  .wtn-card:nth-child(1),\n  .wtn-card:nth-child(4) {\n    grid-column:span 6;\n  }\n\n  .wtn-card:nth-child(1) .wtn-card__media,\n  .wtn-card:nth-child(4) .wtn-card__media {\n    aspect-ratio:1\/1;\n  }\n}\n\n@media(max-width:767px) {\n  .wtn-page {\n    padding:58px 14px 48px;\n  }\n\n  .wtn-brand {\n    flex-direction:column;\n    align-items:center;\n    text-align:center;\n  }\n\n  .wtn-brand img {\n    width:180px;\n    height:180px;\n  }\n\n  .wtn-brand span {\n    font-size:9px;\n  }\n\n  .wtn-copy {\n    text-align:center;\n  }\n\n  .wtn-copy h1 {\n    font-size:40px;\n  }\n\n  .wtn-copy h1 small {\n    font-size:27px;\n  }\n\n  .wtn-copy p {\n    font-size:14px;\n  }\n\n  .wtn-actions {\n    display:grid;\n    grid-template-columns:1fr;\n  }\n\n  .wtn-btn {\n    width:100%;\n  }\n\n  .wtn-gallery-head {\n    display:block;\n  }\n\n  .wtn-gallery-head p {\n    margin-top:13px;\n  }\n\n  .wtn-gallery {\n    grid-template-columns:1fr;\n    gap:18px;\n  }\n\n  .wtn-card,\n  .wtn-card:nth-child(1),\n  .wtn-card:nth-child(4) {\n    grid-column:auto;\n  }\n\n  .wtn-card__media,\n  .wtn-card:nth-child(1) .wtn-card__media,\n  .wtn-card:nth-child(4) .wtn-card__media {\n    aspect-ratio:1\/1;\n  }\n\n  .wtn-final {\n    flex-direction:column;\n    align-items:stretch;\n    text-align:center;\n  }\n\n  .wtn-lightbox__stage {\n    width:100vw;\n    height:100dvh;\n    padding:66px 8px 104px;\n  }\n\n  .wtn-lightbox__nav {\n    top:auto;\n    bottom:62px;\n    width:44px;\n    height:44px;\n    margin:0;\n  }\n\n  .wtn-lightbox__prev { left:10px; }\n  .wtn-lightbox__next { right:10px; }\n}\n<\/style>\n\n<script>\n(function(){\n  const page=document.getElementById(\"wtnPage\");\n  const lightbox=document.getElementById(\"wtnLightbox\");\n  if(!page||!lightbox)return;\n\n  const items=[\n      {title:\"Homepage Presentation\",src:\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-1.jpg\"},\n      {title:\"News Interface\",src:\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-2.jpg\"},\n      {title:\"Article Experience\",src:\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-3.jpg\"},\n      {title:\"Mobile News Layout\",src:\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-4.jpg\"},\n      {title:\"Media Visual Direction\",src:\"http:\/\/nadersaied.com\/wp-content\/uploads\/2026\/07\/W-5.jpg\"}\n  ];\n\n  const cards=Array.from(page.querySelectorAll(\".wtn-card\"));\n  const image=lightbox.querySelector(\".wtn-lightbox__image\");\n  const title=lightbox.querySelector(\".wtn-lightbox__caption strong\");\n  const count=lightbox.querySelector(\".wtn-lightbox__caption span\");\n  const close=lightbox.querySelector(\".wtn-lightbox__close\");\n  const prev=lightbox.querySelector(\".wtn-lightbox__prev\");\n  const next=lightbox.querySelector(\".wtn-lightbox__next\");\n  const backdrop=lightbox.querySelector(\".wtn-lightbox__backdrop\");\n  const thumbs=Array.from(lightbox.querySelectorAll(\".wtn-lightbox__thumbs button\"));\n\n  let active=0;\n  let touchStart=0;\n\n  function update(){\n    const item=items[active];\n    image.src=item.src;\n    image.alt=item.title;\n    title.textContent=item.title;\n    count.textContent=String(active+1).padStart(2,\"0\")+\" \/ \"+String(items.length).padStart(2,\"0\");\n    thumbs.forEach((btn,i)=>btn.classList.toggle(\"active\",i===active));\n  }\n\n  function open(index){\n    active=index;\n    update();\n    lightbox.classList.add(\"is-open\");\n    lightbox.setAttribute(\"aria-hidden\",\"false\");\n    document.body.classList.add(\"wtn-lock\");\n    setTimeout(()=>close.focus(),80);\n  }\n\n  function closeBox(){\n    lightbox.classList.remove(\"is-open\");\n    lightbox.setAttribute(\"aria-hidden\",\"true\");\n    document.body.classList.remove(\"wtn-lock\");\n  }\n\n  function move(dir){\n    active=(active+dir+items.length)%items.length;\n    update();\n  }\n\n  cards.forEach((card,i)=>card.addEventListener(\"click\",()=>open(i)));\n  thumbs.forEach(btn=>btn.addEventListener(\"click\",()=>{active=Number(btn.dataset.index);update();}));\n\n  close.addEventListener(\"click\",closeBox);\n  backdrop.addEventListener(\"click\",closeBox);\n  prev.addEventListener(\"click\",()=>move(-1));\n  next.addEventListener(\"click\",()=>move(1));\n\n  document.addEventListener(\"keydown\",e=>{\n    if(!lightbox.classList.contains(\"is-open\"))return;\n    if(e.key===\"Escape\")closeBox();\n    if(e.key===\"ArrowLeft\")move(-1);\n    if(e.key===\"ArrowRight\")move(1);\n  });\n\n  image.addEventListener(\"touchstart\",e=>touchStart=e.changedTouches[0].clientX,{passive:true});\n  image.addEventListener(\"touchend\",e=>{\n    const diff=e.changedTouches[0].clientX-touchStart;\n    if(Math.abs(diff)<45)return;\n    move(diff>0?-1:1);\n  },{passive:true});\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AL WATAN INTERNATIONAL NEWS NEWS PLATFORM CASE STUDY \u0627\u0644\u0648\u0637\u0646 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u0646\u064a\u0648\u0632 Al Watan International News A premium digital presentation for an Arabic news platform, combining a formal media identity with clear content hierarchy, elegant typography and a responsive reading experience. View Project Visit Website Featured Screen Homepage Presentation 01 Editorial Structure Clear hierarchy for headlines, categories, articles and important updates. 02 Premium Media Identity Royal purple, white and gold for a confident and recognizable news brand. 03 Responsive Experience Consistent presentation across desktop, tablet and mobile screens. PROJECT GALLERY Selected Screens Five key visuals presenting the website direction, news interface and mobile experience. 01 \u2197 Homepage Presentation Al Watan International News 02 \u2197 News Interface Al Watan International News 03 \u2197 Article Experience Al Watan International News 04 \u2197 Mobile News Layout Al Watan International News 05 \u2197 Media Visual Direction Al Watan International News DESIGN DIRECTION Formal, clear and built for fast news consumption. 01 Strong headline hierarchy for immediate readability. 02 Elegant article presentation with balanced spacing. 03 Visual consistency across homepage and inner pages. 04 Responsive layouts optimized for mobile readers. AL WATAN INTERNATIONAL NEWS A modern digital identity for a trusted news platform. Start a Similar Project \u00d7 \u2039 \u203a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2888","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/comments?post=2888"}],"version-history":[{"count":49,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2888\/revisions"}],"predecessor-version":[{"id":4246,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2888\/revisions\/4246"}],"wp:attachment":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/media?parent=2888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}