/* Shared UI polish: accessible navigation, responsive touch targets and scroll feedback. */ html { scroll-padding-top: 5rem; --ui-accent: var(--primary, var(--blue, var(--accent, #2563eb))); --ui-accent-2: var(--secondary, var(--green, #22c55e)); } html[data-ui-site="mycube"] { --ui-accent: #246bfd; --ui-accent-2: #ffd338; } html[data-ui-site="kita"] { --ui-accent: #159b97; --ui-accent-2: #ff716a; } html[data-ui-site="mezeg"] { --ui-accent: #087bb8; --ui-accent-2: #38bdf8; } html[data-ui-site="isave"] { --ui-accent: #0f766e; --ui-accent-2: #f59e0b; } html[data-ui-site="english"] { --ui-accent: #2563eb; --ui-accent-2: #8b5cf6; } html[data-ui-site="kinneret"] { --ui-accent: #087ea4; --ui-accent-2: #22d3ee; } html[data-ui-site="math"] { --ui-accent: #4f46e5; --ui-accent-2: #ec4899; } /* Mezeg's page shell uses flex on . Keep dynamically added UI helpers below the shell instead of allowing them to become horizontal flex items. */ html[data-ui-site="mezeg"] body { flex-direction: column; align-items: center; overflow-x: clip; } html[data-ui-site="mezeg"] .app-shell { flex: 0 0 auto; } body { overflow-wrap: anywhere; } ::selection { background: color-mix(in srgb, var(--ui-accent) 28%, transparent); } .skip-link { position: fixed; z-index: 5000; inset-block-start: 10px; inset-inline-start: 12px; padding: 11px 16px; border: 2px solid currentColor; border-radius: 12px; background: var(--surface, var(--paper, #fff)); color: var(--text, var(--ink, #111827)); font-weight: 800; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); transform: translateY(-180%); transition: transform .18s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); } main :where(section, article, [id]) { scroll-margin-top: 5rem; } @supports (content-visibility: auto) { main > section:nth-of-type(n + 2) { content-visibility: auto; contain-intrinsic-size: auto 720px; } } :where(h1, h2, h3) { text-wrap: balance; font-kerning: normal; } :where(h1) { letter-spacing: -.025em; } :where(h2) { letter-spacing: -.015em; } :where(p, li) { text-wrap: pretty; } :where(img, svg, video, canvas) { max-width: 100%; } img { height: auto; } :where(nav a, button, .btn, .button, [role="button"]) { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .2s ease; } main img:not([class*="icon"]):not([class*="logo"]) { transition: transform .42s cubic-bezier(.2, .75, .25, 1), filter .42s ease; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { main :where(figure, [class*="visual"], [class*="gallery"]) img:not([class*="icon"]):not([class*="logo"]):hover { transform: scale(1.018); filter: saturate(1.05) contrast(1.015); } } /* A second visual pass keeps every product's existing language while adding more depth and a clearer focal point to its opening area. */ html[data-ui-site="mycube"] .hero { border-color: color-mix(in srgb, var(--ui-accent) 18%, transparent); box-shadow: 0 28px 70px rgba(36, 107, 253, .09), 0 8px 24px rgba(15, 23, 42, .07); } html[data-ui-site="mycube"] .hero-cube-image { filter: drop-shadow(0 22px 24px rgba(15, 23, 42, .16)); } html[data-ui-site="kita"] .hero { border-color: color-mix(in srgb, var(--ui-accent) 22%, transparent); box-shadow: 0 28px 72px rgba(21, 155, 151, .1), 0 8px 26px rgba(15, 23, 42, .07); } html[data-ui-site="kita"] .hero__visual img { box-shadow: 0 20px 44px rgba(15, 23, 42, .14); } html[data-ui-site="kita"] .panel { border-color: color-mix(in srgb, var(--ui-accent) 15%, transparent); } html[data-ui-site="mezeg"] .hero, html[data-ui-site="mezeg"] .section-block { border-color: color-mix(in srgb, var(--ui-accent) 17%, transparent); box-shadow: 0 18px 48px rgba(8, 123, 184, .075); } html[data-ui-site="mezeg"] .hero { background-image: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--ui-accent-2) 10%, transparent), transparent 36%); } html[data-ui-site="isave"] .app-header { border-color: color-mix(in srgb, var(--ui-accent-2) 26%, transparent); background-image: radial-gradient(circle at 12% 15%, rgba(245, 158, 11, .1), transparent 32%); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); } html[data-ui-site="isave"] .tab-btn.is-active { box-shadow: 0 8px 26px rgba(245, 158, 11, .18); } html[data-ui-site="english"] .view.active > .hero { padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid color-mix(in srgb, var(--ui-accent-2) 22%, transparent); border-radius: 24px; background: radial-gradient(circle at 88% 8%, rgba(139, 92, 246, .12), transparent 42%); box-shadow: 0 24px 68px rgba(0, 0, 0, .18); } html[data-ui-site="english"] .card, html[data-ui-site="english"] [class*="card"] { border-color: color-mix(in srgb, var(--ui-accent-2) 18%, transparent); } html[data-ui-site="kinneret"] .intro.card { border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent); box-shadow: 0 25px 64px rgba(8, 126, 164, .13); } html[data-ui-site="kinneret"] main .card { backdrop-filter: blur(14px); } html[data-ui-site="math"] .site-header .hero { padding-block: clamp(1.35rem, 3vw, 2.25rem); border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, transparent); border-radius: 28px; background: radial-gradient(circle at 78% 22%, rgba(79, 70, 229, .18), transparent 40%); box-shadow: 0 28px 72px rgba(0, 0, 0, .2); } html[data-ui-site="math"] .tab-btn.active, html[data-ui-site="math"] .btn.primary { box-shadow: 0 10px 28px rgba(79, 70, 229, .24); } :where(button, input, select, textarea, [role="button"]) { font: inherit; } :where(button, .btn, .button, [role="button"]) { touch-action: manipulation; } :where(details > summary) { min-height: 44px; display: flex; align-items: center; cursor: pointer; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; } :where(nav a)[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: .3em; background: color-mix(in srgb, var(--ui-accent) 10%, transparent); border-radius: .7em; } :where(input, select, textarea) { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } :where(input, select, textarea):focus { border-color: color-mix(in srgb, var(--ui-accent) 70%, currentColor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 13%, transparent); } .ui-reading-progress { position: fixed; z-index: 4000; inset: 0 0 auto; height: 4px; pointer-events: none; background: transparent; } .ui-reading-progress > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); box-shadow: 0 1px 8px color-mix(in srgb, var(--ui-accent) 45%, transparent); } .ui-back-to-top { position: fixed; z-index: 3500; inset-inline-end: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 15px; background: linear-gradient(145deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 72%, #111827)); color: #fff; box-shadow: 0 12px 32px color-mix(in srgb, var(--ui-accent) 30%, transparent); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .ui-back-to-top > span { font-size: 1.45rem; font-weight: 900; line-height: 1; } .ui-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .ui-share-card { width: min(1120px, calc(100% - 32px)); margin: clamp(2.5rem, 6vw, 5rem) auto 1.5rem; padding: clamp(1rem, 3vw, 1.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, transparent); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface, var(--paper, #fff)) 95%, var(--ui-accent) 5%), color-mix(in srgb, var(--surface, var(--paper, #fff)) 96%, var(--ui-accent-2) 4%)); color: var(--text, var(--ink, #111827)); box-shadow: 0 14px 36px rgba(15, 23, 42, .08); } .ui-breadcrumb { width: min(1120px, calc(100% - 32px)); margin: 1rem auto .5rem; padding: .65rem .85rem; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; color: color-mix(in srgb, var(--text, var(--ink, #111827)) 68%, transparent); font-size: .9rem; border: 1px solid color-mix(in srgb, var(--ui-accent) 13%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface, var(--paper, #fff)) 88%, transparent); box-shadow: 0 8px 26px rgba(15, 23, 42, .055); backdrop-filter: blur(12px); } .ui-breadcrumb a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } .ui-breadcrumb a:hover { color: var(--ui-accent); } .ui-breadcrumb span[aria-current="page"] { max-width: min(70ch, 75vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-share-card__copy { min-width: 0; } .ui-share-card__copy strong, .ui-share-card__copy span { display: block; } .ui-share-card__copy strong { margin-bottom: .2rem; font-size: clamp(1rem, 2vw, 1.15rem); } .ui-share-card__copy span { color: color-mix(in srgb, currentColor 72%, transparent); font-size: .92rem; } .ui-share-button { flex: 0 0 auto; min-height: 46px; padding: .7rem 1rem; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 76%, var(--ui-accent-2))); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent) 24%, transparent); transition: transform .18s ease, box-shadow .18s ease; } .ui-share-button:hover { transform: translateY(-2px); box-shadow: 0 11px 26px color-mix(in srgb, var(--ui-accent) 32%, transparent); } :where(button, .btn, .button, [role="button"]):active { transform: translateY(1px) scale(.985); } :where( .type-card, .step-card, .game-card, .activity-card, .feature-card, .hub-card, .guide-card, .article-card, .topic-card, .grade-card, .stat-card, .resource-card, .section-block, article.card, .card ) { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { :where( .type-card, .step-card, .game-card, .activity-card, .feature-card, .hub-card, .guide-card, .article-card, .topic-card, .grade-card, .stat-card, .resource-card, article.card, .card ):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent); box-shadow: 0 18px 44px rgba(15, 23, 42, .12); } } .ui-motion-ready .ui-reveal { opacity: 0; transform: translateY(18px) scale(.992); } .ui-motion-ready .ui-reveal.is-revealed { opacity: 1; transform: translateY(0) scale(1); transition: opacity .48s ease var(--ui-delay, 0ms), transform .48s cubic-bezier(.2, .75, .25, 1) var(--ui-delay, 0ms); } .ui-toast { position: fixed; z-index: 5200; inset-inline-start: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: .75rem 1rem; border-radius: 12px; background: #111827; color: #fff; font-weight: 700; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .ui-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .ui-back-to-top:hover { transform: translateY(-3px) scale(1.02); } @media (max-width: 700px) { html { scroll-padding-top: 4.25rem; } main :where(section, article, [id]) { scroll-margin-top: 4.25rem; } :where(button, .btn, .button, [role="button"]) { min-height: 44px; } :where(input, select, textarea) { font-size: 16px; } .ui-back-to-top { width: 46px; height: 46px; border-radius: 14px; } .ui-share-card { align-items: stretch; flex-direction: column; } .ui-share-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .ui-reveal { opacity: 1 !important; transform: none !important; } } @media print { .ui-reading-progress, .ui-back-to-top, .ui-share-card, .ui-toast { display: none !important; } main > section { content-visibility: visible !important; contain-intrinsic-size: auto !important; } }