/** * ev-global.css * * Global stylesheet for ExamVillage. * Pure design system — framework-agnostic, CMS-agnostic. * * Contents * Fonts · Design tokens · Reset · Scrollbar · Focus · Layout · Pills · Buttons · * Cards · Eyebrow · Animations · Legacy header · Section shell · Sidebar widgets · * Footer · Reduced motion · Shared primitives · Utilities · MCQ footer · * MCQ-card components (chip, icon button, info box, CTA, tones) · * Primary navigation · Taxonomy media · Breadcrumb (universal) * * Does NOT contain page-specific section spacing. * Homepage sections (.evh-*) → ev-homepage.css * MCQ page sections → ev-single-mcq.css * * Load order: * 1. ev-gp-override.css (WordPress/GeneratePress specific) * 2. ev-global.css ← this file * 3. ev-single-mcq.css (page-specific) * * Google Fonts * DM Sans : 400 500 600 700 * Open Sans : 400 500 600 700 800 ← 800 for hero / display headings * DM Mono : 400 500 * Noto Naskh Arabic : 400 500 600 ← Urdu / Arabic text * * @package ExamVillage\Core * @since 1.0.0 */ /* ══════════════════════════════════════════════════════════════════════════════ GOOGLE FONTS ══════════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Naskh+Arabic:wght@400;500;600&family=Open+Sans:wght@400;500;600;700;800&display=swap'); /* ══════════════════════════════════════════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════════════════════════════════════════ */ :root { /* Brand colours */ --teal: #00C2CB; --teal-dark: #009BAA; --teal-mid: #00ACB5; --teal-pale: #E6F9FA; --teal-tint: #B3ECF0; --teal-deep: #007A87; /* hover / pressed state of --teal-dark */ --navy: #0B1D3A; --navy-mid: #132747; --navy-light: #1E3A5F; --navy-pale: #EEF2FF; --amber: #F5A623; --amber-dark: #E8941A; --amber-light: #FFD166; --amber-pale: #FFFBEB; --green: #06D6A0; --green-dark: #059669; --green-pale: #ECFDF5; --green-tint: #A7F3D0; --green-deep: #047857; /* hover / pressed state of --green-dark */ --red: #EF476F; --red-pale: #FFF1F2; /* Neutrals */ --white: #FFFFFF; --off-white: #F4F7FC; --g50: #F8FAFC; --g100: #E2EAF4; --g200: #C8D4E8; --g300: #8E9DC4; --g500: #374B6C; --g700: #1E2C50; --text: #0B1D3A; --text-mid: #374B6C; --text-light: #6B82A4; --border: #E2EAF4; /* Radii */ --r: 14px; --r-sm: 10px; --r-xs: 8px; /* Shadows */ --sh-xs: 0 1px 4px rgba(11,29,58,.06); --sh: 0 4px 24px rgba(11,29,58,.08); --sh-md: 0 8px 28px rgba(11,29,58,.13); --sh-lg: 0 16px 48px rgba(11,29,58,.18); --sh-hover: 0 12px 40px rgba(11,29,58,.16); /* Motion */ --ease-bounce: cubic-bezier(.34,1.56,.64,1); --ease-smooth: cubic-bezier(.4,0,.2,1); --dur-fast: .18s; --dur-base: .26s; --dur-slow: .44s; /* Typography */ --font-body: 'DM Sans', sans-serif; --font-display: 'Open Sans', sans-serif; --font-mono: 'DM Mono', monospace; /* Extended brand tokens */ --saffron: #E8A020; --saffron-b: #F59E0B; --royal: #243A8A; --midnight: #0B1535; --rose: #E11D48; --rose-deep: #BE123C; /* hover / pressed state of --rose */ /* Readable text shades for tinted badges / pills */ --amber-text: #A06100; --green-text: #065F46; --red-text: #C73060; /* Canonical aliases for new shared components; legacy tokens stay supported. */ --ev-color-primary: var(--teal); --ev-color-primary-hover: var(--teal-dark); --ev-color-heading: var(--navy); --ev-color-text: var(--text); --ev-color-muted: var(--text-light); --ev-color-border: var(--border); --ev-color-surface: var(--white); --ev-color-page: var(--off-white); --ev-font-body: var(--font-body); --ev-font-heading: var(--font-display); --ev-container-max: var(--ev-page-max); --ev-radius-card: var(--r); --ev-shadow-card: var(--sh); /* Page geometry (single source of truth for width + gutters) */ --ev-page-max: 1200px; --ev-page-max-xl: 1200px; --ev-page-gutter: 24px; /* 18px ≤860 · 14px ≤600 — see Layout */ --ev-section-y: 44px; --ev-section-y-sm: 30px; --ev-focus-ring: 0 0 0 3px rgba(0,194,203,.18); --ev-card-border: 1px solid rgba(226,234,244,.9); /* MCQ-card component tokens — ink */ --ev-ink-deep: #061631; /* question text */ --ev-ink-soft: #3c4a60; /* body copy inside info boxes */ --ev-ink-muted: #6b7a90; /* card surface */ --ev-card-tint: #f3f8fd; /* faint blue wash at the top of a card */ --ev-card-line: #e1e9f3; --ev-card-shadow: 0 10px 30px rgba(11,29,58,.06), 0 1px 3px rgba(11,29,58,.04); --ev-line-soft: #d5dfef; /* option rows, inputs */ --ev-line-dotted: #d9e1ee; /* dotted section divider */ /* chips */ --ev-mint: #d5f2e1; --ev-mint-text: #12794a; --ev-chip-grey: #eef1f6; --ev-chip-grey-text: #3a475c; /* icon buttons */ --ev-ibtn-soft: #edf1f8; --ev-ibtn-blue: #e4edfa; --ev-ibtn-blue-2: #dee9fa; --ev-ibtn-line: #dfe7f3; --ev-ibtn-ink: #1f2f4f; --ev-ibtn-blue-ink: #1f55c4; /* info boxes */ --ev-info-blue: #f0f6fc; --ev-info-blue-line: #e1ebf8; --ev-info-blue-ico: #2557c7; --ev-info-cream: #fef7eb; --ev-info-cream-line: #f8ebd2; --ev-info-cream-ico: #8a4513; /* call-to-action buttons */ --ev-cta-green-1: #0d9d62; --ev-cta-green-2: #0b8f5b; --ev-cta-deep-1: #144353; --ev-cta-deep-2: #123f51; --ev-cta-soft: #f1f3f9; --ev-cta-soft-ink: #1b2b47; --ev-cta-disabled-ink:#a3acb8; /* Breadcrumb ribbon (see "Breadcrumb") */ --evb-bg: linear-gradient(90deg, var(--teal-deep), #008796 60%, var(--teal-deep)); --evb-text: #fff; --evb-link: rgba(255,255,255,.92); --evb-current: #fff; --evb-hover: #FFDD91; --evb-sep: #C8F5E9; --evb-size: 14px; --ev-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3Cpath d='M9 21v-8h6v8'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════════════════════ RESET ══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--off-white); color: var(--text); font-size: 16px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img, video { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; font-size: inherit; } /* h1 / h2 → Open Sans 800 for maximum hero impact */ h1, h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; } /* h3 stays 700 — prominent but one step below hero weight */ h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; } h4, h5, h6 { font-family: var(--font-body); line-height: 1.3; } /* ══════════════════════════════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--off-white); } ::-webkit-scrollbar-thumb { background: var(--g200); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--g300); } /* ══════════════════════════════════════════════════════════════════════════════ FOCUS One visible ring for every focusable element (keyboard only). ══════════════════════════════════════════════════════════════════════════════ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .ev-btn:focus-visible, .ev-search:focus-within { outline: 2px solid var(--teal-dark); outline-offset: 2px; box-shadow: var(--ev-focus-ring); } /* ══════════════════════════════════════════════════════════════════════════════ LAYOUT Backgrounds run full width; inner content is centred at --ev-page-max. ══════════════════════════════════════════════════════════════════════════════ */ .ev-container, .ev-container--xl, .ev-container--wide, .ev-container--xl-exam { width: 100%; max-width: var(--ev-page-max); margin-inline: auto; padding-inline: var(--ev-page-gutter); box-sizing: border-box; } /* GeneratePress header / navigation / footer INNER content only. Width only — no position, sticky or transform rules. */ .site-header .grid-container, .site-header .inside-header, .main-navigation .grid-container, .main-navigation .inside-navigation, .site-footer .grid-container, .footer-widgets .grid-container, .footer-widgets .inside-footer-widgets, .site-info .grid-container, .site-info .inside-site-info { width: 100%; max-width: var(--ev-page-max) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .ev-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; padding: 32px 0 72px; align-items: start; } .ev-section, .evh-section { padding-block: var(--ev-section-y); } @media (max-width: 1024px) { .ev-layout { grid-template-columns: 1fr; } } @media (max-width: 860px) { :root { --ev-page-gutter: 18px; } .ev-layout { gap: 18px; padding: 22px 0 34px; } .ev-section, .evh-section { padding-block: 36px; } } @media (max-width: 600px) { :root { --ev-page-gutter: 14px; } body { font-size: 15px; line-height: 1.58; } .ev-section, .evh-section { padding-block: var(--ev-section-y-sm); } .ev-btn { width: 100%; min-height: 44px; } .ev-sec { margin-bottom: 16px; } .ev-sec__hd { padding: 13px 15px; } } body.ev-homepage, body.ev-tax-page, body.single-mcq_set { background: var(--off-white); } /* ══════════════════════════════════════════════════════════════════════════════ PILLS ══════════════════════════════════════════════════════════════════════════════ */ .ev-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .67rem; font-weight: 600; font-family: var(--font-body); padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .ev-pill--teal { background: rgba(0,194,203,.1); color: var(--teal-dark); border: 1px solid rgba(0,194,203,.2); } .ev-pill--amber { background: rgba(245,166,35,.1); color: var(--amber-text); border: 1px solid rgba(245,166,35,.2); } .ev-pill--green { background: rgba(6,214,160,.1); color: var(--green-text); border: 1px solid rgba(6,214,160,.2); } .ev-pill--red { background: rgba(239,71,111,.1); color: var(--red-text); border: 1px solid rgba(239,71,111,.18); } .ev-pill--neutral { background: var(--off-white); color: var(--text-light); border: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════════════════════ */ .ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; text-decoration: none !important; border-radius: 100px; font-weight: 700; font-size: .875rem; font-family: var(--font-body); letter-spacing: .02em; padding: 11px 26px; cursor: pointer; border: none; transition: transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth); position: relative; overflow: hidden; white-space: nowrap; line-height: 1; } .ev-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent); transform: translateX(-110%) skewX(-15deg); transition: transform var(--dur-slow); pointer-events: none; } .ev-btn:hover::after { transform: translateX(180%) skewX(-15deg); } .ev-btn:active { transform: translateY(0) !important; } .ev-btn-primary, .ev-btn--primary { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; box-shadow: 0 4px 14px rgba(0,194,203,.35); } .ev-btn-primary:hover, .ev-btn--primary:hover { background: linear-gradient(135deg, var(--teal), var(--teal)); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,194,203,.45); } .ev-btn-amber, .ev-btn--amber { background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color: #fff; box-shadow: 0 4px 14px rgba(245,166,35,.35); } .ev-btn-amber:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,166,35,.45); } .ev-btn-outline, .ev-btn--outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border); padding: 10px 26px; } .ev-btn-outline:hover, .ev-btn--outline:hover { border-color: var(--teal); color: var(--teal-dark); } .ev-btn--secondary { background: var(--off-white); color: var(--navy); border: 1.5px solid var(--border); padding: 10px 26px; } .ev-btn--secondary:hover { background: var(--border); border-color: var(--g200); } .ev-btn--sm { padding: 8px 18px; font-size: .8rem; } .ev-btn--lg { padding: 14px 32px; font-size: 1rem; border-radius: 12px; } .ev-btn--block { width: 100%; justify-content: center; } /* ══════════════════════════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════════════════════════ */ .ev-card { background: var(--white); border-radius: var(--r); border: 1.5px solid var(--border); box-shadow: var(--sh); overflow: hidden; transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); } .ev-card--flat { box-shadow: var(--sh-xs); } .ev-card--flat:hover { box-shadow: var(--sh); } .ev-card:hover, .ev-sb-card:hover, .ev-sec:hover { border-color: rgba(0,194,203,.28); } /* ══════════════════════════════════════════════════════════════════════════════ EYEBROW ══════════════════════════════════════════════════════════════════════════════ */ .ev-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); } .ev-eyebrow::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--teal); border-radius: 99px; } /* ══════════════════════════════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════════════════════════════ */ @keyframes ev-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes ev-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* Green dot pulse — used by open status indicators */ @keyframes ev-pulse { 0% { box-shadow: 0 0 0 0 rgba(6,214,160,.5); } 70% { box-shadow: 0 0 0 7px rgba(6,214,160,0); } 100% { box-shadow: 0 0 0 0 rgba(6,214,160,0); } } /* Amber dot pulse — used by hero type-dot, deadline badges */ @keyframes ev-amber-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 70% { box-shadow: 0 0 0 7px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } } /* Animated dot-grid drift — hero background texture */ @keyframes ev-dot-drift { 0%,100% { background-position: 0 0; } 50% { background-position: 36px 36px; } } /* Stat number bounce-in */ @keyframes ev-count { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Hero content slide-in stagger */ @keyframes ev-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Progress bar fill — sidebar open-ratio widget */ @keyframes ev-bar-fill { from { width: 0; } to { width: var(--bar-w, 0%); } } /* Urgency blink */ @keyframes ev-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Related job card stagger */ @keyframes ev-rj-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════════════════════ */ .ev-header { background: var(--white); border-bottom: 1.5px solid var(--border); box-shadow: var(--sh-xs); } .ev-header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; } .ev-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--navy); letter-spacing: -.025em; white-space: nowrap; flex-shrink: 0; } .ev-logo__mark { width: 38px; height: 38px; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), var(--navy)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .ev-logo em { font-style: normal; color: var(--teal); } .ev-nav { display: flex; align-items: center; gap: 2px; } .ev-nav a { font-size: .875rem; font-weight: 500; color: var(--text-mid); padding: 7px 13px; border-radius: var(--r-xs); transition: all var(--dur-fast); } .ev-nav a:hover { color: var(--navy); background: var(--off-white); } .ev-nav a.active { color: var(--teal-dark); background: var(--teal-pale); font-weight: 600; } .ev-search { display: flex; align-items: center; gap: 8px; background: var(--off-white); border: 1.5px solid var(--border); border-radius: 100px; padding: 8px 16px; min-width: 200px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .ev-search:focus-within { border-color: var(--teal); box-shadow: var(--ev-focus-ring); } .ev-search input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: .85rem; color: var(--text); width: 100%; } .ev-search input::placeholder { color: var(--g300); } .ev-search svg { color: var(--text-light); flex-shrink: 0; } @media (max-width: 768px) { .ev-nav { display: none; } .ev-search { min-width: 140px; } } /* ══════════════════════════════════════════════════════════════════════════════ SECTION CARD SHELL ══════════════════════════════════════════════════════════════════════════════ */ .ev-sec { background: var(--white); border-radius: var(--r); border: 1.5px solid var(--border); box-shadow: var(--sh-xs); overflow: hidden; margin-bottom: 24px; } .ev-sec__hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); } .ev-sec__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: var(--navy); } .ev-sec__title svg { color: var(--teal); } .ev-sec__link { font-size: .78rem; font-weight: 600; color: var(--teal-dark); display: flex; align-items: center; gap: 4px; transition: gap var(--dur-fast); } .ev-sec__link:hover { gap: 7px; } /* ══════════════════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════════════════ */ .ev-sb { display: flex; flex-direction: column; gap: 20px; } .ev-sb-card { background: var(--white); border-radius: var(--r); border: 1.5px solid var(--border); box-shadow: var(--sh-xs); overflow: hidden; } .ev-sb__hd { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: .875rem; font-weight: 700; color: var(--navy); } .ev-sb__hd svg { color: var(--teal); flex-shrink: 0; } .ev-topics { padding: 8px 10px; } .ev-topic { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--r-xs); transition: background var(--dur-fast); } .ev-topic:hover { background: var(--off-white); } .ev-topic__ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .95rem; } .ev-topic__ico--t { background: var(--teal-pale); } .ev-topic__ico--a { background: var(--amber-pale); } .ev-topic__ico--g { background: var(--green-pale); } .ev-topic__ico--r { background: var(--red-pale); } .ev-topic__ico--n { background: var(--navy-pale); } .ev-topic__name { font-size: .86rem; font-weight: 500; color: var(--text-mid); flex: 1; transition: color var(--dur-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-topic:hover .ev-topic__name { color: var(--teal-dark); } .ev-topic__cnt { font-size: .74rem; font-weight: 700; color: var(--g300); flex-shrink: 0; } .ev-facts { padding: 4px 0; } .ev-fact { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: .83rem; } .ev-fact:last-child { border-bottom: none; } .ev-fact__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ev-fact__dot--t { background: var(--teal); } .ev-fact__dot--a { background: var(--amber); } .ev-fact__dot--g { background: var(--green); } .ev-fact__dot--r { background: var(--red); } .ev-fact__lbl { color: var(--text-light); min-width: 80px; } .ev-fact__val { font-weight: 600; color: var(--text); } .ev-prog { padding: 18px; } .ev-prog__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .ev-prog__title { font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: var(--navy); } .ev-prog__pct { font-size: .78rem; font-weight: 700; color: var(--teal-dark); } .ev-prog__sub { font-size: .78rem; color: var(--text-light); margin-bottom: 10px; } .ev-prog__track { background: var(--off-white); border-radius: 100px; height: 8px; overflow: hidden; margin-bottom: 8px; } .ev-prog__bar { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius: 100px; width: 0; transition: width 1.2s var(--ease-smooth); } .ev-prog__meta { display: flex; justify-content: space-between; font-size: .76rem; color: var(--g300); } .ev-cta-box { background: linear-gradient(140deg, var(--navy), var(--navy-mid) 70%, var(--g700)); padding: 24px; text-align: center; position: relative; overflow: hidden; } .ev-cta-box::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(0,194,203,.18), transparent 70%); pointer-events: none; } .ev-cta-box::after { content: ''; position: absolute; bottom: -50px; left: -20px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(245,166,35,.12), transparent 70%); pointer-events: none; } .ev-cta-box__emoji { font-size: 2.4rem; margin-bottom: 10px; position: relative; z-index: 1; } .ev-cta-box__title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: 6px; position: relative; z-index: 1; } .ev-cta-box__sub { font-size: .79rem; color: rgba(255,255,255,.55); margin-bottom: 16px; line-height: 1.5; position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════════════ */ .ev-footer { background: var(--navy); color: rgba(255,255,255,.55); padding: 52px 0 32px; } .ev-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.08); } @media (max-width: 860px) { .ev-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .ev-footer__grid { grid-template-columns: 1fr; } } .ev-footer__brand .ev-logo { color: #fff; margin-bottom: 14px; } .ev-footer__desc { font-size: .84rem; line-height: 1.7; max-width: 260px; } .ev-footer__col-title { font-family: var(--font-display); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.28); margin-bottom: 14px; } .ev-footer__links { display: flex; flex-direction: column; gap: 9px; } .ev-footer__links a { font-size: .85rem; color: rgba(255,255,255,.5); transition: color var(--dur-fast); } .ev-footer__links a:hover { color: var(--teal); } .ev-footer__bottom { display: flex; align-items: center; justify-content: space-between; font-size: .79rem; flex-wrap: wrap; gap: 12px; } .ev-footer__copy { color: rgba(255,255,255,.3); } .ev-footer__legal { display: flex; gap: 18px; } .ev-footer__legal a { color: rgba(255,255,255,.35); transition: color var(--dur-fast); } .ev-footer__legal a:hover { color: rgba(255,255,255,.65); } /* ══════════════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════════════════════════ SHARED LAYOUT PRIMITIVES Universal components used across all CPT templates. CPT CSS files keep only what is genuinely unique (hero bg, hero padding). ══════════════════════════════════════════════════════════════════════════════ */ /* ── Shared section heading ──────────────────────────────────────────────── */ .ev-section-heading { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--royal); margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); letter-spacing: -.01em; } /* ── Shared section icon ─────────────────────────────────────────────────── */ .ev-section-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--off-white); border-radius: 8px; color: var(--royal); flex-shrink: 0; } .ev-section-icon--mint { background: rgba(6,214,160,.1); color: var(--green-dark); } .ev-section-icon--saffron { background: rgba(245,166,35,.1); color: var(--amber-text); } .ev-section-icon--teal { background: rgba(0,194,203,.1); color: var(--teal-dark); } .ev-section-icon--red { background: rgba(239,71,111,.1); color: var(--red); } /* ── Shared section divider label ────────────────────────────────────────── */ /* A labelled horizontal rule used to separate sections in archive pages. */ .ev-section-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--g300); } .ev-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--g100); } /* ── Shared hero decoration (glow + stripe) ──────────────────────────────── */ /* These are kept for backward compatibility; new templates use CSS-only */ /* ::before/::after on the hero container instead of these div elements. */ .ev-hero__glow { position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%); pointer-events: none; } .ev-hero__stripe { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--saffron) 0%, rgba(232,160,32,.3) 60%, transparent 100%); } /* ── Shared sidebar card ─────────────────────────────────────────────────── */ .ev-sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; } .ev-sidebar-card__heading { font-size: .82rem; font-weight: 700; color: var(--royal); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); letter-spacing: -.01em; } .ev-sidebar-card--download { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--midnight); border-color: transparent; } /* ══════════════════════════════════════════════════════════════════════════════ SHARED UTILITIES (kicker · soft panel · readable text · ghost button) ══════════════════════════════════════════════════════════════════════════════ */ .ev-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); } .ev-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); } .ev-kicker, .ev-mini-label { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); } .ev-soft-panel { background: linear-gradient(135deg, #fff 0%, var(--g50) 100%); border: var(--ev-card-border); border-radius: 22px; box-shadow: 0 14px 36px rgba(11,29,58,.06); } .ev-readable { max-width: 900px; color: var(--text-mid); line-height: 1.75; } .ev-readable p + p { margin-top: 14px; } /* Long SEO copy reads better justified. */ .ev-seo-text, .evh-seo-copy, .ev-readable--justify { text-align: justify; text-justify: inter-word; } /* ========================================================= ExamVillage MCQ Footer — screenshot-matched design ========================================================= */ .ev-mcq-footer { margin-top: 48px; background: linear-gradient(112deg, var(--navy-mid) 0%, var(--navy) 52%, var(--navy) 100%); color: rgba(255,255,255,.88); border-top: 1px solid rgba(255,255,255,.12); font-family: var(--font-body); } .ev-mcq-footer__inner { display: grid; grid-template-columns: 1.72fr .92fr .98fr 1.02fr 1.25fr; gap: 42px; padding-top: 28px; padding-bottom: 29px; align-items: start; } .ev-mcq-footer__brand { min-width: 0; } .ev-mcq-footer__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px; color: #fff; text-decoration: none; } .ev-mcq-footer__logo:hover { color: #fff; } .ev-mcq-footer__logo-mark { width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; } .ev-mcq-footer__logo-mark svg { width: 42px; height: 38px; overflow: visible; } .ev-mcq-footer__logo-mark path { fill: var(--teal-mid); stroke: #fff; stroke-width: 2; stroke-linejoin: round; } .ev-mcq-footer__logo-copy { display: flex; flex-direction: column; line-height: 1; } .ev-mcq-footer__logo-copy strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.035em; color: #fff; } .ev-mcq-footer__logo-copy small { margin-top: 3px; font-size: 7px; font-weight: 600; letter-spacing: .015em; color: rgba(255,255,255,.82); } .ev-mcq-footer__brand > p { margin: 0 0 16px; max-width: 300px; color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.62; } .ev-mcq-footer__socials { display: flex; align-items: center; gap: 9px; } .ev-mcq-footer__socials a { width: 23px; height: 23px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform var(--dur-fast), opacity var(--dur-fast); } .ev-mcq-footer__socials a:hover { transform: translateY(-2px); opacity: .9; } .ev-mcq-footer__socials svg { width: 14px; height: 14px; fill: currentColor; } .ev-mcq-footer__socials .is-facebook { background: #4777cf; } .ev-mcq-footer__socials .is-youtube { background: #ed3348; } .ev-mcq-footer__socials .is-x { background: #fff; color: #0b1727; } .ev-mcq-footer__socials .is-instagram { background: linear-gradient(135deg,#7b4bd2,#d34b82,#f28b43); } .ev-mcq-footer__socials .is-linkedin { background: #2777b9; } .ev-mcq-footer__col h2 { margin: 2px 0 14px; font-family: var(--font-body); font-size: 12px; line-height: 1.25; font-weight: 700; color: #fff; text-transform: none; letter-spacing: 0; } .ev-mcq-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .ev-mcq-footer__col li { margin: 0; padding: 0; } .ev-mcq-footer__col a, .ev-mcq-footer__col li { color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.25; text-decoration: none; } .ev-mcq-footer__col a { transition: color var(--dur-fast); } .ev-mcq-footer__col a:hover { color: #fff; text-decoration: none; } .ev-mcq-footer__contact ul { gap: 14px; } .ev-mcq-footer__contact li { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; column-gap: 9px; white-space: nowrap; } .ev-mcq-footer__contact-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; } .ev-mcq-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.05); } .ev-mcq-footer__bottom-inner { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ev-mcq-footer__bottom p { margin: 0; padding: 0; color: rgba(255,255,255,.76); font-size: 10.5px; line-height: 1.4; } .ev-mcq-footer__motto { display: flex; align-items: center; gap: 9px; } .ev-mcq-footer__motto i { font-style: normal; color: rgba(255,255,255,.72); font-size: 8px; } @media (max-width: 1080px) { .ev-mcq-footer__inner { grid-template-columns: 1.55fr repeat(2,1fr); gap: 30px 36px; } .ev-mcq-footer__brand { grid-row: span 2; } } @media (max-width: 760px) { .ev-mcq-footer { margin-top: 34px; } .ev-mcq-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-top: 32px; padding-bottom: 30px; } .ev-mcq-footer__brand { grid-column: 1 / -1; grid-row: auto; } .ev-mcq-footer__brand > p { max-width: 430px; } .ev-mcq-footer__contact { grid-column: 1 / -1; } } @media (max-width: 520px) { .ev-mcq-footer__inner { grid-template-columns: 1fr; gap: 25px; } .ev-mcq-footer__brand, .ev-mcq-footer__contact { grid-column: auto; } .ev-mcq-footer__desktop-break { display: none; } .ev-mcq-footer__col h2 { margin-bottom: 11px; } .ev-mcq-footer__bottom-inner { min-height: 64px; flex-direction: column; justify-content: center; gap: 6px; text-align: center; } } /* ══════════════════════════════════════════════════════════════════════════════ UNIVERSAL MCQ-CARD COMPONENTS (ev-chip · ev-icon-btn · ev-info-box · ev-cta) Reusable on any page: MCQ sets, single MCQ, past papers, exam boards, etc. Tokens first, then components. Page files only add layout on top of these. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Chip (subject / topic label) ── */ .ev-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 15px; border-radius: 10px; background: var(--ev-chip-grey); color: var(--ev-chip-grey-text); font-family: var(--font-body); font-size: .94rem; font-weight: 500; line-height: 1.2; white-space: nowrap; } .ev-chip--green { background: var(--ev-mint); color: var(--ev-mint-text); font-size: .98rem; font-weight: 700; } /* ── Square icon button (comments / save / share) ── */ .ev-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--ev-ibtn-line); border-radius: 10px; background: var(--ev-ibtn-soft); color: var(--ev-ibtn-ink); font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .ev-icon-btn:hover { transform: translateY(-1px); border-color: var(--g200); } .ev-icon-btn:focus-visible { outline: 3px solid rgba(0,194,203,.35); outline-offset: 2px; } .ev-icon-btn--blue { background: var(--ev-ibtn-blue); color: var(--ev-ibtn-blue-ink); } .ev-icon-btn--blue-strong { background: var(--ev-ibtn-blue-2); color: var(--ev-ibtn-blue-ink); } /* ── Tinted info box (Previously Asked In · Reference Note · tips) ── */ .ev-info-box { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 16px 20px 16px 22px; border: 1px solid transparent; border-radius: 12px; } .ev-info-box--blue { background: var(--ev-info-blue); border-color: var(--ev-info-blue-line); --ev-info-ico: var(--ev-info-blue-ico); } .ev-info-box--cream { background: var(--ev-info-cream); border-color: var(--ev-info-cream-line); --ev-info-ico: var(--ev-info-cream-ico); } .ev-info-box__ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--ev-info-ico, var(--teal-dark)); } .ev-info-box__body { flex: 1; min-width: 0; } .ev-info-box__title { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ev-ink-deep); } .ev-info-box__text, .ev-info-box__list li { margin: 0; font-size: .86rem; font-weight: 500; line-height: 1.6; color: var(--ev-info-ink, var(--ev-ink-soft)); overflow-wrap: anywhere; } .ev-info-box__list { margin: 0; padding: 0; list-style: none; } .ev-info-box__list strong { font-weight: 700; color: var(--ev-ink-deep); } /* ── Call-to-action button (Show Answer / Previous / Next) ── */ .ev-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 20px; border: 0; border-radius: 9px; font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .005em; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast), background var(--dur-fast); } .ev-cta:hover { transform: translateY(-1px); } .ev-cta:active { transform: translateY(0); } .ev-cta:focus-visible { outline: 3px solid rgba(0,194,203,.4); outline-offset: 2px; } .ev-cta--green { background: linear-gradient(180deg, var(--ev-cta-green-1), var(--ev-cta-green-2)); color: #fff; box-shadow: 0 5px 14px rgba(13,157,98,.28); } .ev-cta--green:hover { box-shadow: 0 8px 20px rgba(13,157,98,.34); filter: brightness(1.04); color: #fff; } .ev-cta--deep { background: linear-gradient(180deg, var(--ev-cta-deep-1), var(--ev-cta-deep-2)); color: #fff; } .ev-cta--deep:hover { box-shadow: 0 8px 20px rgba(20,67,83,.32); color: #fff; } .ev-cta--soft { background: var(--ev-cta-soft); color: var(--ev-cta-soft-ink); } .ev-cta--soft:hover { background: var(--g100); color: var(--ev-cta-soft-ink); } .ev-cta.is-disabled, .ev-cta[aria-disabled="true"] { background: var(--ev-cta-soft); color: var(--ev-cta-disabled-ink); box-shadow: none; filter: none; transform: none; cursor: not-allowed; } /* ── Tone helpers: set --tone-bg / --tone-ink for coloured pills (board / year / status) ── */ .ev-tone--blue { --tone-bg: #e3edfc; --tone-ink: #1d4fd7; } .ev-tone--green { --tone-bg: #dbf4e7; --tone-ink: #0f8a4c; } .ev-tone--purple { --tone-bg: #ebe5fa; --tone-ink: #5b34b8; } .ev-tone--amber { --tone-bg: #fdeccb; --tone-ink: #a06100; } /* ══════════════════════════════════════════════════════════════════════════════ TAXONOMY + PAST-PAPER MEDIA — uploaded logos are never stretched ══════════════════════════════════════════════════════════════════════════════ */ .ev-term-visual-image, .ev-paper-filter-visual img, .evs-hero__icon img, .evs-set__ph img, .evx-topic__ico img { max-width: 100%; max-height: 100%; object-fit: contain; vertical-align: middle; } .ev-term-visual-image { display: block; width: 100%; height: 100%; object-position: center; } .evs-subject__ico img, .ev-subterm-card__icon img, .evr-spec-card__icon img, .evs-tint img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; } .ev-paper-filter-visual { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; flex: none; margin-right: 8px; } .ev-paper-filter-visual img { width: 30px !important; height: 30px !important; object-fit: contain !important; } @media (max-width: 767px) { .ev-paper-filter-visual { width: 26px; height: 26px; } .ev-paper-filter-visual img { width: 26px !important; height: 26px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ PRIMARY NAVIGATION (GeneratePress #site-navigation) Sticky, 45px rhythm. Breakpoints: ≥1025 desktop · 769–1024 tablet · ≤768 mobile. Only sizing / appearance — GeneratePress keeps all menu toggling behaviour. ══════════════════════════════════════════════════════════════════════════════ */ #site-navigation.main-navigation { position: sticky; top: 0; z-index: 9999; width: 100%; box-shadow: 0 3px 16px rgba(11,29,58,.10); } #site-navigation .inside-navigation { display: flex; align-items: center; flex-wrap: wrap; max-width: var(--ev-page-max); margin-inline: auto; min-height: 45px; gap: 0 12px; padding-inline: 16px; } /* brand */ #site-navigation .ev-original-nav-brand { flex: 0 0 auto; order: 0; } #site-navigation .ev-original-nav-brand__link { display: inline-flex; align-items: center; justify-content: flex-start; height: 45px; min-height: 45px; padding-block: 4px; line-height: 1; color: var(--navy); text-decoration: none; } #site-navigation .ev-original-nav-brand__logo { display: block; width: auto; height: auto; max-width: 165px; max-height: 35px; object-fit: contain; vertical-align: middle; } #site-navigation .ev-original-nav-brand__text { font-weight: 800; font-size: 20px; } /* menu */ #site-navigation .main-nav { flex: 1 1 auto; min-width: 0; } #site-navigation .menu-bar-items { margin-left: auto; } #site-navigation .main-nav > ul > li > a, #site-navigation .menu-bar-item > a { line-height: 45px; padding-inline: 12px; font-size: 15px; font-weight: 600; } #site-navigation .menu-item-has-children .dropdown-menu-toggle { padding-right: 10px; padding-left: 6px; } /* Hide only the duplicate logo/brand in GeneratePress's own header. Do not remove generate_header or .site-header: navigation placement can depend on them. */ .site-header .site-logo, .site-header .site-branding, .site-header .navigation-branding { display: none; } .site-header .inside-header:not(:has(nav)) { padding-block: 0; min-height: 0; } /* Navigation nested inside .site-header: stick the parent, not the nested nav. */ .site-header:has(#site-navigation) { position: sticky; top: 0; z-index: 9999; width: 100%; box-shadow: 0 3px 16px rgba(11,29,58,.10); } .site-header:has(#site-navigation) #site-navigation.main-navigation { position: relative; top: auto; box-shadow: none; } /* WordPress admin bar offset */ body.admin-bar #site-navigation.main-navigation { top: 32px; } body.admin-bar .site-header:has(#site-navigation) { top: 32px; } body.admin-bar .site-header:has(#site-navigation) #site-navigation.main-navigation { top: auto; } /* Dropdowns (desktop + tablet) */ @media (min-width: 769px) { #site-navigation .main-nav ul ul.sub-menu { width: 238px; min-width: 220px; margin: 0; padding: 7px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(11,29,58,.15); text-align: left; } #site-navigation .main-nav ul ul.sub-menu li { margin: 0; padding: 0; } #site-navigation .main-nav ul ul.sub-menu li + li { margin-top: 1px; } #site-navigation .main-nav ul ul.sub-menu li > a { display: flex; align-items: center; min-height: 39px; padding: 9px 12px; border-radius: 8px; color: var(--navy); background: transparent; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: break-word; transition: background-color var(--dur-fast), color var(--dur-fast); } #site-navigation .main-nav ul ul.sub-menu li:hover > a, #site-navigation .main-nav ul ul.sub-menu li.sfHover > a, #site-navigation .main-nav ul ul.sub-menu li.current-menu-item > a, #site-navigation .main-nav ul ul.sub-menu li > a:focus-visible { color: var(--teal-deep); background: var(--teal-pale); } #site-navigation .main-nav ul ul.sub-menu .dropdown-menu-toggle { padding: 0 4px 0 8px; color: inherit; } #site-navigation .main-nav ul ul.sub-menu ul.sub-menu { margin-top: -7px; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { #site-navigation .inside-navigation { gap: 0 6px; padding-inline: 12px; } #site-navigation .ev-original-nav-brand__logo { max-width: 140px; max-height: 33px; } #site-navigation .main-nav > ul > li > a, #site-navigation .menu-bar-item > a { padding-inline: 8px; font-size: 14px; } } /* Mobile */ @media (max-width: 782px) { body.admin-bar #site-navigation.main-navigation { top: 46px; } body.admin-bar .site-header:has(#site-navigation) { top: 46px; } } @media (max-width: 768px) { #site-navigation .inside-navigation { gap: 0 8px; padding-inline: 12px; } #site-navigation .ev-original-nav-brand { margin-right: auto; } #site-navigation .ev-original-nav-brand__link { padding-block: 6px; } #site-navigation .ev-original-nav-brand__logo { max-width: 132px; max-height: 32px; } #site-navigation .main-nav { flex: 0 0 100%; order: 10; width: 100%; } #site-navigation .main-nav > ul { width: 100%; } #site-navigation .menu-toggle, #site-navigation .menu-bar-item > a { min-height: 45px; line-height: 45px; padding-inline: 10px; font-size: 15px; font-weight: 600; } #site-navigation .menu-toggle { margin-left: 0; } #site-navigation .menu-toggle, #site-navigation .menu-bar-items { flex: 0 0 auto; } /* expanded menu: in-flow, scrollable, readable */ #site-navigation.toggled .main-nav { max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border-top: 1px solid var(--border); } #site-navigation.toggled .main-nav > ul { padding: 7px 0 12px; } #site-navigation.toggled .main-nav > ul > li { margin: 0; } #site-navigation.toggled .main-nav > ul > li > a { min-height: 45px; padding: 11px 14px; color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.4; border-radius: 8px; } #site-navigation.toggled .main-nav > ul > li:hover > a, #site-navigation.toggled .main-nav > ul > li.current-menu-item > a { color: var(--teal-deep); background: var(--teal-pale); } #site-navigation.toggled .main-nav ul ul.sub-menu { width: 100%; margin: 0; padding: 4px 0 6px 12px; background: var(--off-white); border: 0; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; box-shadow: none; } #site-navigation.toggled .main-nav ul ul.sub-menu li > a { min-height: 44px; padding: 10px 12px; color: var(--text-mid); font-size: 14px; font-weight: 550; line-height: 1.4; border-radius: 7px; } #site-navigation.toggled .main-nav ul ul.sub-menu li:hover > a, #site-navigation.toggled .main-nav ul ul.sub-menu li.current-menu-item > a { color: var(--teal-deep); background: var(--teal-pale); } } /* Current menu item stays readable on the light nav (overrides theme active-link colours). */ #site-navigation .main-nav > ul > li.current-menu-item > a, #site-navigation .main-nav > ul > li.current_page_item > a, #site-navigation .main-nav > ul > li.current-menu-ancestor > a, #site-navigation .main-nav > ul > li.current_page_ancestor > a, #site-navigation .main-nav > ul > li.current-menu-parent > a, #site-navigation .main-nav > ul > li.current_page_parent > a, #site-navigation .main-nav > ul > li > a[aria-current="page"], #site-navigation .main-nav > ul > li > a[aria-current="true"], #site-navigation .main-nav ul ul.sub-menu li.current-menu-item > a, #site-navigation .main-nav ul ul.sub-menu li.current_page_item > a, #site-navigation .main-nav ul ul.sub-menu li > a[aria-current="page"] { color: var(--teal-dark) !important; background-color: var(--teal-pale) !important; opacity: 1 !important; visibility: visible !important; } #site-navigation .main-nav > ul > li.current-menu-item > a:hover, #site-navigation .main-nav > ul > li.current_page_item > a:hover, #site-navigation .main-nav > ul > li.current-menu-ancestor > a:hover, #site-navigation .main-nav > ul > li > a[aria-current="page"]:hover { color: var(--teal-deep) !important; background-color: var(--teal-tint) !important; } /* Test mode: navigation must stay visible above quiz backgrounds. */ body.page-template-page-test #site-navigation, body.page-template-page-test-php #site-navigation, body.page-slug-test #site-navigation { visibility: visible !important; opacity: 1 !important; z-index: 10010; } /* ══════════════════════════════════════════════════════════════════════════════ BREADCRUMB — one universal component for the whole site ────────────────────────────────────────────────────────────────────────────── A teal ribbon with white links, a Home icon, and a bold current page. It paints its own background, so it looks the same on a dark hero, a light page, MCQ archives, taxonomies, singles, jobs, past papers… Standard markup (use this for new templates): Inline variant (links/spans placed directly inside the nav) is supported too. Legacy class names are aliases of the same component and need no template change: .ev-mcq-breadcrumb (+ __list) · .evpd-crumb (+ __list) · .ev-jobs-breadcrumb-inline Recolour everywhere from one place with the --evb-* tokens in :root. ══════════════════════════════════════════════════════════════════════════════ */ /* wrapper: when it holds the page container it is full-width and clips the ribbon's bleed */ :is(.ev-breadcrumb, .ev-mcq-breadcrumb, .evpd-crumb, .ev-jobs-breadcrumb-inline) { position: relative; z-index: 3; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; } :is(.ev-breadcrumb, .ev-mcq-breadcrumb, .evpd-crumb, .ev-jobs-breadcrumb-inline):has(> .ev-container) { overflow: hidden; } :is(.ev-breadcrumb, .ev-mcq-breadcrumb, .evpd-crumb, .ev-jobs-breadcrumb-inline) > .ev-container { padding-block: 0; } /* the row:
    /