/** * Design tokens for triguenita (Male Fashion / Colorlib template skin, * rebranded for Alfajores La Trigueñita). * css/style.css was written with hardcoded hex colors throughout; this file * defines the same colors as CSS custom properties, and style.css has been * edited to reference them via var(...) wherever a color repeats across the * stylesheet. To restyle the whole storefront, change the values here — * nothing else needs to be touched. * * Must load AFTER the vendor CSS (bootstrap/owl-carousel/nice-select/etc.) * and BEFORE style.css. */ :root { /* ------------------------------------------------------------------- Brand palette — an "aged paper" cream/cacao scheme with a cocoa/ terracotta accent, meant to read as an artisanal/luxury bakery brand rather than the storefront's original red/dark theme. Everything below (--color-primary, --header-bg, section backgrounds, etc.) is just these 9 values remapped onto the template's existing tokens — change a value here, not further down, to retune the brand. 4 backgrounds + 4 matching text colors, used sparingly: on the homepage, each section alternates between at most 2-3 of these rather than cycling through all 4 in a row. Header and footer always use background-4 (the true-ish black) regardless of section order. */ --background-1: #EDE3D1; /* aged paper — main/body background */ --color-1: #241B16; /* almost-black brown — headings, dark UI */ --background-2: #C9B59A; /* muted beige — alternating section background */ --color-2: #30231B; /* dark text — body copy */ --background-3: #4A3023; /* deep cacao — the one dramatic dark section (cta) */ --color-3: #F5EBDD; /* cream — text over dark/photo backgrounds */ --background-4: #11110F; /* true-ish black — header + footer, always */ --color-4: #DCC9AE; /* muted beige text — secondary text on dark backgrounds */ --accent: #8C5A3C; /* cocoa / terracotta — buttons, prices, active states */ /* ------------------------------------------------------------------- Semantic component tokens — style.css only ever reads these, never the brand palette above directly, so this is the one place that maps "brand color" to "role in the UI". */ --color-primary: var(--accent); /* buttons, prices, active nav/tabs, sale labels */ --color-dark: var(--color-1); /* headings */ --color-dark-alt: var(--color-1); /* prices, quantity controls, scrollbar cursor */ --color-text: var(--color-2); /* body copy, form placeholders */ --color-text-muted: #8a7863; /* meta text, muted labels — muted taupe, in-palette */ --color-heading-alt: var(--color-2); /* secondary text (checkout/blog sidebar) */ --color-border: rgba(36, 27, 22, 0.15); /* general borders/dividers */ --color-border-alt: rgba(36, 27, 22, 0.15); /* form input borders */ --color-light-bg: var(--background-2); /* light alternating section background */ --color-white: #ffffff; /* Semantic status colors — not tied to any one component; use these for any success/warning/danger/info background or text (stock badges, form errors, future alerts) instead of ad-hoc hex values, so a status color only needs to change here. --color-danger gets its own value (rather than reusing --color-primary like the original red-accent theme did) since the brand accent is a warm cocoa tone that doesn't read as "alert" the way the old red did. */ --color-success: #4b7a4f; --color-warning: #b5852c; --color-danger: #a8402a; --color-info: #3b82c4; /* Preloader (#preloder / .loader in css/style.css): full-screen splash background + the two colors its spinner alternates between. Every page can override these per-deployment from templates/data.php's $site['loader_*'] instead of editing this file — see templates/head.php for how those get applied. */ --color-loader-bg: var(--background-4); --color-loader-a: var(--accent); --color-loader-b: var(--color-1); /* Header height — the single source of truth for the nav bar's size. .header__logo/.header__menu/.header__nav__option all size themselves to this (see css/style.css), and the logo image is capped to fit inside it, so changing one number here resizes and re-centers the whole header instead of a differently-sized logo silently growing it and throwing off the (previously hardcoded) hamburger position. */ --header-height: 100px; --header-height-mobile: 70px; /* Buttons — shared shape/typography for every solid CTA button (.primary-btn: hero slider CTA, detail page "agregar al carrito", .site-btn: cart/checkout confirm buttons) so they always match, plus the color used by the text-style "add to cart" link on product cards and the border on the mobile burger button. css/style.css applies these via var(...); change a value here to restyle every button. Radii are 0 across the board — sharp/square corners throughout, no rounding, for a more formal/luxury feel than the default template. */ --btn-font-size: 13px; --btn-font-weight: 700; --btn-letter-spacing: 3px; --btn-radius: 0px; --btn-icon-radius: 0px; /* small square icon buttons: burger toggle, cart qty +/-/remove */ --btn-padding-y: 14px; --btn-padding-x: 30px; --btn-sm-padding-y: 0.25rem; /* Bootstrap's .btn-sm/.btn-group-sm > .btn, tokenized */ --btn-sm-padding-x: 0.5rem; --btn-sm-font-size: 0.875rem; --btn-border-width: 1px; --btn-transition: 0.3s; --btn-primary-bg: var(--accent); --btn-primary-color: var(--color-3); --btn-accent-color: var(--color-primary); /* "+ Agregar al carrito" card link */ /* Inputs — search box (product sidebar), cart discount code field, checkout form fields, and quantity steppers all share these so one edit restyles every text input/select in the storefront. Radius is 0 to match the buttons above. */ --input-height: 42px; --input-border-width: 1px; --input-border-color: var(--color-border); --input-radius: 0px; --input-bg: var(--background-1); --input-color: var(--color-2); --input-placeholder-color: var(--color-text-muted); --input-padding-x: 20px; --input-font-size: 14px; --input-focus-border-color: var(--accent); /* Typography — separate tokens for headings vs. body copy so either can swap to a different Google Font (change the family here AND the in templates/head.php) without touching the other. Heading: Playfair Display — classic serif display face, loaded via Google Fonts in templates/head.php. Falls back to Georgia, a system-installed serif with a similar high-contrast, editorial feel, ahead of the generic "serif" keyword. Body: Manrope — geometric, clean sans-serif, also loaded via Google Fonts. Falls back to the system UI sans-serif stack. */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-heading-weight: 700; --font-body: 'Manrope', 'Segoe UI', Arial, sans-serif; --font-body-weight: 400; /* Text shadows — apply to any heading/link sitting directly on top of a photo (hero slides, breadcrumb band, banner tiles) so it stays readable no matter how light/dark/busy that particular image is, without needing to hand-tune contrast per photo. */ --text-shadow-strong: 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.55); --text-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.45); /* Scrim — the dark tint layered between a background photo and the text sitting on it (hero, breadcrumb, banner tiles), combined with the text-shadow tokens above for guaranteed contrast on any image. */ --overlay-scrim-strong: rgba(0, 0, 0, 0.55); --overlay-scrim-soft: rgba(0, 0, 0, 0.35); /* Header + offcanvas (mobile slide-out nav) surface — always the true-ish black background-4 with light text/icons/links, regardless of which background a given section uses, so the primary chrome reads as one consistent band no matter where the visitor scrolls to. --header-icon-filter recolors the template's flat dark PNG icons (img/icon/search.png, cart.png) to light since they're raster assets, not font icons/currentColor SVGs. */ --header-bg: var(--background-4); --header-text: var(--color-3); --header-text-muted: var(--color-4); --header-border-color: rgba(220, 201, 174, 0.14); --header-icon-filter: brightness(0) invert(1); --offcanvas-bg: var(--background-4); --offcanvas-text: var(--color-3); --offcanvas-text-muted: var(--color-4); }