/* ============================================================ Adcresco Design System — Colors & Typography ============================================================ The Adcresco brand revolves around a warm orange spectrum on white, with peach tints used as a secondary surface for benefit lists, feature cards, and CTA frames. Deep near-black serves as primary text and dark section background. Source: adcresco.hr (full site screenshots provided April 2026). ============================================================ */ /* -------- Fonts -------- */ /* The site appears to set body type in Poppins (a free Google Font), which is also our display face. If/when the real brand font files arrive, drop them into /fonts and swap the @font-face below. */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); :root { /* =========================================================== COLOR PRIMITIVES =========================================================== */ /* Orange — the brand's signature. The CTA pill uses a vertical gradient from --orange-500 (top) to --orange-600 (bottom). The logo gradient runs orange-500 → orange-300 (yellow). */ --orange-100: #FFE6D6; /* faint peach — section tint background */ --orange-200: #FCD6BD; /* check-list pill background */ --orange-300: #F9B65A; /* logo bottom-node yellow-orange */ --orange-400: #F58D44; /* secondary highlight */ --orange-500: #F26F2D; /* PRIMARY — buttons, links, icon stroke */ --orange-600: #E65A1F; /* hover / pressed */ --orange-700: #C24812; /* dark accent on orange */ /* Peach surface — large soft-tinted backgrounds (form panel, hero accent, "uvodne suradnje" footer band). Heavier than orange-100; close to the CTA section colour. */ --peach-bg: #EE6E2A; /* the saturated "POŠALJI UPIT" block */ --peach-soft: #FDE9DE; /* the feature-card pill background */ --peach-list: #FCE2D2; /* the orange checklist pill bg */ /* Neutrals — black through warm light. */ --ink-900: #111111; /* headings */ --ink-800: #1E1E1E; /* primary text */ --ink-700: #353535; /* secondary text / dark cards */ --ink-600: #5C5C5C; /* tertiary text */ --ink-500: #8C8C8C; /* muted, captions */ --ink-400: #B8B5B0; /* borders on tinted bg */ --ink-300: #D8D5D0; /* hairlines, input borders */ --ink-200: #ECE9E4; /* subtle separator */ --ink-100: #F5F1EA; /* warm light footer ribbon */ --ink-050: #FAF7F2; /* off-white card mat */ --paper: #FFFFFF; /* card surface */ --dark-panel: #2F2F2F; /* the dark "nakon uvodnog sastanka" band */ /* Semantic */ --success: #2BAE5B; --warning: #F2B43A; --error: #E04F4F; /* =========================================================== SEMANTIC TOKENS =========================================================== */ --brand: var(--orange-500); --brand-hover: var(--orange-600); --brand-soft: var(--peach-list); --bg-page: var(--paper); --bg-tint: var(--peach-soft); --bg-dark: var(--dark-panel); --bg-cta: var(--peach-bg); --bg-footer: var(--ink-100); --fg-default: var(--ink-800); --fg-strong: var(--ink-900); --fg-muted: var(--ink-600); --fg-faint: var(--ink-500); --fg-on-brand: #FFFFFF; --fg-on-dark: #FFFFFF; --line-default: var(--ink-200); --line-strong: var(--ink-300); --line-onTint: #F3CFB7; /* the cream-peach hairline used on tinted cards */ /* =========================================================== TYPOGRAPHY =========================================================== */ --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); /* Type scale (1.250 — major third). Display: hero / page titles H1 : page hero subhead H2 : section UPPERCASE labels (often tracked +0.02em) H3 : feature card titles H4 : list-item titles Body : 16/24 Small : 14/20 Tiny : 12/16 */ --fs-display: 56px; --lh-display: 1.1; --ls-display: -0.01em; --fs-h1: 40px; --lh-h1: 1.15; --ls-h1: -0.01em; --fs-h2: 28px; --lh-h2: 1.25; --ls-h2: 0.02em; --fs-h3: 20px; --lh-h3: 1.35; --ls-h3: 0.01em; --fs-h4: 18px; --lh-h4: 1.4; --fs-body: 16px; --lh-body: 1.6; --fs-small: 14px; --lh-small: 1.55; --fs-tiny: 12px; --lh-tiny: 1.45; --ls-tiny: 0.06em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; /* =========================================================== SPACING / RADII / SHADOW / MOTION =========================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Adcresco uses TWO radius families: - Soft cards: 12–16px - Capsule pills: fully rounded (CTA, checklist items, footer-bar nav highlight) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Shadows are soft and warm — never harsh. The "feature card" uses a very light drop, the CTA pill uses a colored glow beneath the orange. */ --shadow-card: 0 6px 24px -8px rgba(31, 27, 23, 0.12), 0 2px 6px -2px rgba(31, 27, 23, 0.06); --shadow-pill: 0 8px 20px -6px rgba(242, 111, 45, 0.45); --shadow-hover: 0 14px 36px -10px rgba(31, 27, 23, 0.18), 0 4px 10px -4px rgba(31, 27, 23, 0.08); /* Easing & motion — calm, no bounces. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.05, 0.68, 0.2); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* Gradients */ --grad-cta: linear-gradient(180deg, #F58D44 0%, #E65A1F 100%); --grad-logo: linear-gradient(160deg, #E65A1F 0%, #F58D44 45%, #F9B65A 100%); --grad-band: linear-gradient(180deg, #F7833A 0%, #EE6E2A 100%); /* CTA footer band */ /* Layout */ --container-max: 1200px; --container-pad: 24px; } /* =========================================================== SEMANTIC ELEMENT DEFAULTS =========================================================== */ html { color: var(--fg-default); background: var(--bg-page); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--fg-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); color: var(--fg-strong); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); text-transform: uppercase; /* most h2 section labels are ALLCAPS on adcresco */ color: var(--fg-strong); } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-h3); color: var(--brand); /* feature-card titles are orange */ } h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--fg-strong); } p { color: var(--fg-default); } small, .small { font-size: var(--fs-small); line-height: var(--lh-small); } .eyebrow { font-size: var(--fs-tiny); line-height: var(--lh-tiny); letter-spacing: var(--ls-tiny); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-muted); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } code, kbd, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } /* Utility classes used across cards & UI kit */ .surface { background: var(--paper); } .surface-tint { background: var(--bg-tint); } .surface-dark { background: var(--bg-dark); color: var(--fg-on-dark); } .surface-cta { background: var(--bg-cta); color: var(--fg-on-brand); } .surface-footer{ background: var(--bg-footer); }