/* ===================================================================== The Circl - Marketing Website Single shared stylesheet --------------------------------------------------------------------- Fonts: New Farm - the primary Latin typeface, licensed through Adobe Fonts web project evk2vqt (loaded from a in the layout head; the CSS family Adobe exposes is "new-farm"). The project serves weights 100/300/400/500/700, normal style only: there is no SemiBold and no italic, so a font-weight:600 rule resolves to the real 700 face by standard CSS font matching, and italics are browser-synthesised. SN Pro ("SNPro") - the controlled LOCAL fallback, bundled as two variable TTFs (wght 200-900, upright + italic) under /assets/fonts/fallbackFont/SNPro. If Adobe Fonts is unreachable, Latin text falls back to SNPro, never to a system default. Playpen Sans Arabic (Arabic) - bundled TTF (exact). Neither New Farm nor SN Pro carries Arabic glyphs, so Arabic keeps this face. ===================================================================== */ /* The Adobe Fonts stylesheet loads from a in the layout head (PERF-01): an @import here would chain style.css -> fonts CSS -> font files and block rendering. */ @font-face { font-family: "Playpen Sans Arabic"; src: url("../fonts/fallbackFont/PlaypenSansArabic/PlaypenSansArabic.woff") format("woff"), url("../fonts/fallbackFont/PlaypenSansArabic/PlaypenSansArabic.ttf") format("truetype"); font-weight: 100 800; font-display: swap; } /* SN Pro variable fonts - the whole 200-900 range in one file per style, so no static weight is fabricated and none is missing. TTF is the only format shipped with the family; the files are served as-is, unconverted. */ @font-face { font-family: "SNPro"; src: url("../fonts/fallbackFont/SNPro/SNPro-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "SNPro"; src: url("../fonts/fallbackFont/SNPro/SNPro-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ------------------------------- Variables ------------------------------- */ :root { /* Brand colours */ --purple: #6a48e5; --purple-deep: #5128cc; --purple-logo: #635aa7; --violet: #5e0fe0; --ink: #221237; --near-black: #1c1b1a; --body: #484555; --muted: #51575c; --yellow: #f5c952; --yellow-light: #ffd25a; --green: #46ce99; --cream: #f9f4f2; --card: #fdf8f6; --border: #cac4d7; --white: #ffffff; /* Type. One controlled Latin stack - Adobe's "new-farm" first, the local SNPro variable font as the guaranteed fallback, then generic sans-serif. The three Latin tokens are kept separate on purpose: they mark distinct typographic ROLES (display / UI / eyebrows) even while one family now serves all of them, so a future split costs one line each. Arabic keeps its own face - neither New Farm nor SN Pro has Arabic glyphs. */ /* Playpen closes the Latin stacks so Arabic glyphs on an English page - the "العربية" locale pill above all - resolve to OUR Arabic face per character instead of an uncontrolled system font of unpredictable width. */ --font-display: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif; --font-ui: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif; --font-alt: "new-farm", "SNPro", "Playpen Sans Arabic", sans-serif; --font-ar: "Playpen Sans Arabic", "SNPro", sans-serif; /* Layout */ --container: 1240px; --gutter: 100px; /* Radius */ --r-pill: 9999px; --r-lg: 50px; --r-md: 25px; --r-sm: 16px; /* Effects */ /* Shared by both dashboards (member .dash and therapist .tdash). */ --dash-card-shadow: 0 2px 14px rgba(28, 27, 26, 0.06), 0 1px 3px rgba(28, 27, 26, 0.04); --ring: inset 0 0 0 1px var(--border); --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } /* --------------------------------- Reset --------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Shared page-level background doodles, rendered behind every page. */ .page-doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("../images/bg-scribbles-1.svg"), url("../images/bg-loop-yellow.svg"), url("../images/bg-bolt-yellow.svg"), url("../images/bg-swoosh-purple.svg"), url("../images/bg-scribbles-2.svg"), url("../images/bg-bolt-yellow.svg"); background-repeat: no-repeat; background-position: right 0 top 140px, left 0 top 720px, left 0 top 1560px, right 0 top 1280px, right 0 top 2050px, right 0 top 2900px; } @media (max-width: 767px) { .page-doodles { display: none; } } img, svg { display: block; max-width: 100%; } a { color: var(--purple-deep); text-decoration: none; } a:hover { color: var(--purple); } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.96px; text-wrap: balance; } p { margin: 0; } /* ------------------------------- Utilities ------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-alt); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--near-black); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow-light); } .section-title { font-size: 65px; line-height: 60px; letter-spacing: -0.96px; } .arrow { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; } /* -------------------------------- Buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 32px; border: 0; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: 0.7px; line-height: 20px; white-space: nowrap; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid rgba(106, 72, 229, 0.4); outline-offset: 2px; } .btn--primary { background: var(--purple-deep); color: var(--white); } .btn--primary:hover { background: #451fb0; } .btn--purple { background: var(--purple); color: var(--white); } .btn--purple:hover { background: var(--purple-deep); } .btn--yellow { background: var(--yellow); color: var(--near-black); } .btn--yellow:hover { background: var(--yellow-light); } .btn--yellow-outline { background: transparent; color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); } .btn--yellow-outline:hover { background: var(--yellow); color: var(--near-black); } .btn--outline { background: transparent; color: var(--near-black); box-shadow: inset 0 0 0 2px var(--near-black); } .btn--outline:hover { background: var(--near-black); color: var(--white); } /* ================================ HEADER ================================= */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100px; } .brand { display: flex; align-items: center; flex-shrink: 0; } /* The approved lock-ups (partials/brand-logo) are wider than the retired mark at the same cap height - 124px (EN) / 111px (AR) at 36px. Height is the fixed dimension; the width follows each file's own aspect ratio. */ .brand img { height: 36px; width: auto; } .nav-wrap { display: contents; } /* The desktop header is ONE row. The nav never drops a destination onto a second line: its spacing tightens through the laptop tiers below (the same approach as .dash-header), and the only element allowed to give ground is the signed-in identity, whose name truncates. Under 1024px the whole .nav-wrap becomes the mobile menu instead - see the 1023px block. Re-measured for six destinations when About Us joined the nav. */ .main-nav { flex-shrink: 0; } .main-nav ul { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; } .main-nav a { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--ink); padding-bottom: 6px; /* "How It Works" must never stack into three lines when space is tight. */ white-space: nowrap; } .main-nav a:hover { color: var(--purple); } .main-nav a.is-active { color: var(--purple); font-weight: 700; } .main-nav a.is-active::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 9px; background: url("../images/nav-underline.svg") no-repeat center / 100% 100%; } .header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Controls keep their size; only .header-account (min-width: 0 chain down to the ellipsised name) absorbs a shortfall. */ .header-actions > .locale-switch, .header-actions > .btn { flex-shrink: 0; } .header-actions .btn--outline { box-shadow: inset 0 0 0 2px var(--near-black); } /* Signed-in participant identity (QA-FIX-01): profile link + POST sign-out. */ .header-account { display: flex; align-items: center; gap: 6px; min-width: 0; } .header-account__profile { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--near-black); min-width: 0; } /* QA: the dashboard-header avatar - image or initials, always a circle. */ .dash-user__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } span.dash-user__avatar { display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 15px; } /* QA: rejected-payment recovery card + the green WhatsApp action. */ .dash-rejected__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .btn--whatsapp { background: #23B33A; color: var(--white); gap: 10px; } .btn--whatsapp:hover { background: #1e9c33; color: var(--white); } .btn--whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; } .billing__more { margin: 0; padding: 14px 18px 16px; text-align: end; font-family: var(--font-ui); font-size: 14px; border-top: 1px solid var(--border); } /* QA: the navbar avatar - image or initials, always a neat circle. */ .header-account__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } span.header-account__avatar { display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-ui); font-weight: 700; font-size: 13px; } .header-account__profile:hover, .header-account__profile:focus-visible { background: rgba(106,72,229,0.08); outline: none; } .header-account__profile:focus-visible { box-shadow: inset 0 0 0 2px var(--purple); } .header-account__profile > svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--purple-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .header-account__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: start; } .header-account__meta b { font-family: var(--font-ui); font-size: 14px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Truncates with the name, so a squeezed chip never runs under sign-out. */ .header-account__meta small { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-account__signout { display: flex; } .header-account__signout button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; } .header-account__signout button:hover { background: rgba(28,27,26,0.07); } .header-account__signout button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--purple); } .header-account__signout svg { width: 19px; height: 19px; fill: none; stroke: var(--near-black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html[dir="rtl"] .header-account__signout svg { transform: scaleX(-1); } .nav-checkbox { display: none; } .nav-toggle { display: none; width: 48px; height: 48px; background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; } .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } /* Laptop tiers. Measured with the production font: the English header needs ~1100px at full spacing but a 1280px laptop offers 1080px and a 1200px one 1072px, which is exactly where "Business Circl" used to wrap. Each tier trades spacing - gaps, CTA padding, one point of nav type, the logo's cap height - never a label. Bounded to the desktop nav (min-width: 1024px) so the mobile menu keeps its own sizes untouched. Re-measured with six destinations (About Us): at the old values a signed-in English header lost the whole name at 1140/1280 and ran 11px over at 1024. */ @media (min-width: 1024px) { .header-actions .btn { padding: 0 24px; } } @media (min-width: 1024px) and (max-width: 1439px) { .site-header .container { gap: 14px; } .main-nav ul { gap: 16px; } .main-nav a { font-size: 15px; } .header-actions .btn { padding: 0 18px; } .header-account__meta b { max-width: 130px; } } @media (min-width: 1024px) and (max-width: 1279px) { .main-nav ul { gap: 11px; } .main-nav a { font-size: 14px; } .header-actions .btn { padding: 0 14px; } .header-account__meta b { max-width: 110px; } } @media (min-width: 1024px) and (max-width: 1139px) { .site-header .container { gap: 10px; } .main-nav ul { gap: 8px; } .main-nav a { font-size: 14px; } .brand img { height: 30px; } .header-actions { gap: 8px; } .header-actions .btn { padding: 0 12px; } .site-header .locale-switch button { padding: 6px 8px; } .header-account__meta b { max-width: 90px; } } /* ================================= HERO ================================== */ .hero { padding: 80px 0 40px; } .hero .container { display: grid; grid-template-columns: minmax(0, 505px) minmax(0, 1fr); gap: 64px; align-items: center; } .badge { display: inline-block; padding: 4px 16px; border-radius: var(--r-pill); background: var(--yellow); font-weight: 700; font-size: 14px; letter-spacing: -0.96px; color: var(--near-black); white-space: nowrap; } .hero h1 { margin-top: 28px; font-size: 65px; line-height: 60px; color: var(--near-black); } .hero__lead { margin-top: 24px; max-width: 504px; font-size: 18px; line-height: 28px; color: var(--muted); } .hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px; } .hero__media { position: relative; } .hero__media img { width: 100%; height: auto; } /* ================================ STATS ================================== */ .stats { padding: 40px 0 80px; } .stats .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 83px; } .stat { text-align: center; } .stat__value { font-family: var(--font-display); font-weight: 500; font-size: 50px; line-height: 1; letter-spacing: -0.96px; color: var(--near-black); } .stat__label { margin-top: 8px; font-family: var(--font-alt); font-size: 16px; color: var(--muted); } /* ============================ STEPS (purple) ============================= */ .steps { position: relative; margin: 0 22px; padding: 86px 78px; background: var(--purple) url("../images/steps-doodles.svg") no-repeat center / cover; border-radius: var(--r-lg); overflow: hidden; } .steps__title { text-align: center; color: var(--white); font-size: 65px; line-height: 60px; text-transform: capitalize; margin-bottom: 56px; } .steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step-card { background: var(--card); border-radius: var(--r-md); box-shadow: var(--ring); padding: 32px; display: flex; flex-direction: column; gap: 8px; } .step-card__num { width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--near-black); } .step-card h3 { font-size: 24px; line-height: 32px; letter-spacing: 0; padding: 16px 0; color: var(--near-black); } .step-card p { font-size: 16px; line-height: 24px; color: var(--body); } /* =============================== BENEFITS ================================ */ .benefits { padding: 120px 0; } .benefits .container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; } .benefits__intro .section-title { color: var(--ink); font-size: 56px; line-height: 60px; margin: 12px 0 24px; } .benefits__media { position: relative; } .benefits__media img { width: 100%; height: auto; } .benefit-list { display: flex; flex-direction: column; } .benefit { display: grid; grid-template-columns: 20px 1fr; column-gap: 16px; } .benefit:not(:last-child) .benefit__body { padding-bottom: 28px; } .benefit__marker { display: flex; flex-direction: column; align-items: center; } .benefit__node { flex-shrink: 0; margin-top: 2px; } .benefit__node rect { fill: none; stroke: #cdd0d2; stroke-dasharray: 2 2; transition: stroke 0.35s ease; } .benefit__node circle { fill: #cdd0d2; transition: fill 0.35s ease; } .benefit__line { flex: 1; width: 0; margin: 4px 0; border-left: 1px dashed #cdd0d2; transition: border-color 0.35s ease; } .benefit:last-child .benefit__line { display: none; } .benefit.is-done .benefit__node rect { stroke: var(--purple); stroke-dasharray: none; } .benefit.is-done .benefit__node circle { fill: var(--purple); } .benefit.is-done .benefit__line { border-left-style: solid; border-color: var(--purple); } .benefit h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--ink); } .benefit p { margin-top: 6px; font-size: 16px; color: var(--muted); } .benefits__cta { margin-top: 16px; } /* ============================ PROGRAMS (cream) =========================== */ .programs { position: relative; margin: 0 22px; padding: 69px 78px; background: var(--cream); border-radius: var(--r-lg); } .programs::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../images/choose-your-circl-shape.webp") no-repeat center / cover; pointer-events: none; } .programs__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .programs__head h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); border-bottom: 3px solid var(--purple); padding-bottom: 10px; } .carousel-nav { display: flex; gap: 12px; } .carousel-nav button { width: 63px; height: 63px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--near-black); color: var(--near-black); display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease; } .carousel-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .carousel-nav button:hover, .carousel-nav button[aria-current="true"] { background: var(--near-black); color: var(--white); } /* Slider at either end: drop back to the outline arrow and fade it, so the filled/hover treatments never read as clickable. */ .carousel-nav button:disabled, .carousel-nav button:disabled:hover { background: transparent; color: var(--near-black); opacity: 0.35; cursor: not-allowed; } .programs__track { position: relative; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .programs__track::-webkit-scrollbar { display: none; } /* End spacer: gives the track enough scroll room for the last cards to reach the snap start, so every card can become the active one. */ .programs__track::after { content: ""; flex: 0 0 calc(100% - 630px); } .program-card { position: relative; isolation: isolate; flex: 0 0 610px; max-width: 610px; height: 423px; border-radius: var(--r-lg); background: var(--purple); overflow: hidden; scroll-snap-align: start; color: var(--white); transition: opacity 0.3s ease, transform 0.3s ease; } .programs__track .program-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../images/program-face-spark.svg"), url("../images/program-face-happy.svg"), url("../images/program-face-sad.svg"); background-repeat: no-repeat; background-position: right 12px top 16px, right -30px top 128px, left -24px bottom 10px; background-size: 47px 69px, 95px 95px, 95px 87px; opacity: 0.12; pointer-events: none; } .program-card:not(.is-active) { opacity: 0.4; transform: scale(0.94); } /* Logical inset: the photo sits on the side the copy reads AWAY from, so it moves to the left in Arabic instead of ending up underneath the text. */ .program-card__img { position: absolute; inset-block: 0; inset-inline: auto 0; z-index: 1; width: 50%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%); mask-image: linear-gradient(90deg, transparent 0%, #000 44%); } .program-card__body { position: relative; z-index: 2; padding: 39px 43px; display: flex; flex-direction: column; height: 100%; } .program-card h3 { color: var(--white); font-size: 30px; line-height: 1.1; letter-spacing: -0.96px; } .program-card__role { margin-top: 6px; font-family: var(--font-alt); font-weight: 500; font-size: 14px; color: var(--yellow-light); } .program-card__desc { margin-top: 12px; font-size: 14px; line-height: 1.5; max-width: 300px; color: rgba(255, 255, 255, 0.9); } .program-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 16px; } .tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(248, 243, 241, 0.6); font-family: var(--font-alt); font-size: 12px; color: var(--white); } /* The card body is a full-height column, and the tag row that used to carry `margin-top: auto` is no longer rendered - so the CTA claims the free space itself and sits on the card floor instead of floating under the copy. */ .program-card .btn { align-self: flex-start; margin-top: auto; } /* ============================ ASSESSMENT (dark) ========================== */ .assessment { margin: 120px 22px; padding: 90px 80px; background: var(--ink) url("../images/assessment-doodles.svg") no-repeat center / cover; border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; } .assessment__body h2 { color: var(--white); font-size: 48px; line-height: 1.1; letter-spacing: 0; } .assessment__body p { margin: 15px 0 15px; font-family: var(--font-alt); font-size: 16px; color: rgba(255, 255, 255, 0.85); max-width: 636px; } .assessment__subhead { font-weight: 700; color: var(--yellow); } .assessment__receive { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .assessment__receive li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--white); } .check { width: 16px; height: 16px; flex-shrink: 0; } .check path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .assessment__receive .check circle { fill: var(--white); } .assessment__receive .check path { stroke: var(--ink); } .assessment .assess-card { padding: 36px; gap: 24px; box-shadow: none; } /* ---- The hidden contract. The `hidden` attribute works through a UA rule, `[hidden] { display: none }`, and ANY author `display` declaration outranks it. Every component that parks an element with `hidden` while also giving it a display - a flex locale panel, a grid tab panel, a stepper button - therefore stays on screen, and the attribute silently does nothing. The codebase had been patching this one component at a time. This states it once, for every element, so a future component cannot inherit the bug. Safe because nothing here shows an element while leaving the attribute set: app.js toggles the property, which removes the attribute. ---- */ [hidden] { display: none !important; } .assessment .assess-card[hidden] { display: none; } .assessment .assess-card fieldset { margin: 0; padding: 0; border: 0; } .assessment .assess-card h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.5px; color: var(--near-black); margin-bottom: 24px; } .assessment .assess-progress-label { font-size: 13px; } .assessment .assess-option { min-height: 54px; padding: 14px 18px; font-size: 15px; gap: 12px; } .assessment .assess-option .radio { width: 20px; height: 20px; } .assessment .assess-option:has(input:checked) .radio { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--purple-deep); } .assessment .assess-footer { padding-top: 8px; } .assessment .assess-footer .btn { height: 46px; padding: 0 26px; } .quiz-result { background: var(--white); border-radius: 24px; padding: 38px; display: flex; flex-direction: column; gap: 12px; } .quiz-result[hidden] { display: none; } .quiz-result h3 { font-size: 24px; letter-spacing: -0.5px; color: var(--near-black); } .quiz-result__intro { font-family: var(--font-ui); font-size: 14px; color: var(--muted); } .quiz-result h4 { font-size: 18px; color: var(--purple-deep); margin-top: 8px; } .quiz-result__desc { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--body); } .quiz-result__facts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .quiz-fact { display: flex; justify-content: space-between; gap: 16px; background: #f2f0f5; border-radius: 10px; padding: 14px 18px; font-family: var(--font-ui); font-size: 14px; } .quiz-fact b { font-weight: 700; color: var(--near-black); } .quiz-fact span { color: var(--muted); } .quiz-result__for { font-weight: 700; font-size: 16px; color: var(--near-black); margin-top: 10px; } .quiz-result__tags { display: flex; flex-direction: column; gap: 8px; } .quiz-result__tags li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--body); } .quiz-result__tags .check circle { fill: var(--purple); } .quiz-result__tags .check path { stroke: var(--white); } .quiz-result .btn { width: 100%; margin-top: 14px; } /* ================================= FAQ =================================== */ .faq { padding: 40px 0 120px; background-image: url("../images/bg-swoosh-purple.svg"), url("../images/bg-bolt-yellow.svg"), url("../images/bg-scribbles-2.svg"); background-repeat: no-repeat; background-position: right -70px top -90px, left -80px bottom 30px, right -170px bottom -390px; } .faq h2 { text-align: center; font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); margin-bottom: 48px; } .faq__list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; } .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .faq-item[open] { background: var(--ink); border-color: var(--ink); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); text-transform: capitalize; } .faq-item[open] summary { color: var(--white); padding-bottom: 8px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .plus { flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; font-size: 20px; font-weight: 500; color: var(--near-black); } .faq-item[open] summary .plus { transform: rotate(45deg); color: var(--white); } .faq-item p { padding-block: 0 20px; padding-inline: 24px 48px; font-family: var(--font-alt); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); } /* ================================ FOOTER ================================= */ .closing { padding: 0 22px; } .closing__cta { position: relative; margin-bottom: -223px; z-index: 2; padding: 86px 100px; background: var(--yellow) url("../images/closing-doodles.svg") no-repeat center / cover; border-radius: var(--r-lg); text-align: center; overflow: hidden; } .closing__cta h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); } .closing__cta p { margin: 25px auto; max-width: 650px; font-size: 18px; color: var(--near-black); } .site-footer { background: var(--ink); color: var(--white); padding: 320px 0 40px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; } /* The reversed lock-up (white wordmark, brand-purple icon): height fixed, width from the file's ratio - 152px (EN) / 136px (AR). */ .footer__brand img { height: 44px; width: auto; margin-bottom: 20px; } .footer__brand p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 272px; margin-bottom: 24px; } .social { display: flex; gap: 12px; } .social a { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--white); display: flex; align-items: center; justify-content: center; color: var(--white); transition: background-color 0.15s ease, color 0.15s ease; } .social a:hover { background: var(--white); color: var(--ink); } .social svg { width: 18px; height: 18px; fill: currentColor; } .footer__col h4 { color: var(--yellow); font-size: 18px; margin-bottom: 16px; letter-spacing: -0.96px; } .footer__col li { margin-bottom: 16px; } .footer__col a { color: var(--white); font-size: 16px; } .footer__col a:hover { color: var(--yellow); } .footer__news h4 { color: var(--yellow); font-size: 18px; margin-bottom: 12px; } .footer__news p { color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; } .news-form { display: flex; gap: 8px; } .news-form input { flex: 1; height: 50px; padding: 0 24px; border: 0; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-display); font-size: 16px; color: var(--ink); } .news-form input::placeholder { color: #6b7280; } .news-form button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--purple-logo); box-shadow: var(--shadow-soft); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .news-form button:hover { background: var(--purple); } .news-form svg { width: 20px; height: 20px; fill: currentColor; } /* Newsletter states. Invalid is announced by the live region and marked aria-invalid, so the yellow ring is never the only signal. */ .news-form button:disabled { cursor: progress; opacity: 0.75; } .news-form[aria-busy="true"] button svg { animation: news-form-pulse 0.9s ease-in-out infinite; } .news-form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--yellow); } .news-form__feedback { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .news-form__feedback:empty { display: none; } @keyframes news-form-pulse { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .news-form[aria-busy="true"] button svg { animation: none; } } /* SweetAlert2 answers for the newsletter only: every rule is scoped to the .circl-swal popup class the footer script passes, so no other dialog, and no page, is restyled. */ .swal2-popup.circl-swal { padding: 32px 28px 28px; border-radius: var(--r-md); font-family: var(--font-display); color: var(--body); } html[dir="rtl"] .swal2-popup.circl-swal { font-family: var(--font-ar); } .circl-swal .circl-swal__title { padding: 6px 0 0; font-size: 26px; line-height: 1.2; color: var(--near-black); } .circl-swal .circl-swal__title::after { content: ""; display: block; width: 48px; height: 5px; margin: 14px auto 0; border-radius: var(--r-pill); background: var(--yellow); } .circl-swal .circl-swal__text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--body); } .circl-swal .swal2-actions { margin-top: 22px; } .circl-swal .circl-swal__confirm { min-width: 150px; } .circl-swal .swal2-icon.swal2-success { border-color: var(--green); color: var(--green); } .circl-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(70, 206, 153, 0.3); } .circl-swal .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--green); } .circl-swal .swal2-icon.swal2-info { border-color: var(--purple); color: var(--purple); } .circl-swal .swal2-icon.swal2-warning { border-color: var(--yellow); color: #b5850b; } .circl-swal .swal2-icon.swal2-error { border-color: #e0605e; color: #e0605e; } .circl-swal .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #e0605e; } .footer__bottom { border-top: 1px solid rgba(253, 248, 246, 0.1); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; color: rgba(255, 255, 255, 0.9); } .footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .footer__bottom a:hover { color: var(--yellow-light); } /* QA-FIX-01: the facilitator entry reads as a labelled action, not prose. */ .footer__bottom a.footer__facilitators { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 700; } .footer__bottom a.footer__facilitators:hover, .footer__bottom a.footer__facilitators:focus-visible { color: var(--yellow-light); } .footer__facilitators svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* =============================== RESPONSIVE ============================== */ @media (max-width: 1200px) { :root { --gutter: 56px; } .steps__grid { grid-template-columns: repeat(2, 1fr); } .assessment { margin: 100px 56px; padding: 64px 56px; gap: 48px; } } @media (max-width: 1023px) { :root { --gutter: 40px; } .section-title, .hero h1, .steps__title, .programs__head h2, .faq h2, .closing__cta h2 { font-size: 48px; line-height: 1.05; } .hero .container { grid-template-columns: 1fr; gap: 40px; } .hero__media { max-width: 560px; } .benefits .container { grid-template-columns: 1fr; gap: 48px; } .benefits__media { max-width: 460px; } .assessment { grid-template-columns: 1fr; } .assessment__body { order: -1; } .footer__grid { grid-template-columns: 1fr 1fr; } .nav-wrap { display: none; } .nav-toggle { display: flex; } .nav-checkbox:checked ~ .nav-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 20px; position: absolute; top: 100px; left: 0; right: 0; background: var(--white); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25); padding: 24px var(--gutter) 32px; } .nav-checkbox:checked ~ .nav-wrap .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; } .nav-checkbox:checked ~ .nav-wrap .main-nav a { display: block; width: 100%; padding: 14px 0; } .nav-checkbox:checked ~ .nav-wrap .header-actions { display: flex; gap: 12px; } .nav-checkbox:checked ~ .nav-wrap .header-actions .btn { flex: 1; } .nav-checkbox:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-checkbox:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; } .nav-checkbox:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 767px) { :root { --gutter: 20px; } .steps, .programs { margin: 0 12px; padding: 48px 24px; } .steps__grid { grid-template-columns: 1fr; } .steps__title { margin-bottom: 32px; } .stats .container { gap: 32px; } .stat { flex: 1 0 40%; } .benefits { padding: 72px 0; } .assessment { margin: 72px 12px; padding: 48px 20px; } .assessment .assess-card { padding: 24px; } .quiz-result { padding: 26px 20px; } .programs__head { flex-direction: column; align-items: flex-start; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; } .section-title, .hero h1, .steps__title, .programs__head h2, .faq h2, .benefits__intro .section-title, .assessment__body h2, .closing__cta h2 { font-size: 38px; letter-spacing: -0.5px; } .hero h1 { font-size: 40px; line-height: 1.05; } .faq-item summary { font-size: 16px; } .faq { background-image: none; } } /* Keep each mobile slide within the track and separate its content from its image. At this size a full-width card needs no desktop end spacer. */ @media (max-width: 768px) { .programs__track { width: 100%; max-width: 100%; min-width: 0; } .programs__track::after { content: none; } .program-card { display: flex; flex: 0 0 100%; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; } .program-card:not(.is-active) { transform: none; } .programs__track .program-card::before { background-position: right 12px bottom calc(clamp(190px, 55vw, 300px) - 80px), right -30px bottom calc(clamp(95px, 27.5vw, 150px) - 47.5px), left -24px bottom 10px; } .program-card__body { order: 1; flex: 1 1 auto; width: 100%; min-width: 0; height: auto; padding: 28px 24px; } .program-card__body > * { min-width: 0; } .program-card__desc { width: 100%; max-width: none; } .program-card__tags { min-width: 0; } .program-card__tags .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .program-card .btn { max-width: 100%; } .program-card__img { position: static; order: 2; flex: 0 0 auto; width: 100%; min-width: 0; height: clamp(190px, 55vw, 300px); opacity: 1; object-fit: contain; object-position: center; -webkit-mask-image: none; mask-image: none; } } /* ================================ AUTH =================================== */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 24px; background: var(--white); } .auth__aside { position: relative; border-radius: 20px; overflow: hidden; color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; padding: 66px 72px; background-size: cover; background-position: center; min-height: 640px; min-width: 0; } .auth__aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(81,40,204,0) 0%, var(--purple-deep) 108%); } .auth__aside.is-signup::after { background: linear-gradient(180deg, rgba(106,72,229,0) 0%, var(--purple) 112%); } .auth__aside > * { position: relative; z-index: 2; } .auth__eyebrow { align-self: flex-start; padding: 6px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,0.2); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); font-weight: 500; font-size: 16px; text-transform: uppercase; margin-bottom: 16px; white-space: nowrap; max-width: 100%; overflow-wrap: anywhere; } .auth__aside h2 { color: var(--white); font-size: 46px; line-height: 1; letter-spacing: -0.96px; margin-bottom: 16px; } .auth__aside p { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: #e6deff; margin-bottom: 16px; max-width: 520px; } .auth__list { display: flex; flex-direction: column; gap: 16px; } .auth__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 16px; color: var(--white); } .auth__list svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--yellow); } .auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px; } .auth__form { width: 100%; max-width: 485px; display: flex; flex-direction: column; gap: 24px; } .auth__head { text-align: center; } .auth__head h1 { font-size: 36px; line-height: 1; color: var(--near-black); } .auth__head p { margin-top: 8px; font-size: 16px; color: var(--body); } .auth__fields { display: flex; flex-direction: column; gap: 12px; } .auth__row { display: flex; gap: 12px; } /* Sign-up gender choice (QA-FIX-02): a plain radio group, no custom JS. */ .auth__choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .auth__choice legend { padding: 0; margin-bottom: 4px; font-family: var(--font-ui); font-size: 14px; color: var(--body); } .auth__choice-opts { display: flex; flex-wrap: wrap; gap: 10px 22px; } .auth__row .field { flex: 1; } .field { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 20px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(28,27,26,0.6); background: var(--white); } .field:focus-within { box-shadow: inset 0 0 0 2px var(--purple); } .field svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #b3b3b3; stroke-width: 1.6; } .field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-ui); font-size: 18px; color: var(--near-black); } .field input::placeholder { color: #b3b3b3; } /* ------------------- "Where do you live?" country selector ---------------- */ /* Phase 4B. A native , restyled - Screen 3's facilitator filter. No JavaScript dropdown was built for cosmetics. The chevron is a pseudo-element rather than a background-image, so its placement follows inset-inline-end and needs no RTL override. Its own two borders are physical because a downward chevron is direction-neutral. */ .book-select { position: relative; display: flex; } .book-select::after { content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; } .book-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 52px; padding-inline: 22px 46px; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: var(--white); border: 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--border); outline: none; cursor: pointer; } .book-select select:hover { box-shadow: inset 0 0 0 1.5px var(--purple); } .book-select select:focus-visible { box-shadow: inset 0 0 0 2px var(--purple); } /* The published-rating star on Screen 3's option cards and Screen 4. */ .offering__stars { color: var(--yellow); } /* --------------------------- Availability badge ------------------------- */ .book-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: var(--r-pill); } .book-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .book-badge--open { background: #eaf9f2; color: #16794f; } .book-badge--low { background: #fff6e0; color: #8a5b00; } .book-badge--none { background: #fdecea; color: #a12d20; } /* ------------------------------ Review rows ----------------------------- */ /* Screen 4's latest published reviews: rating, the neutral verified label, the date and the body - never a participant identity. */ .book-review { display: grid; gap: 6px; padding-block-end: 16px; border-block-end: 1px solid var(--border); } .book-review:last-child { padding-block-end: 0; border-block-end: 0; } .book-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); } .book-review__rating { font-weight: 700; color: var(--ink); } .book-review__verified { font-weight: 700; color: var(--purple-deep); } .book-review__body { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.65; color: var(--body); margin: 0; white-space: pre-line; } /* ------------------------------ Empty state ----------------------------- */ .book-empty { background: var(--white); border-radius: var(--r-md); box-shadow: var(--dash-card-shadow); padding: 48px 32px; display: grid; gap: 12px; justify-items: center; text-align: center; } .book-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); margin: 0; } .book-empty__body { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 420px; } /* ------------------------ Back link (Billing History) ------------------- */ .book-back { margin: 28px 0 0; text-align: center; font-family: var(--font-ui); font-size: 14px; } @media (max-width: 720px) { .book-badge { align-self: flex-start; } } html[dir="rtl"] .book-select select, html[dir="rtl"] .book-badge, html[dir="rtl"] .book-empty__body, html[dir="rtl"] .book-review__body { font-family: var(--font-ar); } /* Derived seat counts on the admin offering detail (Decision 06) are styled with the key/value tiles (.akv.aseats) in the admin offering block below. */ /* ============ DECISION 07 - MEMBERSHIP PANEL (My Space) ================= */ /* Reuses the existing .dash-card, .adl, .abadge and .recruit-checks systems; only the state line and the benefit spacing are new. */ /* Air between the card heading and the state line ("Membership active"). */ .mship__state { font-family: var(--font-ui); font-size: 15px; color: var(--body); margin: 14px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mship__benefits { margin-top: 10px; } .mship__benefits .abadge { margin-inline-start: 8px; } /* The two member surfaces as compact icon buttons, with air below so the renewal row never sits flush against them. */ .mship__links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px 18px; } .mship__links .btn { height: 44px; padding: 0 20px; font-size: 13px; gap: 10px; } .mship__links .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* Remaining secured Membership time on a 30-day horizon. The fill anchors to the inline start, so RTL depletes naturally in the other direction. */ .mship-progress { margin-top: 18px; } .mship-progress__track { height: 8px; border-radius: var(--r-pill); background: #ece7f4; overflow: hidden; } .mship-progress__fill { display: block; height: 100%; border-radius: var(--r-pill); background: #23B33A; transition: width 0.3s ease; } .mship-progress__fill.is-warning { background: #e8a13a; } .mship-progress__fill.is-urgent { background: #dc2626; } .mship-progress__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .mship-progress__days { font-weight: 700; color: var(--near-black); } .mship-progress__days.is-warning { color: #b47712; } .mship-progress__days.is-urgent { color: #dc2626; } html[dir="rtl"] .mship-progress__meta { font-family: var(--font-ar); } /* Stop renewing: a small, quiet danger control at the card's end - hint at the reading start, button at the end. Wraps on narrow screens. */ .mship__stop-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; } .mship__stop-row .field-hint { margin: 0; flex: 1 1 260px; } /* Renew + Stop pair; margin-inline-start keeps the pair at the inline end even when no hint is rendered on the row. */ .mship__stop-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } .mship__stop-actions .btn { height: 44px; padding: 0 20px; font-size: 13px; } /* Same geometry as the Renew button beside it - the two read as one pair of decisions. Only COLOUR marks this one as the destructive choice, never a smaller hit area. */ .mship__stop { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 44px; padding: 0 20px; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: #dc2626; background: transparent; border: 0; box-shadow: inset 0 0 0 1px #dc2626; border-radius: var(--r-pill); transition: background 0.15s ease, color 0.15s ease; } .mship__stop:hover { background: #dc2626; color: var(--white); } html[dir="rtl"] .mship__stop { font-family: var(--font-ar); } html[dir="rtl"] .mship__state { font-family: var(--font-ar); } /* The compact My Space summary (client feedback, phase 2): status badge, remaining secured time in the same warning/urgent tiers as the panel's progress bar, and one next step. Sized for the 288px sidebar track. */ .mship-summary__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .mship-summary__none { font-family: var(--font-ui); font-size: 14px; color: var(--body); } .mship-summary__days { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.3px; color: var(--near-black); } .mship-summary__days.is-warning { color: #b47712; } .mship-summary__days.is-urgent { color: #dc2626; } .mship-summary__meta { margin-top: 6px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--body); } .mship-summary__actions { display: grid; gap: 10px; margin-top: 16px; } /* The facilitator proposal form: five short sections, each one decision. Choices are native radios inside labelled tiles - neither ever pre-selected (NF-4, NF-9). Every track is minmax(0, 1fr) and every tile min-width: 0, so a long localized label wraps instead of widening the form (the grid-item lesson from NF-2.1). Selectors carry .proposal-form so they outrank the generic `.aform label` block style, which used to flatten the tiles. */ .acard--form .aform.proposal-form .proposal-form__section { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; } .proposal-form__section h3 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.3; color: var(--ink); } .proposal-form__section h3 label { display: inline; margin: 0; font: inherit; color: inherit; } .proposal-form__grid { display: grid; gap: 16px 22px; min-width: 0; } .proposal-form__grid > * { min-width: 0; } .proposal-form input[type="datetime-local"] { width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink); padding: 11px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); } .proposal-form .pfield textarea { min-height: 96px; } @media (min-width: 720px) { .proposal-form__grid--schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proposal-form__grid--schedule > :first-child { grid-column: 1 / -1; } .proposal-form__grid--group { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } } @media (min-width: 1180px) { .proposal-form__grid--schedule { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } .proposal-form__grid--schedule > :first-child { grid-column: auto; } } .proposal-choice { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; } .proposal-choice legend { padding: 0; margin: 0 0 4px; } .proposal-choice > .field-hint { margin: 0; } .proposal-choice__options { display: grid; gap: 10px; min-width: 0; } .proposal-choice__options--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .proposal-choice__options--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); max-width: 760px; } .proposal-form .proposal-choice__option { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 0; padding: 14px 16px; border-radius: 14px; cursor: pointer; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-weight: 400; transition: box-shadow .15s ease, background-color .15s ease; } .proposal-form .proposal-choice__options--compact .proposal-choice__option { padding: 11px 14px; } .proposal-form .proposal-choice__option:hover { box-shadow: inset 0 0 0 1px var(--purple-deep); } .proposal-choice__option input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--purple-deep); } .proposal-choice__option > span { display: grid; gap: 2px; min-width: 0; } .proposal-choice__option strong { font-family: var(--font-ui); font-size: 15px; color: var(--near-black); overflow-wrap: anywhere; } .proposal-choice__option .field-hint { margin: 0; } .proposal-form .proposal-choice__option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--purple-deep); background: rgba(81, 40, 204, 0.04); } .proposal-form .proposal-choice__option:has(input:focus-visible) { outline: 2px solid var(--purple-deep); outline-offset: 2px; } /* Minimum and maximum read as ONE concept: the group size. */ .proposal-capacity { display: grid; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); } .proposal-capacity__title { margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--muted); } .proposal-capacity__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 12px 14px; } .proposal-capacity__pair > .pfield { min-width: 0; } .proposal-form__problems { margin: 0; } @media (max-width: 620px) { .acard--form .aform.proposal-form .proposal-form__section { padding: 16px 14px; } .proposal-capacity { padding: 12px; } } html[dir="rtl"] .proposal-choice__option strong, html[dir="rtl"] .proposal-capacity__title { font-family: var(--font-ar); } /* NF-3: the guidance note's optional private attachment. */ .guidance-attachment { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .guidance-attachment .btn { min-width: 0; height: 42px; padding: 0 16px; font-size: 13px; gap: 8px; } .guidance-attachment .btn svg { flex-shrink: 0; } .guidance-attachment a { overflow-wrap: anywhere; } /* NF-3: the member surfaces on Home. The two links are longer than any label .btn was sized for: at the 288px sidebar they measured 6-7px wider than their pill, so the text and icon ran over the border. They stack full width, wrap inside the pill when a label (or its Arabic) needs a second line, and share one row height. */ .mship-summary__benefits { display: grid; grid-auto-rows: 1fr; gap: 10px; margin-top: 14px; } .mship-summary__benefits .btn { width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 18px; font-size: 13px; letter-spacing: 0.3px; line-height: 1.3; white-space: normal; text-align: center; gap: 8px; } .mship-summary__benefits .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .mship-summary__actions .btn { width: 100%; height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: 0.3px; } .mship-summary__actions .btn--outline, .mship-summary__benefits .btn--outline { box-shadow: inset 0 0 0 1px var(--border); color: var(--near-black); } .mship-summary__actions .btn--outline:hover, .mship-summary__benefits .btn--outline:hover { background: var(--near-black); color: var(--white); } .mship-summary__more { margin-top: 14px; font-family: var(--font-ui); font-size: 13px; } .mship-summary__more .alink { font-size: 13px; } html[dir="rtl"] .mship-summary__none, html[dir="rtl"] .mship-summary__meta, html[dir="rtl"] .mship-summary__more { font-family: var(--font-ar); } /* The /membership explanation page - one wide plan-card reused as a plain, start-aligned document. The featured card's raised margin only makes sense inside the three-card pricing row, so it is reset here. */ .flow__lead { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--body); text-align: center; max-width: 640px; margin: -16px 0 0; } .pricing-grid--solo .plan-card { max-width: 620px; } .mship-explain { margin-block: 0; align-items: stretch; text-align: start; } .mship-explain h3 { margin-top: 0; } .mship-explain .plan-card__tagline { margin: 10px 0 20px; } .mship-explain .acard__sub { margin-top: 26px; font-size: 18px; } .mship-explain__note { margin: 16px 0 0; } .mship-explain form { margin-top: auto; } .mship-explain form .btn, .mship-explain > .btn { margin-top: 24px; width: 100%; } html[dir="rtl"] .flow__lead { font-family: var(--font-ar); } /* ============== DASHBOARD UI CONSOLIDATION (Admin + Facilitator) ============== One shared system for the operational pages of BOTH dashboards: wide responsive form grids, one filter/action toolbar (.abar), one table card language (already .atable-wrap), one numbered pagination (.dpager), one empty state (.aempty) and semantic badge aliases. Purely presentational -- every control keeps its name, wire model and request payload. */ /* ---- Form pages: use the width. Two readable columns from 900px up; the grid never splits a field that genuinely needs the full row (sections, textareas, uploads, previews, action bars). .aform--decide stays compact -- those are small inline decision forms on detail pages. ---- */ @media (min-width: 900px) { .acard--form .aform:not(.aform--decide) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; } .acard--form .aform:not(.aform--decide) > h2, .acard--form .aform:not(.aform--decide) > .acard__sub, .acard--form .aform:not(.aform--decide) > .acard__lead, .acard--form .aform:not(.aform--decide) > .field-hint, .acard--form .aform:not(.aform--decide) > .afilter, .acard--form .aform:not(.aform--decide) > .pform-section, .acard--form .aform:not(.aform--decide) > .atable-wrap, .acard--form .aform:not(.aform--decide) > .acard, .acard--form .aform:not(.aform--decide) > .recruit-checks, .acard--form .aform:not(.aform--decide) > .aform__actions, .acard--form .aform:not(.aform--decide) > button, .acard--form .aform:not(.aform--decide) > .flash, .acard--form .aform:not(.aform--decide) > fieldset, .acard--form .aform:not(.aform--decide) > .adl, .acard--form .aform:not(.aform--decide) > .pfield.full, .acard--form .aform:not(.aform--decide) > .pfield:has(textarea), .acard--form .aform:not(.aform--decide) > .pfield:has(input[type="file"]), .acard--form .aform:not(.aform--decide) > .pfield:has(.aprice-breakdown), .acard--form .aform:not(.aform--decide) > .pfield:has(.set-upload) { grid-column: 1 / -1; } /* Sections keep their own two-column field grid; the title and its lead hint span the section. */ .acard--form .aform .pform-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; } .acard--form .aform .pform-section > h3, .acard--form .aform .pform-section > .field-hint, .acard--form .aform .pform-section > .pfield.full, .acard--form .aform .pform-section > .pfield:has(textarea) { grid-column: 1 / -1; } } /* Inside the admin shell the section is a grouping, not a second card. */ .acard--form .aform .pform-section { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--r-md); } .acard--form .aform .pform-section h3 { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink); } /* Save/Cancel rows: primary first in reading order, danger separated to the far edge. */ .aform__actions { align-items: center; } .aform__actions .alink--danger { margin-inline-start: auto; } @media (max-width: 620px) { .aform__actions { flex-direction: column; align-items: stretch; } .aform__actions .btn { text-align: center; } .aform__actions .alink--danger { margin-inline-start: 0; } } /* ---- The list toolbar: search + filters at the start, page actions at the logical end. Replaces the old 520px .asearch strip on list pages. ---- */ .abar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; } .abar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 340px; min-width: 0; } .abar__filters input[type="search"], .abar__filters input[type="text"] { flex: 1 1 220px; max-width: 400px; } .abar__filters select { width: auto; min-width: 150px; } .abar input, .abar select { padding-block: 10px; } .abar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-inline-start: auto; } .abar .btn { padding: 10px 22px; } @media (max-width: 620px) { .abar__filters > * { flex: 1 1 100%; } .abar__filters input[type="search"], .abar__filters input[type="text"] { max-width: none; } .abar__filters select { width: 100%; } .abar__actions { width: 100%; margin-inline-start: 0; } .abar__actions .btn { flex: 1 1 auto; text-align: center; } } /* ---- One dashboard pagination (.dpager): numbered, purple current page, result summary, logical-direction safe. Rendered exclusively by partials/dash-pagination.blade.php. ---- */ .dpager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; font-family: var(--font-ui); } .dpager__summary { margin: 0; font-size: 13px; color: var(--muted); } .dpager__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; margin-inline-start: auto; padding: 0; } .dpager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } a.dpager__btn { text-decoration: none; } .dpager__btn:hover { border-color: var(--purple); color: var(--purple-deep); background: #f6f2ff; } .dpager__btn:focus-visible { outline: 3px solid rgba(106, 72, 229, .35); outline-offset: 1px; } .dpager__btn.is-current { background: var(--purple); border-color: var(--purple); color: var(--white); cursor: default; } .dpager__btn.is-disabled, .dpager__btn:disabled { color: var(--muted); background: var(--cream); cursor: default; pointer-events: none; } .dpager__gap { min-width: 24px; text-align: center; color: var(--muted); font-weight: 700; } @media (max-width: 620px) { .dpager { justify-content: center; } .dpager__summary { flex: 1 1 100%; text-align: center; } .dpager__list { margin-inline: auto; } } html[dir="rtl"] .dpager__summary { font-family: var(--font-ar); } /* Page numbers stay Latin and LTR, like every other count in the shell. */ html[dir="rtl"] .dpager__btn { direction: ltr; unicode-bidi: embed; font-variant-numeric: lining-nums; } /* ---- One empty state. The bare

pages inherit this too; inside an existing card it flattens to plain centred copy. ---- */ .aempty { display: block; margin: 0; padding: 40px 22px; text-align: center; font-family: var(--font-ui); font-size: 15px; color: var(--muted); background: var(--white); border-radius: var(--r-md); box-shadow: 0 3px 18px rgba(0,0,0,.06); } .aempty p { margin: 0; } .aempty svg { display: inline-block; margin-bottom: 10px; color: var(--purple); opacity: .55; } .acard .aempty, .atable-wrap .aempty { background: transparent; box-shadow: none; padding: 26px 12px; } /* ---- Semantic badge aliases: map any status to one of five variants without inventing new palettes. ---- */ .abadge--success { background: #eaf9f2; color: #16794f; } .abadge--warning { background: #fff6e0; color: #8a5b00; } .abadge--danger { background: #fdecea; color: #a12d20; } .abadge--info { background: #eef0fd; color: #4338ca; } .abadge--neutral { background: var(--card); color: var(--muted); } /* ---- Admin schedule agenda filters: one compact row of controls, not a stack of full-width fields. ---- */ .aschedule-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px; align-items: end; } .aschedule-filters .pfield { gap: 6px; } .aschedule-filters .pfield label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); } .aschedule-filters .aform__actions { align-self: end; } @media (max-width: 620px) { .aschedule-filters { grid-template-columns: 1fr 1fr; } .aschedule-filters .aform__actions { grid-column: 1 / -1; } } /* ---- CMS-3 · Admin Website Content editor. Reuses the admin system above - .acard, .aform, .pfield, .afilter, .abadge, .atable - and adds only what the four-tab editor genuinely needs: the tab bar's selected state, repeater item framing, image slot layout, and the read-only panels for content another domain owns. No new colour tokens. ---- */ .awc-tabs { margin: 0 0 18px; gap: 10px; } .awc-tabs .afilter__chip[aria-selected="true"] { font-weight: 800; } .awc-panel { display: grid; gap: 0; } .awc-panel > .acard:last-of-type { margin-bottom: 22px; } .awc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; padding-block: 16px; } .awc-head__title { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--ink); } .awc-head__state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .awc-head__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .awc-optional { font-weight: 500; color: var(--muted); font-size: 13px; margin-inline-start: 6px; } .awc-count { color: var(--muted); margin-inline-start: 8px; } .awc-fallback { color: var(--muted); font-style: italic; } .awc-problems { margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; } /* A repeater item is framed so its boundaries are obvious when several sit in a row, and so the move/remove controls clearly belong to one item. */ .awc-repeater { display: grid; gap: 16px; } .awc-repeater__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; } .awc-item { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-sm); } .awc-item__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .awc-item__actions { display: flex; align-items: center; gap: 12px; } .awc-slot__body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: start; } .awc-slot__preview { position: relative; display: grid; place-items: center; min-height: 150px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--cream); } .awc-slot__preview img { max-width: 100%; height: auto; border-radius: var(--r-sm); } .awc-slot__empty { margin: 0; color: var(--muted); font-size: 14px; } .awc-slot__detail { display: grid; gap: 14px; } .awc-slot__source { position: absolute; inset-inline-start: 10px; bottom: 10px; } .awc-file { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; min-width: 0; } .awc-file .pfield__label, .awc-file .field-hint, .awc-file .pfield__error { grid-column: 1 / -1; } .awc-file__choose { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 10px 14px; border: 1px solid var(--purple); border-radius: var(--r-sm); color: var(--purple-deep); background: var(--white); cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 700; } .awc-file__choose:hover { background: #faf7ff; } .awc-file input.visually-hidden { width: 1px; height: 1px; padding: 0; } .awc-file input:focus-visible + .awc-file__choose { outline: 3px solid var(--yellow); outline-offset: 2px; } .awc-file__choose svg, .awc-slot .btn svg, .awc-sec--canonical .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .awc-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-ui); font-size: 12px; unicode-bidi: isolate; } .awc-slot .btn, .awc-sec--canonical .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Read-only panels: visibly not an input, so nobody looks for a save button. */ .awc-source, .awc-mirror { padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--r-sm); display: grid; gap: 6px; } .awc-source + .awc-source { margin-top: 12px; } .awc-source__owner, .awc-source__text, .awc-mirror__label { margin: 0; } .awc-mirror__label { font-weight: 700; font-size: 14px; } /* Grid and flex children default to min-width:auto, which refuses to shrink below their content and pushes the whole editor wider than a phone viewport. Every container the editor introduces opts out explicitly. */ .awc-panel, .awc-panel > *, .awc-repeater > *, .awc-item > *, .awc-item__bar > *, .awc-slot__detail > *, .awc-head__state > *, .awc-source > *, .awc-mirror > * { min-width: 0; } /* A long unbroken string an admin pastes must wrap rather than widen the page. */ .awc-source__text, .awc-mirror__label, .awc-problems li { overflow-wrap: anywhere; } @media (max-width: 900px) { .awc-slot__body { grid-template-columns: 1fr; } } @media (max-width: 620px) { .awc-tabs { gap: 8px; } .awc-item { padding: 12px; } .awc-item__bar { align-items: flex-start; } } /* ---- CMS-3.5 · Website Content usability. Index summary, filter bar, responsive rows, the purple live-page eye, the dashboard shortcut, and the editor's sticky tab bar and action row. All built on the admin tokens and classes above; no new colour is introduced. ---- */ /* The eye means exactly one thing everywhere in this admin: open the public page. Compact on purpose so it never outweighs the row's primary action. */ .awc-eye { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--purple); color: var(--white); transition: background .15s ease, transform .15s ease; } .awc-eye:hover { background: var(--purple-deep); } .awc-eye:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } .awc-eye[data-tooltip] { position: relative; } .awc-eye svg { display: block; } /* ---- Index ---- */ .awc-summary { margin-bottom: 18px; } .awc-summary .astat { padding: 0; } .awc-summary__cell { display: block; padding: 18px 22px; } .awc-group { padding-block: 20px; } .awc-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .awc-row__name { display: block; font-size: 15px; } /* Column widths. Actions is fixed so no label length can change a row shape; the two short columns are sized to their content so the page name absorbs the slack instead of every column drifting apart. */ .awc-table__actions-head, .awc-table__actions { width: 140px; text-align: end; } .awc-table__owner { width: 20%; min-width: 120px; } .awc-table__state { width: 18%; min-width: 130px; } .awc-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* This table never needs a horizontal scrollbar: it fits above the breakpoint and becomes stacked cards below -t. Leaving the scroll container in place cost a-permanent 42px scrollbar — the hidden tooltips count toward scroll width — and would have clipped every tooltip that opened above a row. */ .awc-group .atable-wrap { overflow: visible; } /* Below this width the table becomes a stack of cards. Same markup, -o the row an admin reads on a phone is the row that was tested on a desktop — and the primary action is reachable without scrolling anything sideways. */ @media (max-width: 860px) { .awc-table, .awc-table tbody, .awc-table tr, .awc-table td, .awc-table th { display: block; } .awc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .awc-table tbody tr { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; margin-bottom: 12px; display: grid; gap: 8px; } .awc-table tbody tr + tr td { border-top: 0; } .awc-table td, .awc-table th { padding: 0; border: 0; text-align: start; } .awc-table td[data-label]::before { content: attr(data-label) ": "; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .awc-table td:last-child::before { content: none; } /* Still one compact row of icons, never full-width buttons. Aligned to the reading direction so the first action is where the eye starts. */ .awc-table__actions { width: auto; text-align: start; } .awc-toolbar { justify-content: flex-start; margin-top: 4px; } } /* ---- Dashboard shortcut ---- */ /* The stats grid above sets no bottom margin and .acard sets no top one, so this card sat flush against the numbers. Matches the 20px rhythm .ahome already uses between the dashboard blocks below it. */ .awc-shortcut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; } .awc-shortcut__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-sm); background: #f3eefe; color: var(--purple-deep); } .awc-shortcut__text { flex: 1 1 220px; min-width: 0; } .awc-shortcut__text .acard__title, .awc-shortcut__text .acard__lead { margin: 0; } .awc-shortcut .btn { flex: 0 0 auto; } /* ---- Editor: sticky tab bar ---- */ .awc-tabs-dock { position: sticky; top: 0; z-index: 3; margin: 0 0 18px; padding: 10px 0; background: var(--cream); border-bottom: 1px solid var(--border); } .awc-tabs { margin: 0; } /* ---- Editor: collapsible sections. One flat list of headers instead of a stack of open cards. A closed body keeps its fields in the DOM so no unsaved value is lost, and costs zero height because the hidden contract at the top of this file makes it so. ---- */ .awc-sections { display: grid; gap: 10px; margin-bottom: 18px; } .awc-sec { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .awc-sec.is-open { border-color: var(--purple); } .awc-sec__head { margin: 0; font-size: inherit; font-weight: inherit; } .awc-sec__toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); text-align: start; } .awc-sec__toggle:hover { background: #faf7ff; } .awc-sec__toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; } .awc-sec__chevron { display: inline-flex; flex: 0 0 auto; color: var(--purple-deep); transition: transform .15s ease; } .awc-sec.is-open .awc-sec__chevron { transform: rotate(90deg); } /* Mirrored, so the closed chevron always points along the reading direction. */ html[dir="rtl"] .awc-sec__chevron { transform: scaleX(-1); } html[dir="rtl"] .awc-sec.is-open .awc-sec__chevron { transform: scaleX(-1) rotate(-90deg); } .awc-sec__name { flex: 1 1 auto; min-width: 0; } .awc-sec__body { display: grid; gap: 18px; padding: 4px 18px 20px; border-top: 1px solid var(--border); } .awc-elsewhere { margin-top: 4px; } /* ---- Editor: sticky actions ---- */ .awc-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 12px 0; background: var(--cream); border-top: 1px solid var(--border); } .awc-actions .aform__actions { flex-wrap: wrap; margin: 0; } .awc-actions__hint { color: var(--muted); font-family: var(--font-ui); font-size: 12px; flex: 1 1 200px; } /* Editor help is visible to both pointer and keyboard users. It uses the same compact dark tooltip language as the Website Content row actions. */ .awc-help[data-tooltip] { position: relative; } .awc-help[data-tooltip]::after { content: attr(data-tooltip); display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 7px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: normal; text-align: start; pointer-events: none; z-index: 8; } .awc-help[data-tooltip]:hover::after, .awc-help[data-tooltip]:focus-visible::after { display: block; } .awc-head__state .awc-help[data-tooltip]::after { inset-inline-start: auto; inset-inline-end: 0; } html[dir="rtl"] .awc-help[data-tooltip]::after { font-family: var(--font-ar); } .awc-subhead { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin: 22px 0 12px; } /* ---- Editor: search preview ---- */ .awc-preview { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 18px; background: var(--white); } .awc-preview p { margin: 0 0 4px; } .awc-preview__note { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .awc-preview__title { font-size: 17px; color: var(--purple-deep); overflow-wrap: anywhere; } .awc-preview__url { font-family: var(--font-ui); font-size: 12px; color: var(--green); overflow-wrap: anywhere; } .awc-preview__body { font-size: 13px; color: var(--body); overflow-wrap: anywhere; } @media (max-width: 620px) { .awc-tabs-dock { padding: 8px 0; } .awc-actions { padding: 10px 0; } .awc-shortcut .btn { width: 100%; } .awc-head, .awc-head__state { align-items: flex-start; } .awc-head__state { justify-content: flex-start; width: 100%; } .awc-file { grid-template-columns: 1fr; } .awc-file__name { white-space: normal; overflow-wrap: anywhere; } .awc-slot .aform__actions .btn { width: 100%; } } /* Arabic face for the content this module renders, like every admin block. */ html[dir="rtl"] .awc-sec, html[dir="rtl"] .awc-preview, html[dir="rtl"] .awc-tooltip-host::after, html[dir="rtl"] .awc-shortcut__text { font-family: var(--font-ar); } /* ---- CMS-4 · Row action controls and their tooltips. Every action is the same square whatever it does, so the Actions column lands on one grid and a long label can never stretch a row. Meaning is carried by the icon and the tooltip, and emphasis by fill rather than by size. ---- */ .awc-act { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-sm); border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .awc-act svg { display: block; } /* Filled: the row's management destination. */ .awc-act--solid { background: var(--purple); color: var(--white); } .awc-act--solid:hover { background: var(--purple-deep); } /* Tinted: the canonical owner that supplies what this editor does not. A third weigh- between the two, so a hybrid row reads as edit-here, manage-there, view — three jobs, three weights, still three identical squares. */ .awc-act--outline { background: #f3eefe; border-color: #d9cdfa; color: var(--purple-deep); } .awc-act--outline:hover { background: #e9e0fb; border-color: var(--purple); } /* Outlined: viewing the live page. Same size, lighter weight. */ .awc-act--ghost { background: var(--white); border-color: var(--border); color: var(--purple-deep); } .awc-act--ghost:hover { border-color: var(--purple); background: #f3eefe; } .awc-act:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* The tooltip. Hidden with display, not opacity: a hidden-but-laid-out tooltip still counts toward its ancestors' scroll width, which is what put a permanent horizontal scrollbar under a table that already fits. Not rendering it at all costs the fade, which a utility tooltip does not need. It never receives pointer events, so it cannot swallow the click it describes, and it is anchored to the control's trailing edge so it opens inward on both sides of the table in either writing direction. */ .awc-act[data-tooltip] { position: relative; } .awc-eye[data-tooltip]::after, .awc-act[data-tooltip]::after { content: attr(data-tooltip); display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-family: var(--font-ui); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; z-index: 6; } /* Hover AND keyboard focus: an icon control that only explains itself to a mouse is unusable with a keyboard. */ .awc-eye[data-tooltip]:hover::after, .awc-eye[data-tooltip]:focus-visible::after, .awc-act[data-tooltip]:hover::after, .awc-act[data-tooltip]:focus-visible::after { display: block; } html[dir="rtl"] .awc-eye[data-tooltip]::after, html[dir="rtl"] .awc-act[data-tooltip]::after { font-family: var(--font-ar); } /* ---- Editor: hybrid sections (CMS-5B) ---- */ /* A canonical section looks like a content section and behaves like a different thing, so it is marked rather than left to be discovered: a tinted edge, and a lifecycle line above its fields that says whether saving publishes. */ .awc-lifecycle { margin: 0 0 14px; font-family: var(--font-ui); font-size: 12px; line-height: 1.6; color: var(--muted); } .awc-lifecycle--live { color: var(--purple-deep); font-weight: 700; } .awc-sec--canonical { border-inline-start: 3px solid var(--purple); } .awc-sec--canonical .awc-sec__name { color: var(--purple-deep); } .awc-context { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); } .awc-context__row { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; } .awc-context__row + .awc-context__row { border-top: 1px solid rgba(28,27,26,0.06); } .awc-context dt { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; flex: 0 0 180px; } .awc-context dd { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--near-black); min-width: 0; flex: 1 1 200px; } .awc-entity { margin-bottom: 14px; } .awc-entity select { max-width: 420px; } @media (max-width: 620px) { .awc-context dt, .awc-context dd { flex: 1 1 100%; } } /* Facilitator Profile Photo and Professional Documents */ .pform__sections-form { display: flex; flex-direction: column; gap: 26px; } .fphoto-card { display: flex; flex-direction: column; gap: 14px; } .fphoto-preview-wrap { display: flex; justify-content: center; align-items: center; margin: 10px 0; } .fphoto-img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--purple); } .fphoto-img--lg { width: 72px; height: 72px; } .fphoto-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; background: #eef2ff; color: var(--purple-deep); font-family: var(--font-display); font-weight: 700; font-size: 32px; border: 2px solid var(--purple); } .fphoto-avatar--lg { width: 72px; height: 72px; font-size: 28px; } .fphoto-admin-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .fphoto-upload-form { display: flex; flex-direction: column; gap: 10px; } .fphoto-remove-form { display: flex; justify-content: center; } .fdoc-section { display: flex; flex-direction: column; gap: 20px; } .fdoc-upload-form { padding: 18px; border: 1px dashed var(--border); border-radius: 12px; background: #fafafa; } .fdoc-row-actions { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } .fdoc-app-docs { border-top: 1px solid var(--border); padding-top: 18px; } /* ================= Admin offering detail (8-Week Programme) ================= One reading order: header with the next step, a summary of what the run IS beside its website status, the one setting that still changes, operations, and the irreversible action last in its own box. The page used to put .adetail's two-column grid on a single card, so auto-placement scattered the heading, panels, data list and Zoom form across alternating columns. Logical properties throughout, so Arabic mirrors without extra rules. */ .acohort__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; } .acohort__title { min-width: 0; flex: 1 1 320px; } .acohort__head .acard__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; } .acohort__sub { margin: 6px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); overflow-wrap: anywhere; } .acohort__actions { display: flex; flex-wrap: wrap; gap: 10px; } .acohort__actions .btn, .acohort__zoom-row .btn, .adanger__btn { height: 46px; padding: 0 22px; } .acohort__notice { flex-basis: 100%; margin: 0; } .acohort__grid { display: grid; gap: 22px; align-items: start; margin-bottom: 22px; } .acohort__grid > *, .acohort__side > * { min-width: 0; margin-bottom: 0; } .acohort__side { display: grid; gap: 22px; min-width: 0; } @media (min-width: 1200px) { .acohort__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } } .acohort__zoom { max-width: 760px; } .acohort__zoom-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; } .acohort__zoom-row input[type="url"] { flex: 1 1 280px; min-width: 0; } .acohort__empty, .apanel__empty { margin: 4px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); } .acohort__sessions .acard__h, .aparticipation .acard__h { margin-bottom: 12px; } /* The Zoom link inputs (cohort setup, facilitator 1-to-1) share the admin field style rather than the marketing pill. */ .acohort__zoom input[type="url"], .iar-meeting input[type="url"] { width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink); padding: 11px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); } .iar-meeting input[type="url"] { max-width: 560px; } .iar-meeting__status { font-family: var(--font-ui); font-size: 13px; color: var(--muted); } /* Key/value tiles: configuration and seat counts read at a glance. */ .akv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 0; } .akv > div { min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--cream); } .akv dt { margin: 0 0 4px; font-family: var(--font-ui); font-size: 12px; line-height: 1.35; color: var(--muted); } .akv dd { margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; } .akv.aseats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; } @media (max-width: 720px) { .akv.aseats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Shared status panels: website visibility and the readiness checklist. */ .avis, .areadiness { padding: 18px 20px; } .apanel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .apanel__title { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink); } .apanel__lead { margin: 8px 0 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--body); } .avis { border-inline-start: 4px solid #d97706; } .avis--visible { border-inline-start-color: #16a34a; } .avis--sold-out { border-inline-start-color: #64748b; } .avis__reasons { display: grid; gap: 4px; margin: 8px 0 0; padding-inline-start: 20px; list-style: disc; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--ink); } .avis__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .avis__actions .btn { height: 38px; padding: 0 14px; font-size: 13px; letter-spacing: 0.2px; } .avis__actions .btn svg { width: 12px; height: 12px; } .avis__checkout { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(217, 119, 6, 0.1); font-family: var(--font-ui); font-size: 13px; color: #b45309; } .areadiness__group { margin: 14px 0 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .areadiness__list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; } .areadiness__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: #a12d20; } .areadiness__item > span:last-child { min-width: 0; overflow-wrap: anywhere; } .areadiness__item small { display: block; margin-top: 2px; font-size: 12.5px; color: #a12d20; opacity: 0.85; } .areadiness__mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #fdecea; color: #a12d20; } .areadiness__done { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .areadiness__done li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 10px; border-radius: var(--r-pill); background: #eaf9f2; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: #16794f; overflow-wrap: anywhere; } .areadiness__done svg { flex-shrink: 0; } /* Danger zone: irreversible, last, and visibly apart. */ .adanger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.35), 0 3px 18px rgba(0, 0, 0, 0.06); } .adanger__copy { flex: 1 1 320px; min-width: 0; } .adanger h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 16px; color: #a12d20; } .adanger p { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--body); } .adanger__btn { background: transparent; color: #a12d20; box-shadow: inset 0 0 0 2px #c0392b; } .adanger__btn:hover { background: #c0392b; color: var(--white); } @media (max-width: 620px) { .acohort__actions, .acohort__actions .btn, .adanger__btn, .acohort__zoom-row .btn { width: 100%; } } html[dir="rtl"] .acohort__sub, html[dir="rtl"] .akv dt, html[dir="rtl"] .akv dd, html[dir="rtl"] .apanel__lead, html[dir="rtl"] .avis__reasons, html[dir="rtl"] .avis__checkout, html[dir="rtl"] .areadiness__group, html[dir="rtl"] .areadiness__item, html[dir="rtl"] .areadiness__done li, html[dir="rtl"] .acohort__empty, html[dir="rtl"] .apanel__empty, html[dir="rtl"] .adanger p, html[dir="rtl"] .iar-meeting__status { font-family: var(--font-ar); } /* ================= Admin offering edit: scheduling clarity ================= Three different answers, never blurred: Programme setup (are the fields complete?), Schedule validation (would this calendar work?) and Website visibility (is it public?). A clash with another session is HARD and red; declared availability is a WARNING and amber, overridden only by its own checkbox. Presentation only - every state comes from the component. */ .ablocker { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--r-sm); background: #fdecea; box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.4); color: #a12d20; } .ablocker > svg { flex-shrink: 0; margin-top: 2px; } .ablocker__body { min-width: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .ablocker__body p { margin: 0; } .ablocker__body .ablocker__title { font-weight: 700; font-size: 15px; margin-bottom: 2px; } .ablocker .alink { display: inline-block; margin-top: 6px; color: #a12d20; text-decoration: underline; } .alifecycle .apanel__lead { margin-top: 6px; } .alifecycle__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--muted); } .alifecycle__steps li { display: inline-flex; align-items: center; gap: 8px; } .alifecycle__steps span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--border); color: var(--white); font-size: 12px; } .alifecycle__steps .is-current { color: var(--ink); } .alifecycle__steps .is-current span { background: var(--purple-deep); } .alifecycle__status { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; } .alifecycle__status li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--cream); } .alifecycle__status .alink { font-size: 13px; } .alifecycle__ready { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #eaf9f2; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: #16794f; } .acohort-form__panels { display: grid; gap: 22px; align-items: start; margin-bottom: 22px; } .acohort-form__panels > * { min-width: 0; margin-bottom: 0; } @media (min-width: 1200px) { .acohort-form__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .avis__derived { margin: 10px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.55; color: var(--muted); } .avis__actions .btn svg:not(.arrow) { width: 12px; height: 12px; fill: currentColor; } /* The validation section inside the form: a flex column, outranking the form's two-column section grid. */ .acard--form .aform .pform-section.asched { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; scroll-margin-top: 24px; } /* min-width: 0 on the section and its children: as a GRID ITEM with visible overflow the section would otherwise keep the preview table's min-content width and push the whole form past the card at phone widths. Shrinking lets the table fall back to its own intentional scroller instead. */ .asched > * { min-width: 0; max-width: 100%; } .asched .apanel__head h3 { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink); } .asched > .field-hint { margin: -6px 0 0; } .asched__pending { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); } .asched__conflict { padding: 14px 16px; border-radius: 14px; background: #fdecea; box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.35); color: #a12d20; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; } .asched__alert-title { margin: 0; font-weight: 700; font-size: 15px; } .asched__alert-lead { margin: 2px 0 0; } .asched__conflicts { list-style: none; display: grid; gap: 10px; margin: 12px 0 0; padding: 0; } .asched__conflicts > li { min-width: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); color: var(--ink); overflow-wrap: anywhere; } .asched__conflicts > li > b { color: #a12d20; } .asched__conflicts ul { margin: 4px 0 0; padding-inline-start: 18px; list-style: disc; } .asched__when { white-space: nowrap; color: var(--body); } .asched__tz { margin: 10px 0 0; font-size: 12.5px; color: var(--body); } .asched__valid { margin: 0; padding: 10px 14px; border-radius: 12px; background: #eaf9f2; font-family: var(--font-ui); font-size: 14px; color: #16794f; } .asched__sub { margin: 4px 0 0; font-family: var(--font-display); font-size: 15px; color: var(--ink); } .asched__hint { width: 100%; margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #a12d20; } .acohort-form .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Declared availability against the proposal: grouped by weekday, amber when outside (a warning), green when inside. Shared by both edit forms. */ .aavail { padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 14px; } .aavail--warn, .aavail--none { background: #fff8e8; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4); } .aavail--ok { background: #f3fbf7; box-shadow: inset 0 0 0 1px rgba(22, 121, 79, 0.3); } .aavail .apanel__title { font-size: 15px; } .aavail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 22px; margin-top: 10px; } .aavail__block { min-width: 0; } .aavail__label { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .aavail__empty, .aavail__proposed { margin: 0; color: var(--ink); } .aavail__proposed { font-weight: 700; } .aavail__days { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; } .aavail__days li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .aavail__days b { min-width: 92px; color: var(--ink); } .aavail__slots { display: flex; flex-wrap: wrap; gap: 4px 12px; } .aavail__slot { white-space: nowrap; color: var(--ink); } .aavail__slot small { margin-inline-start: 4px; color: var(--muted); } .aavail__slot.is-muted { color: var(--muted); text-decoration: line-through; } .aavail__ok, .aavail__warn { margin: 12px 0 0; font-weight: 700; } .aavail__ok { color: #16794f; } .aavail__warn { color: #8a5b00; } .aavail__dates { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; } .aavail__dates li { padding: 3px 10px; border-radius: var(--r-pill); background: rgba(217, 119, 6, 0.12); font-size: 12.5px; color: #8a5b00; } .aavail .aavail__confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-weight: 700; color: var(--ink); cursor: pointer; } .aavail .aavail__confirm input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--purple-deep); } .aavail__override-note { margin: 4px 0 0; } html[dir="rtl"] .ablocker__body, html[dir="rtl"] .alifecycle__steps, html[dir="rtl"] .alifecycle__ready, html[dir="rtl"] .avis__derived, html[dir="rtl"] .asched__pending, html[dir="rtl"] .asched__conflict, html[dir="rtl"] .asched__valid, html[dir="rtl"] .asched__hint, html[dir="rtl"] .aavail { font-family: var(--font-ar); }