/* Theme Name: Second Description: GeneratePress Child Theme with ARIA-compliant Dark Mode Author: Aliakbar Zeinali Template: generatepress Version: 1.2 Text Domain: Second */ /* ==================================================================== */ /* 0. Fonts - Vazir (preload in functions.php) */ /* ==================================================================== */ @font-face { font-family: 'Vazir'; src: url('Vazir-FD-WOL.woff2') format('woff2'), url('Vazir-FD-WOL.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('Vazir-Medium-FD-WOL.woff2') format('woff2'), url('Vazir-Medium-FD-WOL.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('Vazir-Bold-FD-WOL.woff2') format('woff2'), url('Vazir-Bold-FD-WOL.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* ==================================================================== */ /* 1. CSS Variables (Colors, Fonts, Spacing) - Brand & Dark Mode via vars */ /* ==================================================================== */ :root { /* Light Mode Colors */ --color-brand: #1a73e8; --color-accent: #00b894; --color-text: #202124; --color-text-secondary: #4a4d50; --color-background: #ffffff; --color-surface: #f7f7f7; --color-border: #dadce0; --color-link-focus: rgba(26,115,232,0.5); /* Dark Mode Colors (fallback vars) */ --color-dark-brand: #8ab4f8; --color-dark-accent: #55efc4; --color-dark-text: #f1f1f1; --color-dark-text-secondary: #ccc; --color-dark-background: #121212; --color-dark-surface: #1e1e1e; --color-dark-border: #333; /* Typography */ --font-family-base: 'Vazir', sans-serif; --font-size-base: 1rem; --line-height-base: 1.6; /* Spacing scale */ --spacing-unit: 1rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1.5rem; --spacing-lg: 2.5rem; --spacing-xl: 4rem; --spacing-header: 2rem; } /* System dark-mode mapping to variables (won't override inline media toggles) */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) { --color-brand: var(--color-dark-brand); --color-accent: var(--color-dark-accent); --color-text: var(--color-dark-text); --color-text-secondary: var(--color-dark-text-secondary); --color-background: var(--color-dark-background); --color-surface: var(--color-dark-surface); --color-border: var(--color-dark-border); } } /* Manual override: add .dark-mode to or to switch */ .dark-mode { --color-brand: var(--color-dark-brand); --color-accent: var(--color-dark-accent); --color-text: var(--color-dark-text); --color-text-secondary: var(--color-dark-text-secondary); --color-background: var(--color-dark-background); --color-surface: var(--color-dark-surface); --color-border: var(--color-dark-border); } /* ==================================================================== */ /* 2. Base Typography and Accessibility */ /* ==================================================================== */ html, body { height: 100%; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-background); font-weight: 400; transition: background-color 0.3s, color 0.3s; } /* RTL helper */ body.rtl { direction: rtl; text-align: right; } /* Links */ a { color: var(--color-brand); text-decoration: none; transition: color 0.2s ease-in-out; } a:hover, a:focus { color: var(--color-brand); text-decoration: underline; } /* Accessibility: use :focus-visible only; remove unsafe hiding of :focus */ :focus-visible { outline: 3px solid var(--color-link-focus); outline-offset: 2px; border-radius: 3px; } /* Skip link - logical properties for RTL/LTR */ .skip-link { position: absolute; inset-inline-start: -999px; inset-block-start: auto; } .skip-link:focus { inset-inline-start: 1rem; inset-block-start: 1rem; background: var(--color-background); color: var(--color-text); padding: 8px; z-index: 9999; border: 1px solid var(--color-border); box-shadow: 0 2px 4px rgba(0,0,0,0.06); } /* ==================================================================== */ /* 3. Layout & Sidebar */ /* ==================================================================== */ .site-content { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .site-header, .site-footer { padding: var(--spacing-header) 0; border-bottom: 1px solid var(--color-border); transition: border-color 0.3s, background-color 0.3s; } .widget-area { background-color: var(--color-surface); padding: var(--spacing-md); border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: background-color 0.3s, box-shadow 0.3s; } .widget { background: transparent; border: none; padding: 0; margin-bottom: var(--spacing-md); } .widget .widget-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-xs); } .content-area { margin-inline-start: var(--spacing-md); } @media (max-width: 768px) { .content-area { margin-inline-start: 0; } .site-content { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } } /* ==================================================================== */ /* 4. Buttons - refined for CTA hierarchy */ /* ==================================================================== */ button, input[type="submit"], .wp-block-button__link { background-color: var(--color-brand); color: var(--color-background); border: none; border-radius: 10px; padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; font-size: var(--font-size-base); font-weight: 500; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; text-decoration: none; display: inline-block; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.10); } button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: #174ea6; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); } button:focus-visible, input[type="submit"]:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--color-link-focus); outline-offset: 2px; border-radius: 10px; } /* Secondary/ghost button example (kept minimal) */ .button--secondary { background: transparent; color: var(--color-brand); border: 1px solid var(--color-border); box-shadow: none; } /* ==================================================================== */ /* 5. Forms - improved controls for light/dark and touch */ /* ==================================================================== */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-background); color: var(--color-text); box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s; } input:focus, textarea:focus, select:focus { border-color: var(--color-brand); outline: none; box-shadow: 0 0 0 1px var(--color-brand); } /* ==================================================================== */ /* 6. Navigation - RTL-aware + smooth underline animation + touch targets */ /* ==================================================================== */ .main-navigation { background-color: var(--color-background); border-bottom: 1px solid var(--color-border); transition: background-color 0.3s, border-color 0.3s; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-start; gap: var(--spacing-md); /* use gap for consistent spacing */ align-items: center; } /* RTL: align the menu to the end naturally */ body.rtl .main-navigation ul { justify-content: flex-end; } .main-navigation li { margin: 0; /* spacing handled by gap on ul */ } .main-navigation a { display: inline-flex; align-items: center; padding-block: calc(var(--spacing-sm) / 1); /* vertical padding */ padding-inline: var(--spacing-md); /* horizontal padding ensures touch target */ color: var(--color-text); font-weight: 500; position: relative; min-height: 44px; /* touch target height */ box-sizing: border-box; } /* underline element using transform scaleX for performant animation */ .main-navigation a::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; bottom: -5px; background-color: var(--color-brand); transform: scaleX(0); transform-origin: left; /* LTR default */ transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.35, 1); } /* RTL: flip transform-origin so animation grows from visual start */ body.rtl .main-navigation a::after { transform-origin: right; } .main-navigation a:hover::after, .main-navigation a:focus::after { transform: scaleX(1); } .main-navigation a:hover, .main-navigation a:focus { color: var(--color-brand); text-decoration: none; } /* ==================================================================== */ /* 7. Content Elements - hierarchy, rhythm, blockquote adjustments */ /* ==================================================================== */ h1, h2, h3, h4, h5, h6 { margin-bottom: var(--spacing-sm); margin-top: var(--spacing-lg); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } h1 { font-size: 2rem; font-weight: 700; margin-top: var(--spacing-xl); } h2 { font-size: 1.75rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 500; } h4 { font-size: 1.25rem; font-weight: 500; } h5 { font-size: 1.1rem; font-weight: 500; } h6 { font-size: 1rem; font-weight: 500; } blockquote { border-inline-start: 4px solid var(--color-brand); padding: var(--spacing-md); margin: var(--spacing-lg) 0; background-color: var(--color-surface); color: var(--color-text-secondary); font-style: italic; border-radius: 4px; transition: background-color 0.3s, border-color 0.3s; } /* Highlighted first paragraph */ .entry-content p:first-child { font-size: 1.15rem; font-weight: 500; line-height: 1.6; color: var(--color-text-secondary); } /* ==================================================================== */ /* 8. Footer, Widgets & Misc */ /* ==================================================================== */ .site-title a { color: var(--color-text); font-weight: 700; text-decoration: none; } .widget_nav_menu .menu-item a, .widget_pages .page_item a { background: transparent; color: var(--color-text); border-radius: 0; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); transition: color 0.2s, border-color 0.3s; } .widget_nav_menu .menu-item:last-child a, .widget_pages .page_item:last-child a { border-bottom: none; } .menu-toggle { background-color: var(--color-brand); color: var(--color-background); border-radius: 6px; transition: background-color 0.3s, color 0.3s; } /* ==================================================================== */ /* 9. Dark Mode Toggle UI and Reduced Motion */ /* ==================================================================== */ .darkmode-container { display: flex; align-items: center; gap: var(--spacing-xs); } .darkmode-container label { cursor: pointer; user-select: none; font-size: 0.9rem; } input.darkmode-toggle { width: 20px; height: 20px; cursor: pointer; } /* prefers-reduced-motion: limit scope (avoid global * override) */ @media (prefers-reduced-motion: reduce) { .main-navigation a::after, button, input[type="submit"], .wp-block-button__link, body, .site-header, .site-footer, .widget-area, input, textarea, select, blockquote { transition-duration: 0ms; animation-duration: 0ms; animation-iteration-count: 1; } } /* ==================================================================== */ /* 10. Utility / Responsive tweaks */ /* ==================================================================== */ @media (max-width: 480px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } .main-navigation a { padding-inline: 0.75rem; } .widget .widget-title { font-size: 1rem; } } /* End of stylesheet */