/* Load Montserrat once, here. Every page that links brand.css gets it. Weights: 400 (body), 600 (emphasis), 700 (buttons/headings). */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); /* ============================================================ TACHNAT — BRAND TOKENS (single source of truth) ============================================================ Every page (calculator, migrate, seminar) and every new snippet references THESE variables — never raw hex. WHY THIS EXISTS Hardcoded colours scattered across three pages are how "fix one thing, break another" bugs happen. Define values once here; change them once here; every page follows. HOW TO DEPLOY (once) 1. Save this file as: /points-calculator/brand.css (or a shared path you can reach from all three pages) 2. In the of each page, add ONE line: Bump ?v=2, ?v=3... whenever you edit this file, so the browser cache refreshes (your handover's nocache rule). 3. From now on, write colours as var(--brand-blue) etc. Never paste #1271B9 directly into a page again. ============================================================ */ :root { /* ---- Core palette (from the migrate page = source of truth) ---- */ --brand-blue: #1271B9; /* primary: headers, links, accents */ --brand-blue-dark: #0d568c; /* hover/active state for blue */ --brand-gold: #F9BA2E; /* single gold: buttons AND dividers */ --brand-gold-dark: #e0a417; /* hover/active state for gold */ /* ---- Functional (NOT brand — keep for instant recognition) ---- */ --wa-green: #25D366; /* WhatsApp button only */ --wa-green-dark: #1da851; /* WhatsApp button active */ /* ---- Neutrals (derived, consistent across pages) ---- */ --ink: #1c2b3a; /* primary text */ --ink-soft: #5b6b78; /* secondary text, captions */ --line: #e3e8ee; /* borders, hairlines */ --surface: #ffffff; /* cards, inputs */ --surface-tint: #f5f9fc; /* subtle blue-tinted panel background */ /* ---- Typography: Montserrat (brand font) ---- */ /* The @import at the top of this file loads Montserrat. The system fallbacks after it keep text readable if the webfont is slow/blocked. */ --brand-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; /* ---- Type scale (consistent sizes everywhere) ---- */ --fs-h1: clamp(24px, 5vw, 34px); --fs-h2: clamp(20px, 4vw, 26px); --fs-body: 16px; --fs-small:13px; --fw-normal: 400; --fw-bold: 700; /* ---- Shape & spacing (one radius, one shadow language) ---- */ --radius: 12px; --radius-sm: 8px; --tap-min: 52px; /* minimum touch target — mobile-first */ --shadow: 0 2px 6px rgba(18,113,185,.18); --shadow-gold:0 2px 6px rgba(249,186,46,.30); } /* ============================================================ REUSABLE COMPONENT CLASSES Build buttons/cards with these so every page looks identical. ============================================================ */ /* Primary action — brand blue */ .tn-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:var(--tap-min); padding:14px 20px; border:0; border-radius:var(--radius); font-family:var(--brand-font); font-size:18px; font-weight:var(--fw-bold); line-height:1.2; cursor:pointer; color:#fff; background:var(--brand-blue); box-shadow:var(--shadow); transition:transform .08s ease, background .15s ease; -webkit-tap-highlight-color:transparent; } .tn-btn:active { transform:scale(.98); background:var(--brand-blue-dark); } /* Secondary action — brand gold (use for high-emphasis CTAs) */ .tn-btn--gold { background:var(--brand-gold); color:var(--ink); box-shadow:var(--shadow-gold); } .tn-btn--gold:active { background:var(--brand-gold-dark); } /* WhatsApp action — functional green, NOT brand (recognition matters) */ .tn-btn--wa { background:var(--wa-green); color:#fff; box-shadow:0 2px 6px rgba(37,211,102,.35); } .tn-btn--wa:active { background:var(--wa-green-dark); } /* Card / panel */ .tn-card { max-width:480px; margin:18px auto; padding:18px 16px; background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--radius); text-align:center; font-family:var(--brand-font); } /* Divider — single gold */ .tn-divider { height:3px; border:0; background:var(--brand-gold); border-radius:2px; margin:20px auto; max-width:60px; } /* Text helpers */ .tn-pitch { margin:0 0 12px; font-size:15px; font-weight:600; color:var(--brand-blue-dark); line-height:1.5; } .tn-sub { margin:10px 0 0; font-size:var(--fs-small); color:var(--ink-soft); } @media (max-width:380px){ .tn-btn { font-size:16px; min-height:var(--tap-min); } .tn-pitch { font-size:14px; } }