/* Theme Name: Tsixlis Theme URI: https://www.tsixlis.gr/ Description: WooCommerce θέμα του Τεχνικού Πολυκαταστήματος Τσιχλής — TSIXLIS design system (modern industrial × premium e-commerce). Version: 0.7.9 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: tsixlis WC requires at least: 9.0 */ /* ========================================================================= TSIXLIS design system — tokens (docs/premium-plan.md §1, BRAND.md) Ratio: ~60% white/light gray · 25% blue · 10% dark navy · 5% orange. This file is frozen after WS0: the partials in assets/css/ use these names and never introduce new colour, size or shadow values. ========================================================================= */ :root { /* Brand */ --c-blue: #134685; /* primary: logo, nav, links, icons, dark sections */ --c-blue-hover: #0f3a70; --c-navy: #0b2545; /* main text, footer, strong headings */ --c-orange: #ef7f1b; /* accent only: primary CTA, sale badge, active dot, highlights */ --c-orange-hover: #d96d10; --c-white: #fff; --c-gray: #f4f6f8; /* section backgrounds, filters */ --c-border: #e2e6ea; /* cards, inputs, dividers */ /* Roles (§1.6) */ --c-orange-text: #b35a0c; /* orange as TEXT (sale price): 4.8:1 on white — the BRAND.md "for AA" switch (parity #29) */ --c-navy-2: #0f2e55; /* raised surface on navy: newsletter band, step cards, payment chips */ --c-gray-2: #eaeef2; /* hover on gray, dividers on gray */ --c-border-strong: #c9d1da; /* card hover, checkbox and input outlines */ --c-tint: #eef3f9; /* blue-tinted info panels: delivery box, selected filters, toast */ --c-on-dark: #c9d6e6; /* body text on navy/blue */ --c-line-dark: rgba(255, 255, 255, .14); /* dividers on navy/blue */ --c-glass-dark: rgba(255, 255, 255, .06); /* chips and quiet tiles on navy/blue */ --c-scrim: rgba(11, 37, 69, .55); /* backdrop behind the drawer, filter sheet and dialogs */ --c-dot-on-dark: rgba(255, 255, 255, .55); /* inactive slider dots on navy/blue or photos */ --c-dot-on-light: rgba(11, 37, 69, .3); /* inactive slider dots on white/gray */ --g-shade-bottom: linear-gradient(180deg, rgba(11, 37, 69, 0) 0%, rgba(11, 37, 69, .82) 100%); /* caption legibility over media */ --g-media: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%); /* product image panels (~3% luminance) */ --g-media-hover: linear-gradient(180deg, #f4f7fa 0%, #e8edf3 100%); /* Functional (UI states only) */ --c-muted: #5a6b80; /* secondary text: 5.4:1 on white */ --c-success: #1f7a3a; --c-error: #c62828; /* Type (§1.2) — Manrope variable 400–800; clamps are linear between 390 and 1440 px */ --font: "Manrope", "Manrope Fallback", "Manrope Fallback R", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-hero: clamp(28px, 1.143vw + 23.54px, 40px); /* hero slide + campaign titles · 800 / 1.08 / -.025em */ --fs-h1: clamp(28px, 1.143vw + 23.54px, 40px); /* page titles · 800 / 1.15 / -.02em */ --fs-product: clamp(22px, .952vw + 18.29px, 32px); /* single-product H1 · 700 / 1.2 / -.015em */ --fs-h2: clamp(24px, 1.143vw + 19.54px, 36px); /* section titles · 700 / 1.15 / -.02em */ --fs-h3: clamp(20px, .571vw + 17.77px, 26px); /* rail, feature, step titles · 700 / 1.25 / -.01em */ --fs-h4: 17px; /* widget, footer, card-group titles · 700 / 1.3 */ --fs-lead: clamp(16px, .19vw + 15.26px, 18px); /* hero text, section intros · 500 / 1.55 */ --fs-body: 16px; /* 400 / 1.6 */ --fs-small: 14px; /* filters, footer links, meta · 500 / 1.5 */ --fs-meta: 13px; /* SKU, stock, breadcrumb · 500–600 / 1.4 */ --fs-label: 12px; /* UPPERCASE labels only (eyebrow, card brand, badges) · 700–800 / .08em; the only size below 13 */ --fs-xs: var(--fs-meta); /* back-compat alias */ --fs-card-price: 22px; /* 800 / 1.15, tabular figures */ --fs-price: clamp(26px, .19vw + 25.26px, 28px); /* single-product price · 800 / 1.1, tabular */ --fs-btn: 15px; --fs-btn-sm: 14px; --tr-label: .08em; /* Space (4 px base, BRAND.md) — no other values */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --section-y: clamp(40px, 2.29vw + 31.1px, 64px); /* section padding: 40 at 390 → 64 at 1440 */ --container: 1360px; /* 1312 px content at ≥768 (24 px gutters), 16 px gutters below */ /* Radius (§1.5) — nested: inner = outer − padding, never below 4; nothing above 10 except circles */ --r-xs: 4px; /* badges, filter chips, payment marks */ --r-btn: 6px; /* buttons, inputs, selects, tabs, toasts, price chips */ --r-input: 6px; /* alias of --r-btn */ --r-media: 8px; /* image panels inside cards, gallery thumbs, small hero tiles */ --r-card: 10px; /* cards, banners, slider viewport, widgets, service and steps panels */ --r-pill: 999px; /* slider dots and counters only */ /* Elevation (§1.4) — borders first, shadows only when something lifts */ --shadow-1: 0 1px 2px rgba(11, 37, 69, .06); /* inputs, resting tiles on gray */ --shadow-2: 0 4px 12px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .05); /* scrolled sticky header, toolbars */ --shadow-3: 0 12px 28px rgba(11, 37, 69, .10), 0 2px 6px rgba(11, 37, 69, .05); /* card hover, mega menu, toast */ --shadow-4: 0 24px 48px rgba(11, 37, 69, .16), 0 4px 12px rgba(11, 37, 69, .06); /* drawer, filter sheet, dialogs */ --shadow-2-up: 0 -4px 12px rgba(11, 37, 69, .06), 0 -1px 3px rgba(11, 37, 69, .05); /* --shadow-2 mirrored: bars fixed to the bottom */ --shadow-on-dark: 0 16px 36px rgba(3, 12, 26, .35); /* white tiles on blue/navy */ --shadow-sm: var(--shadow-1); /* back-compat aliases */ --shadow: var(--shadow-3); /* Motion (§1.8) */ --dur-1: 120ms; /* colour, opacity, press */ --dur-2: 200ms; /* shadow, small transforms, dropdowns */ --dur-3: 320ms; /* drawer, filter sheet, toast, card image zoom */ --ease: cubic-bezier(.2, .7, .2, 1); /* standard ease-out */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* sheets */ /* Layers */ --z-header: 100; --z-drawer: 1000; /* Brand graphic: the "T" symbol (monochrome mask for watermarks). */ --t-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 52'%3E%3Cpath d='M3 0h51a3 3 0 0 1 3 3v20l-15-6.5V12h-6v29H21V12h-6v4.5L0 23V3a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M0 26.5 15 20v23h27V20l15 6.5V49a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3Z'/%3E%3C/svg%3E"); } /* ========================================================================= Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; color: var(--c-navy); background: var(--c-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-blue); text-decoration: none; transition: color var(--dur-1) var(--ease); } a:hover { color: var(--c-blue-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--c-navy); font-weight: 700; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; } h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; } h4 { font-size: var(--fs-h4); line-height: 1.3; } h5, h6 { font-size: var(--fs-body); line-height: 1.4; } p { margin: 0 0 1em; text-wrap: pretty; } address { font-style: normal; } button, input, select, textarea { font: inherit; color: inherit; } /* Focus: blue on light surfaces (9.4:1), orange on dark ones. */ :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; } :is(.on-dark, .topbar, .header-nav, .site-footer, .hero-slide, .feature__panel, .service-cta__body) :focus-visible { outline-color: var(--c-orange); } :is(.on-light, .cat-menu) :focus-visible { outline-color: var(--c-blue); } /* Links that fill a clipping box (overflow hidden/auto) draw the ring inside, or it is cut off. A banner's media box is positioned and would paint over the link's own inset outline, so the ring goes on the media. */ :is(.banner-feature__media, .banner-slide) a.banner:focus-visible { outline: 0; } :is(.banner-feature__media, .banner-slide) a.banner:focus-visible > .banner__media { outline: 3px solid var(--c-blue); outline-offset: -3px; } /* Links inside running text are underlined: blue on navy text is only 1.6:1 (WCAG 1.4.1). Classed links are UI, and so are links inside a