/* ============================================================================ Radio Nisaa front theme — Bootstrap 5 layer. Loaded AFTER bootstrap.rtl.min.css. Defines the brand palette, fonts and the bespoke components (hero / live player / slider / program circles / cards). ========================================================================== */ /* ---- Fonts (served from ./fonts) ---- */ /* @font-face{font-family:"Cairo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cairo-400.woff2) format("woff2")} @font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cairo-700.woff2) format("woff2")} */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Noto+Kufi+Arabic:wght@100..900&display=swap'); @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-400.woff2) format("woff2")} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-700.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")} /* ---- Brand tokens + Bootstrap variable overrides ---- */ :root{ --rn-primary:#72035a; --rn-primary-hover:#550243; --rn-primary-fg:#fff; --rn-secondary:#073455; --rn-dark:#25041d; --rn-dark-fg:#f5f4ef; --rn-dark-muted:#bea7b8; --rn-dark-border:#371b30; --rn-bg:#f8f8f6; --rn-surface:#fff; --rn-fg:#18202a; --rn-muted:#5a6472; --rn-border:#e5dce3; --rn-success:#16a249; --rn-error:#dc2828; /* Headings: Cairo. Body: Plus Jakarta Sans for Latin (as the design), then Cairo so Arabic body text renders in Cairo instead of falling back to a plain system font. */ --rn-font-heading:"Cairo",sans-serif; //--rn-font-body:"Plus Jakarta Sans","Cairo",sans-serif; --rn-font-body:"Cairo",sans-serif; --bs-primary:#72035a; --bs-primary-rgb:114,3,90; --bs-body-bg:var(--rn-bg); --bs-body-color:var(--rn-fg); --bs-body-font-family:var(--rn-font-body); --bs-border-color:var(--rn-border); --bs-link-color:var(--rn-primary); --bs-link-hover-color:var(--rn-primary-hover); } html[dir="rtl"] body{font-family:var(--rn-font-body)} html{overflow-x:hidden} body{background:var(--rn-bg);color:var(--rn-fg);font-family:var(--rn-font-body);overflow-x:hidden} h1,h2,h3,h4,h5,.rn-head{font-family:var(--rn-font-heading);font-weight:700;line-height:1.25} /* Bootstrap helpers recoloured to the brand */ .btn-primary{--bs-btn-bg:var(--rn-primary);--bs-btn-border-color:var(--rn-primary);--bs-btn-hover-bg:var(--rn-primary-hover);--bs-btn-hover-border-color:var(--rn-primary-hover);--bs-btn-active-bg:var(--rn-primary-hover)} .text-primary{color:var(--rn-primary)!important} .bg-primary{background:var(--rn-primary)!important} .link-primary{color:var(--rn-primary)!important} a{color:var(--rn-primary);text-decoration:none} a:hover{color:var(--rn-primary-hover)} /* Section blocks on light / dark / surface */ .rn-dark{background:var(--rn-dark);color:var(--rn-dark-fg)} .rn-dark .text-muted,.rn-dark small{color:var(--rn-dark-muted)!important} .rn-surface{background:var(--rn-surface)} .rn-section{padding:4rem 0} .rn-section-sm{padding:2.5rem 0} .container-rn{max-width:1200px} /* ---- Buttons ---- */ .rn-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;border-radius:999px;padding:.7rem 1.6rem;transition:all .2s;border:1.5px solid transparent;cursor:pointer;font-family:var(--rn-font-heading)} .rn-btn-accent{background:var(--rn-primary);color:#fff} .rn-btn-accent:hover{background:var(--rn-primary-hover);color:#fff;transform:translateY(-1px)} .rn-btn-ghost{background:transparent;color:var(--rn-primary);border-color:var(--rn-primary)} .rn-btn-ghost:hover{background:var(--rn-primary);color:#fff} .rn-btn-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)} .rn-btn-light:hover{background:rgba(255,255,255,.16);color:#fff} /* On dark sections the default magenta reads as purple-on-purple. Use a BRIGHT magenta fill + glow so it clearly reads as a button, and keep ghost as a white outline. */ .rn-dark .rn-btn-accent{background:#c62d92;color:#fff;box-shadow:0 6px 18px rgba(198,45,146,.4)} .rn-dark .rn-btn-accent:hover{background:#d84fa8;color:#fff;box-shadow:0 8px 22px rgba(198,45,146,.5)} .rn-dark .rn-btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)} .rn-dark .rn-btn-ghost:hover{background:#c62d92;color:#fff;border-color:#c62d92} /* ---- Top bar + navbar ---- */ .rn-topbar{background:var(--rn-dark);color:var(--rn-dark-fg);font-size:.85rem;font-family:var(--rn-font-heading)} .rn-topbar .rn-freq{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap} .rn-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--rn-success);display:inline-block;position:relative;flex:0 0 auto} /* Live indicators emit a soft expanding ring (design: animate-ping) */ .rn-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:rnPing 1.8s cubic-bezier(0,0,.2,1) infinite;pointer-events:none} @keyframes rnPing{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.4);opacity:0}} /* …except where the design shows a plain static dot */ .rn-ticker__label .rn-dot::after,.rn-pill .rn-dot::after{display:none} @media (prefers-reduced-motion:reduce){ .rn-dot::after,.rn-player__ring,.rn-ticker__row{animation:none!important} } .rn-live-btn{background:var(--rn-primary);color:#fff;border:none;border-radius:999px;padding:.35rem 1rem;font-weight:700;display:inline-flex;align-items:center;gap:.5rem} .rn-navbar{background:var(--rn-surface);border-bottom:1px solid var(--rn-border);box-shadow:0 1px 6px rgba(0,0,0,.04)} .rn-navbar .navbar-brand img{height:56px;width:auto} .rn-navbar .nav-link{color:var(--rn-fg);font-weight:600;padding:.5rem .9rem;border-radius:.4rem} .rn-navbar .nav-link:hover,.rn-navbar .nav-link.active{color:var(--rn-primary);background:var(--rn-bg)} /* ---- Ticker ---- */ .rn-ticker{background:rgba(114,3,90,.14);border-bottom:1px solid var(--rn-dark-border);overflow:hidden} .rn-ticker__label{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;background:var(--rn-primary);color:#fff;padding:.5rem 1.1rem;white-space:nowrap;font-family:var(--rn-font-heading)} .rn-ticker__viewport{flex:1 1 auto;min-width:0;overflow:hidden} .rn-ticker__row{display:flex;align-items:center;gap:1rem;white-space:nowrap;padding:.5rem 0;animation:rnScroll 40s linear infinite} .rn-ticker a{color:var(--rn-dark-fg);opacity:.9} .rn-ticker a:hover{opacity:1;text-decoration:underline} @keyframes rnScroll{from{transform:translateX(-0%)}to{transform:translateX(-60%)}} /* Arabic (RTL): run the news ticker the other way — left → right */ html[dir="rtl"] .rn-ticker__row{animation-direction:reverse} /* ---- Hero live player + slider ---- */ .rn-player{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1.25rem;padding:2rem;text-align:center;color:#fff} .rn-player__disc{width:12rem;height:12rem;border-radius:50%;border:4px solid rgba(114,3,90,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;position:relative} /* Slowly-rotating dashed ring inside the disc (design) */ .rn-player__ring{position:absolute;inset:.5rem;border:2px dashed rgba(255,255,255,.12);border-radius:50%;animation:rnSpin 20s linear infinite;pointer-events:none} @keyframes rnSpin{to{transform:rotate(360deg)}} .rn-player__play{width:8rem;height:8rem;border-radius:50%;background:var(--rn-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:transform .2s ease,background .2s ease;box-shadow:0 10px 30px rgba(114,3,90,.45)} .rn-player__play:hover{transform:scale(1.1);background:var(--rn-primary-hover)} .rn-player__play:active{transform:scale(.95)} .rn-slider{position:relative;border-radius:1.25rem;overflow:hidden;min-height:340px;height:100%} .rn-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s} .rn-slide.active{opacity:1;z-index:2} .rn-slide img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .rn-slider:hover .rn-slide.active img{transform:scale(1.05)} .rn-slide__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;background:linear-gradient(to top,rgba(37,4,29,.95),rgba(37,4,29,.35),transparent)} .rn-slide__cap h2{color:#fff} .rn-slide__title{font-size:clamp(.85rem,1.25vw,1.05rem);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rn-badge{display:inline-block;align-self:flex-start;width:fit-content;background:var(--rn-primary);color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:.4rem} /* ---- Full-bleed hero slider ------------------------------------------------- The hero used to sit in a col-lg-8 beside the live player (min-height 340px). It now spans the whole section edge-to-edge; the player moved to its own row underneath. Square corners on purpose — it is flush with the viewport edges. */ .rn-slider--hero{border-radius:0;height:clamp(380px,64vh,640px);min-height:380px} .rn-slider--hero .rn-slide__cap{ justify-content:center; /* Inline padding must clear the prev/next arrows: in RTL the caption pins to the right, which is exactly where the prev arrow sits. Keep this >= arrow width + its inset, or the headline runs underneath the button. */ padding-block:clamp(1.25rem,5vw,4rem); padding-inline:clamp(4rem,7vw,7rem); /* Vertical scrim only — direction-agnostic, so it reads the same in RTL (ar) and LTR (en) without having to flip a side gradient. */ background:linear-gradient(to top,rgba(37,4,29,.92),rgba(37,4,29,.28) 52%,rgba(37,4,29,.34)); } /* margin-inline-END:auto pins the block to the START edge (right in RTL, left in the /en LTR build). Using margin-inline-start:auto does the opposite. */ .rn-slider--hero .rn-slide__capinner{ width:100%;max-width:min(46rem,58%);margin-inline-end:auto;text-align:start; } /* Accent rule above the headline — gives the caption a fixed anchor point even on slides with no category badge. */ .rn-slider--hero .rn-slide__capinner::before{ content:"";display:block;width:3.5rem;height:.3rem;border-radius:99px; background:var(--rn-primary);margin-bottom:1.15rem; } .rn-slider--hero .rn-slide__title{ font-size:clamp(1.6rem,1.05rem + 2.15vw,3.15rem); /* Arabic ascenders/descenders need more room than Latin — 1.17 was cramping multi-line headlines. */ line-height:1.45; letter-spacing:-.015em; font-weight:800; /* Two-layer shadow: a tight one for edge definition, a wide soft one to lift the text off busy photos. */ text-shadow:0 1px 2px rgba(0,0,0,.45),0 4px 24px rgba(0,0,0,.5); -webkit-line-clamp:3;line-clamp:3; } .rn-slider--hero .rn-badge{font-size:.8rem;padding:.35rem 1rem;box-shadow:0 2px 10px rgba(0,0,0,.25)} .rn-slider--hero .rn-dots{bottom:1.4rem} /* ---- Live player + platforms overlaid on the hero -------------------------- */ .rn-hero-bar{ position:absolute;inset-inline:0;top:0;z-index:6; padding-block:.9rem 2.25rem; background:linear-gradient(to bottom,rgba(37,4,29,.78),rgba(37,4,29,.3) 65%,transparent); /* The bar spans the slide, but each slide is one big link — only let the actual controls take clicks so the rest of the hero stays clickable. */ pointer-events:none; } .rn-hero-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .rn-hero-bar a,.rn-hero-bar button{pointer-events:auto} .rn-hero-bar__live{display:flex;align-items:center;gap:.8rem} .rn-hero-bar__play{ flex:0 0 auto;width:2.9rem;height:2.9rem;border-radius:50%;border:0;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0; background:var(--rn-primary);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4); transition:scale .2s,background .2s; } .rn-hero-bar__play:hover{scale:1.07;background:var(--rn-primary-hover)} .rn-hero-bar__play:active{scale:.96} .rn-hero-bar__play:focus-visible{outline:2px solid #fff;outline-offset:3px} .rn-hero-bar__txt{display:flex;flex-direction:column;line-height:1.3} .rn-hero-bar__label{ display:flex;align-items:center;gap:.4rem;color:#fff;font-weight:700;font-size:.92rem; text-shadow:0 1px 3px rgba(0,0,0,.5); } .rn-hero-bar__meta{color:rgba(255,255,255,.8);font-size:.8rem;text-shadow:0 1px 3px rgba(0,0,0,.5)} .rn-hero-bar__platforms{display:flex;align-items:center;gap:.6rem} .rn-hero-bar__platform{ display:flex;align-items:center;justify-content:center;height:2.9rem; padding:.35rem 1rem;border-radius:.8rem;background:rgba(255,255,255,.94); box-shadow:0 4px 14px rgba(0,0,0,.28);transition:scale .2s,background .2s; } .rn-hero-bar__platform:hover{scale:1.04;background:#fff} .rn-hero-bar__platform img{max-height:1.85rem;width:auto;display:block} /* ---- Prev / next arrows ---------------------------------------------------- */ .rn-slider__nav{ position:absolute;top:50%;translate:0 -50%;z-index:5; width:clamp(2.5rem,3.2vw,3.25rem);height:clamp(2.5rem,3.2vw,3.25rem); display:flex;align-items:center;justify-content:center; padding:0;border-radius:50%;cursor:pointer; color:#fff;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:.9;transition:background .2s,border-color .2s,opacity .2s,scale .2s; } .rn-slider__nav:hover,.rn-slider__nav:focus-visible{ background:var(--rn-primary);border-color:var(--rn-primary);opacity:1;scale:1.07; } .rn-slider__nav:focus-visible{outline:2px solid #fff;outline-offset:3px} .rn-slider__nav:active{scale:.96} .rn-slider__nav--prev{inset-inline-start:clamp(.6rem,1.8vw,1.75rem)} .rn-slider__nav--next{inset-inline-end:clamp(.6rem,1.8vw,1.75rem)} /* Chevrons are authored for LTR; mirror them in RTL so "previous" always points back toward the start edge. */ /* Chevron icons are authored pointing LTR (prev = left, next = right). In RTL the buttons themselves already land on the correct side — the hero nav via inset-inline-*, the programs slider via flex order — but the glyphs inside must be mirrored, otherwise "previous" visually points forward. Applies to every nav of this kind; add new ones to this selector list. */ [dir="rtl"] .rn-slider__nav svg, [dir="rtl"] .rn-progslider__nav svg { transform: scaleX(-1); } @media (max-width:991.98px){ .rn-slider--hero{height:clamp(320px,52vh,460px);min-height:320px} .rn-slider--hero .rn-slide__capinner{max-width:100%} .rn-slider--hero .rn-slide__capinner::before{width:2.75rem;height:.25rem;margin-bottom:.85rem} /* Push the headline clear of the overlaid player bar on shorter heroes. */ .rn-slider--hero .rn-slide__cap{justify-content:flex-end;padding-bottom:3.25rem} .rn-hero-bar{padding-block:.75rem 1.5rem} .rn-hero-bar__platform{height:2.5rem;padding:.3rem .75rem} .rn-hero-bar__platform img{max-height:1.5rem} } @media (max-width:575.98px){ .rn-slider--hero{height:clamp(260px,44vh,360px);min-height:260px} .rn-slider--hero .rn-slide__title{-webkit-line-clamp:2;line-clamp:2} .rn-slider__nav{width:2.35rem;height:2.35rem} .rn-slider__nav svg{width:18px;height:18px} /* On phones the arrows drop to the lower corners so the headline keeps the full width instead of being squeezed between them. */ .rn-slider--hero .rn-slide__cap{padding-inline:1.25rem;padding-bottom:4rem} .rn-slider__nav{top:auto;bottom:1.1rem;translate:0 0} .rn-slider--hero .rn-dots{bottom:1.75rem} /* Keep only the live control on phones — the platform logos and the on-air line would otherwise wrap over the headline. */ .rn-hero-bar__platforms,.rn-hero-bar__meta{display:none} .rn-hero-bar{padding-block:.6rem 1.25rem} .rn-hero-bar__play{width:2.5rem;height:2.5rem} } @media (prefers-reduced-motion:reduce){ .rn-slider__nav{transition:none} .rn-slider__nav:hover,.rn-slider__nav:focus-visible,.rn-slider__nav:active{scale:1} } /* Slider dots — design: small translucent pills; active is white and wider */ .rn-dots{position:absolute;bottom:1.5rem;inset-inline-start:50%;transform:translateX(50%);display:flex;gap:.5rem;z-index:3} .rn-dots button{width:.5rem;height:.5rem;padding:0;border-radius:999px;border:none;background:rgba(255,255,255,.3);transition:width .3s ease,background .3s ease} .rn-dots button:hover{background:rgba(255,255,255,.6)} .rn-dots button.active{background:#fff;width:1.5rem} /* ---- Section heading ---- */ .rn-section-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--rn-border);padding-bottom:1rem;margin-bottom:2.5rem} .rn-section-head h2{font-size:1.9rem;margin:0} .rn-eyebrow{display:inline-block;color:var(--rn-primary);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase} /* ---- Article cards ---- */ .rn-card{background:var(--rn-surface);border:1px solid var(--rn-border);border-radius:.9rem;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s} .rn-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)} .rn-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#f3e9f0} .rn-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .rn-card:hover .rn-card__media img{transform:scale(1.05)} .rn-card__body{padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .rn-card__title{font-family:var(--rn-font-heading);font-weight:700;font-size:1.05rem;line-height:1.4;margin:0} .rn-card__title a{color:var(--rn-fg)} .rn-card__title a:hover{color:var(--rn-primary)} .rn-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rn-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .rn-muted{color:var(--rn-muted)} .rn-date{font-size:.78rem;color:var(--rn-muted)} /* ---- Program circles ---- */ .rn-program{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit} .rn-program img{width:7rem;height:7rem;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.08);transition:all .3s} .rn-program:hover img{border-color:var(--rn-primary);transform:rotate(6deg)} .rn-program span{margin-top:.7rem;font-family:var(--rn-font-heading);font-weight:700} .rn-program:hover span{color:var(--rn-primary)} /* ---- Ad slot ---- */ .rn-ad{background:rgba(90,100,114,.05);border:1px solid rgba(229,220,227,.6);border-radius:.6rem;min-height:100px;display:flex;align-items:center;justify-content:center;color:rgba(90,100,114,.5);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase} /* ---- Article body (legacy content) ---- */ .rn-article-body{font-size:1.05rem;line-height:1.9} .rn-article-body img{max-width:100%;height:auto;border-radius:.75rem;margin:1.25rem 0} .rn-article-body h2,.rn-article-body h3{font-family:var(--rn-font-heading);font-weight:700;margin:1.5rem 0 .75rem} .rn-article-body p{margin:0 0 1rem} .rn-article-body a{color:var(--rn-primary);text-decoration:underline} .rn-article-body iframe{max-width:100%} /* ---- Footer ---- */ .rn-footer{background:var(--rn-dark);color:#fff} .rn-footer p,.rn-footer li,.rn-footer span,.rn-footer h5,.rn-footer small,.rn-footer .rn-muted{color:#fff} .rn-footer a{color:#fff} .rn-footer a:hover{color:var(--rn-primary)} .rn-footer h5{position:relative;padding-bottom:.6rem;margin-bottom:1.4rem} .rn-footer h5:after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:3rem;height:3px;background:var(--rn-primary)} .rn-social a{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(255,255,255,.06);color:#fff} .rn-social a:hover{background:var(--rn-primary);color:#fff!important} /* ---- Reveal-in (pure CSS, never hides content) ---- */ @keyframes rnFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .rn-reveal{animation:rnFadeUp .6s both} /* ============================================================================ Internal / article / category pages (darnoora content classes) — themed to match the Bootstrap front theme without changing the blade logic. ========================================================================== */ .internal_div{background:var(--rn-bg)} .page-header{position:relative;background:var(--rn-dark);color:#fff;padding:3.5rem 0;background-size:cover!important;background-position:center!important} .page-header:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(37,4,29,.96),rgba(37,4,29,.72))} .page-header .container{position:relative;z-index:2} .page-header .breadcrumb-nav{font-size:.85rem;color:var(--rn-dark-muted);margin-bottom:1rem} .page-header .breadcrumb-nav a{color:var(--rn-dark-muted);text-decoration:none} .page-header .breadcrumb-nav a:hover{color:#fff} .page-title{font-family:var(--rn-font-heading);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.3;color:#fff;margin:0} .page-header2{padding:1.25rem 0 .5rem;border-bottom:1px solid var(--rn-border);margin-bottom:1rem} .page-header2 .title,.page-header2 h1.title{font-family:var(--rn-font-heading);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);color:var(--rn-fg);margin-top:.5rem} .page-header2 .stext,.page-header2 .stext a{font-size:.85rem;color:var(--rn-muted);text-decoration:none} .sm-title{font-size:1.15rem;color:var(--rn-muted);line-height:1.75;margin-bottom:1.25rem;font-weight:600} .internal_page_thumb{margin:0 0 1.5rem} .internal_page_thumb .intimg-cap{font-size:.85rem;color:var(--rn-muted);margin-top:.5rem} #all_body{font-size:1.05rem;line-height:1.95;color:var(--rn-fg)} #all_body img{max-width:100%;height:auto;border-radius:.6rem;margin:1.25rem 0} #all_body h2,#all_body h3,#all_body h4{font-family:var(--rn-font-heading);font-weight:700;margin:1.6rem 0 .75rem} #all_body p{margin:0 0 1rem} #all_body a{color:var(--rn-primary);text-decoration:underline} #all_body iframe{max-width:100%} .files_div .file_link{display:inline-flex;align-items:center;gap:.5rem;color:var(--rn-primary)!important;font-weight:600;text-decoration:none} .tags_div{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2rem 0 1rem} .tags_div .title2{font-weight:700;color:var(--rn-fg)} .tag_div a{display:inline-block;background:var(--rn-surface);border:1px solid var(--rn-border);color:var(--rn-primary);padding:.3rem .85rem;border-radius:999px;font-size:.8rem;font-weight:600;text-decoration:none} .tag_div a:hover{background:var(--rn-primary);color:#fff} .related_pages{margin-top:2.5rem} .related_pages .sections-title{font-family:var(--rn-font-heading);font-weight:700;font-size:1.3rem;border-bottom:2px solid var(--rn-primary);padding-bottom:.5rem;margin-bottom:1.5rem;display:inline-block} .related_pages .sections-title a{color:var(--rn-fg);text-decoration:none} .hourly-event{background:var(--rn-surface);border:1px solid var(--rn-border);border-radius:.75rem;overflow:hidden;margin-bottom:1rem;transition:box-shadow .2s,transform .2s} .hourly-event:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)} .hourly-event .small_news_img img{aspect-ratio:16/10;object-fit:cover} .hourly-event .fast-news-item{padding:.75rem} .hourly-event .bslider_title{font-family:var(--rn-font-heading);font-weight:700;font-size:.95rem;line-height:1.45} .hourly-event a{color:var(--rn-fg);text-decoration:none} .hourly-event a:hover .bslider_title{color:var(--rn-primary)} .internal_page_right_side{padding-top:.5rem} .author_link{color:var(--rn-primary)} /* ============================================================================ Responsive — tablet & mobile. (The Bootstrap grid stacks columns; this scales the bespoke components, headings and section spacing down for small screens.) ========================================================================== */ @media (max-width: 991.98px){ .rn-section{padding:3rem 0} .rn-navbar .navbar-brand img{height:44px} } @media (max-width: 767.98px){ .rn-section{padding:2.25rem 0} .rn-section-sm{padding:1.75rem 0} .rn-section-head{flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;padding-bottom:.75rem} .rn-section-head h2{font-size:1.35rem} .rn-eyebrow,.rn-date{font-size:.72rem} /* Hero */ .rn-player{padding:1.5rem} .rn-player__disc{width:9rem;height:9rem;margin-bottom:1rem} .rn-player__play{width:6rem;height:6rem} .rn-player__play svg{width:40px;height:40px} .rn-slider{min-height:220px} .rn-slide__cap{padding:1.1rem} /* Programs */ .rn-program img{width:5.5rem;height:5.5rem} .rn-program span{font-size:.8rem} /* Ticker */ .rn-ticker__label{padding:.45rem .7rem;font-size:.75rem} .rn-ticker__row{font-size:.85rem} /* Headings that stay large on small screens */ .display-6{font-size:1.5rem} .rn-topbar{font-size:.72rem} /* Footer */ .rn-footer{padding-top:2.5rem!important} .rn-footer h5{margin-bottom:1rem} /* Internal / article pages */ .page-header{padding:2.25rem 0} #all_body{font-size:1rem;line-height:1.85} } @media (max-width: 575.98px){ .rn-topbar .rn-freq:not(:first-child){display:none} /* keep only the main frequency on tiny screens */ .rn-program img{width:5rem;height:5rem} } /* ---- Sister platforms in hero (secondary banner, per original design) ---- */ .rn-hero-platform{display:flex;align-items:center;justify-content:center;height:100%;min-height:72px;background:#fff;border-radius:.9rem;padding:.85rem 1rem;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:transform .25s ease,box-shadow .25s ease} .rn-hero-platform:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.34)} .rn-hero-platform img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain} @media (max-width: 575.98px){ .rn-hero-platform{min-height:64px} .rn-hero-platform img{max-height:38px} } /* ---- Live radio mini player (persistent, plays in background) ---- */ .rn-livebar{position:fixed;z-index:1050;bottom:1rem;inset-inline-start:1rem;display:none;align-items:center;gap:.75rem;background:var(--rn-dark);color:#fff;border:1px solid var(--rn-dark-border);border-radius:999px;padding:.5rem .85rem .5rem .5rem;box-shadow:0 12px 34px rgba(0,0,0,.4);max-width:calc(100vw - 2rem)} .rn-livebar.is-open{display:flex} .rn-livebar__btn{flex:0 0 auto;width:44px;height:44px;border:none;border-radius:50%;background:var(--rn-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s} .rn-livebar__btn:hover{background:var(--rn-primary-hover,#8a1a72)} .rn-livebar__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0} .rn-livebar__live{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;color:#eebfe0;letter-spacing:.03em} .rn-livebar__title{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem} .rn-livebar__close{flex:0 0 auto;border:none;background:transparent;color:#fff;opacity:.65;font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .35rem} .rn-livebar__close:hover{opacity:1} .rn-livebar.is-playing .rn-dot{animation:rnLivePulse 1.2s infinite} @keyframes rnLivePulse{0%,100%{opacity:1}50%{opacity:.25}} /* ---- Live player: frequency / on-air rows (per design) ---- */ .rn-player__rows{width:100%;margin-top:1.75rem;display:flex;flex-direction:column;gap:.85rem} .rn-player__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.92rem} .rn-player__row--box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:.6rem;padding:.7rem 1rem} .rn-player__row:not(.rn-player__row--box){opacity:.7;padding:0 .25rem} /* ---- Programs slider (was a grid that left gaps) ---- */ .rn-progslider{position:relative;display:flex;align-items:center;gap:.5rem} .rn-progslider__track{flex:1 1 auto;display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem;scrollbar-width:none;-ms-overflow-style:none} .rn-progslider__track::-webkit-scrollbar{display:none} .rn-progslider__item{flex:0 0 auto;width:9rem;scroll-snap-align:start} .rn-progslider__nav{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s} .rn-progslider__nav:hover{background:var(--rn-primary);border-color:var(--rn-primary)} @media (max-width:575.98px){ .rn-progslider__item{width:7.5rem} .rn-progslider__nav{display:none} } /* ---- Shared headline (title + rule), per design ---- */ .rn-headline{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem} .rn-headline h2{font-size:clamp(1.5rem,3vw,1.95rem);font-weight:800;white-space:nowrap} .rn-headline__rule{flex:1 1 auto;height:2px;background:rgba(114,3,90,.35)} .rn-headline__rule--dark{background:var(--rn-border)} /* ---- زاوية ملهمة (inspiring corner) ---- */ .rn-dotgrid{position:relative} .rn-dotgrid::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);background-size:24px 24px} .rn-feature{position:relative;display:block;aspect-ratio:4/3;border-radius:.9rem;overflow:hidden;border:1px solid var(--rn-dark-border)} .rn-feature img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .rn-feature:hover img{transform:scale(1.05)} .rn-feature__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:linear-gradient(to top,rgba(37,4,29,.92),rgba(37,4,29,.2),transparent)} .rn-feature__title{font-family:var(--rn-font-heading);font-weight:800;font-size:1.35rem;line-height:1.35;color:#fff} .rn-inspiring__lead{color:var(--rn-dark-muted);font-size:1.05rem;line-height:1.85;margin-bottom:1.5rem} .rn-inspiring__list li{padding:.75rem 0;border-top:1px solid var(--rn-dark-border)} .rn-inspiring__list a{color:#fff;font-weight:600;text-decoration:none} .rn-inspiring__list a:hover{color:#e79ad4} /* ---- زاوية آراء (opinions corner) ---- */ .rn-opinion{position:relative;background:var(--rn-bg);border:1px solid var(--rn-border);border-inline-start:4px solid var(--rn-primary);border-radius:.75rem;padding:1.6rem 1.5rem 1.4rem} .rn-opinion__quote{position:absolute;top:.1rem;inset-inline-end:1rem;font-size:3.5rem;line-height:1;color:var(--rn-primary);opacity:.16;font-family:Georgia,serif} .rn-opinion__title{font-family:var(--rn-font-heading);font-weight:700;font-size:1.05rem;line-height:1.5;margin:0 0 .6rem} .rn-opinion__title a{color:var(--rn-fg);text-decoration:none} .rn-opinion__title a:hover{color:var(--rn-primary)} /* ---- Ad slots (design: dotted placeholder frame that collapses when a real ad loads) ---- */ .rn-adslot{position:relative;display:flex;align-items:center;justify-content:center;min-height:90px;border:1px solid var(--rn-border);border-radius:.6rem;background:rgba(114,3,90,.02);overflow:hidden} .rn-adslot::before{content:attr(data-label);position:absolute;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rn-muted);opacity:.45;pointer-events:none} .rn-adslot ins{position:relative;z-index:1;max-width:100%} .rn-adslot--hero{min-height:100px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)} .rn-adslot--hero::before{color:var(--rn-dark-muted)} @media (min-width:768px){ .rn-adslot--hero{min-height:120px} } /* ---- Featured project band (design: مشروع أيادينا) ---- */ .rn-tintband{background:rgba(114,3,90,.05);border-top:1px solid rgba(114,3,90,.1);border-bottom:1px solid rgba(114,3,90,.1)} .rn-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:999px;background:rgba(114,3,90,.1);color:var(--rn-primary);font-family:var(--rn-font-heading);font-weight:700;font-size:.85rem} .rn-pill .rn-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--rn-primary);animation:rnLivePulse 1.6s infinite} .rn-feature__lead-title{font-family:var(--rn-font-heading);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.35;color:var(--rn-fg);margin-bottom:1.25rem} /* Stat pair in the featured-project band (design: primary border + big number) */ .rn-stat{border-inline-start:2px solid var(--rn-primary);padding-inline-start:1rem} .rn-stat__num{display:block;font-family:var(--rn-font-heading);font-size:clamp(1.6rem,3vw,1.95rem);font-weight:800;color:var(--rn-primary);line-height:1.1;margin-bottom:.2rem} .rn-stat__label{font-size:.85rem;color:var(--rn-muted)} .rn-feature-img{display:block;border-radius:1rem;overflow:hidden;box-shadow:0 22px 50px rgba(37,4,29,.28);aspect-ratio:4/3} .rn-feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .rn-feature-img:hover img{transform:scale(1.05)} /* ---- Featured interview card in قضايا وحقوق (design) ---- */ .rn-interview{display:flex;align-items:center;gap:2rem;background:rgba(114,3,90,.05);border:1px solid rgba(114,3,90,.1);border-radius:1.5rem;padding:2rem} .rn-interview__img{flex:0 0 auto;width:12rem;height:8rem;border-radius:1rem;overflow:hidden;box-shadow:0 8px 20px rgba(37,4,29,.18);display:block} .rn-interview__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .rn-interview__img:hover img{transform:scale(1.06)} .rn-interview__title{font-family:var(--rn-font-heading);font-weight:800;font-size:1.35rem;line-height:1.4;color:var(--rn-primary);margin:0 0 .75rem} .rn-interview__title a{color:inherit;text-decoration:none} .rn-interview__title a:hover{color:var(--rn-primary-hover)} @media (max-width:767.98px){ .rn-interview{flex-direction:column;text-align:center;gap:1.25rem;padding:1.5rem;border-radius:1rem} .rn-interview__img{width:100%;max-width:16rem;height:9rem} .rn-interview__title{font-size:1.15rem} } /* ---- Category tabs ---- */ .rn-tabs__nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;border-bottom:1px solid var(--rn-border);padding-bottom:1.25rem;margin-bottom:2.25rem} .rn-tabs__btn{border:1px solid var(--rn-border);background:var(--rn-surface);color:var(--rn-muted);font-family:var(--rn-font-heading);font-weight:700;font-size:.9rem;padding:.55rem 1.15rem;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap} .rn-tabs__btn:hover{border-color:var(--rn-primary);color:var(--rn-primary)} .rn-tabs__btn.active{background:var(--rn-primary);border-color:var(--rn-primary);color:#fff} .rn-tabs__panel{display:none} .rn-tabs__panel.active{display:block;animation:rnFadeIn .4s both} /* ========================================================================= Responsive layer for the sections added in the design port (hero platforms, ad slots, inspiring/opinions/featured bands, tabs, stats) ========================================================================= */ @media (max-width: 991.98px){ .rn-headline{margin-bottom:1.75rem} .rn-feature__lead-title{margin-bottom:1rem} .rn-inspiring__lead{font-size:1rem;line-height:1.75;margin-bottom:1.25rem} .rn-feature__title{font-size:1.15rem} .rn-adslot{min-height:80px} .rn-adslot--hero{min-height:90px} } @media (max-width: 767.98px){ /* Long Arabic headings must wrap instead of overflowing the viewport */ .rn-headline{flex-wrap:wrap;gap:.65rem;margin-bottom:1.5rem} .rn-headline h2{white-space:normal;font-size:1.35rem;flex:1 1 100%} .rn-headline__rule{display:none} /* Tabs: scroll sideways rather than stacking into a tall block */ .rn-tabs__nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:.4rem;padding-bottom:1rem;margin-bottom:1.5rem;scrollbar-width:none;-ms-overflow-style:none} .rn-tabs__nav::-webkit-scrollbar{display:none} .rn-tabs__btn{font-size:.82rem;padding:.45rem .9rem} .rn-feature__cap{padding:1.1rem} .rn-opinion{padding:1.25rem 1.1rem 1.1rem} .rn-opinion__quote{font-size:2.6rem} .rn-player__rows{margin-top:1.25rem;gap:.6rem} .rn-player__row{font-size:.85rem} .rn-stat{padding-inline-start:.75rem} .rn-livebar__title{max-width:8rem} } @media (max-width: 575.98px){ .rn-headline h2{font-size:1.2rem} .rn-feature-img{aspect-ratio:16/10} .rn-feature{aspect-ratio:16/10} .rn-adslot{min-height:64px} .rn-adslot--hero{min-height:72px} .rn-stat__label{font-size:.75rem} .rn-inspiring__list a{font-size:.9rem} /* Live mini-player: keep it inside the viewport on small screens */ .rn-livebar{inset-inline:.75rem;bottom:.75rem;max-width:none;justify-content:flex-start} .rn-livebar__title{max-width:100%} } /* ---- Article "suggested news" sidebar ------------------------------------- Rendered by articles/index.blade.php from Pages::getRelatedPages() (bounded, index-backed). Deliberately NOT partials/_left_side — that partial's getHomePages() fallback is unbounded and killed article pages on the live host. Stacks beneath the article on phones (col-12 at