/* ═══════════════════════════════════════════════════════════════════════════ /app — My Apps section styles (a7 design system). • Everything is scoped to .a7app-* so it can never collide with /about's .a7ab-* rules if both ever load on one document. • Reveal gate: while `html.a7app-js` is set, .a7app-reveal targets are hidden; .is-in (added by myapps.js / the safety net) reveals them. A dead-man switch in page.py removes `a7app-js` if myapps.js never runs, so content is never permanently blank. Base (no a7app-js) state is fully visible. • Theme-aware: light by default, dark via prefers-color-scheme AND the site's own dark toggle (html[data-theme="dark"] / .darkmode). • Logical properties throughout, so the whole section mirrors when myapps.js flips [dir] to ltr for English. ═══════════════════════════════════════════════════════════════════════════ */ .a7app-wrap { --a7app-fg: 222 20% 14%; --a7app-fg-soft: 222 12% 38%; --a7app-fg-faint: 222 10% 55%; --a7app-bg: 210 20% 99%; --a7app-surface: 0 0% 100%; --a7app-surface-2: 210 24% 97%; --a7app-border: 220 16% 88%; --a7app-accent: 222 80% 56%; --a7app-shadow: 220 40% 22%; --a7app-maxw: 1080px; --a7app-radius: 18px; --a7app-radius-sm: 12px; max-width: var(--a7app-maxw); margin: 0 auto; padding: 26px 20px 64px; color: hsl(var(--a7app-fg)); /* site-standard script-aware font — Inter for Latin, Tajawal for Arabic — the same font_en/font_ar tokens the shell + every other section use, so the font matches sitewide (no per-UI-language split: the tokens are script-aware) */ font-family: font_en, font_ar, sans; text-align: start; -webkit-font-smoothing: antialiased; } /* ⛔ Dark mode follows the SHELL's own toggle, which sets `dark` on (`body.dark`) — NOT html.dark and NOT the OS preference. Do NOT use @media prefers-color-scheme here: it would flip the section by OS preference independently of the site toggle → a dark section sitting on a light page (or vice-versa). Match the shell exactly so the section is always in step. */ body.dark .a7app-wrap, body.darkmode .a7app-wrap, html.dark .a7app-wrap, html[data-theme="dark"] .a7app-wrap { --a7app-fg: 210 30% 94%; --a7app-fg-soft: 214 16% 70%; --a7app-fg-faint: 214 12% 56%; --a7app-bg: 222 28% 8%; --a7app-surface: 222 22% 13%; --a7app-surface-2: 222 20% 16%; --a7app-border: 220 16% 26%; --a7app-accent: 216 90% 66%; --a7app-shadow: 0 0% 0%; } /* ── bilingual show/hide (mirrors the shell's own .t-ar/.t-en contract) ───── */ .a7app-wrap .t-en { display: none; } .a7app-wrap .t-ar { display: inline; } body.font-english .a7app-wrap .t-en { display: inline; } body.font-english .a7app-wrap .t-ar { display: none; } /* ══ REVEAL GATE ═════════════════════════════════════════════════════════════ Base = fully visible. Only when JS proved capable (html.a7app-js) do we hide the targets for the entrance, then reveal on .is-in. */ html.a7app-js .a7app-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } html.a7app-js .a7app-reveal.is-in { opacity: 1; transform: none; } /* per-child stagger inside the grid */ html.a7app-js .a7app-grid.is-in .a7app-card { opacity: 0; transform: translateY(12px); animation: a7app-pop .5s cubic-bezier(.22,.61,.36,1) forwards; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(1) { animation-delay: .02s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(2) { animation-delay: .07s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(3) { animation-delay: .12s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(4) { animation-delay: .17s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(5) { animation-delay: .22s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(6) { animation-delay: .27s; } html.a7app-js .a7app-grid.is-in .a7app-card:nth-child(n+7) { animation-delay: .3s; } @keyframes a7app-pop { to { opacity: 1; transform: none; } } /* ── breadcrumbs ──────────────────────────────────────────────────────────── */ .a7app-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: hsl(var(--a7app-fg-faint)); margin-bottom: 18px; } .a7app-crumb { color: hsl(var(--a7app-fg-soft)); text-decoration: none; } .a7app-crumb:hover { color: hsl(var(--a7app-accent)); } .a7app-crumb.is-here { color: hsl(var(--a7app-fg)); font-weight: 600; } .a7app-crumb-sep { color: hsl(var(--a7app-fg-faint)); } /* ── titlerow: section name between fade lines (identity standard) ────────── */ .a7app-titlerow { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 12px; } .a7app-tl-line { height: 1px; flex: 1 1 0; max-width: 220px; background: linear-gradient(to var(--a7app-line-dir, left), transparent, hsl(var(--a7app-border)) 45%, hsl(var(--a7app-border)) 55%, transparent); } .a7app-title { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; white-space: nowrap; } /* ── subtitle + rule divider (fade both ends, ~440px) ─────────────────────── */ .a7app-subtitle { text-align: center; color: hsl(var(--a7app-fg-soft)); font-size: clamp(14px, 2.4vw, 17px); line-height: 1.6; max-width: 620px; margin: 0 auto 18px; } .a7app-rule { height: 1px; width: min(440px, 82%); margin: 4px auto 26px; background: linear-gradient(to right, transparent, hsl(var(--a7app-border)), transparent); } /* ── hero kicker ──────────────────────────────────────────────────────────── */ .a7app-hero { text-align: center; margin-bottom: 20px; } .a7app-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--a7app-accent)); padding: 5px 12px; border-radius: 999px; background: hsl(var(--a7app-accent) / .1); } /* ── grid + cards ─────────────────────────────────────────────────────────── */ .a7app-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .a7app-empty { text-align: center; color: hsl(var(--a7app-fg-faint)); padding: 40px 0; } .a7app-card { display: flex; align-items: center; gap: 15px; padding: 16px; border-radius: var(--a7app-radius); background: hsl(var(--a7app-surface)); border: 1px solid hsl(var(--a7app-border)); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: 0 1px 2px hsl(var(--a7app-shadow) / .05); } .a7app-card:hover { transform: translateY(-2px); border-color: hsl(var(--a7app-accent) / .5); box-shadow: 0 10px 26px hsl(var(--a7app-shadow) / .12); } .a7app-card.is-featured { border-color: hsl(var(--a7app-accent) / .55); box-shadow: 0 0 0 1px hsl(var(--a7app-accent) / .22), 0 6px 18px hsl(var(--a7app-shadow) / .1); } /* «مميز / Featured» badge — a clear accent pill so featuring is visibly obvious */ .a7app-feat { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; line-height: 1; color: hsl(var(--a7app-accent)); background: hsl(var(--a7app-accent) / .12); border: 1px solid hsl(var(--a7app-accent) / .32); padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .a7app-feat svg { width: 11px; height: 11px; } .a7app-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .a7app-card-name { font-weight: 700; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a7app-card-tag { font-size: 13px; color: hsl(var(--a7app-fg-soft)); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .a7app-chip { align-self: start; margin-top: 4px; font-size: 11px; font-weight: 600; color: hsl(var(--a7app-fg-soft)); padding: 3px 9px; border-radius: 999px; background: hsl(var(--a7app-surface-2)); border: 1px solid hsl(var(--a7app-border)); } /* coming-soon (published app with no store link yet) */ .a7app-card-nrow { display: flex; align-items: center; gap: 8px; min-width: 0; } .a7app-card-nrow .a7app-card-name { min-width: 0; flex: 0 1 auto; } .a7app-soon { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; color: hsl(var(--a7app-accent)); background: hsl(var(--a7app-accent) / .12); border: 1px solid hsl(var(--a7app-accent) / .34); padding: 1px 8px; border-radius: 999px; } .a7app-soon-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1; color: hsl(var(--a7app-accent)); background: hsl(var(--a7app-accent) / .1); border: 1px dashed hsl(var(--a7app-accent) / .42); padding: 11px 16px; border-radius: 12px; } .a7app-soon-note svg { width: 18px; height: 18px; flex: 0 0 auto; } .a7app-card-go { flex: 0 0 auto; width: 20px; height: 20px; color: hsl(var(--a7app-fg-faint)); } .a7app-card-go svg { width: 100%; height: 100%; } body:not(.font-english) .a7app-card-go { transform: scaleX(-1); } /* ── icon tile (img / branded mask / monogram) ────────────────────────────── */ .a7app-icon { --sz: 58px; flex: 0 0 auto; width: var(--sz); height: var(--sz); border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: hsl(var(--a7app-accent) / .12); border: 1px solid hsl(var(--a7app-border)); } .a7app-icon.is-big { --sz: 92px; border-radius: 22px; } .a7app-icon img { width: 100%; height: 100%; object-fit: cover; } .a7app-icon.is-mono { font-weight: 800; font-size: calc(var(--sz) * .42); text-transform: uppercase; color: hsl(var(--a7app-accent)); } .a7app-icon.is-mask { background: hsl(var(--a7app-accent) / .12); } .a7app-icon.is-mask .a7app-icon-mk { display: block; width: 66%; height: 66%; background: hsl(var(--a7app-accent)); -webkit-mask: var(--a7app-mask) center / contain no-repeat; mask: var(--a7app-mask) center / contain no-repeat; } /* ── detail hero ──────────────────────────────────────────────────────────── */ .a7app-detail-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 6px 0 22px; } .a7app-detail-head { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; } .a7app-detail-name { font-size: clamp(24px, 5vw, 36px); font-weight: 800; letter-spacing: -.02em; margin: 0; } .a7app-detail-tag { font-size: clamp(15px, 2.6vw, 18px); color: hsl(var(--a7app-fg-soft)); margin: 0; line-height: 1.5; } /* ── store buttons ────────────────────────────────────────────────────────── */ .a7app-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .a7app-store { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid hsl(var(--a7app-border)); background: hsl(var(--a7app-surface)); color: hsl(var(--a7app-fg)); transition: transform .15s ease, box-shadow .15s ease; } .a7app-store svg { width: 18px; height: 18px; } /* App Store icon: the owner's exact icons8 line-art mark, served as a PNG and painted with currentColor through a CSS mask so it inherits the button's text colour — white on the dark primary button (light mode), dark in dark mode. */ .a7app-store-ico { display: inline-block; width: 19px; height: 19px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("/static/myapps/icons8-app-store-100.png") center / contain no-repeat; mask: url("/static/myapps/icons8-app-store-100.png") center / contain no-repeat; } .a7app-store:hover { transform: translateY(-1px); box-shadow: 0 6px 16px hsl(var(--a7app-shadow) / .12); } .a7app-store.is-primary { background: hsl(var(--a7app-fg)); color: hsl(var(--a7app-bg)); border-color: transparent; } /* ── meta pills ───────────────────────────────────────────────────────────── */ .a7app-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; } .a7app-meta-pill { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: hsl(var(--a7app-surface-2)); border: 1px solid hsl(var(--a7app-border)); min-width: 96px; } .a7app-meta-k { font-size: 11px; color: hsl(var(--a7app-fg-faint)); font-weight: 600; } .a7app-meta-v { font-size: 14px; font-weight: 700; } /* ── cover + screenshots ──────────────────────────────────────────────────── */ .a7app-cover { margin: 0 0 26px; border-radius: var(--a7app-radius); overflow: hidden; border: 1px solid hsl(var(--a7app-border)); } .a7app-cover img { display: block; width: 100%; height: auto; } .a7app-shots { margin: 0 0 30px; } .a7app-shots-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .a7app-shot { flex: 0 0 auto; width: 185px; height: 400px; object-fit: cover; border-radius: 14px; border: 1px solid hsl(var(--a7app-border)); scroll-snap-align: start; background-color: hsl(var(--a7app-surface-2)); } /* ── image skeletons — shimmer until the real image paints. Fail-safe: the opaque covers the shimmer even if the JS handler never clears it. The host reserves its box (icon = fixed size, screenshot = aspect-ratio) so there is no layout shift / thin-column collapse while loading. ──────────────────── */ @keyframes a7app-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .a7app-sk { background-color: hsl(var(--a7app-surface-2)); background-image: linear-gradient(100deg, hsl(var(--a7app-surface-2)) 30%, hsl(var(--a7app-fg) / .07) 47%, hsl(var(--a7app-fg) / .07) 53%, hsl(var(--a7app-surface-2)) 70%); background-size: 200% 100%; background-repeat: no-repeat; animation: a7app-sk 1.3s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .a7app-sk { animation: none; } } /* ── prose sections ───────────────────────────────────────────────────────── */ .a7app-prose, .a7app-features, .a7app-whatsnew, .a7app-video, .a7app-faq { margin: 0 0 30px; } .a7app-prose h2, .a7app-features h2, .a7app-whatsnew h2, .a7app-faq h2 { font-size: 19px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; } .a7app-prose p, .a7app-whatsnew p { color: hsl(var(--a7app-fg-soft)); line-height: 1.7; margin: 0; font-size: 15px; } .a7app-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .a7app-features li { position: relative; padding-inline-start: 26px; color: hsl(var(--a7app-fg-soft)); line-height: 1.6; font-size: 15px; } .a7app-features li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .55em; width: 8px; height: 8px; border-radius: 3px; background: hsl(var(--a7app-accent)); } .a7app-video video { width: 100%; border-radius: var(--a7app-radius); border: 1px solid hsl(var(--a7app-border)); background: #000; } /* ── FAQ accordion ────────────────────────────────────────────────────────── */ .a7app-faq-item { border: 1px solid hsl(var(--a7app-border)); border-radius: 12px; padding: 4px 14px; margin-bottom: 10px; background: hsl(var(--a7app-surface)); } .a7app-faq-item summary { cursor: pointer; font-weight: 600; padding: 10px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; } .a7app-faq-item summary::-webkit-details-marker { display: none; } .a7app-faq-item summary::after { content: "+"; color: hsl(var(--a7app-fg-faint)); font-size: 20px; } .a7app-faq-item[open] summary::after { content: "–"; } .a7app-faq-a { padding: 0 0 12px; color: hsl(var(--a7app-fg-soft)); line-height: 1.7; font-size: 14px; } .a7app-faq-empty { color: hsl(var(--a7app-fg-faint)); } /* ── legal links row (detail footer) ──────────────────────────────────────── */ .a7app-legal-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; padding-top: 22px; border-top: 1px solid hsl(var(--a7app-border)); } .a7app-legal-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: hsl(var(--a7app-fg-soft)); text-decoration: none; padding: 8px 14px; border-radius: 12px; border: 1px solid hsl(var(--a7app-border)); background: hsl(var(--a7app-surface)); } .a7app-legal-link svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; } /* branded contact-action buttons on legal pages (replace the plain text links) */ .a7app-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; } .a7app-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid hsl(var(--a7app-border)); background: hsl(var(--a7app-surface)); color: hsl(var(--a7app-fg)); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .a7app-cta svg { width: 18px; height: 18px; flex: 0 0 auto; } .a7app-cta:hover { transform: translateY(-1px); border-color: hsl(var(--a7app-accent) / .5); box-shadow: 0 6px 16px hsl(var(--a7app-shadow) / .12); } /* primary «راسلنا» = inverted button; its icon is currentColor = the bg tone, so it stays visible (white in light mode, dark in dark mode). */ .a7app-cta.is-primary { background: hsl(var(--a7app-fg)); color: hsl(var(--a7app-bg)); border-color: transparent; } .a7app-legal-link:hover { color: hsl(var(--a7app-accent)); border-color: hsl(var(--a7app-accent) / .5); } /* fade-edge hairline divider (site standard — dissolves toward both ends) */ .a7app-hr { border: 0; height: 1px; width: 100%; margin: 26px auto; background: linear-gradient(to right, transparent, hsl(var(--a7app-border)) 12%, hsl(var(--a7app-border)) 88%, transparent); } /* ── legal article ────────────────────────────────────────────────────────── */ .a7app-legal { max-width: 760px; margin: 0 auto; } .a7app-legal-title { font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; } .a7app-legal-updated, .a7app-legal-empty { color: hsl(var(--a7app-fg-faint)); font-size: 13px; margin: 0 0 20px; } .a7app-legal-body { color: hsl(var(--a7app-fg-soft)); line-height: 1.75; font-size: 16px; } .a7app-legal-body h3 { color: hsl(var(--a7app-fg)); font-size: 18px; font-weight: 700; margin: 26px 0 8px; } .a7app-legal-body p { margin: 0 0 14px; } .a7app-legal-body a { color: hsl(var(--a7app-accent)); text-decoration: underline; text-underline-offset: 2px; } .a7app-legal-body ul, .a7app-legal-body ol { padding-inline-start: 22px; margin: 0 0 14px; } .a7app-legal-body li { margin-bottom: 6px; } /* ── back button ──────────────────────────────────────────────────────────── */ .a7app-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; font-size: 14px; color: hsl(var(--a7app-fg)); text-decoration: none; padding: 9px 15px; border-radius: 11px; border: 1px solid hsl(var(--a7app-border)); background: hsl(var(--a7app-surface)); } .a7app-back svg { width: 18px; height: 18px; } .a7app-back:hover { border-color: hsl(var(--a7app-accent) / .5); color: hsl(var(--a7app-accent)); } body.font-english .a7app-back svg { transform: scaleX(-1); } /* ── 404 ──────────────────────────────────────────────────────────────────── */ .a7app-notfound { text-align: center; padding: 50px 0; } .a7app-nf-code { font-size: 96px; font-weight: 800; letter-spacing: -.05em; color: hsl(var(--a7app-fg-faint)); line-height: 1; } .a7app-notfound p { color: hsl(var(--a7app-fg-soft)); margin: 10px 0 8px; } /* ── responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .a7app-wrap { padding: 20px 16px 52px; } .a7app-grid { grid-template-columns: 1fr; } .a7app-tl-line { max-width: 90px; } .a7app-shot { width: 148px; height: 320px; } .a7app-detail-hero { gap: 14px; } /* meta pills: ONE row on mobile — compact + scroll if they can't all fit (the date pill is wide), instead of wrapping to a ragged second line. */ .a7app-meta { flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .a7app-meta::-webkit-scrollbar { display: none; } .a7app-meta-pill { min-width: 0; flex: 0 0 auto; padding: 9px 12px; } .a7app-meta-v { font-size: 13px; } /* contact buttons: ONE row on mobile (compact + horizontal scroll if the handle/email make them too wide), instead of a ragged 2+1 wrap. */ .a7app-cta-row { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .a7app-cta-row::-webkit-scrollbar { display: none; } .a7app-cta { flex: 0 0 auto; padding: 9px 13px; font-size: 13px; } .a7app-cta svg { width: 16px; height: 16px; } } /* ══ ONE terminal reduced-motion block — MUST be last ════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.a7app-js .a7app-reveal, html.a7app-js .a7app-reveal.is-in, html.a7app-js .a7app-grid.is-in .a7app-card { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .a7app-card { transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ Section-closed / «قريبًا» screen — the Card Designer's «.a7cs-» closure standard, rendered server-side by page.py _content_closure() when the section is turned off. Theme-aware via the shell's DaisyUI vars (--primary / --base-content / --base-100/200), identical to /cards. ════════════════════════════════════════════════════════════════════════════ */ .a7cs-wrap { --cs-accent: hsl(var(--primary)); --cs-accent-press: color-mix(in oklch, hsl(var(--primary)) 82%, #000); --cs-accent-soft: color-mix(in oklch, hsl(var(--primary)) 12%, transparent); --cs-text: hsl(var(--base-content)); --cs-muted: color-mix(in oklch, hsl(var(--base-content)) 62%, transparent); --cs-faint: color-mix(in oklch, hsl(var(--base-content)) 60%, transparent); --cs-surface-2: hsl(var(--base-200)); --cs-border: color-mix(in oklch, hsl(var(--base-content)) 12%, transparent); --cs-border-strong: color-mix(in oklch, hsl(var(--base-content)) 18%, transparent); min-height: 66vh; display: flex; align-items: center; justify-content: center; padding: 40px 22px; font-family: inherit; color: var(--cs-text); background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklch, hsl(var(--base-content)) 5%, transparent), transparent 60%); } .a7cs-card { width: 100%; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; } .a7cs-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 13px; font-weight: 700; margin-bottom: 30px; border: 1px solid color-mix(in oklch, hsl(var(--primary)) 22%, transparent); } .a7cs-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-accent); position: relative; } .a7cs-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cs-accent); animation: a7cs-pulse 1.8s cubic-bezier(.22,.61,.36,1) infinite; } @keyframes a7cs-pulse { 0% { transform: scale(1); opacity: .6 } 70% { transform: scale(3); opacity: 0 } 100% { opacity: 0 } } .a7cs-iconwrap { position: relative; width: 128px; height: 128px; margin-bottom: 34px; display: flex; align-items: center; justify-content: center; } .a7cs-ring { position: absolute; inset: 0; border-radius: 34px; border: 1.5px solid var(--cs-border-strong); animation: a7cs-floaty 5s ease-in-out infinite; } .a7cs-ring--b { inset: -14px; border-radius: 42px; opacity: .5; animation-delay: .4s; } .a7cs-iconbox { width: 96px; height: 96px; border-radius: 28px; background: linear-gradient(155deg, hsl(var(--primary)), var(--cs-accent-press)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-content)); box-shadow: 0 14px 34px -10px color-mix(in oklch, hsl(var(--primary)) 45%, transparent); animation: a7cs-floaty 5s ease-in-out infinite; } .a7cs-iconbox svg { width: 48px; height: 48px; } @keyframes a7cs-floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } } .a7cs-title { font-family: inherit; font-weight: 800; font-size: clamp(22px, 3.8vw, 28px); line-height: 1.3; margin: 0 0 14px; letter-spacing: -.3px; color: var(--cs-text); text-wrap: balance; } .a7cs-sub { font-size: clamp(15px, 2.4vw, 18px); color: var(--cs-muted); line-height: 1.7; margin: 0 0 34px; max-width: 430px; } .a7cs-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .a7cs-btn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-family: inherit; transition: transform .08s, background .14s; } .a7cs-btn svg { width: 18px; height: 18px; } /* Back-arrow points toward "home" per reading direction (flips in RTL). Scoped to the a7app-wrap dir (pinDir keeps it in sync with the language). */ .a7app-wrap[dir="rtl"] .a7cs-btn svg { transform: scaleX(-1); } .a7cs-btn:active { transform: scale(.97); } .a7cs-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-content)); box-shadow: 0 6px 18px -4px color-mix(in oklch, hsl(var(--primary)) 55%, transparent); } .a7cs-btn--primary:hover { background: var(--cs-accent-press); } .a7cs-progress { margin-top: 40px; width: 100%; max-width: 300px; } .a7cs-bar { height: 6px; border-radius: 999px; background: var(--cs-surface-2); overflow: hidden; border: 1px solid var(--cs-border); } .a7cs-fill { height: 100%; width: var(--cs-progress, 68%); border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), var(--cs-accent-press)); animation: a7cs-grow 2.4s cubic-bezier(.22,.61,.36,1) both; } @keyframes a7cs-grow { from { width: 0 } to { width: var(--cs-progress, 68%) } } .a7cs-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--cs-faint); } @media (prefers-reduced-motion: reduce) { .a7cs-ring, .a7cs-iconbox, .a7cs-pulse::after, .a7cs-fill { animation: none !important; } } /* a11y: interactive controls meet the ≥44px touch-target minimum (Apple HIG / the project's own standard). The buttons are already inline-flex+centred, so a min-height is all that's needed; breadcrumbs get a gentler tap area. */ .a7app-store, .a7app-cta, .a7app-legal-link, .a7app-back { min-height: 44px; display: inline-flex; align-items: center; } .a7app-crumb { display: inline-flex; align-items: center; padding-block: 4px; }