@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); /*============================================================== SiteModern.css — Deutschzentrum Kosovo Premium visual redesign for the PUBLIC (unauthenticated) site. ------------------------------------------------------------ LOOK & FEEL ONLY. Loaded LAST in the unauthenticated branch of Views/Shared/_Layout.cshtml so it layers on top of the legacy template (style.css + OuterSiteStyle.css) without touching markup, data, text or Razor bindings. ==============================================================*/ :root { /* Brand — electric indigo -> violet -> fuchsia, amber accent */ --dz-indigo: #4f46e5; --dz-indigo-700: #4338ca; --dz-indigo-900: #312e81; --dz-violet: #7c3aed; --dz-fuchsia: #d926aa; --dz-pink: #ec4899; --dz-cyan: #06b6d4; --dz-amber: #f59e0b; --dz-amber-2: #f97316; /* Neutrals */ --dz-ink: #0b1020; --dz-heading: #131a2e; --dz-body: #475569; --dz-muted: #64748b; --dz-line: #e6e8f0; --dz-bg: #f7f8fc; --dz-bg-2: #eef0ff; --dz-card: #ffffff; /* Gradients */ --dz-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #d926aa 100%); --dz-grad-soft: linear-gradient(135deg, #eef0ff 0%, #f7ecff 50%, #ffeef8 100%); --dz-grad-amber: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); --dz-grad-text: linear-gradient(120deg, #4f46e5 0%, #7c3aed 45%, #d926aa 100%); --dz-mesh: radial-gradient(900px 500px at 8% -10%, rgba(124, 58, 237, 0.55), transparent 60%), radial-gradient(800px 500px at 100% 0%, rgba(217, 38, 170, 0.45), transparent 55%), radial-gradient(700px 600px at 50% 120%, rgba(79, 70, 229, 0.55), transparent 60%), linear-gradient(160deg, #0b1020 0%, #161a3a 60%, #1d1740 100%); /* Elevation */ --dz-shadow-sm: 0 2px 8px rgba(17, 24, 56, 0.06); --dz-shadow: 0 16px 40px -18px rgba(49, 46, 129, 0.35), 0 6px 16px -10px rgba(17, 24, 56, 0.18); --dz-shadow-lg: 0 36px 80px -28px rgba(49, 46, 129, 0.45); --dz-ring: 0 0 0 4px rgba(124, 58, 237, 0.18); /* Radii */ --dz-r-sm: 12px; --dz-r: 18px; --dz-r-lg: 26px; --dz-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --dz-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* No scroll-behavior: smooth here — main.js animates scrollTop with jQuery, and CSS smooth scrolling cancels each animation step so the menu anchors stop working */ html { scroll-padding-top: 88px; } body { font-family: var(--dz-sans); color: var(--dz-body); background-color: var(--dz-bg); background-image: radial-gradient(1100px 520px at 100% -5%, rgba(124, 58, 237, 0.08), transparent 60%), radial-gradient(900px 480px at -10% 8%, rgba(79, 70, 229, 0.07), transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--dz-display); color: var(--dz-heading); letter-spacing: -0.01em; } a { transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; } /* Constrain the layout — the site is no longer edge-to-edge full width. Applies to every fluid container across the public site + sub-pages. */ .container-fluid { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Keep the hero, CTA bands and footer background full-bleed, but hold their inner content to the same comfortable measure. */ #hero, .cta, #footer .footer-top, #footer > .container { width: 100%; } /* A little breathing room on the sides at large screens */ @media (min-width: 1400px) { #main > section > .container, #main > section > .container-fluid { max-width: 1200px; } } ::selection { background: rgba(124, 58, 237, 0.18); color: var(--dz-ink); } /* Custom scrollbar (desktop) */ @media (min-width: 992px) { ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--dz-bg-2); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--dz-indigo), var(--dz-violet)); border: 3px solid var(--dz-bg-2); border-radius: 99px; } } /*-------------------------------------------------------------- # Top bar (thin gradient accent strip) --------------------------------------------------------------*/ #topbar { background: var(--dz-grad) !important; height: 6px !important; background-size: 200% 100% !important; animation: dzShift 9s ease infinite; } @keyframes dzShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /*-------------------------------------------------------------- # Header / Navigation — one right-aligned bar: a compact brand mark (rebuilt from the old logo's twin blue diamonds) forms the left cap of the dark menu "dock", and the whole unit hugs the right edge. The full legacy logo image now lives at the top of the About section (.dz-about-logo) instead of the header. --------------------------------------------------------------*/ #header { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 rgba(17, 24, 56, 0.06), 0 10px 30px -18px rgba(49, 46, 129, 0.28); padding: 11px 0; } #header.header-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 30px -14px rgba(49, 46, 129, 0.30); } /* Push brand + menu to the true right edge of the screen — the header escapes the global 1200px container cap on purpose */ #header .container-fluid { max-width: 100%; flex-wrap: nowrap; justify-content: flex-end; } /* Brand segment — the dock's left cap (same fixed height as the dock so the two halves join seamlessly) */ #header .logo { /* cancels Bootstrap's mr-auto, which would pin it to the left */ margin: 0 !important; flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 7px; background: var(--dz-ink); border-radius: 99px 0 0 99px; box-shadow: 0 20px 40px -20px rgba(11, 16, 32, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.09); } /* Twin overlapping diamonds on a white tile, echoing the old logo */ .dz-brand__mark { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: #fff; transition: transform .3s ease; } .dz-brand__mark::before, .dz-brand__mark::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); } .dz-brand__mark::before { top: 7px; left: 7px; background: #3fa9f5; } .dz-brand__mark::after { top: 14px; left: 14px; background: #1b5fb8; opacity: .92; } #header .logo:hover .dz-brand__mark { transform: rotate(-8deg) scale(1.06); } .dz-brand__text { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--dz-display); font-weight: 800; font-size: 14px; color: #fff; letter-spacing: .01em; white-space: nowrap; } .dz-brand__text small { font-family: var(--dz-sans); font-size: 9px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--dz-amber); } /* Mobile: menu is hidden, so the brand stands alone as a full pill on the left (the fixed hamburger toggle owns the right corner) */ @media (max-width: 991px) { #header .container-fluid { justify-content: flex-start; } #header .logo { border-radius: 99px; } } .nav-menu { margin-left: 0; } /* The dark menu dock — right cap of the bar, height-matched to the brand segment */ .nav-menu > ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; height: 48px; padding: 0 6px 0 3px; border-radius: 0 99px 99px 0; background: var(--dz-ink); box-shadow: 0 20px 40px -20px rgba(11, 16, 32, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.09); } /* Neutralise the legacy white "block" pseudo elements on nav items */ .nav-menu > ul > li { width: auto; height: auto; margin: 0 1px; flex-shrink: 0; font-family: var(--dz-sans); font-size: inherit; transition: none; } .nav-menu > ul > li::before, .nav-menu > ul > li::after { display: none !important; } .nav-menu > ul > li:hover::before, .nav-menu > ul > li:hover::after { border: 0 !important; animation: none !important; } .nav-menu a { font-family: var(--dz-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: rgba(255, 255, 255, 0.78); padding: 10px 14px; border-radius: 99px; text-transform: uppercase; white-space: nowrap; transition: color .25s ease, background .25s ease, box-shadow .25s ease; } .nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { color: #fff; font-weight: 700; background: var(--dz-grad); box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.8); } /* The dock carries many items — tighten it up on narrower desktops so the right-aligned bar never overflows the viewport. */ @media (min-width: 992px) and (max-width: 1340px) { .nav-menu a { font-size: 11.5px; letter-spacing: .02em; padding: 9px 10px; } } /* ...and drop the brand wordmark, keeping just the diamond tile */ @media (min-width: 992px) and (max-width: 1199px) { .dz-brand__text { display: none; } #header .logo { padding-right: 10px; } } /* With the dock hugging the right edge, the right-most dropdown (language) must open leftwards to stay inside the viewport */ .nav-menu > ul > li.drop-down:last-child > ul { left: auto; right: 0; } /* Dropdowns */ .nav-menu .drop-down ul { border-radius: 16px; border: 1px solid var(--dz-line); box-shadow: var(--dz-shadow); padding: 8px; background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .nav-menu .drop-down ul a { border-radius: 10px; padding: 9px 14px; color: #2b3144; text-transform: none; font-size: 14px; font-weight: 600; box-shadow: none; } .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { background: var(--dz-grad-soft); color: var(--dz-indigo-700); box-shadow: none; } .nav-menu .drop-down ul img { border-radius: 4px; box-shadow: var(--dz-shadow-sm); margin-right: 8px; } /* Mobile nav (generated by main.js) */ .mobile-nav-toggle i { color: var(--dz-indigo-700); } .mobile-nav { border-radius: 14px; box-shadow: var(--dz-shadow-lg); padding: 12px 8px; } .mobile-nav a { border-radius: 10px; font-weight: 600; } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: var(--dz-indigo-700) !important; background: var(--dz-grad-soft); } .mobile-nav-active .mobile-nav-overly { background: rgba(11, 16, 32, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /*-------------------------------------------------------------- # Hero — synced main-post + post-list carousel Ported from a standalone HTML/CSS/JS component (progress-bar driven "featured post" switcher) and adapted: re-skinned to the site's --dz-* tokens, capped to a fixed banner height instead of the source's full-viewport takeover, grid made dynamic instead of hardcoded to 3 posts, and a description slot kept so the slide's existing Description field is still shown (the source layout had no field for it — it only carried a tag + CTA link). --------------------------------------------------------------*/ #hero { position: relative; /* clears the fixed single-row header */ margin-top: 72px; /* neutralise the legacy template's own sizing/backdrop — .carousel is the sized box now, #hero is just a thin wrapper around it */ height: auto; padding-top: 0; background-color: transparent; overflow: visible; } @media (min-width: 992px) { #hero { /* OuterSiteStyle offsets the desktop header 5px from the top */ margin-top: 78px; } } /* Spacer under the fixed header on sub-pages (_ExtraHeader.cshtml) */ .dz-header-spacer { height: 82px; } @media (min-width: 992px) { .dz-header-spacer { height: 90px; } } /* The old site logo, floating over the hero's bottom-left corner on a white card: bounces in, then levitates indefinitely */ .dz-hero-logo { position: absolute; left: 24px; bottom: 104px; z-index: 4; animation: dzHeroLogoIn 1s cubic-bezier(.34, 1.56, .64, 1) .9s backwards, dzHeroLogoFloat 5s ease-in-out 2s infinite; } .dz-hero-logo img { display: block; max-height: 88px; max-width: min(60vw, 360px); background: rgba(255, 255, 255, 0.94); padding: 12px 18px; border-radius: 18px; box-shadow: var(--dz-shadow-lg); } @keyframes dzHeroLogoIn { 0% { opacity: 0; transform: translateY(28px) scale(.9); } 60% { opacity: 1; transform: translateY(-8px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dzHeroLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 991px) { .dz-hero-logo { left: 14px; bottom: 88px; } .dz-hero-logo img { max-height: 60px; padding: 8px 12px; border-radius: 14px; } } /* Named to avoid colliding with the legacy `#hero .carousel` rules in style.css (Bootstrap-fade leftovers that force position:absolute and would otherwise pull this out of #hero's normal flow). */ .hero-post-carousel { position: relative; height: 62vh; min-height: 460px; max-height: 640px; overflow: hidden; background-color: #0b1020; } .progress-bar { position: absolute; top: 0; left: 0; height: 4px; width: 100%; z-index: 2; background: rgba(255, 255, 255, 0.12); } .progress-bar__fill { width: 0; height: inherit; background: var(--dz-grad); transition: width 0.16s linear; } .progress-bar--primary { z-index: 6; } .main-post-wrapper { position: absolute; width: 100%; height: 100%; } .slides { width: 100%; height: 100%; position: relative; overflow: hidden; } .main-post { position: absolute; top: 100%; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; } .main-post__image { position: absolute; inset: 0; } .main-post__image img { width: 100%; height: 100%; display: block; object-fit: cover; } .main-post__image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 16, 32, 0.25) 0%, rgba(11, 16, 32, 0.35) 55%, rgba(11, 16, 32, 0.7) 100%); } .main-post__content { position: absolute; top: 42%; left: 5%; transform: translateY(-42%); color: #fff; width: 90%; max-width: 620px; z-index: 2; background: linear-gradient(165deg, rgba(11, 16, 32, 0.62) 0%, rgba(11, 16, 32, 0.38) 100%); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--dz-r); padding: 26px 30px; box-shadow: var(--dz-shadow-lg); } .main-post__content::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; border-radius: 0 0 4px 0; background: var(--dz-grad); } /* #hero-prefixed: the legacy template's `#hero h2 { color:#2f2f2f }` is ID-scoped and otherwise beats a bare `.main-post__title` rule on specificity regardless of load order. */ #hero .main-post__title { margin: 0; font-family: var(--dz-display); font-weight: 800; color: #fff; font-size: clamp(20px, 2.8vw, 34px); line-height: 1.18; letter-spacing: -0.01em; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); } /* #hero-prefixed: same reason as .main-post__title (beats `#hero p { color:#555555 }`) */ #hero .main-post__desc { margin: 12px 0 0; max-width: 60ch; font-size: clamp(13.5px, 1.2vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .main-post--active { top: 0; z-index: 1; transition: top 0.9s 0.4s ease-out; } .main-post--not-active { top: 100%; z-index: 0; transition: top 0.75s 2s; } .main-post.main-post--active .main-post__title { opacity: 1; transform: translateY(0); transition: opacity 0.8s 1.1s, transform 0.5s 1.08s; } .main-post.main-post--not-active .main-post__title { transform: translateY(40px); opacity: 0; transition: transform 0.2s 0.35s, opacity 0.5s 0.2s; } .main-post.main-post--active .main-post__desc { opacity: 1; transition: opacity 0.9s 1.5s; } .main-post.main-post--not-active .main-post__desc { opacity: 0; transition: opacity 0.5s 0.2s; } /* Mini post-list — doubles as clickable carousel navigation */ .posts-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: 12px; position: absolute; bottom: 0; max-width: 95%; margin: auto; left: 50%; transform: translateX(-50%); width: 100%; z-index: 3; } .post { background: rgba(11, 16, 32, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0.55; color: #fff; position: relative; padding: 14px 18px; cursor: pointer; transition: opacity 0.25s ease, background 0.25s ease; } /* #hero-prefixed: same collision as .main-post__title above */ #hero .post__title { margin: 0; font-weight: 600; color: #fff; font-size: 0.92em; line-height: 1.45; } .post--active { opacity: 1; background: rgba(124, 58, 237, 0.35); pointer-events: none; } .post--disabled { pointer-events: none; } .post:hover { opacity: 1; } .hide-on-mobile { display: none; } @media screen and (min-width: 1024px) { .hide-on-mobile { display: grid; } .hide-on-desktop { display: none; } } @media screen and (min-width: 1440px) { .main-post__content { width: 45%; } .posts-wrapper { left: 80%; transform: translateX(-80%); max-width: 70%; } } @media (max-width: 992px) { .hero-post-carousel { height: 64vh; min-height: 400px; } } /*-------------------------------------------------------------- # Section rhythm + ".seven" kicker headings --------------------------------------------------------------*/ section { padding: 76px 0; } .section-bg { background-color: var(--dz-bg-2); background-image: radial-gradient(700px 360px at 90% 0%, rgba(217, 38, 170, 0.06), transparent 60%); } .seven { text-align: center; margin-top: 6px; } .seven h1 { display: block; font-family: var(--dz-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; color: var(--dz-heading); background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; grid-template-columns: none; grid-template-rows: none; grid-gap: 0; padding: 0 12px 18px; margin: 0 auto; } .seven h1::before { display: none !important; } .seven h1::after { content: ""; display: block; width: 78px; height: 5px; margin: 16px auto 0; border: 0; border-radius: 99px; background: var(--dz-grad-amber); } .section-title { padding-bottom: 26px; } .section-title h2 { font-weight: 800; color: var(--dz-heading); } .section-title h2::after { background: var(--dz-grad); height: 4px; border-radius: 99px; } .section-title p { font-size: 15px; font-weight: 500; color: var(--dz-muted); max-width: 760px; margin: 0 auto; line-height: 1.7; } /*-------------------------------------------------------------- # About — bold, modern editorial layout --------------------------------------------------------------*/ .descriptionText { font-size: 16px !important; line-height: 1.9; font-weight: 500; color: var(--dz-heading); } .descriptionText::first-letter { font-family: var(--dz-display); font-weight: 800; font-size: 3.4em; line-height: .78; float: left; margin: 4px 10px 0 0; background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #about .section-title h3 { display: inline-block; position: relative; font-weight: 800; font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -0.01em; color: var(--dz-heading); margin-bottom: 22px; padding-bottom: 14px; } #about .section-title h3::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 4px; border-radius: 99px; background: var(--dz-grad-amber); } #about img.img-fluid { border-radius: var(--dz-r); box-shadow: var(--dz-shadow); border: 6px solid #fff; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; } #about .col-lg-12 > img.img-fluid { max-width: 320px !important; max-height: 340px !important; } #about img.img-fluid:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--dz-shadow-lg); } #about iframe { border-radius: var(--dz-r); box-shadow: var(--dz-shadow); min-height: 320px; } @media (max-width: 576px) { #about .col-lg-12 > img.img-fluid { float: none !important; display: block; margin: 0 auto 20px !important; max-width: 220px !important; max-height: 240px !important; } } /*-------------------------------------------------------------- # Featured services (purpose / mission / vision) + translate chips --------------------------------------------------------------*/ /* Full-width HORIZONTAL feature cards, STACKED one below another: gradient icon tile on the LEFT, title + description on the right. Overrides Bootstrap's col-md-4 3-across grid into a single stacked column purely via CSS. */ .featured-services .row { flex-direction: column; row-gap: 22px; align-items: stretch; } .featured-services .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 0 !important; } .featured-services .icon-box { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon desc"; column-gap: 30px; row-gap: 8px; align-items: center; padding: 30px 40px; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: 24px; box-shadow: var(--dz-shadow); text-align: left; overflow: hidden; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; } /* Always-on gradient accent bar across the top of each card */ .featured-services .icon-box::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--dz-grad); z-index: 2; } /* Legacy hover-fill (::before slides up) — recoloured to the brand gradient */ .featured-services .icon-box::before { background: var(--dz-grad); } .featured-services .icon-box:hover { transform: translateY(-10px); box-shadow: var(--dz-shadow-lg); } .featured-services .icon-box:hover::before { background: var(--dz-grad); } .featured-services .icon { grid-area: icon; align-self: center; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; margin: 0; border-radius: 22px; background: var(--dz-grad); box-shadow: 0 16px 30px -12px rgba(124, 58, 237, 0.6); transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .4s ease, box-shadow .4s ease; } .featured-services .icon i { font-size: 38px; color: #fff; -webkit-text-fill-color: #fff; background: none; transition: color .3s ease; } .featured-services .icon-box:hover .icon { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); transform: scale(1.06) rotate(-5deg); } .featured-services .icon-box:hover .icon i { -webkit-text-fill-color: #fff; color: #fff; } .featured-services .title { grid-area: title; align-self: center; font-family: var(--dz-display); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; margin: 0; text-align: left; } .featured-services .title a { color: var(--dz-heading); transition: color .3s ease; } .featured-services .icon-box:hover .title a { color: #fff; } .featured-services .description { grid-area: desc; font-size: 14.5px; line-height: 1.8; color: var(--dz-body); text-align: left; max-width: 92ch; margin: 0; } /* Translate chips */ .featured-services .icon-box-translate { padding: 20px 10px; border-radius: var(--dz-r); height: 150px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .featured-services .icon-box-translate .icon { width: 58px; height: 58px; margin-bottom: 4px; } .featured-services .icon-box-translate .icon i { font-size: 26px; } .typeTranslate { font-size: 12.5px !important; font-weight: 700 !important; color: var(--dz-heading); text-align: center; } .featured-services .icon-box-translate:hover .typeTranslate { color: #fff; } /*-------------------------------------------------------------- # CTA bands (quote + "watch all" buttons) Animated aurora glow drifting behind the content, plus a large decorative quote glyph — both purely ambient/CSS, no markup. --------------------------------------------------------------*/ .cta { position: relative; background: var(--dz-mesh) !important; background-color: #0b1020 !important; padding: 54px 0 !important; margin: 18px 0; border-radius: var(--dz-r-lg); box-shadow: var(--dz-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.07) inset; overflow: hidden; } /* Slow-drifting aurora glow */ .cta::before { content: ""; position: absolute; inset: -35%; z-index: 0; background: radial-gradient(420px 420px at 30% 30%, rgba(217, 38, 170, 0.38), transparent 62%), radial-gradient(380px 380px at 72% 68%, rgba(6, 182, 212, 0.28), transparent 62%), radial-gradient(320px 320px at 50% 50%, rgba(124, 58, 237, 0.3), transparent 65%); animation: ctaAurora 12s ease-in-out infinite; pointer-events: none; } /* Oversized decorative quotation glyph */ .cta::after { content: "\201C"; position: absolute; top: -46px; left: 26px; z-index: 0; font-family: Georgia, "Times New Roman", serif; font-size: 160px; line-height: 1; color: rgba(255, 255, 255, 0.08); pointer-events: none; user-select: none; } @keyframes ctaAurora { 0%, 100% { transform: translate(-6%, -4%) scale(1); } 50% { transform: translate(6%, 4%) scale(1.18); } } .cta .container { position: relative; z-index: 1; } .cta h3 { color: #fff; font-family: var(--dz-display); font-style: italic; font-size: clamp(17px, 2.1vw, 23px); line-height: 1.55; font-weight: 700; letter-spacing: .01em; } .cta .cta-btn { border: 0; border-radius: 99px; padding: 14px 38px; font-weight: 700; color: #fff; background: var(--dz-grad-amber); box-shadow: 0 14px 30px -12px rgba(245, 158, 11, 0.7); } .cta .cta-btn:hover { background: var(--dz-grad-amber); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(245, 158, 11, 0.8); } /*-------------------------------------------------------------- # Counts --------------------------------------------------------------*/ .counts { background-color: var(--dz-bg-2); background-image: radial-gradient(700px 320px at 10% 0%, rgba(79, 70, 229, 0.07), transparent 60%); } .counts .count-box { padding: 32px 28px; border-radius: var(--dz-r-lg); background: var(--dz-card); border: 1px solid var(--dz-line); box-shadow: var(--dz-shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .counts .count-box:hover { transform: translateY(-6px); box-shadow: var(--dz-shadow-lg); } .counts .count-box i { font-size: 2.4em !important; background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--dz-violet); } .counts .count-box p { color: var(--dz-body); padding-top: 18px; } .counts .count-box strong { color: var(--dz-heading); } /*-------------------------------------------------------------- # Holidays — "festival ticket" cards A torn-ticket shape: gradient stub with the date on the left, a punched-out perforation, then the holiday info on the right. Deliberately unlike any other card pattern on the site. --------------------------------------------------------------*/ .dz-holidays { background-color: var(--dz-bg-2); background-image: radial-gradient(700px 320px at 90% 0%, rgba(245, 158, 11, 0.08), transparent 60%); } .dz-ticket { position: relative; width: 100%; margin: 14px 12px; display: flex; align-items: stretch; background: var(--dz-card); border-radius: 22px; box-shadow: var(--dz-shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .dz-ticket:hover { transform: translateY(-8px); box-shadow: var(--dz-shadow-lg); } /* Punched-out perforation notches at the stub/body seam */ .dz-ticket::before, .dz-ticket::after { content: ""; position: absolute; left: 132px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--dz-bg-2); box-shadow: inset 0 0 0 1px var(--dz-line); z-index: 3; } .dz-ticket::before { top: -13px; } .dz-ticket::after { bottom: -13px; } /* Gradient date stub */ .dz-ticket__stub { position: relative; flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 10px; border-radius: 22px 0 0 22px; color: #fff; text-align: center; background: var(--dz-grad); background-size: 200% 200%; overflow: hidden; } /* Subtle diagonal "washi tape" texture */ .dz-ticket__stub::before { content: ""; position: absolute; inset: -20%; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px 20px); pointer-events: none; } .dz-ticket__stub i { position: relative; font-size: 22px; color: var(--dz-amber); margin-bottom: 2px; } .dz-ticket__day { position: relative; font-family: var(--dz-display); font-size: 38px; font-weight: 800; line-height: 1; } .dz-ticket__monthyear { position: relative; font-size: 13px; font-weight: 700; letter-spacing: .03em; opacity: .9; } .dz-ticket__monthyear span { margin: 0 3px; opacity: .7; } /* Dashed perforation line down the seam */ .dz-ticket__body { flex: 1 1 auto; padding: 24px 26px; border-left: 2px dashed var(--dz-line); } .dz-ticket__body h3 { margin: 0 0 14px; font-family: var(--dz-display); font-weight: 800; font-size: 17px; color: var(--dz-heading); } .dz-holiday-line { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; line-height: 1.6; padding: 6px 0; } .dz-holiday-line__label { font-weight: 700; color: var(--dz-violet); } .dz-holiday-line__value { color: var(--dz-body); } @media (max-width: 560px) { .dz-ticket { flex-direction: column; } .dz-ticket::before, .dz-ticket::after { left: 50%; top: auto; } .dz-ticket::before { top: -13px; } .dz-ticket::after { bottom: auto; top: 106px; } .dz-ticket__stub { flex: 0 0 auto; flex-direction: row; border-radius: 22px 22px 0 0; padding: 18px; } .dz-ticket__body { border-left: 0; border-top: 2px dashed var(--dz-line); } } /* The AJAX-filled count number (overrides OuterSite inline .CountMain) */ .CountMain { font-family: var(--dz-display); font-size: 46px !important; font-weight: 800 !important; line-height: 1.05; margin-left: 64px !important; background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--dz-indigo); } .CounMainText .CountName { color: var(--dz-heading); font-weight: 700; } .bigCountDiv .bigcount { background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--dz-violet); font-weight: 800; } /*-------------------------------------------------------------- # Team — Partners & Staff cards (rebuilt from hover-overlay to cards) --------------------------------------------------------------*/ .team .member { text-align: center; background: var(--dz-card) !important; border: 1px solid var(--dz-line); border-radius: var(--dz-r) !important; box-shadow: var(--dz-shadow); overflow: hidden; width: 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .team .member:hover { transform: translateY(-6px); box-shadow: var(--dz-shadow-lg); } /* Logos / portraits — contain so nothing is cropped */ .team .member img { position: relative; height: 200px !important; width: 100% !important; max-width: 100% !important; object-fit: contain; background: #fff; padding: 22px; border-bottom: 1px solid var(--dz-line); } /* Convert the absolute hover-overlay into a static footer */ .team .member .member-info { position: static !important; opacity: 1 !important; background: transparent !important; padding: 16px 14px 18px; } .team .member:hover .member-info { background: transparent !important; } .team .member .member-info-content { position: static !important; left: auto; right: auto; bottom: auto; } .team .member:hover .member-info-content { bottom: auto; } .team .member .member-info-content h4 { color: var(--dz-heading) !important; font-weight: 800; font-size: 16px; } .team .member .member-info-content span { color: var(--dz-muted) !important; font-style: normal; font-size: 13px; } /* Social row becomes a static centred strip */ .team .member .social { position: static !important; left: auto !important; top: auto; bottom: auto; width: auto !important; background: transparent !important; display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .team .member:hover .social { left: auto !important; } .team .member .social a { margin-top: 0 !important; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--dz-indigo-700); background: var(--dz-bg-2); transition: all .25s ease; } .team .member .social a:hover { color: #fff; background: var(--dz-grad); transform: translateY(-2px); } /*-------------------------------------------------------------- # Testimonials NOTE: legacy style.css has a stray leftover rule from an older card layout — `.testimonial-img { position:absolute; left:-45px }` (never fully superseded by its own later duplicate rule, since that only redeclares `position`, not `left`). Because our own rule below never touched `position`/`left` either, that stray -45px offset kept applying, scattering every avatar sideways out of its card. Fixed by explicitly resetting position/left/top on .testimonial-img here. --------------------------------------------------------------*/ .testimonials { background-color: var(--dz-bg-2); background-image: radial-gradient(700px 340px at 12% 100%, rgba(217, 38, 170, 0.06), transparent 60%); } .testimonials .testimonial-item { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r-lg); box-shadow: var(--dz-shadow); padding: 38px 30px 32px; margin: 16px 12px 30px; text-align: center; overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } /* Gradient accent bar across the top of every card */ .testimonials .testimonial-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--dz-grad); } .testimonials .testimonial-item:hover { transform: translateY(-8px); box-shadow: var(--dz-shadow-lg); } /* Visually reorder so the avatar leads (modern testimonial pattern) without touching the underlying markup/DOM order. */ .testimonials .testimonial-item .testimonial-img { order: -3; position: relative; left: 0; top: 0; z-index: 2; width: 84px !important; height: 84px !important; object-fit: cover; border: 4px solid var(--dz-card); border-radius: 50%; margin: 0 auto 18px; box-shadow: 0 0 0 3px var(--dz-violet), var(--dz-shadow); transition: box-shadow .35s ease; } .testimonials .testimonial-item:hover .testimonial-img { box-shadow: 0 0 0 3px var(--dz-fuchsia), var(--dz-shadow-lg); } .testimonials .testimonial-item h3 { order: 0; color: var(--dz-heading); font-weight: 800; font-size: 18px; margin-bottom: 2px; } .testimonials .testimonial-item h4 { order: 0; color: var(--dz-violet); font-size: 13px; font-weight: 600; } .testimonials .testimonial-item p { order: -1; color: var(--dz-body); font-style: italic; line-height: 1.8; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: rgba(124, 58, 237, 0.28); font-size: 30px; } .testimonials .owl-dot.active, .gallery .owl-dot.active { background: var(--dz-grad) !important; width: 26px !important; border-radius: 99px !important; } .testimonials .owl-dot, .gallery .owl-dot { background: #cfd3e6 !important; border-radius: 99px !important; transition: all .3s ease; } /*-------------------------------------------------------------- # Gallery — modern responsive grid (replaces the Owl slider) --------------------------------------------------------------*/ /* Bento-style masonry: tiles vary in size in a repeating rhythm instead of a uniform grid of identical boxes — works for any photo count. */ .gallery .dz-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 130px; grid-auto-flow: dense; gap: 16px; } .gallery .dz-gallery-grid .venobox { position: relative; display: block; overflow: hidden; border-radius: var(--dz-r); box-shadow: var(--dz-shadow); cursor: pointer; grid-row: span 1; } /* Every 6th tile becomes a big feature block */ .gallery .dz-gallery-grid .venobox:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; } /* Every 6th tile (offset) becomes a tall portrait block */ .gallery .dz-gallery-grid .venobox:nth-child(6n+4) { grid-row: span 2; } @media (max-width: 560px) { .gallery .dz-gallery-grid .venobox:nth-child(6n+1) { grid-column: span 1; } } .gallery .dz-gallery-grid .venobox img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2, .7, .2, 1); } /* Brand-tinted gradient wash that fades in on hover */ .gallery .dz-gallery-grid .venobox::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(79, 70, 229, 0) 35%, rgba(124, 58, 237, 0.6) 100%); opacity: 0; transition: opacity .4s ease; } /* Magnify icon (inline SVG) that pops in on hover */ .gallery .dz-gallery-grid .venobox::after { content: ""; position: absolute; inset: 0; z-index: 2; background: center / 42px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); pointer-events: none; } .gallery .dz-gallery-grid .venobox:hover { box-shadow: var(--dz-shadow-lg); } .gallery .dz-gallery-grid .venobox:hover img { transform: scale(1.1); } .gallery .dz-gallery-grid .venobox:hover::before { opacity: 1; } .gallery .dz-gallery-grid .venobox:hover::after { opacity: 1; transform: scale(1); } /*-------------------------------------------------------------- # Pricing / translation price boxes --------------------------------------------------------------*/ .pricing .box, .box { background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r) !important; box-shadow: var(--dz-shadow); padding: 26px 20px; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .pricing .box:hover, .box:hover { transform: translateY(-8px); box-shadow: var(--dz-shadow-lg); } .pricing h3, .box h3 { background: var(--dz-grad-soft); color: var(--dz-indigo-900); font-weight: 800; border-radius: 14px; margin: -6px 0 16px; padding: 14px; font-size: 22px; } .pricing h4, .box h4 { color: var(--dz-violet); font-family: var(--dz-display); font-weight: 800; } .pricing h4 sup, .box h4 sup { color: var(--dz-fuchsia); } .pricing .btn-wrap, .box .btn-wrap { background: transparent; margin: 18px 0 0; padding: 8px 0 0; } .pricing .btn-buy, .btn-buy { background: var(--dz-grad) !important; border-radius: 99px; padding: 11px 26px; font-weight: 700; border: 0; box-shadow: 0 12px 26px -12px rgba(79, 70, 229, 0.7); color: #fff; } .pricing .btn-buy:hover, .btn-buy:hover { background: var(--dz-grad) !important; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(124, 58, 237, 0.8); } .pricing .advanced, .advanced { background: var(--dz-grad-amber) !important; color: #fff; font-weight: 700; box-shadow: var(--dz-shadow-sm); } /*-------------------------------------------------------------- # Translations page (dedicated redesign — own classes, does not touch the shared .pricing/.box/.featured-services rules above, which the homepage's AJAX-loaded _Pricing.cshtml still uses) --------------------------------------------------------------*/ .dz-translate-pricing, .dz-translate-types { padding: 64px 0; } .dz-translate-pricing .section-title { max-width: 1100px; margin: 0 auto 26px; } .dz-translate-pricing .section-title p { max-width: 100%; font-size: 13.5px; font-weight: 600; color: var(--dz-heading); line-height: 1.65; } .dz-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; margin-top: 12px; } .dz-price-card { position: relative; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r-lg); box-shadow: var(--dz-shadow); padding: 40px 24px 30px; text-align: center; overflow: hidden; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease; } .dz-price-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--dz-grad); } .dz-price-card:hover { transform: translateY(-10px); box-shadow: var(--dz-shadow-lg); border-color: transparent; } .dz-price-card__rank { position: absolute; top: 18px; left: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--dz-display); font-weight: 800; font-size: 12px; border-radius: 50%; background: var(--dz-grad-soft); color: var(--dz-indigo-900); transition: background .35s ease, color .35s ease; } .dz-price-card:hover .dz-price-card__rank { background: var(--dz-grad); color: #fff; } .dz-price-card__amount { font-family: var(--dz-display); font-weight: 900; font-size: clamp(30px, 3vw, 40px); line-height: 1; margin: 12px 0 16px; background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dz-price-card__amount sup { font-size: 16px; top: -14px; color: var(--dz-fuchsia); background: none; -webkit-text-fill-color: var(--dz-fuchsia); } .dz-price-card__doctype { min-height: 60px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--dz-body); margin: 0 0 22px; } .dz-price-card__timeline { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 99px; background: var(--dz-grad-soft); color: var(--dz-indigo-900); font-weight: 700; font-size: 12.5px; box-shadow: var(--dz-shadow-sm); transition: background .35s ease, color .35s ease; } .dz-price-card__timeline i { font-size: 14px; } .dz-price-card:hover .dz-price-card__timeline { background: var(--dz-grad-amber); color: #fff; } /* Bento-style grid — a wide "feature" tile opens each row (matching the gallery's masonry idiom), 7 cols x 2 rows exactly fits the 12 type chips (2 wide tiles x 2 cols + 10 normal tiles x 1 col = 14 = 7 x 2, no gaps). */ .dz-type-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 18px; margin-top: 12px; } .dz-type-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 28px 12px; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background .35s ease, border-color .35s ease; } .dz-type-card:hover { transform: translateY(-8px); box-shadow: var(--dz-shadow-lg); background: var(--dz-grad); border-color: transparent; } /* Featured wide tiles — first chip of each row (Deftesa/VendimeGjyqesore) */ .dz-type-card:nth-child(1), .dz-type-card:nth-child(7) { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 20px; padding: 0 30px; text-align: left; background: var(--dz-grad); border-color: transparent; box-shadow: var(--dz-shadow); } .dz-type-card:nth-child(1) .dz-type-card__icon, .dz-type-card:nth-child(7) .dz-type-card__icon { flex-shrink: 0; width: 62px; height: 62px; font-size: 30px; background: rgba(255, 255, 255, 0.22); color: #fff; } .dz-type-card:nth-child(1) .dz-type-card__label, .dz-type-card:nth-child(7) .dz-type-card__label { font-size: 15px; color: #fff; } .dz-type-card__icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--dz-grad-soft); color: var(--dz-violet); font-size: 25px; transition: background .35s ease, color .35s ease, transform .35s ease; } .dz-type-card:hover .dz-type-card__icon { background: rgba(255, 255, 255, 0.22); color: #fff; transform: scale(1.08) rotate(-4deg); } .dz-type-card__label { font-size: 12.5px; font-weight: 700; color: var(--dz-heading); transition: color .35s ease; } .dz-type-card:hover .dz-type-card__label { color: #fff; } @media (max-width: 992px) { .dz-type-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; } } @media (max-width: 560px) { .dz-type-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .dz-type-card:nth-child(1), .dz-type-card:nth-child(7) { flex-direction: column; text-align: center; padding: 28px 12px; } .dz-type-card:nth-child(1) .dz-type-card__label, .dz-type-card:nth-child(7) .dz-type-card__label { text-align: center; } } .dz-translate-more { padding-bottom: 0; } .dz-translate-more p { font-style: italic; font-weight: 600; } /*-------------------------------------------------------------- # FAQ list --------------------------------------------------------------*/ .faq-list li, .faq .faq-list li { background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); padding: 22px 24px; transition: box-shadow .3s ease, transform .3s ease; } .faq-list li:hover, .faq .faq-list li:hover { box-shadow: var(--dz-shadow); transform: translateY(-2px); } .faq-list a, .faq .faq-list a { font-family: var(--dz-display); font-weight: 700; color: var(--dz-heading); } .faq-list a:hover, .faq .faq-list a:hover, .faq-list a.collapsed:hover, .faq .faq-list a.collapsed:hover { color: var(--dz-indigo-700); } .faq-list .icon-help, .faq .faq-list .icon-help { background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--dz-violet); } .faq-list .icon-show, .faq-list .icon-close, .faq .faq-list .icon-show, .faq .faq-list .icon-close { color: var(--dz-violet); } /*-------------------------------------------------------------- # Center tabs (Prishtinë / Gjilan / Mitrovicë sliding selector) --------------------------------------------------------------*/ .tabs { border-radius: 99px; box-shadow: var(--dz-shadow); padding: 6px; background: var(--dz-card); border: 1px solid var(--dz-line); } .tabs a { border-radius: 99px; font-weight: 700; font-size: 13.5px; color: var(--dz-body); } .tabs a.active { color: #fff; } .tabs .selector { border-radius: 99px; background: var(--dz-grad) !important; box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.7); } @media only screen and (max-width: 500px) { .tabs .selector { background: var(--dz-grad-soft) !important; } .tabs a.active { color: var(--dz-indigo-700) !important; font-weight: 800 !important; } } /* Bolder contact tab pills */ .tabsContact { padding: 7px; } .tabsContact a { font-size: 14px; font-weight: 700; padding: 12px 24px; } .tabsContact a i { margin-right: 8px; } /*-------------------------------------------------------------- # Contact info boxes + form --------------------------------------------------------------*/ .contact .info-box { background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); padding: 24px 18px; transition: transform .3s ease, box-shadow .3s ease; height: 100%; } .contact .info-box:hover { transform: translateY(-4px); box-shadow: var(--dz-shadow); } .contact .info-box i { color: var(--dz-violet); border: 0; background: var(--dz-grad-soft); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18); padding: 14px; font-size: 26px; } .contact .info-box h3 { color: var(--dz-heading); font-weight: 800; font-size: 18px; } .contact .info-box p, .contact .info-box .textcontact { color: var(--dz-body); } .contact .info-box a { color: var(--dz-indigo-700); } .contact .info-box a:hover { color: var(--dz-fuchsia); } .contact .info-box iframe, .contact iframe { border-radius: var(--dz-r); } /*-------------------------------------------------------------- # Contact section — "contact hub" redesign Dark glass info panel (name/address/hours/social) beside the map, a compact horizontal info-rail instead of card grid, then media + form. Deliberately distinct from the light-card look used everywhere else on the page. --------------------------------------------------------------*/ .dz-contact-hero { margin-bottom: 26px; } /* Dark glass panel — reuses the hero/CTA mesh treatment */ .dz-contact-panel { position: relative; height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 34px 30px; border-radius: var(--dz-r-lg); color: #fff; background: var(--dz-mesh); background-color: #0b1020; box-shadow: var(--dz-shadow-lg); overflow: hidden; } .dz-contact-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--dz-grad-amber); } .dz-panel-divider { height: 1px; background: rgba(255, 255, 255, 0.14); } .dz-cline { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; } .dz-cline__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .dz-cline__icon i { font-size: 22px; color: #fff; } .dz-cline__body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #fff !important; } .dz-cline__body, .dz-cline__body p { font-size: 13.5px; line-height: 1.65; margin-bottom: 0; color: rgba(255, 255, 255, 0.82); } /* Model.Context / DetailedAddress / WorkingHours are raw CMS-authored HTML (@Html.Raw) that can carry its own inline color/background from the rich text editor — force it to sit cleanly on the dark panel regardless. */ .dz-cline__body, .dz-cline__body * { background: transparent !important; background-color: transparent !important; color: rgba(255, 255, 255, 0.82) !important; } .dz-cline__body h3, .dz-cline__body h3 * { color: #fff !important; } .dz-cline--social .dz-social { display: flex; gap: 10px; margin-top: 8px; } .dz-cline--social .dz-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; transition: transform .25s ease, background .25s ease; } .dz-cline--social .dz-social a i { font-size: 20px; } .dz-cline--social .dz-social a:hover { background: var(--dz-grad-amber); transform: translateY(-3px); } /* Map card */ .dz-map-card { border-radius: var(--dz-r-lg); overflow: hidden; box-shadow: var(--dz-shadow); border: 1px solid var(--dz-line); height: 100%; min-height: 340px; } .dz-map-card iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; } /* Compact horizontal info-rail (replaces the 6-card grid) */ .dz-quick-rail { display: flex; flex-wrap: wrap; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); overflow: hidden; } .dz-quick-item { flex: 1 1 260px; display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-right: 1px solid var(--dz-line); border-bottom: 1px solid var(--dz-line); transition: background .25s ease; } .dz-quick-item:hover { background: var(--dz-grad-soft); } .dz-quick-item__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--dz-grad); box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.6); } .dz-quick-item__icon i { font-size: 19px; color: #fff; } .dz-quick-item__body h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: var(--dz-heading); } .dz-quick-item__body .textcontact { font-size: 12.5px; line-height: 1.6; color: var(--dz-body); word-break: break-word; } .dz-quick-item__body .textcontact a { color: var(--dz-indigo-700); } .dz-quick-item__body .textcontact a:hover { color: var(--dz-fuchsia); } /* Media (video / image) + form cards */ .dz-media-card, .dz-form-card { width: 100%; background: var(--dz-card); border: 1px solid var(--dz-line); border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); overflow: hidden; } .dz-media-card { display: flex; align-items: stretch; min-height: 220px; } .dz-media-card iframe, .dz-media-card img { width: 100% !important; height: 100% !important; min-height: 220px; object-fit: cover; display: block; border: 0; } .dz-form-card { padding: 24px; } /* Bootstrap form controls used across the site */ .form-control { border-radius: 12px; border: 1px solid var(--dz-line); padding: 12px 16px; font-size: 14px; color: var(--dz-heading); box-shadow: none; transition: border-color .25s ease, box-shadow .25s ease; } .form-control:focus { border-color: var(--dz-violet); box-shadow: var(--dz-ring); outline: 0; } .contact .php-email-form { border-radius: var(--dz-r); box-shadow: var(--dz-shadow-sm); } /*-------------------------------------------------------------- # Buttons (Bootstrap success / outline / warning, + sizes) --------------------------------------------------------------*/ .btn { border-radius: 99px; font-weight: 700; letter-spacing: .01em; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease; } .btn-success { background: var(--dz-grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 14px 30px -14px rgba(79, 70, 229, 0.75); } .btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--dz-grad) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(124, 58, 237, 0.85); } .btn-outline-success { background: transparent !important; border: 2px solid var(--dz-violet) !important; color: var(--dz-indigo-700) !important; } .btn-outline-success:hover, .btn-outline-success:focus { background: var(--dz-grad) !important; border-color: transparent !important; color: #fff !important; } .btn-warning { background: var(--dz-grad-amber) !important; border: 0 !important; color: #fff !important; } .btn-warning:hover { color: #fff !important; transform: translateY(-2px); } .btn-xs { padding: 5px 14px; font-size: 12px; } /*-------------------------------------------------------------- # Accordions on Courses / Exams timeline (recolour legacy cyan) --------------------------------------------------------------*/ .accordion-item { background-color: transparent !important; background-image: var(--dz-grad) !important; border: 0 !important; border-radius: var(--dz-r) !important; overflow: hidden; box-shadow: var(--dz-shadow-sm); } .accordion-item .accordion-title.active-title { background-color: rgba(11, 16, 32, 0.18) !important; background-image: linear-gradient(135deg, var(--dz-indigo-900), var(--dz-violet)) !important; } .accordion-item .accordion-title i.fa-chevron-down.chevron-top { color: var(--dz-amber) !important; } .accordion-item .accordion-content { border-radius: 0 0 var(--dz-r) var(--dz-r); } /*-------------------------------------------------------------- # News cards (_GetNews — recolour legacy green) --------------------------------------------------------------*/ .media.blog-media .media-body { border-radius: 0 var(--dz-r) var(--dz-r) 0; border-color: var(--dz-line) !important; } .media.blog-media > a img { border-radius: var(--dz-r) 0 0 var(--dz-r); } .media.blog-media > a:before { background: rgba(124, 58, 237, 0.6) !important; } .media.blog-media .circle { background: var(--dz-grad) !important; box-shadow: var(--dz-shadow); } .media.blog-media:hover .media-body h5, .media.blog-media:hover .media-body a.post-link { color: var(--dz-fuchsia) !important; } .media.blog-media .media-body h5 { font-family: var(--dz-display); font-weight: 800; color: var(--dz-heading); } .media.blog-media .media-body a.post-link { color: var(--dz-indigo-700); font-weight: 700; } /*-------------------------------------------------------------- # BookStoreCollection inline header (recolour to brand) --------------------------------------------------------------*/ .container > header { border-radius: var(--dz-r-lg) !important; background-image: var(--dz-grad) !important; box-shadow: var(--dz-shadow) !important; } /*-------------------------------------------------------------- # Footer — vivid gradient SaaS footer w/ flowing wave background (matches templatemo_570_chain_app_dev's live footer: centred newsletter CTA band above the link columns, layered wave-shaped background instead of a flat gradient, outline pill button.) Base gradient/glows kept in the brand palette rather than the reference's blue, for site-wide colour consistency. --------------------------------------------------------------*/ #footer { position: relative; color: #d6d9f0; background-color: #241551; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M-20,150 C 220,70 420,210 660,120 C 900,30 1100,170 1460,90' fill='none' stroke='%2306b6d4' stroke-width='2' opacity='0.32'/%3E%3Cpath d='M-20,230 C 260,310 480,170 740,230 C 1000,290 1200,190 1460,250' fill='none' stroke='%23ec4899' stroke-width='2' opacity='0.22'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='0.07' d='M0,130 C 240,50 480,190 720,120 C 960,50 1200,160 1440,100 L1440,0 L0,0 Z'/%3E%3Cpath fill='white' fill-opacity='0.05' d='M0,210 C 260,150 500,270 760,200 C 1020,130 1260,230 1440,180 L1440,0 L0,0 Z'/%3E%3C/svg%3E"), radial-gradient(820px 440px at 8% -5%, rgba(124, 58, 237, 0.55), transparent 55%), radial-gradient(760px 440px at 100% 8%, rgba(217, 38, 170, 0.32), transparent 55%), linear-gradient(160deg, #201a5e 0%, #3a1d82 42%, #57206d 78%, #241551 100%); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: top, top, 8% -5%, 100% 8%, center; background-size: 100% 55%, 100% 68%, auto, auto, cover; } #footer .footer-top { position: relative; background: transparent; background-color: transparent; padding: 78px 0 46px; } /* Centred newsletter CTA band, sitting above the link columns */ .dz-footer-newsletter { position: relative; z-index: 1; max-width: 680px; margin: 0 auto 60px; text-align: center; } .dz-footer-newsletter h4 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; padding-bottom: 0; } #footer .dz-footer-newsletter h4::after { display: none; } .dz-footer-newsletter p { color: #cfd2f0; font-size: 15px; margin-bottom: 24px; } .dz-footer-newsletter__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .dz-footer-newsletter__row .g-recaptcha { flex: 0 0 auto; } .dz-footer-newsletter__row .form-control { flex: 1 1 240px; max-width: 300px; margin: 0; } .dz-footer-newsletter__row .btn { flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 12px 30px; white-space: nowrap; } .dz-footer-share { display: flex; justify-content: center; margin-top: 20px; } .dz-footer-cols { position: relative; z-index: 1; } #footer .footer-info h3 { font-family: var(--dz-display); font-weight: 800; font-size: 24px; color: #fff; margin-bottom: 18px; } #footer .footer-top .footer-info p { color: #c4c7ea; line-height: 1.9; } #footer .footer-top .footer-info p strong { color: #fff; } #footer .footer-top h4 { color: #fff; font-family: var(--dz-display); font-weight: 800; font-size: 17px; position: relative; padding-bottom: 14px; } #footer .footer-top h4::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 42px; height: 3px; border-radius: 99px; background: var(--dz-grad-amber); } /* Override OuterSiteStyle's blue !important footer text */ .footer-newsletter, .footer-links, .footer-info { color: #d6d9f0 !important; } #footer .footer-top .footer-links ul i { color: var(--dz-amber); } #footer .footer-top .footer-links ul a { color: #c4c7ea; } #footer .footer-top .footer-links ul a:hover { color: #fff; } #footer .footer-top .footer-links ul li { transition: transform .2s ease; } #footer .footer-top .footer-links ul li:hover { transform: translateX(5px); } /* Newsletter: pill white input + solid amber send button that pops on purple */ #footer .footer-top .form-control { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; color: var(--dz-heading); } #footer .footer-top .form-control::placeholder { color: #7a7f9c; } #footer .btn-outline-success { background: transparent !important; border: 2px solid rgba(255, 255, 255, 0.6) !important; color: #fff !important; box-shadow: none; } #footer .btn-outline-success:hover, #footer .btn-outline-success:focus { background: var(--dz-grad-amber) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(245, 158, 11, 0.7); } /* Full-width darkened copyright strip (the copyright text is wrapped in a max-width .container, so widen that wrapper and re-centre the text inside) */ #footer > .container { max-width: 100%; padding-left: 0; padding-right: 0; background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.10); } #footer .copyright { max-width: 1200px; margin: 0 auto; padding: 18px 15px; color: #c4c7ea; letter-spacing: .02em; } #footer .copyright a { color: var(--dz-amber); font-weight: 700; } /*-------------------------------------------------------------- # Info pop-up (#popUp / #plus) + dark backdrop Bold treatment: animated gradient ring border, glowing badge with a shine sweep, price rows as staggered chip cards with colour-coded dots, and a gentle idle levitation. --------------------------------------------------------------*/ #popUp { height: auto; min-height: 185px; /* card fill (padding-box) under an animated gradient ring (border-box) */ border: 2px solid transparent; background: linear-gradient(165deg, #ffffff 0%, #f6f3ff 100%) padding-box, linear-gradient(120deg, #4f46e5, #7c3aed, #d926aa, #f59e0b, #4f46e5) border-box; background-size: 100% 100%, 320% 320%; border-radius: 0 var(--dz-r-lg) var(--dz-r-lg) 0; box-shadow: var(--dz-shadow-lg); overflow: hidden; padding-bottom: 18px; transition: margin-left .6s cubic-bezier(.22, .8, .2, 1) !important; animation: dzPopupIn .8s cubic-bezier(.34, 1.56, .64, 1) .5s both, dzPopupRing 7s linear 1.4s infinite, dzPopupFloat 5.5s ease-in-out 1.6s infinite; } /* Ambient glow blob in the top-right corner */ #popUp::after { content: ""; position: absolute; top: -46px; right: -46px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, 0.16), transparent 70%); pointer-events: none; } @keyframes dzPopupIn { 0% { opacity: 0; transform: translateX(-48px) scale(.96); } 60% { opacity: 1; transform: translateX(8px) scale(1.01); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes dzPopupRing { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } } @keyframes dzPopupFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } #popUp .close { top: 10px; right: 10px; z-index: 1; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dz-bg-2); transition: background .25s ease, transform .35s ease; } #popUp .close:hover { background: var(--dz-grad); transform: rotate(90deg); } #popUp .close:hover .timesClose { color: #fff !important; } #new { padding: 16px 20px 0; } #new span { position: relative; display: inline-block; background: var(--dz-grad) !important; padding: 7px 20px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(124, 58, 237, .7); animation: dzBadgePulse 2.6s ease-in-out infinite; } /* Shine sweeping across the badge */ #new span::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: dzBadgeShine 3.2s ease-in-out 1.2s infinite; } @keyframes dzBadgeShine { 0% { left: -60%; } 45%, 100% { left: 130%; } } @keyframes dzBadgePulse { 0%, 100% { box-shadow: 0 10px 22px -10px rgba(124, 58, 237, .7); transform: scale(1); } 50% { box-shadow: 0 14px 30px -8px rgba(217, 38, 170, .85); transform: scale(1.05); } } #popUp h2 { padding: 0 18px; margin-top: 14px; } /* The
separators are redundant once each offer is its own chip */ #popUp h2 p br { display: none; } .timesClose, .textColor { color: var(--dz-indigo-700) !important; } #popUp .textColor { display: inline-block; font-family: var(--dz-display); font-size: 17px; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; background: var(--dz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; } /* Offer rows as bold chip cards, sliding in one after another (fill-mode backwards so hover transforms work after the run) */ #popUp h2 b { position: relative; display: block; margin: 7px 0; padding: 9px 14px 9px 30px; font-size: 13.5px; font-weight: 700; color: var(--dz-heading); background: #fff; border: 1px solid var(--dz-line); border-radius: 12px; box-shadow: var(--dz-shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; animation: dzRowIn .55s cubic-bezier(.2, .8, .2, 1) backwards; } #popUp h2 b:hover { transform: translateX(5px); border-color: rgba(124, 58, 237, 0.4); box-shadow: var(--dz-shadow); } #popUp h2 b::before { content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--dz-grad-amber); } #popUp h2 b:nth-of-type(1) { animation-delay: .85s; } #popUp h2 b:nth-of-type(2) { animation-delay: .97s; } #popUp h2 b:nth-of-type(3) { animation-delay: 1.09s; } #popUp h2 b:nth-of-type(4) { animation-delay: 1.21s; } #popUp h2 b:nth-of-type(5) { animation-delay: 1.33s; } /* Colour-coded level dots walking down the brand gradient */ #popUp h2 b:nth-of-type(1)::before { background: var(--dz-indigo); } #popUp h2 b:nth-of-type(2)::before { background: var(--dz-violet); } #popUp h2 b:nth-of-type(3)::before { background: var(--dz-fuchsia); } #popUp h2 b:nth-of-type(4)::before { background: var(--dz-pink); } #popUp h2 b:nth-of-type(5)::before { background: var(--dz-amber); } @keyframes dzRowIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } #plus { width: 64px; text-align: center; background: var(--dz-grad); border-radius: 0 18px 18px 0; box-shadow: var(--dz-shadow-lg); padding: 16px 8px; transition: margin-left .6s cubic-bezier(.22, .8, .2, 1) !important, transform .3s ease; animation: dzPlusPulse 2.8s ease-in-out infinite; } #plus:hover { transform: translateX(4px); } #plus::after { display: none; } #plus span { position: static; display: block; margin: 0; font-size: 11px; letter-spacing: .05em; } #plus span i { display: block; margin-top: 6px; font-size: 16px; } @keyframes dzPlusPulse { 0%, 100% { box-shadow: var(--dz-shadow-lg); } 50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, .16), var(--dz-shadow-lg); } } /*-------------------------------------------------------------- # Preloader + back-to-top --------------------------------------------------------------*/ #preloader:before { border-color: rgba(124, 58, 237, 0.18); border-top-color: var(--dz-violet); } .back-to-top i { background: var(--dz-grad); border-radius: 50%; box-shadow: var(--dz-shadow); } .back-to-top i:hover { background: #fff; color: var(--dz-indigo-700); border: 0; } /*-------------------------------------------------------------- # Scroll-reveal helpers (used only when AOS isn't active) --------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /*-------------------------------------------------------------- # Responsive polish --------------------------------------------------------------*/ @media (max-width: 768px) { section { padding: 54px 0; } .seven h1 { font-size: clamp(22px, 7vw, 32px); white-space: normal; } .cta { border-radius: var(--dz-r); margin: 12px; } .CountMain { margin-left: 56px !important; font-size: 38px !important; } } /*============================================================== # Dark / Light theme Toggle button (injected by _Layout) + a full dark palette that flips the design-token variables plus the handful of surfaces that carry hard-coded light colours. ==============================================================*/ .dz-theme-toggle { position: fixed; right: 6px; bottom: 150px; z-index: 99999; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--dz-line); border-radius: 50%; background: var(--dz-card); color: var(--dz-heading); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--dz-shadow); transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background .3s ease; } .dz-theme-toggle:hover { transform: translateY(-3px) rotate(-12deg); box-shadow: var(--dz-shadow-lg); color: var(--dz-violet); } .dz-theme-toggle i { pointer-events: none; } /* ---- Dark palette : redefine the tokens so every var()-based rule flips ---- */ html[data-dz-theme="dark"] { color-scheme: dark; --dz-heading: #eef1fb; --dz-body: #c3c9e6; --dz-muted: #9298bd; --dz-line: rgba(255, 255, 255, 0.10); --dz-bg: #0a0d1c; --dz-bg-2: #10142e; --dz-card: #151935; --dz-grad-soft: linear-gradient(135deg, #221a52 0%, #2c1b57 50%, #3a1942 100%); --dz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --dz-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.72), 0 6px 16px -10px rgba(0, 0, 0, 0.55); --dz-shadow-lg: 0 36px 80px -28px rgba(0, 0, 0, 0.85); } html[data-dz-theme="dark"] body { background-color: var(--dz-bg); color: var(--dz-body); background-image: radial-gradient(1100px 520px at 100% -5%, rgba(124, 58, 237, 0.20), transparent 60%), radial-gradient(900px 480px at -10% 8%, rgba(79, 70, 229, 0.18), transparent 55%); } /* Header / navigation */ html[data-dz-theme="dark"] #header { background: rgba(13, 16, 34, 0.72); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px -18px rgba(0, 0, 0, 0.7); } html[data-dz-theme="dark"] #header.header-scrolled { background: rgba(13, 16, 34, 0.92); } /* The dock is already dark — just lift it off the dark header a bit */ html[data-dz-theme="dark"] .nav-menu > ul, html[data-dz-theme="dark"] #header .logo { background: #05070f; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } html[data-dz-theme="dark"] .nav-menu a { color: rgba(255, 255, 255, 0.75); } html[data-dz-theme="dark"] .nav-menu a:hover, html[data-dz-theme="dark"] .nav-menu .active > a, html[data-dz-theme="dark"] .nav-menu li:hover > a { color: #fff; background: var(--dz-grad); } html[data-dz-theme="dark"] .nav-menu .drop-down ul { background: rgba(21, 25, 53, 0.98); border-color: var(--dz-line); } html[data-dz-theme="dark"] .nav-menu .drop-down ul a { color: #c9cef0; } html[data-dz-theme="dark"] .nav-menu .drop-down ul a:hover { color: #fff; } html[data-dz-theme="dark"] .mobile-nav { background: #11142e; } html[data-dz-theme="dark"] .mobile-nav a { color: #c9cef0; } /* Forms */ html[data-dz-theme="dark"] .form-control { background: var(--dz-bg-2); color: var(--dz-heading); border-color: var(--dz-line); } html[data-dz-theme="dark"] .form-control::placeholder { color: var(--dz-muted); } /* Pricing chips need light text once the soft chip goes dark */ html[data-dz-theme="dark"] .pricing h3, html[data-dz-theme="dark"] .box h3 { color: var(--dz-heading); } /* Outline button + partner social chips: lift contrast on dark */ html[data-dz-theme="dark"] .btn-outline-success { color: #c7d2fe !important; } html[data-dz-theme="dark"] .team .member .social a { background: var(--dz-bg-2); color: #a5b4fc; } /* Accordion content panel */ html[data-dz-theme="dark"] .accordion-item .accordion-content { background: var(--dz-card); color: var(--dz-body); } /* News cards */ html[data-dz-theme="dark"] .media.blog-media .media-body { background: var(--dz-card); border-color: var(--dz-line); color: var(--dz-body); } /* Info pop-up — swap the card fill under the gradient ring */ html[data-dz-theme="dark"] #popUp { background: linear-gradient(165deg, #151935 0%, #1a1440 100%) padding-box, linear-gradient(120deg, #4f46e5, #7c3aed, #d926aa, #f59e0b, #4f46e5) border-box; background-size: 100% 100%, 320% 320%; } html[data-dz-theme="dark"] #popUp h2 { color: var(--dz-heading); } html[data-dz-theme="dark"] #popUp h2 b { background: var(--dz-bg-2); border-color: var(--dz-line); color: var(--dz-heading); } /* Preloader */ html[data-dz-theme="dark"] #preloader { background: var(--dz-bg); } /* BookStoreCollection (inline-styled page) */ html[data-dz-theme="dark"] .controls, html[data-dz-theme="dark"] .book-card { background: var(--dz-card); } html[data-dz-theme="dark"] .book-cover { background: var(--dz-bg-2); } html[data-dz-theme="dark"] .book-title { color: var(--dz-heading); } html[data-dz-theme="dark"] .filter-options select, html[data-dz-theme="dark"] .search-box input { background: var(--dz-bg-2); color: var(--dz-heading); border-color: var(--dz-line); } /*================================================== SweetAlert2 announcement modal (dz-swal skin) ==================================================*/ .swal2-container.dz-swal-backdrop { background: rgba(11, 16, 32, 0.55) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dz-swal.swal2-popup { background: var(--dz-card); border-radius: var(--dz-r-lg); box-shadow: var(--dz-shadow-lg); overflow: hidden; padding: 0 0 26px; } /* Full-bleed image on top of the card */ .dz-swal .swal2-header { padding: 0; } .dz-swal .swal2-image { display: block; width: 100%; height: auto; margin: 0 0 18px; border-radius: 0; } /* Floating circular close button over the image */ .dz-swal .swal2-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--dz-indigo-900); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--dz-shadow-sm); backdrop-filter: blur(4px); transition: transform .18s ease, background .18s ease, color .18s ease; } .dz-swal .swal2-close:hover { background: var(--dz-grad); color: #fff; transform: rotate(90deg); } .dz-swal .swal2-close:focus { box-shadow: var(--dz-ring); outline: none; } .dz-swal .swal2-title { font-family: var(--dz-display); font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; color: var(--dz-heading); padding: 0 26px; margin: 0 0 4px; } /* Amber accent underline below the title */ .dz-swal .swal2-title::after { content: ""; display: block; width: 54px; height: 4px; margin: 12px auto 0; border-radius: 99px; background: var(--dz-grad-amber); } .dz-swal .swal2-actions { margin-top: 18px; } .dz-swal .swal2-cancel.swal2-styled { background: var(--dz-grad); border: 0; border-radius: 99px; padding: 10px 34px; font-family: var(--dz-display); font-weight: 700; font-size: .95rem; box-shadow: 0 12px 26px -14px rgba(79, 70, 229, 0.6); transition: transform .18s ease, box-shadow .18s ease; } .dz-swal .swal2-cancel.swal2-styled:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(79, 70, 229, 0.75); } .dz-swal .swal2-cancel.swal2-styled:focus { box-shadow: var(--dz-ring); } .dz-swal .swal2-timer-progress-bar { background: var(--dz-grad); height: 4px; border-radius: 99px 99px 0 0; } .dz-swal .swal2-footer { border-top: 1px solid var(--dz-line); margin: 20px 26px 0; padding: 14px 0 0; font-size: .85rem; color: var(--dz-muted); } .dz-swal .swal2-footer a { color: var(--dz-violet); font-weight: 600; } html[data-dz-theme="dark"] .dz-swal .swal2-close { background: rgba(21, 25, 53, 0.85); color: var(--dz-heading); }