/* ============================================================================ SAFAR — COMPONENT LIBRARY ---------------------------------------------------------------------------- Reusable, framework-agnostic components built entirely on css/tokens.css. Load tokens.css FIRST, then this file. Every value resolves to an --av-* var, so re-theming is a matter of overriding tokens, never editing components. ============================================================================ */ /* --- BASE -------------------------------------------------------------------*/ /* control.html / login.html are HTML fragments — the browser wraps them in a with its default 8px margin and a transparent background. Reset it here (loaded by every page) so the parchment ground reaches the viewport edges: no white strips on the sides, no phantom scroll from the extra 16px. */ html, body { margin: 0; padding: 0; } body { background: var(--av-sand); } .av-body { font-family: var(--av-font-sans); font-size: var(--av-text-base); font-weight: var(--av-fw-light); color: var(--av-ink); background: var(--av-sand); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .av-body ::selection { background: var(--av-selection-bg); color: var(--av-selection-fg); } .av-body p { margin: 0 0 var(--av-space-4); line-height: var(--av-leading-normal); } .av-link { color: var(--av-gold-700); text-decoration: none; transition: var(--av-transition); } .av-link:hover { color: var(--av-gold-200); } .hidden { display: none !important; } /* --- GLOBAL FOCUS RING (system mandate — never suppressed) ------------------*/ /* base.css recipe, verbatim: 0-specificity :where() so component radii win, but the ring itself is never overridden by a component's outline:none. */ :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--av-radius-md); } /* --- TYPOGRAPHY HELPERS -----------------------------------------------------*/ .av-display { font-family: var(--av-font-display); letter-spacing: 0.02em; } .av-title { font-weight: var(--av-fw-medium); color: var(--av-gold-700); line-height: var(--av-leading-tight); } .av-eyebrow { font-size: var(--av-text-xs); letter-spacing: 0.22em; text-transform: uppercase; font-weight: var(--av-fw-semibold); color: var(--av-gold-700); } /* --- INPUTS (48px pill, ink text, strong border, halo, 3px focus) -----------*/ /* base.css .input recipe adopted onto the existing .av-input name. */ .av-input { font-family: var(--av-font-sans); font-size: var(--av-text-base); font-weight: var(--av-fw-regular); color: var(--color-foreground); height: 48px; padding: 0 18px; box-sizing: border-box; width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--av-radius-pill); background: var(--color-card-raised); box-shadow: var(--av-shadow-halo); transition: var(--av-transition); -moz-appearance: textfield; } .dark .av-input { background: var(--color-muted); } .av-input::placeholder { color: var(--color-neutral-400); } .av-input::-webkit-outer-spin-button, .av-input::-webkit-inner-spin-button { -webkit-appearance: none; } /* 3px --color-primary-300 focus border (base recipe); the global :focus-visible ring intentionally yields to this heavier input treatment. */ .av-input:focus, .av-input:active { outline: none; border: 3px solid var(--color-primary-300); } /* --- BUTTONS (48px pill, weight 600, gold-gradient primary) -----------------*/ /* base.css .btn semantics adopted onto the .av-btn family. .av-btn stays the primary (gold-gradient) button; the app relies on it being full-width by default, with .av-btn--inline for auto width. */ .av-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--av-space-2); font-family: var(--av-font-sans); font-size: var(--av-text-base); font-weight: var(--av-fw-semibold); color: var(--av-on-gold); height: 48px; padding: 0 var(--av-space-5); box-sizing: border-box; width: 100%; border: 1px solid transparent; border-radius: var(--av-radius-pill); background: var(--av-gradient-gold); cursor: pointer; transition: var(--av-transition); text-align: center; text-decoration: none; white-space: nowrap; } .av-btn:hover { filter: brightness(1.05); box-shadow: var(--av-shadow-halo); } .av-btn:active { transform: translateY(1px); } /* auto-width variant for inline use */ .av-btn--inline { width: auto; } /* secondary / ghost — base.css .btn-secondary outline */ .av-btn--ghost { background: transparent; color: var(--color-primary-700); border: 1px solid var(--color-primary-500); } .av-btn--ghost:hover { background: var(--color-primary-50); color: var(--color-primary-700); filter: none; box-shadow: none; } .dark .av-btn--ghost { color: var(--color-primary); } .dark .av-btn--ghost:hover { background: var(--color-muted); } /* live / destructive — base.css .btn-destructive maroon */ .av-btn--live { background: var(--av-maroon-bright); color: var(--color-destructive-fg); } .av-btn--live:hover { background: var(--av-maroon); filter: none; box-shadow: none; } /* --- CARD (1px border + warm shadow-card + radius-lg) -----------------------*/ .av-card { background: var(--av-paper); border: 1px solid var(--color-border); border-radius: var(--av-radius-lg); box-shadow: var(--av-shadow-card); padding: var(--av-space-6); } .av-card--parchment { background: var(--av-parchment); } /* --- ORNAMENTAL STRIP / BORDER BAND (real 43px repeating gold strips) -------*/ .av-strip { height: var(--av-strip-height); background-image: var(--ornament-strip); background-repeat: repeat-x; background-position: center; background-size: auto 100%; } .av-strip-bottom { height: var(--av-strip-height); background-image: var(--ornament-strip-bottom); background-repeat: repeat-x; background-position: center; background-size: auto 100%; } /* login.html defines .av-band inline as a flat 6px gradient bar. This scoped override (higher specificity than the inline .av-band rule) upgrades both of its bands to the real ornament strips without editing the page markup. */ .login-page .av-band { height: var(--av-strip-height); background: none; background-image: var(--ornament-strip); background-repeat: repeat-x; background-position: center; background-size: auto 100%; } .login-page .av-band:last-child { background-image: var(--ornament-strip-bottom); } .av-rule-gold { height: 2px; border: 0; background: var(--av-gradient-gold); opacity: 0.6; } /* --- SERVER / TAB SWITCHER (relay viewer) ----------------------------------*/ .av-tabs { display: flex; flex-wrap: wrap; gap: var(--av-space-3); justify-content: center; list-style: none; padding: 0; margin: 0 0 var(--av-space-5); } .av-tab { font-family: var(--av-font-sans); font-size: var(--av-text-md); font-weight: var(--av-fw-regular); color: var(--av-terracotta); text-decoration: none; padding: 10px 22px; border-radius: var(--av-radius-pill); border: 1px solid color-mix(in srgb, var(--av-terracotta) 40%, transparent); cursor: pointer; background: transparent; transition: var(--av-transition); } .av-tab:hover { background: color-mix(in srgb, var(--av-terracotta) 12%, transparent); } .av-tab--active { color: var(--av-gold-active); font-weight: var(--av-fw-bold); font-size: var(--av-text-lg); border-color: var(--av-gold-active); background: color-mix(in srgb, var(--av-gold-active) 12%, transparent); } /* --- BADGE / PILL TAG (base.css semantic-50 system) ------------------------*/ .av-badge { display: inline-flex; align-items: center; gap: var(--av-space-1); height: 26px; padding: 0 var(--av-space-3); border-radius: var(--radius-full); font-size: var(--av-text-sm); font-weight: var(--av-fw-semibold); border: 1px solid transparent; background: var(--color-muted); color: var(--color-neutral-500); border-color: var(--color-border); } .av-badge--success { background: var(--color-success-50); color: var(--color-success); border-color: var(--color-success); } .av-badge--warning { background: var(--color-warning-50); color: var(--color-warning-text); border-color: var(--color-warning); } .av-badge--info { background: var(--color-info-50); color: var(--color-info); border-color: var(--color-info); } .av-badge--error { background: var(--color-error-50); color: var(--color-error); border-color: var(--color-error); } .av-badge--neutral { background: var(--color-muted); color: var(--color-neutral-500); border-color: var(--color-border); } /* live = outline red pill with a 9px pulsing live-dot (livePulse keyframes) */ .av-badge--live { background: transparent; color: var(--color-live-dot); border-color: var(--color-live-dot); } .av-badge--live::before { content: ""; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-live-dot); flex: 0 0 auto; animation: livePulse 2s var(--ease-calm) infinite; } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(175, 22, 23, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(175, 22, 23, 0); } } /* --- INSTRUCTION / NOTICE BLOCK (relay footer) -----------------------------*/ .av-notice { text-align: center; color: var(--av-terracotta); font-size: 13px; line-height: var(--av-leading-snug); } .av-notice h4 { margin: 0 0 var(--av-space-3); font-weight: var(--av-fw-bold); letter-spacing: 0.04em; } .av-notice strong { color: var(--av-maroon); } /* --- COPYRIGHT (terracotta, base.css recipe) -------------------------------*/ .av-copyright { text-align: center; color: var(--color-terracotta); font-size: var(--av-text-xs); padding: 16px 0; } .av-copyright a { color: var(--color-terracotta); text-decoration: none; } /* --- VALIDATION MESSAGE -----------------------------------------------------*/ .av-error { text-align: center; font-weight: var(--av-fw-bold); color: var(--av-danger); font-size: var(--av-text-md); } /* --- TWO-COLUMN LOGIN SHELL -------------------------------------------------*/ .av-login { min-height: 100vh; display: flex; } .av-login__col { flex: 0 0 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--av-space-7); box-sizing: border-box; } .av-login__form-col { background: var(--av-parchment); } .av-login__form { width: var(--av-form-width); max-width: 100%; } @media (max-width: 768px) { .av-login { flex-direction: column-reverse; min-height: auto; } .av-login__col { flex: 0 0 100%; width: 100%; padding: var(--av-space-5); } .av-login__form { width: 100%; } } /* --- LISAN UD-DAWAT (Kanz-al-Marjaan) --------------------------------------*/ /* Self-hosted community font for names/headings in the Bohra script. */ @font-face { font-family: "Kanz-al-Marjaan"; src: url("../assets/fonts/Kanz-al-Marjaan.woff2") format("woff2"); font-display: swap; } .av-lisan { font-family: "Kanz-al-Marjaan", var(--av-font-sans); direction: rtl; } /* --- SHARAF BADGES (visit type: Ziyafat / Majlis / Qadam) -------------------*/ .av-sharaf { text-transform: none; letter-spacing: 0.02em; } .av-sharaf--ziyafat { background: var(--color-tile-gold); color: #fff; } .av-sharaf--majlis { background: var(--color-tile-blue); color: #fff; } .av-sharaf--qadam { background: var(--color-tile-green); color: #fff; } .av-sharaf--jamaat { background: var(--color-sharaf-jamaat); color: #fff; } .av-sharaf--madrasa { background: var(--color-sharaf-madrasa); color: #fff; } /* --- GLOBAL REDUCED-MOTION RESET (base.css) ---------------------------------*/ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .live-dot.pulse { animation: none; } }