/* =========================================================== ConvoSuite — AI Training section (Arabic / RTL) Prefix: tr- Builds on bootcamp.css: this file assumes so it inherits the --bc-* design tokens, Tajawal font and the heading-colour override. Only additions live here. =========================================================== */ /* --------------------------------------------------------- HEADER / NAV The main site uses the NioLand mega-menu, which is LTR and light-themed. The training section needs a dark RTL nav, so it gets its own — deliberately not a fork of the site nav. --------------------------------------------------------- */ .tr-header { position: sticky; top: 0; z-index: 60; background: rgba(7, 7, 13, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bc-line); } .tr-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; } .tr-nav__logo img { height: 32px; width: auto; display: block; } .tr-nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .tr-nav__link { display: block; padding: .55rem .9rem; border-radius: 999px; font-size: .97rem; font-weight: 700; color: var(--bc-muted); text-decoration: none; transition: color .18s, background .18s; } .tr-nav__link:hover { color: var(--bc-text); background: rgba(255,255,255,.06); } .tr-nav__link.is-active { color: var(--bc-brand-lt); background: rgba(51,184,159,.12); } .tr-nav__cta { display: flex; align-items: center; gap: .6rem; } /* Language pill — training pages are hardcoded Arabic, so this is a real navigation link to the -en twin, not a JS text swap. No English flash. */ .tr-lang { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .8rem; border: 1px solid var(--bc-line-str); border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--bc-muted); text-decoration: none; white-space: nowrap; } .tr-lang:hover { color: var(--bc-text); border-color: var(--bc-brand); } /* ---------- hamburger ---------- */ .tr-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 1px solid var(--bc-line-str); border-radius: 12px; cursor: pointer; } .tr-burger span { display: block; height: 2px; width: 100%; background: var(--bc-text); border-radius: 2px; transition: transform .22s, opacity .18s; } .tr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 991px) { .tr-burger { display: flex; } .tr-nav__menu { position: fixed; inset: 68px 0 auto 0; background: var(--bc-bg-2); border-bottom: 1px solid var(--bc-line); padding: 1rem 20px 1.6rem; display: none; max-height: calc(100vh - 68px); overflow-y: auto; } .tr-nav__menu.is-open { display: block; } .tr-nav__list { flex-direction: column; align-items: stretch; gap: .15rem; } .tr-nav__link { padding: .85rem 1rem; font-size: 1.05rem; } .tr-nav__cta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bc-line); justify-content: space-between; } } @media (min-width: 992px) { /* menu is always visible on desktop regardless of the toggle state */ .tr-nav__menu { display: flex !important; align-items: center; gap: 1.2rem; } } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .tr-hero { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); background: radial-gradient(900px 460px at 78% -8%, rgba(51,184,159,.16), transparent 62%), radial-gradient(700px 420px at 8% 8%, rgba(255,176,32,.09), transparent 60%); } .tr-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (max-width: 900px) { .tr-hero__grid { grid-template-columns: 1fr; } } .tr-hero__media { border-radius: var(--bc-radius); overflow: hidden; border: 1px solid var(--bc-line-str); background: var(--bc-surface); box-shadow: 0 30px 70px rgba(0,0,0,.5); } .tr-hero__media img, .tr-hero__media video { display: block; width: 100%; height: auto; } /* --------------------------------------------------------- CARDS (course grid, audience grid, value grid) --------------------------------------------------------- */ .tr-grid { display: grid; gap: 1.4rem; } .tr-grid--3 { grid-template-columns: repeat(3, 1fr); } .tr-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .tr-grid--3 { grid-template-columns: 1fr; } } @media (max-width: 760px) { .tr-grid--2 { grid-template-columns: 1fr; } } .tr-card { position: relative; display: flex; flex-direction: column; background: var(--bc-surface); border: 1px solid var(--bc-line); border-radius: var(--bc-radius); padding: 1.7rem 1.5rem; transition: transform .2s, border-color .2s, box-shadow .2s; } .tr-card:hover { transform: translateY(-4px); border-color: var(--bc-brand); box-shadow: 0 18px 44px rgba(0,0,0,.42); } .tr-card--hot { border-color: rgba(255,176,32,.45); } .tr-card__tag { position: absolute; top: -11px; inset-inline-start: 1.4rem; background: var(--bc-hot); color: #1a1200; font-size: .76rem; font-weight: 900; padding: .28rem .8rem; border-radius: 999px; } .tr-card__ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.4rem; border-radius: 13px; background: rgba(51,184,159,.13); border: 1px solid rgba(51,184,159,.3); margin-bottom: 1rem; } .tr-card__t { font-size: 1.2rem; font-weight: 800; margin: 0 0 .5rem; } .tr-card__d { color: var(--bc-muted); line-height: 1.8; margin: 0 0 1.1rem; font-size: .98rem; } .tr-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; } .tr-card__meta span { font-size: .8rem; font-weight: 700; color: var(--bc-brand-lt); background: rgba(51,184,159,.1); border: 1px solid rgba(51,184,159,.24); padding: .3rem .7rem; border-radius: 999px; } .tr-card__foot { margin-top: auto; } /* --------------------------------------------------------- STEPS (how the training runs) --------------------------------------------------------- */ .tr-steps { counter-reset: step; display: grid; gap: 1.1rem; } .tr-step { display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem; align-items: start; background: var(--bc-surface); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-sm); padding: 1.3rem 1.4rem; } .tr-step__n { counter-increment: step; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; font-size: 1.3rem; font-weight: 900; color: var(--bc-bg); background: linear-gradient(140deg, var(--bc-brand-lt), var(--bc-brand)); } .tr-step__n::before { content: counter(step); } .tr-step__t { font-size: 1.06rem; font-weight: 800; margin: .3rem 0 .35rem; } .tr-step__d { color: var(--bc-muted); line-height: 1.8; margin: 0; font-size: .96rem; } /* --------------------------------------------------------- TESTIMONIALS — structure only, intentionally empty. Fill from real graduates after the first cohort. Do NOT populate with borrowed or invented quotes. --------------------------------------------------------- */ .tr-quote { background: var(--bc-surface); border: 1px solid var(--bc-line); border-radius: var(--bc-radius); padding: 1.6rem; } .tr-quote__b { font-size: 1.02rem; line-height: 1.85; margin: 0 0 1.1rem; } .tr-quote__who { display: flex; align-items: center; gap: .8rem; } .tr-quote__av { width: 42px; height: 42px; border-radius: 50%; background: var(--bc-surface-2); display: grid; place-items: center; font-weight: 900; color: var(--bc-brand-lt); } .tr-quote__n { font-weight: 800; font-size: .95rem; } .tr-quote__r { color: var(--bc-dim); font-size: .85rem; } /* --------------------------------------------------------- CTA BAND --------------------------------------------------------- */ .tr-band { background: linear-gradient(135deg, rgba(51,184,159,.14), rgba(255,176,32,.09)); border-block: 1px solid var(--bc-line-str); text-align: center; } /* --------------------------------------------------------- FOOTER --------------------------------------------------------- */ .tr-footer { background: var(--bc-bg-2); border-top: 1px solid var(--bc-line); padding: 3.4rem 0 1.8rem; } .tr-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; margin-bottom: 2.4rem; } @media (max-width: 900px) { .tr-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .tr-footer__grid { grid-template-columns: 1fr; } } .tr-footer__logo { height: 32px; width: auto; margin-bottom: 1rem; } .tr-footer__about { color: var(--bc-muted); line-height: 1.85; font-size: .94rem; margin: 0 0 1rem; max-width: 34ch; } .tr-footer__h { font-size: .95rem; font-weight: 800; margin: 0 0 .9rem; color: var(--bc-text); } .tr-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .tr-footer__list a { color: var(--bc-muted); text-decoration: none; font-size: .93rem; transition: color .18s; } .tr-footer__list a:hover { color: var(--bc-brand-lt); } .tr-footer__bottom { border-top: 1px solid var(--bc-line); padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; color: var(--bc-dim); font-size: .85rem; } .tr-footer__legal { margin: 0; line-height: 1.7; max-width: 78ch; } /* Latin brand names inside RTL prose keep their own direction so the bidi algorithm doesn't reorder them mid-sentence. */ .tr-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }