/* * ══════════════════════════════════════════════════════════════════════════════ * BioScript UX Engine v1.0 * Toggle-based personality overlays. Zero layout impact. * Loaded after design-engine.css. All rules scoped to body data-attributes. * No !important unless overriding a third-party class. * ══════════════════════════════════════════════════════════════════════════════ * Data attributes applied to : * data-motion="static|subtle|dynamic" * data-card-shape="rounded|sharp|pill" * data-minimal="1" * data-typo="[pack-id]" (see Section 4) * ══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION 1 — MOTION INTENSITY Three tiers: static kills all animation, subtle reduces, dynamic amplifies. Only targets --bio-* transition vars + named animations. ═══════════════════════════════════════════════════════════════════════════ */ /* ── STATIC: No motion at all ──────────────────────────────────────────────── */ body[data-motion="static"] *, body[data-motion="static"] *::before, body[data-motion="static"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } body[data-motion="static"] .ambient-orb, body[data-motion="static"] .ambient-layer, body[data-motion="static"] [class*="animate-"], body[data-motion="static"] [style*="animation"] { animation: none !important; opacity: 0.6; } /* ── SUBTLE: Softened motion (default-plus softening) ──────────────────────── */ body[data-motion="subtle"] .bio-card, body[data-motion="subtle"] .card-base { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease !important; } body[data-motion="subtle"] .bio-card:hover, body[data-motion="subtle"] .card-base:hover { transform: translateY(-3px) !important; } body[data-motion="subtle"] .ambient-orb { animation-duration: 20s !important; animation-timing-function: ease-in-out !important; } body[data-motion="subtle"] [class*="animate-pulse"], body[data-motion="subtle"] [class*="animate-spin"] { animation-duration: 4s !important; } /* ── DYNAMIC: Amplified, snappy motion ─────────────────────────────────────── */ body[data-motion="dynamic"] .bio-card, body[data-motion="dynamic"] .card-base { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1), scale 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease !important; will-change: transform, scale; } body[data-motion="dynamic"] .bio-card:hover, body[data-motion="dynamic"] .card-base:hover { transform: translateY(-6px) scale(1.025) !important; } body[data-motion="dynamic"] .bio-btn, body[data-motion="dynamic"] [class*="bio-btn"], body[data-motion="dynamic"] a.bio-card { transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease !important; } body[data-motion="dynamic"] .bio-btn:hover, body[data-motion="dynamic"] [class*="bio-btn"]:hover { transform: translateY(-3px) !important; } body[data-motion="dynamic"] .ambient-orb { animation-duration: 5s !important; } body[data-motion="dynamic"] [class*="animate-pulse"] { animation-duration: 1s !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 2 — CARD SHAPE Overrides border-radius on .bio-card, .card-base, buttons. Stays within the personality layer — no padding or layout changes. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ROUNDED: Default warm curves ──────────────────────────────────────────── */ body[data-card-shape="rounded"] .bio-card, body[data-card-shape="rounded"] .card-base { border-radius: 18px !important; } body[data-card-shape="rounded"] .bio-btn, body[data-card-shape="rounded"] [class*="bio-btn"] { border-radius: 14px !important; } body[data-card-shape="rounded"] .bio-avatar-wrap img, body[data-card-shape="rounded"] .profile-avatar { border-radius: 50% !important; } /* ── SHARP: Zero-radius, editorial ─────────────────────────────────────────── */ body[data-card-shape="sharp"] .bio-card, body[data-card-shape="sharp"] .card-base, body[data-card-shape="sharp"] .bio-btn, body[data-card-shape="sharp"] [class*="bio-btn"], body[data-card-shape="sharp"] .bio-avatar-wrap img, body[data-card-shape="sharp"] .profile-avatar { border-radius: 0 !important; } /* ── PILL: Maximum softness, full pill ─────────────────────────────────────── */ body[data-card-shape="pill"] .bio-card, body[data-card-shape="pill"] .card-base { border-radius: 100px !important; padding-left: 1.75rem !important; padding-right: 1.75rem !important; } body[data-card-shape="pill"] .bio-btn, body[data-card-shape="pill"] [class*="bio-btn"] { border-radius: 100px !important; } body[data-card-shape="pill"] .bio-avatar-wrap img, body[data-card-shape="pill"] .profile-avatar { border-radius: 50% !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 3 — CLEAN MINIMAL MODE Strips heavy gradients, ambient layers, decorative elements. Pure utility content focus. Toggled by data-minimal="1". ═══════════════════════════════════════════════════════════════════════════ */ body[data-minimal="1"] .ambient-layer, body[data-minimal="1"] .ambient-orb, body[data-minimal="1"] [class*="ambient-"] { display: none !important; } body[data-minimal="1"]::before, body[data-minimal="1"]::after { display: none !important; } /* Strip background gradients from cards */ body[data-minimal="1"] .bio-card, body[data-minimal="1"] .card-base { background-image: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; } body[data-minimal="1"] .bio-card:hover, body[data-minimal="1"] .card-base:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } /* Strip decorative pseudos inside cards */ body[data-minimal="1"] .bio-card::before, body[data-minimal="1"] .bio-card::after, body[data-minimal="1"] .card-base::before, body[data-minimal="1"] .card-base::after { display: none !important; } /* Simplify body background — keep colour, remove gradients */ body[data-minimal="1"] { background-image: none !important; } /* Strip gradient decorations on hero section */ body[data-minimal="1"] .hero-split::before, body[data-minimal="1"] .hero-split::after, body[data-minimal="1"] .section-wrapper::before, body[data-minimal="1"] .section-wrapper::after { display: none !important; } /* Simplify hero title gradient text — flatten to solid */ body[data-minimal="1"] .hero-title, body[data-minimal="1"] h1, body[data-minimal="1"] h2 { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; color: var(--text-primary, #f8fafc) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 4 — TYPOGRAPHY PACKS (15 curated font pairings) ═══════════════════════════════════════════════════════════════════════════ */ /* Standard Typography Layer */ h1, .hero-title { font-size: var(--typo-h1); font-weight: var(--ux-heading-weight, 800) !important; letter-spacing: var(--ux-heading-spacing, -0.02em) !important; line-height: 1.1; } h2, .section-title { font-size: var(--typo-h2); font-weight: var(--ux-heading-weight, 700) !important; } p, .hero-subtitle { font-size: var(--typo-p); line-height: 1.6; } /* ── Font application (shared rule) ────────────────────────────────────────── */ body[data-typo] h1, body[data-typo] .hero-title, body[data-typo] h2, body[data-typo] h3 { font-family: var(--ux-heading-font, inherit) !important; } body[data-typo] p, body[data-typo] span:not([class*="fa"]):not([class*="icon"]), body[data-typo] li, body[data-typo] .bio-bio, body[data-typo] .profile-bio { font-family: var(--ux-body-font, inherit) !important; } body[data-typo] .profile-name, body[data-typo] .bio-name { font-family: var(--ux-heading-font, inherit) !important; } /* ── PACK 1: Modern Stack — Inter + Inter ───────────────────────────────────── */ body[data-typo="modern-stack"] { --ux-heading-font: 'Inter', system-ui, sans-serif; --ux-body-font: 'Inter', system-ui, sans-serif; --ux-heading-weight: 700; --ux-heading-spacing: -0.02em; } /* ── PACK 2: Editorial — Fraunces + DM Sans ────────────────────────────────── */ body[data-typo="editorial"] { --ux-heading-font: 'Fraunces', Georgia, serif; --ux-body-font: 'DM Sans', system-ui, sans-serif; --ux-heading-weight: 300; --ux-heading-spacing: -0.01em; } body[data-typo="editorial"] h1, body[data-typo="editorial"] h2, body[data-typo="editorial"] .profile-name, body[data-typo="editorial"] .bio-name { font-style: italic; font-weight: var(--ux-heading-weight, 300) !important; letter-spacing: var(--ux-heading-spacing, -0.01em) !important; } /* ── PACK 3: Luxury Serif — Cormorant Garamond + Nunito ─────────────────────── */ body[data-typo="luxury-serif"] { --ux-heading-font: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --ux-body-font: 'Nunito', system-ui, sans-serif; --ux-heading-weight: 400; --ux-heading-spacing: 0.01em; } body[data-typo="luxury-serif"] h1 { font-size: clamp(2rem, 5vw, 3.75rem) !important; font-weight: 400 !important; font-style: italic; } /* ── PACK 4: Bold Agency — Barlow Condensed + Inter ─────────────────────────── */ body[data-typo="bold-agency"] { --ux-heading-font: 'Barlow Condensed', 'Impact', system-ui, sans-serif; --ux-body-font: 'Inter', system-ui, sans-serif; --ux-heading-weight: 800; --ux-heading-spacing: -0.01em; } body[data-typo="bold-agency"] h1, body[data-typo="bold-agency"] h2, body[data-typo="bold-agency"] .profile-name, body[data-typo="bold-agency"] .bio-name { text-transform: uppercase; font-weight: 800 !important; letter-spacing: -0.01em !important; } /* ── PACK 5: Tech Mono — Space Grotesk + JetBrains Mono ─────────────────────── */ body[data-typo="tech-mono"] { --ux-heading-font: 'Space Grotesk', system-ui, sans-serif; --ux-body-font: 'JetBrains Mono', 'Fira Code', monospace; --ux-heading-weight: 700; --ux-heading-spacing: -0.02em; } body[data-typo="tech-mono"] p, body[data-typo="tech-mono"] li, body[data-typo="tech-mono"] .bio-bio { font-size: 0.875rem !important; line-height: 1.75 !important; } /* ── PACK 6: Grotesk Pro — Plus Jakarta Sans + Plus Jakarta Sans ─────────────── */ body[data-typo="grotesk-pro"] { --ux-heading-font: 'Plus Jakarta Sans', system-ui, sans-serif; --ux-body-font: 'Plus Jakarta Sans', system-ui, sans-serif; --ux-heading-weight: 800; --ux-heading-spacing: -0.025em; } body[data-typo="grotesk-pro"] h1, body[data-typo="grotesk-pro"] .profile-name, body[data-typo="grotesk-pro"] .bio-name { font-weight: 800 !important; letter-spacing: -0.025em !important; } /* ── PACK 7: Humanist — Nunito Sans + Source Sans 3 ─────────────────────────── */ body[data-typo="humanist"] { --ux-heading-font: 'Nunito Sans', system-ui, sans-serif; --ux-body-font: 'Source Sans 3', system-ui, sans-serif; --ux-heading-weight: 700; --ux-heading-spacing: -0.01em; } /* ── PACK 8: Sci-Fi — Oxanium + Space Mono ──────────────────────────────────── */ body[data-typo="sci-fi"] { --ux-heading-font: 'Oxanium', 'Exo 2', system-ui, sans-serif; --ux-body-font: 'Space Mono', monospace; --ux-heading-weight: 700; --ux-heading-spacing: 0.02em; } body[data-typo="sci-fi"] h1, body[data-typo="sci-fi"] h2, body[data-typo="sci-fi"] .profile-name, body[data-typo="sci-fi"] .bio-name { text-transform: uppercase; letter-spacing: 0.03em !important; } body[data-typo="sci-fi"] p, body[data-typo="sci-fi"] li { font-size: 0.8125rem !important; line-height: 1.8 !important; } /* ── PACK 9: Warm Classic — Lora + Lato ─────────────────────────────────────── */ body[data-typo="warm-classic"] { --ux-heading-font: 'Lora', Georgia, serif; --ux-body-font: 'Lato', system-ui, sans-serif; --ux-heading-weight: 600; --ux-heading-spacing: 0; } /* ── PACK 10: Creative Bold — Syne + Work Sans ──────────────────────────────── */ body[data-typo="creative-bold"] { --ux-heading-font: 'Syne', system-ui, sans-serif; --ux-body-font: 'Work Sans', system-ui, sans-serif; --ux-heading-weight: 800; --ux-heading-spacing: -0.025em; } body[data-typo="creative-bold"] h1, body[data-typo="creative-bold"] .profile-name { font-size: clamp(2rem, 5.5vw, 4rem) !important; font-weight: 800 !important; } /* ── PACK 11: Minimalist — DM Sans + DM Mono ────────────────────────────────── */ body[data-typo="minimalist"] { --ux-heading-font: 'DM Sans', system-ui, sans-serif; --ux-body-font: 'DM Mono', 'Courier New', monospace; --ux-heading-weight: 600; --ux-heading-spacing: -0.02em; } body[data-typo="minimalist"] p, body[data-typo="minimalist"] li { font-size: 0.8125rem !important; letter-spacing: 0.01em; } /* ── PACK 12: Old-Money — Playfair Display + EB Garamond ────────────────────── */ body[data-typo="old-money"] { --ux-heading-font: 'Playfair Display', Georgia, serif; --ux-body-font: 'EB Garamond', Georgia, serif; --ux-heading-weight: 700; --ux-heading-spacing: 0; } body[data-typo="old-money"] h1, body[data-typo="old-money"] .profile-name, body[data-typo="old-money"] .bio-name { font-style: italic; letter-spacing: 0.01em !important; } body[data-typo="old-money"] p, body[data-typo="old-money"] li { font-size: 1rem !important; line-height: 1.8 !important; } /* ── PACK 13: Urban Edge — Rajdhani + Rubik ─────────────────────────────────── */ body[data-typo="urban-edge"] { --ux-heading-font: 'Rajdhani', system-ui, sans-serif; --ux-body-font: 'Rubik', system-ui, sans-serif; --ux-heading-weight: 700; --ux-heading-spacing: 0.02em; } body[data-typo="urban-edge"] h1, body[data-typo="urban-edge"] h2, body[data-typo="urban-edge"] .profile-name, body[data-typo="urban-edge"] .bio-name { text-transform: uppercase; letter-spacing: 0.04em !important; } /* ── PACK 14: Gentle Round — Nunito + Quicksand ─────────────────────────────── */ body[data-typo="gentle-round"] { --ux-heading-font: 'Nunito', system-ui, sans-serif; --ux-body-font: 'Quicksand', system-ui, sans-serif; --ux-heading-weight: 800; --ux-heading-spacing: -0.01em; } body[data-typo="gentle-round"] h1, body[data-typo="gentle-round"] .profile-name, body[data-typo="gentle-round"] .bio-name { font-weight: 800 !important; } /* ── PACK 15: Newspaper — Libre Baskerville + Open Sans ─────────────────────── */ body[data-typo="newspaper"] { --ux-heading-font: 'Libre Baskerville', Georgia, serif; --ux-body-font: 'Open Sans', system-ui, sans-serif; --ux-heading-weight: 700; --ux-heading-spacing: 0; } body[data-typo="newspaper"] h1, body[data-typo="newspaper"] h2, body[data-typo="newspaper"] .profile-name, body[data-typo="newspaper"] .bio-name { font-style: normal; letter-spacing: 0.005em !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 5 — RESPONSIVE MOBILE GUARDS Ensure UX engine overrides hold on small screens. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { body[data-card-shape="pill"] .bio-card, body[data-card-shape="pill"] .card-base { border-radius: 40px !important; } body[data-motion="dynamic"] .bio-card:hover { transform: translateY(-3px) scale(1.01) !important; } } @media (prefers-reduced-motion: reduce) { body[data-motion="dynamic"] * { animation-duration: 0.3s !important; transition-duration: 0.2s !important; } body[data-motion="dynamic"] .bio-card:hover { transform: translateY(-2px) !important; } }