/* ======================================================= Card Layouts — Services & Products Save as: assets/css/cards.css Link after main.css in : ======================================================= */ /* ------------------------------------------------------- CSS variables — adjust accent to match your Landed build ------------------------------------------------------- */ :root { --c-accent: var(--color-accent); --c-card-bg: rgba(var(--color-white-rgb), 0.04); --c-card-border: rgba(var(--color-white-rgb), 0.1); --c-card-muted: rgba(var(--color-white-rgb), 0.55); --c-card-radius: 6px; --c-card-pad: 2em; --c-card-gap: 1.5em; --c-pkg-bg: rgba(var(--color-white-rgb), 0.07); --c-pkg-text: var(--color-text); --c-pkg-muted: rgba(var(--color-white-rgb), 0.65); --c-pkg-border: rgba(var(--color-white-rgb), 0.12); } /* Light-background sections (wrapper style1 in Landed) */ .wrapper.style1 { --c-card-bg: var(--color-surface); --c-card-border: rgba(var(--color-white-rgb), 0.08); --c-card-muted: rgba(var(--color-white-rgb), 0.55); --c-pkg-bg: var(--color-surface-alt); --c-pkg-text: var(--color-text); --c-pkg-muted: rgba(var(--color-white-rgb), 0.65); --c-pkg-border: rgba(var(--color-white-rgb), 0.12); } /* ------------------------------------------------------- Grid container ------------------------------------------------------- */ .llc-cards { display: grid; gap: var(--c-card-gap); width: 100%; margin: 2em 0 0; } .llc-cards--3col { grid-template-columns: repeat(3, 1fr); } .llc-cards--2col { grid-template-columns: repeat(2, 1fr); } .llc-cards--1col { grid-template-columns: minmax(0, 620px); justify-content: center; } /* ------------------------------------------------------- Base card ------------------------------------------------------- */ .llc-card { background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: var(--c-card-radius); padding: var(--c-card-pad); display: flex; flex-direction: column; gap: 0.6em; } /* ------------------------------------------------------- Card internals ------------------------------------------------------- */ .llc-card__icon { font-size: 1.75em; line-height: 1; display: block; margin-bottom: 0.15em; } /* Override Landed heading margins/borders inside cards */ .llc-card .llc-card__title { font-size: 1.05em; font-weight: 700; margin: 0; padding: 0; border: none; } .llc-card__tagline { font-size: 0.875em; color: var(--c-card-muted); margin: 0; font-style: italic; line-height: 1.5; } .llc-card__list { list-style: none; padding: 0; margin: 0.25em 0; flex: 1; } .llc-card__list li { position: relative; padding: 0.4em 0 0.4em 1.5em; font-size: 0.875em; line-height: 1.5; border-bottom: 1px solid var(--c-card-border); } .llc-card__list li:last-child { border-bottom: none; } .llc-card__list li::before { content: "→"; position: absolute; left: 0; color: var(--c-accent); } .llc-card__pricing { margin-top: auto; padding-top: 0.875em; border-top: 1px solid var(--c-card-border); font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent); } /* ------------------------------------------------------- Package / bundle highlight card ------------------------------------------------------- */ .llc-card-highlight { border-left: 3px solid var(--c-accent); background: var(--c-pkg-bg); } .llc-card-highlight .llc-card__title { color: var(--c-pkg-text, inherit); } .llc-card-highlight .llc-card__tagline { color: var(--c-pkg-muted, var(--c-card-muted)); } .llc-card-highlight .llc-card__list li { color: var(--c-pkg-text, inherit); border-bottom-color: var(--c-pkg-border, var(--c-card-border)); } .llc-card-highlight .llc-card__list li::before { content: "✓"; } .llc-card-highlight .llc-card__pricing { border-top-color: var(--c-pkg-border, var(--c-card-border)); } /* ------------------------------------------------------- Product card status badges ------------------------------------------------------- */ .llc-card__badge { display: inline-block; align-self: flex-start; font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3em 0.85em; border-radius: 2em; margin-bottom: 0.15em; } .llc-card__badge--development { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid var(--c-warning-border); } .llc-card__badge--roadmap { background: var(--c-roadmap-bg); color: var(--c-accent); border: 1px solid var(--c-roadmap-border); } .llc-card__description { font-size: 0.875em; line-height: 1.65; color: var(--c-card-muted); flex: 1; margin: 0; } /* Notify Me / product CTA button */ .llc-card__cta { display: inline-block; align-self: flex-start; margin-top: 0.75em; padding: 0.55em 1.35em; border-radius: 4px; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 2px solid var(--c-accent); color: var(--c-accent); transition: background 0.2s ease, color 0.2s ease; cursor: pointer; } .llc-card__cta:hover { background: var(--c-accent); color: var(--color-text) !important; } /* ------------------------------------------------------- Responsive breakpoints — mirrors Landed's own breakpoints ------------------------------------------------------- */ @media screen and (max-width: 980px) { .llc-cards--3col { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 640px) { .llc-cards--3col, .llc-cards--2col { grid-template-columns: 1fr; } .llc-cards--1col { grid-template-columns: 1fr; } .llc-card { padding: 1.5em; } }