/** * plugins/generic/countryStats/css/geoWidget.css * * Homepage block "Tashriflar geografiyasi" — compact, card-based. * * Colours: ONLY through the --g-* tokens below. Each maps to the theme's own * token — EYIS Press (--eyis-*), Meridian (--mrd-*) or Soouo (--soouo-*), which * share token names — so colour presets and the theme's light/dark switch apply. * Fallbacks: EYIB light palette, and the EYIS dark palette in the night-mode block. Contrast (WCAG 2.1 AA) of every * text/background pair is verified in tests/unit/GeoWidgetDesignTest.php; * --g-text-3 is too light for text and is used for decoration only. * * Layout (mobile first): everything one column; from 640px the summary cards * are 3 columns and the extra countries 2; from 960px TOP-5 and the chart sit * side by side and the extra countries use 3 columns. * Motion: fade-in, progress-bar growth, hover lift, skeleton shimmer — all * disabled by prefers-reduced-motion / the theme's --eyis-motion. */ .eyib-geo { --g-primary: var(--eyis-primary, var(--mrd-primary, var(--soouo-primary, #0B2341))); --g-primary-2: var(--eyis-primary-2, var(--mrd-primary-2, var(--soouo-primary-2, #0E3358))); --g-accent: var(--eyis-accent, var(--mrd-accent, var(--soouo-accent, #D4AF37))); --g-accent-2: var(--eyis-accent-2, var(--mrd-accent-2, var(--soouo-accent-2, #E9C866))); --g-hover: var(--eyis-hover, var(--mrd-hover, var(--soouo-hover, #0E5AA7))); --g-neon: var(--eyis-neon, var(--mrd-neon, var(--soouo-neon, #37D5FF))); --g-on-primary: var(--eyis-on-primary, var(--mrd-on-primary, var(--soouo-on-primary, #FFFFFF))); --g-on-hover: #FFFFFF; --g-on-accent: var(--eyis-on-accent, var(--mrd-on-accent, var(--soouo-on-accent, #0B2341))); --g-surface: var(--eyis-surface, var(--mrd-surface, var(--soouo-surface, #FFFFFF))); --g-surface-2: var(--eyis-surface-2, var(--mrd-surface-2, var(--soouo-surface-2, #F5F7FA))); --g-border: var(--eyis-border, var(--mrd-border, var(--soouo-border, rgba(11, 35, 65, .12)))); --g-border-2: var(--eyis-border-2, var(--mrd-border-2, var(--soouo-border-2, rgba(11, 35, 65, .2)))); --g-text: var(--eyis-text, var(--mrd-text, var(--soouo-text, #0B2341))); --g-text-2: var(--eyis-text-2, var(--mrd-text-2, var(--soouo-text-2, #47566B))); --g-text-3: var(--eyis-text-3, var(--mrd-text-3, var(--soouo-text-3, #6B7A90))); --g-radius: var(--eyis-radius, var(--mrd-radius, var(--soouo-radius, 16px))); --g-radius-sm: var(--eyis-radius-sm, var(--mrd-radius-sm, var(--soouo-radius-sm, 10px))); --g-shadow: var(--eyis-shadow, var(--mrd-shadow, var(--soouo-shadow, 0 10px 30px rgba(11, 35, 65, .08), 0 2px 8px rgba(11, 35, 65, .05)))); --g-shadow-sm: var(--eyis-shadow-sm, var(--mrd-shadow-sm, var(--soouo-shadow-sm, 0 1px 3px rgba(11, 35, 65, .06), 0 1px 2px rgba(11, 35, 65, .08)))); --g-ring: var(--eyis-ring, var(--mrd-ring, var(--soouo-ring, 0 0 0 3px rgba(14, 90, 167, .35)))); --g-font-heading: var(--eyis-font-heading, var(--mrd-font-heading, var(--soouo-font-heading, Georgia, 'Times New Roman', serif))); --g-ease: var(--eyis-ease, var(--mrd-ease, var(--soouo-ease, cubic-bezier(.22, .61, .36, 1)))); --g-motion: var(--eyis-motion, var(--mrd-motion, var(--soouo-motion, 1))); display: block; box-sizing: border-box; width: 100%; max-width: var(--eyis-max, var(--mrd-max, var(--soouo-max, 1280px))); margin: clamp(24px, 4vw, 56px) auto; padding-inline: var(--eyis-gutter, var(--mrd-gutter, var(--soouo-gutter, 0))); color: var(--g-text); font-family: var(--eyis-font-body, var(--mrd-font-body, var(--soouo-font-body, inherit))); font-size: 1rem; line-height: 1.45; } /* * Night mode. Applies when the theme marks the page dark (data-theme="dark" on , * as EYIS Press, Meridian and Soouo do) or when the inline script in geoWidget.tpl * detects a dark page background (any other theme / OS "System" mode) and sets * data-geo-scheme="dark". Theme tokens still win, so theme presets keep working; * the fallbacks are the EYIS Press dark palette. */ :root[data-theme="dark"] .eyib-geo, .eyib-geo[data-geo-scheme="dark"] { --g-primary: var(--eyis-primary, var(--mrd-primary, var(--soouo-primary, #EAF1F8))); --g-primary-2: var(--eyis-primary-2, var(--mrd-primary-2, var(--soouo-primary-2, #C9DAEA))); --g-accent: var(--eyis-accent, var(--mrd-accent, var(--soouo-accent, #D4AF37))); --g-accent-2: var(--eyis-accent-2, var(--mrd-accent-2, var(--soouo-accent-2, #E9C866))); --g-hover: var(--eyis-hover, var(--mrd-hover, var(--soouo-hover, #0E5AA7))); --g-neon: var(--eyis-neon, var(--mrd-neon, var(--soouo-neon, #37D5FF))); --g-on-primary: var(--eyis-on-primary, var(--mrd-on-primary, var(--soouo-on-primary, #071421))); --g-on-accent: var(--eyis-on-accent, var(--mrd-on-accent, var(--soouo-on-accent, #0B2341))); --g-surface: var(--eyis-surface, var(--mrd-surface, var(--soouo-surface, #102536))); --g-surface-2: var(--eyis-surface-2, var(--mrd-surface-2, var(--soouo-surface-2, #0B1C2C))); --g-border: var(--eyis-border, var(--mrd-border, var(--soouo-border, #1E3A4D))); --g-border-2: var(--eyis-border-2, var(--mrd-border-2, var(--soouo-border-2, #2C4A60))); --g-text: var(--eyis-text, var(--mrd-text, var(--soouo-text, #EAF1F8))); --g-text-2: var(--eyis-text-2, var(--mrd-text-2, var(--soouo-text-2, #A9BED0))); --g-text-3: var(--eyis-text-3, var(--mrd-text-3, var(--soouo-text-3, #7F97AC))); --g-shadow: var(--eyis-shadow, var(--mrd-shadow, var(--soouo-shadow, 0 14px 40px rgba(0, 0, 0, .45)))); --g-shadow-sm: var(--eyis-shadow-sm, var(--mrd-shadow-sm, var(--soouo-shadow-sm, 0 1px 3px rgba(0, 0, 0, .4)))); --g-ring: var(--eyis-ring, var(--mrd-ring, var(--soouo-ring, 0 0 0 3px rgba(55, 213, 255, .4)))); color-scheme: dark; } .eyib-geo *, .eyib-geo *::before, .eyib-geo *::after { box-sizing: border-box; } /* Waiting for the inline script to move the block to the end of the homepage. */ .eyib-geo--pending { display: none; } .eyib-geo__srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .eyib-geo__inner { position: relative; overflow: hidden; padding: clamp(16px, 2.6vw, 28px); border: 1px solid var(--g-border); border-radius: var(--g-radius); background: var(--g-surface); box-shadow: var(--g-shadow); } /* Thin editorial rule on top: navy → blue → gold. */ .eyib-geo__inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--g-primary-2), var(--g-hover) 55%, var(--g-accent)); } /* ------------------------------------------------------------------ header */ .eyib-geo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(14px, 2vw, 20px); } .eyib-geo__heading { min-width: 0; flex: 1 1 300px; } .eyib-geo__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--g-text-2); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .eyib-geo__globe { flex: none; color: var(--g-accent); } .eyib-geo .eyib-geo__title { margin: 4px 0 2px; padding: 0; border: 0; color: var(--g-text); font-family: var(--g-font-heading); font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); font-weight: 700; line-height: 1.15; } .eyib-geo__lead { margin: 0; color: var(--g-text-2); font-size: .9rem; } /* Range switch — segmented control */ .eyib-geo__ranges { display: flex; gap: 3px; max-width: 100%; padding: 3px; border: 1px solid var(--g-border); border-radius: 999px; background: var(--g-surface-2); overflow-x: auto; scrollbar-width: none; } .eyib-geo__ranges::-webkit-scrollbar { display: none; } .eyib-geo .eyib-geo__range { flex: 1 0 auto; padding: 6px 12px; border-radius: 999px; color: var(--g-text-2); font-size: .8rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color calc(.2s * var(--g-motion)) var(--g-ease), color calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo .eyib-geo__range:hover { color: var(--g-text); } .eyib-geo .eyib-geo__range[aria-current="true"] { background: var(--g-primary); color: var(--g-on-primary); } .eyib-geo .eyib-geo__range:focus-visible, .eyib-geo .eyib-geo__cta:focus-visible, .eyib-geo .eyib-geo__moreToggle:focus-visible { outline: none; box-shadow: var(--g-ring); } /* ------------------------------------------------------------------ body */ .eyib-geo__body { min-height: 120px; } .eyib-geo__content, .eyib-geo__state { animation: eyib-geo-fade calc(.35s * var(--g-motion)) var(--g-ease) both; } @keyframes eyib-geo-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .eyib-geo__demo { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 10px; background: var(--g-accent); color: var(--g-on-accent); font-size: .75rem; font-weight: 700; } /* Summary cards */ .eyib-geo__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; } .eyib-geo__card { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface-2); transition: transform calc(.2s * var(--g-motion)) var(--g-ease), box-shadow calc(.2s * var(--g-motion)) var(--g-ease), border-color calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo__content .eyib-geo__card:hover, .eyib-geo__content .eyib-geo__country:hover { transform: translateY(calc(-2px * var(--g-motion))); border-color: var(--g-border-2); box-shadow: var(--g-shadow-sm); } .eyib-geo__cardIcon { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g-surface); box-shadow: inset 0 0 0 1px var(--g-border); color: var(--g-text); } .eyib-geo__cardText { display: flex; flex-direction: column; min-width: 0; } .eyib-geo__cardLabel { color: var(--g-text-2); font-size: .75rem; font-weight: 600; } .eyib-geo__cardValue { color: var(--g-text); font-family: var(--g-font-heading); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; } .eyib-geo__cardValue--name { overflow: hidden; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); text-overflow: ellipsis; white-space: nowrap; } .eyib-geo__cardMeta { color: var(--g-text-2); font-size: .78rem; font-variant-numeric: tabular-nums; } /* Flags (bundled SVG, 4:3) */ .eyib-geo__flag { display: block; flex: none; width: 28px; height: 21px; } .eyib-geo__flag--lg { width: 36px; height: 27px; } .eyib-geo__flag--sm { width: 22px; height: 16px; } .eyib-geo__flag img, .eyib-geo__flagCode { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--g-border); } .eyib-geo__flagCode { display: grid; place-items: center; background: var(--g-surface); color: var(--g-text-2); font-size: .6rem; font-weight: 700; letter-spacing: .03em; } /* Main area: TOP-5 + chart */ .eyib-geo__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .eyib-geo__panel { min-width: 0; padding: 14px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); } .eyib-geo .eyib-geo__panelTitle { margin: 0 0 8px; padding: 0; border: 0; color: var(--g-text); font-family: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .eyib-geo__top, .eyib-geo__rest, .eyib-geo__legend { margin: 0; padding: 0; list-style: none; } .eyib-geo__country { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 -6px; padding: 8px 6px; border: 1px solid transparent; border-radius: 8px; transition: transform calc(.2s * var(--g-motion)) var(--g-ease), box-shadow calc(.2s * var(--g-motion)) var(--g-ease), border-color calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo__country + .eyib-geo__country { margin-top: 2px; } .eyib-geo__rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g-surface-2); color: var(--g-text-2); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .eyib-geo__rank--first { background: var(--g-accent); color: var(--g-on-accent); } .eyib-geo__countryMain { display: block; min-width: 0; } .eyib-geo__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .eyib-geo__name { min-width: 0; overflow: hidden; color: var(--g-text); font-size: .92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .eyib-geo__share { flex: none; color: var(--g-text); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; } .eyib-geo__visits { display: block; color: var(--g-text-2); font-size: .75rem; font-variant-numeric: tabular-nums; } /* Progress bars — fill uses the primary token: navy on light, near-white on dark (high contrast in both). */ .eyib-geo__bar { display: block; height: 6px; margin: 5px 0 3px; border-radius: 999px; background: var(--g-surface-2); box-shadow: inset 0 0 0 1px var(--g-border); overflow: hidden; } .eyib-geo__bar--thin { height: 4px; } .eyib-geo__barFill { display: block; height: 100%; border-radius: inherit; background: var(--g-primary); transform-origin: left center; animation: eyib-geo-grow calc(.6s * var(--g-motion)) var(--g-ease) both; } @keyframes eyib-geo-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Distribution mini chart */ .eyib-geo__stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 12px; border-radius: 999px; overflow: hidden; animation: eyib-geo-grow calc(.6s * var(--g-motion)) var(--g-ease) both; transform-origin: left center; } .eyib-geo__seg { display: block; min-width: 2px; height: 100%; } .eyib-geo__seg--c1 { background: var(--g-primary); } .eyib-geo__seg--c2 { background: var(--g-hover); } .eyib-geo__seg--c3 { background: var(--g-accent); } .eyib-geo__seg--c4 { background: var(--g-neon); } .eyib-geo__seg--c5 { background: var(--g-accent-2); } .eyib-geo__seg--others { background: var(--g-text-3); } .eyib-geo__legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; padding: 3px 0; font-size: .82rem; } .eyib-geo__dot { display: block; width: 10px; height: 10px; border-radius: 3px; } .eyib-geo__legendName { overflow: hidden; color: var(--g-text); text-overflow: ellipsis; white-space: nowrap; } .eyib-geo__legendValue { color: var(--g-text); font-weight: 700; font-variant-numeric: tabular-nums; } .eyib-geo__chartNote { margin: 10px 0 0; color: var(--g-text-2); font-size: .78rem; } /* Remaining countries (details / summary) */ .eyib-geo__more { margin-top: 12px; } .eyib-geo .eyib-geo__moreToggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--g-border-2); border-radius: 999px; background: var(--g-surface); color: var(--g-text); font-size: .85rem; font-weight: 600; cursor: pointer; list-style: none; transition: background-color calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo .eyib-geo__moreToggle::-webkit-details-marker { display: none; } .eyib-geo .eyib-geo__moreToggle:hover { background: var(--g-surface-2); } .eyib-geo__moreCount { padding: 1px 7px; border-radius: 999px; background: var(--g-surface-2); color: var(--g-text-2); font-size: .75rem; font-variant-numeric: tabular-nums; } .eyib-geo__moreClose { display: none; } .eyib-geo__more[open] .eyib-geo__moreOpen { display: none; } .eyib-geo__more[open] .eyib-geo__moreClose { display: inline; } .eyib-geo__chevron { transition: transform calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo__more[open] .eyib-geo__chevron { transform: rotate(180deg); } .eyib-geo__rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; margin-top: 12px; animation: eyib-geo-fade calc(.3s * var(--g-motion)) var(--g-ease) both; } .eyib-geo__restItem { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--g-border); } .eyib-geo__restRank { color: var(--g-text-2); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } .eyib-geo__restItem .eyib-geo__name { font-size: .85rem; } .eyib-geo__restItem .eyib-geo__share { font-size: .8rem; } /* States: empty / unavailable */ .eyib-geo__state { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--g-border-2); border-radius: var(--g-radius-sm); background: var(--g-surface-2); text-align: center; } .eyib-geo__stateIcon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--g-surface); box-shadow: inset 0 0 0 1px var(--g-border); color: var(--g-text); } .eyib-geo__state--unavailable .eyib-geo__stateIcon { color: var(--g-accent); } .eyib-geo__stateTitle { margin: 0; color: var(--g-text); font-weight: 700; } .eyib-geo__stateText { margin: 0; color: var(--g-text-2); font-size: .85rem; } /* Skeleton */ .eyib-geo__skeleton .eyib-geo__card { min-height: 64px; } .eyib-geo__sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--g-surface-2) 25%, var(--g-border) 50%, var(--g-surface-2) 75%); background-size: 200% 100%; animation: eyib-geo-shimmer 1.4s linear infinite; } .eyib-geo__skeleton .eyib-geo__card .eyib-geo__sk { background-color: var(--g-surface); } .eyib-geo__sk--icon { flex: none; width: 36px; height: 36px; border-radius: 50%; } .eyib-geo__sk--label { width: 90px; height: 10px; margin-bottom: 8px; } .eyib-geo__sk--value { width: 120px; height: 18px; } .eyib-geo__sk--title { width: 110px; height: 12px; margin-bottom: 12px; } .eyib-geo__sk--flag { flex: none; width: 28px; height: 21px; border-radius: 3px; } .eyib-geo__sk--line { width: 70%; height: 10px; margin: 6px 0; } .eyib-geo__sk--bar { width: 100%; height: 6px; } .eyib-geo__sk--stack { width: 100%; height: 14px; margin-bottom: 12px; border-radius: 999px; } .eyib-geo__skRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .eyib-geo__skLines { flex: 1; min-width: 0; } @keyframes eyib-geo-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ------------------------------------------------------------------ footer */ .eyib-geo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: clamp(14px, 2vw, 18px); padding-top: clamp(12px, 1.6vw, 16px); border-top: 1px solid var(--g-border); } .eyib-geo__note { flex: 1 1 260px; margin: 0; color: var(--g-text-2); font-size: .78rem; } .eyib-geo .eyib-geo__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--g-primary); color: var(--g-on-primary); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color calc(.2s * var(--g-motion)) var(--g-ease), color calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo .eyib-geo__cta:hover { background: var(--g-hover); color: var(--g-on-hover); } .eyib-geo__cta svg { transition: transform calc(.2s * var(--g-motion)) var(--g-ease); } .eyib-geo .eyib-geo__cta:hover svg { transform: translateX(calc(2px * var(--g-motion))); } /* ------------------------------------------------------------------ tablets and up */ @media (min-width: 640px) { .eyib-geo__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eyib-geo__rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ desktop */ @media (min-width: 960px) { .eyib-geo__main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .eyib-geo__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ phones */ @media (max-width: 639px) { .eyib-geo__head { align-items: stretch; } .eyib-geo__ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 14px; } .eyib-geo .eyib-geo__range { border-radius: 10px; } .eyib-geo .eyib-geo__cta, .eyib-geo .eyib-geo__moreToggle { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { .eyib-geo__content, .eyib-geo__state, .eyib-geo__rest, .eyib-geo__barFill, .eyib-geo__stack, .eyib-geo__sk { animation: none; } .eyib-geo__card, .eyib-geo__country, .eyib-geo .eyib-geo__range, .eyib-geo .eyib-geo__cta, .eyib-geo__cta svg, .eyib-geo__chevron { transition: none; } .eyib-geo__content .eyib-geo__card:hover, .eyib-geo__content .eyib-geo__country:hover { transform: none; } }