/** * Theme frontend color palette + gradients + shadows. * * DO NOT edit this file for per-site customisation. Copy it to * `variables.css` in the same folder — `variables.css` is gitignored, * so every site can hold its own brand colours without merge conflicts. * * cp assets/css/variables.example.css assets/css/variables.css * # then edit variables.css * * Loading: * - functions.php enqueues `variables.css` (or falls back to this file * if `variables.css` isn't present) on `wp_enqueue_scripts` at * priority 1, before every other frontend stylesheet. * - Because CSS custom properties defined on :root cascade globally, * any subsequent stylesheet can use `var(--c-brand)` etc without * needing an @import. * * Scope: FRONTEND ONLY. Admin CSS (wallet-admin.css, admin inline styles) * keeps its own hard-coded colours by design. */ :root { /* ══════════════════════════════════════════════════════════════ COLOURS ══════════════════════════════════════════════════════════════ */ /* ── Brand — pink (primary) ─────────────────────────────────── */ --c-brand: #ffaa53; /* primary buttons, links */ --c-brand-hover: #ffca94; /* hover state */ --c-brand-dark: #FF7700; /* pressed / dark pink */ --c-brand-alt: #ffaa53; /* secondary pink */ --c-brand-soft: #008000; /* soft accent */ --c-brand-muted: #FCEEBA; /* muted pink bg */ --c-brand-tint: #FFF2E6; /* overlay tint */ --c-brand-palest: #D9F1DD; /* card bg palest */ --c-brand-deep: #F03E6D; /* alt CTA */ --c-brand-fg: #242221; /* readable text ON --c-brand (override to dark if brand is light) */ /* ── Accent — purple (secondary) ────────────────────────────── */ --c-accent: #242221; /* dark purple text */ --c-accent-deep: #3e3938; /* very deep purple */ --c-accent-muted: #6B5A72; /* muted purple */ --c-accent-darkest: #180518; /* near-black purple */ --c-violet: #6023CF; /* violet accent */ --c-violet-alt: #8D35D7; /* alt violet */ /* ── Success (green) ────────────────────────────────────────── */ --c-success: #30CE73; /* green button */ --c-success-hover: #27AE60; /* hover */ --c-success-mid: #16A34A; --c-success-text: #166534; --c-success-bright: #45E883; /* bright accent */ --c-success-bg: #DCFCE7; /* bg tint */ --c-success-bg-palest: #F0FDF4; /* bg palest */ /* ── Warning (orange / yellow) ──────────────────────────────── */ --c-warning: #F59E0B; --c-warning-strong: #FC5E1F; /* orange accent */ --c-warning-alt: #FEA037; --c-warning-text: #664D03; /* dark text on warning */ --c-warning-bg: #FFF3CD; --c-warning-bg-palest: #FFF7ED; /* ── Danger (red) ───────────────────────────────────────────── */ --c-danger: #DC2626; --c-danger-hover: #FD5959; --c-danger-alt: #D14841; /* red-brown */ --c-danger-dark: #B81818; --c-danger-deep: #7F1D1D; --c-danger-text: #991B1B; --c-danger-bg: #FEE2E2; --c-danger-bg-palest: #FEF2F2; /* ── Info (blue / cyan) ─────────────────────────────────────── */ --c-info: #1B6AD1; /* link blue */ --c-info-cyan: #20C7F9; --c-info-cyan-light: #20E0F9; --c-info-slate: #7CA9C8; --c-info-text: #1E40AF; --c-info-bg: #EFF8FF; --c-info-bg-alt: #EFF6FF; --c-info-bg-tint: #DBEAFE; /* ── Text ──────────────────────────────────────────────────── */ --c-text: #333333; --c-text-dark: #232323; --c-text-muted: #6B7280; --c-text-subtle: #9CA3AF; --c-text-invert: #FFFFFF; --c-text-slate: #4B5563; /* ── Surface ───────────────────────────────────────────────── */ --c-white: #FFFFFF; --c-black: #000000; --c-bg: #FAFAFA; --c-bg-alt: #F3F4F6; --c-bg-tint: #F9FAFC; /* ── Borders ───────────────────────────────────────────────── */ --c-border: #E5E7EB; --c-border-mid: #D1D5DB; --c-border-strong: #CED4DA; --c-border-soft: #F0F0F0; /* ── Header chrome ───────────────────────────────────────────── Distinct scale from the brand pink — used by the header bar + nav strip + dropdowns. Change these to re-theme just the header without touching brand pink used on buttons / CTAs. ──────────────────────────────────────────────────────────── */ --c-header-bg: #008000; /* top bar (deepest) */ --c-header-nav-bg: #35BF47; /* nav strip + page-title accents */ --c-header-nav-hover: #ffaa53; /* nav item hover */ --c-header-dropdown-bg: #ffca94; /* dropdown menu bg */ --c-header-dropdown-hover: #ffaa53; /* dropdown item hover */ --c-header-subnav-btn: #ffaa53; /* mobile subnav / burger buttons */ --c-header-divider: #080505; /* dropdown item border-top */ /* ── Footer ─────────────────────────────────────────────────── */ --c-footer-bg: #35BF47; /* main footer bg */ /* ── Sidebar (left countries / geo menu) ───────────────────── The .countries list in sidebar-left. Item + nested-item + icon backgrounds together define the sidebar's "chrome" — swap them for a completely different sidebar palette per site. ──────────────────────────────────────────────────────────── */ --c-sidebar-item-bg: #3e3938; /* top-level (country) item bg */ --c-sidebar-item-bg-nested: #FF7700; /* nested (city) item bg */ --c-sidebar-icon-bg: #66424D; /* icon-column bg on each item */ /* ── Mobile fixed bottom bar (.profile_footer_fixed / .pff-*) Defaults mirror each app's real brand colour so the buttons are recognisable to app users. Override per site if a monochrome bar fits the design — e.g. all buttons in the site's own brand pink. ──────────────────────────────────────────────────────────── */ --c-btn-wa-bg: #25D366; /* WhatsApp brand */ --c-btn-wa-hover: #128C7E; --c-btn-viber-bg: #7360F2; /* Viber brand */ --c-btn-viber-hover: #5A47D6; --c-btn-tg-bg: #26A5E4; /* Telegram brand */ --c-btn-tg-hover: #1B87BD; --c-btn-sms-bg: #2196F3; /* SMS fallback (not a real brand) */ --c-btn-sms-hover: #1769AA; /* Call button uses --c-brand (pink) for bg; hover uses --c-brand-dark. */ /* ── Profile card Call button (green) ───────────────────────── Green Call CTA on each escort profile card in listings. Uses a deeper, more saturated green than the theme's --c-success (which is a softer mint) — kept separate so the card CTA preserves its higher-contrast "click-me" look. ──────────────────────────────────────────────────────────── */ --c-card-call-bg: #3d3938; --c-card-call-hover: #246B29; /* ── Right-sidebar Profile Settings block (.ps-*) ──────────── Small block-level accents that give the sidebar sections their identity — border between blocks, delete-confirmation modal title colour, etc. ──────────────────────────────────────────────────────────── */ --c-sidebar-block-border: #F0C1D6; /* soft pink section border */ --c-sidebar-danger-fg: #B91C1C; /* danger foreground (delete modal title + delete button) */ --c-sidebar-item-divider: #ffca94; /* border between sidebar-left country items */ --c-sidebar-geo-bg: #FDF2F8; /* geo-sidebar section soft-pink background */ --c-sidebar-geo-border: #FBB6D4; /* geo-sidebar section pink border */ /* ══════════════════════════════════════════════════════════════ GRADIENTS Full linear-gradient expressions — consumers only write `background: var(--g-brand)`. ══════════════════════════════════════════════════════════════ */ /* Brand — pink CTA */ --g-brand: linear-gradient(to bottom, #ffca94 0%, #ffaa53 100%); /* Info — cyan/blue */ --g-info: linear-gradient(to bottom, #20C7F9 0%, #1B6AD1 100%); --g-info-bright: linear-gradient(to bottom, #20E0F9 0%, #20B6FC 100%); --g-info-bg: linear-gradient(to bottom, #FFFFFF 0%, #EFF8FF 100%); /* Warning — orange */ --g-orange: linear-gradient(to bottom, #FEA037 0%, #FD6420 100%); --g-yellow-orange: linear-gradient(#F7C214 0%, #FC5E1F 100%); /* Danger — red */ --g-danger: linear-gradient(to bottom, #FD5959 0%, #FF0000 100%); /* Success — green */ --g-success: linear-gradient(to bottom, #30CE73 0%, #27AE60 100%); --g-success-bright: linear-gradient(to bottom, #22E56D 0%, #17C15B 100%); --g-success-alt: linear-gradient(to bottom, #45E883 0%, #2EC96C 100%); --g-badge-green: linear-gradient(to bottom, #4AB35A 0%, #2E8B35 100%); /* Neutrals — button surfaces */ --g-white-gray: linear-gradient(to bottom, #FFFFFF 0%, #E1E1E1 100%); --g-gray: linear-gradient(to bottom, #EDEDED 0%, #D8D8D8 100%); --g-badge-gray: linear-gradient(to bottom, #6B7280 0%, #4B5563 100%); /* Purple / pink accents */ --g-mixed: linear-gradient(to bottom, #9FBC95 0%, #6023CF 100%); --g-purple-deep: linear-gradient(135deg, #2F074E 0%, #9F059B 26%, #B603A7 40%, #B205A8 51%, #6529C7 100%); --g-brand-glass: linear-gradient(135deg, rgba(254, 90, 203, .9) 0%, rgba(249, 187, 229, .9) 100%); /* Hero / feature banner (blue → magenta → deep purple) */ --g-hero: linear-gradient(157deg, rgba( 32, 58, 237, 1) 0%, rgba(170, 19, 166, 1) 26%, rgba( 47, 7, 78, 1) 100%); /* Warning combos (used on urgency pills) */ --g-warning-pink: linear-gradient(90deg, #F59E0B 0%, #E0006C 100%); --g-warning-brand: linear-gradient(90deg, #FBBF24 0%, #B30056 100%); /* Image dim overlay — used at the base of profile-card image gradient (transparent top → 35% black at bottom for text legibility). */ --g-image-dim: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.35)); /* ══════════════════════════════════════════════════════════════ SHADOWS ══════════════════════════════════════════════════════════════ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow-md: 0 2px 8px rgba(0, 0, 0, .08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .15); --shadow-focus-brand: 0 0 0 3px rgba(224, 0, 108, .18); /* ══════════════════════════════════════════════════════════════ OVERLAYS (translucent surfaces) ══════════════════════════════════════════════════════════════ */ --c-overlay-brand-tint: rgba(255, 232, 244, .70); --c-overlay-dark: rgba(0, 0, 0, .6); --c-overlay-darker: rgba(0, 0, 0, .72); }