/* Minimal Modern Theme for LoyaltyMatch Drop into /assets/css/ and link in : */ /* -------- CSS Variables (Light / Dark) -------- */ :root{ --brand:#58BAE1; /* LoyaltyMatch original blue */ --brand-600:#2aa7d9; --brand-700:#1f8fb9; --text:#0f172a; /* slate-900 */ --muted:#475569; /* slate-600 */ --bg:#ffffff; --bg-elev:#f8fafc; /* slate-50 */ --border:#e2e8f0; /* slate-200 */ --ring: 0 0 0 .2rem rgba(88,186,225,.35); --radius:14px; --shadow:0 8px 24px rgba(15,23,42,.08); } @media (prefers-color-scheme: dark){ :root{ --text:#e5e7eb; /* slate-200 */ --muted:#cbd5e1; /* slate-300 */ --bg:#0b1020; /* deep navy */ --bg-elev:#1e293b; /* slate-800 - darker for better contrast */ --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,.45); } } /* -------- Reset-ish / Base -------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth} body{ font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background:var(--bg); } img{max-width:100%;display:block;height:auto} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} hr{border:0;height:1px;background:var(--border);margin:2rem 0} /* -------- Layout -------- */ .container{width:100%;max-width:1200px;margin-inline:auto;padding:0 1rem} .section{padding:4rem 0} .stack>*+*{margin-top:1rem} .center{display:grid;place-items:center} .grid{ display:grid; gap:1.25rem; } .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:960px){.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}} /* -------- Typography -------- */ .h1,.h2,.h3{font-weight:800;letter-spacing:-.02em;margin:0 0 .75rem} .h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1} .h2{font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.2} .h3{font-size:clamp(1.25rem,2.6vw,1.5rem)} .lead{font-size:1.125rem;color:var(--muted);} .muted{color:var(--muted)} /* -------- Surfaces / Cards -------- */ .card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; } .card.hover:hover{transform:translateY(-2px);transition:.2s ease;box-shadow:0 14px 36px rgba(15,23,42,.12)} /* -------- Buttons -------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; gap:.5rem; font-weight:600; padding:.75rem 1rem; border-radius:999px; border:1px solid transparent; background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(88,186,225,.3); transition:transform .06s ease, box-shadow .2s ease, background .2s ease; } .btn:hover{background:var(--brand-600);text-decoration:none;box-shadow:0 8px 24px rgba(88,186,225,.36)} .btn:active{transform:translateY(1px)} .btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)} .btn.ghost{background:transparent;color:var(--text);border-color:var(--border)} /* -------- Form Controls -------- */ .input, .select, .textarea{ width:100%;border-radius:12px;border:1px solid var(--border); background:var(--bg);color:var(--text); padding:.75rem 1rem;outline:none; transition:border-color .2s ease, box-shadow .2s ease; } .input:focus, .select:focus, .textarea:focus{border-color:var(--brand);box-shadow:var(--ring)} .label{font-weight:600;margin-bottom:.35rem;display:block} .help{color:var(--muted);font-size:.9rem;margin-top:.35rem} .row{display:grid;gap:1rem;grid-template-columns:1fr 1fr} @media (max-width:720px){.row{grid-template-columns:1fr}} /* -------- Header / Footer -------- */ .header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .nav{display:flex;align-items:center;gap:1rem;padding:.75rem 0} .nav a{padding:.5rem .75rem;border-radius:10px} .nav a.active, .nav a:hover{background:var(--bg-elev);text-decoration:none} .footer{ border-top:1px solid var(--border); padding:2rem 0;color:var(--muted);font-size:.95rem; } /* -------- Hero -------- */ .hero{ padding:6rem 0; background: radial-gradient(1000px 500px at 80% -10%, rgba(88,186,225,.18), transparent 60%); } .hero .actions{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap} /* -------- Utilities (tiny set) -------- */ .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-6{margin-top:2rem} .mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-6{margin-bottom:2rem} .p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-6{padding:2rem} .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem} .text-center{text-align:center}.w-full{width:100%}.hidden{display:none}.block{display:block} .ml-auto{margin-left:auto}.space-y-2>*+*{margin-top:.5rem}.absolute{position:absolute}.relative{position:relative} .top-full{top:100%}.left-0{left:0}.right-0{right:0} .h-6{height:1.5rem}.w-6{width:1.5rem}.h-12{height:3rem}.w-auto{width:auto} .font-bold{font-weight:700}.font-medium{font-weight:500}.text-xl{font-size:1.25rem} .py-4{padding-top:1rem;padding-bottom:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem} .rounded-md{border-radius:.375rem}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)} .bg-white{background-color:#fff}.bg-slate-100{background-color:#f1f5f9} .border-b{border-bottom-width:1px}.border-gray-200{border-color:#e5e7eb} /* Additional Tailwind-like utilities */ .w-1\/3{width:33.333333%} .w-12{width:3rem} .w-16{width:4rem} .h-32{height:8rem} .h-full{height:100%} .flex-shrink-0{flex-shrink:0} .px-4{padding-left:1rem;padding-right:1rem} .p-6{padding:1.5rem} .mb-4{margin-bottom:1rem} .mt-2{margin-top:.5rem} .mt-6{margin-top:1.5rem} .mx-auto{margin-left:auto;margin-right:auto} .max-w-2xl{max-width:42rem} .max-w-4xl{max-width:56rem} .max-h-\[80vh\]{max-height:80vh} .overflow-hidden{overflow:hidden} .overflow-y-auto{overflow-y:auto} .rounded-lg{border-radius:.5rem} .rounded-full{border-radius:9999px} .shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1)} .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)} .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1)} .hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s} .transition-transform{transition-property:transform} .transition-opacity{transition-property:opacity} .duration-200{transition-duration:.2s} .duration-300{transition-duration:.3s} .duration-500{transition-duration:.5s} .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)} .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)} .ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)} .transform{transform:translate(0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)} .hover\:scale-105:hover{transform:scale(1.05)} .-translate-y-1\/2{transform:translateY(-50%)} .-translate-x-4{transform:translateX(-1rem)} .translate-x-4{transform:translateX(1rem)} .top-1\/2{top:50%} .left-0{left:0} .right-0{right:0} .inset-0{top:0;right:0;bottom:0;left:0} .z-50{z-index:50} .cursor-pointer{cursor:pointer} .object-contain{object-fit:contain} .object-cover{object-fit:cover} .opacity-80{opacity:.8} .hover\:opacity-100:hover{opacity:1} .bg-opacity-50{--tw-bg-opacity:0.5} .fixed{position:fixed} .space-x-2>*+*{margin-left:.5rem} .space-x-4>*+*{margin-left:1rem} .border{border-width:1px} .border-slate-200{border-color:#e2e8f0} .bg-slate-50{background-color:#f8fafc} .bg-slate-800{background-color:#1e293b} .hover\:bg-slate-50:hover{background-color:#f8fafc} .hover\:bg-slate-700:hover{background-color:#334155} .text-slate-300{color:#cbd5e1} .text-slate-400{color:#94a3b8} .text-slate-500{color:#64748b} .text-slate-600{color:#475569} .text-slate-700{color:#334155} .text-slate-900{color:#0f172a} .text-slate-100{color:#f1f5f9} .text-sm{font-size:.875rem} .text-xs{font-size:.75rem} .w-3{width:.75rem} .h-3{height:.75rem} .w-5{width:1.25rem} .h-5{height:1.25rem} .bg-black{background-color:#000} /* Dark mode utilities */ @media (prefers-color-scheme: dark){ .dark\:bg-slate-800{background-color:#1e293b} .dark\:bg-slate-700{background-color:#334155} .dark\:hover\:bg-slate-700:hover{background-color:#334155} .dark\:text-slate-100{color:#f1f5f9} .dark\:text-slate-300{color:#cbd5e1} .dark\:text-slate-400{color:#94a3b8} .dark\:border-slate-600{border-color:#475569} } /* Responsive utilities - md breakpoint (768px) */ @media (min-width: 768px) { .md\:hidden{display:none} .md\:flex{display:flex} .md\:block{display:block} } /* -------- Announce badge / chips -------- */ .badge{ display:inline-flex;align-items:center;gap:.4rem; padding:.35rem .6rem;border-radius:999px; background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand); font-weight:600;font-size:.85rem;border:1px solid color-mix(in srgb, var(--brand) 36%, transparent); } /* -------- Table (for customers/partners lists) -------- */ .table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden} .table th,.table td{padding:.8rem 1rem;border-bottom:1px solid var(--border)} .table thead th{background:var(--bg-elev);text-align:left;font-weight:700} .table tr:last-child td{border-bottom:0} /* -------- Toast (optional) -------- */ .toast{ position:fixed;inset:auto 1rem 1rem auto;z-index:60; background:var(--bg-elev);border:1px solid var(--border); border-radius:12px;padding:.85rem 1rem;box-shadow:var(--shadow); } /* -------- Visually hidden (a11y) -------- */ .visually-hidden{ position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap; } /* -------- Tailwind Override for Dark Mode -------- */ .bg-slate-50{ background-color:var(--bg-elev) !important; color:var(--text) !important; } /* Ensure proper text contrast for dark backgrounds in dark mode */ @media (prefers-color-scheme: dark){ .bg-slate-50{ background-color:#1e293b !important; /* slate-800 - much darker */ color:#f8fafc !important; /* slate-50 - bright white for maximum contrast */ } .bg-slate-50 h2, .bg-slate-50 h3, .bg-slate-50 h4 { color:#f8fafc !important; /* Ensure headings are bright white */ } } /* -------- Customer Carousel Styles -------- */ .customer-carousel { position: relative; } .customer-carousel .carousel-container { overflow: hidden; border-radius: 12px; } .customer-carousel .carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .customer-carousel .customer-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: all 0.3s ease; box-shadow: var(--shadow); } .customer-carousel .customer-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,23,42,.12); } @media (prefers-color-scheme: dark) { .customer-carousel .customer-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.3); } }