/* ========================================================================== AMLA CLONE — DESIGN TOKENS -------------------------------------------------------------------------- Source of truth: the live site www.amla.europa.eu, which is built on the European Commission's "Europa Component Library" (ECL) distributed via the Europa Web CMS theme (`ewcms_theme`, OpenEuropa / oe_theme). Every value below was extracted from the site's real compiled CSS custom properties (`--ecl-*`, 157 unique tokens across 5 `:root` blocks, ~873 KB of bundled CSS) plus the AMLA logo SVG fills. Logo brand colours (from AMLA_logo.svg): #003399 (short form #039) — EU / AMLA blue, the wordmark & symbol #ffe600 — bright yellow accent inside the symbol ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND CORE ------------------------------------------------------------------ */ --ecl-color-primary: #003399; /* EU blue — the defining brand colour */ --ecl-color-primary-100: #003399; --ecl-color-secondary: #ffcc00; /* EU yellow — accent / highlight */ --ecl-color-secondary-100: #ffcc00; --ecl-color-branding: #003399; --ecl-color-accent: #00e9ff; /* cyan accent */ --ecl-color-accent-100: #00e9ff; --ecl-color-accent-30: #b3f8ff; /* Logo-only yellow (brighter than the ECL secondary) */ --amla-logo-yellow: #ffe600; --amla-logo-blue: #003399; /* ------------------------------------------------------------------ 2. PRIMARY BLUE TINTS (backgrounds, hovers, borders) ------------------------------------------------------------------ */ --ecl-color-primary-5: #f3f6fc; --ecl-color-primary-10: #e7edfa; --ecl-color-primary-20: #cfdaf5; --ecl-color-primary-40: #9fb5ea; --ecl-color-primary-60: #6e91e0; --ecl-color-primary-80: #3e6cd5; --ecl-color-primary-120: #003399; --ecl-color-primary-130: #0a328e; /* primary hover */ --ecl-color-primary-140: #003399; --ecl-color-primary-160: #0a328e; /* link hover */ --ecl-color-primary-180: #082b7a; /* active / pressed */ /* ------------------------------------------------------------------ 3. SECONDARY YELLOW TINTS ------------------------------------------------------------------ */ --ecl-color-secondary-10: #fffae6; --ecl-color-secondary-20: #fff5cc; --ecl-color-secondary-40: #ffeb99; --ecl-color-secondary-60: #ffe066; --ecl-color-secondary-80: #ffd633; --ecl-color-secondary-120: #cca300; --ecl-color-secondary-140: #997a00; --ecl-color-secondary-160: #b38f00; --ecl-color-secondary-180: #997a00; /* ------------------------------------------------------------------ 4. NEUTRALS ("dark" ramp — used for text, borders, surfaces) ------------------------------------------------------------------ */ --ecl-color-dark: #262b38; --ecl-color-dark-100: #262b38; /* default body text */ --ecl-color-dark-5: #f4f5f5; /* subtle surface */ --ecl-color-dark-10: #e9eaeb; --ecl-color-dark-20: #d4d5d7; /* borders */ --ecl-color-dark-40: #a8aaaf; --ecl-color-dark-60: #7d8088; /* muted / meta text */ --ecl-color-dark-80: #515560; --ecl-color-dark-120: #1e222d; --ecl-color-dark-140: #171a22; /* ------------------------------------------------------------------ 5. SEMANTIC / STATUS ------------------------------------------------------------------ */ --ecl-color-info: #0e47cb; --ecl-color-info-100: #0e47cb; --ecl-color-info-5: #f3f6fc; --ecl-color-success: #00a174; --ecl-color-success-100: #00a174; --ecl-color-success-5: #f2fcf9; --ecl-color-success-midtone: #ccf4e9; --ecl-color-warning: #ff8133; --ecl-color-warning-100: #ff8133; --ecl-color-warning-5: #fff7f2; --ecl-color-error: #d7003d; --ecl-color-error-100: #d7003d; --ecl-color-error-5: #fef2f5; --ecl-color-error-midtone: #fcccda; --ecl-color-visited: #510dcd; --ecl-color-visited-100: #510dcd; /* ------------------------------------------------------------------ 6. TRANSPARENCY LAYERS ------------------------------------------------------------------ */ --ecl-color-white-alpha-25: rgba(255, 255, 255, 0.025); --ecl-color-white-alpha-50: rgba(255, 255, 255, 0.05); --ecl-color-white-alpha-100: rgba(255, 255, 255, 0.10); --ecl-color-white-alpha-200: rgba(255, 255, 255, 0.15); --ecl-color-white-alpha-300: rgba(255, 255, 255, 0.30); --ecl-color-white-alpha-500: rgba(255, 255, 255, 0.50); --ecl-color-white-alpha-800: rgba(255, 255, 255, 0.80); --ecl-color-dark-alpha-50: rgba(25, 29, 38, 0.05); --ecl-color-dark-alpha-100: rgba(25, 29, 38, 0.10); --ecl-color-dark-alpha-200: rgba(25, 29, 38, 0.20); --ecl-color-dark-alpha-400: rgba(25, 29, 38, 0.40); --ecl-color-dark-alpha-500: rgba(25, 29, 38, 0.50); --ecl-color-dark-alpha-700: rgba(25, 29, 38, 0.72); --ecl-color-dark-alpha-900: rgba(25, 29, 38, 0.90); /* ------------------------------------------------------------------ 7. LINKS / FOCUS ------------------------------------------------------------------ */ --ecl-link-color: var(--ecl-color-primary); --ecl-link-color-hover: var(--ecl-color-primary-160); --ecl-link-color-active: var(--ecl-color-dark); --ecl-link-text-decoration: underline; --ecl-focus-outline-color: var(--ecl-color-primary); --ecl-focus-outline-width: 3px; --ecl-focus-outline-offset: 2px; /* ------------------------------------------------------------------ 8. TYPOGRAPHY (ECL ships Arial-based stacks — no webfonts are loaded) ------------------------------------------------------------------ */ --ecl-font-family-default: arial, sans-serif; --ecl-font-family-print-default: verdana, sans-serif; --ecl-font-size-2xs: 0.625rem; /* 10px */ --ecl-font-size-xs: 0.75rem; /* 12px */ --ecl-font-size-s: 0.875rem; /* 14px */ --ecl-font-size-m: 1rem; /* 16px — base */ --ecl-font-size-l: 1.25rem; /* 20px */ --ecl-font-size-xl: 1.5rem; /* 24px */ --ecl-font-size-2xl: 1.75rem; /* 28px */ --ecl-font-size-3xl: 2rem; /* 32px */ --ecl-font-size-4xl: 2.25rem; /* 36px */ --ecl-font-size-5xl: 2.625rem; /* 42px */ --ecl-line-height-m: 1.5rem; --ecl-line-height-l: 1.75rem; --ecl-line-height-xl: 1.75rem; --ecl-line-height-2xl: 2rem; --ecl-line-height-3xl: 2.5rem; --ecl-line-height-4xl: 2.75rem; --ecl-line-height-5xl: 3.25rem; /* Composite font shorthands exactly as ECL exposes them */ --ecl-font-2xs: normal normal 400 0.625rem/1rem var(--ecl-font-family-default); --ecl-font-xs: normal normal 400 0.75rem/1.125rem var(--ecl-font-family-default); --ecl-font-s: normal normal 400 0.875rem/1.125rem var(--ecl-font-family-default); --ecl-font-m: normal normal 400 1rem/1.5rem var(--ecl-font-family-default); --ecl-font-l: normal normal 400 1.25rem/1.75rem var(--ecl-font-family-default); --ecl-font-xl: normal normal 400 1.5rem/1.75rem var(--ecl-font-family-default); --ecl-font-2xl: normal normal 400 1.75rem/2rem var(--ecl-font-family-default); --ecl-font-3xl: normal normal 400 2rem/2.5rem var(--ecl-font-family-default); --ecl-font-4xl: normal normal 400 2.25rem/2.75rem var(--ecl-font-family-default); --ecl-font-5xl: normal normal 400 2.625rem/3.25rem var(--ecl-font-family-default); --ecl-font-prolonged-s: normal normal 400 0.875rem/1.25rem var(--ecl-font-family-default); --ecl-font-prolonged-m: normal normal 400 1rem/1.5rem var(--ecl-font-family-default); --ecl-font-prolonged-l: normal normal 400 1.25rem/1.75rem var(--ecl-font-family-default); --ecl-font-ui-s: normal normal 400 0.875rem/1.5rem var(--ecl-font-family-default); --ecl-font-ui-m: normal normal 400 1rem/1.75rem var(--ecl-font-family-default); --ecl-max-width: 80ch; /* ------------------------------------------------------------------ 9. SPACING SCALE ------------------------------------------------------------------ */ --ecl-spacing-2xs: 0.25rem; --ecl-spacing-xs: 0.5rem; --ecl-spacing-s: 0.75rem; --ecl-spacing-m: 1rem; --ecl-spacing-l: 1.5rem; --ecl-spacing-xl: 2rem; --ecl-spacing-2xl: 2.5rem; --ecl-spacing-3xl: 3rem; --ecl-spacing-4xl: 4rem; --ecl-text-field-height: 3rem; /* ------------------------------------------------------------------ 10. ELEVATION (ECL tints every shadow with EU blue) ------------------------------------------------------------------ */ --ecl-shadow-1: 0 2px 4px rgba(9, 49, 142, .08), 0 0 10px rgba(9, 49, 142, .04), 0 4px 5px rgba(9, 49, 142, .04), 0 -4px 4px rgba(9, 49, 142, .04); --ecl-shadow-2: 0 3px 5px rgba(9, 49, 142, .04), 0 0 18px rgba(9, 49, 142, .04), 0 6px 10px rgba(9, 49, 142, .04), 0 -4px 4px rgba(9, 49, 142, .04); --ecl-shadow-3: 0 7px 8px rgba(9, 49, 142, .08), 0 0 22px rgba(9, 49, 142, .04), 0 12px 17px rgba(9, 49, 142, .04), 0 -4px 4px rgba(9, 49, 142, .04); --ecl-shadow-4: 0 11px 15px rgba(9, 49, 142, .08), 0 9px 46px rgba(9, 49, 142, .04), 0 24px 38px rgba(9, 49, 142, .04), 0 -4px 4px rgba(9, 49, 142, .04); /* ------------------------------------------------------------------ 11. LAYOUT ------------------------------------------------------------------ */ --ecl-container-max-width: 1200px; --ecl-container-padding: var(--ecl-spacing-m); --ecl-grid-gutter: var(--ecl-spacing-m); --ecl-header-height-s: 5.5rem; --ecl-header-height-l: 8.5rem; --ecl-radius: 0px; /* ECL is deliberately square — no border radii */ /* Local aliases used across the clone's stylesheets */ --c-p: var(--ecl-color-primary); --c-p-130: var(--ecl-color-primary-130); --c-p-160: var(--ecl-color-primary-160); --c-p-180: var(--ecl-color-primary-180); --c-p-5: var(--ecl-color-primary-5); --c-p-10: var(--ecl-color-primary-10); --c-p-20: var(--ecl-color-primary-20); --c-s: var(--ecl-color-secondary); --c-s-40: var(--ecl-color-secondary-40); --c-s-100: var(--ecl-color-secondary-100); --c-d: var(--ecl-color-dark); --c-d-20: var(--ecl-color-dark-20); --c-d-60: var(--ecl-color-dark-60); --c-d-5: var(--ecl-color-dark-5); --c-w: #ffffff; }