/* ============================================================ CEA Ã— Al-Baha University â€” Creative Economy landing page ============================================================ */ :root { --bg: #F9F9F9; --text: #000000; --muted: #868e96; --teal: #00796B; --teal-dark: #005a4f; --card: #ffffff; --border: #e6e6e6; --shadow: 0 4px 18px rgba(0, 0, 0, 0.08); --emboss: 0 1px 1px rgba(0, 0, 0, 0.06); --container: 1320px; --pad: 40px; } [data-theme="dark"] { --bg: #121316; --text: #f2f2f2; --muted: #9aa0a6; --teal: #26a69a; --teal-dark: #1f8a80; --card: #1c1e22; --border: #2c2f34; --shadow: 0 4px 22px rgba(0, 0, 0, 0.5); --emboss: 0 1px 2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Tajawal', 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; } nav.common-head.appliedHomeHed { box-shadow: none; padding: inherit; background: #0c162b !important; } .container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); width: 100%; } .text-center { text-align: center; } /* ---------------- Headings / emboss ---------------- */ h1, h2, h3 { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .emboss { text-shadow: var(--emboss); } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; } .btn-pill { border-radius: 8px; } .btn-teal { background: var(--teal); color: #fff; } .btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); } .btn-sm { padding: 8px 18px; font-size: 14px; } .btn-lg { padding: 15px 34px; font-size: 17px; } .btn-round { border-radius: 999px; padding: 14px 42px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 8px 22px rgba(0,121,107,.28); } .btn svg { display: block; } /* Materialize hides every [type="checkbox"] off-screen (position:absolute; left:-9999px; visibility:hidden) and draws a replacement box on a sibling 's ::before. The login form's Remember Me is label > input + span — no sibling label — so no replacement is ever drawn and the box vanishes. Force the native checkbox back on-screen instead; same pattern master.css uses for the applied theme (.remberApply input[type="checkbox"]). The accent-color/cursor styling lives with the .login-row rules further down. */ .remember input[type="checkbox"] { position: static !important; left: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 17px !important; height: 17px !important; margin: 0 !important; } /* Deliberately no overflow on — this is load-bearing, do not re-add. `html { overflow-x: hidden; }` used to sit here. Any overflow other than visible on the root element stops 's overflow from propagating to the viewport and makes itself the scroll container, which silently breaks `position: sticky` on every descendant — including .tab-degi-nav on the diploma detail page (master.css declares it sticky at top:0). Horizontal clipping is unaffected: body already carries overflow-x: hidden (master.css). This matches the reference site, cea.classperts.com. */ /* Header styles moved to header-footer.css */ /* ============================================================ HERO ============================================================ */ .hero { background: var(--bg); text-align: center; padding: 80px 0 70px; } .hero-title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.14; max-width: 1000px; margin: 0 auto 40px; color: #111; text-shadow: 3px 7px 9px rgba(0, 0, 0, 0.32); } [data-theme="dark"] .hero-title { color: #f5f5f5; text-shadow: 3px 7px 12px rgba(0,0,0,0.7); } .hero-lead { max-width:900px; margin:0px auto 20px; font-size:18px; color:#262b3a; text-align:left; } [data-theme="dark"] .hero-lead, [data-theme="dark"] .hero-date { color: #8ea3d6; } .hero-date { max-width: 900px; margin: 6px auto 0; font-size: 17px; color:#262b3a; text-align: left; } .hero-date:first-of-type { margin-top:20px; } .pillar { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; overflow: hidden; } .pillar-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); } /* ============================================================ HERO CROSSFADE SLIDER ============================================================ */ .hero-slider { position: relative; width: 100%; height: 80vh; min-height: 560px; overflow: hidden; } .slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background-size: cover; background-position: center; opacity: 0; z-index: 0; transition: opacity 0.6s ease-in-out; } .slide.active { opacity: 1; z-index: 1; } .slide h2 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: 2px; text-align: center; font-family: 'Tajawal', 'DM Sans', sans-serif; text-shadow: 0 2px 20px rgba(0,0,0,.4); } /* Fallback gradients (shown until the real images are dropped in) â€” the real image loads as the top background layer and covers these. */ .slide-elevate { background-image: var(--img, none), linear-gradient(180deg, #6b8f6b 0%, #3d5c48 40%, #24384a 100%); } .slide-innovate { background-image: var(--img, none), radial-gradient(circle at 50% 45%, #d9d9d9 0%, #b3b3b3 45%, #7d7d7d 100%); } .slide-empower { background-image: var(--img, none), repeating-linear-gradient(90deg, rgba(120,150,255,.06) 0 1px, transparent 1px 46px), linear-gradient(180deg, #243a4f 0%, #0d1826 100%); } /* Optional admin-set call-to-action button on a hero slide. */ .hero-slide-btn { display: inline-block; padding: 13px 36px; background: #0e8b8b; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px; text-decoration: none; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.30); transition: background .2s ease, transform .2s ease; } .hero-slide-btn:hover { background: #0b6f6f; color: #fff; transform: translateY(-2px); } /* Black BU section */ .pillar-black { min-height: 520px; background: #000; justify-content: flex-start; align-items: flex-end; } .pillar-black-logo { display: flex; align-items: center; gap: 18px; padding: 0 0 56px 60px; } .pillar-black-text { display: flex; flex-direction: column; line-height: 1.05; } .pbt-line1 { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: 2px; } .pbt-line2 { color: #fff; font-size: 34px; font-weight: 300; letter-spacing: 6px; } /* Video (contained player) */ .pillar-video { background: var(--bg); } .vision-video { display: block; width: min(1440px, 100% - 2 * var(--pad)); height: auto; margin-inline: auto; margin-block: 4rem; aspect-ratio: 16 / 9; background: #000; } /* ============================================================ GENERIC SECTIONS ============================================================ */ .section { padding: 90px 0; } .section h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 20px; } .heading-lg { font-size: clamp(30px, 4.6vw, 50px); max-width: 1000px; } .text-center .heading-lg, .heading-lg.text-center { margin-left: auto; margin-right: auto; } .subheading-italic { font-style: italic; color: var(--muted); font-size: 18px; margin-bottom: 22px; text-transform: none; } .section-para { color: var(--muted); font-size: 17px; max-width: 760px; margin: 0 auto 10px; } .para-left { margin-left: 0; } .text-center .section-para { margin-left: auto; margin-right: auto; } /* 3 Pillars logo cards */ .section-pillars { background: var(--bg); } .pillars-subhead { color: var(--muted); font-size: 18px; text-transform: none; margin-bottom: 22px; } .logo-cards { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 48px; } .logo-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,.08); padding: 26px 40px; min-width: 240px; display: flex; align-items: center; justify-content: center; } .logo-card img { height: 58px; width: auto; max-width: 100%; object-fit: contain; display: block; } [data-theme="dark"] .logo-card img { filter: brightness(0) invert(1); } /* Partnership bullets */ .section-partnership { background: var(--bg); } .section-partnership h2 { margin-bottom: 40px; } .emboss-strong { color: #111; text-shadow: 3px 7px 9px rgba(0, 0, 0, 0.30); } [data-theme="dark"] .emboss-strong { color: #f5f5f5; text-shadow: 3px 7px 12px rgba(0,0,0,0.7); } .partnership-body { max-width: 880px; margin: 0 auto; } .label-small { text-transform: uppercase; letter-spacing: 2px; color: var(--muted); font-weight: 600; font-size: 14px; margin: 0 0 16px; } .partnership-body .section-para { color: #33477a; margin-bottom: 22px; } .teal-bullets { list-style: none; margin-top: 8px; } .teal-bullets li { position: relative; padding-left: 26px; margin-bottom: 18px; font-size: 17px; color: #33477a; } .teal-bullets li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; background: var(--teal); border-radius: 50%; } [data-theme="dark"] .partnership-body .section-para, [data-theme="dark"] .teal-bullets li { color: #8ea3d6; } /* Industry aligned */ .partner-cards { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 40px 0 36px; } .partner-card { background: #1c1c1e; border-radius: 16px; height: 92px; padding: 0 30px; display: grid; place-items: center; } .partner-card img { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; } .partner-card.partner-epic img { height: 56px; } /* Future stat grid */ .section-future { background: var(--bg); } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; } .stat-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: #1f2a38; } .stat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8) 100%); } .stat-content { position: relative; z-index: 2; padding: 22px; color: #fff; display: flex; flex-direction: column; gap: 4px; } .stat-figure { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .stat-desc { font-size: 14px; color: rgba(255,255,255,.9); text-transform: none; line-height: 1.35; } /* ============================================================ FLYER (Arabic program details â€” single image) ============================================================ */ .flyer-section { background: var(--bg); padding: 20px 0 40px; display: flex; justify-content: center; } .flyer-img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; } /* ============================================================ CTA ============================================================ */ .section-cta { background: var(--bg); } .cta-heading { text-transform: none; margin: 0 auto 20px; max-width: 900px; font-size: clamp(26px, 3.8vw, 40px); } .cta-sub { margin-bottom: 32px; } /* Footer styles moved to header-footer.css */ /* ============================================================ SCROLL TO TOP ============================================================ */ .scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; background: var(--teal); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, background .2s ease, visibility .3s; } .scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: var(--teal-dark); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .stat-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { :root { --pad: 22px; } .promo-inner { flex-direction: column; text-align: center; } .promo-content { text-align: center; } .promo-logos, .promo-list li { justify-content: center; } .promo-list li { padding-right: 0; padding-left: 22px; } .promo-list li::before { right: auto; left: 0; } .pillar { min-height: 460px; } .pillar-black-logo { padding-left: 24px; } } /* ============================================================ LOGIN PAGE ============================================================ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .login-card { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08); width: 100%; max-width: 720px; padding: 46px clamp(24px, 5vw, 60px) 44px; } .login-eyebrow { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 6px; } .login-title { text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 34px; text-transform: none; letter-spacing: 0; } .login-form { display: flex; flex-direction: column; gap: 18px; } .input-group { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } .input-group:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.12); } .field-icon { color: var(--muted); display: flex; flex-shrink: 0; } .input-group input { flex: 1; border: none; outline: none; background: transparent; padding: 15px 8px; font-family: inherit; font-size: 16px; color: var(--text); min-width: 0; height: auto; margin: 0px; } .input-group input::placeholder { color: var(--muted); } .pw-toggle { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; padding: 4px; flex-shrink: 0; transition: color .2s ease; } .pw-toggle:hover { color: var(--teal); } .pw-toggle .eye-on { display: none; } .pw-toggle.revealed .eye-off { display: none; } .pw-toggle.revealed .eye-on { display: block; } .login-row { display: flex; align-items: center; gap: 20px; margin: 2px 0 10px; } .remember { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; user-select: none; } .remember input { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; } .forgot { color: var(--teal); text-decoration: none; font-weight: 600; font-size: 15px; } .forgot:hover { text-decoration: underline; } html body .btn-login { background: var(--teal) !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 15px !important; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background .2s ease; margin-bottom: 15px; height: auto !important; } .btn-login:hover { background: var(--teal-dark); } .input-suffix { color: var(--muted); font-size: 15px; font-weight: 600; flex-shrink: 0; padding-left: 6px; } .btn-outline { display: block; width: 100%; text-align: center; border: 2px solid var(--teal); color: var(--teal); background: #fff; border-radius: 10px; padding: 13px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease; } .btn-outline:hover { background: var(--teal); color: #fff; } .btn-return { display: block; width: max-content; margin: 22px auto 0; border: 2px solid var(--teal); color: var(--teal); background: #fff; border-radius: 10px; padding: 12px 30px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s ease, color .2s ease; } .btn-return:hover { background: var(--teal); color: #fff; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-wrap { padding: 60px 20px 80px; display: flex; justify-content: center; } .contact-inner { width: 100%; max-width: 780px; } .contact-title { font-size: clamp(38px, 6vw, 60px); font-weight: 700; text-transform: none; letter-spacing: -1px; margin-bottom: 16px; } .contact-lead { color: var(--muted); font-size: 18px; max-width: 700px; line-height: 1.6; } .contact-lead a { color: var(--teal); text-decoration: none; font-weight: 600; } .contact-lead a:hover { text-decoration: underline; } .btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; background: #22a83f; color: #fff; border-radius: 30px; padding: 11px 22px; font-family: inherit; font-weight: 700; font-size: 15px; text-decoration: none; margin-top: 22px; transition: background .2s ease; } .btn-whatsapp:hover { background: #1c8f35; } .contact-card { background: #fafafa; border: 1px solid var(--border); border-radius: 14px; padding: 32px clamp(20px, 4vw, 36px); margin-top: 34px; display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-weight: 700; font-size: 15px; } .contact-card select { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 14px 40px 14px 16px; font-family: inherit; font-size: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 9 12 5 16 9'/%3E%3Cpolyline points='8 15 12 19 16 15'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s ease, box-shadow .2s ease; } .contact-card select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.12); } .contact-card textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 16px; min-height: 140px; resize: vertical; background: #fff; color: var(--text); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .contact-card textarea::placeholder { color: var(--muted); } .contact-card textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.12); } .char-count { align-self: flex-end; color: var(--muted); font-size: 13px; margin-top: 2px; } .contact-card .btn-login { margin-top: 4px; } .pd-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 110px 20px; background-color: #0A0A1A; background-image:radial-gradient(circle, rgba(76,43,226,0.6) 0%, rgba(76,43,226,0.3) 40%, rgba(0,0,0,0) 70%), radial-gradient(circle, rgba(76,43,226,0.4) 0%, rgba(33,0,130,0.3) 40%, rgba(25,25,112,0.2) 70%, rgba(10,10,26,0.8) 100%); } .pd-hero h1 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: clamp(42px, 9vw, 96px); line-height: 1.05; letter-spacing: 1px; max-width: 1000px; margin: 0 auto; } /* Video */ .pd-video-section { background: var(--bg); padding: 60px 0; display: flex; justify-content: center; } .pd-video { width: min(1400px, 100% - 2 * var(--pad)); } .yt-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .yt-title-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; color: #fff; font-size: 14px; background: linear-gradient(180deg, rgba(0,0,0,.75), transparent); } .yt-title-bar .yt-mini { color: #f00; font-size: 16px; } .yt-title-bar small { color: rgba(255,255,255,.7); font-size: 12px; } .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 68px; height: 48px; border: none; border-radius: 12px; background: #f00; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; } .yt-facade:hover .yt-play { background: #cc0000; transform: translate(-50%,-50%) scale(1.05); } .yt-share { position: absolute; bottom: 14px; left: 18px; z-index: 2; background: none; border: none; cursor: pointer; padding: 4px; display: flex; } .yt-watch { position: absolute; bottom: 14px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 15px; } .yt-watch .yt-logo { display: block; } .yt-watch strong { font-weight: 700; } /* Carousel */ .pd-carousel { position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; background: linear-gradient(180deg, #10121f 0%, #1a1a38 55%, #0e0e1c 100%); } .carousel-track { display: flex; width: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); } .carousel-slide { position: relative; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 100px clamp(60px, 8vw, 100px); background-size: cover; background-position: center; } .carousel-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,20,.55), rgba(6,8,20,.65)); } .slide-inner { position: relative; z-index: 1; max-width: 760px; text-align: center; opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .slide-inner.in-view { opacity: 1; transform: translateY(0); } .slide-inner h2 { color: #B0D0FF; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 5vw, 56px); line-height: 1.1; margin-bottom: 22px; text-shadow: 0 2px 16px rgba(0,0,0,.5); } .slide-inner p { color: #fff; font-size: clamp(16px, 2.2vw, 20px); max-width: 730px; margin: 0 auto 14px; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.6); } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; } .carousel-arrow:hover { background: rgba(255,255,255,0.22); } .carousel-arrow.prev { left: 18px; } .carousel-arrow.next { right: 18px; } /* English Language Courses */ .pd-courses { background: var(--bg); padding: 74px 0; } .pd-courses .container { max-width: 1600px; } .pd-courses h2 { font-size: clamp(24px, 3vw, 30px); text-transform: none; margin-bottom: 26px; } .course-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; } .course-row { display: grid; grid-template-columns: 120px 250px 1fr; border-bottom: 1px solid var(--border); } .course-row:last-child { border-bottom: none; } .course-code { padding: 20px; font-weight: 600; color: var(--muted); font-size: 14px; display: flex; align-items: center; } .course-name { padding: 20px; font-weight: 600; font-size: 14px; border-left: 1px solid var(--border); } .course-desc { padding: 20px; color: var(--muted); font-size: 13px; line-height: 1.65; border-left: 1px solid var(--border); } /* Career Pathways */ .pd-pathways { background: var(--bg); padding: 10px 0 76px; } .pd-pathways h2 { font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; margin-bottom: 24px; } .chip-row { display: flex; flex-wrap: wrap; gap: 12px; } .chip { background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: 999px; padding: 10px 20px; font-size: 15px; color: #000; height: auto; } /* Closing */ .pd-closing { position: relative; background: var(--bg); padding: 96px 20px; text-align: center; overflow: hidden; } .pd-closing .dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .dot-particle { position: absolute; border-radius: 50%; background: rgba(0,121,107,.18); } .pd-closing-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .pd-closing h2 { color: var(--teal); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5vw, 52px); margin-bottom: 24px; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; } .pd-closing h2.in-view { opacity: 1; transform: none; } .pd-closing p { color: var(--text); font-size: 19px; margin-bottom: 12px; line-height: 1.6; } .pd-closing p.muted { color: var(--muted); font-size: 16px; } .pd-enroll { display: inline-block; margin-top: 26px; background: var(--teal); color: #fff; border-radius: 8px; padding: 13px 32px; font-weight: 700; text-decoration: none; transition: background .2s ease; } .pd-enroll:hover { background: var(--teal-dark); } @media (max-width: 720px) { .course-row { grid-template-columns: 1fr; } .course-name, .course-desc { border-left: none; border-top: 1px solid var(--border); } } /* ============================================================ ABOUT PAGE ============================================================ */ /* Banner slider (taller + larger stacked captions) */ .ab-banner { height: 92vh; min-height: 620px; } .ab-banner .slide h2 { font-size: clamp(3rem, 8.5vw, 6.8rem); line-height: 1.04; letter-spacing: 1px; max-width: 760px; text-shadow: 0 3px 24px rgba(0,0,0,.45); } /* 1. Hero word reveal */ .ab-hero { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bg); padding: 80px 20px; gap: 40px; } .ab-hero-title { font-size: clamp(38px, 7vw, 74px); font-weight: 700; text-transform: uppercase; line-height: 1.1; } .hero-line { display: block; } .reveal-word { display: inline-block; color: #cfcfcf; opacity: .2; transform: scale(.82); transition: opacity .5s ease, transform .5s ease, color .5s ease; } .reveal-word.in { color: #000; opacity: 1; transform: scale(1); } [data-theme="dark"] .reveal-word.in { color: #f5f5f5; } .scroll-cue { color: var(--teal); animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* 2. Scroll-pinned logo reveal */ .ab-pin { position: relative; height: 200vh; background: var(--bg); } .ab-pin-inner { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 8vw, 120px); overflow: hidden; } .pin-logo { will-change: transform, opacity; opacity: 0; } .pin-bu { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); } .pin-bu-text { display: flex; flex-direction: column; text-align: right; line-height: 1.25; } .pin-bu .bu-ar { font-size: clamp(34px, 6vw, 56px); font-weight: 700; color: var(--text); } .pin-bu .bu-en { font-size: clamp(18px, 2.6vw, 26px); color: var(--muted); letter-spacing: .5px; } /* 5. Programs grid */ .subtle-label { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--muted); } .more-label { text-transform: uppercase; letter-spacing: 2px; font-size: 19px; font-weight: 700; color: var(--text); margin-top: 34px; } .prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } .prog-card { position: relative; border-radius: 16px; overflow: hidden; height: 305px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: #1f2a38; text-align: left; text-decoration: none; border: 1px solid rgba(0,121,107,.55); box-shadow: 0 0 0 1px rgba(0,121,107,.15), 0 10px 26px rgba(0,0,0,.12); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .prog-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 0 0 1px rgba(0,121,107,.4), 0 16px 34px rgba(0,0,0,.22); } .prog-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 25%, rgba(0,0,0,.88) 100%); } .prog-body { position: relative; z-index: 1; padding: 24px; color: #fff; display: flex; flex-direction: column; gap: 6px; } .prog-body h3 { color: #fff; font-size: 20px; font-weight: 700; text-transform: none; line-height: 1.25; } .prog-date { color: rgba(255,255,255,.9); font-size: 15px; } .prog-label { color: #2fb3a3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; } /* 6. Foundation */ .ab-foundation .eyebrow-teal { margin-bottom: 12px; } .ab-foundation h2 { text-transform: none; font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 10px; } .ab-foundation .subtle-label { margin-bottom: 18px; } .ab-foundation .section-para { max-width: 640px; margin: 0 0 4px; text-align: left; } .eyebrow-teal { color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; } .found-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; text-align: left; } .found-card { background: #f8f9fa; border: 1px solid var(--border); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; gap: 18px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .found-card:hover { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(0,121,107,.25), 0 10px 26px rgba(0,0,0,.07); transform: translateY(-3px); } .found-icon { color: var(--teal); display: flex; } .found-card h4 { font-size: 17px; font-weight: 700; text-transform: none; line-height: 1.35; } /* 7. Flow diagram */ .flow-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; } .flow-card { background: #f8f9fa; border: 1px solid rgba(0,121,107,.55); border-radius: 18px; padding: 44px 40px; text-align: center; width: 480px; max-width: 100%; box-shadow: 0 18px 40px rgba(0,121,107,.08); } .flow-icon { color: var(--teal); display: inline-flex; margin-bottom: 18px; } .flow-card h3 { font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; } .flow-card p { color: var(--muted); font-size: 15px; } .flow-arrow { color: var(--teal); display: flex; } .flow-pills { display: flex; flex-wrap: wrap; gap: 12px; max-width: 620px; align-content: flex-start; } .flow-pill { border: 1px solid rgba(0,121,107,.28); color: var(--teal); border-radius: 10px; padding: 12px 18px; max-width: 200px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; text-align: center; line-height: 1.35; background: #fbfcfc; } /* 8. Pillars (plain text blocks, staggered) */ .pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 44px; text-align: left; } .pillar-block { background: none; border: none; padding: 0; } .pb-empower { grid-column: 1 / -1; max-width: 620px; margin: 24px auto 0; } .pillar-block h3 { font-size: 24px; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; } .pillar-block > p { color: var(--muted); font-size: 16px; margin-bottom: 20px; line-height: 1.65; } .spark-list { list-style: none; } .spark-list li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 15px; color: #4d5560; } .spark-list li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 16px; height: 16px; background: var(--teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") no-repeat center / contain; } /* 9 + 10. Orbit + marquees */ .teal-heading { color: var(--teal); } .ab-awards { background: radial-gradient(circle, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 26px 26px, var(--bg); } .ab-orbit { background: var(--bg); overflow: hidden; } /* Three-ring counter-rotating orbit over a 3D perspective grid */ .il-section { position: relative; width: 100%; max-width: none; margin: 10px auto 0; display: flex; flex-direction: column; align-items: center; } .il-bg-grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 300px; perspective-origin: 50% 0%; } .il-grid-layer { position: absolute; left: 50%; top: 0; width: 2600px; height: 900px; margin-left: -1300px; background-image: linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px); background-size: 42px 42px; transform: rotateX(70deg); transform-origin: 50% 0%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 60%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 60%, transparent 92%); } [data-theme="dark"] .il-grid-layer { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); } .orbit-wrap { position: relative; z-index: 1; width: 520px; height: 520px; max-width: 95vw; margin-top: 20px; } .orbit-line { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; transform: translate(-50%,-50%); } [data-theme="dark"] .orbit-line { border-color: rgba(255,255,255,.14); } .orbit-line.outer { width: 408px; height: 408px; } .orbit-line.middle { width: 302.4px; height: 302.4px; } .orbit-line.inner { width: 153.6px; height: 153.6px; } .ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; } .ring.outer { animation: spinCCW 30s linear infinite; } .ring.middle { animation: spinCW 30s linear infinite; } .ring.inner { animation: spinCCW 30s linear infinite; } .item { position: absolute; top: 0; left: 0; width: 50px; height: 50px; } .item-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .item-inner img { width: 100%; height: 100%; object-fit: contain; display: block; } .outer-item { animation: spinCW 30s linear infinite; } .middle-item { animation: spinCCW 30s linear infinite; } .inner-item { animation: spinCW 30s linear infinite; } @keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .logo-strip { position: relative; z-index: 1; margin-top: 34px; width: 100%; max-width: 1300px; overflow: hidden; direction: ltr; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-track { display: flex; width: max-content; animation: marquee 22s linear infinite; direction: ltr; } .logo-badge { background: #111; color: #fff; font-weight: 800; letter-spacing: 1px; font-size: 14px; padding: 16px 28px; margin-right: 24px; white-space: nowrap; border-radius: 10px; display: grid; place-items: center; } .logo-badge-img { padding: 12px 22px; } .logo-badge-img img { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; } .marquee { overflow: hidden; padding: 10px 0 30px; direction: ltr; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* Force LTR so the JS/CSS translateX marquee math (measures scrollWidth, scrolls left) works the same under a page-level dir="rtl". Posters/logos have no reading direction, so this is purely a layout-origin fix. */ .marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 28s linear infinite; direction: ltr; } .marquee-posters .marquee-track { animation-duration: 40s; } .marquee-posters { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .marquee-posters.dragging { cursor: grabbing; } .marquee-posters .poster-card { pointer-events: none; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .studio-card { flex: 0 0 auto; background: #1c1c1e; color: #fff; border-radius: 12px; padding: 22px 34px; font-weight: 700; font-size: 16px; white-space: nowrap; display: grid; place-items: center; min-width: 220px; } .poster-card { flex: 0 0 auto; min-width: 270px; min-height: 380px; border-radius: 0; background-size: cover; background-position: center; background-color: #222; } .closing-tag { color: var(--teal); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; margin-bottom: 14px; } @media (max-width: 900px) { .prog-grid { grid-template-columns: 1fr 1fr; } .found-grid, .flow-pills, .pillars-grid { grid-template-columns: 1fr; } .pb-innovate { margin-top: 0;} } @media (max-width: 620px) { .prog-grid { grid-template-columns: 1fr; } } .contact-card select { display: block; padding: 10px; color: #72798d; } /**Arabic**/ html[lang="ar"] .input-group--tel .iti__dropdown-content { left: inherit !important; right: 0px !important; max-width: 370px; } html[lang="ar"] input#mobilenumber { direction: rtl; } html[lang="ar"] .input-group select.browser-default { background-position: center left !important; } html[lang="ar"] input#whatsapp { direction:rtl; } html[lang="ar"] .contact-card select { background-position:center left; } html[lang="ar"] .hero-lead { text-align:right; } html[lang="ar"] p.hero-date { text-align:right; } html[lang="ar"] .partnership-body .section-para { text-align:right; margin-right:0px; } html[lang="ar"] .teal-bullets li::before { left:inherit; right:-15px; } html[lang="ar"] .prog-body { text-align:right; } html[lang="ar"] p.section-para { text-align:right !important; } html[lang="ar"] .found-card h4 { text-align:right; } html[lang="ar"] .ab-pillars.section p.section-para { text-align:center !important; } html[lang="ar"] .pillars-grid { text-align:right; } html[lang="ar"] .spark-list li { padding-right:28px; padding-left:0px; } html[lang="ar"] .spark-list li::before { left:inherit; right:0px; } /* ============================================================ Diploma Detail page restyle (route: diploma/progream-diploma-detail) View: theme_page/al_baha_university/program_diploma_page.blade.php Scoped to .detiCourseDiploma so only this page is affected. Tokens: navy #0C162B, teal #00796B, gray #4D5464, bg #F9F9F9, text #111 / #555, font Tajawal/DM Sans. VISUAL ONLY. ============================================================ */ .detiCourseDiploma { background: #F9F9F9 !important; } /* fonts everywhere (icon fonts kept intact just below) */ .detiCourseDiploma, .detiCourseDiploma h1, .detiCourseDiploma h2, .detiCourseDiploma h3, .detiCourseDiploma h4, .detiCourseDiploma h5, .detiCourseDiploma h6, .detiCourseDiploma p, .detiCourseDiploma a, .detiCourseDiploma span, .detiCourseDiploma li, .detiCourseDiploma ul, .detiCourseDiploma button, .detiCourseDiploma div, .detiCourseDiploma input, .detiCourseDiploma label, .detiCourseDiploma .heading_font { font-family: 'Tajawal', 'DM Sans', sans-serif !important; } .detiCourseDiploma .fa, .detiCourseDiploma [class^="fa-"], .detiCourseDiploma [class*=" fa-"] { font-family: 'FontAwesome' !important; } .detiCourseDiploma .material-icons { font-family: 'Material Icons' !important; } /* ---- Hero (navy, replaces green/DB colour) ---- */ .detiCourseDiploma .page-header-jumborton { background: #F9F9F9 !important; } /* Hero background only: deep-navy -> indigo -> electric-blue diagonal gradient, three soft glow blobs, and a dot-grid texture. Background layers are drawn in ::before/::after so the hero markup and its content are untouched. `background` (shorthand, !important) also neutralises the inline style="background-color:…" that .mainiCentri carries from detail_page_bgcolor. NOTE: program_diploma_page.blade.php repeats this block in an inline