/* ========================================================= Common stylesheet Design tokens, themes, reset, shared layout and components ========================================================= */ /* ========================================================= 1) Design tokens / default light theme ========================================================= */ :root { color-scheme: light; /* Font family */ --font-family: "IRANSans", Tahoma, Arial, sans-serif; /* Font sizes */ --fs-2xs: 0.625rem; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.94rem; --fs-lg: 1.05rem; --fs-xl: 1.22rem; --fs-2xl: 1.55rem; --fs-3xl: 2rem; --fs-4xl: 2.7rem; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Radius */ --radius-sm: 0.75rem; --radius-md: 1rem; --radius-lg: 1.35rem; --radius-xl: 1.75rem; --radius-pill: 999px; /* Layout */ --app-max-width: 37.5rem; --page-inline-padding: 1rem; --bottom-nav-height: 5.3rem; --header-height: 5.25rem; --progress-size: clamp(15rem, 71vw, 19rem); --progress-thickness: 0.72rem; /* Motion */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 180ms; --duration-normal: 320ms; --duration-slow: 900ms; /* Base colors */ --color-bg: #f4f7fb; --color-bg-accent: #e8efff; --color-surface: rgba(255, 255, 255, 0.88); --color-surface-solid: #ffffff; --color-surface-soft: #f7f9fc; --color-text: #172033; --color-text-soft: #5d687d; --color-text-faint: #8e98aa; --color-border: rgba(31, 45, 74, 0.09); --color-primary: #316bff; --color-primary-strong: #1d4ed8; --color-primary-soft: rgba(49, 107, 255, 0.12); --color-primary-faint: rgba(49, 107, 255, 0.06); --color-success: #14a673; --color-success-soft: rgba(20, 166, 115, 0.12); --color-warning: #f59e0b; --color-warning-soft: rgba(245, 158, 11, 0.13); --color-danger: #ef476f; --color-danger-soft: rgba(239, 71, 111, 0.12); --color-nav: rgba(255, 255, 255, 0.91); --color-nav-icon: #7f8a9f; --color-nav-active: #316bff; /* Shadows */ --shadow-sm: 0 0.35rem 1.1rem rgba(23, 32, 51, 0.06); --shadow-md: 0 1rem 2.6rem rgba(33, 49, 82, 0.1); --shadow-primary: 0 0.7rem 1.8rem rgba(49, 107, 255, 0.27); /* Status defaults: upcoming */ --status-color: var(--color-warning); --status-soft: var(--color-warning-soft); --status-shadow: rgba(245, 158, 11, 0.2); } /* ========================================================= 2) Optional themes Change data-theme on : light | dark | ocean ========================================================= */ html[data-theme="dark"] { color-scheme: dark; --color-bg: #0e1422; --color-bg-accent: #152440; --color-surface: rgba(23, 32, 51, 0.84); --color-surface-solid: #172033; --color-surface-soft: #1d2940; --color-text: #f5f7fb; --color-text-soft: #b5bfd1; --color-text-faint: #7f8ca3; --color-border: rgba(255, 255, 255, 0.08); --color-primary: #6f96ff; --color-primary-strong: #9bb5ff; --color-primary-soft: rgba(111, 150, 255, 0.16); --color-primary-faint: rgba(111, 150, 255, 0.08); --color-nav: rgba(23, 32, 51, 0.92); --color-nav-icon: #8490a7; --color-nav-active: #7ea1ff; --shadow-sm: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.2); --shadow-md: 0 1rem 2.8rem rgba(0, 0, 0, 0.3); } html[data-theme="ocean"] { color-scheme: light; --color-bg: #edfafa; --color-bg-accent: #d7f4f2; --color-surface: rgba(255, 255, 255, 0.9); --color-surface-solid: #ffffff; --color-surface-soft: #f1fbfa; --color-text: #12363b; --color-text-soft: #537278; --color-text-faint: #809ca1; --color-border: rgba(17, 102, 107, 0.1); --color-primary: #0d989f; --color-primary-strong: #08737a; --color-primary-soft: rgba(13, 152, 159, 0.13); --color-primary-faint: rgba(13, 152, 159, 0.07); --color-nav: rgba(255, 255, 255, 0.93); --color-nav-icon: #6f9297; --color-nav-active: #0d989f; --shadow-primary: 0 0.7rem 1.8rem rgba(13, 152, 159, 0.25); } /* ========================================================= 3) Reset and base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { min-width: 20rem; min-height: 100%; background: var(--color-bg); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; color: var(--color-text); background: radial-gradient(circle at 85% -5%, var(--color-bg-accent), transparent 29rem), var(--color-bg); font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.7; } button, a { -webkit-tap-highlight-color: transparent; } button { border: 0; color: inherit; font: inherit; } a { color: inherit; text-decoration: none; } button, a, [role="button"] { touch-action: manipulation; } button:focus-visible, a:focus-visible { outline: 0.18rem solid var(--color-primary-soft); outline-offset: 0.18rem; } .app-shell { width: min(100%, var(--app-max-width)); min-height: 100vh; min-height: 100dvh; margin-inline: auto; position: relative; } /* ========================================================= 4) Header ========================================================= */ .app-header { min-height: var(--header-height); padding: max(var(--space-4), env(safe-area-inset-top)) var(--page-inline-padding) var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .app-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text-primary); text-decoration: none; } .app-logo { width: 48px; height: 48px; display: block; object-fit: contain; flex-shrink: 0; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-strong)); border-radius: var(--radius-md); } .app-brand__text { display: flex; flex-direction: column; gap: 0.15rem; } .app-brand__text strong { font-size: var(--font-size-lg); font-weight: 800; line-height: 1.2; } .app-brand__text span { color: var(--text-secondary); font-size: var(--font-size-xs); } @media (max-width: 480px) { .app-logo { width: 42px; height: 42px; } } /* .brand { display: flex; align-items: center; gap: var(--space-3); } .brand__icon { width: 2.8rem; height: 2.8rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-md); color: #ffffff; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-strong)); box-shadow: var(--shadow-primary); font-size: var(--fs-2xl); transform: rotate(-4deg); } .brand__eyebrow, .brand__title { margin: 0; } .brand__eyebrow { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: var(--fw-medium); } .brand__title { margin-top: -0.15rem; font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: -0.035em; } */ .icon-button { width: 2.75rem; height: 2.75rem; position: relative; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-soft); background: var(--color-surface); box-shadow: var(--shadow-sm); backdrop-filter: blur(1rem); cursor: pointer; font-size: var(--fs-xl); transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .icon-button:active { transform: scale(0.94); } .notification-dot { width: 0.48rem; height: 0.48rem; position: absolute; top: 0.55rem; right: 0.55rem; border: 0.12rem solid var(--color-surface-solid); border-radius: 50%; background: var(--color-danger); } /* ========================================================= 5) Main content ========================================================= */ .page-content { padding: var(--space-2) var(--page-inline-padding) calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-8)); } /* ========================================================= Shared utilities and components ========================================================= */ .section-eyebrow, .section-title { margin: 0; } .section-eyebrow { color: var(--color-text-faint); font-size: var(--fs-xs); } .action-button { min-height: 2.85rem; padding: 0.65rem var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-soft); background: var(--color-surface-soft); cursor: pointer; font-size: var(--fs-xs); font-weight: var(--fw-semibold); transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-button i { font-size: var(--fs-lg); } .action-button:hover { color: var(--color-primary); background: var(--color-primary-faint); } .action-button:active { transform: scale(0.97); } .action-button--primary { border-color: transparent; color: #ffffff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); box-shadow: var(--shadow-primary); } .action-button--primary:hover { color: #ffffff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); } .notice-card { margin-top: var(--space-3); padding: var(--space-3); display: grid; grid-template-columns: auto 1fr; align-items: flex-start; gap: var(--space-3); border: 1px dashed color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius: var(--radius-lg); background: var(--color-primary-faint); } .notice-card__icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); font-size: var(--fs-lg); } .notice-card p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-xs); line-height: 1.85; } .bottom-nav { width: min(100%, var(--app-max-width)); min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: 0.45rem var(--page-inline-padding) max(0.45rem, env(safe-area-inset-bottom)); position: fixed; z-index: 50; right: 50%; bottom: 0; transform: translateX(50%); pointer-events: none; } .bottom-nav__inner { height: var(--bottom-nav-height); padding: 0.38rem; direction: ltr; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; border: 1px solid var(--color-border); border-radius: 1.6rem; background: var(--color-nav); box-shadow: 0 -0.2rem 1.7rem rgba(23, 32, 51, 0.08); backdrop-filter: blur(1.35rem) saturate(140%); pointer-events: auto; } .nav-item { min-width: 0; height: 100%; position: relative; direction: rtl; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; border-radius: var(--radius-lg); color: var(--color-nav-icon); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .nav-item:active { transform: scale(0.93); } .nav-item__icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-xl); transition: transform var(--duration-normal) var(--ease-standard), background var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); } .nav-item__label { max-width: 100%; overflow: hidden; font-size: var(--fs-2xs); font-weight: var(--fw-medium); text-overflow: ellipsis; white-space: nowrap; } .nav-item.is-active { color: var(--color-nav-active); } .nav-item.is-active .nav-item__icon { color: #ffffff; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-strong)); box-shadow: var(--shadow-primary); transform: translateY(-0.22rem) scale(1.16); } .nav-item.is-active .nav-item__label { font-weight: var(--fw-bold); } /* Visually hidden but accessible text */ .sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================= Shared responsive behavior ========================================================= */ @media (min-width: 48rem) { :root { --page-inline-padding: 1.35rem; } body { padding-block: var(--space-5); } .app-shell { min-height: calc(100dvh - var(--space-10)); border: 1px solid var(--color-border); border-radius: 2.2rem; background: color-mix(in srgb, var(--color-bg) 72%, transparent); box-shadow: 0 2rem 5rem rgba(26, 39, 67, 0.12); } .bottom-nav { bottom: var(--space-5); } } @media (max-width: 23rem) { :root { --page-inline-padding: 0.75rem; } } /* Accessibility: reduce animation when requested */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }