/* Bloqio OS — design tokens. Maps to future theme.json; calm, human, editorial. */ /* * ============================================================================= * Bloqio visual system (maintainer map — not user-facing) * ----------------------------------------------------------------------------- * Goverless — atmospheric holo: hero washes, motes, premium card/CTA shells. * Hero tiers: .goverless-hero--strong|--home (strongest), --medium|--product, * --soft|--contact (calm), --minimal (profile / person-led restraint). * Surfaces: .goverless-surface--card | --premium (alias), --cta | --cta-premium (alias). * * Holo Motion — motion language: page enter, section reveals, card/CTA micro-lift. * Tokens: --holo-motion-ease, --holo-motion-ease-enter, --holo-motion-ease-drift, * --holo-motion-duration*, --holo-motion-reveal-y, --holo-motion-stagger-*, * --holo-motion-duration-micro (transform/shadow), --holo-motion-rail-marquee, * --holo-motion-shine-text, --holo-motion-ring-rotate (continuous chrome). * Scripts: main.js adds .holo-motion-section / .holo-motion-visible on major sections. * * Liquid Glass — interactive chrome: .button primary/secondary/ghost, nav bar, pills. * Micro-lift + soft highlight; use --holo-motion-duration-fast for hovers. * * Intensity by page: home = strongest Goverless; toolkit/about/gallery/products = * medium; contact = soft; jossuealcala = minimal Goverless hero + restrained holo surfaces + same section IO with calm pacing. * * Crosswalk (product vocabulary here ↔ symbols in this repo; implementation unchanged): * Bloqio Holoform — goverless-*, .shine-card*, .holo-cta-surface, holo motion hooks (.holo-motion-*). * LumenEdge — conic/edge: @property --bloqio-edge-angle; .shine-card__ring / edge chrome in pages.css. * Glassware (Bloqio Glass) — :root --bloqio-glass-*; comment aliases “liquid glass” / “Bloqio Glass” point here. * ============================================================================= */ /* * ============================================================================= * Bloqio Holoform — official taxonomy (documentation only; no runtime effect) * ----------------------------------------------------------------------------- * Use this map for future refactors. Existing class names in HTML/CSS are unchanged. * * 1) Bloqio Holoform — umbrella UI language: how premium surfaces, motion, glass, * and Goverless atmosphere combine on the public site. Not a single class. * * 2) Holo — soft internal atmosphere / subtle chromatic surfaces (washes, halos, * layered radials, motes, inner glow). Often pairs with Goverless + shine. * * 3) Holo Motion — motion system: page enter, section reveals, card/CTA micro-lift; * tokens --holo-motion-*; .holo-motion-*, .goverless-card-hover, button transitions. * * 4) LumenEdge — thin dynamic chromatic perimeter / “living” rim: .shine-card__ring * and related conic edge treatments in pages.css; @property --bloqio-edge-angle * is defined here for future edge logic. * * 5) Glassware — liquid glass: translucent, tactile, blur + frosted stack; tokens * --bloqio-glass-*. See utility card (U) below. * * 6) Goverless — ambient particles, keyword rails, chromatic text, atmospheric * hero details: .goverless-*, .goverless-mote*, .goverless-rail, etc. * ----------------------------------------------------------------------------- * Card taxonomy — Holoform-related patterns: (U) soft utility; (A) and (B) * marketing/product premium; (C) profile editorial (jossuealcala). Do not mix * families casually; do not migrate Product Catalog to .shine-card without a dedicated * visual QA pass. Do not force (A) or (B) onto /jossuealcala: that route keeps its * own calmer editorial system (C). * * (U) Glassware utility — class: .glass-card (styles/components.css) * Use for: normal soft cards, secondary cards, utility panels, readable * content blocks, steps, and most information surfaces (not the two premium * families below). * * (A) Holoform Priority Card (LumenEdge + shine stack) — existing stack on one * element (HTML order as in templates): * .goverless-surface--card * .shine-card * child .shine-card__ring * optional .shine-card__surface or .shine-card__surface--holo-panel * optional .goverless-card-hover * Use for: final CTAs (tier: .goverless-surface--cta, .shine-card--cta, * .holo-cta-surface), selected premium surfaces, roadmap / holo panels, * important editorial cards, hero-adjacent shine panels. * * (B) Product Catalog Card — separate approved premium system (e.g. apps/index * product listings); does *not* use the shine + goverless--card + ring stack in * markup. Existing stack: * .product-card * .product-catalog-card * .product-catalog-card--shine * .goverless-card-hover * optional ID-scoped CSS (#prometeo / #hermes) in pages.css * Edge/shine is implemented via product-card + catalog rules (not * .shine-card__ring). Holoform-compatible, but not interchangeable with (A). * Use for: Prometeo / Hermes catalog cards, product-led cards on /apps. * * (C) Profile Editorial Card — jossuealcala (body.profile-cv) only. Same Bloqio * System DNA as the rest of the site, but calmer and more restrained than * marketing or product-landing energy: white-first, professional, editorial; * subtle polish, thin border only when needed, restrained .goverless-card-hover * (where used). Intentionally not: product-catalog punch, aggressive animated * LumenEdge ring as hero motif, “pedestal”/heavy underglow, bottom glow, busy * chromatic footer, or app-landing drama. In markup today, surfaces often use * .goverless-surface--card, .shine-card (with ring tuned quieter in * styles/pages.css + jossuealcala/styles.css), .profile-cv-card--*, and related * BEM; those implementations stay — (C) is the *naming* and intent for this lane. * Use for: professional summary, metrics/stats, expertise, projects, GOS, other * profile-specific editorial blocks. * ----------------------------------------------------------------------------- * Future alias names (RESERVED IN DOCS ONLY — not wired to HTML; do not add empty * rulesets: no selectors until a planned migration. Intended prefix: bhf = Bloqio * Holoform, for a future thin alias layer, e.g.): * .bhf-card * .bhf-card--glassware → migrate toward pairing with .glass-card semantics * .bhf-card--priority → migrate toward (A) stack: .goverless-surface--card + .shine-card * .bhf-card--product → (RESERVED) future: align with (B) product-catalog stack; NOT implemented yet * .bhf-card--profile → (RESERVED) future: align with (C) profile editorial; NOT implemented yet * .profile-editorial-card / .profile-editorial-card--important → (RESERVED) doc-only; NOT implemented yet * .bhf-card--cta → CTA tier of (A) when adopted * .bhf-lumenedge → LumenEdge / ring layer documentation hook * .bhf-holo-surface → internal holo / wash documentation hook * .bhf-goverless-rail → rail / keyword strip documentation hook * .bhf-holo-motion → holo motion hooks / tokens documentation hook * First likely implementation target (not done yet): .bhf-card--priority as a * single class that composes the same *visual* system as * .goverless-surface--card + .shine-card (including .shine-card__ring), after * visual parity testing — or keep docs-only and rely on the stack list above. * ============================================================================= */ :root { /* —— Core palette —— */ --color-identity: #444444; --color-accent-orange: #f5911e; --color-accent-orange-hover: #df8314; --color-accent-blue: #426fff; --color-accent-blue-hover: #3566d4; /* Use sparingly: éxito, live, rendimiento */ --color-accent-green: #14ff00; --color-bg: #ffffff; --color-bg-soft: #f3f3f3; --color-bg-soft-alt: #f2f2f2; --color-text: var(--color-identity); --color-text-muted: #5c5c5c; --color-text-subtle: #6e6e6e; --color-border: rgba(68, 68, 68, 0.1); --color-border-strong: rgba(68, 68, 68, 0.16); /* Semantic aliases */ --color-bg-elevated: var(--color-bg); --color-link: var(--color-accent-blue); --color-link-hover: var(--color-accent-blue-hover); --color-cta: var(--color-accent-blue); --color-cta-hover: var(--color-accent-blue-hover); --color-focus: var(--color-accent-blue); /* Legacy hook: footer / nav hovers expecting “accent” */ --color-accent: var(--color-link); /* Bloqio Glass (distinct from generic “liquid glass”; neutral + soft depth) */ --bloqio-glass-bg: rgba(255, 255, 255, 0.7); --bloqio-glass-border: rgba(68, 68, 68, 0.082); --bloqio-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.99) inset, 0 0 0 0.5px color-mix(in srgb, var(--color-identity) 4.5%, transparent), 0 8px 32px rgba(68, 68, 68, 0.044), 0 24px 58px rgba(68, 68, 68, 0.03); --bloqio-glass-blur: 20px; --bloqio-glass-blur-strong: 26px; --bloqio-glass-saturate: 1.12; /* * Bloqio Holoform — visual refinement tokens * Paper-first surfaces + thin LumenEdge vocabulary; map to existing palette. * Consumed incrementally in components/pages; legacy --bloqio-* remain canonical. * Brand blue in production CSS is --color-accent-blue (#426fff); alternate #423DFF * is within the same family for design-tool parity. */ --bhf-paper: #ffffff; --bhf-paper-soft: color-mix(in srgb, var(--color-bg) 95%, var(--color-accent-orange) 2%); --bhf-ink: var(--color-text); --bhf-muted: var(--color-text-muted); --bhf-glass-fill: var(--bloqio-glass-bg); --bhf-glass-fill-strong: color-mix(in srgb, var(--bloqio-glass-bg) 92%, #ffffff); --bhf-glass-border: var(--bloqio-glass-border); --bhf-glass-highlight: color-mix(in srgb, #ffffff 92%, var(--color-accent-blue) 8%); --bhf-glass-shadow: var(--bloqio-glass-shadow); --bhf-glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.99) inset, 0 0 0 0.5px color-mix(in srgb, var(--color-identity) 5%, transparent), 0 9px 36px rgba(68, 68, 68, 0.055), 0 24px 58px rgba(68, 68, 68, 0.038); /* LumenEdge — canonical stops for .shine-card__ring conic (same mixes as implementation) */ --bhf-lumenedge: color-mix(in srgb, var(--color-accent-blue) 45%, transparent); --bhf-lumenedge-soft: color-mix(in srgb, var(--color-accent-orange) 35%, transparent); --bhf-lumenedge-muted: color-mix(in srgb, var(--color-identity) 26%, transparent); --bhf-lumenedge-blue-mid: color-mix(in srgb, var(--color-accent-blue) 40%, transparent); --bhf-lumenedge-green: color-mix(in srgb, var(--color-accent-green) 15%, transparent); --bhf-lumenedge-orange-mid: color-mix(in srgb, var(--color-accent-orange) 36%, transparent); --bhf-lumenedge-blue-strong: color-mix(in srgb, var(--color-accent-blue) 46%, transparent); --bhf-lumenedge-orange-soft: color-mix(in srgb, var(--color-accent-orange) 34%, transparent); --bhf-lumenedge-glow: 0 0 22px color-mix(in srgb, var(--color-identity) 8%, transparent), 0 0 40px color-mix(in srgb, var(--color-accent-blue) 6%, transparent); --bhf-lumenedge-primary: color-mix(in srgb, var(--color-accent-blue) 46%, transparent); --bhf-lumenedge-depth: color-mix(in srgb, var(--color-identity) 18%, transparent); --bhf-lumenedge-interactive: color-mix(in srgb, var(--color-accent-orange) 40%, transparent); --bhf-holo-wash: color-mix(in srgb, var(--color-accent-blue) 6.5%, transparent); --bhf-holo-wash-soft: color-mix(in srgb, var(--color-accent-orange) 5%, transparent); --bhf-motion-ease: var(--holo-motion-ease); --bhf-motion-duration: var(--holo-motion-duration-fast); --bhf-motion-duration-slow: var(--holo-motion-duration); /* Liquid Glass — interactive buttons: crisp inset + chromatic depth (not flat gray blobs) */ --shadow-button-primary-hover: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 2px 8px color-mix(in srgb, var(--color-cta) 22%, transparent), 0 10px 28px rgba(0, 0, 0, 0.075); --shadow-button-secondary-hover: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 2px 8px color-mix(in srgb, var(--color-identity) 7%, transparent), 0 10px 28px rgba(68, 68, 68, 0.06); --shadow-button-ghost-hover: 0 1px 0 rgba(255, 255, 255, 0.82) inset, 0 2px 6px color-mix(in srgb, var(--color-identity) 6%, transparent), 0 8px 22px rgba(68, 68, 68, 0.052); /* Goverless — keyword / strip chrome (rails + home support strip) */ --goverless-strip-border: 1px solid color-mix(in srgb, var(--color-identity) 7%, transparent); /* * Holo Motion — intentional scale (light on paper / glass response / module precision) * micro (180–260ms) < fast (280–380ms) < page (520–760ms) < section (650–850ms) * ambient: rail marquee / text shine / ring rotate (12–32s class; tuned per effect) */ --holo-motion-duration-micro: 0.26s; --holo-motion-duration-press: 0.14s; --holo-motion-duration-reveal-soft: 0.88s; --holo-motion-stagger-step: 0.065s; --holo-motion-stagger-max: 0.26s; --holo-motion-rail-marquee: 82s; --holo-motion-shine-text: 16s; --holo-motion-ring-rotate: 28s; /* Names consumed by layout.css / legacy hooks */ --color-glass-fill: var(--bloqio-glass-bg); --color-glass-stroke: var(--bloqio-glass-border); --blur-glass: var(--bloqio-glass-blur); --blur-glass-strong: var(--bloqio-glass-blur-strong); --color-shadow: rgba(68, 68, 68, 0.06); --color-shadow-strong: rgba(68, 68, 68, 0.11); --color-shadow-card: 0 2px 16px rgba(68, 68, 68, 0.05); /* Typography — fallbacks only, no external font loads */ --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif; --font-display: "DIN Alternate", "DIN Alternate Bold", "Arial Narrow", -apple-system, BlinkMacSystemFont, sans-serif; --font-subheader: "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Hiragino Kaku Gothic ProN", -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: clamp(1.75rem, 4vw, 2.25rem); --text-3xl: clamp(2rem, 5vw, 3rem); --text-hero: clamp(2.35rem, 6.5vw, 3.75rem); --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.03em; --tracking-display: -0.035em; --tracking-wide: 0.08em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --container-max: 72rem; --container-narrow: 40rem; --header-height: 3.25rem; --site-header-stack-height: var(--header-height); --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.125rem; --radius-full: 9999px; --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* Holo Motion — premium, non-bouncy (no spring / bounce) */ --holo-motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Entrances & reveals — soft deceleration, delicate landing */ --holo-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* Ambient loops (motes, halos, orbs) */ --holo-motion-ease-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* Section reveal: visible travel; stay within 720–880ms band */ --holo-motion-duration: 0.82s; --holo-motion-duration-fast: 0.36s; --holo-motion-page-duration: 0.74s; --holo-motion-page-y: 10px; --holo-motion-reveal-y: 12px; --motion-duration: 0.3s; /* Fast interactions track Holoform hover lane (ecommerce stays responsive) */ --motion-duration-fast: var(--holo-motion-duration-fast); } /* Animated conic border: angle updates without rotating the pseudo (avoids diagonal/streak artifacts). */ @property --bloqio-edge-angle { syntax: ""; inherits: false; initial-value: 0deg; } @media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0.01ms; --motion-duration-fast: 0.01ms; --holo-motion-duration: 0.01ms; --holo-motion-duration-fast: 0.01ms; --holo-motion-duration-micro: 0.01ms; --holo-motion-duration-press: 0.01ms; --holo-motion-page-duration: 0.01ms; --holo-motion-duration-reveal-soft: 0.01ms; --holo-motion-rail-marquee: 0.01ms; --holo-motion-shine-text: 0.01ms; --holo-motion-ring-rotate: 0.01ms; --holo-motion-page-y: 0px; --holo-motion-reveal-y: 0px; } }