/* ============================================================================ * File: packages/css/src/global.css * Purpose: Perditio global style system — true-black “Mac-like glass” surfaces, * neon edge glow that cycles, Bebas Neue (display) + Inter (body), * and an animation vocabulary for “storybook unfolding”. * * WHAT THIS FILE COVERS (and why) * - Token loading: * We import tokens via HTTP (/assets/tokens.css) because browsers cannot * read filesystem paths inside packages; Cloud Run can serve /assets/* safely. * We also define strong fallbacks so the site stays readable if tokens fail. * - Base & typography: * Ensures body text is never black on black, sets display/body font stacks, * mobile-first type scales, and crisp rendering. * - Glass & Glow: * A reusable glass surface treatment with backdrop blur and a neon edge halo. * Matches the Perditio brand “cinematic” feel. * - Focus rings & button pulse: * Accessible keyboard focus and a click/press pulse for “interactable” affordance. * - Motion utilities (reduced-motion aware): * Named effects (Typewriter*, Pop, Jump, Step, Fade, Zoom, Reveal, Slide Right, * Hop, Flicker, Karaoke, Emphasize, Drift Up, Loud, Speedy, Fall, Headline, * Slide Up) the apps can compose to tell a story. *Typewriter usually needs * JS to feed characters; we provide CSS scaffolding + comments. * - Hero & Parallax scaffolding: * Structural classes for layered chapters/hero sections used across pages. * - Form inputs: * Glass-friendly inputs that match the look used by your mobile-first CTAs. * * WHERE THIS IS USED * - Any app under /apps/* that includes /assets/global.css in its HTML or root layout. * - Shared surfaces and motion across Pages/Sections/Chapters to stay consistent. * * CRITICAL DEPENDENCIES (outside this file) * - /assets/tokens.css must exist in the built app (copied from @perditio/tokens). * - Fonts (Bebas Neue, Inter) must be loaded by the app (link tags or @font-face). * We use token & stack fallbacks so rendering remains robust if fonts fail to load. * ============================================================================ */ /* ---------------------------------------------------------------------------- * TOKEN IMPORT (HTTP ONLY) * WHY: * - Browsers cannot read package filesystem paths. * - /assets/tokens.css must be served by the app (e.g., apps/web/public/assets). * - Using HTTP guarantees correct loading in Cloud Run and local dev servers. * ---------------------------------------------------------------------------- */ @import url("/assets/tokens.css"); /* NOTE: * If tokens fail to load (404/blocked), our fallbacks below keep the UI readable * and on-brand enough to ship while you fix the build-copies. */ /* ---------------------------------------------------------------------------- * SAFETY FALLBACKS * WHAT: * - Provide baseline tokens so text never goes black on black, * and the brand “glass on true black” renders even without tokens. * WHERE: * - Applied globally in :root; app themes can override these. * ---------------------------------------------------------------------------- */ :root { /* Surfaces on true black */ --bg: #000000; /* Page background (true black for OLED) */ --surface: rgba(255,255,255,0.06); /* Glass base fill */ --surface-strong: rgba(255,255,255,0.10);/* Stronger surface for cards */ --surface-border: rgba(255,255,255,0.16);/* 1px outline to define edges on black */ /* Text & link */ --text: #ffffff; /* IMPORTANT: prevents black-on-black */ --muted: rgba(255,255,255,0.72); --link: #8ddcff; /* Gentle cyan to fit neon edge */ /* Edge glow gradient stops (hue-rotated cycle) */ --glow-a: #00e5ff; /* cyan */ --glow-b: #5cff9a; /* green */ --glow-c: #ff6ad5; /* magenta */ /* Elevation + radii (soft, cinematic) */ --elev-1: 0 6px 24px rgba(0,0,0,0.45); --elev-2: 0 12px 40px rgba(0,0,0,0.55); --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Animation defaults */ --dur-1: 180ms; --dur-2: 340ms; --dur-3: 900ms; --ease: cubic-bezier(.25,.1,.25,1); /* Typography (display + body) — app must load these fonts */ --font-display: "Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Type scales (mobile-first, fluid) */ --fs-hero: clamp(32px, 6.4vw, 72px); --fs-h1: clamp(28px, 5.2vw, 56px); --fs-h2: clamp(22px, 4.2vw, 36px); --fs-h3: clamp(18px, 3.4vw, 28px); --fs-body: clamp(14px, 3vw, 18px); /* Parallax tuning (used by .chapter layers) */ --parallax-bg-speed: 1.2; --parallax-mid-speed: 1.8; --parallax-fg-speed: 2.4; } /* ---------------------------------------------------------------------------- * BASE & TYPOGRAPHY * WHY: * - Guarantee readability on true black and crisp rendering across platforms. * WHERE: * - Applies to all pages by default. Headings use display font; body uses Inter. * ---------------------------------------------------------------------------- */ html, body { height: 100%; } * { box-sizing: border-box; } body { margin: 0; color: var(--text, #ffffff); /* SAFETY fallback to white if token missing */ background: var(--bg, #000000); /* SAFETY fallback to true black */ font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Mac-like crispness */ text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0 0 0.4em 0; font-family: var(--font-display); /* Bebas Neue display */ letter-spacing: 0.02em; color: var(--text, #ffffff); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 1em 0; color: var(--text, #ffffff); opacity: 0.92; } a { color: var(--link, #8ddcff); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------------- * GLASS SURFACES * WHAT: * - Shared glass container (blur + subtle saturation) with soft shadow. * WHY: * - Core brand look: “Mac-like glass” floating on true black. * WHERE: * - Cards, drawers, nav bars, footers, modal shells, CTA panels, etc. * ---------------------------------------------------------------------------- */ .glass { background: var(--surface, rgba(255,255,255,0.06)); border: 1px solid var(--surface-border, rgba(255,255,255,0.16)); border-radius: var(--radius-xl, 20px); box-shadow: var(--elev-1, 0 6px 24px rgba(0,0,0,0.45)); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } /* ---------------------------------------------------------------------------- * NEON EDGE GLOW (cycling hue) * WHAT: * - A soft halo around any element to signal interactivity/importance. * WHY: * - Matches “buttons glow and cycle color when clickable” requirement. * WHERE: * - Add .glow to .glass containers, buttons, cards, hero frames. * ---------------------------------------------------------------------------- */ .glow { position: relative; isolation: isolate; } /* isolation keeps halo behind content */ .glow::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--glow-a), var(--glow-b), var(--glow-c)); opacity: .32; /* subtle by default */ filter: blur(14px); z-index: -1; animation: edgeCycle 8s linear infinite; /* continuous hue rotation */ } @keyframes edgeCycle { from { filter: blur(14px) hue-rotate(0deg) } to { filter: blur(14px) hue-rotate(360deg) } } /* ---------------------------------------------------------------------------- * BUTTONS — glass + glow + press pulse * WHY: * - Buttons should “feel alive”: hover lift, focus ring, press pulse. * WHERE: * - CTAs, form submits, nav actions; combine with .glass and .glow as needed. * ---------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: var(--text, #ffffff); text-decoration: none; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); will-change: transform; } .button.glass { backdrop-filter: blur(10px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(115%); } .button.glow::after { opacity: .45; } /* brighter halo for primary CTAs */ .button:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); } .button:active { transform: translateY(0); } /* remove lift on press */ .button[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; } /* Accessible keyboard focus for all interactive glass elements */ :where(.button, .glass, .input, .select, .checkbox):focus-visible { outline: 2px solid #8ddcff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(141,220,255,0.25); } /* Press pulse (add .is-active via JS on click to emphasize action taken) */ .button.is-active, .button[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(141,220,255,.6), 0 0 22px rgba(141,220,255,.42); animation: clickPulse 680ms ease; } @keyframes clickPulse { 0% { box-shadow: 0 0 0 0 rgba(141,220,255,.6), 0 0 0 rgba(141,220,255,0.0) } 50% { box-shadow: 0 0 0 4px rgba(141,220,255,.24), 0 0 18px rgba(141,220,255,.35) } 100% { box-shadow: 0 0 0 0 rgba(141,220,255,0), 0 0 0 rgba(141,220,255,0) } } /* ---------------------------------------------------------------------------- * LAYOUT HELPERS (mobile-first) * WHY: * - Keep page structure clean without a utility framework. * WHERE: * - Wrap main content (.container), pad sections, and scale at 900px+. * ---------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 16px; } .section { padding: 24px 16px; } @media (min-width: 900px) { .section { padding: 40px 24px; } } /* ---------------------------------------------------------------------------- * MOTION SYSTEM — “unfolding story” effects * WHY: * - Named, reusable animation primitives that designers/devs can compose. * - Respect reduced-motion for accessibility. * WHERE: * - Add these classes to any element; orchestrate with JS if desired (e.g., on scroll). * ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Core effects */ .anim-pop { animation: animPop var(--dur-2) var(--ease) both; } .anim-jump { animation: animJump 600ms ease-out both; } .anim-step { animation: animStep 1000ms steps(8) both; } /* stepped reveal */ .anim-step-fade { animation: animStepFade 900ms steps(10) both; } .anim-fade { animation: animFade var(--dur-2) var(--ease) both; } .anim-zoom { animation: animZoom 700ms var(--ease) both; } .anim-reveal { animation: animReveal 900ms var(--ease) both; } .anim-slide-r { animation: animSlideRight 700ms var(--ease) both; } .anim-hop { animation: animHop 780ms var(--ease) both; } .anim-flicker { animation: animFlicker 1600ms linear infinite; } .anim-karaoke { animation: animKaraoke 4s linear infinite; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(90deg, rgba(255,255,255,.2), #fff, rgba(255,255,255,.2)); } .anim-emph { animation: animEmphasize 900ms var(--ease) both; } .anim-drift-up { animation: animDriftUp 1800ms ease-out both; } .anim-loud { animation: animLoud 700ms var(--ease) both; } .anim-speedy { animation: animSpeedy 700ms var(--ease) both; } .anim-fall { animation: animFall 900ms cubic-bezier(.2,.9,.1,1) both; } .anim-headline { animation: animHeadline 1200ms var(--ease) both; } .anim-slide-up { animation: animSlideUp 700ms var(--ease) both; } /* Typewriter scaffolding (WHAT/WHY): * Pure CSS typewriter is brittle for variable-length sentences and caret control. * We provide a minimal caret effect; JS should toggle text content per sentence. * Use with a monospace or display font; add aria-live for accessibility. */ .typewriter { display: inline-block; overflow: hidden; /* hides the text until “typed” */ white-space: nowrap; border-right: 2px solid rgba(255,255,255,.7); /* caret */ animation: caretBlink 900ms step-end infinite; } @keyframes caretBlink { 50% { border-color: transparent; } } /* Keyframes for other effects */ @keyframes animPop { from { transform: scale(.97); opacity: 0 } to { transform: scale(1); opacity: 1 } } @keyframes animJump { 0% { transform: translateY(0) } 50% { transform: translateY(-8px) } 100% { transform: translateY(0) } } @keyframes animStep { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } } @keyframes animStepFade { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes animFade { from { opacity: 0 } to { opacity: 1 } } @keyframes animZoom { from { transform: scale(.96) } to { transform: scale(1) } } @keyframes animReveal { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0 0) } } @keyframes animSlideRight { from { transform: translateX(-18px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } @keyframes animHop { 0% { transform: translateY(0) } 40% { transform: translateY(-10px) } 100% { transform: translateY(0) } } @keyframes animFlicker { 0%,19%,21%,23%,80%,100% { opacity:1 } 20%,22%,24% { opacity:.5 } } @keyframes animEmphasize { 0% { letter-spacing: .02em } 50% { letter-spacing: .06em } 100% { letter-spacing: .02em } } @keyframes animDriftUp { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes animLoud { 0% { transform: scale(1) } 50% { transform: scale(1.04) } 100% { transform: scale(1) } } @keyframes animSpeedy { from { transform: translateX(-6px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } @keyframes animFall { from { transform: translateY(-8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes animHeadline { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes animSlideUp { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { [class^="anim-"], [class*=" anim-"], .typewriter { animation: none !important; } } /* ---------------------------------------------------------------------------- * HERO & PARALLAX SCAFFOLDING * WHY: * - Consistent hero sizing and layered chapter structure for your “scrollytelling”. * WHERE: * - Used by landing pages and sections that feature background/mid/foreground layers. * ---------------------------------------------------------------------------- */ .hero { min-height: 60vh; display: grid; align-content: center; gap: 12px; } .hero h1 { font-size: var(--fs-hero); } .lead { font-size: clamp(16px, 3.6vw, 20px); opacity: .9; max-width: 60ch; } .chapter { position: relative; min-height: 70vh; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--surface-border); background: rgba(255,255,255,0.03); transform-style: preserve-3d; /* enables tilt parallax with JS */ perspective: 1000px; } .chapter__bg, .chapter__mid, .chapter__fg { position: absolute; inset: 0; pointer-events: none; transform: translate3d(0,0,0); /* GPU hints for smoother parallax */ } .chapter__content { position: relative; z-index: 2; padding: clamp(20px, 6vw, 40px); } /* ---------------------------------------------------------------------------- * FORMS (used by Community/Partners/Investors CTAs) * WHY: * - Glass-aligned inputs that look at home on black and remain readable. * WHERE: * - Use .input for , .select for