/* ========================================================================== DESIGN TOKENS Extracted verbatim from https://www.jlucreative.com Sources: /assets/index-D6fKHOA1.css, /assets/index-BNPJnAdM.js, /assets/{Offer,CTA,FAQ,Process,Comparison,Footer,LogoCloud, TestimonialsCards,ScrollBlob3D}-*.js Every value below is a real value from the source. No invented colors. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. COLOR — shadcn HSL channel tokens (from `:root{}` in index.css) Stored as bare channels so they compose with hsl(var(--x) / alpha). --------------------------------------------------------------------- */ --background: 150 8% 96%; --foreground: 0 0% 5%; --card: 150 8% 96%; --card-foreground: 0 0% 5%; --popover: 150 8% 96%; --popover-foreground: 0 0% 5%; --primary: 0 0% 5%; --primary-foreground: 150 8% 96%; --secondary: 160 3% 17%; --secondary-foreground: 150 8% 96%; --muted: 150 8% 90%; --muted-foreground: 160 3% 17%; --accent-hsl: 171 76% 48%; --accent-foreground: 0 0% 5%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border-hsl: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 171 76% 48%; --radius: 0.5rem; /* --------------------------------------------------------------------- 2. COLOR — literal hex values actually painted on the page. Frequency counts are occurrences in the compiled stylesheet. --------------------------------------------------------------------- */ --bg-primary: #FAFCFB; /* 8x —
+ every
*/ --bg-dark: #0A0F0D; /* 8x — footer / dark panels */ --bg-dark-deep: #050510; /* 2x — footer gradient terminus */ --accent: #14E1C1; /* 51x — the brand teal */ --accent-top: #4CE5C7; /* 2x — button gradient, top stop */ --accent-deep: #10C6A9; /* 7x — button gradient bottom + border */ --accent-mid: #2DE8CC; /* 3x — glow mid stop */ --accent-hover-top: #5DF0D5; /* 2x — button hover, top stop */ --accent-dim: #0FBDA3; /* 2x — pressed */ --accent-dark: #0A8F7A; /* 2x — deep shade */ --ink-900: #0E0E0E; /* 5x — deep text/surface */ --ink-850: #1A1A1A; /* 2x */ --ink-800: #171717; --ink-700: #262626; --ink-600: #333333; --ink-500: #525252; --ink-450: #555555; --ink-400: #737373; --ink-350: #777777; --ink-300: #9CA3AF; --ink-250: #A3A3A3; --ink-200: #D4D4D4; --surface-tint-1: #F7FAF9; /* 2x */ --surface-tint-2: #EEF3F1; /* 2x */ --surface-tint-3: #F5F7F6; --surface-tint-4: #F4F7F6; --surface-tint-5: #EFF1F0; --surface-neutral-1: #FAFAFA; --surface-neutral-2: #F9F9F9; --surface-neutral-3: #F4F5F5; /* 3x */ --surface-neutral-4: #F0F0F0; --border-hairline: #E9EBEA; /* 2x */ --border-neutral: #E5E5E5; /* 2x */ --border-gray: #E5E7EB; --warn: #FACC15; /* 3x */ --danger: #DC2626; --danger-soft: rgba(239, 68, 68, 0.15); /* red-500/15, "before" column */ /* Light sources from the Three.js ScrollBlob3D (kept for the CSS orb) */ --blob-light-white: #ffffff; --blob-light-cool: #C8CED2; --blob-light-warm: #FFE9C2; /* --------------------------------------------------------------------- 3. COLOR — alpha conventions. The site adds transparency to black/white rather than introducing new hexes. --------------------------------------------------------------------- */ --text-strong: #000000; /* Source uses text-black/50, which measures ~4.0:1 on its flat white and ~3.8:1 on this tinted field — under the 4.5:1 AA floor either way. Raised to 0.62 for ~5.7:1. This is the one deliberate departure from the extracted values, made because body copy uses it. */ --text-muted: rgba(0, 0, 0, 0.62); /* was text-black/50 */ --text-subtle: rgba(0, 0, 0, 0.3); /* text-black/30 */ --text-faint: rgba(0, 0, 0, 0.2); /* text-black/20 */ --text-body: rgba(0, 0, 0, 0.8); /* text-black/80 */ --rule-hairline: rgba(0, 0, 0, 0.06); /* border-black/[0.06] */ --rule-soft: rgba(0, 0, 0, 0.1); /* border-black/10 */ /* Translucent card surfaces — same extracted colours, alpha applied, so the page colour field reads through them instead of being blocked by flat white */ --surface-card: rgba(247, 250, 249, 0.72); /* --surface-tint-1 @ 72% */ --surface-card-plain: rgba(255, 255, 255, 0.62); --surface-stat: rgba(250, 252, 251, 0.55); /* --bg-primary @ 55% */ --surface-band: rgba(238, 243, 241, 0.70); /* --surface-tint-2 @ 70% */ /* Composite colour at the very top-centre of the page, derived by layering the hero__bg stack over the page field's first stop: --surface-tint-2 → rgba(238,243,241,.9) → white @.65 → teal @.435 Used as the target the hero's lower band resolves to. */ --hero-top: #95F0E1; --accent-05: rgba(20, 225, 193, 0.05); --accent-15: rgba(20, 225, 193, 0.15); --accent-40: rgba(20, 225, 193, 0.40); --accent-60: rgba(20, 225, 193, 0.60); /* --------------------------------------------------------------------- 4. GRADIENTS --------------------------------------------------------------------- */ --grad-button: linear-gradient(to top, var(--accent-deep), var(--accent-top)); --grad-button-hover: linear-gradient(to top, var(--accent), var(--accent-hover-top)); --grad-rule: linear-gradient(to right, var(--accent), rgba(20, 225, 193, 0.3)); --grad-footer: linear-gradient(to bottom, var(--bg-dark), var(--bg-dark-deep)); /* --------------------------------------------------------------------- 5. SHADOWS — verbatim strings from the source --------------------------------------------------------------------- */ --shadow-btn: 0 6px 20px rgba(20, 225, 193, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-btn-hover: 0 8px 25px rgba(20, 225, 193, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-media: 0 8px 40px rgba(20, 225, 193, 0.12); --shadow-card: 0 4px 20px -8px rgba(20, 225, 193, 0.12); --shadow-card-pos: 5px 5px 20px rgba(20, 225, 193, 0.15); --shadow-card-neg: -5px 5px 20px rgba(239, 68, 68, 0.15); --shadow-accent-btn: 0 4px 20px rgba(20, 225, 193, 0.3); /* --------------------------------------------------------------------- 6. TYPOGRAPHY NOTE: on the source site the `.font-clash` utility compiles to `font-family: DM Sans, sans-serif`. Clash Display is downloaded but never bound to a utility, so DM Sans is the real display face. Fraunces is likewise loaded but unused. Faithfully reproduced here. --------------------------------------------------------------------- */ --font-display: 'DM Sans', sans-serif; /* .font-clash — all headings */ --font-body: 'Manrope', sans-serif; /* .font-sans — body default */ --font-serif: 'Instrument Serif', serif; /* .font-instrument — italic accents */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; /* headings */ --fw-bold: 700; /* mono eyebrows */ --fw-black: 900; /* Base scale (Tailwind defaults, as compiled) */ --text-xs: 0.75rem; --lh-xs: 1rem; --text-sm: 0.875rem; --lh-sm: 1.25rem; --text-base: 1rem; --lh-base: 1.5rem; --text-lg: 1.125rem; --lh-lg: 1.75rem; --text-xl: 1.25rem; --lh-xl: 1.75rem; --text-2xl: 1.5rem; --lh-2xl: 2rem; --text-3xl: 1.875rem; --lh-3xl: 2.25rem; --text-4xl: 2.25rem; --lh-4xl: 2.5rem; --text-5xl: 3rem; --lh-5xl: 1; /* Tracking */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-eyebrow-sm: 0.15em; --tracking-eyebrow: 0.2em; /* Leading */ --leading-none: 1; --leading-display: 0.9; /* h1 / h2 */ --leading-tight-x: 0.85; /* stacked h2 */ --leading-h3: 1.1; --leading-sub: 1.2; /* hero serif sub */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; /* --------------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------------- */ --container-max: 1400px; --container-pad: 2rem; --rail-4xl: 56rem; /* max-w-4xl */ --rail-5xl: 64rem; /* max-w-5xl */ --rail-6xl: 72rem; /* max-w-6xl */ --rail-7xl: 80rem; /* max-w-7xl */ --gutter: 1.5rem; /* px-6 */ --gutter-md: 3rem; /* md:px-12 */ --gutter-hero: 1.25rem; /* px-5 */ --gutter-hero-sm: 2rem; /* sm:px-8 */ --nav-offset: 88px; /* hero pt-[88px] */ --nav-offset-md: 104px; /* md:pt-[104px] */ --radius-card: 0.75rem; /* rounded-xl */ --radius-pill: 9999px; /* Breakpoints (for reference; media queries below use the literals) sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1400px */ /* --------------------------------------------------------------------- 8. MOTION --------------------------------------------------------------------- */ --ease-house: cubic-bezier(0.76, 0, 0.24, 1); /* 10x — the signature curve */ --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); /* 4x */ --ease-expo: cubic-bezier(0.16, 1, 0.30, 1); /* 2x */ --ease-out: cubic-bezier(0, 0, 0.58, 1); --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --dur-100: 0.1s; --dur-200: 0.2s; --dur-300: 0.3s; --dur-500: 0.5s; --dur-700: 0.7s; --dur-1000: 1s; --dur-reveal: 0.8s; /* the standard scroll-reveal / hero-rise duration */ --stagger: 0.08s; /* most common stagger increment */ /* Lenis root options: { lerp:0.12, duration:1.2, smoothWheel:true, wheelMultiplier:1.2 } */ --lenis-lerp: 0.12; --lenis-duration: 1.2; --lenis-wheel-multiplier: 1.2; /* Custom-cursor spring: { damping:60, stiffness:800, mass:0.5, restDelta:0.001 } */ --cursor-stiffness: 800; --cursor-damping: 60; --cursor-mass: 0.5; --grain-opacity: 0.03; /* global grain overlay, mix-blend-mode: multiply */ } /* The source ships a dark theme with a DIFFERENT accent (yellow), but never toggles it. Reproduced for completeness; unused. */ .dark { --background: 0 0% 5%; --foreground: 0 0% 98%; --card: 0 0% 5%; --card-foreground: 0 0% 98%; --popover: 0 0% 5%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 12%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 12%; --muted-foreground: 0 0% 63.9%; --accent-hsl: 54 100% 50%; --accent-foreground: 0 0% 9%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border-hsl: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; }