/* * Amore Divino public catalog theme. * Mirrors theme.css's .admin-theme pattern: brand tokens are scoped under * .public-theme (set on by application.html.erb) so they only * resolve on the public site and never leak into .admin-theme pages. */ .public-theme { --green-900: #0f322a; --green-800: #16483b; --green-700: #1d5c4c; --green-100: #dcebe4; --green-50: #f2f7f5; --peach-500: #facb97; --peach-100: #fbe4c7; --cream: #fbf7f1; --white: #ffffff; --text-primary: #16261f; --text-secondary: #6b7871; --border-subtle: #cdd7d1; --font-display: "Playfair Display", serif; --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif; --text-display-lg: clamp(2.5rem, 5vw, 3.5rem); --text-display-md: clamp(1.75rem, 3vw, 2.5rem); --tracking-wide: 0.05em; --tracking-wider: 0.08em; --leading-tight: 1.15; --leading-normal: 1.6; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(22, 72, 59, .06), 0 8px 24px rgba(22, 72, 59, .08); /* Remap the generic semantic scale that .btn already reads. */ --color-bg: var(--cream); --color-surface: var(--white); --color-text: var(--text-primary); --color-text-subtle: var(--text-secondary); --color-text-reversed: var(--white); --color-border: var(--border-subtle); --color-border-light: var(--green-50); --color-primary: var(--green-800); --color-secondary: var(--green-50); --color-selected-dark: var(--green-800); --default-font-family: var(--font-body); --btn-radius: var(--radius-pill); background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } /* Header */ .catalog-header { align-items: center; background-color: var(--green-800); display: flex; justify-content: space-between; padding: var(--size-2) var(--size-8); position: sticky; top: 0; z-index: 10; } .catalog-header__logo { block-size: 88px; inline-size: auto; } .catalog-header__logo-link { color: var(--white); font-family: var(--font-display); font-size: 22px; font-weight: 700; } .catalog-nav { column-gap: var(--size-8); display: flex; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .catalog-nav a { color: var(--peach-100); } .catalog-header__cart-icon { color: var(--white); block-size: 22px; inline-size: 22px; } .cart-indicator { align-items: center; display: flex; gap: var(--size-1); position: relative; } .cart-indicator__count { align-items: center; background-color: var(--peach-100); border-radius: 999px; color: var(--green-800); display: flex; font-size: 0.75rem; font-weight: 700; justify-content: center; min-inline-size: 18px; padding-inline: 4px; } .cart-indicator--empty .cart-indicator__count { display: none; } /* Hero */ .catalog-hero { background-color: var(--cream); padding: var(--size-16) var(--size-8) var(--size-10); text-align: center; } .catalog-hero__eyebrow { color: var(--green-700); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); margin-block-end: var(--size-4); text-transform: uppercase; } .catalog-hero h1 { color: var(--green-900); font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: 700; line-height: var(--leading-tight); margin: 0; } .catalog-hero h1 em { color: var(--green-700); font-style: italic; } .catalog-hero p { color: var(--text-secondary); font-size: 17px; line-height: var(--leading-normal); margin: var(--size-5) auto 0; max-inline-size: 32rem; } /* Category sections */ .catalog-section { padding: var(--size-14) var(--size-8); } .catalog-section__heading { align-items: baseline; column-gap: var(--size-3); display: flex; margin-block-end: var(--size-7); } .catalog-section__icon { color: var(--green-700); block-size: 22px; inline-size: 22px; } .catalog-section__heading h2 { color: var(--green-900); font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 700; margin: 0; } .product-grid { display: grid; gap: var(--size-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Product card */ .product-card { background-color: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; } .product-card__media { align-items: center; background-color: var(--swatch, var(--green-50)); block-size: 160px; display: flex; justify-content: center; } .product-card__media img { block-size: 100%; inline-size: 100%; object-fit: cover; } .product-card__media-icon { color: var(--green-700); block-size: 36px; inline-size: 36px; opacity: .5; } .product-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--size-2); padding: var(--size-6); } .product-card__name { color: var(--green-900); font-family: var(--font-display); font-size: 18px; font-weight: 700; } .product-card__description { color: var(--text-secondary); flex: 1; font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; } .product-card__price { color: var(--green-800); font-size: 16px; font-weight: 500; margin-block-start: var(--size-1); } /* Callouts */ .catalog-callouts { display: grid; gap: var(--size-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding: var(--size-4) var(--size-8) var(--size-16); } .catalog-callout { border-radius: var(--radius-lg); padding: var(--size-6); } .catalog-callout strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-block-end: var(--size-1); } .catalog-callout--peach { background-color: var(--peach-100); color: var(--text-primary); } .catalog-callout--green { background-color: var(--green-50); color: var(--text-primary); } /* Testimonials */ .catalog-testimonials { background-color: var(--green-50); padding: var(--size-4) var(--size-8) var(--size-20); } .catalog-testimonials h2 { color: var(--green-900); font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 700; margin: 0 0 var(--size-10); text-align: center; } .catalog-testimonials__grid { display: grid; gap: var(--size-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-inline: auto; max-inline-size: 68.75rem; } .testimonial-card { background-color: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--size-7); } .testimonial-card__stars { color: var(--peach-500); font-size: var(--text-sm); margin-block-end: var(--size-3); } .testimonial-card p { color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0 0 var(--size-4); } .testimonial-card__author { color: var(--text-secondary); font-size: 13px; } /* Founder bio */ .catalog-founder { align-items: center; column-gap: var(--size-12); display: flex; margin-inline: auto; max-inline-size: 56.25rem; padding: var(--size-16) var(--size-8); } .catalog-founder__avatar { align-items: center; background-color: var(--peach-100); block-size: 120px; border-radius: var(--radius-pill); display: flex; flex-shrink: 0; inline-size: 120px; justify-content: center; } .catalog-founder__icon { color: var(--green-700); block-size: 44px; inline-size: 44px; } .catalog-founder__eyebrow { color: var(--green-700); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); margin-block-end: var(--size-2); text-transform: uppercase; } .catalog-founder__name { color: var(--green-900); font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-block-end: var(--size-2); } .catalog-founder p { color: var(--text-secondary); font-size: 15px; line-height: var(--leading-normal); margin: 0; } /* Footer */ .catalog-footer { background-color: var(--green-800); color: var(--peach-100); padding: var(--size-14) var(--size-8) var(--size-8); } .catalog-footer__grid { display: grid; gap: var(--size-12); grid-template-columns: 2fr 1fr 1fr; margin-inline: auto; max-inline-size: 68.75rem; } .catalog-footer__logo { block-size: 36px; inline-size: auto; margin-block-end: var(--size-4); } .catalog-footer__tagline { color: var(--peach-100); font-size: 13px; line-height: var(--leading-normal); max-inline-size: 17.5rem; opacity: .8; } .catalog-footer__heading { color: var(--white); display: block; margin-block-end: var(--size-1); } .catalog-footer__links { display: flex; flex-direction: column; font-size: 13px; row-gap: var(--size-2_5); } .catalog-footer__links a, .catalog-footer__links span { color: var(--peach-100); opacity: .85; } .catalog-footer__copyright { color: var(--peach-100); font-size: var(--text-xs); margin-block-start: var(--size-10); opacity: .6; text-align: center; } @media (width < 48rem) { .catalog-footer__grid { grid-template-columns: 1fr; } .catalog-founder { flex-direction: column; text-align: center; } } /* Cart drawer */ .public-theme.cart-drawer-open { overflow: hidden; } .cart-drawer__overlay { background-color: rgba(15, 50, 42, .45); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 40; } .cart-drawer__overlay.is-open { opacity: 1; pointer-events: auto; } .cart-drawer { background-color: var(--white); block-size: 100vh; box-shadow: -8px 0 24px rgba(15, 50, 42, .18); display: flex; flex-direction: column; inline-size: min(420px, 100vw); inset-block-start: 0; inset-inline-end: 0; position: fixed; transform: translateX(100%); transition: transform .3s ease; z-index: 50; } .cart-drawer.is-open { transform: translateX(0); } .cart-drawer__header { align-items: center; border-block-end: 1px solid var(--border-subtle); display: flex; justify-content: space-between; padding: var(--size-5) var(--size-6); } .cart-drawer__header h2 { color: var(--green-900); font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; } .cart-drawer__close { align-items: center; background: none; border: none; border-radius: var(--radius-pill); color: var(--text-primary); cursor: pointer; display: flex; font-size: 22px; inline-size: 32px; block-size: 32px; justify-content: center; line-height: 1; } .cart-drawer__close:hover { background-color: var(--green-50); } .cart-drawer__close:focus-visible { outline: 2px solid var(--green-800); outline-offset: 2px; } .cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--size-6); } .cart-drawer__body p { color: var(--text-secondary); } .cart-drawer__footer { border-block-start: 1px solid var(--border-subtle); padding: var(--size-5) var(--size-6); } .cart-drawer__footer .btn { --btn-inline-size: 100%; } .cart-list { display: flex; flex-direction: column; gap: var(--size-4); } .cart-item { align-items: center; background-color: var(--cream); border-radius: var(--radius-md); display: flex; gap: var(--size-3); padding: var(--size-4); } .cart-item__image { block-size: 56px; border-radius: var(--radius-md); flex-shrink: 0; inline-size: 56px; object-fit: cover; } .cart-item__details { flex: 1; min-inline-size: 0; } .cart-item__name { color: var(--text-primary); font-weight: 600; } .cart-item__price { color: var(--text-secondary); font-size: var(--text-sm); } .cart-item__quantity { align-items: center; display: flex; gap: var(--size-2); } .cart-item__quantity button { align-items: center; background-color: var(--white); block-size: 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-primary); cursor: pointer; display: flex; font-weight: 700; inline-size: 26px; justify-content: center; line-height: 1; } .cart-item__quantity button:hover { background-color: var(--green-50); } .cart-item--unavailable { border: 1px dashed var(--red-6, #e88); flex-direction: column; align-items: flex-start; } .cart-item__notice { color: var(--red-6, #b33); font-size: var(--text-xs); } @media (width < 30rem) { .cart-drawer { inline-size: 100vw; } }