/* ============================================================ net2phone Design System — Colors & Typography Source of truth: ENG_Brand Identity Manual 2026 (Figma) ============================================================ */ /* ---- Fonts (self-hosted OTFs in /fonts) ---- */ @font-face { font-family: "IDT Sans"; font-weight: 100; font-style: normal; src: url("fonts/IDT Sans Thin.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 200; font-style: normal; src: url("fonts/IDT Sans ExtraLight.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 300; font-style: normal; src: url("fonts/IDT Sans Light.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 400; font-style: normal; src: url("fonts/IDT Sans Regular.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 400; font-style: italic; src: url("fonts/IDT Sans Italic.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 500; font-style: normal; src: url("fonts/IDT Sans Medium.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 600; font-style: normal; src: url("fonts/IDT Sans DemiBold.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 700; font-style: normal; src: url("fonts/IDT Sans Bold.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 700; font-style: italic; src: url("fonts/IDT Sans Bold Italic.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 800; font-style: normal; src: url("fonts/IDT Sans ExtraBold.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 900; font-style: normal; src: url("fonts/IDT Sans Black.otf") format("opentype"); font-display: swap; } @font-face { font-family: "IDT Sans"; font-weight: 950; font-style: normal; src: url("fonts/IDT Sans ExtraBlack.otf") format("opentype"); font-display: swap; } /* Open Sans (secondary / fallback) pulled from Google Fonts in page : */ :root { /* ------------------------------------------------------------ COLOR TOKENS ------------------------------------------------------------ */ /* Primary — Dark Blue (the anchor) */ --n2p-dark-blue: #002540; /* PANTONE 282 C — primary */ --n2p-dark-blue-80: rgba(0,37,64,0.80); --n2p-dark-blue-60: rgba(0,37,64,0.60); --n2p-dark-blue-40: rgba(0,37,64,0.40); --n2p-dark-blue-20: rgba(0,37,64,0.20); --n2p-dark-blue-10: rgba(0,37,64,0.10); --n2p-dark-blue-05: rgba(0,37,64,0.05); /* Dark-blue mid tones (solid) */ --n2p-dark-blue-mid-1: #435E72; /* 60% mix */ --n2p-dark-blue-mid-2: #C5CDD4; /* 30% mix */ /* Secondary brand colors — the gradient set */ --n2p-blue: #0095FF; --n2p-violet: #740CE8; --n2p-pink: #FE0687; /* Secondary — 60% tint */ --n2p-blue-tint-60: #61BDFF; --n2p-violet-tint-60: #A562F0; --n2p-pink-tint-60: #FF69B7; /* Accent — 20% tint */ --n2p-blue-tint-20: #CCEAFF; --n2p-violet-tint-20: #E0CAFA; --n2p-pink-tint-20: #FFDAED; /* Neutrals — light */ --n2p-gray-50: #F5F5F5; --n2p-gray-100: #EFEFEF; --n2p-gray-200: #C5CDD4; --n2p-gray-300: #B6B8B9; --n2p-gray-400: #9B9D9E; --n2p-gray-500: #818384; /* Neutrals — dark */ --n2p-gray-600: #505253; --n2p-gray-700: #393B3C; --n2p-gray-800: #272829; --n2p-gray-850: #242526; --n2p-gray-900: #0E1112; --n2p-black: #000000; --n2p-white: #FFFFFF; /* Channel / semantic (from UI kit) */ --n2p-green: #00D97E; /* WhatsApp / success */ --n2p-green-20: rgba(0,217,126,0.2); --n2p-yellow: #FFC700; /* SMS */ --n2p-red: #FF4D4D; /* Webchat / urgent */ --n2p-red-alt: #ED1F27; /* Alert */ --n2p-warm: #78716C; /* Email */ /* ------------------------------------------------------------ GRADIENTS ------------------------------------------------------------ */ --n2p-gradient-main: linear-gradient(90deg, #0095FF 0%, #740CE8 50%, #FE0687 100%); --n2p-gradient-main-tilt: linear-gradient(135deg, #0095FF 0%, #740CE8 50%, #FE0687 100%); /* Secondary gradient: same stops @ 10% opacity, extending into white */ --n2p-gradient-secondary: linear-gradient(135deg, rgba(0,149,255,0.10) 0%, rgba(116,12,232,0.10) 50%, rgba(254,6,135,0.10) 89%, rgba(255,255,255,0.10) 100%); /* Diamond (radial) backdrop — used behind imagery */ --n2p-gradient-diamond: radial-gradient(ellipse at 50% 50%, rgba(116,12,232,0.20) 0%, rgba(0,149,255,0.20) 30%, rgba(255,255,255,0.20) 85%); --n2p-gradient-tint-bg: linear-gradient(135deg, #CCEAFF 0%, #E0CAFA 50%, #FFDAED 100%); /* ------------------------------------------------------------ SEMANTIC TOKENS (use these in product UI) ------------------------------------------------------------ */ --bg: var(--n2p-white); --bg-alt: var(--n2p-gray-50); --bg-inverse: var(--n2p-dark-blue); --bg-subtle: var(--n2p-gray-100); --fg: var(--n2p-dark-blue); /* ALL body text = dark blue */ --fg-muted: var(--n2p-dark-blue-60); --fg-subtle: var(--n2p-dark-blue-40); --fg-inverse: var(--n2p-white); --accent: var(--n2p-blue); --accent-hover: #0077CC; /* darker-blue hover */ --accent-press: #005C9E; --success: var(--n2p-green); --warning: var(--n2p-yellow); --danger: var(--n2p-red); --border: var(--n2p-gray-200); --border-strong: var(--n2p-dark-blue-20); --divider: var(--n2p-gray-100); /* ------------------------------------------------------------ TYPE SCALE Source: Figma p.34 "Font Treatments: Sizes" Primary family: IDT Sans (custom). Open Sans as web fallback. ------------------------------------------------------------ */ --font-sans: "IDT Sans", "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-secondary: "Open Sans", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Document / print scale (Brand manual A4) */ --fs-h1: 22px; /* Black */ --fs-h2: 18px; /* Black */ --fs-h3: 14px; /* ExtraBold */ --fs-h4: 13px; /* ExtraBold */ --fs-h5: 10px; /* ExtraBold */ --fs-pt1: 10px; /* DemiBold UPPER */ --fs-pt2: 8px; /* Normal UPPER */ --fs-bt1: 12px; /* Light/Regular body */ --fs-bt2: 12px; /* DemiBold body */ --fs-bt3: 10px; --fs-bt4: 9px; --fs-button: 10px; /* Bold */ /* Display scale (decks, hero screens, marketing) */ --fs-display-xl: 120px; /* title-slide hero ("Brand Guidelines.") */ --fs-display-l: 80px; --fs-display-m: 56px; --fs-display-s: 40px; --fs-title: 35px; /* section titles in deck */ --fs-subtitle: 24px; /* Line heights — rule of thumb: +6pt above font-size */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; /* body (12px → 18px) */ --lh-loose: 1.6; /* Weights (available in IDT Sans) */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-demibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fw-extrablack: 950; /* ------------------------------------------------------------ SPACING, RADIUS, SHADOW, MOTION ------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Corner radii — brand manual uses generous soft radii (22px boxes, 80px pills) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* "recuadro" callout box */ --radius-2xl: 32px; --radius-pill: 999px; /* Shadows — understated; brand leans on gradient + color, not elevation */ --shadow-xs: 0 1px 2px rgba(0,37,64,0.05); --shadow-sm: 0 2px 6px rgba(0,37,64,0.06), 0 1px 2px rgba(0,37,64,0.04); --shadow-md: 0 6px 16px rgba(0,37,64,0.08), 0 2px 4px rgba(0,37,64,0.04); --shadow-lg: 0 14px 30px rgba(0,37,64,0.10), 0 4px 10px rgba(0,37,64,0.05); --shadow-focus: 0 0 0 3px rgba(0,149,255,0.35); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .n2p-h1 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: calc(var(--fs-h1) + 6px); color: var(--fg); } .n2p-h2 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: calc(var(--fs-h2) + 6px); color: var(--fg); } .n2p-h3 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-h3); line-height: calc(var(--fs-h3) + 6px); color: var(--fg); } .n2p-h4 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-h4); line-height: calc(var(--fs-h4) + 6px); color: var(--fg); } .n2p-h5 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-h5); line-height: calc(var(--fs-h5) + 6px); color: var(--fg); } .n2p-pretitle-1 { font-family: var(--font-sans); font-weight: var(--fw-demibold); font-size: var(--fs-pt1); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); } .n2p-pretitle-2 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-pt2); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); } .n2p-body-1 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-bt1); line-height: 18px; color: var(--fg); } .n2p-body-1-light { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--fs-bt1); line-height: 18px; color: var(--fg); } .n2p-body-2 { font-family: var(--font-sans); font-weight: var(--fw-demibold); font-size: var(--fs-bt2); line-height: 18px; color: var(--fg); } .n2p-body-3 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-bt3); line-height: 16px; color: var(--fg); } .n2p-body-4 { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--fs-bt4); line-height: 15px; color: var(--fg); } .n2p-button-text { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-button); letter-spacing: 0.02em; } .n2p-caption { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: 11px; color: var(--fg-muted); } /* Display — for decks & hero marketing */ .n2p-display-xl { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display-xl); line-height: 1.05; color: var(--fg); letter-spacing: -0.01em; } .n2p-display-l { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display-l); line-height: 1.05; color: var(--fg); } .n2p-display-m { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display-m); line-height: 1.1; color: var(--fg); } .n2p-display-s { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display-s); line-height: 1.15; color: var(--fg); } .n2p-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-title); line-height: 1.2; color: var(--fg); } .n2p-subtitle { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-subtitle); line-height: 1.25; color: var(--fg); } /* Gradient word — single-word emphasis in extra-bold headlines only */ .n2p-gradient-word { background: var(--n2p-gradient-main); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: var(--fw-extrabold); } /* Gradient underline — max once per slide, under one word/phrase */ .n2p-gradient-underline { position: relative; display: inline-block; font-weight: var(--fw-bold); } .n2p-gradient-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; border-radius: 999px; background: var(--n2p-gradient-main); } /* Generic element defaults (opt-in via a wrapper class) */ .n2p-scope { color: var(--fg); font-family: var(--font-sans); } .n2p-scope h1 { font-weight: var(--fw-black); font-size: clamp(28px, 3.6vw, 56px); line-height: 1.08; } .n2p-scope h2 { font-weight: var(--fw-black); font-size: clamp(22px, 2.6vw, 40px); line-height: 1.12; } .n2p-scope h3 { font-weight: var(--fw-extrabold); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; } .n2p-scope p { font-weight: var(--fw-regular); font-size: 14px; line-height: 22px; max-width: 65ch; } .n2p-scope a { color: var(--accent); text-decoration: none; font-weight: var(--fw-bold); } .n2p-scope a:hover { color: var(--accent-hover); text-decoration: underline; }