/* ============================================================================= exam-plate.css — Reusable Exam Identity Plate component ---- Used wherever an exam needs to be visually represented: - Category list (exams_category.html) - Exam description page (exam_description.html) - Search results (exam_search_advanced_page.html) - Course info page (linked exams) - Future: profile, dashboard, recommendations, etc. Composition: ┌───────────────────────────────┐ │ [domain-icon] [Brand] │ ← top corners │ │ │ CGRC │ ← exam code (gradient) │ ───────── │ ← gold accent line │ Domain Name │ ← optional sub-label └───────────────────────────────┘ The component reads its theme from `[data-theme="light"]` on and adapts automatically without any markup change. USAGE in template: {% include "partials/_exam_plate.html" with exam=e category=category %} The plate is wrapped by the consumer (anchor, article, link) — this CSS does not assume a specific parent. ========================================================================== */ /* ============================================================================= 1. CONTAINER ========================================================================== */ .exam-plate { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%); overflow: hidden; isolation: isolate; width: 100%; display: block; transition: background var(--t) ease; } /* Subtle diagonal pattern texture */ .exam-plate::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 194, 24, .04) 0, rgba(255, 194, 24, .04) 1px, transparent 1px, transparent 14px); pointer-events: none; z-index: 1; } /* Gold accent line at the bottom edge */ .exam-plate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255, 194, 24, 0) 0%, rgba(255, 194, 24, .55) 30%, rgba(255, 194, 24, .85) 50%, rgba(255, 194, 24, .55) 70%, rgba(255, 194, 24, 0) 100%); z-index: 3; opacity: .9; transition: opacity var(--t-fast) ease, height var(--t-fast) ease; } /* Hover: amplify the gold accent (when wrapped by an anchor) */ a:hover > .exam-plate::after, .exam-plate:hover::after { opacity: 1; height: 3px; } /* ============================================================================= 2. BRAND CORNER (top-right in RTL = visually top-left) ---- Whether (PNG) or text, both render inside a unified gold-bordered "frame box" so the visual identity stays consistent across the site. ========================================================================== */ .exam-plate__brand { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; line-height: 1; max-width: 45%; } /* Unified frame for both image and text — gives every brand a consistent "credential plate" look regardless of whether a PNG was uploaded. */ .exam-plate__brand-frame { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; min-height: 28px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 194, 24, .22); border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .exam-plate__brand-logo { height: 18px; width: auto; max-width: 100%; object-fit: contain; /* Light tint reduction so all logos sit nicely on the dark plate */ filter: brightness(1.08) saturate(.95); } .exam-plate__brand-text { font-family: 'Inter', system-ui, sans-serif; color: var(--gold-300); font-weight: 800; font-size: .8rem; letter-spacing: .04em; direction: ltr; white-space: nowrap; } /* ============================================================================= 3. DOMAIN ICON CORNER (top-left in RTL = visually top-right) ========================================================================== */ .exam-plate__domain { position: absolute; top: 14px; left: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 194, 24, .12); border: 1px solid rgba(255, 194, 24, .35); display: grid; place-items: center; color: var(--gold-300); font-size: .95rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform var(--t-fast) ease; } a:hover > .exam-plate .exam-plate__domain, .exam-plate:hover .exam-plate__domain { transform: scale(1.06); } /* ============================================================================= 4. CENTER — exam code + domain label ========================================================================== */ .exam-plate__center { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; /* Enough top padding to clear the corner badges (brand + domain icon) even when the exam name wraps to two lines. */ padding: 13px 18px 18px; pointer-events: none; } .exam-plate__center-inner { /* the inner div helps grid place a multi-line block correctly */ max-width: 100%; } .exam-plate__code { font-family: 'Inter', system-ui, sans-serif; /* Lower minimum so long names like "CCST Cybersecurity" still fit */ font-size: clamp(1.2rem, 4.5vw, 1.3rem); font-weight: 900; background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: .015em; line-height: 1.2; margin: 0; direction: ltr; /* Allow wrapping at spaces; break unusually long words if needed */ white-space: normal; word-break: normal; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .exam-plate__label { margin-top: 10px; font-size: .68rem; color: var(--gold-300); opacity: .82; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; direction: ltr; } /* ============================================================================= 5. SIZE VARIANTS ---- Default size targets card use (exams_category, search results). Use modifier classes for hero placement (exam description page). ========================================================================== */ /* Hero variant — bigger code, more breathing room. Used in exam_description.html as the centerpiece of the page header. */ .exam-plate--hero { aspect-ratio: 4 / 3; border-radius: var(--r-lg); } .exam-plate--hero .exam-plate__code { font-size: clamp(1.6rem, 6vw, 3.6rem); } .exam-plate--hero .exam-plate__label { font-size: .78rem; margin-top: 14px; } .exam-plate--hero .exam-plate__brand { top: 20px; right: 20px; } .exam-plate--hero .exam-plate__domain { top: 20px; left: 20px; width: 44px; height: 44px; font-size: 1.15rem; border-radius: 12px; } .exam-plate--hero .exam-plate__brand-frame { padding: 7px 14px; min-height: 36px; } .exam-plate--hero .exam-plate__brand-logo { height: 24px; } .exam-plate--hero .exam-plate__brand-text { font-size: .92rem; } /* Compact variant — for list items or sidebar widgets */ .exam-plate--compact { aspect-ratio: 2 / 1; } .exam-plate--compact .exam-plate__code { font-size: clamp(1rem, 3vw, 1.8rem); } .exam-plate--compact .exam-plate__label { font-size: .6rem; margin-top: 6px; } .exam-plate--compact .exam-plate__brand { top: 10px; right: 10px; } .exam-plate--compact .exam-plate__domain { top: 10px; left: 10px; width: 28px; height: 28px; font-size: .82rem; border-radius: 8px; } .exam-plate--compact .exam-plate__brand-frame { padding: 3px 7px; min-height: 22px; } .exam-plate--compact .exam-plate__brand-logo { height: 14px; } .exam-plate--compact .exam-plate__brand-text { font-size: .68rem; } /* ============================================================================= 6. DOMAIN COLOR ACCENTS (optional) ---- Each domain gets a subtle accent that hints at its category without breaking the unified gold-on-navy palette. This adds visual variety when several plates appear together. ========================================================================== */ /* Cybersecurity / Security — keep default (gold) */ /* Cloud — subtle blue tint on the icon */ .exam-plate[data-domain="cloud"] .exam-plate__domain { background: rgba(91, 103, 166, .22); border-color: rgba(138, 150, 209, .42); color: var(--gold-300); } /* Network — purple-blue tint */ .exam-plate[data-domain="network"] .exam-plate__domain { background: rgba(91, 103, 166, .22); border-color: rgba(138, 150, 209, .42); } /* Audit / Governance — keep default gold (most appropriate) */ /* AI/ML — slight purple shift */ .exam-plate[data-domain="ai_ml"] .exam-plate__domain { background: rgba(143, 119, 221, .18); border-color: rgba(143, 119, 221, .38); } /* ============================================================================= 7. LIGHT THEME OVERRIDES ========================================================================== */ [data-theme="light"] .exam-plate { background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%); } [data-theme="light"] .exam-plate::before { background: repeating-linear-gradient(45deg, rgba(28, 36, 71, .04) 0, rgba(28, 36, 71, .04) 1px, transparent 1px, transparent 14px); } [data-theme="light"] .exam-plate::after { background: linear-gradient(90deg, rgba(200, 149, 0, 0) 0%, rgba(200, 149, 0, .55) 30%, rgba(200, 149, 0, .85) 50%, rgba(200, 149, 0, .55) 70%, rgba(200, 149, 0, 0) 100%); } [data-theme="light"] .exam-plate__brand-frame { background: rgba(28, 36, 71, .04); border-color: rgba(200, 149, 0, .32); } [data-theme="light"] .exam-plate__brand-logo { filter: none; } [data-theme="light"] .exam-plate__brand-text { color: var(--navy-900); } [data-theme="light"] .exam-plate__domain { background: rgba(255, 194, 24, .14); border-color: rgba(200, 149, 0, .35); color: var(--gold-700); } [data-theme="light"] .exam-plate__code { background: linear-gradient(135deg, #1c2447 0%, #363b53 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } [data-theme="light"] .exam-plate__label { color: var(--gold-700); } /* Light-theme domain accents */ [data-theme="light"] .exam-plate[data-domain="cloud"] .exam-plate__domain, [data-theme="light"] .exam-plate[data-domain="network"] .exam-plate__domain { background: rgba(54, 71, 130, .10); border-color: rgba(54, 71, 130, .32); color: var(--gold-700); } [data-theme="light"] .exam-plate[data-domain="ai_ml"] .exam-plate__domain { background: rgba(143, 119, 221, .12); border-color: rgba(143, 119, 221, .42); color: var(--gold-700); } /* ============================================================================= 8. ACCESSIBILITY ========================================================================== */ @media (prefers-reduced-motion: reduce) { .exam-plate, .exam-plate::after, .exam-plate__domain { transition: none; } } /* ============================================================================= 9. CONTEXTUAL: inside `.hero__visual` (exam description page) ---- On the exam description page, the plate sits at the center of an orbital visual composition (animated rings + bubbles around it). Match the original badge-card layout: square card, slightly tilted, absolutely centered. ========================================================================== */ .hero__visual .exam-plate, .hero__visual .exam-plate--hero { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); width: min(300px, 80%); aspect-ratio: 1.05 / 1; border-radius: var(--r-xl); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 60px rgba(255, 194, 24, .10); z-index: 2; transition: transform var(--t) ease; } .hero__visual .exam-plate:hover, .hero__visual .exam-plate--hero:hover { transform: translate(-50%, -50%) rotate(-2deg) scale(1.02); } /* Adjusted typography for the smaller, square shape */ .hero__visual .exam-plate .exam-plate__code { font-size: clamp(1.2rem, 3.5vw, 2.4rem); } .hero__visual .exam-plate .exam-plate__label { font-size: .62rem; margin-top: 8px; } /* Adjusted corners for the smaller shape */ .hero__visual .exam-plate .exam-plate__brand { top: 12px; right: 12px; } .hero__visual .exam-plate .exam-plate__brand-frame { padding: 4px 9px; min-height: 24px; } .hero__visual .exam-plate .exam-plate__brand-text { font-size: .68rem; } .hero__visual .exam-plate .exam-plate__brand-logo { height: 16px; } .hero__visual .exam-plate .exam-plate__domain { top: 12px; left: 12px; width: 32px; height: 32px; font-size: .85rem; border-radius: 9px; } /* Light theme: softer shadow */ [data-theme="light"] .hero__visual .exam-plate, [data-theme="light"] .hero__visual .exam-plate--hero { box-shadow: 0 30px 70px rgba(28, 36, 71, .25), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 60px rgba(255, 194, 24, .08); } [data-theme="light"] .xr-adv-sort button {color:#000 !important;} [data-theme="light"] .xr-adv-filterbar select {color:#000 !important;} /* ============================================================================= 10. RESPONSIVE — mobile aspect ratio adjustment ---- On small screens, the default 16:10 ratio makes plates too tall (since they take full container width). Use a wider, shorter ratio for card layouts. The --hero variant keeps its own aspect-ratio (re-applied below) and the `.hero__visual .exam-plate` context override is unaffected (its rule already sets aspect-ratio: 1.05/1 explicitly with a more specific selector). ========================================================================== */ @media (max-width: 640px) { .exam-plate { aspect-ratio: 2 / 1; } /* Keep the hero variant proportions on mobile too */ .exam-plate--hero { aspect-ratio: 4 / 3; } /* Smaller code on mobile to keep long names readable */ .exam-plate__code { font-size: clamp(1.1rem, 6vw, 2.2rem); } .exam-plate--hero .exam-plate__code { font-size: clamp(1.4rem, 8vw, 3rem); } /* Slightly tighter padding on mobile */ .exam-plate__center { padding: 14px 14px 16px; } } /* Very narrow screens — extra defensive sizing */ @media (max-width: 380px) { .exam-plate__code { font-size: clamp(.95rem, 5.5vw, 1.6rem); } .exam-plate__center { padding: 46px 12px 14px; } } /* ============================================================ Finance page — Exam Plate forced light theme ============================================================ */ .buy-page-wrap { --navy-800: #273153; --navy-900: #1c2447; --gold-300: #ffd35a; --gold-500: #ffc218; --gold-700: #c89500; --t: .25s; --t-fast: .18s; --r-lg: 18px; } /* قاب پلاک داخل کارت خرید */ .buy-page-wrap .finance-exam-plate-wrap { width: 100%; border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: #ffffff; border: 1px solid #eef0f6; box-shadow: 0 10px 24px rgba(15, 23, 42, .06); } /* تم روشن اجباری، مستقل از dark/light پنل */ .buy-page-wrap .exam-plate, .buy-page-wrap .exam-plate.exam-plate--finance { background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important; border-radius: 16px; aspect-ratio: 16 / 9; } .buy-page-wrap .exam-plate__center {padding: 35px 18px 9px;border: 0 !important;} .buy-page-wrap .exam-plate::after { background: linear-gradient( 90deg, rgba(200, 149, 0, 0) 0%, rgba(200, 149, 0, .55) 30%, rgba(200, 149, 0, .85) 50%, rgba(200, 149, 0, .55) 70%, rgba(200, 149, 0, 0) 100% ) !important; } /* برند/نام دسته */ .buy-page-wrap .exam-plate__brand-frame { background: rgba(28, 36, 71, .04) !important; border-color: rgba(200, 149, 0, .32) !important; } .buy-page-wrap .exam-plate__brand-logo { filter: none !important; } .buy-page-wrap .exam-plate__brand-text { color: #1c2447 !important; } /* آیکون حوزه */ .buy-page-wrap .exam-plate__domain { background: rgba(255, 194, 24, .14) !important; border-color: rgba(200, 149, 0, .35) !important; color: #c89500 !important; } /* کد آزمون */ .buy-page-wrap .exam-plate__code { background: linear-gradient(135deg, #1c2447 0%, #363b53 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-size: clamp(1.25rem, 4vw, 1rem); } /* زیرنویس پلاک */ .buy-page-wrap .exam-plate__label { color: #c89500 !important; } /* دیگر کارت آزمون نباید عکس قبلی را نمایش بدهد */ .buy-page-wrap .sub-item > img { display: none !important; } /* هماهنگ‌سازی کارت خرید با پلاک جدید */ .buy-page-wrap .sub-item { background: #ffffff !important; border: 1px solid #edf0f7 !important; border-radius: 18px !important; padding: 14px 14px 20px !important; } .buy-page-wrap .sub-item:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(15, 23, 42, .12); } .buy-page-wrap .sub-item h4 { height: auto; min-height: 46px; margin-top: 10px; color: #5f6785; } .buy-page-wrap .sub-item small { margin-bottom: 16px; }