/* * Call Tracker Theme * Existing brand colors mapped to Preline design tokens. * Applied via data-theme="theme-calltracker" on . * Palette preserved from the original site: primary #1D93F0, ink #16222E, * success #4CAF50, surface tint #F7FAFD. */ [data-theme="theme-calltracker"] { /* Primary action (brand blue) */ --primary: #1D93F0; --primary-hover: #1781D6; --primary-active: #1781D6; --primary-line: #1D93F0; --primary-foreground: #FFFFFF; /* Surfaces */ --background: #FFFFFF; --surface: #F7FAFD; --surface-1: #F7FAFD; --surface-2: #E7EDF3; /* Cards */ --card: #FFFFFF; --card-line: #E7EDF3; /* Text — exact original values: headings #000, body #333, muted caption #7b7b7b. */ --foreground: #000000; --muted-foreground-1: #333333; --muted-foreground-2: #7B7B7B; /* Lines/borders — Preline reads --border-line-1..8 (NOT --line-*). Our brand line shades, lightest → darkest. */ --border-line-1: #E7EDF3; --border-line-2: #DBE3EA; --border-line-3: #CDD7E0; --border-line-4: #B9C6D1; --border-line-5: #9FB0BE; --border-line-6: #7C8B98; --border-line-7: #5A6B78; --border-line-8: #16222E; --border: #E7EDF3; --table-line: #E7EDF3; /* Secondary / accents (soft blue) */ --secondary: #E7F3FE; --secondary-foreground: #0D5AA7; /* Navbar */ --navbar: #FFFFFF; /* Corner radius — tightened globally (less rounded than Preline defaults). Every rounded-* utility reads these. --radius-full left alone so pills (badges, the "Most Popular" tag) stay fully rounded. */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 5px; --radius-2xl: 6px; --radius-3xl: 8px; --radius-4xl: 10px; /* Type scale — customized to the original's exact sizes so standard Tailwind utilities render them. text-2xl(24) and text-4xl(36) already match the original; only 3xl and 5xl need overriding. Heading line-heights tightened. */ --text-3xl: 34px; --text-5xl: 50px; --text-2xl--line-height: 1; --text-3xl--line-height: 1; --text-4xl--line-height: 1; /* Main container — match production's Bootstrap .container: 1140px content. With lg:px-8 (64px) → 1204 - 64 = 1140 content, left edge 70px (= production). */ --container-7xl: 1204px; } /* Lato as the default font — matches the original site exactly ("Lato",Helvetica,Arial,sans-serif). Preline font tokens + body. */ :root { --font-sans: 'Lato', Helvetica, Arial, sans-serif; --font-custom-default: 'Lato', Helvetica, Arial, sans-serif; --default-font-family: 'Lato', Helvetica, Arial, sans-serif; } body { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.846; letter-spacing: .1px; color: #3d3d3d; } /* Green highlighter — exact original (custom-styles.scss `mark { background:#acffaf }`) */ mark { background: #acffaf; } /* Light mode only */ .dark [data-theme="theme-calltracker"] { color-scheme: light; } /* ---- Brand helpers (used by reskinned templates) ---------------------- */ .ct-text-primary { color: #1D93F0; } .ct-text-ink { color: #16222E; } .ct-bg-ink { background-color: #16222E; } .ct-bg-surface { background-color: #F7FAFD; } .ct-hero-gradient { background: linear-gradient(135deg, #F7FAFD 0%, #FFFFFF 55%, #EAF4FE 100%); } .ct-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .ct-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(22, 34, 46, 0.10); } /* Primary button helper. The pre-built Preline CSS doesn't generate a `hover:bg-primary-hover` utility (primary-hover is a token, not a referenced color), so the brand button's hover lives here against the token. */ .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: .5rem; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .ct-btn-primary { background-color: var(--primary); color: var(--primary-foreground); box-shadow: 0 6px 16px rgba(29,147,240,.35); } .ct-btn-primary:hover { background-color: var(--primary-hover); color: var(--primary-foreground); } .ct-btn-ghost { background-color: transparent; color: var(--foreground); } .ct-btn-ghost:hover { background-color: var(--surface-2); } /* Letter-spacing utilities — smartmiles never used these, so the pre-built CSS omits them. Headings in the reskin want a slight negative tracking. */ .tracking-tight { letter-spacing: -0.025em; } .tracking-tighter { letter-spacing: -0.05em; } .tracking-wide { letter-spacing: 0.025em; } /* Standard Tailwind utilities absent from the purged build (smartmiles never used them). Added here so the reskin can use them without a Tailwind build. */ .items-baseline { align-items: baseline; } .fill-current { fill: currentColor; } .text-slate-300 { color: #cbd5e1; } /* muted light text on dark sections */ .text-slate-400 { color: #94a3b8; } .ct-star { color: #fdd835; } /* gold review stars — exact original .rating-star color */ /* Pricing card — exact original `.package.list-group` look (no border, soft shadow, 2px radius). `--active` matches the original Pro card: blue border + lift. */ .ct-pkg { background: #fff; border-radius: 2px; box-shadow: 0 2px 4px 0 rgba(136,144,195,.2), 0 5px 15px 0 rgba(37,44,97,.15); } .ct-pkg--active { border: 2px solid #1D93F0; border-radius: 3px; } @media (min-width: 768px) { .ct-pkg--active { margin-top: -15px; } } /* Prose for content pages (privacy, terms, blog posts) */ .ct-prose { color: #5A6B78; line-height: 1.75; } .ct-prose h1, .ct-prose h2, .ct-prose h3, .ct-prose h4 { color: #16222E; font-weight: 700; } .ct-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } .ct-prose h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; } .ct-prose h4 { font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .ct-prose p { margin-bottom: 1.25rem; } .ct-prose ul, .ct-prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .ct-prose ul { list-style-type: disc; } .ct-prose ol { list-style-type: decimal; } .ct-prose li { margin-bottom: 0.5rem; } .ct-prose strong { color: #16222E; font-weight: 600; } .ct-prose a { color: #1D93F0; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .ct-prose a:hover { color: #1781D6; } .ct-prose hr { border: none; border-top: 1px solid #E7EDF3; margin: 2rem 0; } .ct-prose img { border-radius: 8px; }