/* ========================================================================== MingleExtra - design tokens -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radius, elevation and motion. Every component style should reference these variables rather than restating a literal value. Why this file exists -------------------- The theme previously carried two competing palettes: theme-override.css declared a blue accent (#2962FF) while 55 hardcoded pink values (#e64980) were spread through style.css and the page templates. Because pink is the actual brand - it is what the logo, the hero and the active navigation item use - the blue set was an interloper, and the disagreement is what made the interface feel inconsistent from screen to screen. Load order matters: this file comes first, so later stylesheets can consume the tokens. Dark mode re-declares the same variable names under [data-sme-theme="dark"], which means components need no dark specific rules. ========================================================================== */ :root { /* ---- Brand -------------------------------------------------------- */ --sme-brand-50: #FFF0F6; --sme-brand-100: #FFD6E8; --sme-brand-200: #FFADD2; --sme-brand-300: #FF85BC; --sme-brand-400: #F55FA1; --sme-brand-500: #E64980; /* primary brand pink */ --sme-brand-600: #C9366A; --sme-brand-700: #A32654; --sme-brand-800: #7C1A3E; --sme-brand-900: #551029; /* Dark pink, not the bright one. * * The ramp still holds every step, but the brand now resolves to 700 * (#A32654) rather than 500 (#E64980). Two reasons. * * The bright pink was being used for large fills and for small icons at the * same time. At 16px it reads as a highlight, at button size it shouts, and * the two ended up competing on every screen: the homepage, the settings * icons and the discovery chips were all the same loud colour with nothing * establishing hierarchy. * * 700 against white also clears WCAG AA for normal text, which 500 does not, * so the same colour can now carry a label and a background without needing * a second token to stay legible. */ --sme-brand: var(--sme-brand-700); /* Raw channels, so translucent brand tints can be written as rgba(var(--sme-brand-rgb), 0.08) instead of hardcoding the colour again. Redeclared for dark mode, so tints follow the theme automatically. */ --sme-brand-rgb: 163, 38, 84; --sme-brand-hover: var(--sme-brand-800); --sme-brand-active: var(--sme-brand-900); --sme-brand-soft: var(--sme-brand-50); --sme-on-brand: #FFFFFF; /* Warm secondary, used for premium and reward surfaces. */ --sme-gold-400: #FFCE55; --sme-gold-500: #F5A623; --sme-gold-600: #D4881A; /* ---- Neutrals ------------------------------------------------------ */ --sme-neutral-0: #FFFFFF; --sme-neutral-25: #FCFCFD; --sme-neutral-50: #F7F8FA; --sme-neutral-100: #EFF1F5; --sme-neutral-200: #E2E6ED; --sme-neutral-300: #CBD2DD; --sme-neutral-400: #9AA4B4; --sme-neutral-500: #6E7889; --sme-neutral-600: #505A6B; --sme-neutral-700: #3A4353; --sme-neutral-800: #262D3A; --sme-neutral-900: #161B25; --sme-neutral-950: #0D1117; /* ---- Semantic surfaces ---------------------------------------------- An explicit elevation ladder. night.css already encoded one of these (#0F1624 page, #1A2332 card, #1E2A3A raised, #243246 selected, #2A3A4E border) and flattening it into a single "surface" token would lose the depth that makes the dark theme readable, so the ladder is modelled here and both themes implement every rung. */ --sme-bg: var(--sme-neutral-50); /* page background */ --sme-surface-nav: var(--sme-neutral-0); /* sidebar, top bar */ --sme-surface: var(--sme-neutral-0); /* cards, panels */ --sme-surface-raised: var(--sme-neutral-0); /* modals, dropdowns */ --sme-surface-input: var(--sme-neutral-50); /* form fields */ --sme-surface-muted: var(--sme-neutral-100); /* wells, disabled areas */ --sme-surface-hover: var(--sme-neutral-100); /* hover */ --sme-surface-active: var(--sme-neutral-200); /* pressed / selected */ --sme-bg-elevated: var(--sme-neutral-0); /* legacy alias */ --sme-overlay: rgba(22, 27, 37, 0.58); --sme-text: var(--sme-neutral-900); /* primary */ --sme-text-secondary:var(--sme-neutral-600); /* secondary */ --sme-text-muted: var(--sme-neutral-500); /* muted */ --sme-text-subtle: var(--sme-neutral-400); /* placeholder, disabled */ --sme-text-inverse: var(--sme-neutral-0); --sme-border: var(--sme-neutral-200); --sme-border-strong: var(--sme-neutral-300); /* ---- Status --------------------------------------------------------- These are deliberately NOT brand pink. Collapsing them would remove the user's ability to tell success from failure by colour. */ --sme-success: #12B76A; --sme-success-soft: #E7F8F0; --sme-warning: #F5A623; --sme-warning-soft: #FEF4E6; --sme-danger: #E5484D; --sme-danger-soft: #FDEDED; --sme-info: #2E90FA; --sme-info-soft: #EAF3FE; /* Disabled state. Distinct from muted text, which is still readable. */ --sme-disabled-bg: var(--sme-neutral-100); --sme-disabled-text: var(--sme-neutral-400); /* Product-meaning colours. Each is intentionally non-brand: - like/pass: a "pass" must never read as an error - super: conventionally distinct from a normal like in dating products - online/verified: trust signals that must not be confused with brand */ --sme-like: #12B76A; --sme-pass: #6E7889; --sme-super: #7C5CFF; /* intentional blue-violet, documented */ --sme-online: #12B76A; --sme-verified: #2E90FA; /* intentional blue, documented */ /* Payment lifecycle. Mapped onto status colours so the same state always reads the same way, but named separately so payment UI can diverge later without disturbing generic alerts. */ --sme-pay-pending: var(--sme-warning); --sme-pay-success: var(--sme-success); --sme-pay-failed: var(--sme-danger); --sme-pay-refunded: var(--sme-info); --sme-pay-cancelled: var(--sme-neutral-400); /* Social network brand colours. These are owned by the networks and must not be tokenised into our palette or shifted for dark mode. */ --sme-social-facebook: #1877F2; --sme-social-google: #DB4437; --sme-social-twitter: #1DA1F2; --sme-social-instagram: #E1306C; --sme-social-linkedin: #0A66C2; /* ---- Typography ---------------------------------------------------- */ --sme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --sme-font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale, 1.200 minor third, 16px base. */ /* IMPORTANT: these are NOT the pixel sizes the comments used to claim. * * materialize.min.css sets a responsive root font size: 14px below 992px, * 14.5px to 1199px, 15px above. rem is root-relative, so every value here * resolves smaller than authored AND changes with viewport width: * * <992px 992-1199 1200px+ * xs 10.5px 10.9px 11.3px * sm 12.3px 12.7px 13.1px * base 14.0px 14.5px 15.0px * * That is why body text reads small on phones and labels came out at * 10.5px. The comments below are the true mobile sizes. * * Pinning html to 16px would make the scale match its original intent, but * it scales every rem-based dimension on the site at the same time, so it * is a deliberate decision rather than a tidy-up. Left as is for now. */ --sme-text-xs: 0.75rem; /* 10.5px on mobile */ --sme-text-sm: 0.875rem; /* 12.3px on mobile */ --sme-text-base: 1rem; /* 14.0px on mobile */ --sme-text-lg: 1.125rem; /* 18 */ --sme-text-xl: 1.375rem; /* 22 */ --sme-text-2xl: 1.75rem; /* 28 */ --sme-text-3xl: 2.125rem; /* 34 */ --sme-text-4xl: 2.75rem; /* 44 */ --sme-leading-tight: 1.2; --sme-leading-snug: 1.4; --sme-leading-normal:1.6; --sme-weight-regular: 400; --sme-weight-medium: 500; --sme-weight-semibold:600; --sme-weight-bold: 700; --sme-tracking-tight: -0.02em; --sme-tracking-normal: 0; --sme-tracking-wide: 0.04em; /* ---- Spacing, 4px base --------------------------------------------- */ --sme-space-1: 0.25rem; --sme-space-2: 0.5rem; --sme-space-3: 0.75rem; --sme-space-4: 1rem; --sme-space-5: 1.25rem; --sme-space-6: 1.5rem; --sme-space-8: 2rem; --sme-space-10: 2.5rem; --sme-space-12: 3rem; --sme-space-16: 4rem; /* ---- Radius -------------------------------------------------------- */ --sme-radius-xs: 6px; --sme-radius-sm: 10px; --sme-radius-md: 14px; --sme-radius-lg: 20px; --sme-radius-xl: 26px; --sme-radius-full: 9999px; /* ---- Elevation ------------------------------------------------------ */ --sme-shadow-xs: 0 1px 2px rgba(22, 27, 37, 0.05); --sme-shadow-sm: 0 2px 6px rgba(22, 27, 37, 0.07); --sme-shadow-md: 0 6px 18px rgba(22, 27, 37, 0.09); --sme-shadow-lg: 0 16px 36px rgba(22, 27, 37, 0.12); --sme-shadow-xl: 0 28px 60px rgba(22, 27, 37, 0.18); --sme-shadow-brand: 0 8px 22px rgba(230, 73, 128, 0.30); --sme-ring: 0 0 0 3px rgba(230, 73, 128, 0.35); /* ---- Motion --------------------------------------------------------- */ --sme-duration-fast: 120ms; --sme-duration: 200ms; --sme-duration-slow: 320ms; --sme-ease: cubic-bezier(0.4, 0, 0.2, 1); --sme-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sme-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Icon sizing ---------------------------------------------------- The theme previously used eight unrelated icon sizes (15, 16, 17, 18, 21, 22, 36 and 120px) chosen per rule, which is why icons read as inconsistent and several were too small to recognise. These four steps replace them. 20px is the floor for anything a member has to identify at a glance, such as navigation. */ --sme-icon-sm: 18px; /* inline with body text, decorative */ --sme-icon-md: 20px; /* default UI icon */ --sme-icon-lg: 24px; /* navigation, primary actions */ --sme-icon-xl: 32px; /* feature and empty-state icons */ /* ---- Layout --------------------------------------------------------- */ --sme-sidebar-width: 264px; --sme-topbar-height: 64px; --sme-bottomnav-height: 62px; --sme-container-max: 1200px; --sme-tap-target: 44px; /* minimum comfortable touch target */ --sme-z-dropdown: 1000; --sme-z-sticky: 1010; --sme-z-drawer: 1020; --sme-z-overlay: 1030; --sme-z-modal: 1040; --sme-z-toast: 1050; } /* ========================================================================== Dark mode Same variable names, different values, so no component needs a dark rule. Applied via [data-sme-theme="dark"] on , which the theme toggle sets. ========================================================================== */ [data-sme-theme="dark"] { /* Dark mode keeps the same dark pink as light mode. This used to step up to --sme-brand-300 for contrast, which made the whole interface read as a different, brighter product after dark. The brand is one colour in both themes. White on #A32654 measures about 7:1, so filled buttons, chips and badges are comfortably readable. The place to watch is small pink TEXT directly on the near-black page; --sme-brand-on-dark below is there for those cases and is the only exception. */ --sme-brand: var(--sme-brand-700); --sme-brand-rgb: 163, 38, 84; /* matches --sme-brand-700 */ --sme-brand-on-dark: var(--sme-brand-300); /* small text on the page bg */ --sme-brand-hover: var(--sme-brand-300); --sme-brand-active: var(--sme-brand-200); --sme-brand-soft: rgba(230, 73, 128, 0.14); --sme-on-brand: #1A0A12; /* Dark elevation ladder. These are the exact values night.css already used, adopted rather than reinvented so the migration is a like-for-like swap with no visual change, and so the depth hierarchy it encoded is preserved: #0F1624 page < #1A2332 card < #1E2A3A raised < #243246 selected with #2A3A4E as the border tone. */ --sme-bg: #0F1624; /* page background, deepest */ --sme-surface-nav: #141D2E; /* sidebar / top bar, between page+card */ --sme-surface: #1A2332; /* cards, panels */ --sme-surface-raised: #1E2A3A; /* modals, dropdowns */ --sme-surface-input: #1E2A3A; /* form fields */ --sme-surface-muted: #1E2A3A; /* wells */ --sme-surface-hover: #243246; /* hover */ --sme-surface-active: #2A3A4E; /* pressed / selected */ --sme-bg-elevated: #1A2332; /* legacy alias */ --sme-overlay: rgba(4, 7, 12, 0.72); --sme-text: #E8ECF2; /* primary */ --sme-text-secondary: #C1C8D2; /* secondary */ --sme-text-muted: #A4ADBA; /* muted */ --sme-text-subtle: #7A8996; /* placeholder, disabled */ --sme-text-inverse: var(--sme-neutral-900); --sme-border: #2A3A4E; --sme-border-strong: #3A4A5E; --sme-disabled-bg: #1E2A3A; --sme-disabled-text: #6A7684; /* Status hues are lifted slightly so they keep contrast on dark surfaces while remaining recognisably the same colour. */ --sme-success: #32D583; --sme-warning: #FDB022; --sme-danger: #F97066; --sme-info: #53B1FD; --sme-success-soft: rgba(18, 183, 106, 0.16); --sme-warning-soft: rgba(245, 166, 35, 0.16); --sme-danger-soft: rgba(229, 72, 77, 0.16); --sme-info-soft: rgba(46, 144, 250, 0.16); --sme-like: #32D583; --sme-online: #32D583; --sme-super: #9B87FF; /* intentional blue-violet, lifted for dark */ --sme-verified: #53B1FD; /* intentional blue, lifted for dark */ /* Social brand colours are NOT adjusted: they belong to the networks. */ /* Shadows read as depth on light backgrounds but as smudges on dark ones, so they are deepened and tightened rather than reused verbatim. */ --sme-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --sme-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45); --sme-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.50); --sme-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55); --sme-shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.65); --sme-shadow-brand: 0 8px 22px rgba(230, 73, 128, 0.35); } /* Honour the operating system preference when the member has not chosen. The toggle writes data-sme-theme, which wins over this block. */ @media (prefers-color-scheme: dark) { :root:not([data-sme-theme="light"]):not([data-sme-theme="dark"]) { color-scheme: dark; } } /* ========================================================================== Motion preferences Respected globally so no individual component has to remember. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sme-duration-fast: 1ms; --sme-duration: 1ms; --sme-duration-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }