/* ===================================================================== Shop sections --------------------------------------------------------------------- Plants, Supplements, and Aquarium Add-Ons share every template on the site and differ only by accent colour. That colour arrives as three custom properties set by applySectionTheme() on , and again on individual cards and cart groups that need to show a section other than the page's own. Nothing here hard-codes a hex value twice. ===================================================================== */ :root { --section-accent: #1f6b4a; --section-accent-dark: #0e3626; --section-accent-light: #2f9464; } /* ---------- Section switcher ---------- */ .section-switcher { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 44px auto 0; padding: 18px 20px 20px; border: 1px solid rgba(196, 240, 216, 0.16); border-radius: var(--radius-lg); /* No backdrop-filter, for the same reason as the footer: the only things behind this panel are the flat body colour and the fixed gradient, so the blur produced nothing visible and cost a 1180x129 re-blur on every repaint over it. */ background: rgba(8, 26, 20, 0.72); box-shadow: var(--shadow-sm); } .section-switcher-label { margin: 0 0 12px; color: rgba(206, 238, 220, 0.72); font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .section-switcher-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .section-switcher-link { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); color: #f2fff7; text-decoration: none; transition: transform 0.133s var(--ease), border-color 0.133s var(--ease), background 0.133s var(--ease); } .section-switcher-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--section-accent) 70%, white 30%); background: rgba(255, 255, 255, 0.1); } .section-switcher-link.is-active { border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 82%, white 18%), color-mix(in srgb, var(--section-accent) 96%, black 4%)); box-shadow: 0 12px 30px color-mix(in srgb, var(--section-accent) 40%, transparent); color: #ffffff; } /* Each link paints its own section's colour, not the page's. */ .section-switcher-link[data-section="plants"] { --section-accent: #1f6b4a; } .section-switcher-link[data-section="supplements"] { --section-accent: #276CF5; } .section-switcher-link[data-section="addons"] { --section-accent: #2B00FF; } .section-switcher-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--section-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--section-accent) 26%, transparent); } .section-switcher-link.is-active .section-switcher-dot { background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.26); } .section-switcher-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .section-switcher-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .section-switcher-meta { color: rgba(228, 248, 236, 0.72); font-size: 12.5px; font-weight: 600; } .section-switcher-link.is-active .section-switcher-meta { color: rgba(255, 255, 255, 0.86); } /* ---------- Section-accented storefront chrome ---------- */ :root[data-section-theme="supplements"] .button.primary, :root[data-section-theme="supplements"] .add-to-cart, :root[data-section-theme="addons"] .button.primary, :root[data-section-theme="addons"] .add-to-cart { background: linear-gradient(135deg, var(--section-accent-light), var(--section-accent-dark)); box-shadow: 0 10px 26px color-mix(in srgb, var(--section-accent) 36%, transparent); } :root[data-section-theme="supplements"] .add-to-cart.is-added, :root[data-section-theme="addons"] .add-to-cart.is-added { background: linear-gradient(135deg, var(--section-accent), var(--section-accent-dark)); } :root[data-section-theme="supplements"] .top-menu a[aria-current="page"], :root[data-section-theme="addons"] .top-menu a[aria-current="page"] { background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 60%, white 40%), color-mix(in srgb, var(--section-accent) 82%, white 18%)); color: #ffffff; } :root[data-section-theme="supplements"] .hero-eyebrow, :root[data-section-theme="addons"] .hero-eyebrow { color: color-mix(in srgb, var(--section-accent-light) 55%, white 45%); } :root[data-section-theme="supplements"] .category-chip, :root[data-section-theme="addons"] .category-chip { background: color-mix(in srgb, var(--section-accent) 14%, white 86%); color: var(--section-accent-dark); } :root[data-section-theme="supplements"] .side-category.active, :root[data-section-theme="addons"] .side-category.active { border-color: transparent; background: var(--section-accent); color: #ffffff; } /* The hero video is the section's centrepiece, so the section colour is washed over it rather than the default green. The gradient still resolves to the same green-black the header and page background use (rgba(4, 14, 11, x), not a navy variant) so the hero's bottom edge fades into the page instead of cutting to a visibly different hue. */ .is-section-hero .hero-video-scrim { background: linear-gradient(180deg, rgba(4, 14, 11, 0.56) 0%, rgba(4, 14, 11, 0.32) 32%, rgba(4, 14, 11, 0.7) 78%, rgba(4, 14, 11, 0.97) 100%), radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--section-accent) 30%, transparent), rgba(4, 14, 11, 0.6) 74%); } /* A video decodes on its own compositor layer; this fade is opacity only, so it never triggers layout or repaint of the content above it. */ .hero-video { opacity: 0; transition: opacity 0.333s var(--ease-soft); } .hero-video.is-playing { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } } /* ---------- Section tag on catalogue cards ---------- */ .plant-card-section-tag { display: none; align-items: center; align-self: flex-start; margin-bottom: 8px; padding: 3px 11px; border-radius: var(--radius-pill); background: var(--section-accent); color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* Only mixed grids need the label. On a section's own page every card would carry the same one, which is noise. */ #search-results .plant-card-section-tag { display: inline-flex; } #search-results .plant-card { border-top: 3px solid var(--section-accent); } .search-filter-sections { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .side-category.section-chip.active { border-color: transparent; background: var(--section-accent); color: #ffffff; } /* ---------- Custom order notice ---------- */ .section-notice-wrap { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .section-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--section-accent) 40%, transparent); border-left: 5px solid var(--section-accent); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-sm); } .section-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--section-accent) 14%, white 86%); color: var(--section-accent); } .section-notice-copy h3 { margin: 0 0 5px; font-size: 19px; } .section-notice-copy p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } .section-notice-cta { white-space: nowrap; } /* ---------- Cart grouping ---------- */ .cart-section-group { margin-bottom: 26px; border: 1px solid var(--line); border-top: 4px solid var(--section-accent); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-xs); overflow: hidden; } .cart-section-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--section-accent) 8%, white 92%); } .cart-section-swatch { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px; background: var(--section-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 22%, transparent); } .cart-section-titles { min-width: 0; margin-right: auto; } .cart-section-name { margin: 0; color: var(--section-accent-dark); font-size: 17px; } .cart-section-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; } .cart-section-subtotal { margin: 0; color: var(--section-accent-dark); font-size: 17px; font-weight: 900; white-space: nowrap; } .cart-section-items { display: flex; flex-direction: column; padding: 6px 14px 14px; } /* Every line in a group is banded in that section's colour, so a mixed cart reads as separate blocks rather than one undifferentiated list. */ .cart-section-items .cart-item { border-left: 4px solid var(--section-accent); } .cart-item-section-tag { display: inline-flex; align-self: flex-start; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--section-accent) 14%, white 86%); color: var(--section-accent-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- Drawer section links ---------- These sit on the light drawer body (not a dark panel), so every one of the three departments carries its own colour as a pale tint - readable at rest, not just on hover - while staying visibly lighter than the solid-colour buttons elsewhere on the page. */ .drawer-section-list { display: flex; flex-direction: column; gap: 9px; } .drawer-section-link { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 42px 13px 13px; border: 1px solid color-mix(in srgb, var(--section-accent) 28%, var(--line) 72%); border-radius: var(--radius); background: color-mix(in srgb, var(--section-accent) 11%, white 89%); text-decoration: none; transition: border-color 0.133s var(--ease), background 0.133s var(--ease), transform 0.133s var(--ease); } .drawer-section-link:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--section-accent) 55%, var(--line) 45%); background: color-mix(in srgb, var(--section-accent) 17%, white 83%); } .drawer-section-link.is-active { border-color: var(--section-accent); background: color-mix(in srgb, var(--section-accent) 22%, white 78%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--section-accent) 30%, transparent); } .drawer-section-icon { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--section-accent); color: #ffffff; box-shadow: 0 4px 12px color-mix(in srgb, var(--section-accent) 45%, transparent); } .drawer-section-copy { min-width: 0; } .drawer-section-link strong { display: block; color: color-mix(in srgb, var(--section-accent) 65%, black 35%); font-size: 14.5px; line-height: 1.25; } .drawer-section-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; } .drawer-section-current { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--section-accent); color: #ffffff; transform: translateY(-50%); } /* ---------- Department switcher pills (header) ---------- On the wide, inline layout these sit directly on the dark header, so each pill is a translucent wash of its own colour with white text. In the narrow dropdown (see the media query in style.css) they sit on the drawer-style white menu instead, so they switch to the same pale-tint-on-white treatment as the department cards in the side menu. */ /* Specificity note: these links live inside .top-menu, which already has a broad ".top-menu a" rule (in style.css) styling every plain link in the header as a translucent dark pill. That rule is a class+element selector, which beats a single ".dept-switcher-option" class on its own - the symptom was every non-active department option rendering in that rule's near-white-on-near-white colours instead of the ones below. Qualifying with the ".dept-switcher" ancestor makes every rule here two classes, so it wins outright. */ .dept-switcher .dept-switcher-option { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--section-accent) 45%, transparent); background: color-mix(in srgb, var(--section-accent) 18%, transparent); color: #ffffff; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background 0.133s var(--ease), border-color 0.133s var(--ease); } .dept-switcher .dept-switcher-option:hover { background: color-mix(in srgb, var(--section-accent) 30%, transparent); } /* Also suppresses .top-menu a::after, the sliding underline every plain header link gets on hover - redundant on a pill that already has its own border and background. */ .dept-switcher .dept-switcher-option::after { display: none; } .dept-switcher .dept-switcher-option.is-active { border-color: transparent; background: var(--section-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--section-accent) 45%, transparent); } @media (max-width: 850px) { .dept-switcher .dept-switcher-option { background: color-mix(in srgb, var(--section-accent) 12%, white 88%); border-color: color-mix(in srgb, var(--section-accent) 30%, var(--line) 70%); color: color-mix(in srgb, var(--section-accent) 65%, black 35%); justify-content: center; } .dept-switcher .dept-switcher-option:hover { background: color-mix(in srgb, var(--section-accent) 20%, white 80%); } .dept-switcher .dept-switcher-option.is-active { background: var(--section-accent); color: #ffffff; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .section-notice { grid-template-columns: auto minmax(0, 1fr); } .section-notice-cta { grid-column: 1 / -1; justify-self: stretch; } } @media (max-width: 780px) { .section-switcher { width: calc(100% - 28px); margin-top: 30px; padding: 15px 14px 16px; border-radius: var(--radius); } .section-switcher-links { grid-template-columns: 1fr; gap: 8px; } .section-switcher-link { min-height: 56px; padding: 11px 14px; } .section-notice-wrap { width: calc(100% - 28px); } .section-notice { grid-template-columns: 1fr; gap: 12px; padding: 18px; } .section-notice-icon { width: 40px; height: 40px; } .cart-section-head { flex-wrap: wrap; padding: 13px 15px; } .cart-section-subtotal { width: 100%; padding-left: 26px; } .cart-section-items { padding: 6px 10px 12px; } } @media (prefers-reduced-motion: reduce) { .section-switcher-link, .drawer-section-link { transition: none; } .section-switcher-link:hover, .drawer-section-link:hover { transform: none; } } /* Empty catalogue states carry their own way out, so a section that has no stock yet is not a dead end. */ .catalogue-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 24px; border: 1px dashed rgba(196, 240, 216, 0.24); border-radius: var(--radius-lg); background: rgba(8, 26, 20, 0.5); text-align: center; } /* The base .empty-state is a white card meant to sit on a light page. Inside this dark panel it only needs to be text, so its own card styling is cleared rather than layered white on near-black. */ .catalogue-empty-state .empty-state { margin: 0; padding: 0; border: 0; background: none; color: #e8fbf0; font-size: 16px; } .catalogue-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* The home page hero says PLANTOVIA; the section heroes say longer words like SUPPLEMENTS. The shared clamp has a 56px floor that a longer word cannot fit inside a 375px screen, so it ran flush to both edges. The section heroes get a floor that leaves room for their names. */ .is-section-hero .hero-title { font-size: clamp(38px, 11vw, 124px); } /* The cart used to be one flat list, so on a phone each line could afford a full-width 180px banner photo. Split into three headed groups, that layout turns a normal order into several screens of scrolling. Grouped lines keep a thumbnail beside their details instead, so a mixed cart stays scannable. */ @media (max-width: 780px) { .cart-section-items .cart-item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0 14px 14px; } .cart-section-items .cart-item img { width: 84px; height: 84px; } .cart-section-items .cart-item h2 { font-size: 17px; line-height: 1.25; } .cart-section-items .cart-item p { margin: 2px 0; font-size: 13.5px; } .cart-section-items .cart-remove-control { margin-top: 8px; } }