/* Theme Name: Digi Tournament Theme URI: https://digitournament.com Description: قالب اختصاصی تورنمنت‌های دیجیتال - بهینه، سریع و بدون Page Builder Author: Digi Tournament Team Author URI: https://digitournament.com Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: digi-tournament Tags: rtl-language-support, custom-logo, custom-menu, featured-images, post-thumbnails, threaded-comments, translation-ready, wide-blocks, block-patterns, block-styles, editor-styles */ /* ========================================================================== Critical CSS - Inlined in via functions.php Variables, Reset, Base Layout ========================================================================== */ /* Design Tokens - CSS Custom Properties */ :root { /* Colors - Per Spec + Figma Design */ --digi-primary: #F6902F; --digi-primary-hover: #E07D1A; --digi-primary-light: #FEF0E0; --digi-background: #F7F7F7; --digi-card: #FFFFFF; --digi-text: #171717; --digi-text-secondary: #4A4A4A; --digi-muted: #777777; --digi-border: #E5E5E5; --digi-border-focus: var(--digi-primary); --digi-error: #D62828; --digi-success: #61CE70; --digi-live-badge: #FF3B30; /* Figma: live indicator red */ --digi-live-bg: #FFE9E7; /* White Sidebar (Figma: right sidebar, white bg) */ --digi-sidebar-bg: #FFFFFF; --digi-sidebar-bg-light: #F5F5F5; --digi-sidebar-text: #4A4A4A; --digi-sidebar-text-active: #171717; --digi-sidebar-hover: #F5F5F5; --digi-sidebar-active: rgba(246,144,47,0.1); --digi-sidebar-active-border: #F6902F; --digi-sidebar-divider: #E5E5E5; --digi-sidebar-width: 278px; /* Search bar light */ --digi-search-bg: #F5F5F5; --digi-search-text: #8A8A8A; /* Semantic Aliases */ --color-btn-primary: var(--digi-primary); --color-btn-primary-hover: var(--digi-primary-hover); --color-btn-secondary: var(--digi-text); --color-badge-live: var(--digi-live-badge); --color-badge-live-bg: var(--digi-live-bg); --color-focus-ring: var(--digi-border-focus); /* Typography - Vazirmatn */ --font-family: 'Vazirmatn', 'IRANSansX', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-heading: 800; --font-weight-title: 700; --font-weight-body: 400; --font-weight-caption: 500; /* Fluid Type Scale (clamp) */ --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */ --fs-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* 14-16px */ --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18px */ --fs-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem); /* 18-22px */ --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); /* 20-26px */ --fs-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); /* 24-32px */ --fs-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.75rem); /* 32-44px */ --fs-4xl: clamp(2.5rem, 2.1rem + 2vw, 3.5rem); /* 40-56px */ --fs-5xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem); /* 48-72px */ /* Spacing Scale */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ /* Border Radius */ --radius-sm: 8px; --radius-card: 16px; /* Per Spec */ --radius-lg: 24px; --radius-full: 9999px; /* Shadows */ --shadow-card: 0 8px 30px rgba(0,0,0,.06); /* Per Spec */ --shadow-card-hover: 0 12px 40px rgba(0,0,0,.1); --shadow-sm: 0 2px 8px rgba(0,0,0,.04); --shadow-lg: 0 20px 60px rgba(0,0,0,.08); /* Container */ --container-max: 1200px; --container-padding: var(--space-4); /* Breakpoints */ --bp-mobile: 767px; --bp-tablet: 1199px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* Z-index Scale */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* Unified search fields */ :root { --digi-search-bg: #fff2e6; --digi-search-bg-focus: #ffead7; --digi-search-icon: #9b754f; --digi-search-placeholder: #b79677; } .digi-dashboard__sidebar-search form, .digi-live__search, .digi-blog-tools__search, .digi-tournament-archive__search, .digi-ranking-search { position: relative; } .digi-dashboard__sidebar-search form, .digi-live__search, .digi-blog-tools__search input[type="search"], .digi-tournament-archive__search input[type="search"], .digi-ranking-search input[type="search"], .digi-search-overlay__input[type="search"] { background-color: var(--digi-search-bg) !important; border-color: #f7dec8 !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .digi-dashboard__sidebar-search form, .digi-live__search { background: var(--digi-search-bg) !important; } .digi-blog-tools__search input[type="search"], .digi-tournament-archive__search input[type="search"], .digi-ranking-search input[type="search"] { padding-right: 14px !important; padding-left: 42px !important; } .digi-blog-tools__search svg, .digi-tournament-archive__search svg { right: auto !important; left: 14px !important; stroke: var(--digi-search-icon); } .digi-ranking-search__icon { right: auto !important; left: 15px !important; border-color: var(--digi-search-icon); } .digi-ranking-search__icon::after { background: var(--digi-search-icon); } .digi-dashboard__sidebar-search input, .digi-live__search input { padding-right: 10px !important; padding-left: 34px !important; } .digi-dashboard__sidebar-search button, .digi-live__search button { position: absolute !important; left: 10px !important; right: auto !important; order: initial !important; color: var(--digi-search-icon); } input[type="search"]::placeholder { color: var(--digi-search-placeholder) !important; opacity: 1; } .digi-dashboard__sidebar-search form:focus-within, .digi-live__search:focus-within, .digi-blog-tools__search input[type="search"]:focus, .digi-tournament-archive__search input[type="search"]:focus, .digi-ranking-search input[type="search"]:focus, .digi-search-overlay__input[type="search"]:focus { background-color: var(--digi-search-bg-focus) !important; border-color: #efb47f !important; box-shadow: 0 0 0 3px rgba(245, 124, 0, .1) !important; outline: none; } .digi-live__league-group[hidden], .digi-live__match-row[hidden] { display: none !important; } .digi-search-overlay__input[type="search"] { padding-left: 44px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239b754f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; } /* RTL Support */ html[dir="rtl"] { --font-family: 'Vazirmatn', 'IRANSansX', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ========================================================================== Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-family); font-weight: var(--font-weight-body); font-size: var(--fs-base); line-height: 1.7; color: var(--digi-text); background-color: var(--digi-background); direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--digi-primary); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } ul, ol { list-style: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* Screen Reader Only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip Link */ .skip-link { position: absolute; top: -100%; right: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--digi-primary); color: #fff; font-weight: var(--font-weight-title); border-radius: var(--radius-sm); z-index: var(--z-tooltip); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-4); } /* ========================================================================== Layout Utilities ========================================================================== */ .digi-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* Dashboard Layout (Figma) */ .digi-dashboard { display: flex; min-height: 100vh; background: var(--digi-background); } .digi-dashboard__sidebar { position: fixed; top: 0; right: 0; width: var(--digi-sidebar-width); height: 100vh; z-index: var(--z-sticky); overflow-y: auto; display: flex; flex-direction: column; transition: transform var(--transition-base); } .digi-dashboard__main { flex: 1; margin-right: var(--digi-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .digi-dashboard__header { position: sticky; top: 0; z-index: var(--z-dropdown); background: var(--digi-card); border-bottom: 1px solid var(--digi-border); padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .digi-dashboard__content { flex: 1; padding: var(--space-5); } @media (max-width: 1199px) { .digi-dashboard__main { margin-right: 0; } } .digi-grid { display: grid; gap: var(--space-4); } .digi-flex { display: flex; gap: var(--space-3); align-items: center; } .digi-flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .digi-section { padding: var(--space-8) 0; } @media (max-width: 767px) { .digi-section { padding: var(--space-6) 0; } } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-heading); line-height: 1.3; color: var(--digi-text); } h1 { font-size: var(--fs-5xl); } h2 { font-size: var(--fs-4xl); } h3 { font-size: var(--fs-3xl); } h4 { font-size: var(--fs-2xl); } h5 { font-size: var(--fs-xl); } h6 { font-size: var(--fs-lg); } @media (max-width: 767px) { h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } } p { margin-bottom: var(--space-3); } .digi-text-muted { color: var(--digi-muted); font-size: var(--fs-sm); } .digi-text-sm { font-size: var(--fs-sm); } .digi-text-xs { font-size: var(--fs-xs); } .digi-font-medium { font-weight: 500; } .digi-font-semibold { font-weight: 600; } .digi-font-bold { font-weight: 700; } /* ========================================================================== Buttons ========================================================================== */ .digi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: var(--fs-base); font-weight: var(--font-weight-title); border-radius: var(--radius-card); transition: all var(--transition-fast); white-space: nowrap; } .digi-btn--primary { background: var(--color-btn-primary); color: #fff; } .digi-btn--primary:hover { background: var(--color-btn-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-card); } .digi-btn--secondary { background: transparent; color: var(--digi-text); border: 1px solid var(--digi-border); } .digi-btn--secondary:hover { border-color: var(--digi-primary); color: var(--digi-primary); } .digi-btn--outline { background: transparent; color: var(--digi-primary); border: 1px solid var(--digi-primary); } .digi-btn--outline:hover { background: var(--digi-primary); color: #fff; } .digi-btn--full { width: 100%; } .digi-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--fs-lg); } .digi-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); } .digi-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* ========================================================================== Badges ========================================================================== */ .digi-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: var(--font-weight-caption); border-radius: var(--radius-full); white-space: nowrap; } .digi-badge--live { background: var(--color-badge-live-bg); color: var(--color-badge-live); animation: digi-pulse 2s infinite; } @keyframes digi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .digi-badge--status { background: var(--digi-primary-light); color: var(--digi-primary); } /* ========================================================================== Cards ========================================================================== */ .digi-card { background: var(--digi-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: all var(--transition-base); overflow: hidden; } .digi-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .digi-card__image { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .digi-card__content { padding: var(--space-4); } .digi-card__title { font-size: var(--fs-lg); font-weight: var(--font-weight-title); margin-bottom: var(--space-2); line-height: 1.4; } .digi-card__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--digi-muted); } /* ========================================================================== Forms ========================================================================== */ .digi-form-group { margin-bottom: var(--space-4); } .digi-label { display: block; font-size: var(--fs-sm); font-weight: var(--font-weight-caption); margin-bottom: var(--space-1); color: var(--digi-text-secondary); } .digi-input { width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--fs-base); border: 1px solid var(--digi-border); border-radius: var(--radius-sm); background: var(--digi-card); color: var(--digi-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .digi-input:focus { border-color: var(--digi-border-focus); box-shadow: 0 0 0 3px var(--digi-primary-light); } .digi-input::placeholder { color: var(--digi-muted); } /* ========================================================================== Tables (Ranking Desktop) ========================================================================== */ .digi-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .digi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .digi-table th, .digi-table td { padding: var(--space-3) var(--space-4); text-align: right; border-bottom: 1px solid var(--digi-border); } .digi-table th { font-weight: var(--font-weight-title); color: var(--digi-text-secondary); background: var(--digi-background); white-space: nowrap; } .digi-table tbody tr { transition: background var(--transition-fast); } .digi-table tbody tr:hover { background: var(--digi-primary-light); } .digi-table .rank { font-weight: var(--font-weight-heading); color: var(--digi-primary); } .digi-table .team-name { font-weight: var(--font-weight-title); } /* ========================================================================== Search Overlay ========================================================================== */ .digi-search-overlay { position: fixed; inset: 0; z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: all var(--transition-base); pointer-events: none; } .digi-search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .digi-search-overlay__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .digi-search-overlay__panel { position: relative; max-width: 600px; margin: 15vh auto 0; padding: var(--space-4); } .digi-search-overlay__form { display: flex; gap: var(--space-2); background: var(--digi-card); border-radius: var(--radius-card); padding: var(--space-2); box-shadow: var(--shadow-lg); } .digi-search-overlay__input { flex: 1; border: none; padding: var(--space-3); font-size: var(--fs-lg); } .digi-search-overlay__input:focus { outline: none; box-shadow: none; } .digi-search-overlay__submit { padding: var(--space-2) var(--space-4); background: var(--digi-primary); color: #fff; border-radius: var(--radius-sm); font-weight: var(--font-weight-title); } .digi-search-overlay__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--digi-text-secondary); } .digi-search-overlay__results { background: var(--digi-card); border-radius: var(--radius-card); margin-top: var(--space-2); padding: var(--space-3); box-shadow: var(--shadow-card); max-height: 50vh; overflow-y: auto; } @media (max-width: 767px) { .digi-search-overlay__panel { margin: 10vh var(--space-3) 0; } .digi-search-overlay__input { font-size: var(--fs-base); } } /* ========================================================================== Utilities ========================================================================== */ .digi-hidden { display: none !important; } .digi-visible { display: block !important; } .digi-text-center { text-align: center; } .digi-text-right { text-align: right; } .digi-text-left { text-align: left; } .digi-mt-0 { margin-top: 0; } .digi-mb-0 { margin-bottom: 0; }