/* ========================================================================== newfunnelmv :: tokens.css Mindvalley structure, Sabrina colours. :root = Sabrina palette (the default) :root[data-theme="mindvalley"] = Mindvalley EAM 2026 palette Only colour tokens change between themes. Every geometry, type, spacing, radius, shadow and timing token is shared, because the structure is Mindvalley's in both cases. Mindvalley values were grepped from the real compiled stylesheet at Vishen Linkedin/eam-earlybird-clone/styles.css and from the component CSS captured in examples/mindvalley-eam-2026/. See references/DESIGN.md for the class each value came from. Breakpoints are documented here but cannot be tokens, because custom properties do not work inside media query conditions: sm 480px md 768px lg 992px xl 1280px content lock 1200px Note lg is 992px in this build, not Tailwind's default 1024px. ========================================================================== */ :root { /* --- Colour: primary ------------------------------------------------- */ /* Sabrina's violet. --color-primary-tint is the top stop of the primary gradient and is therefore LIGHTER than --color-primary, exactly as Mindvalley's purple-tint sits above its purple-600. Derivation: Mindvalley's own top-to-bottom delta is (+33, +37, +30) from #7A12D4 to #9B37F2. The same delta applied to #9B37F2 gives (188, 92, 285), blue clamped to 255, so #BC5CFF. */ --color-primary: #9B37F2; --color-primary-deep: #4C0F8F; --color-primary-tint: #BC5CFF; /* --- Colour: accent -------------------------------------------------- */ /* --color-accent is the BOTTOM stop of the CTA gradient and the border of a selected payment option. --color-accent-top is the top stop. --color-accent-tint is the full bleed banner wash, never a button. Derivation: Mindvalley's CTA delta is (+18, +48, -6) from #ED6325 to #FF931F. Applied to #E8734A that gives #FAA344. The banner wash is #E8734A mixed into white at 9 percent. */ --color-accent: #E8734A; --color-accent-top: #FAA344; --color-accent-tint: #FDF2EF; /* Text on an accent-filled button. White on the coral gradient measures 3.01 at the bottom stop and 2.02 at the top, so it fails WCAG AA; ink measures 6.24 and 9.28 and keeps the brand coral exactly. 22 Sep 2026. */ --color-on-accent: #14101B; /* Coral as TEXT. --color-accent is a fill and a border, and as small text it measures 3.01 on white and 2.74 on --color-accent-tint, which fails AA. This is the same hue at a lower lightness: 5.15 on white, 4.69 on the accent wash. The fast action flags, the form error and the build label take it. Fills, borders and icons keep --color-accent. 22 Sep 2026. */ --color-accent-text: #C04418; /* Dark hero band (DESIGN.md section 5). Both source heroes and the closing band sit on dark art; these two stops recreate that with no image, and any HERO_BG_SRC art shows through at low opacity underneath. */ --hero-dark-start: #18052F; --hero-dark-end: #4C0F8F; --hero-on-dark: #FFFFFF; --hero-on-dark-muted: #FFFFFFE0; /* white at 88 percent */ --hero-on-dark-eyebrow: #E3C8FF; --hero-on-dark-line: #FFD5C2; /* the dated line, coral tint on dark */ /* Highlight row tints (BLOCKS.md 18). The source alternates three pale tints under its key-highlights rows; rows cycle blue, green, yellow, primary. */ --tint-blue: #EEF3FF; --tint-green: #EAF7EF; --tint-yellow: #FFF7E0; /* The brand band wash. The source never paints a band in a saturated brand colour: its strip is orange-50 and its guarantee card is a pale blue, while orange-500 and purple-tint stay gradient stops. --color-primary-tint is a gradient stop, so anything that needs a violet BACKGROUND takes this instead: the guarantee card, the guild and help bands, the pull quote, the fourth highlight row, the selected agenda tab and the curriculum week number. Derived the same way as --color-accent-tint, the primary mixed into white at 9 percent, and it clears AA 4.5 against every ink step down to --color-ink-500. */ --tint-violet: #F6EDFE; /* --- Colour: ink ramp ------------------------------------------------- */ /* Violet-neutral ramp anchored on Sabrina's existing --ink #14101B, built at the same luminance steps as Mindvalley's cool-grey ramp, so contrast behaviour is identical when the theme flips. */ --color-ink-900: #14101B; /* headings, live prices, countdown digits */ --color-ink-700: #2A2433; /* section labels, excerpts, footer legal */ --color-ink-600: #433D4D; /* stack bullet text */ --color-ink-500: #5C5666; /* option sublabels, VAT microcopy */ --color-ink-450: #767081; /* struck price, locations, resting icons */ --color-ink-300: #D0CCD8; /* unchecked radio border, hairlines */ --color-ink-250: #E1DEE6; /* card borders, footer top rule */ --color-ink-200: #F4F3F7; /* modal header rule */ --color-ink-100: #FAF9FB; /* hover wash */ /* --- Colour: surfaces ------------------------------------------------- */ --color-surface: #FFFFFF; --color-card: #FFFFFFE6; /* white at 90 percent */ --color-backdrop: #000000E6; /* black at 90 percent, modal backdrop */ /* --- Colour: state ---------------------------------------------------- */ /* The list tick. Mindvalley uses the deeper of its two purples here, so Sabrina uses the deeper of hers. */ --color-success: #4C0F8F; /* --- Type ------------------------------------------------------------- */ /* Space Grotesk carries all four Sharp Grotesk roles: 600 = Semibold 20 (display), 500 = Medium 19/20 (UI and buttons), 400 = Book 19 (body), 700 spare for emphasis inside display. Space Grotesk ships no italic. See DESIGN.md section 3. */ --font-display: "Space Grotesk", "Space Grotesk Fallback", Helvetica, Arial, sans-serif; --font-body: "Space Grotesk", "Space Grotesk Fallback", Helvetica, Arial, sans-serif; /* --- Radii ------------------------------------------------------------ */ /* Mindvalley overrides the Tailwind defaults: rounded 4px, rounded-md 16px, rounded-lg 24px, rounded-xl 32px, rounded-2xl 16px. */ --radius-card: 16px; --radius-modal: 24px; --radius-pill: 9999px; /* --- Shadows ---------------------------------------------------------- */ /* Only two things on the Mindvalley page carry a real shadow: the story cards and the CTA button. Everything else separates with a border or a background change. Keep it that way. */ --shadow-card: 0 5px 12px 0 #595E6712, 0 10px 30px 0 #595E6716; --shadow-button: 0 4px 6px -1px #0000001A, 0 2px 4px -2px #0000001A; --shadow-hover: 0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A; --shadow-option: 0 4px 12px #0000000A; --shadow-modal: 0 20px 25px -5px #0000001A, 0 8px 10px -6px #0000001A; /* --- Layout ------------------------------------------------------------ */ --container-max: 1200px; /* page content, hard locked from 1200px up */ --container-jumbo: 1640px; /* header only, from 1280px up */ --gutter: 16px; /* page gutter below 1200px */ --gutter-jumbo: 20px; /* header gutter, 40px from 992px */ --header-h: 80px; --header-h-mobile: 50px; /* --- Spacing, 4px grid -------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-13: 52px; --space-14: 56px; --space-15: 60px; --space-16: 64px; /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(.4, 0, .2, 1); --duration: .2s; } /* ========================================================================== Mindvalley theme. Colour tokens only. Set it with . ========================================================================== */ :root[data-theme="mindvalley"] { /* purple-tint #9B37F2 over purple-600 #7A12D4. Mindvalley has no deeper purple step, its hover simply flattens to purple-600, so primary-deep repeats it. */ --color-primary: #7A12D4; --color-primary-deep: #7A12D4; --color-primary-tint: #9B37F2; /* orange-500 #FF931F over orange-600 #ED6325, banner strip orange-50. */ --color-accent: #ED6325; --color-accent-top: #FF931F; --color-accent-tint: #FFF4E9; --color-on-accent: #0F131A; --color-accent-text: #C24710; /* orange-600 darkened, 5.00 on white, 4.61 on orange-50 */ /* Reference only: the mastery hero fades maroon to violet. */ --hero-dark-start: #4A0D2E; --hero-dark-end: #3B1A8C; --hero-on-dark: #FFFFFF; --hero-on-dark-muted: #FFFFFFE0; --hero-on-dark-eyebrow: #F3D9FF; --hero-on-dark-line: #FFE0CC; --tint-blue: #EEF3FF; --tint-green: #EAF7EF; --tint-yellow: #FFF7E0; --tint-violet: #F3EAFB; /* purple-600 mixed into white at 9 percent */ /* the cool-grey ramp, verbatim */ --color-ink-900: #0F131A; /* cool-grey-700 */ --color-ink-700: #292D38; /* cool-grey-600 */ --color-ink-600: #41464F; /* cool-grey-550 */ --color-ink-500: #595E67; /* cool-grey-500 */ --color-ink-450: #71767F; /* cool-grey-450 */ --color-ink-300: #CED1D7; /* cool-grey-300 */ --color-ink-250: #DFE1E5; /* cool-grey-250 */ --color-ink-200: #F3F4F6; /* cool-grey-200 */ --color-ink-100: #F9F9F9; /* cool-grey-100 */ --color-surface: #FFFFFF; --color-card: #FFFFFFE6; --color-backdrop: #000000E6; --color-success: #7A12D4; /* purple-600, the stack tick */ }