/* ============================================================
AceAgency / Laboratorul de Conversii — Colors & Type
============================================================
Single source of truth for brand CSS variables.
Import this file into any design HTML:
============================================================ */
/* ------------------------------------------------------------
Fonts — Google Fonts CDN (Red Hat Display) + local Glacial Indifference
If Glacial Indifference woff2 files are not installed locally,
headings will fall back gracefully to Red Hat Display.
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
/* Glacial Indifference păstrat ca fallback local dacă e nevoie offline */
@font-face {
font-family: "Glacial Indifference";
src: url("./fonts/GlacialIndifference-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Glacial Indifference";
src: url("./fonts/GlacialIndifference-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Body font (Inter) via Google Fonts — keep CDN link in HTML :
*/
:root {
/* ──────────────────────────────────────────────────────────
Brand Colors — AceAgency Violet Palette
────────────────────────────────────────────────────────── */
--ace-violet: #650CBE; /* Primary accent. CTAs, links, highlights. */
--ace-violet-light: #7A1FD8; /* Hover state on violet. */
--ace-violet-dark: #4A0A8F; /* Gradient end, pressed state. */
--ace-violet-glow: rgba(101, 12, 190, 0.15);
--ace-violet-soft: rgba(101, 12, 190, 0.10);
/* Secondary brand (from PDF) — used sparingly */
--ace-cobalt: #4500D0; /* Secondary accent — rarely used */
--ace-mint: #66F3A6; /* Accent highlight — rarely used */
--ace-burgundy: #56151A; /* Accent highlight — rarely used */
/* ──────────────────────────────────────────────────────────
Neutrals — warm near-black system
────────────────────────────────────────────────────────── */
--ace-black: #262523; /* Primary dark. Warm, not cold. */
--ace-black-deep: #1a1918; /* Dark gradient end */
--ace-elevated: #3a3836; /* Card surface on dark */
--ace-border-dark: rgba(74, 70, 67, 0.5);
--ace-white: #FFFFFF;
--ace-off-white: #FAF9F7; /* Warm off-white (light-warm theme) */
--ace-bg-1: #F5F5F5; /* Light grey bg */
--ace-bg-2: #EBEBEB; /* Light-muted bg */
--ace-grey-100: #E8E6E3; /* Warm border */
--ace-grey-200: #D9D9D9; /* Muted text on dark */
--ace-grey-500: #71706E; /* Warm greige muted */
--ace-grey-600: #666666; /* Muted text on light */
--ace-grey-700: #4a4643;
/* ──────────────────────────────────────────────────────────
Semantic — foreground / background / borders
────────────────────────────────────────────────────────── */
--fg-1: var(--ace-black); /* Primary text on light */
--fg-2: var(--ace-grey-500); /* Muted text on light */
--fg-on-dark-1: var(--ace-white);
--fg-on-dark-2: var(--ace-grey-200);
--fg-accent: var(--ace-violet);
--bg-page: var(--ace-off-white);
--bg-dark: var(--ace-black);
--bg-card: var(--ace-white);
--bg-card-dark: var(--ace-elevated);
--bg-accent: var(--ace-violet);
--border-1: var(--ace-grey-100);
--border-dark: var(--ace-border-dark);
/* ──────────────────────────────────────────────────────────
Gradients
────────────────────────────────────────────────────────── */
--grad-brand: linear-gradient(135deg, #650CBE 0%, #4A0A8F 100%);
--grad-brand-glow: radial-gradient(circle, rgba(101,12,190,0.20), transparent 70%);
--grad-dark-fade: linear-gradient(180deg, #262523 0%, #1a1918 100%);
/* ──────────────────────────────────────────────────────────
Typography — Families
────────────────────────────────────────────────────────── */
--font-heading: "Red Hat Display", Arial, sans-serif;
--font-subheading: "Red Hat Display", Arial, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* ──────────────────────────────────────────────────────────
Type Scale — desktop
────────────────────────────────────────────────────────── */
--text-display-xl: 6.25rem; /* 100px */
--text-display-lg: 4.5rem; /* 72px */
--text-h1: 3.25rem; /* 52px */
--text-h2: 2.63rem; /* 42px */
--text-h3: 2rem; /* 32px */
--text-h4: 1.5rem; /* 24px */
--text-h5: 1.25rem; /* 20px */
--text-body-lg: 1.125rem; /* 18px */
--text-body: 1rem; /* 16px */
--text-body-sm: 0.875rem; /* 14px */
--text-overline: 0.75rem; /* 12px */
--leading-display: 0.94;
--leading-heading: 1.1;
--leading-body: 1.6;
--leading-tight: 1.2;
--tracking-tight: -0.03em;
--tracking-normal: -0.02em;
--tracking-body: 0;
--tracking-overline: 0.18em; /* uppercase labels */
/* ──────────────────────────────────────────────────────────
Spacing (8px base)
────────────────────────────────────────────────────────── */
--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; --space-24: 96px;
--space-32: 128px;--space-40: 160px;
/* Section rhythm */
--section-py: 96px;
--section-py-hero: 128px;
--container-max: 1280px;
/* ──────────────────────────────────────────────────────────
Radius
────────────────────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-3xl: 36px;
--radius-panel: 2rem;
--radius-full: 9999px;
/* ──────────────────────────────────────────────────────────
Shadows
────────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
--shadow-accent: 0 4px 20px rgba(101,12,190,0.15);
--shadow-accent-lg: 0 8px 40px rgba(101,12,190,0.25);
/* ──────────────────────────────────────────────────────────
Motion
────────────────────────────────────────────────────────── */
--dur-fast: 200ms;
--dur-normal: 300ms;
--dur-smooth: 500ms;
--dur-slow: 800ms;
--ease-out: ease-out;
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--ease-power2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ============================================================
Semantic typography classes
============================================================ */
.t-display-xl {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(3rem, 8vw, var(--text-display-xl));
line-height: var(--leading-display); letter-spacing: var(--tracking-tight);
}
.t-display-lg {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(2.5rem, 6vw, var(--text-display-lg));
line-height: var(--leading-heading); letter-spacing: var(--tracking-tight);
}
.t-h1 {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(2rem, 5vw, var(--text-h1));
line-height: var(--leading-heading); letter-spacing: var(--tracking-normal);
}
.t-h2 {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(1.75rem, 4vw, var(--text-h2));
line-height: var(--leading-heading); letter-spacing: var(--tracking-normal);
}
.t-h3 {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(1.5rem, 3vw, var(--text-h3));
line-height: var(--leading-tight);
}
.t-h4 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h4); line-height: var(--leading-tight); }
.t-h5 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h5); line-height: var(--leading-tight); }
.t-subheading {
font-family: var(--font-subheading); font-weight: 400;
font-size: var(--text-h5); line-height: 1.5; color: var(--fg-2);
}
.t-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: var(--leading-body); }
.t-body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
.t-body-sm { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: var(--leading-body); }
.t-overline {
font-family: var(--font-body); font-weight: 600;
font-size: var(--text-overline); text-transform: uppercase;
letter-spacing: var(--tracking-overline); color: var(--fg-2);
}
.t-stat {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1; letter-spacing: var(--tracking-tight);
}
/* ============================================================
Data-theme scoping
============================================================ */
[data-theme="dark"] { --section-bg:#262523; --section-text:#D9D9D9; --section-text-muted:#a0a0a0; --section-accent:#650CBE; --section-border:rgba(74,70,67,0.5); --section-card-bg:#3a3836; }
[data-theme="light"] { --section-bg:#F5F5F5; --section-text:#262523; --section-text-muted:#666666; --section-accent:#650CBE; --section-border:#d4d4d4; --section-card-bg:#fff; }
[data-theme="light-warm"] { --section-bg:#FAF9F7; --section-text:#262523; --section-text-muted:#71706E; --section-accent:#650CBE; --section-border:#E8E6E3; --section-card-bg:#fff; }
[data-theme="light-muted"]{ --section-bg:#EBEBEB; --section-text:#262523; --section-text-muted:#666666; --section-accent:#650CBE; --section-border:#c4c4c4; --section-card-bg:#fff; }
[data-theme="accent"],
[data-theme="violet"] { --section-bg:#650CBE; --section-text:#FFFFFF; --section-text-muted:#d4d4d4; --section-accent:#FFFFFF; --section-border:rgba(101,12,190,0.5); --section-card-bg:#4A0A8F; }