:root { --font-heading: Poppins; --font-body: Poppins; --font-heading-scale: 1; --font-body-scale: 1; --font-heading-weight: 700; --font-body-weight: 400; /* Buttons */ --button-radius: 6px; --button-border-width: 2px; --button-border-opacity: 100; --button-shadow-x: 0px; --button-shadow-y: 4px; --button-shadow-blur: 5px; --button-shadow-opacity: 0; --button-hover-effect-link: arrow; --button-hover-effect-action: center-transition; /* Layout */ --page-width: 1200px; --page-margin: 20px; } /* Body text scaling */ [data-storefront-theme] .text-xs { font-size: calc(0.75rem * var(--font-body-scale, 1)) !important; } [data-storefront-theme] .text-sm { font-size: calc(0.875rem * var(--font-body-scale, 1)) !important; } [data-storefront-theme] .text-base { font-size: calc(1rem * var(--font-body-scale, 1)) !important; } [data-storefront-theme] .text-lg { font-size: calc(1.125rem * var(--font-body-scale, 1)) !important; } /* Heading text scaling */ [data-storefront-theme] .text-xl { font-size: calc(1.25rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-2xl { font-size: calc(1.5rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-3xl { font-size: calc(1.875rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-4xl { font-size: calc(2.25rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-5xl { font-size: calc(3rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-6xl { font-size: calc(3.75rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-7xl { font-size: calc(4.5rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-8xl { font-size: calc(6rem * var(--font-heading-scale, 1)) !important; } [data-storefront-theme] .text-9xl { font-size: calc(8rem * var(--font-heading-scale, 1)) !important; } /* Base font application */ [data-storefront-theme] { font-family: var(--font-body); font-weight: var(--font-body-weight); font-size: calc(1rem * var(--font-body-scale, 1)); } [data-storefront-theme] h1, [data-storefront-theme] h2, [data-storefront-theme] h3, [data-storefront-theme] h4, [data-storefront-theme] h5, [data-storefront-theme] h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } /* ========== theme.css ========== */ /** * Theme Castano - Global Styles * * This file contains theme-specific CSS including button animations, * hover effects, and visual treatments unique to this theme. * * ARCHITECTURE: * - Core (theme-contract.ts) defines CSS VARIABLES (the contract) * - Theme (this file) defines CSS RULES (the implementation) * * Third-party developers can customize or override any style here. * * CSS VARIABLE DEPENDENCIES (injected by Core): * - --color-tone-1, --color-tone-2 (brand colors) * - --button-radius, --button-border-width, etc. (button settings) * * NAMING CONVENTION: BEM (Block Element Modifier) * - .button → Primary button (CTA, Add to Cart) * - .button--secondary → Outline style * - .button--link → Text only with underline */ /* ========================================================= BUTTON COMPONENT CLASSES (BEM Naming) ========================================================= Complete button styles that use CSS variables from Theme Editor. Usage: Available classes: - .button → Solid background (CTA, Add to Cart) - .button--secondary → Outline style (secondary actions) - .button--link → Text only with underline (links) All classes automatically inherit: - Colors from --color-tone-1 - Border radius from --button-radius - Shadow from --button-shadow-* variables - Hover effect from Theme Editor selection ========================================================= */ /* ----- PRIMARY BUTTON ----- */ .button { /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; min-height: 44px; /* Typography */ font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: none; /* Colors - from Theme Editor */ background-color: var(--color-tone-1); color: white; border: none; /* Shape - from Theme Editor */ border-radius: var(--button-radius, 6px); /* Shadow - from Theme Editor */ box-shadow: var(--button-shadow-x, 0px) var(--button-shadow-y, 4px) var(--button-shadow-blur, 5px) rgba(0, 0, 0, calc(var(--button-shadow-opacity, 0) / 100)); /* Interaction */ cursor: pointer; user-select: none; /* Animation base */ position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } .button:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive */ @media (min-width: 768px) { .button { font-size: 1.125rem; } } /* ----- SECONDARY BUTTON (Outline) ----- */ .button--secondary { /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; min-height: 44px; /* Typography */ font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: none; /* Colors - from Theme Editor */ background-color: transparent; color: var(--color-tone-1); border: var(--button-border-width, 2px) solid var(--color-tone-1); /* Shape - from Theme Editor */ border-radius: var(--button-radius, 6px); /* Interaction */ cursor: pointer; user-select: none; /* Animation base */ position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } .button--secondary:hover { background-color: var(--color-tone-1); color: white; } .button--secondary:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive */ @media (min-width: 768px) { .button--secondary { font-size: 1.125rem; } } /* ----- INVERSE BUTTON (For dark color schemes) ----- */ /* Use when button is inside dark containers (tone-1, tone-2, background-2) */ .button--inverse { /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; min-height: 44px; /* Typography */ font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: none; /* Colors - inverted for dark backgrounds */ background-color: var(--color-background-1); color: var(--color-text); border: none; /* Shape - from Theme Editor */ border-radius: var(--button-radius, 6px); /* Shadow - from Theme Editor */ box-shadow: var(--button-shadow-x, 0px) var(--button-shadow-y, 4px) var(--button-shadow-blur, 5px) rgba(0, 0, 0, calc(var(--button-shadow-opacity, 0) / 100)); /* Interaction */ cursor: pointer; user-select: none; /* Animation base */ position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } .button--inverse:hover { opacity: 0.9; } .button--inverse:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive */ @media (min-width: 768px) { .button--inverse { font-size: 1.125rem; } } /* ----- LINK BUTTON (Text style) ----- */ .button--link { /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0; /* Typography */ font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; /* Colors - from Theme Editor */ background-color: transparent; color: var(--color-tone-1); border: none; /* Interaction */ cursor: pointer; user-select: none; /* Animation base */ position: relative; transition: all 0.3s ease-in-out; } .button--link:hover { opacity: 0.8; } /* ========================================================= BUTTON ARROW ICON (CSS-based) ========================================================= Arrow appears on hover when effect="arrow" is selected. Uses CSS pseudo-element for cleaner component code. ========================================================= */ /* Arrow pseudo-element - positioned absolutely to avoid gap issues */ .button::after, .button--secondary::after, .button--inverse::after { content: '→'; position: absolute; right: 1rem; opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } /* Show arrow smoothly on hover when arrow effect is active */ [data-button-effect="arrow"] .button:hover::after, [data-button-effect="arrow"] .button--secondary:hover::after, [data-button-effect="arrow"] .button--inverse:hover::after { opacity: 1; transform: translateX(0); } /* Add padding to make room for arrow */ [data-button-effect="arrow"] .button:hover, [data-button-effect="arrow"] .button--secondary:hover, [data-button-effect="arrow"] .button--inverse:hover { padding-right: 2.5rem; } /* ========================================================= BUTTON HOVER EFFECTS ========================================================= */ /* None - simple opacity */ [data-button-effect="none"] .button:hover, [data-button-effect="none"] .button--secondary:hover, [data-button-effect="none"] .button--inverse:hover { opacity: 0.9; } /* Glow effect */ [data-button-effect="glow"] .button:hover, [data-button-effect="glow"] .button--inverse:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--color-tone-1) 50%, transparent), 0 0 40px color-mix(in srgb, var(--color-tone-1) 25%, transparent); transform: translateY(-2px); } /* Center transition - background overlay */ [data-button-effect="center-transition"] .button::before, [data-button-effect="center-transition"] .button--inverse::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); border-radius: inherit; transform: scale(0); transition: transform 0.3s ease; z-index: 0; pointer-events: none; } [data-button-effect="center-transition"] .button:hover::before, [data-button-effect="center-transition"] .button--inverse:hover::before { transform: scale(1); } [data-button-effect="center-transition"] .button > *, [data-button-effect="center-transition"] .button--inverse > * { position: relative; z-index: 1; } /* Left-right transition */ [data-button-effect="left-right-transition"] .button::before, [data-button-effect="left-right-transition"] .button--inverse::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); border-radius: inherit; transform: translateX(-100%); transition: transform 0.4s ease; z-index: 0; pointer-events: none; } [data-button-effect="left-right-transition"] .button:hover::before, [data-button-effect="left-right-transition"] .button--inverse:hover::before { transform: translateX(0); } [data-button-effect="left-right-transition"] .button > *, [data-button-effect="left-right-transition"] .button--inverse > * { position: relative; z-index: 1; } /* ========================================================= LINK BUTTON HOVER EFFECTS (.button--link) ========================================================= */ /* None - simple opacity fade */ [data-button-link-effect="none"] .button--link:hover { opacity: 0.85; } /* Glow - text shadow pulse */ [data-button-link-effect="glow"] .button--link:hover { filter: brightness(1.1); text-shadow: 0 0 8px var(--color-tone-1); } /* Center Transition - underline expands from center */ [data-button-link-effect="center-transition"] .button--link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: width 0.3s ease, left 0.3s ease; } [data-button-link-effect="center-transition"] .button--link:hover::after { width: 100%; left: 0; } /* Left-Right Transition - underline slides from left */ [data-button-link-effect="left-right-transition"] .button--link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: currentColor; transition: width 0.4s ease; } [data-button-link-effect="left-right-transition"] .button--link:hover::after { width: 100%; } /* Arrow effect for link buttons - uses ::before since ::after is used for underline effects */ [data-button-link-effect="arrow"] .button--link::before { content: '→'; position: absolute; right: -1.5rem; opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } [data-button-link-effect="arrow"] .button--link:hover::before { opacity: 1; transform: translateX(0); } [data-button-link-effect="arrow"] .button--link:hover { padding-right: 1.5rem; } /* ========================================================= PAGINATION COMPONENT (BEM Naming) ========================================================= Pagination system using CSS variables from Theme Editor. Based on Bello Theme pattern with BEM naming. Usage:

========================================================= */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } /* Pagination prev/next buttons - inherits .button styling */ .pagination__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.75rem; min-height: 36px; font-weight: 500; font-size: 0.75rem; line-height: 1.5; text-decoration: none; background-color: var(--color-tone-1); color: white; border: none; border-radius: var(--button-radius, 6px); cursor: pointer; user-select: none; transition: all 0.3s ease-in-out; } .pagination__button:hover:not(:disabled) { opacity: 0.9; } .pagination__button:disabled { opacity: 0.4; cursor: not-allowed; } /* Responsive */ @media (min-width: 640px) { .pagination__button { padding: 0.5rem 1rem; min-height: 40px; font-size: 0.875rem; } } /* Pagination page numbers - outline style by default */ .pagination__number { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; font-weight: 600; font-size: 0.75rem; text-decoration: none; background-color: white; color: var(--color-tone-1); border: 2px solid var(--color-tone-1); border-radius: var(--button-radius, 6px); cursor: pointer; user-select: none; transition: all 0.3s ease-in-out; } .pagination__number:hover:not(.pagination__number--active) { background-color: var(--color-tone-1); color: white; } /* Active page number - solid style */ .pagination__number--active { background-color: var(--color-tone-1); color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Responsive */ @media (min-width: 640px) { .pagination__number { min-width: 40px; height: 40px; font-size: 1rem; } } /* ========================================================= CATEGORY PILL BUTTONS ========================================================= Pill-style buttons for category filters. Uses full border-radius for pill shape. Usage: ========================================================= */ .button--pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; min-height: 36px; font-weight: 500; font-size: 0.875rem; line-height: 1.5; white-space: nowrap; text-decoration: none; /* Default: outline style (not selected) */ background-color: white; color: var(--color-text); border: none; border-radius: 9999px; cursor: pointer; user-select: none; transition: all 0.2s ease-in-out; } .button--pill:hover:not(.button--pill-active) { background-color: #f3f4f6; } /* Active state - solid background */ .button--pill-active { background-color: var(--color-tone-1); color: white; } /* =========================== * Loading Overlay Spinner * =========================== */ .castano-loading-spinner { animation: castano-spin 1.4s linear infinite; } .castano-loading-spinner__path { animation: castano-dash 1.4s ease-in-out infinite; transform-origin: center; } @keyframes castano-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes castano-dash { 0% { stroke-dashoffset: 280; } 50% { stroke-dashoffset: 75; } 100% { stroke-dashoffset: 280; } } /* ========================================================= CATALOG FILTERS COMPONENT (BEM Naming) ========================================================= Modern horizontal filter bar for catalog page. Desktop: Dropdown filters inline. Mobile: Drawer slide-in. Usage:

...

========================================================= */ /* ----- DESKTOP FILTER BAR ----- */ .castano-filters { display: none; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; } @media (min-width: 768px) { .castano-filters { display: flex; } } .castano-filters__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .castano-filters__left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .castano-filters__right { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .castano-filters__label { font-size: 0.875rem; font-weight: 500; color: inherit; opacity: 0.7; } .castano-filters__count { font-size: 0.875rem; color: inherit; opacity: 0.6; white-space: nowrap; } /* ----- FILTER DROPDOWN ----- */ .castano-filter-dropdown { position: relative; } .castano-filter-dropdown__trigger { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; min-height: 36px; font-size: 0.875rem; font-weight: 500; line-height: 1.5; white-space: nowrap; background-color: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--button-radius, 6px); cursor: pointer; user-select: none; transition: all 0.2s ease; } .castano-filter-dropdown__trigger:hover { border-color: color-mix(in srgb, currentColor 40%, transparent); } .castano-filter-dropdown__trigger--active { border-color: var(--color-tone-1); color: var(--color-tone-1); } .castano-filter-dropdown__chevron { transition: transform 0.2s ease; flex-shrink: 0; } .castano-filter-dropdown__chevron--open { transform: rotate(180deg); } .castano-filter-dropdown__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 220px; background: white; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--button-radius, 6px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); animation: castano-dropdown-enter 0.15s ease-out; } @keyframes castano-dropdown-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .castano-filter-dropdown__list { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.125rem; } .castano-filter-dropdown__header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; font-size: 0.8125rem; color: var(--color-text); opacity: 0.6; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 0.25rem; } .castano-filter-dropdown__reset { background: none; border: none; padding: 0; font-size: 0.8125rem; color: var(--color-tone-1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .castano-filter-dropdown__reset:hover { opacity: 0.8; } .castano-filter-dropdown__option { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--color-text); background: transparent; border: none; border-radius: calc(var(--button-radius, 6px) - 2px); cursor: pointer; transition: background-color 0.15s ease; } .castano-filter-dropdown__option:hover { background-color: rgba(0, 0, 0, 0.04); } .castano-filter-dropdown__option--active { background-color: rgba(0, 0, 0, 0.06); font-weight: 600; } /* ----- CHECKBOX FILTER ----- */ .castano-filter-dropdown__checkbox { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--color-text); cursor: pointer; border-radius: calc(var(--button-radius, 6px) - 2px); transition: background-color 0.15s ease; } .castano-filter-dropdown__checkbox:hover { background-color: rgba(0, 0, 0, 0.04); } .castano-filter-dropdown__checkbox input[type="checkbox"] { /* Hide native checkbox but keep accessible */ position: absolute; opacity: 0; width: 0; height: 0; } .castano-filter-dropdown__checkmark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid rgba(0, 0, 0, 0.3); border-radius: 3px; transition: all 0.15s ease; } .castano-filter-dropdown__checkbox input:checked + .castano-filter-dropdown__checkmark { background-color: var(--color-tone-1); border-color: var(--color-tone-1); } .castano-filter-dropdown__checkbox input:checked + .castano-filter-dropdown__checkmark::after { content: ''; display: block; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } /* ----- PRICE RANGE FILTER ----- */ .castano-filter-dropdown__price { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .castano-filter-dropdown__price-inputs { display: flex; gap: 0.5rem; } .castano-filter-dropdown__price-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .castano-filter-dropdown__price-field label { font-size: 0.75rem; color: var(--color-text); opacity: 0.6; } .castano-filter-dropdown__price-field input { width: 100%; padding: 0.5rem; font-size: 0.875rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: calc(var(--button-radius, 6px) - 2px); color: var(--color-text); background: white; outline: none; transition: border-color 0.15s ease; } .castano-filter-dropdown__price-field input:focus { border-color: var(--color-tone-1); } .castano-filter-dropdown__apply { width: 100%; padding: 0.5rem; font-size: 0.8125rem; font-weight: 600; background-color: var(--color-tone-1); color: white; border: none; border-radius: var(--button-radius, 6px); cursor: pointer; transition: opacity 0.15s ease; } .castano-filter-dropdown__apply:hover { opacity: 0.9; } /* ----- ACTIVE FILTER PILLS ----- */ .castano-filters__active { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .castano-filter-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; font-weight: 500; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); border: none; border-radius: 9999px; cursor: pointer; transition: background-color 0.15s ease; } .castano-filter-pill:hover { background: color-mix(in srgb, currentColor 15%, transparent); } .castano-filter-pill__close { width: 14px; height: 14px; opacity: 0.6; } .castano-filters__clear-all { background: none; border: none; padding: 0.375rem 0; font-size: 0.8125rem; color: var(--color-tone-1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .castano-filters__clear-all:hover { opacity: 0.8; } /* ----- SORT (native