, in
dynamically-built cards) the heavy Bebas Neue display face so it pairs with
`.cc-subtitle` below — matching how titles already render. */
.cc-title {
font-family: var(--cc-font-display);
font-weight: 600;
letter-spacing: 0.02em;
}
/* ---- Secondary / subtitle display type ----
`.cc-subtitle` renders a heading as a *thinner* display line so it reads as a
subtitle beneath a Bebas Neue title (e.g. the product type · subtype ·
category line under a strain name). Hierarchy is carried by font weight and
color, not size alone. */
.cc-subtitle,
.card-subtitle {
font-family: var(--cc-font-display-thin);
font-weight: 300;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cc-muted);
}
/* Product card hierarchy — every card variation (recommended / rated / newest /
simple) stacks a `.strain-name` title over a `.cultivator-name` subtitle.
Title: heavy Bebas Neue. Subtitle: thin Oswald in a dimmer tone. */
.strain-name {
font-family: var(--cc-font-display);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.cultivator-name {
font-family: var(--cc-font-display-thin);
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cc-muted);
}
/* Product-line wordmarks (Connoisseur Pack / pack-transition pages).
`.font-product` / `.text-product` are reusable utilities; `#allContent`
scopes the blackletter face to the campaign / product-line pages.
Blackletter is tuned for legibility + responsiveness: fluid sizing so
titles narrow on phones and widen on large screens, slightly looser
letter/word spacing (blackletter glyphs crowd together), a tighter
line-height for the tall forms, and safe wrapping so nothing overflows. */
.font-product,
.text-product,
#allContent h1 {
font-family: var(--cc-font-product) !important;
line-height: 1.15;
letter-spacing: 0.015em;
word-spacing: 0.06em;
overflow-wrap: break-word;
}
/* Fluid hero sizing for product-line titles (overrides fixed .display-*). */
#allContent h1 {
font-size: clamp(1.85rem, 5vw + 0.75rem, 3.75rem) !important;
}
.font-product.product-wordmark,
.text-product.product-wordmark {
display: inline-block;
font-size: clamp(1.6rem, 4.5vw + 0.5rem, 3.5rem);
max-width: 100%;
}
/* Keep functional sub-lines inside a hero (e.g. .display-6
"Select a Resin to Rate") in the legible Bebas Neue display face,
and reset the inherited blackletter spacing. */
#allContent h1 .display-4,
#allContent h1 .display-5,
#allContent h1 .display-6,
#allContent h1 small,
#allContent h1 .small {
font-family: var(--cc-font-display) !important;
letter-spacing: 0.02em;
word-spacing: normal;
}
/* Ease spacing further on the smallest screens so glyphs don't crowd. */
@media (max-width: 575.98px) {
.font-product,
.text-product,
#allContent h1 {
letter-spacing: 0.01em;
word-spacing: 0.04em;
}
}
.navy-color-parent * {
color: var(--cc-black);
}
/* Legacy brand text utility (used on the 404 heading) — remapped to Cult Green
(pink is now reserved for links / primary buttons). */
.text-navy {
color: var(--cc-green);
}
.banner-image {
background-position: center;
}
#formAccordion {
background-color: transparent;
}
#formAccordionItem{
background-color: transparent;
}
#formAccordionHeader {
background-color: transparent;
}
#collapseOne {
background-color: transparent;
}
.accordion-header {
background-color: transparent;
}
.accordion-button:not(.collapsed) {
background-color: transparent;
}
.cult-picks h1{
font-family: var(--cc-font-display);
color: var(--cc-green);
text-transform: uppercase;
font-size: clamp(1.5rem, 4rem + 1vw, 6.5rem);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
padding-top: 1.8rem;
}
.cult-picks a {
text-decoration: none;
color: inherit;
background-color: transparent;
}
.cult-picks a.ul {
text-decoration: underline;
color: inherit;
background-color: transparent;
font-weight: bold;
}
.custom-switch-width {
width: 50px !important;
}
.custom-switch-width:checked::before {
left: calc(100% - 2em) !important;
}
.container-glass {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.25);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
padding: 1px;
filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
}
.wrapper-glass {
width: auto;
height: auto;
}
.container-glass h1{
text-transform: uppercase;
font-size: 2.4rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.container-glass h4 {
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.map-locator {
color: var(--cc-black);
}
.map-locator h1{
text-transform: uppercase;
font-size: clamp(1rem, 3rem + 1vw, 6rem);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
padding-top: 3rem;
}
.vote-template {
background-color: transparent;
color: #ffffff;
max-width: 1000px;
max-height: 100vh;
}
.vote-template .card {
background: url("../img/card-assets/smoky-black-background.svg") no-repeat center center !important;
background-size: cover;
position: relative;
min-height: 475px;
}
.vote-template .card-title {
color: #ffffff;
font-size: clamp(1rem, 2rem + 1vw, 3rem);
}
.vote-template .card-subtitle {
color: #ffffff;
font-size: clamp(0.8rem, 1.5rem + 1vw, 2rem);
}
.single-width-outline {
border-width: 1px !important;
}
/* Brand accent panel / button (class name kept for existing JS + markup).
Rendered as a dark surface with a green hairline so any inner text keeps
contrast regardless of its own color (pink is reserved for links). */
.btn-purple {
background-color: var(--cc-charcoal);
color: var(--cc-bone);
border: 1px solid rgba(var(--cc-green-rgb), 0.35);
}
.modal-info-shadow {
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.2),
2px 2px 4px rgba(0, 0, 0, 0.2),
3px 3px 6px rgba(0, 0, 0, 0.2);
}
.email-input-field {
border: 1px solid black !important;
}
input,
select {
border: 1px solid black !important;
}
.rating-section {
margin-bottom: 1.5rem;
}
.rating-header .h6 {
letter-spacing: 1px;
text-transform: uppercase;
}
.rating-bubble {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid currentColor;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
position: relative;
}
.rating-bubble:hover {
background-color: rgba(0,0,0,0.1);
}
.rating-bubble::after {
content: attr(data-value);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 600;
pointer-events: none;
}
.rating-bubble:hover::after,
.rating-bubble:focus-visible::after,
.rating-bubble-input:checked + .rating-bubble::after {
opacity: 1;
color: var(--cc-pink);
font-weight: 700;
}
.rating-bubble:focus {
outline: 3px solid Highlight;
outline-offset: 2px;
}
.rating-scale-label {
font-family: var(--cc-font-body);
text-align: center;
color: var(--cc-black);
font-size: smaller;
}
.rating-bubble-input:checked + .rating-bubble {
background-color: currentColor;
outline: 2px solid Highlight;
outline-offset: 2px;
}
.btn-group-container {
background-color: transparent;
border: none;
box-shadow: none;
}
.custom-gradient-button {
position: relative;
overflow: hidden;
background: linear-gradient(to right, #ffffff, #e0e0e0);
color: #000000;
border: none;
padding: 10px 20px;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.custom-gradient-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #000000 0%, #ffffff 100%);
opacity: 0;
transition: opacity 0.5s ease, width 0.5s ease;
z-index: 0;
}
.custom-gradient-button:hover,
.custom-gradient-button:focus,
.custom-gradient-button:active {
color: var(--cc-black);
}
.custom-gradient-button:hover::before,
.custom-gradient-button:focus::before,
.custom-gradient-button:active::before {
opacity: 1;
}
.custom-gradient-button span {
position: relative;
z-index: 1;
}
@media (max-width: 485px) {
.long-voting-label {
font-size: 0.85rem;
}
}
@media (max-width: 420px) {
.long-voting-label {
font-size: 0.7rem;
}
}
@media (max-width: 360px) {
.long-voting-label {
font-size: 0.6rem;
}
}
#typewriterTextOverlay {
position: absolute;
top: 20px;
left: 20px;
}
/*--------------------------------------------------------------
# Custom Lineage Autocomplete placement
--------------------------------------------------------------*/
#autocomplete-dropdown-lineageInputSection {
inset: 0 0 0 -15% !important;
min-width: 200px;
}
@media (min-width: 992px) {
#autocomplete-dropdown-lineageInputSection {
inset: 0 0 0 -10% !important;
}
}
hr.divider-vertical {
position: absolute;
right: 0;
top: 0;
width: 1px;
background-image: linear-gradient( 180deg, transparent, hsl(0, 0%, 40%), transparent );
background-color: transparent;
height: 100%;
}
#allContent {
background-image: url('');
background-size: cover;
background-position: center;
position: relative;
margin: 0;
min-height: 100vh;
overflow: hidden;
}
#allContent::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(var(--cc-black-rgb), 0.7);
pointer-events: none;
z-index: 1;
}
#content {
position: relative;
z-index: 2;
}
.cascading-right { margin-right: -50px; }
.custom-navbar {
border-bottom: 1px solid #ddd;
}
.custom-navbar .nav-link {
color: var(--cc-black) !important;
}
.custom-navbar .nav-link.active,
.custom-navbar .nav-link:focus,
.custom-navbar .nav-link:hover {
color: var(--cc-pink) !important;
}
.custom-navbar .form-control {
background-color: #fff;
color: var(--cc-black);
border: 1px solid #c8c8d2;
}
.custom-navbar .dropdown-menu {
background-color: #fff;
color: var(--cc-black);
}
.custom-navbar .custom-navbar-search {
max-width: 100%;
}
.custom-navbar #search-results {
left: 0;
right: 0;
max-width: min(100%, calc(100vw - 1.5rem));
overflow-x: hidden;
}
.custom-navbar .navbar-search-result {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.custom-navbar .navbar-search-product {
display: flex;
gap: 0.25rem;
min-width: 0;
flex: 1 1 auto;
}
.custom-navbar .navbar-search-strain,
.custom-navbar .navbar-search-cultivator {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-navbar .navbar-search-strain {
flex: 0 1 auto;
}
.custom-navbar .navbar-search-cultivator {
flex: 1 1 auto;
min-width: 3rem;
}
.custom-navbar .navbar-search-subtype {
flex: 0 0 auto;
padding: 0.15rem 0.4rem;
border-radius: 999px;
background-color: rgba(var(--cc-pink-rgb), 0.12);
color: var(--cc-black);
font-size: 0.75rem;
line-height: 1.25;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.custom-navbar .navbar-search-product {
flex-direction: column;
gap: 0;
}
}
.custom-navbar .custom-navbar-more-menu {
max-width: calc(100vw - 1.5rem);
overflow-x: hidden;
}
.product-tournament-badges {
margin-top: 1.5rem;
padding: 1rem;
border: 1px solid var(--cc-border);
border-radius: 0.75rem;
background: var(--cc-charcoal);
color: var(--cc-bone);
text-align: left;
}
.product-tournament-badges__subtitle {
color: var(--cc-muted);
}
.product-tournament-badges__count {
border: 1px solid rgba(var(--cc-green-rgb), 0.45);
background-color: rgba(var(--cc-green-rgb), 0.16);
color: var(--cc-green);
}
.product-tournament-badges__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 0.75rem;
}
.product-tournament-badge {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem;
border: 1px solid var(--cc-border);
border-radius: 0.65rem;
background: var(--cc-surface-2);
color: var(--cc-bone);
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.product-tournament-badge:hover,
.product-tournament-badge:focus-visible,
.product-tournament-badge[aria-expanded='true'] {
border-color: var(--cc-pink);
box-shadow: 0 0.25rem 0.75rem rgba(var(--cc-black-rgb), 0.45);
}
.product-tournament-badge:focus-visible {
outline: 2px solid var(--cc-pink);
outline-offset: 2px;
}
.product-tournament-badge:hover {
transform: translateY(-2px);
}
.product-tournament-badge__artwork {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
border: 1px solid rgba(var(--cc-pink-rgb), 0.35);
background: rgba(var(--cc-pink-rgb), 0.14);
color: var(--cc-pink);
font-size: 1.75rem;
}
.product-tournament-badge__artwork img {
width: 2.75rem;
height: 2.75rem;
object-fit: contain;
}
.product-tournament-badge__copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.product-tournament-badge__copy > strong,
.product-tournament-badge__copy > span {
overflow-wrap: anywhere;
}
.product-tournament-badge__copy > span {
color: var(--cc-muted);
font-size: 0.8rem;
}
.product-tournament-badge__details {
grid-column: 1 / -1;
padding-top: 0.5rem;
border-top: 1px solid rgba(var(--cc-bone-rgb), 0.12);
color: var(--cc-muted);
font-size: 0.85rem;
line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
.product-tournament-badge { transition: none; }
.product-tournament-badge:hover { transform: none; }
}
@media (min-width: 992px) {
.custom-navbar .custom-navbar-search {
flex: 0 1 18rem;
max-width: 18rem;
}
}
@media (max-width: 991.98px) {
.custom-navbar .navbar-collapse,
.custom-navbar .navbar-collapse .navbar-nav,
.custom-navbar .custom-navbar-search {
width: 100%;
}
.custom-navbar .navbar-collapse .navbar-nav {
align-items: stretch;
}
.custom-navbar .custom-navbar-more-menu,
.custom-navbar #search-results {
position: absolute;
width: 100%;
}
}
.custom-navbar .navbar-nav svg path {
fill: #77767b !important;
}
/* ---------------------------------------------------------------------------
Hamburger menu: animated open/close interactions (mobile / < lg)
--------------------------------------------------------------------------- */
/* Animated hamburger -> X icon */
.custom-navbar .custom-navbar-toggler {
border: none;
background: transparent;
box-shadow: none;
padding: 0.35rem 0.5rem;
line-height: 0;
transition: opacity 0.25s ease;
}
.custom-navbar .custom-navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.custom-navbar .custom-navbar-toggler:focus-visible {
outline: 2px solid var(--cc-pink);
outline-offset: 2px;
border-radius: 6px;
}
.cc-hamburger {
position: relative;
display: inline-block;
width: 24px;
height: 16px;
color: var(--cc-black);
}
.cc-hamburger > span {
position: absolute;
left: 0;
height: 2px;
width: 100%;
background-color: currentColor;
border-radius: 2px;
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.2, 1),
opacity 0.2s ease, top 0.3s cubic-bezier(0.4, 0.01, 0.2, 1);
}
.cc-hamburger > span:nth-child(1) { top: 0; }
.cc-hamburger > span:nth-child(2) { top: 7px; }
.cc-hamburger > span:nth-child(3) { top: 14px; }
.custom-navbar.navbar-menu-open .cc-hamburger > span:nth-child(1) {
top: 7px;
transform: rotate(45deg);
}
.custom-navbar.navbar-menu-open .cc-hamburger > span:nth-child(2) {
opacity: 0;
transform: translateX(-12px);
}
.custom-navbar.navbar-menu-open .cc-hamburger > span:nth-child(3) {
top: 7px;
transform: rotate(-45deg);
}
@media (max-width: 991.98px) {
/* Smoothly collapse the logo + search bar out of the way when open */
.custom-navbar .navbar-brand-col,
.custom-navbar .custom-navbar-search {
max-width: 100%;
opacity: 1;
/* No transform at rest: a persistent transform would create a stacking
context that traps the search-results dropdown behind page content. */
transition: max-width 0.35s cubic-bezier(0.4, 0.01, 0.2, 1),
opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0.01, 0.2, 1),
margin 0.35s cubic-bezier(0.4, 0.01, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0.01, 0.2, 1);
}
.custom-navbar.navbar-menu-open .navbar-brand-col,
.custom-navbar.navbar-menu-open .custom-navbar-search {
max-width: 0;
opacity: 0;
overflow: hidden;
transform: translateX(-16px);
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
pointer-events: none;
}
/* Keep the toggler pinned to the right as a "close" affordance when open */
.custom-navbar .navbar-toggler-col {
transition: margin 0.35s cubic-bezier(0.4, 0.01, 0.2, 1);
}
.custom-navbar.navbar-menu-open .navbar-toggler-col {
margin-left: auto;
}
/* Full-width, left-aligned list of options flush to the page edge.
The -0.75rem margin cancels the container padding so the options reach the
far left; the matching +0.75rem width keeps the right edge in place so no
horizontal overflow / scrollbar is introduced. */
.custom-navbar.navbar-menu-open #navLinksList {
width: calc(100% + 0.75rem);
align-items: flex-start;
margin-left: -0.75rem;
padding-top: 0.25rem;
}
.custom-navbar.navbar-menu-open #navLinksList .nav-item {
width: 100%;
}
.custom-navbar.navbar-menu-open #navLinksList .nav-link {
display: block;
width: 100%;
text-align: left;
padding-left: 0.25rem;
}
/* Staggered reveal of each option as the menu opens */
.custom-navbar #navLinksList .nav-item {
opacity: 0;
transform: translateX(-14px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.01, 0.2, 1);
}
.custom-navbar.navbar-menu-open #navLinksList .nav-item {
opacity: 1;
/* Settle to `none` (not translateX(0)) so no stacking context lingers and
the "More" dropdown menu opens above the sibling nav items. */
transform: none;
}
.custom-navbar.navbar-menu-open #navLinksList .nav-item:nth-child(1) { transition-delay: 0.06s; }
.custom-navbar.navbar-menu-open #navLinksList .nav-item:nth-child(2) { transition-delay: 0.11s; }
.custom-navbar.navbar-menu-open #navLinksList .nav-item:nth-child(3) { transition-delay: 0.16s; }
.custom-navbar.navbar-menu-open #navLinksList .nav-item:nth-child(4) { transition-delay: 0.21s; }
.custom-navbar.navbar-menu-open #navLinksList .nav-item:nth-child(5) { transition-delay: 0.26s; }
/* Gentle fade-in for the social icons row */
.custom-navbar .navbar-collapse .navbar-nav.flex-row {
opacity: 0;
transform: translateX(-14px);
transition: opacity 0.3s ease 0.28s,
transform 0.3s cubic-bezier(0.4, 0.01, 0.2, 1) 0.28s;
}
.custom-navbar.navbar-menu-open .navbar-collapse .navbar-nav.flex-row {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.custom-navbar .custom-navbar-toggler,
.cc-hamburger > span,
.custom-navbar .navbar-brand-col,
.custom-navbar .custom-navbar-search,
.custom-navbar .navbar-toggler-col,
.custom-navbar #navLinksList .nav-item,
.custom-navbar .navbar-collapse .navbar-nav.flex-row {
transition: none !important;
}
}
.site-footer {
background-color: rgba(var(--cc-black-rgb), 0.05);
}
.site-footer .support-text {
color: var(--cc-black);
}
.site-footer .footer-social-btn {
background-color: var(--cc-pink) !important; /* important to override MDB btn-primary */
}
.site-footer .footer-copyright-row {
background-color: var(--cc-black);
}
.site-footer .footer-copyright,
.site-footer .footer-brandkit-link {
color: #fff;
}
.site-footer .footer-brandkit-link {
color: #fff8 !important; /* text-white-50 */
text-decoration: underline;
}
@media ( max-width: 991.98px ){
.cascading-right { margin-right: 0; }
}
#recommended-products-scroller {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(var(--cc-green-rgb), 0.5) transparent;
}
#recommended-products-scroller::-webkit-scrollbar {
height: 6px;
}
#recommended-products-scroller::-webkit-scrollbar-track {
background: transparent;
}
#recommended-products-scroller::-webkit-scrollbar-thumb {
background-color: rgba(var(--cc-green-rgb), 0.5);
border-radius: 3px;
}
/* Desktop scrollbar - more visible for mouse users */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
#recommended-products-scroller {
scrollbar-width: auto;
scrollbar-color: rgba(var(--cc-green-rgb), 0.6) rgba(var(--cc-green-rgb), 0.1);
padding-bottom: 8px;
}
#recommended-products-scroller::-webkit-scrollbar {
height: 10px;
display: block;
}
#recommended-products-scroller::-webkit-scrollbar-track {
background: rgba(var(--cc-green-rgb), 0.1);
border-radius: 5px;
margin: 0 12px;
}
#recommended-products-scroller::-webkit-scrollbar-thumb {
background-color: rgba(var(--cc-green-rgb), 0.5);
border-radius: 5px;
border: 2px solid rgba(var(--cc-green-rgb), 0.1);
}
#recommended-products-scroller::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--cc-green-rgb), 0.7);
}
}
.recommended-product-card {
scroll-snap-align: center;
flex: 0 0 auto;
width: 280px;
min-height: 420px;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.recommended-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.recommended-card-image-container {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
}
.recommended-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommended-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
max-height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.5rem 0.75rem;
}
.recommended-card-overlay .strain-name {
font-size: 1rem;
font-weight: 600;
color: #fff;
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.recommended-card-overlay .cultivator-name {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.72);
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.recommended-card-overlay .score-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25rem;
}
.recommended-card-overlay .score-badge {
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-weight: 500;
}
.recommended-card-overlay .recommendation-score {
background-color: rgba(var(--cc-green-rgb), 0.9);
color: var(--cc-black);
}
.recommended-card-overlay .overall-rating {
background-color: rgba(var(--cc-green-rgb), 0.9);
color: var(--cc-black);
}
/* -------------------------------------------------------------------------
FollowerService: cult-leader badge overlay + follow button + followed feed.
Reuses the recommended-card styles; adds a leader badge near the top of a
card and a subtly animated follow toggle. All motion is gated behind
prefers-reduced-motion for accessibility.
------------------------------------------------------------------------- */
.leader-badge-overlay {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 2;
max-width: calc(100% - 1rem);
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.3rem 0.55rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--cc-black, #111);
background-color: rgba(var(--cc-green-rgb), 0.92);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
animation: leaderBadgeIn 0.35s ease both;
}
.leader-badge-overlay .leader-badge-name {
max-width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* When the badge links to the leader's landing page, keep it visually identical
to the static badge but interactive (no underline, subtle hover lift). */
a.leader-badge-overlay,
a.leader-badge-overlay:hover,
a.leader-badge-overlay:focus {
color: var(--cc-black, #111);
text-decoration: none;
}
a.leader-badge-overlay {
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
a.leader-badge-overlay:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
}
a.leader-badge-overlay:focus-visible {
outline: 2px solid var(--cc-black, #111);
outline-offset: 2px;
}
@keyframes leaderBadgeIn {
from {
opacity: 0;
transform: translateY(-6px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Follow toggle button (Top Points rows + cult-leader hero). */
.follow-btn {
--follow-accent: var(--mdb-warning, #ffc107);
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.follow-btn:hover {
transform: translateY(-1px);
}
.follow-btn:active {
transform: translateY(0) scale(0.97);
}
.follow-btn .follow-btn-icon {
transition: transform 0.2s ease;
}
.follow-btn[aria-pressed='true'] .follow-btn-icon {
transform: scale(1.1);
}
/* Brief confirmation pulse when a follow toggles on. */
.follow-btn.follow-btn--just-followed {
animation: followPulse 0.45s ease;
}
@keyframes followPulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.12);
}
100% {
transform: scale(1);
}
}
.follow-btn[disabled],
.follow-btn.is-busy {
opacity: 0.65;
cursor: progress;
pointer-events: none;
}
/* Loading sentinel shared by the newest-rated + followed-leaders endless scrolls. */
.followed-feed-sentinel,
.rated-feed-sentinel {
flex: 0 0 auto;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
padding: 0 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;
}
.followed-feed-sentinel.is-loading,
.rated-feed-sentinel.is-loading {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.leader-badge-overlay,
a.leader-badge-overlay,
.follow-btn,
.follow-btn .follow-btn-icon,
.follow-btn.follow-btn--just-followed,
.followed-feed-sentinel,
.rated-feed-sentinel {
animation: none !important;
transition: none !important;
}
}
/* Follow / unfollow confirmation dialog (cult-leader directory). */
.follow-confirm-modal {
border-radius: 1rem;
overflow: hidden;
}
.follow-confirm-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--mdb-warning, #ffc107);
color: #1c1c1c;
font-size: 1.75rem;
font-weight: 700;
text-transform: uppercase;
}
.follow-confirm-message {
opacity: 0.85;
line-height: 1.5;
}
#product-scroller > article {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.simple-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
background-color: var(--cc-charcoal);
}
.simple-card-footer {
padding: 0.75rem 1rem;
background-color: var(--cc-surface-2);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
.recommended-card-overlay {
height: 45%;
max-height: 45%;
}
}
.recommended-card-body {
padding: 0.75rem;
background-color: #fff;
flex: 1;
display: flex;
flex-direction: column;
}
.recommended-card-meta {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.recommended-card-meta .badge {
font-size: 0.7rem;
font-weight: 500;
}
.recommended-card-ratings {
margin-bottom: 0.5rem;
}
.recommended-card-ratings .rating-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
padding: 0.15rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.recommended-card-ratings .rating-row:last-child {
border-bottom: none;
}
.recommended-card-ratings .rating-label {
color: #6c757d;
}
.recommended-card-ratings .rating-value {
font-weight: 600;
color: var(--cc-black);
}
.recommended-card-terpenes {
margin-top: auto;
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.recommended-card-terpenes .terpene-title {
font-size: 0.7rem;
color: #6c757d;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.recommended-card-terpenes .terpene-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.recommended-card-terpenes .terpene-chip {
font-size: 0.65rem;
padding: 0.1rem 0.35rem;
background-color: rgba(var(--cc-green-rgb), 0.15);
color: var(--cc-black);
border-radius: 3px;
}
.recommended-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
color: #6c757d;
}
.recommended-empty-state i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.recommended-login-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.recommended-login-prompt i {
font-size: 2.5rem;
color: var(--cc-green);
margin-bottom: 1rem;
}
.recommended-card-topfeatures {
margin-bottom: 0.5rem;
}
.recommended-card-topfeatures .topfeature-title {
font-size: 0.7rem;
color: #6c757d;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.recommended-card-topfeatures .rating-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
padding: 0.15rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.recommended-card-topfeatures .rating-row:last-child {
border-bottom: none;
}
.recommended-card-topfeatures .rating-label {
color: #6c757d;
}
.recommended-card-topfeatures .rating-value {
font-weight: 600;
color: var(--cc-black);
}
/* Dark mode support */
[data-mdb-theme="dark"] .recommended-product-card {
background-color: var(--cc-charcoal);
}
[data-mdb-theme="dark"] .recommended-card-body {
background-color: var(--cc-charcoal);
}
[data-mdb-theme="dark"] .recommended-card-ratings .rating-value {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .recommended-card-terpenes .terpene-chip {
background-color: rgba(var(--cc-green-rgb), 0.18);
color: var(--cc-green);
}
[data-mdb-theme="dark"] .recommended-empty-state,
[data-mdb-theme="dark"] .recommended-login-prompt {
color: var(--cc-muted);
}
[data-mdb-theme="dark"] .recommended-login-prompt i {
color: var(--cc-green);
}
[data-mdb-theme="dark"] .recommended-card-topfeatures .rating-value {
color: var(--cc-bone);
}
/* Responsive adjustments */
@media (max-width: 576px) {
.recommended-product-card {
width: 260px;
min-height: 400px;
}
.recommended-card-image-container {
height: 200px;
}
}
@media (min-width: 992px) {
.recommended-product-card {
width: 300px;
min-height: 440px;
}
.recommended-card-image-container {
height: 240px;
}
}
[data-mdb-theme="dark"] .navy-color-parent * {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .cult-picks h1 {
color: var(--cc-green);
text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
[data-mdb-theme="dark"] .map-locator {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .container-glass {
background-color: rgba(var(--cc-charcoal-rgb), 0.7);
border: 1px solid rgba(var(--cc-bone-rgb), 0.12);
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .vote-template {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .vote-template .card {
background: url("../img/card-assets/smoky-black-background.svg") no-repeat center center !important;
background-size: cover;
}
[data-mdb-theme="dark"] .vote-template .card-title,
[data-mdb-theme="dark"] .vote-template .card-subtitle {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .btn-purple {
background-color: var(--cc-surface-2);
}
[data-mdb-theme="dark"] .custom-gradient-button {
background: linear-gradient(to right, var(--cc-surface-2), var(--cc-charcoal));
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .custom-gradient-button:hover,
[data-mdb-theme="dark"] .custom-gradient-button:focus,
[data-mdb-theme="dark"] .custom-gradient-button:active {
color: var(--cc-pink);
}
[data-mdb-theme="dark"] .email-input-field,
[data-mdb-theme="dark"] input,
[data-mdb-theme="dark"] select {
border: 1px solid var(--cc-border) !important;
background-color: var(--cc-charcoal);
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .rating-scale-label {
color: var(--cc-muted);
}
[data-mdb-theme="dark"] #allContent::after {
background-color: rgba(var(--cc-black-rgb), 0.85);
}
/* Force dark "glass" cards on campaign / product-line pages so legacy
inline white backgrounds keep a dark-mode feel and readable contrast. */
[data-mdb-theme="dark"] #allContent .card {
background: rgba(var(--cc-charcoal-rgb), 0.72) !important;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
color: var(--cc-bone);
}
/* Legacy campaign markup applies Bootstrap `.text-dark` to titles and
strain links that used to sit on white glass cards. Now that those
surfaces are dark, force that text light so it stays readable (WCAG). */
[data-mdb-theme="dark"] #allContent .text-dark,
[data-mdb-theme="dark"] #allContent .text-black {
color: var(--cc-bone) !important;
}
[data-mdb-theme="dark"] hr.divider-vertical {
background-image: linear-gradient(180deg, transparent, #444, transparent);
}
[data-mdb-theme="dark"] .btn-secondary,
[data-mdb-theme="dark"] .btn-outline-secondary {
background-color: var(--cc-surface-2) !important;
color: var(--cc-bone) !important;
border-color: var(--cc-border) !important;
}
[data-mdb-theme="dark"] .btn-secondary:disabled,
[data-mdb-theme="dark"] .btn-outline-secondary:disabled {
background-color: #333333 !important;
color: var(--cc-muted) !important;
border-color: var(--cc-border) !important;
}
[data-mdb-theme="dark"] .custom-navbar {
background-color: var(--cc-black) !important;
border-bottom: 1px solid var(--cc-charcoal);
}
[data-mdb-theme="dark"] .custom-navbar .nav-link {
color: var(--cc-bone) !important;
}
[data-mdb-theme="dark"] .custom-navbar .nav-link.active,
[data-mdb-theme="dark"] .custom-navbar .nav-link:focus,
[data-mdb-theme="dark"] .custom-navbar .nav-link:hover {
color: var(--cc-pink) !important;
}
[data-mdb-theme="dark"] .custom-navbar .form-control {
background-color: var(--cc-charcoal);
color: var(--cc-bone);
border: 1px solid var(--cc-border);
}
[data-mdb-theme="dark"] .custom-navbar .dropdown-menu {
background-color: var(--cc-charcoal);
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .custom-navbar .navbar-nav svg path {
fill: var(--cc-green) !important;
}
[data-mdb-theme="dark"] .cc-hamburger {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .site-footer {
background-color: var(--cc-black);
}
[data-mdb-theme="dark"] .site-footer .support-text {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .site-footer .footer-social-btn {
background-color: var(--cc-pink) !important;
}
[data-mdb-theme="dark"] .site-footer .footer-copyright-row {
background-color: var(--cc-charcoal);
}
[data-mdb-theme="dark"] .site-footer .footer-copyright,
[data-mdb-theme="dark"] .site-footer .footer-brandkit-link {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .site-footer .footer-brandkit-link {
color: var(--cc-muted) !important;
}
/* lineage graph container sizing */
.lineage-section {
min-height: 400px; /* fallback for small screens */
}
.lineage-container {
flex: 1 1 auto;
width: 100%;
min-height: 400px;
max-width: 1200px; /* optional if you want centered width cap */
}
/* Let the chart fill its container completely */
#lineageChart {
width: 100%;
height: 100%;
min-height: 400px; /* ensure initial render space */
}
@media (min-width: 768px) {
.lineage-container,
#lineageChart {
min-height: 480px;
}
}
@media (min-width: 1200px) {
.lineage-container,
#lineageChart {
min-height: 600px;
}
}
#strain-graph {
width: 100%;
min-height: 360px; /* mobile first */
}
@media (min-width: 576px) {
#strain-graph { min-height: 420px; }
}
@media (min-width: 992px) {
#strain-graph { min-height: 540px; }
}
#strain-graph:focus {
outline: 2px solid var(--cc-pink);
outline-offset: 2px;
}
.cc-file-upload {
position: relative;
border: 2px dashed rgba(0,0,0,.15);
border-radius: .5rem;
padding: 1rem;
background-color: rgba(0,0,0,.02);
}
.cc-file-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.cc-file-drop {
display: grid;
place-items: center;
min-height: 140px;
pointer-events: none;
text-align: center;
}
.cc-file-upload.dragover {
border-color: rgba(var(--cc-pink-rgb), .6);
background-color: rgba(var(--cc-pink-rgb), .05);
}
.cc-file-list {
margin-top: .75rem;
display: grid;
gap: .5rem;
}
.cc-file-item {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: .75rem;
align-items: center;
border: 1px solid rgba(0,0,0,.08);
border-radius: .5rem;
padding: .5rem;
background: #fff;
}
.cc-file-thumb {
width: 56px;
height: 56px;
border-radius: .5rem;
object-fit: cover;
background: rgba(0,0,0,.04);
}
.cc-file-meta {
line-height: 1.2;
}
.cc-file-name { font-weight: 600; }
.cc-file-size { font-size: .85rem; color: #6c757d; }
.cc-file-remove.btn {
--mdb-btn-padding-y: .25rem;
--mdb-btn-padding-x: .5rem;
--mdb-btn-font-size: .85rem;
}
.cc-file-error { margin-top: .5rem; }
/* Dark-mode treatment for the file uploader so it matches the
always-on dark theme instead of rendering white panels. */
[data-mdb-theme="dark"] .cc-file-upload {
border-color: rgba(var(--cc-bone-rgb), .18);
background-color: rgba(var(--cc-bone-rgb), .03);
}
[data-mdb-theme="dark"] .cc-file-upload.dragover {
border-color: rgba(var(--cc-pink-rgb), .7);
background-color: rgba(var(--cc-pink-rgb), .08);
}
[data-mdb-theme="dark"] .cc-file-item {
background: var(--cc-surface-2);
border-color: var(--cc-border);
}
[data-mdb-theme="dark"] .cc-file-thumb {
background: rgba(var(--cc-bone-rgb), .06);
}
.vh-75 {
height: 75vh;
}
.vh-80 {
height: 80vh;
}
.vh-90 {
height: 90vh;
}
#ratingCommentRows {
transition: max-height 0.35s ease, opacity 0.35s ease;
overflow: hidden;
}
#ratingCommentRows.is-collapsed {
max-height: 0;
opacity: 0;
pointer-events: none;
}
#ratingCommentRows.is-expanded {
max-height: 500px;
opacity: 1;
}
.btn-action {
position: relative;
transition:
transform 120ms ease,
box-shadow 120ms ease,
filter 120ms ease;
will-change: transform;
}
.btn-action:active {
transform: scale(0.96);
box-shadow: 0 2px 6px rgba(0,0,0,0.25) inset;
filter: brightness(0.95);
}
.btn-action {
-webkit-tap-highlight-color: transparent;
}
.merge-product-card {
cursor: pointer;
transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
border: 2px solid transparent;
}
.merge-product-card:hover,
.merge-product-card:focus {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-1px);
outline: none;
}
.merge-product-card-selected {
border-color: var(--cc-pink);
box-shadow: 0 0 0 3px rgba(var(--cc-pink-rgb), 0.15);
}
.merge-card-thumb {
height: 100%;
width: 100%;
object-fit: cover;
min-height: 110px;
max-height: 160px;
}
.merge-card-meta-row + .merge-card-meta-row {
border-top: 1px dashed rgba(0,0,0,0.05);
padding-top: 2px;
margin-top: 2px;
}
.merge-card-id {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
word-break: break-all;
}
.merge-step-indicator [data-step-pill].active {
background-color: var(--cc-charcoal) !important;
color: var(--cc-bone) !important;
}
.merge-step-indicator [data-step-pill].done {
background-color: var(--cc-green) !important;
color: var(--cc-black) !important;
}
/* -------------------------------------------------------------------------
Cult-leader directory: condensed "Top Rated" product card.
A compact, horizontal derivative of the recommended/rated-strain card that
sits below each leader's stat tiles. Reuses the app's card language (surface,
radius, green accent) while staying fluid at every breakpoint. All motion is
gated behind prefers-reduced-motion.
------------------------------------------------------------------------- */
.leader-top-product {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 0.75rem;
background-color: var(--mdb-surface-bg, #fff);
border: 1px solid rgba(0, 0, 0, 0.06);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Slim accent rail that grows in from the leading edge on hover/focus. */
.leader-top-product::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--cc-green), rgba(var(--cc-green-rgb), 0.4));
transform: scaleY(0.35);
transform-origin: center;
transition: transform 0.2s ease;
}
.leader-top-product:hover,
.leader-top-product:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border-color: rgba(var(--cc-green-rgb), 0.4);
color: inherit;
}
.leader-top-product:hover::before,
.leader-top-product:focus-visible::before {
transform: scaleY(1);
}
.leader-top-product:focus-visible {
outline: 2px solid rgba(var(--cc-green-rgb), 0.6);
outline-offset: 2px;
}
.leader-top-product-media {
position: relative;
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 0.6rem;
overflow: hidden;
}
.leader-top-product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.leader-top-product:hover .leader-top-product-img {
transform: scale(1.08);
}
.leader-top-product-score {
position: absolute;
bottom: 2px;
right: 2px;
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.1rem 0.35rem;
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
color: var(--cc-black, #111);
background-color: rgba(var(--cc-green-rgb), 0.92);
border-radius: 999px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.leader-top-product-score .fa-star {
font-size: 0.6rem;
}
.leader-top-product-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.leader-top-product-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cc-green);
margin-bottom: 0.1rem;
}
.leader-top-product-strain {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leader-top-product-cultivator {
font-size: 0.75rem;
line-height: 1.2;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leader-top-product-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.3rem;
}
.leader-top-product-badge {
font-size: 0.6rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
color: var(--cc-black, #111);
background-color: rgba(var(--cc-green-rgb), 0.15);
}
.leader-top-product-chevron {
flex: 0 0 auto;
font-size: 0.75rem;
opacity: 0.4;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.leader-top-product:hover .leader-top-product-chevron,
.leader-top-product:focus-visible .leader-top-product-chevron {
opacity: 0.9;
transform: translateX(3px);
}
[data-mdb-theme="dark"] .leader-top-product {
background-color: rgba(var(--cc-charcoal-rgb), 0.6);
border-color: rgba(var(--cc-bone-rgb), 0.12);
}
[data-mdb-theme="dark"] .leader-top-product-strain {
color: var(--cc-bone);
}
[data-mdb-theme="dark"] .leader-top-product-badge {
background-color: rgba(var(--cc-green-rgb), 0.2);
color: var(--cc-green);
}
/* A touch more room for the thumbnail on wide (lg+) directory cards. */
@media (min-width: 992px) {
.leader-top-product-media {
width: 72px;
height: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.leader-top-product,
.leader-top-product::before,
.leader-top-product-img,
.leader-top-product-chevron {
transition: none !important;
}
.leader-top-product:hover,
.leader-top-product:focus-visible,
.leader-top-product:hover .leader-top-product-img {
transform: none;
}
}
/* -------------------------------------------------------------------------
Rated-product card grids (components/cards/rated_products_card.html).
Shared by the top-rated / my-ratings / cult-leader card sections. All new
selectors are namespaced `rated-cards-*` / `rated-card-*` /
`.rated-product-card` to avoid colliding with the recommended-card family,
whose inner styles (image overlay, meta badges, top features, terpenes)
these cards deliberately reuse.
------------------------------------------------------------------------- */
.rated-cards-toolbar {
background-color: var(--mdb-surface-bg, rgba(255, 255, 255, 0.03));
border: 1px solid rgba(128, 128, 128, 0.25);
border-radius: 1rem;
padding: 1rem;
}
/* Top controls row: Reset + Hide Filters share the width above the filters. */
.rated-cards-toolbar-controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.rated-cards-toolbar-controls .rated-cards-toolbar-btn {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
}
/* Collapsed state: a single full-width, centered "Show Filters" button. */
.rated-cards-show-filters {
text-align: center;
}
/* Filters + sort flow exactly three-per-row on every screen size (col-4). The
columns are allowed to shrink (min-width:0) and the MDB select display text
is clipped so the row can never force horizontal overflow/scroll. */
.rated-cards-filter-grid > [class*='col-'] {
min-width: 0;
}
.rated-cards-filter-grid .form-outline,
.rated-cards-filter-grid .form-outline .form-control,
.rated-cards-filter-grid .select-input {
min-width: 0;
max-width: 100%;
}
.rated-cards-filter-grid .select-input {
text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
.rated-cards-toolbar {
padding: 0.75rem;
}
.rated-cards-filter-grid .form-label,
.rated-cards-filter-grid .select-input {
font-size: 0.8rem;
}
}
/* Horizontal, page-snapped track: swipe (touch), drag (mouse), or use the
pager to move between pages of cards. */
.rated-cards-track {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
cursor: grab;
outline-offset: 4px;
}
.rated-cards-track.is-dragging {
scroll-snap-type: none;
cursor: grabbing;
user-select: none;
}
.rated-cards-track::-webkit-scrollbar {
height: 0.5rem;
}
.rated-cards-track::-webkit-scrollbar-track {
background: rgba(128, 128, 128, 0.15);
border-radius: 999px;
}
.rated-cards-track::-webkit-scrollbar-thumb {
background: rgba(var(--cc-green-rgb), 0.6);
border-radius: 999px;
}
/* One "page" of the grid: 3-5 responsive columns x up to 5 rows on md+ (the
JS sets --rated-cards-cols from the available width), 5 stacked cards on
small screens. */
.rated-cards-page {
flex: 0 0 100%;
max-width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
display: grid;
grid-template-columns: repeat(var(--rated-cards-cols, 4), minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
padding: 0.25rem 0.25rem 1rem;
}
@media (max-width: 767.98px) {
.rated-cards-page {
grid-template-columns: minmax(0, 1fr);
}
}
.rated-cards-pager {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.5rem 0;
}
.rated-cards-pager-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0;
white-space: nowrap;
}
.rated-cards-pager-label .form-select {
width: auto;
min-width: 4.25rem;
}
/* Card root: grid-friendly (fluid width) versions of the recommended-card
look, plus the 3D flip scene. */
.rated-product-card {
min-width: 0;
perspective: 1600px;
transition: transform 0.2s ease;
}
.rated-product-card:hover {
transform: translateY(-4px);
}
.rated-card-flip {
display: grid;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rated-card-flip.is-flipped {
transform: rotateY(180deg);
}
/* Both faces share the single grid cell so the card is always as tall as its
tallest face — no absolute positioning, no clipped content. */
.rated-card-face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: 12px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.rated-card-face--back {
transform: rotateY(180deg);
}
.rated-card-face .recommended-card-image-container {
height: 190px;
}
.rated-card-face-tag {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
background-color: rgba(0, 0, 0, 0.65);
color: #fff;
font-weight: 600;
letter-spacing: 0.03em;
}
.rated-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rated-card-body > * {
margin-bottom: 0;
}
.rated-card-datesrow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.rated-card-notes .rated-card-notes-text {
font-size: 0.78rem;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rated-card-effects .terpene-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.rated-card-effect-chip {
font-size: 0.65rem;
padding: 0.1rem 0.35rem;
background-color: rgba(13, 202, 240, 0.15);
color: var(--cc-black);
border-radius: 3px;
}
.rated-card-actions {
display: flex;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.5rem;
}
.rated-card-actions .btn {
flex: 1 1 0;
white-space: nowrap;
}
/* Dark mode */
[data-mdb-theme="dark"] .rated-card-face {
background-color: var(--cc-charcoal);
}
[data-mdb-theme="dark"] .rated-card-effect-chip {
background-color: rgba(13, 202, 240, 0.18);
color: var(--mdb-info);
}
[data-mdb-theme="dark"] .rated-cards-toolbar {
border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
.rated-cards-track {
scroll-behavior: auto;
}
.rated-product-card,
.rated-card-flip {
transition: none !important;
}
}
/* The [hidden] attribute must always win inside a rated-cards section — several
hosts (spinner, track, pager, empty state) otherwise carry display:flex from
utility or component classes. */
.rated-cards-section [hidden] {
display: none !important;
}