/* ------------------------------------------------------------------ KNDev Token Bindings (Bootstrap / PrestaShop) ------------------------------------------------------------------ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap"); @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"); /* ------------------------------------------------------------------ KNDev Design Tokens (fallback defaults) ------------------------------------------------------------------ */ :root{ These are DEFAULTS (from themes/kndev_theme/config/themevars.json). The kndev_themeconfigurator module should inject overrides later in via :root{--knd-...} to replace only what’s changed. */ /* Brand */ --knd-brand-primary:#097678; --knd-brand-accent:#2aa6a0; --knd-brand-danger:#c60021; --knd-brand-success:#16a34a; --knd-brand-warning:#f59e0b; --knd-brand-info:#0ea5e9; /* Neutral */ --knd-neutral-0:#ffffff; --knd-neutral-50:#f9f9f9; --knd-neutral-100:#f5f5f5; --knd-neutral-200:#e5e5e5; --knd-neutral-300:#d5d5d5; --knd-neutral-700:#374151; --knd-neutral-900:#111827; /* Typography */ --knd-font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --knd-font-heading:"Montserrat","Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --knd-base-size: 16px; --knd-ext-size: 20px; --knd-large-size: 28px; --knd-line-height: 1.5; /* Radius */ --knd-radius-xs: 6px; --knd-radius-sm: 10px; --knd-radius-md: 12px; --knd-radius-lg: 16px; --knd-radius-xl: 24px; --knd-radius: var(--knd-radius-md); /* Shadow */ --knd-shadow-card: 0 10px 30px rgba(0,0,0,.08); --knd-shadow-soft: 0 6px 18px rgba(0,0,0,.06); --knd-shadow: var(--knd-shadow-card); /* Buttons */ --knd-btn-primary-bg: #097678; --knd-btn-primary-text: #ffffff; --knd-btn-primary-bg-hover: #0a8a8c; --knd-btn-primary-text-hover: #ffffff; --knd-btn-secondary-bg: #111827; --knd-btn-secondary-text: #ffffff; --knd-btn-secondary-bg-hover: #1f2937; --knd-btn-secondary-text-hover: #ffffff; --knd-btn-tertiary-bg: transparent; --knd-btn-tertiary-text: #097678; --knd-btn-tertiary-bg-hover: rgba(9,118,120,.08); --knd-btn-tertiary-text-hover: #097678; --knd-btn-radius: var(--knd-radius); --knd-btn-padding-y: .8rem; --knd-btn-padding-x: 1.15rem; /* Boxes */ --knd-box-bg-color: #f5f5f5; --knd-box-border-color: #e5e7eb; --knd-box-border-width: 1px; /* Assets */ --knd-logo-path: "assets/img/knd-logo.png"; /* Home */ --knd-dklift-red: var(--knd-brand-danger, #c60021); --knd-dklift-dark: #0b1220; --knd-dklift-hero-radius: var(--knd-radius-xl, 24px); } /* Typography + base colors */ html { font-size: calc(var(--knd-font-size-base, 16) * 1px); scroll-behavior: smooth; } body{ font-family: var(--knd-font-body); color: var(--knd-neutral-900); background: var(--knd-neutral-0); line-height: var(--knd-line-height, 1.55); } h1,h2,h3,h4,h5,h6{ font-family: var(--knd-font-heading); color: var(--knd-neutral-900); } a{ color: var(--knd-brand-primary); text-decoration: none; } a:hover{ color: var(--knd-brand-accent); text-decoration: underline; } /* Buttons (Bootstrap) */ .btn{ border-radius: var(--knd-radius); box-shadow: none; padding: .5rem 1rem; } /* Primary */ .btn-primary{ background: var(--knd-btn-primary-bg); color: var(--knd-btn-primary-text); border-color: var(--knd-btn-primary-border, transparent); } .btn-primary:hover, .btn-primary:focus{ background: var(--knd-btn-primary-bg-hover); color: var(--knd-btn-primary-text-hover); border-color: var(--knd-btn-primary-border, transparent); } .btn-primary:disabled, .btn-primary.disabled{ opacity: .6; } /* Secondary */ .btn-secondary{ background: var(--knd-btn-secondary-bg); color: var(--knd-btn-secondary-text); border-color: var(--knd-btn-secondary-border, transparent); } .btn-secondary:hover, .btn-secondary:focus{ background: var(--knd-btn-secondary-bg-hover); color: var(--knd-btn-secondary-text-hover); } /* Tertiary / outline-like */ .btn-tertiary, .btn-outline-primary{ background: var(--knd-btn-tertiary-bg); color: var(--knd-btn-tertiary-text); border-color: var(--knd-brand-primary); } .btn-tertiary:hover, .btn-outline-primary:hover{ background: var(--knd-btn-tertiary-bg-hover); color: var(--knd-btn-tertiary-text-hover); } /* Forms */ .form-control, .custom-select, .input-group-text{ border-radius: var(--knd-radius); } .form-control:focus{ border-color: var(--knd-brand-primary); box-shadow: 0 0 0 .15rem rgba(9,118,120,.15); } /* Cards / panels */ .card, .block, .checkout-step{ /* background: var(--knd-box-bg-color); */ border: var(--knd-box-border-width) solid var(--knd-box-border-color); border-radius: var(--knd-radius); box-shadow: var(--knd-shadow-soft); } .main-menu { justify-content: flex-end; } @media (max-width:1199px) { .main-menu { order: 2; } } .header-top { background: var(--knd-neutral-100); } .header-bottom .navbar-brand .logo { max-width: 225px; } /* Mobil header: kun logo + burger */ .knd-header-mobile { padding: .6rem .25rem; } .knd-header-mobile__logo img { height: 50px; width: auto; display: block; } .knd-header-mobile__burger { border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 12px; padding: .5rem .6rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .knd-header-mobile__burger .material-icons { font-size: 26px; color: var(--knd-neutral-900); } /* Offcanvas menu styling */ .knd-mobilemenu { width: min(90vw, 360px); } .knd-mobilemenu__title { font-family: var(--knd-font-heading); font-weight: 800; color: var(--knd-neutral-900); } .breadcrumb__wrapper { background: var(--knd-neutral-0); } .knd-block__list .fa-solid { color: var(--knd-brand-danger); } .knd-card.block-category { margin-bottom: 2rem; } #product .knd-card_justify { justify-content: center; } #product .knd-card_no_border { border: none!important; box-shadow: none!important; } .product-miniature .product-miniature__title { font-size: 1.5rem; font-weight: 600; } .knd_cat_features { margin: .5rem 0; padding: .25rem 0; border-top: 1px solid var(--knd-neutral-200); border-bottom: 1px solid var(--knd-neutral-200); } /* ------------------------------------------------------------------ Generic section ------------------------------------------------------------------ */ .knd-section{ padding: 2.5rem 0; margin: 2rem 0; } .knd-section__header{ margin-bottom: 1.25rem; } .knd-mt-lg{ margin-top: 1.25rem; } /* Headings */ .knd-h1{ font-weight: 800; margin: 0 0 .5rem; line-height: 1.1; } .knd-h2{ font-weight: 800; margin: 0 0 .75rem; line-height: 1.2; } /* Intro text */ .knd-lead{ margin: 0 0 .35rem; font-size: 1.1rem; opacity: .9; } .knd-sublead{ margin: 0; opacity: .85; } /* Grid */ .knd-grid{ display: grid; gap: 1rem; } .knd-grid--2{ grid-template-columns: 1fr 1fr; } @media (max-width: 991px){ .knd-grid--2{ grid-template-columns: 1fr; } } /* Equal height columns helper */ .knd-grid--eq { align-items: stretch; } .knd-grid--eq > * { height: 100%; } /* Media card */ .knd-card--media{ padding: 0; /* ingen indvendig padding til billede */ overflow: hidden; } /* Image helpers */ .knd-img{ display:block; width:100%; height:100%; } .knd-img--cover{ object-fit: cover; min-height: 320px; } @media (max-width: 991px){ .knd-img--cover{ min-height: 220px; } } /* Card */ .knd-card{ border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 1rem; background: #fff; display:flex; flex-direction:column; } /* Center text card */ .knd-card--center{ /* justify-content:center; text-align:center; */ } .knd-card__body{ width:100%; max-width: 54ch; /* så teksten ikke bliver for bred */ margin: 0 auto; } /* Mobil */ @media (max-width: 991px){ .knd-img--cover{ min-height: 220px; } .knd-card--center{ text-align:left; } /* ofte pænere på mobil */ .knd-card__body{ max-width: none; } } /* Rich text */ .knd-richtext p{ margin: 0 0 .75rem; } .knd-richtext p:last-child{ margin-bottom: 0; } /* Block with text left / image right */ @media (max-width: 991px){ .knd-block-img_right { order: 1; } .knd-block-txt_left { order: 2; } } /* ------------------------------------------------------------------ Generic block ------------------------------------------------------------------ */ .knd-block { border-top: 1px solid var(--knd-neutral-0); background: var(--knd-neutral-0); padding: 4rem 0; } .knd-block-bg100 { background: var(--knd-neutral-100); } .knd-block__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; } .knd-block_card { height: 100%; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); background: #fff; padding: 1rem; } .knd-block__title{ font-family: var(--knd-font-heading); font-weight: 700; font-size: 0.95rem; letter-spacing: .02em; margin-bottom: .9rem; color: var(--knd-neutral-900); } .knd-block__item{ display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .65rem; color: var(--knd-neutral-700); font-size: 0.95rem; line-height: 1.5; } .knd-block__icon{ margin-top: .15rem; width: 2rem; min-width: 1.1rem; color: var(--knd-neutral-700); } .knd-block__list{ list-style: none; padding: 0; margin: 0; } .knd-block__list li{ font-size: var(--knd-ext-size); margin-bottom: .55rem; } .knd-block__link{ color: var(--knd-neutral-700); text-decoration: none; } .knd-block__link:hover{ color: var(--knd-brand-primary); text-decoration: none; } .knd-block__bottom{ margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--knd-neutral-200); color: var(--knd-neutral-700); font-size: .9rem; } .knd-block__link{ transition: color .2s ease; } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ .footer .footer__main { background: var(--knd-neutral-200); padding-top: .5rem; } .knd-footer{ border-top: 1px solid var(--knd-neutral-200); /* background: var(--knd-neutral-700); */ padding: 2.5rem 0 1.25rem; } .knd-footer .row.knd-footer__grid{ margin-left: 0; margin-right: 0; } .knd-footer__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); background: #fff; } .knd-footer_card { height: 100%; display: flex; flex-direction: column; padding: 1rem; } .knd-footer__title{ font-family: var(--knd-font-heading); font-weight: 700; font-size: 0.95rem; letter-spacing: .02em; margin-bottom: .9rem; color: var(--knd-neutral-900); } .knd-footer__item{ display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .65rem; color: var(--knd-neutral-700); font-size: 0.95rem; line-height: 1.5; } .knd-footer__icon{ margin-top: .15rem; width: 2rem; min-width: 1.1rem; color: var(--knd-neutral-700); } .knd-footer__list{ list-style: none; padding: 0; margin: 0; } .knd-footer__list li{ margin-bottom: .55rem; } .knd-footer__link{ color: var(--knd-neutral-700); text-decoration: none; } .knd-footer__link:hover{ color: var(--knd-brand-primary); text-decoration: none; } .knd-footer__bottom{ margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--knd-neutral-300); font-size: .9rem; } .knd-footer__link{ transition: color .2s ease; } /* Mobile fold */ @media (max-width: 767.98px){ .knd-footer__grid{ grid-template-columns: 1fr; /* fold til 1 kolonne */ gap: .75rem; } .knd-footer{ padding: 1.5rem 0 1rem; } .knd-footer_card{ padding: .9rem; } .knd-footer__item{ align-items: center; /* ser typisk bedre ud på mobil */ } } /* ------------------------------------------------------------------ Maintenance ------------------------------------------------------------------ */ .knd-closed{ min-height: 70vh; display: grid; place-items: center; padding: 2.5rem 1rem; } .knd-closed__card{ width: min(720px, 100%); background: #fff; border: 1px solid var(--knd-neutral-200); border-radius: var(--knd-radius-xl, 24px); box-shadow: var(--knd-shadow-soft); padding: clamp(1.25rem, 3vw, 2.25rem); } .knd-closed__badge{ display: inline-block; font-weight: 900; color: #fff; background: var(--knd-brand-danger, #c60021); border-radius: 999px; padding: .35rem .75rem; margin-bottom: .75rem; } .knd-closed__title{ font-family: var(--knd-font-heading); font-weight: 900; letter-spacing: -0.01em; margin: 0 0 .75rem 0; } .knd-closed__text{ color: var(--knd-neutral-700); margin: 0 0 1.25rem 0; line-height: 1.6; } .knd-closed__contact{ display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-bottom: 1.25rem; justify-content: center; } .knd-closed__link{ font-weight: 800; color: var(--knd-neutral-900); text-decoration: none; } .knd-closed__link:hover{ text-decoration: underline; } .knd-closed__actions .btn{ font-weight: 800; border-radius: var(--knd-radius-lg); } /* ------------------------------------------------------------------ Theme Builder sections ------------------------------------------------------------------ */ /* ---------- HERO ---------- */ /* DKLift hero baggrund (ingen inline style) */ .knd-hero--dklift .knd-hero__bg{ background-image: url('/img/cms/hero.jpg'); /* brug RELATIV path */ } .knd-hero{ position: relative; /* border-radius: var(--knd-dklift-hero-radius); */ overflow: hidden; min-height: 360px; box-shadow: var(--knd-shadow-card); background: #111; } .knd-hero__bg{ position: absolute; inset: 0; background-image: var(--knd-hero-bg, none); background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.05); transform: scale(1.02); } .knd-hero__overlay{ position: absolute; inset: 0; background: radial-gradient(1200px 600px at 20% 30%, rgba(0,0,0,.25), rgba(0,0,0,.5)), linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%); } .knd-hero__inner{ position: relative; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem); color: #fff; } .knd-hero__title{ font-family: var(--knd-font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.8rem, 3.2vw, 3rem); margin: 0 0 .6rem 0; color: #fff; } .knd-hero__lead{ font-size: 1.05rem; max-width: 58ch; color: rgba(255,255,255,.88); margin: 0 0 1.25rem 0; } .knd-hero__cta .btn{ font-weight: 700; border-radius: var(--knd-radius-lg); } .knd-hero__cta .btn-primary{ background: var(--knd-dklift-red); border-color: transparent; } .knd-hero__cta .btn-primary:hover{ filter: brightness(1.05); } /* ---------- SECTION HEADERS ---------- */ .knd-section{ padding: 2.25rem 0; } .knd-section__kicker{ color: var(--knd-dklift-red); font-weight: 800; text-transform: none; letter-spacing: .01em; margin-bottom: .35rem; } .knd-section__title{ font-family: var(--knd-font-heading); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 1rem; } /* ---------- FEATURE / WHY ---------- */ .knd-split{ /* gap: 1.5rem; */ } .knd-card{ border: 1px solid var(--knd-neutral-200); border-radius: var(--knd-radius-lg); box-shadow: var(--knd-shadow-soft); background: #fff; } .knd-whylist{ list-style: none; padding: 0; margin: 0; } .knd-whylist li{ display: flex; gap: .65rem; align-items: flex-start; padding: .35rem 0; color: var(--knd-neutral-900); font-weight: 600; } .knd-whylist i{ color: var(--knd-dklift-red); margin-top: .2rem; } .knd-thumbgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.1rem; } .knd-thumb{ border-radius: var(--knd-radius-md); overflow: hidden; border: 1px solid var(--knd-neutral-200); background: var(--knd-neutral-50); } .knd-thumb img{ width: 100%; height: auto; object-fit: cover; display: block; } @media (max-width: 575.98px){ .knd-thumbgrid{ grid-template-columns: 1fr; } .knd-thumb img{ height: 160px; } } /* ---------- TARGET GROUPS BOX ---------- */ .knd-targets{ padding: 1.25rem; } .knd-targets__title{ font-family: var(--knd-font-heading); font-weight: 800; margin-bottom: .85rem; } .knd-targets__label{ color: var(--knd-dklift-red); font-weight: 900; margin-bottom: .2rem; } .knd-targets__text{ margin: 0 0 .9rem 0; font-size: var(--knd-ext-size); color: var(--knd-neutral-700); } /* ---------- CTA BAR ---------- */ .knd-ctaBar{ background: var(--knd-dklift-red); border-radius: var(--knd-radius-lg); padding: 1.25rem 1.25rem; color: #fff; box-shadow: var(--knd-shadow-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .knd-ctaBar__title{ margin: 0; font-family: var(--knd-font-heading); font-weight: 900; letter-spacing: -0.01em; } .knd-ctaBar__lead{ margin: .25rem 0 0 0; color: rgba(255,255,255,.9); } .knd-ctaBar .btn{ border-radius: var(--knd-radius-lg); font-weight: 800; } .knd-ctaBar .btn-light{ background: #fff; color: var(--knd-dklift-red); border: 0; } .knd-ctaBar .btn-light:hover{ filter: brightness(.97); } @media (max-width: 767.98px){ .knd-ctaBar{ flex-direction: column; align-items: flex-start; } } /* Card padding helper */ .knd-card--pad{ padding: 1.25rem; } /* Sørg for at ul ikke arver noget mærkeligt */ .knd-whylist{ list-style: none; padding: 0; margin: 0; } .knd-whylist li{ display: flex; gap: .65rem; align-items: flex-start; padding: .35rem 0; color: var(--knd-neutral-900); font-weight: 600; } .knd-whylist i{ color: var(--knd-dklift-red); margin-top: .2rem; flex: 0 0 auto; } /* Targets card (du har allerede padding her – behold én af dem) */ .knd-targets{ padding: 1.25rem; } /* Små skærme: lidt strammere padding */ @media (max-width: 575.98px){ .knd-card--pad, .knd-targets{ padding: 1rem; } } /* ------------------------------------------------------------------ Generic modal ------------------------------------------------------------------ */ :root{ --knd-modal-gap: 12px; --knd-modal-maxw: 720px; --knd-modal-radius: 16px; --knd-modal-overlay-a: 0.90; --knd-modal-overlay: linear-gradient( 135deg, rgba(15, 63, 65, var(--knd-modal-overlay-a)) 0%, rgba(39, 156, 155, var(--knd-modal-overlay-a)) 55%, rgba(29, 127, 126, var(--knd-modal-overlay-a)) 80% ); --knd-modal-shadow: 0 20px 60px rgba(0,0,0,.25); /* KNDev accent */ --knd-accent: #097678; --knd-accent-weak: rgba(9,118,120,.12); } /* Lock background when modal open */ html.knd-modal-open, html.knd-modal-open body{ overflow: hidden; } /* Modal root */ .knd-modal{ position: fixed; inset: 0; z-index: 9999; display: none; } .knd-modal[aria-hidden="false"]{ display: flex; padding: var(--knd-modal-gap); justify-content: center; align-items: center; } /* Backdrop */ .knd-modal__overlay{ position: absolute; inset: 0; background: var(--knd-modal-overlay); } /* Dialog wrapper */ .knd-modal__dialog{ position: relative; width: 100%; max-width: var(--knd-modal-maxw); max-height: calc(100dvh - (var(--knd-modal-gap) * 2)); display: flex; } /* Card container */ .knd-modal__card{ width: 100%; margin: 0 auto; /* <- desktop centering fix */ background: #fff; border-radius: var(--knd-modal-radius); box-shadow: var(--knd-modal-shadow); overflow: hidden; display: flex; flex-direction: column; max-height: inherit; } /* Sections */ .knd-modal__header{ flex: 0 0 auto; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.08); } .knd-modal__body{ flex: 1 1 auto; padding: 1.25rem; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .knd-modal__footer{ flex: 0 0 auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(0,0,0,.08); background: #fff; position: sticky; bottom: 0; } /* Close button */ .knd-modal__close{ position: absolute; top: .75rem; right: 1rem; border: 0; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; } /* Mobile UX: top align */ @media (max-width: 767.98px){ .knd-modal[aria-hidden="false"]{ align-items: flex-start; } } /* Optional KNDev “green effect” */ .knd-modal--kndev .knd-modal__header{ background: linear-gradient(0deg, #fff, #fff), var(--knd-accent-weak); } .knd-modal--kndev .btn-primary{ background: var(--knd-accent); border-color: var(--knd-accent); } /* The flex chain must allow shrinking, otherwise overflow won't scroll */ .knd-modal__dialog, .knd-modal__card, .knd-modal__card > form, .knd-modal__body{ min-height: 0; } /* Ensure the card + form are flex columns so body can take remaining space */ .knd-modal__card{ display: flex; flex-direction: column; } .knd-modal__card > form{ display: flex; flex-direction: column; flex: 1 1 auto; } /* Body must be the scrolling area */ .knd-modal__body{ flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Footer stays visible */ .knd-modal__footer{ flex: 0 0 auto; position: sticky; bottom: 0; background: #fff; } /* ------------------------------------------------------------------ Contact Form ------------------------------------------------------------------ */ #knd-contact{ scroll-margin-top: 110px; background: var(--knd-neutral-200); padding: 4rem 0 2rem; } .knd-contactform{ padding: 1.5rem 0; } .knd-contactform__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; min-height: 400px; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); background: #fff; } @media (max-width: 991px){ .knd-contactform__grid{ grid-template-columns: 1fr; } } .knd-contactform__card{ height: 100%; display: flex; flex-direction: column; padding: 1rem; } .knd-contactform__card--map{ min-height: 100%; } .knd-contactform__title{ font-family: var(--knd-font-heading); font-weight: 800; font-size: 1.6rem; margin-bottom: .85rem; color: var(--knd-neutral-900) !important; } .knd-contactform__text{ margin: 0 0 1rem; } .knd-contactform__maplink{ display: block; cursor: pointer; flex: 1; min-height: 220px; } .knd-contactform__mapimg{ width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 12px; } .knd-contactform__reqnote{ margin: .25rem 0 1rem; font-size: .9rem; opacity: .8; } /* Contact info rows (icon + text) */ .knd-contactinfo__row{ display: grid; grid-template-columns: 18px 1fr; gap: .5rem; align-items: start; margin: .5rem; } .knd-contactinfo__text{ display: flex; flex-direction: column; } .knd-contactinfo__line{ margin: 0; line-height: 1.25; } /* Form fields (shared styling) */ .knd-reqstar{ color: var(--bs-danger, #dc3545); font-weight: 700; } .knd-field{ margin-bottom: .75rem; } .knd-field--row{ display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 575px){ .knd-field--row{ grid-template-columns: 1fr; } } .knd-label{ display: block; font-weight: 600; margin-bottom: .25rem; } .knd-label--req::after{ content: " *"; color: var(--bs-danger, #dc3545); font-weight: 700; } .knd-input, .knd-textarea{ width: 100%; padding: .6rem .75rem; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; } .knd-checkbox{ display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 1rem; } /* Optional module button style (prefer btn btn-primary if possible) */ .knd-btn{ padding: .7rem 1rem; border-radius: 10px; border: 0; cursor: pointer; display: inline-block; text-decoration: none; } .knd-btn--primary{ background: #097678; color: #fff; } /* Alerts */ .knd-contactform__alert{ border: 1px solid rgba(220,0,0,.25); background: rgba(220,0,0,.06); padding: .75rem; border-radius: 10px; margin-bottom: .75rem; } .knd-contactform__alertlist{ margin: 0; padding-left: 1.1rem; } .knd-contactform__placeholder{ padding: .75rem; border-radius: 10px; background: rgba(0,0,0,.03); }