/* Theme Name: Simorgh Blocksy Child Theme URI: https://simorghesalamat.ir Description: Child theme for Blocksy, styled to match the Simorgh AI agent product (blue/white, Vazirmatn font, RTL-first). Author: Simorgh Template: blocksy Version: 1.0.1 Text Domain: simorgh-child */ /* ========================================================================== 1. Fonts (Vazirmatn — matches the product frontend) ========================================================================== */ @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 2. Brand color palette Same scale used in the Next.js frontend's theme.css (Tailwind "blue") ========================================================================== */ :root { --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; --brand-950: #172554; } /* ========================================================================== 3. Base typography / layout ========================================================================== */ body { background: #ffffff; color: #1f2937; /* gray-800 */ } /* !important is needed here: Blocksy injects its own typography CSS inline in , which can load after this stylesheet and would otherwise override a plain (non-!important) font-family rule. */ body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .entry-content, .entry-content p, .entry-content li, .ct-header *, .ct-footer *, p, a, li, span, div { font-family: 'Vazirmatn', system-ui, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #111827; /* gray-900 */ } a { color: var(--brand-700); } a:hover { color: var(--brand-800); } /* ========================================================================== 4. Header — sticky, white, subtle shadow (matches frontend header) ========================================================================== */ .ct-header, #masthead, .site-header { background: #ffffff !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 50; } .site-title a, .ct-header .site-logo a { color: var(--brand-800) !important; font-weight: 700; } .main-navigation a, .ct-header-nav a { color: #4b5563; /* gray-600 */ } .main-navigation a:hover, .ct-header-nav a:hover { color: var(--brand-800); } /* ========================================================================== 5. Buttons — rounded-full pill style with brand-700 fill, matches CTAs ========================================================================== */ .button, button:not(.wp-block-search__button):not([class*="ct-"]), .wp-block-button__link, .ct-button, input[type="submit"] { background-color: var(--brand-700); color: #ffffff !important; border-radius: 9999px; padding: 0.65rem 1.75rem; font-weight: 500; border: none; transition: background-color 150ms ease-in-out; } .button:hover, .wp-block-button__link:hover, .ct-button:hover, input[type="submit"]:hover { background-color: var(--brand-800); } /* Outline / secondary variant — apply with class "is-style-outline" on a WP button block */ .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--brand-700) !important; border: 2px solid var(--brand-700); } /* ========================================================================== 6. Hero / CTA section helpers Add class "simorgh-hero" to a Group/Cover block for the light gradient hero, or "simorgh-cta" for the dark brand gradient call-to-action band. ========================================================================== */ .simorgh-hero { background: linear-gradient(to right, var(--brand-50), #e0e7ff); padding: 4rem 1rem; border-radius: 0.75rem; } html[dir="rtl"] .simorgh-hero { background: linear-gradient(to left, var(--brand-50), #e0e7ff); } .simorgh-cta { background: linear-gradient(to right, var(--brand-700), #3730a3); color: #ffffff; padding: 4rem 1rem; text-align: center; border-radius: 0.75rem; } html[dir="rtl"] .simorgh-cta { background: linear-gradient(to left, var(--brand-700), #3730a3); } .simorgh-cta .wp-block-button__link { background-color: #ffffff; color: var(--brand-800) !important; } .simorgh-cta .wp-block-button__link:hover { background-color: #f3f4f6; } /* ========================================================================== 7. Cards (testimonials, feature blocks) — add class "simorgh-card" ========================================================================== */ .simorgh-card { background: #ffffff; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); padding: 1.5rem; } .simorgh-card blockquote { color: #4b5563; font-style: italic; border: none; margin: 0 0 1rem 0; padding: 0; } /* Standard blockquotes (e.g. in blog posts) — brand-200 accent border like the frontend */ blockquote { border-inline-start: 4px solid var(--brand-200); padding-inline-start: 1rem; font-style: italic; color: #6b7280; } /* ========================================================================== 8. Footer — dark, matches frontend footer (gray-800 bg, gray-300 text) ========================================================================== */ .ct-footer, #colophon, .site-footer { background-color: #1f2937 !important; color: #d1d5db !important; padding: 3rem 0; } .ct-footer a, #colophon a, .site-footer a { color: #d1d5db; } .ct-footer a:hover, #colophon a:hover, .site-footer a:hover { color: #ffffff; } .ct-footer h5, .ct-footer .widget-title, #colophon .widget-title { color: #ffffff; font-weight: 600; } /* ========================================================================== 9. Misc — links focus state, selection color ========================================================================== */ ::selection { background: var(--brand-200); color: var(--brand-950); } /* ========================================================================== 10. Responsive tweaks ========================================================================== */ @media (max-width: 768px) { .simorgh-hero, .simorgh-cta { padding: 2.5rem 1rem; text-align: center; } }