/* ============================================================================ SADERLEX STORE · shared store layer Built ON the SADER monochrome design system (tokens → base → components). This file holds everything shared across the store's own pages: the commerce red-spark, the button set, the fixed header, the footer, and the inner-page building blocks (sub-page head, auth split, form controls, legal document, status panel). Page-specific section CSS stays inline in each page. ONE deviation from the monochrome system: a deep "commerce red" reserved EXCLUSIVELY for prices and subscribe / create-account actions, so that colour itself means "buy". Everything else is ink on white. ============================================================================ */ :root{ /* The commerce spark IS the site accent, and the site accent is per-country (crimson for Lebanon, gold for the Emirates) — so these follow it rather than repeating a hex. The family is declared in local-site/static/ site-header.css, which the /store/ proxy injects into every store page. Fallbacks kept for a store page opened OUTSIDE that proxy. */ --commerce: var(--lx-accent, #981B31); /* buy actions + prices only */ --commerce-dark: var(--lx-accent-shade, #7E1628); /* used as TEXT, so it is the darkened accent: the accent itself is ~2.4:1 on white in gold. */ --commerce-soft: rgba(var(--lx-accent-rgb, 152,27,49),.10); --commerce-line: rgba(var(--lx-accent-rgb, 152,27,49),.32); } /* Latin numerals / prices / years stay crisp & upright inside RTL */ .lx-fig{ font-family: var(--font-sans); font-variant-numeric: tabular-nums; } /* ========================================================================== BUTTONS — the store's own set (full control of the red buy-spark). .st-btn ink primary (the calm, authoritative action) .st-btn--buy commerce red (subscribe / create account — colour == buy) .st-btn--ghost outline, fills with ink on hover .st-btn--block full width (forms) ========================================================================== */ .st-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); padding-block:var(--space-4); padding-inline:var(--space-7); font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-bold); line-height:1; letter-spacing:.01em; border-radius:var(--radius-xs); border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); cursor:pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .st-btn:hover{ background:#000; border-color:#000; color:#fff; } .st-btn:active{ transform: translateY(1px); } .st-btn:disabled, .st-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; } [data-theme="dark"] .st-btn{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } [data-theme="dark"] .st-btn:hover{ background:#fff; color:#0E0E0E; border-color:#fff; } .st-btn--buy{ background:var(--commerce); border-color:var(--commerce); color:#fff; } .st-btn--buy:hover{ background:var(--commerce-dark); border-color:var(--commerce-dark); color:#fff; } .st-btn--buy:disabled, .st-btn--buy[aria-disabled="true"]{ background:var(--commerce); border-color:var(--commerce); } [data-theme="dark"] .st-btn--buy{ background:var(--commerce); border-color:var(--commerce); color:#fff; } [data-theme="dark"] .st-btn--buy:hover{ background:#fff; color:var(--commerce); border-color:#fff; } .st-btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); } .st-btn--ghost:hover{ background:var(--text); color:var(--bg); border-color:var(--text); } .st-btn--block{ inline-size:100%; } /* Quiet animated text link */ .st-link{ display:inline-flex; align-items:center; gap:.5rem; color:var(--text); font-weight:var(--fw-bold); font-size:var(--fs-small); cursor:pointer; } .st-link::after{ content:""; inline-size:1.2em; block-size:1px; background:currentColor; transition: inline-size var(--dur-fast) var(--ease); } .st-link:hover{ color:var(--accent-deep); } .st-link:hover::after{ inline-size:2em; } .st-link--buy{ color:var(--commerce); } .st-link--buy:hover{ color:var(--commerce-dark); } /* ========================================================================== HEADER — fixed, transparent over the first fold, solidifies on scroll. ========================================================================== */ .st-head{ position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-header); display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-block-size:var(--header-h); padding-inline:var(--gutter); background:rgba(255,255,255,0); border-block-end:1px solid transparent; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .st-head.is-solid{ background:rgba(255,255,255,.92); border-block-end-color:var(--line); backdrop-filter:saturate(140%) blur(8px); } /* Inner pages have no transparent hero behind the header; keep it solid from load. */ .st-head--solid{ background:rgba(255,255,255,.92); border-block-end-color:var(--line); backdrop-filter:saturate(140%) blur(8px); } .st-brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--text); letter-spacing:0; } .st-brand__dot{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--commerce); flex:0 0 auto; } /* SaderLex wordmark logo — replaces the text brand in the header */ .lx-brand{ display:inline-flex; align-items:center; gap:.55rem; color:var(--text); } /* 44px, matching .lx-brand__logo in static/site-header.css. It was 38px, so the wordmark on the store, /login and /register was noticeably smaller than on the landing page and every other page of the site. The header band that holds it is sized from --header-h, which is now derived from this same 44px - see the Header note in tokens.css. */ .lx-brand__logo{ block-size:44px; inline-size:auto; display:block; } .lx-brand__dot{ position:relative; flex:0 0 auto; align-self:center; inline-size:9px; block-size:9px; border-radius:50%; background:var(--commerce); } .lx-brand__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--commerce); animation:lxLive 1.8s ease-out infinite; } @keyframes lxLive{ 0%{ transform:scale(1); opacity:.55; } 70%{ opacity:0; } 100%{ transform:scale(3); opacity:0; } } @media (prefers-reduced-motion:reduce){ .lx-brand__dot::after{ animation:none; } } .st-nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem); } .st-nav a{ position:relative; font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text); padding-block:.5rem; } .st-nav a::after{ content:""; position:absolute; inset-inline:0; inset-block-end:.2rem; block-size:1px; background:var(--accent); transform:scaleX(0); transform-origin:center; transition:transform var(--dur-fast) var(--ease); } .st-nav a:hover::after{ transform:scaleX(1); } .st-head__right{ display:flex; align-items:center; gap:var(--space-5); } .st-head__login{ font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text); } .st-head__login:hover{ color:var(--accent-deep); } .st-head__buy{ padding-block:var(--space-3); padding-inline:var(--space-5); font-size:var(--fs-caption); } /* Boxed variant for the login link only — same shape as .st-head__buy (the Register button) but ink/black instead of commerce red, so the two read as a matched pair. The currency-chooser trigger also carries the plain .st-head__login class (see line ~434); it is untouched because it does not have this modifier. Compound selector so this wins regardless of the other .st-head__login rules' position in the file. */ .st-head__login.st-head__login--box{ display:inline-flex; align-items:center; justify-content:center; padding-block:var(--space-3); padding-inline:var(--space-5); font-size:var(--fs-caption); font-weight:var(--fw-bold); line-height:1; letter-spacing:.01em; border-radius:var(--radius-xs); background:#111; border:1px solid #111; color:#fff; } .st-head__login.st-head__login--box:hover{ background:#000; border-color:#000; color:#fff; } .st-burger{ display:none; flex-direction:column; gap:5px; padding:8px; } .st-burger span{ inline-size:24px; block-size:2px; background:var(--text); transition:.3s var(--ease); } @media (max-width:1000px){ .st-nav{ position:fixed; inset-block-start:var(--header-h); inset-inline:0; flex-direction:column; align-items:flex-start; gap:0; padding:var(--space-4) var(--gutter) var(--space-6); background:rgba(255,255,255,.98); border-block-end:1px solid var(--line); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.3s var(--ease); } .st-nav.is-open{ transform:none; opacity:1; pointer-events:auto; } .st-nav a{ inline-size:100%; padding-block:var(--space-4); border-block-end:1px solid var(--line); font-size:var(--fs-h4); } .st-burger{ display:flex; } .st-head__login, .lang-switch{ display:none; } } /* ========================================================================== SUB-PAGE HEAD — the compact masthead inner pages open with (legal docs, status). Sits below the fixed header on an off-white ground with a hairline foot. Not the homepage hero — a quieter, document-style opening. ========================================================================== */ .st-subhead{ background:var(--bg-alt); border-block-end:1px solid var(--line); padding-block: calc(var(--header-h) + clamp(2rem,5vh,3.25rem)) clamp(2rem,4.5vh,3rem); } .st-subhead__kicker{ display:inline-flex; align-items:center; gap:.7rem; font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text-muted); } .st-subhead__kicker::before{ content:""; inline-size:30px; block-size:1px; background:var(--accent); } .st-subhead__title{ margin-block-start:var(--space-4); font-family:var(--font-display); font-weight:800; font-size:var(--fs-display-3); line-height:1.08; color:var(--text); text-wrap:balance; max-inline-size:22ch; } .st-subhead__sub{ margin-block-start:var(--space-4); max-inline-size:60ch; font-size:var(--fs-lead); line-height:var(--lh-body-ar); color:var(--text-muted); } .st-subhead__meta{ margin-block-start:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); font-size:var(--fs-caption); color:var(--text-faint); } .st-subhead__meta b{ color:var(--text); font-weight:var(--fw-bold); } /* ========================================================================== AUTH — split composition for login / register. A dark heritage panel on one side (the credibility that earns the sign-up), the form on the other. Stacks on small screens with the panel reduced to a slim brand strip. ========================================================================== */ /* Sized to its CONTENT, not pinned to 100svh. Forcing full viewport height left a large empty band under both columns on a tall screen and pushed the footer far below the fold. Kept in step with the SaderLex copy at local-site/static/store/css/store.css — change both. */ .st-auth{ display:grid; grid-template-columns: 0.92fr 1.08fr; } .st-auth--wide{ grid-template-columns: 0.82fr 1.18fr; } /* heritage / reassurance panel */ .st-auth__aside{ position:relative; overflow:hidden; isolation:isolate; color:#fff; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--space-8); padding: calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) clamp(2rem,4vw,4rem) clamp(2.5rem,4vw,4rem); } .st-auth__bg{ position:absolute; inset:0; z-index:-2; } .st-auth__bg img{ inline-size:100%; block-size:100%; filter:grayscale(1) brightness(.46) contrast(1.05); } .st-auth__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(14,14,14,.78) 0%, rgba(14,14,14,.9) 70%, #0E0E0E 100%); } .st-auth__brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; } .st-auth__year{ font-family:var(--font-display); font-weight:300; font-size:clamp(3.5rem,2.4rem + 6vw,7rem); line-height:.85; color:#fff; } .st-auth__lede{ margin-block-start:var(--space-6); font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,1.05rem + 1.6vw,2.25rem); line-height:1.3; color:#fff; text-wrap:balance; max-inline-size:27ch; } .st-auth__cite{ margin-block-start:var(--space-5); font-size:clamp(1rem,.92rem+.35vw,1.15rem); line-height:1.5; color:var(--text-on-dark-soft); max-inline-size:none; } .st-auth__cite b{ color:#fff; font-weight:var(--fw-bold); } .st-auth__points{ display:flex; flex-direction:column; } .st-auth__points li{ display:flex; align-items:center; gap:var(--space-4); padding-block:var(--space-4); border-block-start:1px solid rgba(255,255,255,.16); font-size:var(--fs-small); color:#fff; } .st-auth__points li:first-child{ border-block-start:0; } .st-auth__points svg{ inline-size:18px; block-size:18px; color:#fff; flex:0 0 auto; opacity:.85; } /* form side */ /* NOT vertically centred: the card drifted low and left a gap under the header. Flex default flex-start puts it below the top padding, which already clears the fixed header. */ .st-auth__main{ display:flex; flex-direction:column; padding: calc(var(--header-h) + clamp(2rem,4vw,3.5rem)) clamp(1.25rem,4vw,4.5rem) clamp(2.5rem,4vw,4rem); } .st-auth__card{ inline-size:100%; max-inline-size:34rem; margin-inline:auto; } .st-auth__eyebrow{ font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text-muted); } .st-auth__title{ margin-block-start:var(--space-2); font-family:var(--font-display); font-weight:800; font-size:var(--fs-h1); line-height:1.1; color:var(--text); } .st-auth__intro{ margin-block-start:var(--space-3); color:var(--text-muted); font-size:var(--fs-body); line-height:var(--lh-body-ar); } .st-auth__intro a{ color:var(--commerce); font-weight:var(--fw-bold); } .st-auth__intro a:hover{ color:var(--commerce-dark); } /* The register action, moved here from the site header. Auto width and --ghost, so the one FILLED button on this card stays "log in": a login page with two solid buttons stops saying what it is for. */ .st-auth__alt{ margin-block-start:var(--space-4); } .st-auth__rule{ block-size:1px; background:var(--line); border:0; margin-block:var(--space-6); } .st-auth__foot{ margin-block-start:var(--space-6); padding-block-start:var(--space-5); border-block-start:1px solid var(--line); font-size:var(--fs-small); color:var(--text-muted); } .st-auth__foot a{ color:var(--text); font-weight:var(--fw-bold); } .st-auth__foot a:hover{ color:var(--accent-deep); } /* "Forgot your password?" — under the sign-in button, quiet on purpose: the one loud action on this card has to stay "تسجيل الدخول". Centred rather than start-aligned so it reads the same in both directions without a logical- property flip. Added 2026-09-10 with the token reset flow, which until then had no entry point anywhere on the live site. */ .st-auth__forgot{ margin-block-start:var(--space-4); text-align:center; font-size:var(--fs-small); } .st-auth__forgot a{ color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; } .st-auth__forgot a:hover{ color:var(--accent-deep); } @media (max-width:920px){ .st-auth, .st-auth--wide{ grid-template-columns:1fr; min-block-size:0; } .st-auth__aside{ min-block-size:0; padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7); flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-5); } .st-auth__aside .st-auth__points{ display:none; } .st-auth__year{ font-size:clamp(3rem,2rem + 8vw,4.5rem); } .st-auth__lede{ font-size:var(--fs-h4); max-inline-size:32ch; } .st-auth__main{ padding-block: var(--space-8) var(--space-9); } } @media (max-width:540px){ .st-auth__aside{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== FORM CONTROLS — one shared vocabulary. Sharp, ink-on-white, generous touch targets, ink focus ring (commerce red is never spent on chrome). Every control: default / hover / focus / disabled / invalid. RTL-native. ========================================================================== */ .st-form{ display:flex; flex-direction:column; gap:var(--space-5); } .st-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); } @media (max-width:520px){ .st-row{ grid-template-columns:1fr; } } .st-field{ display:flex; flex-direction:column; gap:var(--space-2); } .st-label{ font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text); } .st-label__opt{ font-weight:var(--fw-regular); color:var(--text-faint); } .st-label__req{ color:var(--commerce); font-weight:var(--fw-bold); margin-inline-start:.2em; } .st-input, .st-textarea, .st-select{ inline-size:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius-xs); padding-block:var(--space-4); padding-inline:var(--space-4); line-height:1.3; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .st-input::placeholder, .st-textarea::placeholder{ color:var(--text-faint); } .st-input:hover, .st-textarea:hover, .st-select:hover{ border-color:var(--text-muted); } .st-input:focus, .st-textarea:focus, .st-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,17,17,.12); } .st-input:disabled, .st-textarea:disabled{ background:var(--surface); color:var(--text-faint); cursor:not-allowed; } .st-input:user-invalid, .st-input[aria-invalid="true"]{ border-color:var(--commerce); box-shadow:0 0 0 3px var(--commerce-soft); } .st-textarea{ min-block-size:7.5rem; resize:vertical; } .st-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: left var(--space-4) center; background-size:12px; padding-inline-start:var(--space-7); } [dir="ltr"] .st-select{ background-position: right var(--space-4) center; padding-inline-start:var(--space-4); padding-inline-end:var(--space-7); } /* input with an inline affordance (password eye / inline action). The input inside is always dir="ltr" (a password must read left-to-right even on an Arabic page), so the reserved space and the button are anchored with a PHYSICAL `right`, not a logical inset — inset-inline-end resolves against the wrapper's own direction (inherited from the page, e.g. rtl), which disagreed with the ltr input and put the button on the wrong edge, overlapping the start of the password dots. Kept in step with local-site/static/store/css/store.css — change both. */ .st-inputwrap{ position:relative; display:flex; align-items:stretch; } .st-inputwrap .st-input{ padding-right:3.25rem; } .st-inputwrap__btn{ position:absolute; right:0; inset-block:0; inline-size:3rem; display:inline-flex; align-items:center; justify-content:center; color:var(--text-faint); background:none; border:0; cursor:pointer; transition:color var(--dur-fast) var(--ease); } .st-inputwrap__btn:hover{ color:var(--text); } .st-inputwrap__btn svg{ inline-size:18px; block-size:18px; } /* inline action that lives to the side of a field (e.g. Check availability) */ .st-field__inline{ display:flex; gap:var(--space-3); align-items:stretch; } .st-field__inline .st-input{ flex:1; } .st-help{ font-size:var(--fs-caption); color:var(--text-faint); } .st-help--ok{ color:#1c6b3f; } .st-help--bad{ color:var(--commerce); } /* checkbox — custom square that keeps the native input for a11y / form post */ .st-check{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-small); color:var(--text-muted); cursor:pointer; } .st-check input{ position:absolute; opacity:0; inline-size:0; block-size:0; } .st-check__box{ inline-size:20px; block-size:20px; flex:0 0 auto; margin-block-start:1px; border:1px solid var(--line-strong); border-radius:var(--radius-xs); background:var(--bg); display:grid; place-items:center; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .st-check__box svg{ inline-size:13px; block-size:13px; color:#fff; opacity:0; transition:opacity var(--dur-fast) var(--ease); } .st-check input:checked + .st-check__box{ background:var(--accent); border-color:var(--accent); } .st-check input:checked + .st-check__box svg{ opacity:1; } .st-check input:focus-visible + .st-check__box{ outline:2px solid var(--focus-ring); outline-offset:2px; } .st-check a{ color:var(--text); font-weight:var(--fw-bold); } .st-check a:hover{ color:var(--accent-deep); } .st-actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; } /* a quiet runner the live store shows above auth (order auto-cancel notice) */ .st-notice{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--commerce-soft); border:1px solid var(--commerce-line); border-radius:var(--radius-xs); font-size:var(--fs-caption); color:var(--commerce-dark); } .st-notice svg{ inline-size:16px; block-size:16px; flex:0 0 auto; } /* ========================================================================== LEGAL DOCUMENT — long-form reading. A sticky table of contents rail beside a measured prose column. The legal body is the official English text, set LTR inside the Arabic site; the rail + masthead carry the Arabic chrome. ========================================================================== */ .st-doc{ display:grid; grid-template-columns: 16rem minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; } .st-doc__toc{ position:sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); display:flex; flex-direction:column; gap:var(--space-2); max-block-size: calc(100svh - var(--header-h) - var(--space-8)); overflow:auto; } .st-doc__toc-h{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.04em; color:var(--text-faint); text-transform:uppercase; margin-block-end:var(--space-2); } .st-doc__toc a{ font-size:var(--fs-small); color:var(--text-muted); padding-block:.35rem; border-inline-start:2px solid var(--line); padding-inline-start:var(--space-4); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .st-doc__toc a:hover{ color:var(--text); border-inline-start-color:var(--line-strong); } .st-doc__toc a.is-current{ color:var(--text); border-inline-start-color:var(--commerce); font-weight:var(--fw-bold); } @media (max-width:880px){ .st-doc{ grid-template-columns:1fr; } .st-doc__toc{ position:static; max-block-size:none; flex-direction:row; flex-wrap:wrap; gap:var(--space-2) var(--space-4); padding-block-end:var(--space-5); margin-block-end:var(--space-6); border-block-end:1px solid var(--line); } .st-doc__toc a{ border-inline-start:0; padding-inline-start:0; } .st-doc__toc a.is-current{ border-inline-start:0; } .st-doc__toc-h{ inline-size:100%; } } /* the prose body (English legal text, isolated LTR) */ .st-prose{ color:var(--text); font-size:var(--fs-body); line-height:var(--lh-body); max-inline-size:74ch; overflow-wrap:break-word; } .st-prose a{ overflow-wrap:anywhere; } .st-prose > * + *{ margin-block-start:1.1em; } .st-prose h2{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); line-height:1.15; color:var(--text); margin-block-start:2.4em; padding-block-start:var(--space-6); border-block-start:1px solid var(--line); scroll-margin-block-start: calc(var(--header-h) + var(--space-6)); } .st-prose h2:first-child{ margin-block-start:0; padding-block-start:0; border-block-start:0; } .st-prose h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); color:var(--text); margin-block-start:1.8em; scroll-margin-block-start: calc(var(--header-h) + var(--space-6)); } .st-prose h4{ font-weight:var(--fw-bold); font-size:var(--fs-body); color:var(--text); margin-block-start:1.4em; } .st-prose p{ color:var(--text-muted); max-inline-size:74ch; } .st-prose strong{ color:var(--text); font-weight:var(--fw-bold); } .st-prose ul, .st-prose ol{ display:flex; flex-direction:column; gap:.6em; padding-inline-start:1.4em; color:var(--text-muted); } .st-prose ul li{ list-style:disc; } .st-prose ol li{ list-style:decimal; } .st-prose li::marker{ color:var(--text-faint); } .st-prose a{ color:var(--text); background-image:linear-gradient(var(--commerce),var(--commerce)); background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px; transition:background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); padding-block-end:1px; } .st-prose a:hover{ color:var(--commerce); background-size:100% 2px; } .st-prose__updated{ font-size:var(--fs-caption); color:var(--text-faint); } /* ========================================================================== STATUS PANEL — single-message result pages (e.g. forgot-password outcome). ========================================================================== */ .st-status{ min-block-size:100svh; display:grid; place-items:center; padding-block: calc(var(--header-h) + var(--space-8)) var(--space-9); } .st-status__card{ inline-size:100%; max-inline-size:40rem; text-align:center; } .st-status__badge{ inline-size:64px; block-size:64px; margin-inline:auto; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line-strong); } .st-status__badge svg{ inline-size:28px; block-size:28px; color:var(--text); } .st-status__badge--alert{ background:var(--commerce-soft); border-color:var(--commerce-line); } .st-status__badge--alert svg{ color:var(--commerce); } .st-status__title{ margin-block-start:var(--space-5); font-family:var(--font-display); font-weight:800; font-size:var(--fs-h1); line-height:1.12; color:var(--text); } .st-status__msg{ margin-block-start:var(--space-4); color:var(--text-muted); font-size:var(--fs-lead); line-height:var(--lh-body-ar); max-inline-size:48ch; margin-inline:auto; } .st-status__cta{ margin-block-start:var(--space-7); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; } .st-status__count{ margin-block-start:var(--space-5); font-size:var(--fs-caption); color:var(--text-faint); } .st-status__count b{ color:var(--text); font-weight:var(--fw-bold); } /* Order details under the status message — what the customer actually attempted. Rendered by statusstore.aspx, and only to the order's own owner, so a cancelled or refused payment names the book or the subscriptions rather than leaving the buyer with a bare sentence. Lives here, beside the panel it belongs to, rather than as a second outcome design in a page's