/* ================================================================ Plant Catalog & Single Product — plants.css Import or enqueue in WordPress: wp_enqueue_style('plants', get_template_directory_uri().'/assets/css/plants.css'); ================================================================ */ /* ── Design Tokens ─────────────────────────────────────────────── */ :root { --green-dark: #1a4d2e; --green-mid: #2d7a4f; --green-light: #4caf50; --green-pale: #e8f5e9; --green-bg: #f0f5f0; --orange: #e8622a; --orange-light: #f4845a; --white: #ffffff; --gray-100: #f7f9f7; --gray-200: #e9eded; --gray-400: #9aa89a; --gray-700: #444d44; --text: #1e2b1e; --radius-card: 18px; --radius-btn: 50px; --shadow-card: 0 4px 24px rgba(26,77,46,.10); --shadow-hover: 0 10px 40px rgba(26,77,46,.18); --transition: .25s ease; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; } /* ── Google Fonts (add to or @import) ────────────────────── */ /* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&display=swap'); */ /* ════════════════════════════════════════════════════════════════ CATALOG BLOCK ════════════════════════════════════════════════════════════════ */ .plant-catalog { background: var(--green-bg); padding: 72px 24px 80px; font-family: var(--font-sans); } /* Header */ .plant-catalog__header { text-align: center; max-width: 640px; margin: 0 auto 52px; } .plant-catalog__eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--green-mid); text-transform: uppercase; margin-bottom: 10px; } .plant-catalog__title { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--text); margin: 0 0 16px; line-height: 1.15; } .plant-catalog__subtitle { font-size: .98rem; color: var(--gray-700); line-height: 1.65; margin: 0; } /* Grid */ .plant-catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; } /* ── Plant Card ────────────────────────────────────────────────── */ .plant-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .plant-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .plant-card--unavailable { opacity: .55; pointer-events: none; } /* Image area */ .plant-card__image-wrap { position: relative; display: block; aspect-ratio: 4/3.2; overflow: hidden; background: var(--gray-100); text-decoration: none; } .plant-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; } .plant-card:hover .plant-card__img { transform: scale(1.06); } .plant-card__img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } /* Badge */ .plant-card__badge { position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 13px; border-radius: 30px; z-index: 2; box-shadow: 0 2px 8px rgba(232,98,42,.35); } /* Body */ .plant-card__body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; } .plant-card__name { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 0 0 8px; } .plant-card__name a { color: inherit; text-decoration: none; } .plant-card__name a:hover { color: var(--green-mid); } .plant-card__price { font-size: .9rem; color: var(--gray-700); margin: 0 0 4px; } .plant-card__price strong { font-size: 1.35rem; font-weight: 700; color: var(--green-mid); } .plant-card__price-to { font-size: .82rem; color: var(--gray-400); } .plant-card__min-order { font-size: .8rem; color: var(--gray-400); margin: 0 0 14px; } .plant-card__divider { border: none; border-top: 1px solid var(--gray-200); margin: auto 0 14px; } .plant-card__btn { display: block; text-align: center; padding: 11px 0; border: 2px solid var(--green-dark); border-radius: var(--radius-btn); color: var(--green-dark); font-family: var(--font-sans); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background var(--transition), color var(--transition); } .plant-card__btn:hover { background: var(--green-dark); color: var(--white); } /* ════════════════════════════════════════════════════════════════ SINGLE PRODUCT PAGE ════════════════════════════════════════════════════════════════ */ .sp-wrap { font-family: var(--font-sans); color: var(--text); max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; } /* Breadcrumb */ .sp-breadcrumb { padding: 20px 0 8px; font-size: .82rem; color: var(--gray-400); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sp-breadcrumb a { color: var(--green-mid); text-decoration: none; } .sp-breadcrumb a:hover { text-decoration: underline; } /* ── Main layout: gallery + info ─────────────────────────────── */ .sp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 36px 0 0; align-items: start; } @media (max-width: 820px) { .sp-layout { grid-template-columns: 1fr; gap: 32px; } } /* Gallery */ .sp-gallery { position: sticky; top: 100px; } .sp-gallery__main { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--gray-100); aspect-ratio: 4/3.5; } .sp-gallery__hero { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; } .sp-gallery__hero--empty { display: flex; align-items: center; justify-content: center; font-size: 5rem; } .sp-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .sp-gallery__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--gray-100); transition: border-color var(--transition); } .sp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-gallery__thumb--active, .sp-gallery__thumb:hover { border-color: var(--green-mid); } /* Info panel */ .sp-info__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; margin: 0 0 16px; line-height: 1.2; } .sp-info__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .sp-tag { background: var(--green-pale); color: var(--green-dark); font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 4px 12px; border-radius: 30px; text-transform: uppercase; } /* Availability */ .sp-info__avail { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; margin-bottom: 22px; } .sp-info__avail-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .avail--green { color: var(--green-light); } .avail--orange { color: var(--orange); } .avail--red { color: #d32f2f; } /* Price block */ .sp-info__price-block { background: var(--green-pale); border-radius: 14px; padding: 18px 22px; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .sp-info__price-label { font-size: .85rem; color: var(--gray-700); width: 100%; } .sp-info__price { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 900; color: var(--green-dark); line-height: 1; } .sp-info__price em { font-style: normal; font-size: 1.3rem; } .sp-info__price-to { font-size: .88rem; color: var(--gray-700); } /* Meta list */ .sp-info__meta-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; } .sp-info__meta-list li { font-size: .9rem; color: var(--gray-700); display: flex; align-items: center; gap: 8px; } .sp-info__short-desc { font-size: .95rem; line-height: 1.7; color: var(--gray-700); margin: 0 0 22px; } /* Characteristics table */ .sp-char-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 28px; } .sp-char-table th, .sp-char-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--gray-200); } .sp-char-table th { font-weight: 600; color: var(--gray-700); width: 40%; background: var(--gray-100); } /* CTA button */ .sp-cta-btn { display: block; width: 100%; text-align: center; background: var(--green-dark); color: var(--white); padding: 15px 24px; border-radius: var(--radius-btn); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background var(--transition), transform var(--transition); cursor: pointer; border: none; font-family: var(--font-sans); } .sp-cta-btn:hover { background: var(--green-mid); transform: translateY(-2px); } .sp-cta-btn--disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; } /* ── Long description ────────────────────────────────────────── */ .sp-description { border-top: 1px solid var(--gray-200); margin: 52px 0 0; padding-top: 40px; } .sp-description h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; margin: 0 0 20px; } .sp-description__body { font-size: .96rem; line-height: 1.8; color: var(--gray-700); max-width: 680px; } /* ════════════════════════════════════════════════════════════════ CONTACT FORM ════════════════════════════════════════════════════════════════ */ .sp-contact { margin-top: 64px; background: var(--green-bg); border-radius: 24px; padding: 56px 40px 52px; } @media (max-width: 640px) { .sp-contact { padding: 36px 22px 40px; } } .sp-contact__inner { max-width: 780px; margin: 0 auto; } .sp-contact__title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; margin: 0 0 8px; color: var(--text); } .sp-contact__subtitle { font-size: .9rem; color: var(--gray-700); margin: 0 0 36px; } /* Alerts */ .sp-alert { padding: 14px 18px; border-radius: 12px; font-size: .9rem; font-weight: 500; margin-bottom: 28px; } .sp-alert--success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .sp-alert--error { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; } /* Form grid */ .sp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; } @media (max-width: 600px) { .sp-form__grid { grid-template-columns: 1fr; } } .sp-form__group { display: flex; flex-direction: column; gap: 7px; } .sp-form__group--full { grid-column: 1 / -1; } .sp-form__group label { font-size: .82rem; font-weight: 600; color: var(--gray-700); letter-spacing: .02em; } .sp-form__group label small { font-weight: 400; color: var(--gray-400); } .sp-form input[type="text"], .sp-form input[type="email"], .sp-form input[type="tel"], .sp-form input[type="number"], .sp-form select, .sp-form textarea { padding: 11px 15px; border: 1.5px solid var(--gray-200); border-radius: 10px; font-family: var(--font-sans); font-size: .92rem; color: var(--text); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); outline: none; width: 100%; box-sizing: border-box; } .sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(45,122,79,.12); } .sp-form__readonly { background: var(--gray-100) !important; color: var(--green-dark) !important; font-weight: 600 !important; cursor: default; } .sp-form textarea { resize: vertical; min-height: 100px; } /* Footer */ .sp-form__footer { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .sp-submit-btn { background: var(--orange); color: var(--white); border: none; border-radius: var(--radius-btn); padding: 14px 36px; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--transition), transform var(--transition); box-shadow: 0 4px 18px rgba(232,98,42,.3); } .sp-submit-btn:hover { background: var(--orange-light); transform: translateY(-2px); } .sp-form__privacy { font-size: .78rem; color: var(--gray-400); margin: 0; }