/* ========================================================== 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"); :root{ /* ------------------------------------------------------------------ KNDev Design Tokens (fallback defaults) ------------------------------------------------------------------ These are DEFAULTS (from themes/kndev_theme/config/themevars.json). The kndev_themeconfigurator module should inject overrides later in via :root{--kn-...} to replace only what’s changed. */ /* Brand */ --kn-brand-primary:#097678; --kn-brand-accent:#2aa6a0; --kn-brand-danger:#c60021; --kn-brand-success:#16a34a; --kn-brand-warning:#f59e0b; --kn-brand-info:#0ea5e9; /* Neutral */ --kn-neutral-0:#ffffff; --kn-neutral-50:#f9fafb; --kn-neutral-100:#f3f4f6; --kn-neutral-200:#e5e7eb; --kn-neutral-300:#d1d5db; --kn-neutral-700:#374151; --kn-neutral-900:#111827; /* Typography */ --kn-font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --kn-font-heading:"Montserrat","Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --kn-base-size: 16px; --kn-line-height: 1.5; /* Radius */ --kn-radius-xs: 6px; --kn-radius-sm: 10px; --kn-radius-md: 12px; --kn-radius-lg: 16px; --kn-radius-xl: 24px; --kn-radius: var(--kn-radius-md); /* Shadow */ --kn-shadow-card: 0 10px 30px rgba(0,0,0,.08); --kn-shadow-soft: 0 6px 18px rgba(0,0,0,.06); --kn-shadow: var(--kn-shadow-card); /* Buttons */ --kn-btn-primary-bg: #097678; --kn-btn-primary-text: #ffffff; --kn-btn-primary-bg-hover: #0a8a8c; --kn-btn-primary-text-hover: #ffffff; --kn-btn-secondary-bg: #111827; --kn-btn-secondary-text: #ffffff; --kn-btn-secondary-bg-hover: #1f2937; --kn-btn-secondary-text-hover: #ffffff; --kn-btn-tertiary-bg: transparent; --kn-btn-tertiary-text: #097678; --kn-btn-tertiary-bg-hover: rgba(9,118,120,.08); --kn-btn-tertiary-text-hover: #097678; --kn-btn-radius: var(--kn-radius); --kn-btn-padding-y: .8rem; --kn-btn-padding-x: 1.15rem; /* Boxes */ --kn-box-bg-color: #f5f5f5; --kn-box-border-color: #e5e7eb; --kn-box-border-width: 1px; /* Assets */ --kn-logo-path: "assets/img/kn-logo.png"; } /* Typography + base colors */ html { font-size: calc(var(--kn-font-size-base, 16) * 1px); } body{ font-family: var(--kn-font-body); color: var(--kn-neutral-900); background: var(--kn-neutral-0); line-height: var(--kn-line-height, 1.55); } h1,h2,h3,h4,h5,h6{ font-family: var(--kn-font-heading); color: var(--kn-neutral-900); } a{ color: var(--kn-brand-primary); text-decoration: none; } a:hover{ color: var(--kn-brand-accent); text-decoration: underline; } /* Buttons (Bootstrap) */ .btn{ border-radius: var(--kn-radius); box-shadow: none; } /* Primary */ .btn-primary{ background: var(--kn-btn-primary-bg); color: var(--kn-btn-primary-text); border-color: var(--kn-btn-primary-border, transparent); } .btn-primary:hover, .btn-primary:focus{ background: var(--kn-btn-primary-bg-hover); color: var(--kn-btn-primary-text-hover); border-color: var(--kn-btn-primary-border, transparent); } .btn-primary:disabled, .btn-primary.disabled{ opacity: .6; } /* Secondary */ .btn-secondary{ background: var(--kn-btn-secondary-bg); color: var(--kn-btn-secondary-text); border-color: var(--kn-btn-secondary-border, transparent); } .btn-secondary:hover, .btn-secondary:focus{ background: var(--kn-btn-secondary-bg-hover); color: var(--kn-btn-secondary-text-hover); } /* Tertiary / outline-like */ .btn-tertiary, .btn-outline-primary{ background: var(--kn-btn-tertiary-bg); color: var(--kn-btn-tertiary-text); border-color: var(--kn-brand-primary); } .btn-tertiary:hover, .btn-outline-primary:hover{ background: var(--kn-btn-tertiary-bg-hover); color: var(--kn-btn-tertiary-text-hover); } /* Forms */ .form-control, .custom-select, .input-group-text{ border-radius: var(--kn-radius); } .form-control:focus{ border-color: var(--kn-brand-primary); box-shadow: 0 0 0 .15rem rgba(9,118,120,.15); } /* Cards / panels */ .card, .block, .checkout-step{ /* background: var(--kn-box-bg-color); */ border: var(--kn-box-border-width) solid var(--kn-box-border-color); border-radius: var(--kn-radius); box-shadow: var(--kn-shadow-soft); }