/* Theme Name: Just2Euro Theme URI: https://just2euro.lt Description: Code-first GeneratePress child theme for the just2euro.lt numismatics shop. All customization (layout, styling, behaviour) lives here as hooks, plain CSS, and vanilla JS — no page builder, no build step. Author: just2euro Template: generatepress Version: 0.1.0 Requires PHP: 8.1 Requires at least: 6.5 Text Domain: just2euro License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* * Base layer: brand identity foundation + global element defaults (Phase 2). * See tasks/brand-identity.md. * * This file is the theme BASE only — the :root design tokens and base element * styling shared by every page. Domain styling is split by concern, mirroring * the PHP layout under inc/, and each domain's PHP module enqueues its own sheet: * - assets/css/header.css (loaded site-wide) — inc/header.php * - assets/css/breadcrumbs.css (breadcrumb pages) — inc/breadcrumbs.php * - assets/css/sidebar.css (active sidebar) — inc/sidebar.php * - assets/css/woocommerce.css (Woo surfaces) — inc/woocommerce.php * - assets/css/woocommerce/product-grid.css (Product grids) — inc/woocommerce/archive.php * - assets/css/woocommerce/single-product.css (Product page) — inc/woocommerce/single-product.php * - assets/css/woocommerce/cart.css (Cart page) — inc/woocommerce/cart.php * - assets/css/woocommerce/checkout.css (Checkout page) — inc/woocommerce/checkout.php * - assets/css/woocommerce/my-account.css (My Account page) — inc/woocommerce/my-account.php * Those sheets depend on this one ('generate-child'), so the tokens below are * always defined before any domain rule that references them. * * Palette sampled as-is from current production (Midnight City, default purple * scheme): brand purple #541a5c, dark-grayscale headings, cyan accent. Body font * is the Tahoma/system-sans stack production actually renders (no web font is * served on prod, so there is none to reproduce — zero web-font cost). * * GeneratePress auto-enqueues this stylesheet after its own CSS, so there is no * manual enqueue in functions.php. Reference tokens, never literal hex, below. */ :root { /* Brand — Midnight City purple (sampled as-is) */ --j2e-gray-text: #515151; --j2e-gray-light: #e9e6ed; --j2e-gray-hover: #dcd7e2; --j2e-purple: #541a5c; /* brand base: nav bar, sticky bar, buttons */ --j2e-purple-dark: #411447; /* active / current menu item */ --j2e-purple-hover: #72237d; /* menu / button hover */ --j2e-link: #8e3a99; /* links */ --j2e-link-hover: #541a5c; /* link hover, toward brand base */ /* Accent — cyan */ --j2e-cyan: #33ccfe; --j2e-cyan-light: #66d9ff; --j2e-success: #166534; --j2e-success-bg: #f0f9f3; --j2e-error: #b32d2e; /* form field errors */ --j2e-error-text: #8a1f1f; --j2e-error-bg: #fcf0f1; --j2e-field-border: #949494; /* form inputs: 3:1 against white */ /* Nav — semantic aliases onto the brand purple */ --j2e-nav-bg: var(--j2e-purple); --j2e-nav-hover-bg: var(--j2e-purple-hover); --j2e-nav-active-bg: var(--j2e-purple-dark); --j2e-nav-text: #fff; /* Text & headings — dark grayscale, as-is */ --j2e-text: #000; /* body text */ --j2e-heading-1: #000; --j2e-heading-2: #222; --j2e-heading-3: #333; --j2e-heading-4: #444; --j2e-muted: #666; /* Surfaces & lines */ --j2e-bg: #fff; --j2e-surface-subtle: #fafafa; /* sidebar nested category background */ --j2e-surface: #f0f0f0; --j2e-border: #e3e3e3; --j2e-purple-border-soft: rgba(84, 26, 92, 0.35); --j2e-purple-overlay: rgba(84, 26, 92, 0.95); --j2e-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.12); --j2e-shadow-product-card: 0 2px 10px rgba(0, 0, 0, 0.08); --j2e-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.18); /* Type — the system stack production actually renders (see note above) */ --j2e-font-body: Tahoma, Geneva, sans-serif; --j2e-font-heading: var(--j2e-font-body); /* Readable base size for the older audience (accessibility goal); production shipped ~13px, which is too small. Headings scale from this. */ --j2e-text-size: 1rem; /* 16px */ --j2e-line-height: 1.6; /* Layout. (Logo size is Customizer-driven — see inc/customizer.php.) */ --j2e-nav-height: 45px; /* lean main-nav bar height (GP default is 60px) */ --j2e-sticky-z: 50; /* sticky nav stacking; below top-bar dropdowns (100) */ --j2e-footer-fb-width: 340px; /* fixed FB Page Plugin width; mirrors PHP JUST2EURO_FACEBOOK_WIDTH (inc/footer/facebook.php) */ } body { font-family: var(--j2e-font-body), sans-serif; font-size: var(--j2e-text-size); line-height: var(--j2e-line-height); color: var(--j2e-text); background-color: var(--j2e-bg); } a { color: var(--j2e-link); } a:hover, a:focus { color: var(--j2e-link-hover); } /* Headings inherit the body font; colors are the as-is dark-grayscale scale. Sizes use clamp() for a readable fluid scale (larger than production). */ h1, h2, h3, h4, h5, h6 { font-family: var(--j2e-font-heading), sans-serif; line-height: 1.2; } h1 { color: var(--j2e-heading-1); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); } h2 { color: var(--j2e-heading-2); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); } h3 { color: var(--j2e-heading-3); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); } h4 { color: var(--j2e-heading-4); font-size: 1.1rem; } h5 { color: var(--j2e-muted); font-size: 1rem; } h6 { color: var(--j2e-muted); font-size: 0.9rem; } /* GeneratePress layout density. GP ships a roomy separate-containers layout: 20px around the main content and 40px inside content/sidebar boxes. This is site chrome, not WooCommerce, so it lives in the child base stylesheet. */ .separate-containers .site-main { margin: 0; } .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .inside-page-header, .widget-area .widget { padding: 20px; } .separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar { margin-top: 0; }