/* ============================================================================= * SEVA GLOBAL — GLOBAL STYLESHEET (design tokens) * Source of truth: "Seva-Global Website project AS.xlsx" → CSS tab. * Version: 1.0 · Project: Website redesign * * This file is hand-authored and shipped as-is (NOT Tailwind-compiled). It * defines the design-system custom properties. Tailwind utilities + the runtime * brand bridge (--sg-*) live separately in assets/css/main.css. * Loaded before main.css (see inc/enqueue.php). * ============================================================================= */ :root { /* --------------------------------------------------------------------------- * 01. COLOR PALETTE — Seva Blue ramp (primary brand, CTAs, links, nav) * ------------------------------------------------------------------------- */ --color-blue-50: #E8F1F9; --color-blue-100: #C0D4EB; --color-blue-200: #90C0F0; --color-blue-300: #7794BF; --color-blue-400: #4860A8; --color-blue-500: #3C60A8; /* PRIMARY — CTAs, links */ --color-blue-600: #3C54A8; /* hover */ --color-blue-700: #213054; /* Navy — headlines, nav, footer, dark cards */ --color-blue-900: #152747; /* Deep navy — darkest surface */ /* Semantic aliases — use these in components, never raw hex. */ --color-brand: var(--color-blue-500); --color-brand-hover: var(--color-blue-600); --color-brand-tint: var(--color-blue-50); --color-brand-light: var(--color-blue-100); --color-brand-mid: var(--color-blue-300); --color-brand-sky: var(--color-blue-200); --color-navy: var(--color-blue-700); --color-navy-deep: var(--color-blue-900); /* --------------------------------------------------------------------------- * 02. SERVICE CARD COLORS — per-service ramp (tint / light / mid / base / dark) * ------------------------------------------------------------------------- */ /* Indian Weddings — Magenta */ --color-magenta-tint: #FBEAF0; --color-magenta-light: #F4C0D1; --color-magenta-mid: #D4537E; --color-magenta: #993556; --color-magenta-dark: #4B1528; --color-magenta-deep: #72243E; /* LGBTQ+ Events — Teal */ --color-teal-tint: #E1F5EE; --color-teal-light: #9FE1CB; --color-teal-mid: #22A07A; --color-teal: #0F6E56; --color-teal-dark: #04342C; /* Jewish Social Events — Purple */ --color-purple-tint: #EEEDFE; --color-purple-light: #AFA9EC; --color-purple-mid: #7F77DD; --color-purple: #534AB7; --color-purple-dark: #26215C; --color-purple-deep: #3C3489; /* Global Holiday Celebrations — Amber */ --color-amber-tint: #FAEEDA; --color-amber-light: #FAC775; --color-amber-mid: #ECA72A; --color-amber: #854F0B; --color-amber-dark: #412402; --color-amber-deep: #633806; /* --------------------------------------------------------------------------- * 03. NEUTRAL PALETTE * ------------------------------------------------------------------------- */ --color-neutral-50: #F5F6F8; --color-neutral-100: #E4E7ED; --color-neutral-200: #C9CED8; --color-neutral-300: #9AA2B0; --color-neutral-400: #6B7585; --color-neutral-600: #4A5568; --color-neutral-700: #2D3748; --color-neutral-900: #1A202C; /* --------------------------------------------------------------------------- * 04. SEMANTIC / STATUS COLORS * ------------------------------------------------------------------------- */ --color-success: #1A7F3C; --color-success-tint: #D4EDDA; --color-warning: #B7791F; --color-warning-tint: #FFF3CD; --color-error: #C0392B; --color-error-tint: #FADBD8; --color-info: var(--color-brand); --color-info-tint: var(--color-brand-tint); /* --------------------------------------------------------------------------- * 05. SURFACE COLORS — backgrounds, borders, text * ------------------------------------------------------------------------- */ --color-bg: #FFFFFF; --color-bg-subtle: var(--color-neutral-50); /* Alternating sections */ --color-border: var(--color-neutral-100); /* Default card borders */ --color-border-strong: var(--color-neutral-200); /* Input default, hover */ --color-text: var(--color-neutral-900); /* Primary body text */ --color-text-muted: var(--color-neutral-600); /* Secondary body */ --color-text-hint: var(--color-neutral-400); /* Captions, labels, meta */ --color-white: #FFFFFF; /* --------------------------------------------------------------------------- * 06. TYPOGRAPHY (scale is documented here; the theme currently renders the * pixel-matched scale — these clamp() values are the spec reference) * ------------------------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; /* logo lockup + pull quotes only */ --font-mono: 'Courier New', Courier, monospace; --text-hero: clamp(32px, 4vw, 44px); --text-h1: clamp(26px, 3vw, 36px); --text-h2: clamp(20px, 2.5vw, 28px); --text-h3: clamp(16px, 2vw, 20px); --text-body: 15px; --text-sm: 13px; --text-xs: 12px; --text-xxs: 11px; --text-eyebrow: 11px; --font-normal: 400; --font-medium: 500; --font-semi: 600; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 1.85; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.07em; /* eyebrow labels */ /* --------------------------------------------------------------------------- * 06b. LIST CHECKMARK — the bullet used on every content list site-wide. * The COLOUR is overridable from assets/css/seva-custom.css (--sg-check-color). * The icon is a checkmark SVG used as a CSS mask, so it takes that colour. * ------------------------------------------------------------------------- */ --sg-check-color: rgb(196 106 74); /* #C46A4A — client-editable in seva-custom.css */ /* The original brush-stroke checkmark (assets/img/icons/tick.png), used as an alpha mask so it keeps its exact hand-painted shape but takes the colour above. Path is relative to this file (assets/css/). */ --sg-check-icon: url("../img/icons/tick.png"); /* --------------------------------------------------------------------------- * 06c. EYEBROW LABEL COLOUR — the small uppercase label above headings. * Two tokens because the eyebrow appears on both light and dark sections and * one colour cannot be legible on both. * * These MUST stay legible: the eyebrow renders at 18.67px regular (14.4px on * phones), which WCAG treats as normal text, so it needs a 4.5:1 contrast * ratio against its background — the old pale blue #90C0F0 managed only * 1.91:1 on white and 3.05:1 on the blue CTA bands. If you change these, * check the new colour at webaim.org/resources/contrastchecker. * Both are overridable from assets/css/seva-custom.css. * ------------------------------------------------------------------------- */ /* On white / cream / pale-blue sections. Brand blue: 5.83:1 on white. */ --sg-eyebrow-color: rgb(var(--sg-brand, 69 98 173)); /* On the dark blue CTA bands. Pale brand tint: 5.07:1 on the band. */ --sg-eyebrow-color-on-dark: rgb(var(--sg-brand-light, 232 240 249)); /* --------------------------------------------------------------------------- * 07. SPACING — 4px base grid * ------------------------------------------------------------------------- */ --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; --section-pad-x: var(--space-20); /* --------------------------------------------------------------------------- * 07b. VERTICAL RHYTHM — the three site-wide spacing rules. * * These three values control almost all vertical spacing on the site. Change a * number here and it updates everywhere, on every page. * * TEXT 30px gap between two pieces of text (heading -> paragraph, * paragraph -> paragraph, paragraph -> bullet list) * BLOCK 40px gap between text and a different kind of block * (a card grid, an image, a button, a bordered box) * SECTION 30px padding at the top AND bottom of every section, so the gap * between two stacked sections is 30 + 30 = 60px (the maximum) * * NOTE: these deliberately do NOT control spacing *inside* a card (icon -> * title, title -> description) or inside a form (label -> input). Those are * intentionally tighter — see --card-gap / --field-gap below. * ------------------------------------------------------------------------- */ --sg-space-title: 16px; /* a heading and ITS OWN paragraph — deliberately tight so the pair reads as one unit */ --sg-space-text: 30px; --sg-space-block: 40px; --sg-space-section: 30px; /* x2 = 60px between two sections */ /* Component-internal spacing (kept tight on purpose — a 30px gap between a card's icon and its title would break the card layout). */ --card-gap: 16px; /* card icon -> title, card title -> description */ --field-gap: 6px; /* form label -> input */ /* Back-compat alias: older rules referenced --section-pad-y. */ --section-pad-y: var(--sg-space-section); --section-pad-mob: var(--sg-space-section); /* --------------------------------------------------------------------------- * 08. BORDER RADIUS * ------------------------------------------------------------------------- */ --radius-sm: 4px; /* Tags, small chips */ --radius-md: 8px; /* Inputs, icon boxes */ --radius-lg: 12px; /* Cards, testimonials */ --radius-xl: 16px; /* Section blocks, CTA band */ --radius-2xl: 24px; /* Large hero blocks */ --radius-pill: 999px; /* All buttons, badges, nav pills */ --radius-full: 50%; /* Avatars, circular elements */ /* --------------------------------------------------------------------------- * 09. BORDERS * ------------------------------------------------------------------------- */ --border-thin: 0.5px solid var(--color-border); --border-default: 1px solid var(--color-border-strong); --border-featured: 1.5px solid var(--color-brand); --border-accent: 2px solid var(--color-brand); /* Quote left border */ /* --------------------------------------------------------------------------- * 10. SHADOWS — navy-tinted * ------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(33, 48, 84, 0.04); --shadow-sm: 0 2px 6px rgba(33, 48, 84, 0.06); --shadow-md: 0 4px 16px rgba(33, 48, 84, 0.08); --shadow-lg: 0 8px 32px rgba(33, 48, 84, 0.10); --shadow-xl: 0 16px 48px rgba(33, 48, 84, 0.12); /* --------------------------------------------------------------------------- * 11. MOTION / TRANSITIONS (named in the spec; values are dev-set) * ------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* --------------------------------------------------------------------------- * 12. Z-INDEX (named in the spec; values are dev-set) * ------------------------------------------------------------------------- */ --z-header: 50; --z-dropdown: 40; --z-overlay: 60; --z-modal: 70; }