/* ============================================================================= REDESIGN DESIGN SYSTEM — neolt / UPM continuing-education site Clean, bright, WHITE-based UI. Brand accents from the logo. Loaded LAST in site/layouts/master.blade.php so it themes the public site. NOTE on units: base font-size is 66% (≈10.56px = 1rem). Font sizes below are expressed in rem so the accessibility A+/A- controls keep working. Swap the whole palette by editing the tokens in :root only. ============================================================================= */ :root { /* ---- Brand · Primary (deep teal-blue, from logo) --------------------- */ --brand-primary: #045881; /* brand */ --brand-primary-900: #022030; --brand-primary-800: #022f46; --brand-primary-700: #033f5d; /* headings / links on white (AA) */ --brand-primary-600: #045881; /* solid buttons */ --brand-primary-500: #0a6c9c; --brand-primary-400: #3e8fb4; --brand-primary-300: #7db8d3; --brand-primary-200: #b3d6e8; --brand-primary-100: #d9ecf5; --brand-primary-50: #eaf4f9; /* ---- Brand · Secondary (turquoise) ---------------------------------- */ --brand-secondary: #19bbb7; /* brand · fills / icons / large text */ --brand-secondary-700:#0e7a78; /* turquoise text on white (AA) */ --brand-secondary-600:#129b98; --brand-secondary-500:#19bbb7; --brand-secondary-300:#6fd8d3; --brand-secondary-100:#c2efec; --brand-secondary-50: #e6f8f7; /* ---- Brand · Accent (gold) ------------------------------------------ */ --brand-accent: #eaba6a; /* brand · background + dark ink */ --brand-accent-700: #8a6118; /* dark gold — gold text on white (AA 5.5:1) */ --brand-accent-600: #d39f47; --brand-accent-500: #eaba6a; --brand-accent-300: #f1ce8e; --brand-accent-100: #fae9c9; --brand-accent-50: #fdf5e7; --on-accent: #3a2b08; /* ink for text on gold */ /* ---- Surfaces -------------------------------------------------------- */ --bg: #ffffff; --surface-1: #f9fafb; --surface-2: #f2f4f7; --surface-3: #eaeef3; /* ---- Text ------------------------------------------------------------ */ --text: #101828; --text-body: #344054; --text-muted: #667085; --text-faint: #98a2b3; --text-onbrand:#ffffff; /* ---- Lines & status -------------------------------------------------- */ --border: #e4e7ec; --border-strong: #d0d5dd; --success: #15803d; --danger: #c93b3b; --warning: #d39f47; --info: #045881; /* ---- Radius (kept current scale; added 2xl) ------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ---- Shadows --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(16,24,40,.06); --shadow-sm: 0 2px 8px rgba(16,24,40,.06); --shadow-md: 0 8px 24px rgba(16,24,40,.08); --shadow-lg: 0 18px 48px rgba(16,24,40,.12); --shadow-xl: 0 28px 64px rgba(16,24,40,.14); --shadow-brand: 0 12px 28px rgba(4,88,129,.22); /* ---- Spacing scale --------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-12: 96px; /* ---- Type scale (rem against 66% root — kept per approval) ----------- */ --fs-xs: 1.2rem; --fs-sm: 1.35rem; --fs-base: 1.55rem; --fs-md: 1.75rem; --fs-lg: 2rem; --fs-xl: 2.5rem; --fs-2xl: 3.2rem; --fs-3xl: 4rem; --fs-4xl: 5rem; --fs-5xl: 6rem; /* ---- Layout ---------------------------------------------------------- */ --container: 1200px; --container-narrow: 880px; --header-h: 76px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* premium ease-out for reveals + CTAs */ --t-fast: .15s var(--ease); --t: .25s var(--ease); --dur-1: .2s; --dur-2: .35s; --dur-3: .6s; /* motion duration scale */ } /* ============================================================================= BASE (scoped softly so non-redesigned pages aren't harmed) ============================================================================= */ body { background: var(--bg); color: var(--text-body); font-family: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rd-scope { color: var(--text-body); font-size: var(--fs-base); line-height: 1.7; } .rd-scope h1, .rd-scope h2, .rd-scope h3, .rd-scope h4, .rd-scope h5 { color: var(--text); line-height: 1.25; margin: 0 0 var(--s-4); font-weight: 700; } .rd-scope p { margin: 0 0 var(--s-4); } .rd-scope a:not(.rd-btn) { color: var(--brand-primary-600); text-decoration: none; transition: color var(--t-fast); } .rd-scope a:not(.rd-btn):hover { color: var(--brand-secondary-600); } .rd-scope img { max-width: 100%; height: auto; } .rd-scope ul, .rd-scope ol { margin: 0 0 var(--s-4); padding-inline-start: 1.4em; } *:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; border-radius: var(--r-xs); } /* ============================================================================= LAYOUT PRIMITIVES ============================================================================= */ .rd-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); } .rd-container--narrow { max-width: var(--container-narrow); } .rd-section { padding-block: var(--s-12); } .rd-section--sm { padding-block: var(--s-9); } .rd-section--alt { background: var(--surface-1); } .rd-section--alt2 { background: var(--surface-2); } .rd-section--brand { background: var(--brand-primary-700); color: #dbeaf2; } .rd-section--brand h1,.rd-section--brand h2,.rd-section--brand h3 { color:#fff; } .rd-grid { display: grid; gap: var(--s-6); } .rd-grid--2 { grid-template-columns: repeat(2, 1fr); } .rd-grid--3 { grid-template-columns: repeat(3, 1fr); } .rd-grid--4 { grid-template-columns: repeat(4, 1fr); } .rd-grid--sidebar { grid-template-columns: 280px 1fr; align-items: start; } /* Section heading block */ .rd-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--s-8); } .rd-head--start { text-align: start; margin-inline: 0; } .rd-eyebrow { display: inline-block; font-weight: 700; font-size: var(--fs-sm); color: var(--brand-secondary-600); letter-spacing: .04em; background: var(--brand-secondary-50); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-4); } .rd-title { font-size: var(--fs-2xl); font-weight: 800; color: var(--text); margin: 0 0 var(--s-3); line-height: 1.2; } .rd-title--lg { font-size: var(--fs-3xl); } .rd-sub { font-size: var(--fs-md); color: var(--text-muted); margin: 0; } /* ============================================================================= BUTTONS ============================================================================= */ .rd-btn { --_bg: var(--brand-primary-600); --_fg: #fff; --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: inherit; font-weight: 700; font-size: var(--fs-base); line-height: 1; padding: 13px 24px; border-radius: var(--r-pill); border: 1.5px solid var(--_bd); background: var(--_bg); color: var(--_fg); cursor: pointer; text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t); white-space: nowrap; } .rd-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); color: var(--_fg); } .rd-btn:active { transform: translateY(0); } .rd-btn--primary { --_bg: var(--brand-primary-600); --_fg:#fff; } .rd-btn--primary:hover { --_bg: var(--brand-primary-700); } .rd-btn--secondary { --_bg: var(--brand-secondary); --_fg:#fff; } .rd-btn--secondary:hover { --_bg: var(--brand-secondary-600); } .rd-btn--gold { --_bg: var(--brand-accent); --_fg:#3a2b08; } .rd-btn--gold:hover { --_bg: var(--brand-accent-600); } .rd-btn--ghost { --_bg: transparent; --_fg: var(--brand-primary-600); --_bd: var(--border-strong); } .rd-btn--ghost:hover { --_bg: var(--brand-primary-50); --_fg: var(--brand-primary-700); box-shadow: var(--shadow-sm); } .rd-btn--white { --_bg:#fff; --_fg: var(--brand-primary-700); } .rd-btn--outline-white { --_bg: transparent; --_fg:#fff; --_bd: rgba(255,255,255,.6); } .rd-btn--outline-white:hover { --_bg: rgba(255,255,255,.12); box-shadow:none; } .rd-btn--link { --_bg: transparent; --_fg: var(--brand-primary-600); --_bd: transparent; padding-inline: var(--s-2); } .rd-btn--link:hover { --_fg: var(--brand-primary-700); transform: none; box-shadow: none; text-decoration: underline; } .rd-btn--lg { font-size: var(--fs-md); padding: 16px 32px; } .rd-btn--sm { font-size: var(--fs-sm); padding: 9px 16px; } .rd-btn--block { display: flex; width: 100%; } /* ============================================================================= FORM CONTROLS (Input component) ============================================================================= */ .rd-field { display: block; margin-bottom: var(--s-5); } .rd-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--s-2); } .rd-label .req { color: var(--danger); margin-inline-start: 2px; } .rd-input, .rd-select, .rd-textarea { display: block; width: 100%; min-height: 44px; font-family: inherit; font-size: var(--fs-base); color: var(--text); line-height: 1.4; background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast); -webkit-appearance: none; appearance: none; } .rd-textarea { min-height: 120px; resize: vertical; } .rd-input::placeholder, .rd-textarea::placeholder { color: var(--text-faint); } .rd-input:hover, .rd-select:hover, .rd-textarea:hover { border-color: var(--brand-primary-300); } .rd-input:focus, .rd-select:focus, .rd-textarea:focus { outline: none; border-color: var(--brand-primary-500); box-shadow: 0 0 0 3px var(--brand-primary-100); } .rd-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667085'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; background-size: 18px; padding-inline-end: 42px; } .rd-field--error .rd-input, .rd-field--error .rd-select, .rd-field--error .rd-textarea { border-color: var(--danger); } .rd-field--error .rd-input:focus, .rd-field--error .rd-select:focus, .rd-field--error .rd-textarea:focus { box-shadow: 0 0 0 3px rgba(201,59,59,.18); } .rd-input:disabled, .rd-select:disabled, .rd-textarea:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; } .rd-help { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s-2); } .rd-help--error { color: var(--danger); } /* checkbox / radio */ .rd-check { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--fs-base); color: var(--text-body); } .rd-check input { width: 20px; height: 20px; accent-color: var(--brand-primary-600); cursor: pointer; flex: 0 0 auto; } /* segmented radio (full-width, equal options — e.g. gender) */ .rd-segment { display: flex; gap: var(--s-3); } .rd-segment__opt { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--text-body); font-size: var(--fs-base); font-weight: 600; cursor: pointer; user-select: none; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .rd-segment__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .rd-segment__opt:hover { border-color: var(--brand-primary-300); } .rd-segment__opt:has(input:checked) { border-color: var(--brand-primary-600); background: var(--brand-primary-50); color: var(--brand-primary-700); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand-primary-600); } .rd-segment__opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-primary-100); } /* ============================================================================= BADGES / CHIPS / PILLS ============================================================================= */ .rd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); background: var(--brand-primary-50); color: var(--brand-primary-700); line-height: 1; } .rd-badge--gold { background: var(--brand-accent-50); color: var(--brand-accent-600); } .rd-badge--teal { background: var(--brand-secondary-50); color: var(--brand-secondary-600); } .rd-badge--danger { background: #fdecec; color: var(--danger); } .rd-badge--success { background: #e6f6ee; color: var(--success); } .rd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); color: var(--text-body); background: #fff; cursor: pointer; transition: all var(--t-fast); } .rd-chip:hover { border-color: var(--brand-primary-300); color: var(--brand-primary-700); } .rd-chip.is-active { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: #fff; } /* ============================================================================= CARDS ============================================================================= */ .rd-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t), border-color var(--t); overflow: hidden; } .rd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--brand-primary-100); } .rd-card__pad { padding: var(--s-6); } /* Course card */ .rd-course { display: flex; flex-direction: column; height: 100%; } .rd-course__media { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; } .rd-course__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .rd-course:hover .rd-course__media img { transform: scale(1.06); } .rd-course__tags { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .rd-course__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); } .rd-course__cat { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-secondary-600); margin-bottom: var(--s-2); } .rd-course__title { font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.35; margin: 0 0 var(--s-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rd-course__title a { color: inherit; } .rd-course__title a:hover { color: var(--brand-primary-600); } .rd-course__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); } .rd-course__meta span { display: inline-flex; align-items: center; gap: 6px; } .rd-course__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); } .rd-price { display: flex; align-items: baseline; gap: 8px; } .rd-price__now { font-size: var(--fs-lg); font-weight: 800; color: var(--brand-primary-700); } .rd-price__old { font-size: var(--fs-sm); color: var(--text-faint); text-decoration: line-through; } .rd-price__free { font-size: var(--fs-lg); font-weight: 800; color: var(--success); } .rd-rating { color: var(--brand-accent-600); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; } /* ============================================================================= PROMO / ANNOUNCEMENT BAR ============================================================================= */ .rd-promo { background: linear-gradient(90deg, var(--brand-primary-700), var(--brand-primary-500)); color: #eaf4f9; font-size: var(--fs-sm); position: relative; } .rd-promo__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); padding: 9px var(--s-6); flex-wrap: wrap; text-align: center; } .rd-promo strong { color: #fff; } .rd-promo .rd-btn { padding: 6px 16px; font-size: var(--fs-xs); } .rd-promo__close { position: absolute; inset-block-start: 50%; inset-inline-end: 14px; transform: translateY(-50%); background: transparent; border: none; color: #cfe6f1; font-size: 1.8rem; line-height: 1; cursor: pointer; } .rd-promo__close:hover { color: #fff; } .rd-promo.is-hidden { display: none; } /* ============================================================================= HEADER (sticky) ============================================================================= */ .rd-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: var(--shadow-xs); border-bottom: 1px solid var(--border); } .rd-bar { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); } .rd-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .rd-logo img { height: 46px; width: auto; } .rd-nav { display: flex; align-items: center; gap: var(--s-2); margin-inline-end: auto; } .rd-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-base); color: var(--text-body); padding: 10px 14px; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); cursor: pointer; } .rd-nav__link:hover { color: var(--brand-primary-700); background: var(--brand-primary-50); } .rd-nav__link.active { color: var(--brand-primary-700); } .rd-nav__link.active::after { content: ""; position: absolute; inset-block-end: 2px; inset-inline: 14px; height: 3px; border-radius: 3px; background: var(--brand-accent); } .rd-nav__caret { font-size: 1.1rem; transition: transform var(--t-fast); } .rd-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; } .rd-lang { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--text-body); border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); padding: 8px 14px; transition: all var(--t-fast); } .rd-lang:hover { border-color: var(--brand-primary-300); color: var(--brand-primary-700); } .rd-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--text-body); transition: all var(--t-fast); } .rd-cart:hover { background: var(--brand-primary-50); color: var(--brand-primary-700); } .rd-cart__count { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--brand-accent); color: #3a2b08; font-size: 1.05rem; font-weight: 800; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; line-height: 1; } .rd-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-primary-50); color: var(--brand-primary-700); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-primary-100); cursor: pointer; transition: background var(--t), border-color var(--t); } .rd-avatar:hover { background: var(--brand-primary-100); border-color: var(--brand-primary-100); } .rd-avatar.dropdown-toggle::after { display: none; } /* ===== Account dropdown ===== */ .rd-usermenu { min-width: 264px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 12px; } .rd-usermenu__head { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(135deg, var(--brand-primary-700), var(--brand-primary-500)); color: #fff; } .rd-usermenu__avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-lg); } .rd-usermenu__id { min-width: 0; } .rd-usermenu__id strong { display: block; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd-usermenu__id span { display: block; font-size: var(--fs-xs); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd-usermenu__sep { height: 1px; background: var(--border); margin: 6px 0; } .rd-usermenu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0; color: var(--text); font-size: var(--fs-base); font-weight: 600; text-decoration: none; cursor: pointer; text-align: start; transition: background var(--t), color var(--t); } .rd-usermenu__item svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; color: var(--text-muted); transition: color var(--t); } .rd-usermenu__item:hover { background: var(--brand-primary-50); color: var(--brand-primary-700); } .rd-usermenu__item:hover svg { color: var(--brand-primary-600); } .rd-usermenu__item--danger, .rd-usermenu__item--danger svg { color: var(--danger); } .rd-usermenu__item--danger:hover { background: rgba(220,38,38,.08); color: var(--danger); } .rd-usermenu__foot { padding: 6px; } /* Mega menu */ .rd-has-mega { position: static; } .rd-mega { position: absolute; inset-inline: 0; inset-block-start: 100%; background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--t); z-index: 1001; } .rd-has-mega:hover > .rd-mega, .rd-has-mega:focus-within > .rd-mega, .rd-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .rd-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding: var(--s-8) 0; } .rd-mega__col h4 { font-size: var(--fs-base); font-weight: 800; color: var(--brand-primary-700); margin: 0 0 var(--s-2); display: flex; align-items: center; gap: 8px; } .rd-mega__lvl { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin: var(--s-3) 0 var(--s-1); } .rd-mega__col a.rd-mega__link { display: block; padding: 5px 0; color: var(--text-body); font-size: var(--fs-sm); } .rd-mega__col a.rd-mega__link:hover { color: var(--brand-primary-600); padding-inline-start: 4px; } .rd-mega__promo { background: linear-gradient(160deg, var(--brand-primary-700), var(--brand-primary-500)); color: #fff; border-radius: var(--r-md); padding: var(--s-6); } .rd-mega__promo h4 { color:#fff; } /* ============================================================================= MOBILE DRAWER ============================================================================= */ .rd-burger { display: none; width: 44px; height: 44px; border: none; background: transparent; color: var(--text); font-size: 2.4rem; align-items: center; justify-content: center; cursor: pointer; } .rd-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; } .rd-drawer.is-open { visibility: visible; } .rd-drawer__scrim { position: absolute; inset: 0; background: rgba(16,24,40,.5); opacity: 0; transition: opacity var(--t); } .rd-drawer.is-open .rd-drawer__scrim { opacity: 1; } .rd-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 360px); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--t); overflow-y: auto; } [dir="rtl"] .rd-drawer__panel { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); } .rd-drawer.is-open .rd-drawer__panel { transform: translateX(0); } .rd-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); border-bottom: 1px solid var(--border); } .rd-drawer__close { width: 40px; height: 40px; border: none; background: var(--surface-1); border-radius: var(--r-sm); font-size: 2rem; cursor: pointer; } .rd-drawer__nav { padding: var(--s-4); } .rd-acc-m { border-bottom: 1px solid var(--border); } .rd-acc-m__head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 14px 6px; font-size: var(--fs-base); font-weight: 600; color: var(--text); cursor: pointer; } .rd-acc-m__body { display: none; padding: 0 6px var(--s-4); } .rd-acc-m.is-open .rd-acc-m__body { display: block; } .rd-acc-m__body a { display: block; padding: 8px 12px; color: var(--text-muted); border-radius: var(--r-sm); } .rd-acc-m__body a:hover { background: var(--surface-1); color: var(--brand-primary-700); } .rd-drawer__foot { margin-top: auto; padding: var(--s-5); display: grid; gap: var(--s-3); border-top: 1px solid var(--border); } /* ============================================================================= HERO SLIDER (Swiper) — full-width rotating hero ============================================================================= */ .rd-slider { position: relative; overflow: hidden; } .rd-slider .swiper { width: 100%; } .rd-slide { position: relative; min-height: 580px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--brand-primary-700); } .rd-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,30,45,.86) 0%, rgba(4,30,45,.62) 45%, rgba(4,30,45,.28) 100%); } [dir="rtl"] .rd-slide::before { background: linear-gradient(270deg, rgba(4,30,45,.86) 0%, rgba(4,30,45,.62) 45%, rgba(4,30,45,.28) 100%); } .rd-slide__inner { position: relative; z-index: 2; max-width: 640px; color: #fff; padding-block: var(--s-10); } .rd-slide__eyebrow { display: inline-block; font-weight: 700; font-size: var(--fs-sm); color: #fff; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-4); } .rd-slide h1, .rd-slide h2 { color: #fff; font-size: var(--fs-3xl); font-weight: 800; line-height: 1.18; margin: 0 0 var(--s-4); text-shadow: 0 2px 12px rgba(0,0,0,.25); } .rd-slide h1 .hl, .rd-slide h2 .hl { color: var(--brand-accent); } .rd-slide p { color: #e6eef3; font-size: var(--fs-md); margin: 0 0 var(--s-7); max-width: 560px; text-shadow: 0 1px 8px rgba(0,0,0,.25); } .rd-slide__cta { display: flex; gap: var(--s-4); flex-wrap: wrap; } /* Full-image banner slide — image fills the whole slide edge-to-edge */ .rd-slide--img { background: #0c2b3a; padding: 0; display: block; position: relative; overflow: hidden; } .rd-slide--img::before { display: none; } .rd-slide--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; box-shadow: none; } .rd-slide--img .rd-slide__caption { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: left; padding-block: var(--s-8); background: linear-gradient(to left, transparent 0%, rgba(4,30,45,.4) 45%, rgba(4,30,45,.78) 100%); } .rd-slide--img .rd-slide__caption h2 { color: #fff; font-size: var(--fs-2xl); font-weight: 800; line-height: 1.35; margin: 0; max-width: 620px; text-shadow: 0 2px 14px rgba(0,0,0,.55); } @media (max-width: 860px) { .rd-slide--img .rd-slide__caption { padding-block: var(--s-6); } .rd-slide--img .rd-slide__caption h2 { font-size: var(--fs-lg); } } /* Swiper controls themed */ .rd-slider .swiper-pagination-bullet { width: 11px; height: 11px; background: #fff; opacity: .5; transition: all var(--t); } .rd-slider .swiper-pagination-bullet-active { opacity: 1; width: 28px; border-radius: 6px; background: var(--brand-accent); } .rd-slider .swiper-button-next, .rd-slider .swiper-button-prev { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); color: #fff; transition: background var(--t); } .rd-slider .swiper-button-next:hover, .rd-slider .swiper-button-prev:hover { background: var(--brand-primary-600); } .rd-slider .swiper-button-next::after, .rd-slider .swiper-button-prev::after { font-size: 1.6rem; font-weight: 700; } @media (max-width: 860px) { .rd-slide { min-height: 460px; } .rd-slide h2 { font-size: var(--fs-2xl); } .rd-slider .swiper-button-next, .rd-slider .swiper-button-prev { display: none; } } /* ============================================================================= HERO — full-width image slider with per-slide messaging ============================================================================= */ .rd-hero { position: relative; width: 100%; max-width: 100%; background: var(--brand-primary-700); overflow: hidden; } .rd-hero-swiper { width: 100%; max-width: 100%; overflow: hidden; } .rd-hero__slide { position: relative; width: 100%; max-width: 100%; height: clamp(480px, 72vh, 700px); overflow: hidden; } .rd-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .rd-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(3,30,45,.86) 0%, rgba(3,30,45,.6) 38%, rgba(3,30,45,.2) 70%, transparent 100%); } [dir="rtl"] .rd-hero__overlay { background: linear-gradient(270deg, rgba(3,30,45,.86) 0%, rgba(3,30,45,.6) 38%, rgba(3,30,45,.2) 70%, transparent 100%); } .rd-hero__inner { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; gap: 0; padding-block: 0; } .rd-hero__content { max-width: 640px; min-width: 0; color: #fff; } .rd-hero__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-accent); background: rgba(234,186,106,.14); border: 1px solid rgba(234,186,106,.4); padding: 6px 16px; border-radius: var(--r-pill); margin-bottom: var(--s-4); } .rd-hero .rd-hero__title { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.22; margin: 0 0 var(--s-4); color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.35); } .rd-hero__sub { font-size: var(--fs-md); line-height: 1.7; color: #e6eef3; margin: 0 0 var(--s-7); max-width: 560px; } .rd-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); } /* per-slide staggered text reveal (gated by .js-anim so no-JS still shows text) */ .js-anim .rd-hero__content > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js-anim .swiper-slide-active .rd-hero__content > * { opacity: 1; transform: none; } .js-anim .swiper-slide-active .rd-hero__content > *:nth-child(1) { transition-delay: .15s; } .js-anim .swiper-slide-active .rd-hero__content > *:nth-child(2) { transition-delay: .28s; } .js-anim .swiper-slide-active .rd-hero__content > *:nth-child(3) { transition-delay: .40s; } .js-anim .swiper-slide-active .rd-hero__content > *:nth-child(4) { transition-delay: .52s; } /* pagination dots */ .rd-hero__dots { position: absolute; z-index: 5; inset-block-end: var(--s-6); inset-inline: 0; display: flex; gap: 8px; justify-content: center; } .rd-hero__dots .swiper-pagination-bullet { width: 11px; height: 11px; margin: 0; background: #fff; opacity: .5; border-radius: 6px; transition: all var(--t); } .rd-hero__dots .swiper-pagination-bullet-active { opacity: 1; width: 30px; background: var(--brand-accent); } /* arrows */ .rd-hero__nav { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t); } .rd-hero__nav:hover { background: var(--brand-primary-600); } .rd-hero__nav svg { width: 26px; height: 26px; fill: currentColor; } .rd-hero__nav--prev { inset-inline-start: var(--s-5); } .rd-hero__nav--next { inset-inline-end: var(--s-5); } @media (max-width: 1024px) { .rd-hero__slide { height: clamp(440px, 64vh, 560px); } .rd-hero .rd-hero__title { font-size: var(--fs-2xl); } .rd-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .rd-hero__slide { height: clamp(460px, 80vh, 580px); } .rd-hero .rd-hero__title { font-size: var(--fs-xl); line-height: 1.3; } .rd-hero__sub { font-size: var(--fs-base); } .rd-hero__eyebrow { margin-bottom: var(--s-3); } .rd-hero__overlay, [dir="rtl"] .rd-hero__overlay { background: linear-gradient(to top, rgba(3,30,45,.92) 0%, rgba(3,30,45,.6) 52%, rgba(3,30,45,.4) 100%); } .rd-hero__content { max-width: 100%; text-align: center; margin-inline: auto; } .rd-hero__sub { margin-inline: auto; } .rd-hero__cta { flex-direction: column; align-items: stretch; gap: var(--s-3); } .rd-hero__cta .rd-btn { width: 100%; justify-content: center; } .rd-hero__nav { display: none; } } @media (max-width: 420px) { .rd-hero__slide { height: clamp(440px, 86vh, 560px); } .rd-hero .rd-hero__title { font-size: var(--fs-lg); } .rd-hero__sub { font-size: var(--fs-sm); } } @media (prefers-reduced-motion: reduce) { .js-anim .rd-hero__content > * { opacity: 1; transform: none; transition: none; } } /* Page header band (interior pages) */ .rd-pagehead { background: linear-gradient(135deg, var(--brand-primary-700), var(--brand-primary-500)); color: #fff; padding-block: var(--s-10); position: relative; overflow: hidden; } .rd-pagehead h1 { color: #fff; font-size: var(--fs-2xl); margin: 0 0 var(--s-2); } .rd-pagehead p { color: #cfe6f1; margin: 0; font-size: var(--fs-md); } /* Photo background variant — image + brand-tinted overlay keeps white text legible */ .rd-pagehead--bg { background-color: var(--brand-primary-700); background-image: var(--ph-bg); background-position: var(--ph-pos, center 15%); background-size: cover; background-repeat: no-repeat; } .rd-pagehead--bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(4,30,45,.9) 0%, rgba(4,30,45,.66) 55%, rgba(4,30,45,.5) 100%); } .rd-pagehead--bg > * { position: relative; z-index: 1; } /* ============================================================================= STATS COUNTERS ============================================================================= */ .rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } .rd-stat { text-align: center; padding: var(--s-6); background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } .rd-stat__num { font-size: var(--fs-3xl); font-weight: 800; color: var(--brand-primary-600); line-height: 1; } .rd-stat__num .suffix { color: var(--brand-accent-600); } .rd-stat__label { font-size: var(--fs-base); color: var(--text-muted); margin-top: var(--s-2); } /* ============================================================================= PARTNER / CLIENT LOGO STRIP ============================================================================= */ .rd-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-8); } .rd-logos .rd-logo { display: inline-flex; align-items: center; justify-content: center; height: 64px; filter: grayscale(1); opacity: .65; transition: all var(--t); } .rd-logos .rd-logo:hover { filter: grayscale(0); opacity: 1; } .rd-logos .rd-logo img { max-height: 56px; width: auto; } .rd-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); } .rd-logo-card { display: flex; align-items: center; justify-content: center; height: 120px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); transition: all var(--t); } .rd-logo-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-primary-100); } .rd-logo-card img { max-height: 70px; max-width: 100%; } /* ============================================================================= FEATURES (why choose us) ============================================================================= */ .rd-feature { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8) var(--s-6) var(--s-7); text-align: center; height: 100%; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .rd-feature::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--brand-primary-600), var(--brand-secondary)); transform: scaleX(0); transition: transform var(--t); } .rd-feature:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--brand-primary-100); } .rd-feature:hover::before { transform: scaleX(1); } .rd-feature__icon { width: 78px; height: 78px; border-radius: 22px; margin: 0 auto var(--s-5); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary-600), var(--brand-secondary)); color: #fff; box-shadow: 0 12px 24px rgba(4, 88, 129, .28); transition: transform var(--t); } .rd-feature:hover .rd-feature__icon { transform: translateY(-2px) scale(1.06) rotate(-5deg); } .rd-feature__icon svg.rd-ic { width: 38px; height: 38px; } .rd-feature h3 { font-size: var(--fs-lg); margin: 0 0 var(--s-3); color: var(--text); } .rd-feature p { color: var(--text-muted); margin: 0; font-size: var(--fs-base); line-height: 1.75; } /* ============================================================================= B2B / CTA BANNER ============================================================================= */ .rd-cta { background: linear-gradient(135deg, var(--brand-primary-700), var(--brand-primary-500)); border-radius: var(--r-xl); padding: var(--s-10); color: #fff; position: relative; overflow: hidden; } .rd-cta__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--s-8); align-items: center; position: relative; z-index: 1; } .rd-cta h2 { color: #fff; font-size: var(--fs-2xl); margin: 0 0 var(--s-4); } .rd-cta p { color: #cfe6f1; font-size: var(--fs-md); margin: 0; } .rd-cta__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: flex-end; } .rd-cta::after { content: ""; position: absolute; inset-block-start: -80px; inset-inline-end: -80px; width: 320px; height: 320px; background: rgba(255,255,255,.06); border-radius: 50%; } /* ============================================================================= TESTIMONIALS (Swiper-friendly) ============================================================================= */ .rd-testi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; } .rd-testi__quote { font-size: var(--fs-md); color: var(--text-body); line-height: 1.8; margin: 0 0 var(--s-5); flex: 1; } .rd-testi__quote::before { content: "“"; color: var(--brand-primary-300); font-size: 4rem; line-height: 0; vertical-align: -1.2rem; margin-inline-end: 4px; } .rd-testi__person { display: flex; align-items: center; gap: var(--s-3); } .rd-testi__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface-2); } .rd-testi__name { font-weight: 700; color: var(--text); } .rd-testi__role { font-size: var(--fs-sm); color: var(--text-muted); } /* ============================================================================= NEWSLETTER ============================================================================= */ .rd-news { background: var(--brand-primary-700); border-radius: var(--r-xl); overflow: hidden; color: #fff; } .rd-news__grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; } .rd-news__art { height: 100%; min-height: 240px; background-size: cover; background-position: center; } .rd-news__body { padding: var(--s-9); } .rd-news h2 { color: #fff; font-size: var(--fs-2xl); margin: 0 0 var(--s-3); } .rd-news p { color: #cfe6f1; margin: 0 0 var(--s-5); } .rd-news__form { display: flex; gap: var(--s-3); flex-wrap: wrap; } .rd-news__form input { flex: 1; min-width: 220px; border: none; border-radius: var(--r-pill); padding: 14px 20px; font-size: var(--fs-base); font-family: inherit; } /* ============================================================================= ACCORDION (curriculum / faq) ============================================================================= */ .rd-acc { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: #fff; } .rd-acc__item + .rd-acc__item { border-top: 1px solid var(--border); } .rd-acc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; background: #fff; border: none; padding: var(--s-5) var(--s-6); font-size: var(--fs-md); font-weight: 700; color: var(--text); cursor: pointer; text-align: start; transition: background var(--t-fast); } .rd-acc__head:hover { background: var(--surface-1); } .rd-acc__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-primary-50); color: var(--brand-primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: transform var(--t); } .rd-acc__item.is-open .rd-acc__icon { transform: rotate(45deg); background: var(--brand-primary-600); color: #fff; } .rd-acc__body { display: none; padding: 0 var(--s-6) var(--s-5); color: var(--text-muted); } .rd-acc__item.is-open .rd-acc__body { display: block; } /* ============================================================================= FORMS ============================================================================= */ .rd-field { margin-bottom: var(--s-5); } .rd-label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--s-2); } .rd-input, .rd-select, .rd-textarea { width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--text); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 12px 16px; transition: border var(--t-fast), box-shadow var(--t-fast); } .rd-input:focus, .rd-select:focus, .rd-textarea:focus { border-color: var(--brand-primary-500); box-shadow: 0 0 0 3px var(--brand-primary-50); outline: none; } .rd-textarea { min-height: 130px; resize: vertical; } .rd-input::placeholder, .rd-textarea::placeholder { color: var(--text-faint); } .rd-check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; } .rd-help { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; } .rd-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 6px; } .rd-divider { display: flex; align-items: center; gap: var(--s-4); color: var(--text-faint); font-size: var(--fs-sm); margin: var(--s-5) 0; } .rd-divider::before, .rd-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; } /* ============================================================================= AUTH CARD ============================================================================= */ .rd-auth { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: var(--s-9) var(--s-5); background: radial-gradient(1200px 400px at 50% -10%, var(--brand-primary-50), transparent), var(--surface-1); } .rd-auth__card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-9); } .rd-auth__logo { text-align: center; margin-bottom: var(--s-6); } .rd-auth__logo img { height: 54px; } .rd-auth h1 { font-size: var(--fs-xl); text-align: center; margin: 0 0 var(--s-2); } .rd-auth__sub { text-align: center; color: var(--text-muted); margin: 0 0 var(--s-7); } .rd-auth__foot { text-align: center; margin-top: var(--s-6); color: var(--text-muted); font-size: var(--fs-sm); } .rd-social { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } /* Split-screen login (form + branding media) */ .rd-login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; } .rd-login-split__form { display: flex; align-items: center; justify-content: center; padding: var(--s-9) var(--s-7); background: #fff; } .rd-login-split__inner { width: 100%; max-width: 430px; } .rd-login-split__inner--wide { max-width: 640px; } .rd-login-split__media--sticky .rd-login-split__media-content { position: sticky; top: var(--header-h); } .rd-login-split__media { position: relative; background-size: cover; background-position: center; background-color: var(--brand-primary-700); } .rd-login-split__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(4,88,129,.9), rgba(4,88,129,.55)); } .rd-login-split__media-content { position: relative; z-index: 1; color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: var(--s-10); } .rd-login-split__media-content h2 { color: #fff; font-size: var(--fs-2xl); margin: 0 0 var(--s-4); } .rd-login-split__media-content p { color: #dbeaf2; font-size: var(--fs-md); margin: 0; } .rd-login-split__points { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-4); } .rd-login-split__points li { display: flex; align-items: center; gap: 12px; color: #eaf4f9; font-size: var(--fs-base); } .rd-login-split__points svg { width: 22px; height: 22px; fill: var(--brand-accent); flex-shrink: 0; } @media (max-width: 860px) { .rd-login-split { grid-template-columns: 1fr; min-height: 0; } .rd-login-split__media { display: none; } } /* ============================================================================= BREADCRUMB ============================================================================= */ .rd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); } .rd-crumbs a { color: inherit; } .rd-crumbs a:hover { color: var(--brand-primary-600); } .rd-crumbs .sep { color: var(--text-faint); } /* ============================================================================= FILTERS SIDEBAR + SORT BAR + PAGINATION ============================================================================= */ .rd-filters { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); position: sticky; top: calc(var(--header-h) + 16px); } .rd-filter + .rd-filter { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--border); } .rd-filter h4 { font-size: var(--fs-base); margin: 0 0 var(--s-3); } .rd-filter label { display: flex; align-items: center; gap: var(--s-2); padding: 5px 0; color: var(--text-body); font-size: var(--fs-sm); cursor: pointer; } .rd-sortbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); } .rd-sortbar__count { color: var(--text-muted); font-size: var(--fs-sm); } /* Pagination — professional, centered under the results */ .rd-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: var(--s-9); } .rd-pagination .rd-page { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; color: var(--text); font-weight: 700; font-size: var(--fs-sm); line-height: 1; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .rd-pagination .rd-page:hover:not(.is-active):not(.is-disabled) { border-color: var(--brand-primary-300); color: var(--brand-primary-700); } .rd-pagination .rd-page.is-active { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: #fff; cursor: default; } .rd-pagination .rd-page.is-disabled { opacity: .4; cursor: default; } .rd-pagination .rd-page--dots { border: none; background: none; min-width: 24px; cursor: default; color: var(--text-muted); } .rd-pagination .rd-page--nav svg { width: 18px; height: 18px; fill: currentColor; } .rd-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s-9); } .rd-pager a, .rd-pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text-body); font-weight: 600; padding: 0 10px; } .rd-pager a:hover { border-color: var(--brand-primary-300); color: var(--brand-primary-700); } .rd-pager .is-active { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: #fff; } /* ============================================================================= STICKY ENROLL PANEL (course detail) ============================================================================= */ .rd-enroll { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: calc(var(--header-h) + 16px); } .rd-enroll__media { aspect-ratio: 16/10; background: var(--surface-2); } .rd-enroll__media img { width: 100%; height: 100%; object-fit: cover; } .rd-enroll__body { padding: var(--s-6); } .rd-enroll__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-5); } .rd-enroll__price .now { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand-primary-700); } .rd-enroll__price .old { font-size: var(--fs-md); color: var(--text-faint); text-decoration: line-through; } .rd-enroll__list { list-style: none; padding: 0; margin: var(--s-5) 0 0; } .rd-enroll__list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border); color: var(--text-body); font-size: var(--fs-sm); } .rd-enroll__list li i, .rd-enroll__list li .rd-ic { color: var(--brand-secondary-600); } /* Schedule / data table */ .rd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; } .rd-table { width: 100%; border-collapse: collapse; min-width: 720px; } .rd-table th { background: var(--surface-1); text-align: start; font-size: var(--fs-sm); font-weight: 700; color: var(--text); padding: 14px 18px; border-bottom: 1px solid var(--border); } .rd-table td { padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-body); } .rd-table tbody tr:hover { background: var(--brand-primary-50); } .rd-table tbody tr:last-child td { border-bottom: none; } /* ============================================================================= LEGAL / TYPOGRAPHIC TEMPLATE ============================================================================= */ .rd-legal { font-size: var(--fs-base); line-height: 1.9; color: var(--text-body); } .rd-legal h2 { font-size: var(--fs-xl); margin: var(--s-8) 0 var(--s-4); color: var(--text); } .rd-legal h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); color: var(--brand-primary-700); } .rd-legal p, .rd-legal li { color: var(--text-body); } .rd-legal ul, .rd-legal ol { padding-inline-start: 1.5em; margin-bottom: var(--s-5); } .rd-legal li { margin-bottom: 8px; } .rd-legal__toc { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); position: sticky; top: calc(var(--header-h) + 16px); } .rd-legal__toc a { display: block; padding: 8px 12px; margin-inline: -12px; color: var(--text-muted); font-size: var(--fs-sm); border-inline-start: 2px solid transparent; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .rd-legal__toc a:hover { color: var(--brand-primary-600); } .rd-legal__toc a.is-active { color: var(--brand-primary-700); font-weight: 700; background: var(--brand-primary-50); border-inline-start-color: var(--brand-accent); } /* ============================================================================= COMBINED POLICIES PAGE (table-of-contents + stacked sections) ============================================================================= */ .rd-policy-toc { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6) var(--s-7); margin-bottom: var(--s-9); } .rd-policy-toc h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-4); display: flex; align-items: center; gap: 10px; } .rd-policy-toc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .rd-policy-toc a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-weight: 600; font-size: var(--fs-sm); transition: all var(--t-fast); } .rd-policy-toc a:hover { border-color: var(--brand-primary-300); color: var(--brand-primary-700); box-shadow: var(--shadow-xs); } .rd-policy-toc a span.num { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--brand-primary-50); color: var(--brand-primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 800; } .rd-policy-section { scroll-margin-top: calc(var(--header-h) + 20px); padding-top: var(--s-8); margin-top: var(--s-8); border-top: 2px solid var(--border); } .rd-policy-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .rd-policy-title { font-size: var(--fs-2xl); color: var(--brand-primary-700); margin: 0 0 var(--s-5); display: flex; align-items: center; gap: 12px; } .rd-policy-title .num { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--brand-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 800; } /* Normalize ALL policy bodies to ONE uniform typographic system (strip the mixed boxy/legacy markup so every policy reads consistently) */ .rd-policy-body { font-size: var(--fs-base); line-height: 1.95; color: var(--text-body); } .rd-policy-body .container { max-width: 100% !important; width: 100% !important; padding-inline: 0 !important; margin-inline: 0 !important; } .rd-policy-body section { padding: 0 !important; margin: 0 !important; background: transparent !important; } .rd-policy-body .privacy-content, .rd-policy-body .header-title, .rd-policy-body .privacy-section { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 var(--s-4) !important; } .rd-policy-body h1, .rd-policy-body h2, .rd-policy-body h3, .rd-policy-body h4, .rd-policy-body h5 { font-size: var(--fs-lg) !important; font-weight: 700 !important; color: var(--brand-primary-700) !important; line-height: 1.55 !important; margin: var(--s-5) 0 var(--s-2) !important; } .rd-policy-body p, .rd-policy-body li, .rd-policy-body td, .rd-policy-body span { font-size: var(--fs-base) !important; line-height: 1.95 !important; font-weight: 400 !important; color: var(--text-body) !important; } .rd-policy-body p { margin: 0 0 var(--s-3) !important; } .rd-policy-body ul, .rd-policy-body ol { padding-inline-start: 1.6em; margin: 0 0 var(--s-4); } .rd-policy-body li { margin-bottom: 8px !important; } .rd-policy-body .header-title p { color: var(--text-muted) !important; } .rd-policy-body a:not(.rd-btn) { color: var(--brand-primary-600) !important; text-decoration: underline; } .rd-policy-body table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .rd-policy-body th { background: var(--brand-primary-700); color: #fff !important; padding: 11px 14px; text-align: start; font-weight: 700 !important; } .rd-policy-body td { padding: 11px 14px; border-top: 1px solid var(--border); } @media (max-width: 640px) { .rd-policy-toc ul { grid-template-columns: 1fr; } } /* ============================================================================= FOOTER ============================================================================= */ .rd-footer { background: #0c2b3a; color: #c4d4dd; font-size: var(--fs-sm); } .rd-footer h5 { color: #fff; font-size: var(--fs-base); margin: 0 0 var(--s-4); font-weight: 700; } .rd-footer a:not(.rd-btn) { color: #c4d4dd; } .rd-footer a:hover { color: #fff; } .rd-footer__top { padding-block: var(--s-9); border-bottom: 1px solid rgba(255,255,255,.08); } .rd-footer__cols { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr; gap: var(--s-8); padding-block: var(--s-9); } .rd-footer__cols ul { list-style: none; padding: 0; margin: 0; } /* bakkah-style: divider line after every item + chevron marker (link columns only) */ .rd-footer__cols ul:not(.rd-footer__contact) li { border-bottom: 1px solid rgba(255,255,255,.09); } .rd-footer__cols ul:not(.rd-footer__contact) li:last-child { border-bottom: none; } .rd-footer__cols ul:not(.rd-footer__contact) li a { display: flex; align-items: center; gap: 9px; padding: 10px 2px; } .rd-footer__cols ul:not(.rd-footer__contact) li a::before { content: "\2039"; font-size: 1.2em; line-height: 1; font-weight: 700; color: var(--brand-accent); flex-shrink: 0; transition: transform var(--t-fast); } .rd-footer__cols ul:not(.rd-footer__contact) li a:hover { color: #fff; } .rd-footer__cols ul:not(.rd-footer__contact) li a:hover::before { transform: translateX(-3px); } .rd-footer__contact { display: grid; gap: 10px; } .rd-footer__brand img { height: 50px; margin-bottom: var(--s-5); } .rd-footer__contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .rd-footer__contact i { color: var(--brand-accent); margin-top: 3px; } .rd-trust { display: flex; flex-wrap: wrap; gap: var(--s-4); } .rd-trust img { height: 40px; background: #fff; border-radius: 6px; padding: 4px 8px; } .rd-pay { display: flex; flex-wrap: wrap; gap: 8px; } .rd-pay img { height: 34px; width: auto; background: #fff; border-radius: 6px; padding: 4px 8px; object-fit: contain; } /* Inline-SVG icons (FontAwesome-independent — always render) */ .rd-ic { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; } .rd-footer__contact svg.rd-ic { width: 16px; height: 16px; fill: var(--brand-accent); flex-shrink: 0; margin-top: 3px; } .rd-social a svg.rd-ic { width: 18px; height: 18px; fill: currentColor; } .rd-float-btn svg.rd-ic { width: 30px; height: 30px; fill: currentColor; } .rd-feature__icon svg.rd-ic { width: 36px; height: 36px; fill: currentColor; } .rd-accred { display: flex; flex-wrap: wrap; gap: 8px; } .rd-accred span { font-size: var(--fs-xs); font-weight: 600; color: #c4d4dd; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 6px 12px; } .rd-accred .rd-accred__logo { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 8px 14px; background: #fff; border: none; border-radius: var(--r-sm); } .rd-accred__logo img { max-height: 32px; max-width: 120px; width: auto; object-fit: contain; display: block; } .rd-footer__seo { padding-block: var(--s-6); border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); color: #8ba4b1; line-height: 2; } .rd-footer__seo a { color: #8ba4b1; } .rd-footer__seo a:hover { color: #fff; } .rd-footer__bottom { padding-block: var(--s-6); border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } .rd-social { display: flex; gap: var(--s-3); } .rd-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #c4d4dd; transition: all var(--t-fast); } .rd-social a:hover { background: var(--brand-primary-500); color: #fff; transform: translateY(-2px); } .rd-footer__disc { padding-block: var(--s-5); font-size: var(--fs-xs); color: #6f8997; text-align: center; border-top: 1px solid rgba(255,255,255,.08); } /* ============================================================================= FLOATING WHATSAPP + COOKIE BANNER ============================================================================= */ .rd-floats { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 1100; display: flex; flex-direction: column; gap: 12px; } .rd-float-btn { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #fff; box-shadow: var(--shadow-md); transition: transform var(--t); } .rd-float-btn:hover { transform: scale(1.08); color: #fff; } .rd-float-btn--wa { background: #25d366; } .rd-float-btn--wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: rd-pulse 2.4s infinite; } .rd-float-btn--support { background: var(--brand-primary-600); } @keyframes rd-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} } @media (max-width: 768px) { .rd-float-btn { width: 50px; height: 50px; font-size: 2.2rem; } } .rd-cookie { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 1090; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(16,24,40,.08); padding: var(--s-5); } .rd-cookie__inner { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; justify-content: center; } .rd-cookie p { margin: 0; flex: 1; min-width: 260px; color: var(--text-muted); font-size: var(--fs-sm); } .rd-cookie.is-hidden { display: none; } /* ============================================================================= UTILITIES ============================================================================= */ .u-center { text-align: center; } .u-flex { display: flex; } .u-aic { align-items: center; } .u-jcb { justify-content: space-between; } .u-jcc { justify-content: center; } .u-gap-2 { gap: var(--s-2); } .u-gap-3 { gap: var(--s-3); } .u-gap-4 { gap: var(--s-4); } .u-gap-5 { gap: var(--s-5); } .u-wrap { flex-wrap: wrap; } .u-mt-3 { margin-top: var(--s-3); } .u-mt-4 { margin-top: var(--s-4); } .u-mt-5 { margin-top: var(--s-5); } .u-mt-6 { margin-top: var(--s-6); } .u-mt-8 { margin-top: var(--s-8); } .u-mb-0 { margin-bottom: 0; } .u-mb-4 { margin-bottom: var(--s-4); } .u-mb-6 { margin-bottom: var(--s-6); } .u-muted { color: var(--text-muted); } .u-hidden { display: none !important; } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 1024px) { .rd-grid--4 { grid-template-columns: repeat(2, 1fr); } .rd-mega__grid { grid-template-columns: repeat(2, 1fr); } .rd-stats { grid-template-columns: repeat(2, 1fr); } .rd-logo-grid { grid-template-columns: repeat(3, 1fr); } .rd-cta__grid { grid-template-columns: 1fr; } .rd-cta__actions { justify-content: flex-start; } .rd-news__grid { grid-template-columns: 1fr; } .rd-news__art { display: none; } .rd-footer__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .rd-nav, .rd-actions .rd-only-desktop { display: none; } .rd-burger { display: inline-flex; } /* logo sits on the opposite side from the burger on mobile */ .rd-header .rd-logo { margin-inline-start: auto; } .rd-grid--3, .rd-grid--2 { grid-template-columns: 1fr; } .rd-grid--sidebar { grid-template-columns: 1fr; } .rd-filters, .rd-enroll, .rd-legal__toc { position: static; } .rd-section { padding-block: var(--s-9); } .rd-title { font-size: var(--fs-xl); } } @media (max-width: 560px) { .rd-grid--4 { grid-template-columns: 1fr; } .rd-stats { grid-template-columns: 1fr 1fr; gap: var(--s-3); } .rd-stat { padding: var(--s-5) var(--s-4); } .rd-stat__num { font-size: var(--fs-xl); } .rd-logo-grid { grid-template-columns: repeat(2, 1fr); } .rd-footer__cols { grid-template-columns: 1fr; } .rd-cta { padding: var(--s-7); } .rd-news__body, .rd-auth__card { padding: var(--s-6); } } /* ============================================================================= SCROLL REVEAL — progressive enhancement. Gated by .js-anim (added by an inline head script) so users without JS never get hidden content. Opt-in per element via [data-reveal] / staggered children via [data-reveal-group]. ============================================================================= */ .js-anim [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); will-change: opacity, transform; } .js-anim [data-reveal="left"] { transform: translateX(-36px); } .js-anim [data-reveal="right"] { transform: translateX(36px); } .js-anim [data-reveal="zoom"] { transform: scale(.92); } .js-anim [data-reveal].is-visible { opacity: 1; transform: none; } .js-anim [data-reveal-group] > * { opacity: 0; transform: translateY(28px); transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1); } .js-anim [data-reveal-group].is-visible > * { opacity: 1; transform: none; } .js-anim [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .05s; } .js-anim [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .12s; } .js-anim [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .19s; } .js-anim [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .26s; } .js-anim [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .33s; } .js-anim [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .40s; } .js-anim [data-reveal-group].is-visible > *:nth-child(7) { transition-delay: .47s; } .js-anim [data-reveal-group].is-visible > *:nth-child(8) { transition-delay: .54s; } /* Back-to-top floating button (shares .rd-float-btn base) */ .rd-float-btn--top { background: var(--brand-primary-600); border: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.85); transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease; } .rd-float-btn--top.is-visible { opacity: 1; visibility: visible; transform: none; } .rd-float-btn--top.is-visible:hover { transform: scale(1.08); background: var(--brand-primary-700); } /* Hero CTA pill (inside slide caption; click handled by the parent slide link) */ .rd-slide__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); background: var(--brand-accent); color: #3a2b08; font-weight: 800; font-size: var(--fs-md); padding: 12px 26px; border-radius: var(--r-pill); box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .25s ease, box-shadow .25s ease; } .rd-slide__cta svg { width: 20px; height: 20px; fill: currentColor; } .rd-slide--img:hover .rd-slide__cta { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.34); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .js-anim [data-reveal], .js-anim [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } } /* ============================================================================= LEGACY POLICY / LEGAL PAGES — re-theme existing markup (content untouched) These class names already exist in resources/views/site/policies/*.blade.php ============================================================================= */ .breadcrumb-bg, .privacy-breadcrumb, .AboutUs-breadcrumb { background: linear-gradient(135deg, var(--brand-primary-700), var(--brand-primary-500)) !important; padding-block: var(--s-10) !important; color: #fff; } .cr-breadcrumb-area { color: #fff; } .title-breadcrumb { color: #fff !important; font-size: var(--fs-2xl) !important; font-weight: 800; margin-bottom: var(--s-3); } .breadcrumb-list { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); flex-wrap: wrap; } .breadcrumb-list li, .breadcrumb-list a, .breadcrumb-list span { color: #cfe6f1; } /* Content body */ .sec-spacing { padding-block: var(--s-9) !important; } .header-title { max-width: 860px; margin: 0 auto var(--s-7); } .header-title h1 { font-size: var(--fs-2xl); color: var(--text); font-weight: 800; margin-bottom: var(--s-3); } .header-title p { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.9; } .privacy-content { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6) var(--s-7); margin-bottom: var(--s-5); box-shadow: var(--shadow-xs); } .privacy-content h1, .privacy-content h2, .privacy-content h3 { font-size: var(--fs-lg) !important; color: var(--brand-primary-700); font-weight: 700; margin: 0 0 var(--s-3); line-height: 1.4; } .privacy-content p, .privacy-content li { color: var(--text-body); line-height: 1.95; font-size: var(--fs-base); } .privacy-content ul, .privacy-content ol { padding-inline-start: 1.4em; } .privacy-section { margin-bottom: var(--s-6); } .indent-text { padding-inline-start: 1.2em; color: var(--text-body); line-height: 1.95; } /* Policy tables (cancellation/refund) */ .refund-table, .training-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); margin: var(--s-5) 0; } .refund-table th, .training-table th, .refund-percentage-header { background: var(--brand-primary-700); color: #fff; padding: 12px 16px; text-align: start; font-weight: 700; } .refund-table td, .training-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-body); } .refund-table-wrapper { overflow-x: auto; margin: var(--s-5) 0; -webkit-overflow-scrolling: touch; } .refund-table-wrapper .refund-table { margin: 0; } .refund-important-notes { background: var(--brand-accent-50); border: 1px solid var(--brand-accent-300); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin-top: var(--s-5); } .refund-important-notes__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--brand-accent-700); font-size: var(--fs-base); margin-bottom: var(--s-3); } .refund-important-notes__title svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--brand-accent-700); } .refund-important-notes ul { margin: 0; padding-inline-start: 1.4em; } /* Policy contact cards (contact & support channels section) */ .policy-contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin: var(--s-4) 0 var(--s-2); } .rd-policy-body a.policy-contact { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text) !important; text-decoration: none !important; font-weight: 600; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .rd-policy-body a.policy-contact:hover { border-color: var(--brand-primary-300); box-shadow: var(--shadow-xs); } .policy-contact__ic { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-primary-50); color: var(--brand-primary-600); } .policy-contact__ic svg { width: 20px; height: 20px; fill: currentColor; } .policy-contact__ic--wa { background: #e6f8ee; color: #25d366; } .rd-policy-body .policy-contact__txt { font-weight: 600 !important; color: var(--text) !important; } @media (max-width: 560px) { .policy-contacts { grid-template-columns: 1fr; } } /* ============================================================================= MOTION & POLISH ADD-ONS (home redesign) — additive. All motion is gated by .js-anim and switched off under prefers-reduced-motion. Transform/opacity only. ============================================================================= */ /* In-page smooth scrolling for anchors (disabled for reduced motion below). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---- Header: condense on scroll ------------------------------------------ */ .rd-header { transition: box-shadow var(--t), background var(--t); } .rd-header .rd-logo img { transition: height var(--t); } .rd-header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .rd-header.is-scrolled .rd-logo img { height: 38px; } /* ---- Hero: gentle Ken-Burns zoom on the active slide image --------------- */ .js-anim .rd-hero-swiper .swiper-slide-active .rd-hero__img { animation: rd-kenburns 8s var(--ease-out-expo) forwards; } @keyframes rd-kenburns { from { transform: scale(1.05); } to { transform: scale(1.12); } } /* ---- Prominent CTA: hover glow + arrow slide ----------------------------- */ .rd-btn--gold { transition: transform var(--t), box-shadow var(--t), background var(--t); } .rd-btn--gold:hover { box-shadow: 0 12px 30px rgba(234,186,106,.5); } .rd-cta-arrow { display: inline-flex; align-items: center; gap: .45em; } .rd-cta-arrow .rd-cta-arrow__i { transition: transform var(--t); } .rd-cta-arrow:hover .rd-cta-arrow__i { transform: translateX(-5px); } /* RTL: slides toward reading direction */ /* ---- Partner logos: infinite marquee (grayscale -> colour on hover) ------ */ .rd-logos--marquee { position: relative; flex-wrap: nowrap; justify-content: flex-start; gap: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .rd-logos--marquee .rd-marquee__track { display: flex; align-items: center; gap: var(--s-8); flex-shrink: 0; width: max-content; animation: rd-marquee 38s linear infinite; } .rd-logos--marquee:hover .rd-marquee__track { animation-play-state: paused; } @keyframes rd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- B2B band: slow float on the decorative orb (light parallax) --------- */ @media (prefers-reduced-motion: no-preference) { .rd-cta::after { animation: rd-orb-float 9s ease-in-out infinite; } } @keyframes rd-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } } /* ---- Reduced-motion: switch every add-on above to an instant/static state - */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-anim .rd-hero-swiper .swiper-slide-active .rd-hero__img { animation: none; } .rd-logos--marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; } .rd-logos--marquee .rd-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .rd-logos--marquee .rd-marquee__track [aria-hidden="true"] { display: none; } .rd-cta::after { animation: none; } .rd-cta-arrow:hover .rd-cta-arrow__i { transform: none; } } /* ---- Lenis smooth-scroll required styles (no-op when Lenis isn't active) -- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---- Programs catalog — Bakkah-style collapsible filter panels ----------- */ .rd-filters__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); } .rd-filters__title { margin: 0; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; } .rd-filters__title i { color: var(--brand-primary-600); } .rd-filters__clear { background: none; border: 0; color: var(--brand-primary-600); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 0; } .rd-filters__clear:hover { text-decoration: underline; } details.rd-filter > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); cursor: pointer; user-select: none; margin-bottom: var(--s-3); } details.rd-filter > summary::-webkit-details-marker { display: none; } details.rd-filter > summary h4 { margin: 0; } details.rd-filter:not([open]) > summary { margin-bottom: 0; } .rd-filter__chev { color: var(--text-muted); transition: transform var(--t); flex-shrink: 0; } details.rd-filter[open] .rd-filter__chev { transform: rotate(180deg); } /* ============================================================================= STEPS · "آلية العمل" — professional how-it-works pathway Consistent teal icon-medallions + gold step chips, dashed connecting rail, equal-height cards. Two-colour brand pairing (teal + gold), no rainbow. ============================================================================= */ .rd-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); } /* dashed rail threaded through the medallion row (desktop only) */ .rd-steps::before { content: ""; position: absolute; top: 44px; inset-inline: 9%; height: 2px; z-index: 0; background: repeating-linear-gradient(90deg, var(--brand-primary-300) 0 12px, transparent 12px 24px); } .rd-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* icon medallion — same treatment for every step (consistency reads as premium) */ .rd-step__medal { position: relative; width: 88px; height: 88px; border-radius: 50%; margin-bottom: var(--s-5); display: grid; place-items: center; background: linear-gradient(155deg, var(--brand-primary-500), var(--brand-primary-700)); box-shadow: 0 0 0 7px var(--surface-1), 0 10px 22px rgba(4, 88, 129, .25); transition: transform var(--t), box-shadow var(--t); } .rd-step__medal .rd-ic { width: 40px; height: 40px; fill: #fff; } /* gold numbered chip */ .rd-step__num { position: absolute; inset-block-start: -8px; inset-inline-start: -8px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); background: var(--brand-accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--surface-1), var(--shadow-xs); } .rd-step:hover .rd-step__medal { transform: translateY(-5px); box-shadow: 0 0 0 7px var(--surface-1), 0 16px 30px rgba(4, 88, 129, .32); } /* equal-height content card */ .rd-step__card { width: 100%; flex: 1 1 auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .rd-step:hover .rd-step__card { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-primary-100); } .rd-step__title { font-size: var(--fs-md); font-weight: 800; color: var(--text); margin: 0 0 var(--s-2); line-height: 1.35; } .rd-step__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.8; } .rd-steps__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-9); } /* tablet — 2 columns, drop the rail */ @media (max-width: 991px) { .rd-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } .rd-steps::before { display: none; } } /* phone — single column, medallion beside the card */ @media (max-width: 560px) { .rd-steps { grid-template-columns: 1fr; gap: var(--s-4); } .rd-step { flex-direction: row; align-items: flex-start; text-align: start; gap: var(--s-4); } .rd-step__medal { width: 60px; height: 60px; margin-bottom: 0; flex-shrink: 0; box-shadow: 0 0 0 5px var(--surface-1), 0 8px 18px rgba(4, 88, 129, .22); } .rd-step__medal .rd-ic { width: 28px; height: 28px; } .rd-step__num { min-width: 24px; height: 24px; font-size: var(--fs-xs); inset-block-start: -6px; inset-inline-start: -6px; } }