/* ════════════════════════════════════════════════════════════════════ LEVEL SELECTION — the one content/level picker, used everywhere the student chooses what to play: the κατάλογος παιχνιδιών, the γραμματική ασκήσεις (αρχαία + λατινικά), the PvP / Live arena content step. Two layers live here: 1. THEME — the component ships against semantic --app-* hooks and never sets a colour of its own. We alias those onto the site's --sym-* tokens once, so it wears whichever of the ~40 palettes the app is currently in, with nothing to re-render on a theme change. 2. COMPONENT — the .ls-* styles themselves (js/level-select.js). A third section re-skins the older two-pane .gpx-* picker that the 16 standalone grammar games still render, so a student moving between a game's own picker and this one does not cross a visual seam. ════════════════════════════════════════════════════════════════════ */ /* ─── 1 · THEME: --app-* ← --sym-* ───────────────────────────────────── Derived tones use color-mix against --sym-fg rather than a literal, so "one step lighter" resolves correctly on light AND dark palettes: on alabaster it darkens toward the ink, on hearth it lifts toward cream. Declared on the component roots, NOT on :root — the --sym-* tokens live on the .theme-* class the app puts on #sym-home and , which is BELOW :root. Aliasing up there resolved every var() to its fallback, so the picker stayed alabaster-coloured in every palette. */ .ls-root, .ls-scope, .gpx-pick { --app-bg: var(--sym-bg, #F7F3EA); --app-surface: var(--sym-bg-card, #fff); --app-surface-2: color-mix(in srgb, var(--sym-fg, #1E1810) 4%, var(--sym-bg-card, #fff)); --app-border: color-mix(in srgb, var(--sym-fg, #1E1810) 15%, transparent); --app-border-soft: color-mix(in srgb, var(--sym-fg, #1E1810) 9%, transparent); --app-ink: var(--sym-fg, #1E1810); --app-ink-muted: var(--sym-fg-muted, #8C7F6B); --app-ink-faint: color-mix(in srgb, var(--sym-fg-muted, #8C7F6B) 82%, var(--sym-bg, #F7F3EA)); --app-accent: var(--sym-terra, #C5572F); --app-accent-light:color-mix(in srgb, var(--sym-terra, #C5572F) 80%, var(--sym-fg, #1E1810)); --app-on-accent: var(--sym-cream, #FBF8F1); --app-highlight: var(--sym-gold, #A2862F); --app-success: var(--sym-sage, #5B7544); --app-danger: var(--sym-terra-dk, #9C3F1F); --app-font-display:var(--sym-font-serif, 'Cormorant Garamond', 'Alegreya', Georgia, serif); --app-font-ui: var(--sym-font-sans, 'Alegreya Sans', system-ui, sans-serif); } .ls-root, .ls-scope, .gpx-pick { --ls-bg: var(--app-bg); --ls-surface: var(--app-surface); --ls-surface-2: var(--app-surface-2); --ls-line: var(--app-border); --ls-line-soft: var(--app-border-soft); --ls-ink: var(--app-ink); --ls-mut: var(--app-ink-muted); --ls-mut-2: var(--app-ink-faint); --ls-accent: var(--app-accent); --ls-accent-2: var(--app-accent-light); --ls-on-accent: var(--app-on-accent); --ls-gold: var(--app-highlight); --ls-ok: var(--app-success); --ls-danger: var(--app-danger); --ls-radius: 14px; --ls-radius-lg: 18px; --ls-font-display:var(--app-font-display); --ls-font-ui: var(--app-font-ui); } /* ─── 2 · COMPONENT ──────────────────────────────────────────────────── */ .ls-root { font-family: var(--ls-font-ui); color: var(--ls-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } .ls-root * { box-sizing: border-box; } .ls-fade { animation: ls-f .28s ease; } @keyframes ls-f { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* top bar — the app's own back pill, not a second dialect of it */ .ls-bar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--ls-line-soft); background: color-mix(in srgb, var(--ls-bg) 82%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; } .ls-bar .ls-title { flex: 1; text-align: center; font-family: var(--ls-font-display); font-weight: 700; font-size: 16.5px; color: var(--ls-gold); } .ls-wrap { max-width: 980px; margin: 0 auto; padding: 24px 22px 70px; } /* hero */ .ls-hero { text-align: center; margin-bottom: 18px; } .ls-hero .ls-badge { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; } .ls-hero .ls-badge svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .ls-hero h1 { font-family: var(--ls-font-display); font-weight: 700; font-size: clamp(26px, 4vw, 36px); color: var(--ls-gold); line-height: 1.1; } .ls-hero p { color: var(--ls-mut); font-size: 15px; font-style: italic; margin-top: 2px; } .ls-hero .ls-blurb { color: var(--ls-mut); font-size: 14px; font-style: normal; max-width: 560px; margin: 8px auto 0; line-height: 1.55; } .ls-share { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; border: 1px solid var(--ls-line); background: color-mix(in srgb, var(--ls-ink) 4%, transparent); color: var(--ls-ink); border-radius: 999px; padding: 8px 16px; font: 700 13.5px var(--ls-font-ui); cursor: pointer; } .ls-share:hover { border-color: var(--ls-accent); color: var(--ls-accent-2); } .ls-share svg { width: 16px; height: 16px; } .ls-prog { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 16px auto 0; } .ls-prog .ls-track { flex: 1; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ls-ink) 12%, transparent); overflow: hidden; } .ls-prog .ls-track b { display: block; height: 100%; background: linear-gradient(90deg, var(--ls-accent-2), var(--ls-accent)); } .ls-prog small { font-size: 12.5px; font-weight: 700; color: var(--ls-mut-2); white-space: nowrap; } /* two-column */ .ls-cols { display: grid; grid-template-columns: 248px 1fr; gap: 18px; margin-top: 22px; align-items: start; } @media (max-width: 720px) { .ls-cols { grid-template-columns: 1fr; } } .ls-side { align-self: start; border: 1px solid var(--ls-line-soft); background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); border-radius: 16px; padding: 12px; } .ls-lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-mut-2); font-weight: 800; padding: 6px 8px 10px; } .ls-cat { width: 100%; text-align: left; border: none; background: none; border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: .14s; display: flex; align-items: center; gap: 11px; margin-bottom: 2px; font-family: var(--ls-font-ui); } .ls-cat:hover { background: color-mix(in srgb, var(--ls-ink) 5%, transparent); } .ls-cat.on { background: color-mix(in srgb, var(--ls-accent) 14%, transparent); } .ls-cat .m { flex: 1; min-width: 0; } .ls-cat .m b { font-family: var(--ls-font-display); font-size: 15.5px; font-weight: 700; color: var(--ls-ink); display: block; line-height: 1.15; } .ls-cat.on .m b { color: var(--ls-accent-2); } .ls-cat .m small { font-size: 11.5px; color: var(--ls-mut-2); font-weight: 600; } .ls-ring { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ls-accent) calc(var(--p) * 3.6deg), color-mix(in srgb, var(--ls-ink) 10%, transparent) 0); } .ls-ring b { width: 20px; height: 20px; border-radius: 50%; background: var(--ls-surface); display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: var(--ls-mut-2); } .ls-cat.done .ls-ring b { color: var(--ls-ok); } .ls-cat.custom { border: 1.5px dashed var(--ls-line); margin-top: 8px; } .ls-cat.custom .m b { color: var(--ls-accent-2); } /* levels */ .ls-phead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; padding: 0 2px; } .ls-phead h2 { font-family: var(--ls-font-display); font-weight: 700; font-size: 21px; letter-spacing: .02em; } .ls-phead small { color: var(--ls-mut-2); font-size: 13px; font-weight: 700; } .ls-levels { display: flex; flex-direction: column; gap: 9px; } .ls-lv { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ls-line-soft); background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); border-radius: 13px; padding: 13px 15px; cursor: pointer; transition: .15s; } .ls-lv:hover { border-color: var(--ls-accent); transform: translateY(-2px); } .ls-lv.lock { opacity: .5; cursor: not-allowed; } .ls-lv.lock:hover { transform: none; border-color: var(--ls-line-soft); } .ls-lv .n { width: 38px; height: 38px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--ls-ink) 5%, transparent); color: var(--ls-mut); display: grid; place-items: center; font-family: var(--ls-font-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; } .ls-lv.done .n { background: color-mix(in srgb, var(--ls-ok) 18%, transparent); color: var(--ls-ok); } .ls-lv.cur .n { background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); } .ls-lv .m { flex: 1; min-width: 0; } .ls-lv .m h4 { font-size: 15px; font-weight: 600; line-height: 1.25; } .ls-lv .m small { color: var(--ls-mut-2); font-size: 12px; } .ls-lv .cta { font: 800 12.5px var(--ls-font-ui); color: var(--ls-accent-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ls-lv.cur .cta { color: var(--ls-gold); } .ls-lv.lock .cta { color: var(--ls-mut-2); } .ls-lv .cta svg { width: 15px; height: 15px; } @media (max-width: 520px) { .ls-lv .cta { display: none; } } /* mode select */ .ls-msel { max-width: 720px; margin: 0 auto; } .ls-lvtag { font-family: var(--ls-font-display); font-weight: 700; font-size: 21px; color: var(--ls-gold); } .ls-lvname { color: var(--ls-mut); font-size: 15px; margin-bottom: 18px; } .ls-slab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-mut-2); font-weight: 800; margin-bottom: 10px; } .ls-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 18px; grid-auto-rows: 1fr; } @media (max-width: 600px) { .ls-modes { grid-template-columns: repeat(2, 1fr); } } .ls-mode { position: relative; text-align: center; border: 1px solid var(--ls-line-soft); background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); border-radius: 14px; padding: 17px 12px; cursor: pointer; transition: .15s; font-family: var(--ls-font-ui); color: var(--ls-ink); } .ls-mode:hover { transform: translateY(-3px); border-color: var(--ls-accent); } .ls-mode.on { border-color: var(--ls-accent); box-shadow: 0 0 0 1px var(--ls-accent); } .ls-mode .ic { width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ls-accent) 14%, transparent); color: var(--ls-accent-2); } .ls-mode .ic svg { width: 22px; height: 22px; } .ls-mode h3 { font-family: var(--ls-font-display); font-size: 16px; font-weight: 700; line-height: 1.1; } .ls-mode p { color: var(--ls-mut-2); font-size: 11.5px; margin-top: 4px; font-style: italic; line-height: 1.3; } .ls-mode.feat { background: linear-gradient(120deg, color-mix(in srgb, var(--ls-accent) 16%, transparent), color-mix(in srgb, var(--ls-gold) 8%, transparent)); border-color: color-mix(in srgb, var(--ls-accent) 40%, transparent); } .ls-mode.feat .ic { background: conic-gradient(from 130deg, var(--ls-accent), var(--ls-gold), var(--ls-danger), var(--ls-accent)); color: #fff; } .ls-mode .tagx { position: absolute; top: 0; right: 0; background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); font: 800 9.5px var(--ls-font-ui); letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-bottom-left-radius: 11px; } .ls-setwrap { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; } .ls-setg { flex: 1; min-width: 210px; } .ls-opts { display: flex; gap: 7px; flex-wrap: wrap; } .ls-opt { border: 1px solid var(--ls-line-soft); background: color-mix(in srgb, var(--ls-ink) 3%, transparent); color: var(--ls-mut); border-radius: 999px; padding: 8px 15px; font: 700 14px var(--ls-font-ui); cursor: pointer; transition: .14s; min-width: 46px; text-align: center; } .ls-opt:hover { color: var(--ls-ink); border-color: var(--ls-line); } .ls-opt.on { background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); border-color: transparent; } .ls-sharecfg { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px dashed var(--ls-line); background: color-mix(in srgb, var(--ls-ink) 2%, transparent); color: var(--ls-mut); border-radius: 12px; padding: 11px; font: 700 13.5px var(--ls-font-ui); cursor: pointer; margin-bottom: 14px; } .ls-sharecfg:hover { border-color: var(--ls-accent); color: var(--ls-accent-2); } .ls-sharecfg svg { width: 16px; height: 16px; } .ls-startrow { display: flex; justify-content: center; } .ls-start { border: none; border-radius: 999px; background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); font-family: var(--ls-font-display); font-weight: 700; font-size: 16px; padding: 12px 34px; cursor: pointer; transition: .16s; display: inline-flex; align-items: center; gap: 8px; } .ls-start:hover { transform: translateY(-2px); filter: brightness(1.05); } .ls-start svg { width: 17px; height: 17px; } /* Mounted full-screen in an overlay, or embedded in a screen that already has its own header: in both cases the page supplies the back pill, so the component's own bar would be a second one. */ .game-overlay .ls-root > .ls-bar, .ls-embed.ls-root > .ls-bar { display: none; } .ls-embed.ls-root > .ls-wrap { padding: 0 0 24px; max-width: none; } .ls-host { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* ─── 3 · The older two-pane picker (.gpx-*), same visual language ───── 16 standalone grammar games render this markup. Rather than rewrite each one, re-skin it: rounder rows, the same rail treatment, the same accent behaviour. Structure and behaviour are untouched. */ .gpx-pick .gpx-body { border-color: var(--ls-line-soft); border-radius: 16px; } .gpx-pick .gpx-rail { background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); border-right-color: var(--ls-line-soft); } .gpx-pick .gpx-rail-lbl { font-size: 10.5px; letter-spacing: .14em; font-weight: 800; } .gpx-pick .gpx-railitem { border-radius: 11px; } .gpx-pick .gpx-railitem.on { background: color-mix(in srgb, var(--ls-accent) 14%, transparent); } .gpx-pick .gpx-railitem .nm { font-family: var(--ls-font-display); font-size: 15.5px; } .gpx-pick .gpx-row { border-radius: 13px; background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); border-color: var(--ls-line-soft); } .gpx-pick .gpx-row:hover { border-color: var(--ls-accent); } .gpx-pick .gpx-num { border-radius: 11px; width: 38px; height: 38px; font-family: var(--ls-font-display); } .gpx-pick .gpx-detail-hd h3 { font-family: var(--ls-font-display); font-size: 21px; } /* ─── 4 · The other two selection surfaces, same language ────────────── The Live Arena host setup and the universal «Διάλεξε ύλη» mix picker predate this component and each had invented its own controls. Both now carry .ls-scope, so the tokens above resolve inside them and the shared .ls-slab / .ls-opts / .ls-opt controls can be used directly. What is left here re-skins the markup those screens still own. */ /* Live setup: section labels and option pills match the picker exactly. */ .ls-scope .sc-cfg__l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-mut-2); font-weight: 800; margin-bottom: 10px; } .ls-scope .sc-cfg__hint { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .8; } .ls-scope .sc-cfg__opts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } .ls-scope .sc-cfg__o { border: 1px solid var(--ls-line-soft); background: color-mix(in srgb, var(--ls-ink) 3%, transparent); color: var(--ls-mut); border-radius: 999px; padding: 8px 15px; font: 700 14px var(--ls-font-ui); cursor: pointer; transition: .14s; min-width: 46px; text-align: center; } .ls-scope .sc-cfg__o:hover { color: var(--ls-ink); border-color: var(--ls-line); } .ls-scope .sc-cfg__o.active { background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); border-color: transparent; } /* The «Διάλεξε ύλη» filter chips were pinned to a literal #2e9e4f, so the one green thing on the page fought every palette. Follow the accent. */ .ls-scope .syn-tagchip { border-radius: 999px; font-family: var(--ls-font-ui); } .ls-scope .syn-tagchip.on { background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); border-color: transparent; color: var(--ls-on-accent); } .ls-scope .syn-mix__lbl { font-family: var(--ls-font-ui); font-size: 10.5px; letter-spacing: .14em; font-weight: 800; color: var(--ls-mut-2); } .ls-scope .syn-mix__search { border-radius: 999px; font-family: var(--ls-font-ui); } .ls-scope .syn-mix__start { border-radius: 999px; font-family: var(--ls-font-display); text-transform: none; } .ls-scope .syn-mix__bar { border-radius: 999px; } /* ── The «Διάλεξε ύλη» surface, in full ────────────────────────────── The chips alone were not the problem: the whole screen was a second design language sitting one click away from the picker — square cards, its own label scale, its own button silhouettes. Everything below maps that markup onto the same tokens and shapes the picker uses, so the two screens read as one flow. Structure and behaviour are untouched; this is presentation only. */ /* section headings (ΓΡΑΜΜΑΤΙΚΗ / ΟΜΗΡΙΚΗ ΠΟΙΗΣΗ / ΛΑΤΙΝΙΚΑ) — the picker's .ls-lbl treatment */ .ls-scope .syn-ds-cat { font-family: var(--ls-font-ui); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ls-mut-2); } /* a source card is a level row: same radius, same gradient, same lift */ .ls-scope .syn-ds { border-radius: 13px; border: 1px solid var(--ls-line-soft); background: linear-gradient(180deg, var(--ls-surface-2), var(--ls-surface)); transition: .15s; } .ls-scope .syn-ds:hover { border-color: var(--ls-accent); transform: translateY(-2px); } .ls-scope .syn-ds.on { border-color: var(--ls-accent); box-shadow: 0 0 0 1px var(--ls-accent); } .ls-scope .syn-ds.locked:hover { transform: none; border-color: var(--ls-line-soft); } .ls-scope .syn-ds__ic { border-radius: 11px; background: color-mix(in srgb, var(--ls-ink) 5%, transparent); } .ls-scope .syn-ds.on .syn-ds__ic { background: color-mix(in srgb, var(--ls-accent) 18%, transparent); } .ls-scope .syn-ds__name { font-family: var(--ls-font-display); font-size: 15px; font-weight: 600; color: var(--ls-ink); } .ls-scope .syn-ds__meta { font-size: 12px; color: var(--ls-mut-2); } /* "+ MIX" is the row's call to action — the picker's .cta, as a pill */ .ls-scope .syn-ds__mix { border-radius: 999px; border: 1px solid var(--ls-line-soft); background: color-mix(in srgb, var(--ls-ink) 3%, transparent); color: var(--ls-accent-2); font: 800 12.5px var(--ls-font-ui); padding: 8px 15px; transition: .14s; } .ls-scope .syn-ds__mix:hover { border-color: var(--ls-accent); } .ls-scope .syn-ds__mix.on { background: linear-gradient(180deg, var(--ls-accent-2), var(--ls-accent)); color: var(--ls-on-accent); border-color: transparent; } .ls-scope .syn-ds__flag { border-radius: 999px; font: 700 11px var(--ls-font-ui); color: var(--ls-mut-2); } /* the teacher upload card — same card language, dashed like .ls-cat.custom */ .ls-scope .syn-ds-upload { border-radius: 16px; border: 1.5px dashed var(--ls-line); background: color-mix(in srgb, var(--ls-ink) 2%, transparent); transition: .15s; } .ls-scope .syn-ds-upload:not(.locked):hover { border-color: var(--ls-accent); } .ls-scope .syn-ds-upload__name { font-family: var(--ls-font-display); font-size: 15.5px; font-weight: 700; color: var(--ls-ink); } .ls-scope .syn-ds-upload__meta { font-size: 12px; color: var(--ls-mut-2); } .ls-scope .syn-ds-upload__ic { border-radius: 11px; background: color-mix(in srgb, var(--ls-ink) 5%, transparent); } .ls-scope .syn-ds-upload__pill { border-radius: 999px; border: 1px solid var(--ls-line-soft); background: transparent; color: var(--ls-mut-2); font: 800 10px var(--ls-font-ui); letter-spacing: .06em; } .ls-scope .syn-ds-upload__cta { border-radius: 999px; border: 1px solid var(--ls-line); background: color-mix(in srgb, var(--ls-ink) 4%, transparent); color: var(--ls-ink); font: 700 12.5px var(--ls-font-ui); padding: 9px 17px; } .ls-scope .syn-ds-upload:not(.locked) .syn-ds-upload__cta:hover { background: var(--ls-accent); color: var(--ls-on-accent); border-color: transparent; } /* per-source level pills — the picker's level rows, compressed */ .ls-scope .syn-ds-levels { border-radius: 14px; border-color: var(--ls-line); background: color-mix(in srgb, var(--ls-accent) 6%, var(--ls-surface)); } .ls-scope .syn-lvrowpill, .ls-scope .syn-lvpill--all { border-radius: 11px; border-color: var(--ls-line-soft); font-family: var(--ls-font-ui); } .ls-scope .syn-lvrowpill:hover { border-color: var(--ls-accent); } .ls-scope .syn-lvrowpill.on, .ls-scope .syn-lvpill--all.on { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 12%, transparent); } .ls-scope .syn-lvgrp { font-family: var(--ls-font-ui); font-size: 10.5px; letter-spacing: .14em; font-weight: 800; color: var(--ls-mut-2); } .ls-scope .syn-lv-fold, .ls-scope .syn-lvgrp-all, .ls-scope .syn-lvgrp-fold { border-radius: 999px; font-family: var(--ls-font-ui); } /* Long Greek source names were being cut ("Συνηρημένα Ρ…", "Λατινικά Ουσι…"): the pill CTA is wider than the dashed chip it replaced, and the name is nowrap+ellipsis by design. Give the names two lines and hand the cards a little more width instead of trimming the words. */ .ls-scope .syn-ds-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ls-scope .syn-ds__name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; } .ls-scope .syn-ds__mix { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 7px 13px; }