/* ============================================================ بصماتي — Theme Foundation (theme.css) Single source of truth for the dark "biometric-luminous" design. Link LAST in so it wins the cascade over any page :root. Source contract: _design/hero-final.html + _design/DESIGN.md ============================================================ TABLE OF CONTENTS 1. @property + Fonts 2. :root — dark token set (exact hero-final values) 3. :root.light — same dark values (no-op; dark-only now) 4. Legacy aliases — every var(--x) found across platform pages 5. Base reset + body + scrollbar + RTL 6. Components: buttons, glass card, inputs, chip, badges, toast, modal, section-header, nav helpers, footer accent 7. Animations: shimmer, pulse, pop, rise, scroll-reveal (.r/.in), count-up support, reduced-motion guard ============================================================ */ /* ── 1. @property + Google Fonts ──────────────────────────── */ @property --ang { syntax: ''; inherits: false; initial-value: 0deg; } @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Reem+Kufi:wght@500;600;700&display=swap'); /* ── 2. :root — FULL dark token set (exact hero-final `:root` values) ── */ :root { /* ─ brand ─ */ --orange: #F5853A; --orange-2: #FFB174; --orange-deep: #DC6A1B; --blue: #5A8BF0; --blue-2: #88B0F7; --cyan: #46C7E2; /* ─ shift colors — IMMUTABLE, never swap ─ */ --sh-am: #F4A23C; /* ص صباحي — always orange */ --sh-pm: #5773FF; /* م مسائي — always blue */ /* ─ surfaces (dark default) ─ */ --bg: #070A12; --bg-2: #0B0F1C; --panel: rgba(18,24,40,.7); --panel-2: rgba(13,18,31,.86); --chip: rgba(255,255,255,.05); /* ─ borders & text ─ */ --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.05); --fg: #EEF1F8; --fg-soft: #A4ADC2; --fg-mute: #6C7589; /* ─ glow & shadow ─ */ --glow-o: rgba(245,133,58,.32); --glow-b: rgba(90,139,240,.3); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.85); /* ─ motion ─ */ --ease: cubic-bezier(.2,.8,.2,1); --ease-snap: cubic-bezier(.34,1.56,.64,1); /* ─ bg helpers (used by theme.js injector) ─ */ --tex: .85; --spot: .7; /* ─ grain (SVG fractalNoise, used in card ::after) ─ */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ─ radius scale ─ */ --r: 18px; --r-sm: 12px; --r-lg: 24px; --r-pill: 999px; /* ─ status ─ */ --ok: #36d399; --bad: #ff5a5a; --warn: #f5a623; /* ─ timing shortcuts (used by motion.css) ─ */ --t: .35s; --t-fast: .18s; --t-slow: .65s; /* ─ ring helper ─ */ --ring: 0 0 0 4px rgba(245,133,58,.22); } /* ── 3. :root.light — mapped to same dark values (dark-only; toggle is a no-op) ── */ :root.light { --bg: #070A12; --bg-2: #0B0F1C; --panel: rgba(18,24,40,.7); --panel-2: rgba(13,18,31,.86); --chip: rgba(255,255,255,.05); --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.05); --fg: #EEF1F8; --fg-soft: #A4ADC2; --fg-mute: #6C7589; --glow-o: rgba(245,133,58,.32); --glow-b: rgba(90,139,240,.3); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.85); --tex: .85; --spot: .7; } /* ── 4. LEGACY ALIASES — every var(--x) found across all platform pages ── Maps the old token namespace used in auth/join/me/account/app/admin onto the dark theme tokens above. Page CSS flips to dark automatically. ────────────────────────────────────────────────────────────────────── */ :root { /* ── auth / join / me / account (used: --txt --card --mut --acc --bad --ok --warn) ── */ --txt: var(--fg); /* main text */ --card: var(--panel); /* card surface */ --mut: var(--fg-mute); /* muted / label text */ --acc: var(--orange); /* brand accent */ /* ── app/index.html + app/admin.html (used: --ink --teal --teal-d --muted --bg1 --bg2 --card-2 --shadow-sm --r already defined above) ── */ --ink: var(--fg); --muted: var(--fg-soft); --teal: var(--orange); /* was a brand color; maps to brand accent */ --teal-d: var(--orange-deep); /* darker accent shade */ /* bg1 / bg2 — alias to our --bg / --bg-2 */ --bg1: var(--bg); --bg2: var(--bg-2); /* card-2 (used in skeleton shimmer in motion.css) */ --card-2: rgba(255,255,255,.04); /* shadow-sm — compact shadow for tight cards */ --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.55); /* ── shift aliases in app pages (--day --day-d --night --night-d --day-soft --day-ink --night-soft --night-ink) ── tokens.css already defines these; re-affirm here for priority */ --day: var(--sh-am); --day-d: #D9831C; --night: var(--sh-pm); --night-d: #3C53D6; --day-soft: rgba(244,162,60,.16); --day-ink: #FFD9A8; --night-soft: rgba(87,115,255,.16); --night-ink: #C9D3FF; /* ── ok / bad / warn (already in :root above; restate for clarity) ── */ /* --ok / --bad / --warn = same as above */ } /* ── 5. BASE RESET + BODY + SCROLLBAR + RTL ──────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ::selection { background: var(--orange); color: #fff; } html { scroll-behavior: smooth; /* RTL is set per-page on — don't force here */ } body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; position: relative; transition: background .5s var(--ease), color .5s var(--ease); } h1, h2, h3, h4, h5, h6, .head { font-family: "Reem Kufi", system-ui, sans-serif; } /* themed scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ── 6. COMPONENTS ────────────────────────────────────────────── */ /* --- 6a. Buttons --- */ .btn { font-family: inherit; font-weight: 600; font-size: 15px; border: none; cursor: pointer; border-radius: 13px; padding: 12px 22px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), opacity .2s; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); box-shadow: 0 10px 26px -12px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.22); } /* sheen sweep on hover */ .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%); } .btn-primary:hover { box-shadow: 0 18px 38px -12px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.3); } .btn-primary:hover::after { transform: translateX(130%); transition: transform .8s var(--ease); } .btn-ghost { color: var(--fg); background: var(--chip); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--fg-soft); transform: translateY(-2px); } .btn-lg { padding: 15px 28px; font-size: 16.5px; border-radius: 14px; } .btn:active { transform: scale(.96); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* icon-button (circular / square toggle) */ .icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); cursor: pointer; display: grid; place-items: center; transition: .25s var(--ease); } .icon-btn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); } .icon-btn svg { width: 19px; height: 19px; } /* --- 6b. Glass Card (.glass utility) --- */ /* Use this on any card that should match the hero-final bento card style. Existing .ft-card / .db-panel / .hw-step classes already carry this styling inline; .glass is for new pages that want the same look without the ft- scope. */ .glass { position: relative; border-radius: 22px; background: radial-gradient(130% 90% at 100% 0%, color-mix(in oklab, var(--orange) 11%, transparent), transparent 52%), radial-gradient(130% 95% at 0% 100%, color-mix(in oklab, var(--blue) 9%, transparent), transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--panel) 38%, transparent), color-mix(in srgb, var(--panel-2) 44%, transparent)); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } /* grain texture overlay */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background-image: var(--grain); background-size: 170px 170px; opacity: .07; mix-blend-mode: overlay; transition: opacity .5s var(--ease); } .glass > * { position: relative; z-index: 1; } .glass:hover::after { opacity: .10; } /* glowing border gradient on hover */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 38%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--blue) 38%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; transition: opacity .5s var(--ease); pointer-events: none; z-index: 2; } .glass:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 60px -28px rgba(0,0,0,.6), var(--shadow); } .glass:hover::before { opacity: 1; } /* --- 6c. Form inputs, select, textarea, range --- */ input, select, textarea { font-family: inherit; font-size: 14px; color: var(--fg); background: var(--chip); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%; } input::placeholder, textarea::placeholder { color: var(--fg-mute); } input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--glow-o); } input[type="checkbox"], input[type="radio"] { width: auto; } /* range slider */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 99px; background: var(--line); padding: 0; border: none; box-shadow: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); box-shadow: 0 1px 5px rgba(0,0,0,.5); cursor: pointer; border: 2px solid #fff; } input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; } /* select arrow */ select { -webkit-appearance: none; 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' stroke='%236C7589' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 34px; } /* --- 6d. Chip / pill --- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--r-pill); background: var(--chip); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--fg-soft); transition: .2s var(--ease); } .chip:hover { color: var(--fg); border-color: var(--line-2); } .chip.active { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); border-color: transparent; box-shadow: 0 6px 18px color-mix(in oklab, var(--orange) 35%, transparent); } /* pulsing dot (eyebrow / chip decoration) */ .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--glow-o); animation: pulse 2.6s infinite; } /* --- 6e. Shift badges --- */ /* ص صباحي */ .sh-am { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 7px; font: 700 12px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; background: var(--sh-am); color: #0b0d12; /* dark text on orange */ box-shadow: 0 2px 6px color-mix(in oklab, var(--sh-am) 28%, transparent); } /* م مسائي */ .sh-pm { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 7px; font: 700 12px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; background: var(--sh-pm); color: #fff; /* white text on blue */ box-shadow: 0 2px 6px color-mix(in oklab, var(--sh-pm) 28%, transparent); } /* --- 6f. Toast --- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 9998; padding: 12px 20px; border-radius: 12px; background: rgba(7,10,18,.96); border: 1px solid color-mix(in oklab, var(--orange) 42%, var(--line)); box-shadow: 0 14px 36px -10px rgba(0,0,0,.85); color: var(--fg-soft); font: 500 13px/1.5 "IBM Plex Sans Arabic", sans-serif; direction: rtl; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast b { color: var(--orange-2); font-weight: 700; } .toast.ok { border-color: color-mix(in oklab, var(--ok) 42%, var(--line)); } .toast.bad { border-color: color-mix(in oklab, var(--bad) 42%, var(--line)); } /* --- 6g. Modal / overlay (glass) --- */ .overlay { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(3,5,10,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .overlay.on { display: flex; } .modal-card { width: min(400px, 94vw); background: linear-gradient(180deg, rgba(14,18,30,.98), rgba(8,11,20,.99)); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); direction: rtl; animation: bsmScaleIn .3s var(--ease-snap) both; } .modal-card h3 { font: 700 18px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); margin-bottom: 8px; } .modal-card p { font: 500 13.5px/1.65 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); margin-bottom: 20px; } /* --- 6h. Section header (eyebrow + gradient title helper) --- */ .sec-head { text-align: center; margin-bottom: clamp(36px,5vw,60px); } .sec-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--r-pill); font: 600 13px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); background: var(--chip); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); margin-bottom: 18px; } .sec-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--blue)); box-shadow: 0 0 10px 1px var(--orange); } .sec-title { font: 700 clamp(28px,4.6vw,52px)/1.18 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: -.01em; background: linear-gradient(180deg, var(--fg), color-mix(in srgb, var(--fg) 64%, transparent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 12px; } .sec-title .acc { background: linear-gradient(120deg, var(--orange-2), var(--orange) 45%, var(--blue) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sec-sub { font: 400 clamp(15px,1.6vw,18px)/1.7 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); max-width: 56ch; margin-inline: auto; } /* --- 6i. Nav theme helpers --- */ .bsm-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(18px,4vw,56px); backdrop-filter: blur(16px) saturate(140%); background: linear-gradient(to bottom, var(--bg), transparent); border-bottom: 1px solid transparent; transition: .3s var(--ease); direction: rtl; } .bsm-nav.scrolled { background: var(--panel); border-bottom: 1px solid var(--line); } /* --- 6j. Footer top accent line --- */ .bsm-footer-line::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--orange) 65%, transparent), color-mix(in oklab, var(--blue) 55%, transparent), transparent); } /* --- 6k. Shimmer text (gradient headline) --- */ .shimmer-text { background: linear-gradient(110deg, var(--orange), var(--orange-2) 30%, var(--cyan) 55%, var(--blue) 80%, var(--orange) 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 7s linear infinite; } /* ── 7. ANIMATIONS ────────────────────────────────────────────── */ /* shimmer sweep (used on .shimmer-text and count-up highlights) */ @keyframes shimmer { to { background-position: 280% 0; } } /* pulsing glow ring (eyebrow dot, status indicators) */ @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--glow-o); } 50% { box-shadow: 0 0 0 7px transparent; } } /* pop-in (cell marks, badge appears) */ @keyframes pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } } /* rise (hero reveal) */ @keyframes rise { to { opacity: 1; transform: none; } } /* bsmScaleIn (modal open) */ @keyframes bsmScaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } /* spin (loading indicator) */ @keyframes spin { to { transform: rotate(360deg); } } /* fade-up (generic entrance) */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── Scroll reveal — .r is the class added to sections/cards, .in fires when visible ── */ .r { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rd, 0s); will-change: opacity, transform; } .r.in { opacity: 1; transform: none; } /* ── Hero inner reveal (delay steps) ── */ .reveal { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; } .reveal.d1 { animation-delay: .05s; } .reveal.d2 { animation-delay: .16s; } .reveal.d3 { animation-delay: .28s; } .reveal.d4 { animation-delay: .40s; } .reveal.d5 { animation-delay: .52s; } .reveal.d6 { animation-delay: .62s; } /* ── Stagger utility (add .stagger to a container) ── */ .stagger > * { animation: fadeUp var(--t, .35s) var(--ease) both; } .stagger > *:nth-child(1) { animation-delay: .04s; } .stagger > *:nth-child(2) { animation-delay: .10s; } .stagger > *:nth-child(3) { animation-delay: .16s; } .stagger > *:nth-child(4) { animation-delay: .22s; } .stagger > *:nth-child(5) { animation-delay: .28s; } .stagger > *:nth-child(6) { animation-delay: .34s; } /* ── Loading spinner ── */ .spin { animation: spin .8s linear infinite; } /* ── Skeleton shimmer ── */ .skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--card-2) 37%, var(--line) 63%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); } /* ── Lift hover (pointer devices only) ── */ @media (hover: hover) { .lift { transition: transform var(--t, .35s) var(--ease), box-shadow var(--t, .35s) var(--ease); } .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); } } /* ── 8. REDUCED-MOTION GUARD (MUST be last) ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .r { opacity: 1 !important; transform: none !important; } }