/* ============================================================ PIXIDE MEDIA - THEME CONFIG ------------------------------------------------------------ This file is the single source of truth for the site's look. Change the values below and every page - including the inline SVG logo, buttons, links, charts and footer - updates with it. Palette: Praper-red accent on near-black + neutral grays (neutrals modeled on adcrest.agency / brandcrest.in / digitalsme.biz). Swap --c-primary when the final logo lands. ============================================================ */ :root { /* ---- 1. Brand colors ------------------------------------ */ --c-primary: #DF000F; /* main brand color (buttons, accents, links) */ --c-primary-dark: #B4000C; /* hover state of the above */ --c-primary-soft: #FFEFF0; /* pale tint (icon chips, tags, highlights) */ --c-ink: #141414; /* headings + dark sections + footer */ --c-ink-2: #262626; /* slightly lighter (hovers, panels) */ /* ---- 2. Neutrals ----------------------------------------- */ --c-text: #696969; /* body copy */ --c-muted: #8C8C8C; /* captions, small print */ --c-bg: #FFFFFF; /* page background */ --c-bg-soft: #F9F9F9; /* alternating section background */ --c-line: #ECECEC; /* borders, dividers */ --c-white: #FFFFFF; /* On-dark text (footer, stats band, dark cards) */ --c-on-dark: #FFFFFF; --c-on-dark-muted: #B9B9B9; /* ---- 3. Typography --------------------------------------- */ /* Praper Media uses Poppins throughout; swap both lines to re-font the site. Remember to update the Google Fonts in each page's if you change the family. */ --font-display: 'Poppins', system-ui, sans-serif; /* headings */ --font-body: 'Poppins', system-ui, sans-serif; /* everything else */ /* ---- 4. Shape & depth ------------------------------------ */ --radius-lg: 22px; --radius-md: 14px; --radius-sm: 9px; --radius-pill: 999px; --shadow-card: 0 10px 30px rgba(0, 0, 0, .07); --shadow-lift: 0 22px 48px rgba(0, 0, 0, .12); /* ---- 5. Layout ------------------------------------------- */ --container: 1200px; --section-y: 6.5rem; /* vertical rhythm between sections */ --section-y-m: 4.25rem; /* ...on mobile */ }