/* ========================================================================== ALL-STYLES.CSS Unified themes, utilities, components & animations from your project collection. How to use theme: ... ========================================================================== */ /* -------------------------------------------------------------------------- 0) Base Reset & Defaults -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; line-height: 1.6; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; background: #0a0a0a; color: #eaeaea; } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; } /* Smooth fade-in utility */ .fade-in { animation: fadeIn .5s ease-out both; } @keyframes fadeIn { from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: translateY(0);} } /* -------------------------------------------------------------------------- 1) Theme Tokens (CSS Variables via [data-theme]) Switch by changing -------------------------------------------------------------------------- */ :root { --radius: 12px; --shadow-soft: 0 8px 24px rgba(0,0,0,.15); --shadow-strong: 0 12px 36px rgba(0,0,0,.35); --glass-bg: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.18); } /* Neon / Trading (Xtrackers, KIP) */ :root, [data-theme="neon"] { --bg: #0a0a0a; --bg-soft: #121826; --text: #e5f7f5; --muted: #9bd7d0; --primary: #00ffdf; /* neon aqua */ --primary-700: #009885; --secondary: #00ffff; /* cyan */ --accent: #0080ff; /* blue */ --amber: #FFB800; /* xtrackers amber */ --grid-line: rgba(0,255,223,0.05); } /* DVAG Corporate */ [data-theme="dvag"] { --bg: #f6f7fb; --bg-soft: #ffffff; --text: #333333; --muted: #5C6BC0; --primary: #003087; /* dvag-blue */ --secondary: #C5B358; /* dvag-gold */ --accent: #5C6BC0; /* light-blue */ } /* Generali Corporate */ [data-theme="generali"] { --bg: #ffffff; --bg-soft: #f5f5f5; --text: #333333; --muted: #8c0000; --primary: #b30000; /* generali-red */ --secondary: #e60000; /* red-light */ --accent: #8c0000; /* red-dark */ } /* Eco Green / Sustainability */ [data-theme="eco"] { --bg: #f5f9f6; --bg-soft: #ffffff; --text: #1c2121; --muted: #4e5a5a; --primary: #0a7c3e; /* green */ --secondary: #64dd17; /* lime */ --accent: #00bfa5; /* teal */ } /* Noir Detective / CRT */ [data-theme="noir"] { --bg: #111111; --bg-soft: #0a0a0a; --text: #d0ffd0; /* phosphor green */ --muted: #8be79b; --primary: #00ff9a; --secondary: #00ffa6; --accent: #0f0; } /* Apply theme variables */ body { background: var(--bg); color: var(--text); } /* -------------------------------------------------------------------------- 2) Typography Helpers (Headlines are often Orbitron; body Inter/Merriweather in projects) -------------------------------------------------------------------------- */ .h1,.h2,.h3,.h4,.h5 { font-family: "Orbitron", system-ui, sans-serif; letter-spacing: .5px; } .h1 { font-size: clamp(2rem, 3.5vw, 3rem); } .h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); } .h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); } .text-muted { color: var(--muted); } .text-primary { color: var(--primary); } .text-accent { color: var(--accent); } /* Gradient headline */ .gradient-text { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(255,255,255,.08); } /* -------------------------------------------------------------------------- 3) Layout Primitives -------------------------------------------------------------------------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .grid { display: grid; gap: 1rem; } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); } .section { padding: clamp(40px, 7vw, 80px) 0; } /* Cards */ .card { background: var(--bg-soft); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); } /* Glassmorphism */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius); } /* Gradient divider & golden separator */ .gradient-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: .4; } .golden-separator { height: 2px; background: linear-gradient(90deg, transparent, #C5B358, transparent); margin: 2rem 0; } /* Sticky header helper */ .sticky-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0,0,0,.35); } /* -------------------------------------------------------------------------- 4) Decorative Backgrounds (grids, cyber, neural) -------------------------------------------------------------------------- */ /* Neon grid pattern */ .grid-pattern { background-size: 50px 50px; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); } /* Cyber grid (cyan version) */ .cyber-grid { background-image: linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px); background-size: 50px 50px; } /* Neural radial spots */ .neural-bg { background-image: radial-gradient(circle at 20% 30%, rgba(0, 210, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 70%, rgba(0, 255, 136, 0.08) 0%, transparent 50%); } /* Film grain overlay */ .film-grain { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .05; background-image: url('data:image/svg+xml;utf8,\ \ \ \ \ '); z-index: 9999; } /* -------------------------------------------------------------------------- 5) Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border: none; border-radius: 10px; font-weight: 700; letter-spacing: .4px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: #fff; } .btn-primary:hover { transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: #000; } /* DVAG gradient header button vibe */ .btn-gold { background: linear-gradient(90deg, #C5B358, #E6D896); color: #0a0a0a; } /* -------------------------------------------------------------------------- 6) Text & Glow Effects -------------------------------------------------------------------------- */ .glow-text { text-shadow: 0 0 15px rgba(0,255,223,.7); } .glow-amber { text-shadow: 0 0 15px rgba(255,184,0,.7); } .neon-text { text-shadow: 0 0 5px #0f0, 0 0 12px #0f0, 0 0 24px #0fa; } /* Gradient borders */ .gradient-border { position: relative; border-radius: var(--radius); } .gradient-border::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); z-index: -1; filter: blur(.5px); } /* -------------------------------------------------------------------------- 7) Components -------------------------------------------------------------------------- */ /* Tooltips */ .tooltip { position: relative; display:inline-block; } .tooltip .tooltip-text { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px); min-width: 180px; max-width: 260px; padding: .6rem .8rem; border-radius: 8px; background: var(--bg-soft); color: var(--text); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transition: .2s ease; } .tooltip:hover .tooltip-text { opacity: 1; visibility: visible; } /* Toasts */ .toast { padding: .75rem 1rem; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow-soft); border-left: 4px solid currentColor; background: rgba(255,255,255,.04); } .toast.success { color: #00ff99; } .toast.warning { color: #ffcc00; } .toast.error { color: #ff3366; } /* Progress bar (DVAG) */ .progress-container { width: 100%; height: 4px; background: rgba(0,0,0,.12); position: sticky; top: 60px; z-index: 50; } .progress-bar { height: 4px; width: 0%; background: var(--secondary); } /* Speech bubbles (Comic) */ .speech-bubble { position: relative; padding: .9rem 1.1rem; border-radius: 12px; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12); } .speech-bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: inherit; border: inherit; transform: rotate(45deg); } .speech-bubble.top-left::after { left: 16px; top: -7px; border-right: none; border-bottom: none; } .speech-bubble.bottom-right::after{ right: 16px; bottom: -7px; border-left: none; border-top: none; } /* Chat bubbles (advisor / bot) */ .message { max-width: 80%; padding: .9rem 1rem; border-radius: 10px; line-height: 1.5; animation: fadeIn .3s ease; } .message.user { margin-left: auto; background: var(--primary); color: #000; } .message.assistant { background: var(--bg-soft); border: 1px solid rgba(255,255,255,.08); } /* Cards with labeled top rule */ .app-card { position: relative; } .app-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } /* Timeline (books / KIP) */ .timeline { position: relative; margin: 2rem 0; padding-left: 2rem; } .timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--primary), var(--accent)); border-radius: 2px; } .timeline-item { position: relative; margin-bottom: 1.5rem; } .timeline-item::before { content: ""; position: absolute; left: -10px; top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } /* Alerts (Generali-like) */ .alert { padding: 16px; border-radius: 8px; border-left: 4px solid; box-shadow: var(--shadow-soft); } .alert-success { background: #E8F5E9; color: #2E7D32; border-color: #4CAF50; } .alert-warning { background: #FFF8E1; color: #F57F17; border-color: #FFC107; } .alert-danger { background: #FFEBEE; color: #C62828; border-color: #F44336; } /* CRT Screen (Noir) */ .crt-screen { background-color: #0a0a0a; background-image: linear-gradient(rgba(0, 255, 0, 0.06) 1px, transparent 1px); background-size: 100% 2px; border: 2px solid #0f0; box-shadow: inset 0 0 10px rgba(0,255,0,.15), 0 0 20px rgba(0,255,0,.08); position: relative; } .crt-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.07) 0%, transparent 70%); } /* Flip card */ .flip-card { perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-content: center; padding: 1rem; border: 2px solid var(--primary); border-radius: var(--radius); background: var(--bg-soft); } .flip-card-back { transform: rotateY(180deg); } /* Gauge (KIP) */ .gauge-container { width: 200px; height: 100px; position: relative; overflow: hidden; margin-inline: auto; } .gauge-background, .gauge-fill, .gauge-center { width: 200px; height: 200px; border-radius: 100px; position: absolute; top: 0; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); } .gauge-background { background: rgba(0,0,0,.2); border: 4px solid rgba(0,255,223,.3); border-top: none; border-bottom: 4px solid rgba(0,255,223,.3); } .gauge-fill { background: conic-gradient(from 180deg, rgba(0,255,223,.8) 0%, rgba(0,255,223,.2) 100%); transition: transform 1s ease-out; } .gauge-center { background: #050505; top: 20px; left: 20px; } .gauge-needle { width: 4px; height: 100px; background: rgba(255,255,255,.9); position: absolute; top: 0; left: 98px; transform-origin: bottom center; transition: transform 1s ease-out; z-index: 2; } .gauge-needle::after { content: ""; position: absolute; top: -5px; left: -3px; width: 10px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.9); box-shadow: 0 0 10px rgba(0,255,223,1); } /* Chart Tooltip (trading) */ .chart-tooltip { background: rgba(10,10,10,.95) !important; border: 1px solid var(--secondary) !important; color: #fff !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", monospace !important; font-size: 11px !important; padding: 8px !important; border-radius: 4px !important; } /* Playlist/scrollbars (audio) */ .scroll-thin { scrollbar-width: thin; } .scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; } .scroll-thin::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 4px; } .scroll-thin::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, .5); border-radius: 4px; } .scroll-thin::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 255, 1); } /* -------------------------------------------------------------------------- 8) Animations (neon, pulse, typewriter, raindrop, glow) -------------------------------------------------------------------------- */ @keyframes neonGlow { 0%, 100% { text-shadow: 0 0 10px rgba(255, 184, 0, .8), 0 0 20px rgba(255, 184, 0, .6); } 50% { text-shadow: 0 0 20px rgba(255, 184, 0, 1), 0 0 30px rgba(255, 184, 0, .8); } } @keyframes neonGlowCyan { 0%, 100% { text-shadow: 0 0 10px rgba(0,255,255,.8), 0 0 20px rgba(0,255,255,.6); } 50% { text-shadow: 0 0 20px rgba(0,255,255,1), 0 0 30px rgba(0,255,255,.8); } } @keyframes pulse { 0%,100% {opacity:1} 50% {opacity:.5} } @keyframes typewriter { from{width:0} to{width:100%} } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } @keyframes raindrop { 0%{transform: translateY(-100%)} 100%{transform: translateY(100vh)} } @keyframes glow { 0% { text-shadow: 0 0 5px rgba(0,255,223,.7), 0 0 10px rgba(0,255,223,.5); } 100% { text-shadow: 0 0 10px rgba(0,255,223,.9), 0 0 20px rgba(0,255,223,.7), 0 0 30px rgba(0,255,223,.5); } } .animate-neon-amber { animation: neonGlow 2s ease-in-out infinite alternate; } .animate-neon-cyan { animation: neonGlowCyan 2s ease-in-out infinite alternate; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(.4,0,.6,1) infinite; } .typing { white-space: nowrap; overflow: hidden; display: inline-block; animation: typewriter 2s steps(40) forwards; } .blinking-caret { border-right: 2px solid var(--primary); animation: blink 1s infinite; } /* Rain lines */ .raindrop { position: absolute; width: 1px; height: 20px; opacity: .4; background: linear-gradient(to bottom, transparent, #0fa, transparent); animation: raindrop 2s linear infinite; } /* -------------------------------------------------------------------------- 9) Print Styles (E-Book / Reports) -------------------------------------------------------------------------- */ @media print { @page { margin: 1.5cm; size: A4; } body { background: #fff !important; color: #000 !important; font-size: 12pt; } .no-print, nav, button, .sidebar, .search-container { display: none !important; } h2 { page-break-before: always; padding-top: 1cm; } .golden-separator, .chart-container { break-inside: avoid; page-break-inside: avoid; } a { text-decoration: none; color: inherit; } } /* -------------------------------------------------------------------------- 10) Responsive Helpers -------------------------------------------------------------------------- */ @media (max-width: 768px) { .grid-responsive-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; } .mobile-tight { padding-left: .75rem; padding-right: .75rem; } .chart-container-sm { height: 300px !important; } } /* Extra-small (phones ~375px) */ @media (max-width: 400px) { .xs-hide { display: none !important; } } /* -------------------------------------------------------------------------- 11) Theming Helpers for Sections -------------------------------------------------------------------------- */ /* KIP neon box */ .glow-box { box-shadow: 0 0 15px rgba(0,255,223,.3); background: rgba(0,0,0,.6); border: 1px solid rgba(0,255,223,.4); border-radius: var(--radius); } /* Formula blocks (mono) */ .formula { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; padding: 15px; margin: 15px 0; border-radius: 8px; background: rgba(0,255,223,.05); border-left: 3px solid rgba(0,255,223,.5); overflow-x: auto; } /* Aged paper block (Noir props) */ .aged-paper { background-color: #f5e7d3; color: #5a3d2b; padding: 1rem; border: 1px solid #5a3d2b; box-shadow: 0 0 10px rgba(0,0,0,.2); background-image: url('data:image/svg+xml;utf8,\ \ \ \ \ '); } /* Category tags (books) */ .category-tag { display: inline-block; padding: .15rem .6rem; border-radius: 16px; font-size: .8rem; margin: .1rem .25rem .25rem 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); } /* Data points / badges */ .data-point { display: inline-block; background: rgba(179,0,0,.1); color: var(--primary); padding: 4px 8px; border-radius: 4px; font-weight: 700; } /* -------------------------------------------------------------------------- 12) Helpers (hide scrollbars, focus styles) -------------------------------------------------------------------------- */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- 13) Ready-to-use Section Patterns -------------------------------------------------------------------------- */ .hero { text-align: center; position: relative; z-index: 1; } .hero-title { composes: h1; } .hero-sub { color: var(--muted); max-width: 800px; margin: 0 auto; } .section-title { font-family: "Orbitron", system-ui, sans-serif; color: var(--primary); position: relative; display: inline-block; margin-bottom: 15px; } .section-title::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; width: 80px; height: 4px; background: var(--secondary); border-radius: 2px; } /* ========================================================================== ALL-STYLES.CSS – Deluxe v2 Unified, mobile-first, accessible, motion-aware. Use theme: , "dvag", "generali", "eco", "noir", or "auto" ========================================================================== */ /* 0) Base / Reset / Color-scheme ----------------------------------------- */ :root { color-scheme: dark light; } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; line-height: 1.6; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; background: #0a0a0a; color: #eaeaea; } img,svg,video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--primary, #00ffdf); outline-offset: 2px; } .visually-hidden { position: absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; } /* 1) Tokens / Themes ------------------------------------------------------ */ :root { --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --shadow-soft: 0 8px 24px rgba(0,0,0,.15); --shadow-strong: 0 12px 36px rgba(0,0,0,.35); --glass-bg: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.18); --surface-1: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.08); --ok: #10b981; --warn: #f59e0b; --err: #ef4444; --info: #0ea5e9; --z-base: 1; --z-popover: 20; --z-fixed: 50; --z-modal: 100; --z-toast: 300; } /* Neon / Trading */ :root,[data-theme="neon"]{ --bg:#0a0a0a; --bg-soft:#121826; --text:#e5f7f5; --muted:#9bd7d0; --primary:#00ffdf; --primary-700:#009885; --secondary:#00ffff; --accent:#0080ff; --amber:#FFB800; --grid-line:rgba(0,255,223,0.05); } /* DVAG */ [data-theme="dvag"]{ --bg:#f6f7fb; --bg-soft:#ffffff; --text:#333; --muted:#5C6BC0; --primary:#003087; --secondary:#C5B358; --accent:#5C6BC0; --grid-line:rgba(0,48,135,.08); } /* Generali */ [data-theme="generali"]{ --bg:#fff; --bg-soft:#f5f5f5; --text:#333; --muted:#8c0000; --primary:#b30000; --secondary:#e60000; --accent:#8c0000; --grid-line:rgba(179,0,0,.06); } /* Eco */ [data-theme="eco"]{ --bg:#f5f9f6; --bg-soft:#fff; --text:#1c2121; --muted:#4e5a5a; --primary:#0a7c3e; --secondary:#64dd17; --accent:#00bfa5; --grid-line:rgba(10,124,62,.06); } /* Noir / CRT */ [data-theme="noir"]{ --bg:#111; --bg-soft:#0a0a0a; --text:#d0ffd0; --muted:#8be79b; --primary:#00ff9a; --secondary:#00ffa6; --accent:#0f0; --grid-line:rgba(0,255,154,.05); } /* Auto – follows system scheme, neon hues by default */ [data-theme="auto"]{ --bg:#0a0a0a; --bg-soft:#121826; --text:#e5f7f5; --muted:#9bd7d0; --primary:#00ffdf; --secondary:#00ffff; --accent:#0080ff; --grid-line:rgba(0,255,223,0.05); } @media (prefers-color-scheme: light){ [data-theme="auto"]{ --bg:#f8fafc; --bg-soft:#fff; --text:#1f2937; --muted:#6b7280; --primary:#4f46e5; --secondary:#06b6d4; --accent:#10b981; --grid-line:rgba(79,70,229,.08); } } body{ background:var(--bg); color:var(--text); } /* 2) Typography ----------------------------------------------------------- */ .h1,.h2,.h3,.h4,.h5{ font-family:"Orbitron",system-ui,sans-serif; letter-spacing:.5px; } .h1{ font-size:clamp(2rem,3.5vw,3rem); font-weight:800; } .h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:700; } .h3{ font-size:clamp(1.2rem,2vw,1.6rem); font-weight:700; } .text-muted{ color:var(--muted); } .text-primary{ color:var(--primary); } .text-accent{ color:var(--accent); } .gradient-text{ background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 10px rgba(255,255,255,.08); } code,kbd,pre{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace; } pre{ background:var(--surface-1); border:1px solid var(--surface-2); padding:1rem; border-radius:10px; overflow:auto; } /* 3) Layout Primitives ---------------------------------------------------- */ .container{ max-width:1200px; margin-inline:auto; padding-inline:1rem; } .section{ padding-block:clamp(40px,7vw,80px); } .grid{ display:grid; gap:1rem; } .grid-auto{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); } /* Layout helpers: stack & cluster */ .stack > * + * { margin-block-start: var(--stack-space, 1rem); } .cluster{ display:flex; flex-wrap:wrap; gap:var(--cluster-gap, .75rem); align-items:center; } /* Cards */ .card{ background:var(--bg-soft); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-strong); } /* Glassmorphism */ .glass-card{ background:var(--glass-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--glass-border); border-radius:var(--radius); } /* Dividers */ .gradient-divider{ height:2px; background:linear-gradient(90deg,transparent,var(--primary),transparent); opacity:.4; } .golden-separator{ height:2px; background:linear-gradient(90deg,transparent,#C5B358,transparent); margin-block:2rem; } /* Safe-area sticky header (iOS) */ .sticky-header{ position:sticky; top:0; z-index:var(--z-fixed); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:color-mix(in oklab, var(--bg) 70%, black 30%); padding-top: max(0px, env(safe-area-inset-top)); } /* 4) Backgrounds ---------------------------------------------------------- */ .grid-pattern{ background-size:50px 50px; background-image: linear-gradient(to right,var(--grid-line) 1px,transparent 1px), linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px); } .cyber-grid{ background-image: linear-gradient(rgba(0,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(0,255,255,.05) 1px,transparent 1px); background-size:50px 50px; } .neural-bg{ background-image: radial-gradient(circle at 20% 30%, rgba(0,210,255,.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(157,78,221,.15) 0%, transparent 50%), radial-gradient(circle at 40% 70%, rgba(0,255,136,.08) 0%, transparent 50%); } .film-grain{ position:fixed; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.05; z-index:9999; background-image:url('data:image/svg+xml;utf8,'); } /* 5) Buttons -------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.1rem; border:none; border-radius:10px; font-weight:700; letter-spacing:.3px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn:disabled{ opacity:.55; cursor:not-allowed; } .btn-primary{ background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%); color:#000; } .btn-primary:hover{ transform:translateY(-2px); } .btn-outline{ background:transparent; color:var(--primary); border:2px solid var(--primary); } .btn-outline:hover{ background:var(--primary); color:#000; } .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--surface-2); } .btn-gold{ background:linear-gradient(90deg,#C5B358,#E6D896); color:#0a0a0a; } /* 6) Effects / Glow ------------------------------------------------------- */ .glow-text{ text-shadow:0 0 15px rgba(0,255,223,.7); } .glow-amber{ text-shadow:0 0 15px rgba(255,184,0,.7); } .neon-text{ text-shadow:0 0 5px #0f0, 0 0 12px #0f0, 0 0 24px #0fa; } .gradient-border{ position:relative; border-radius:var(--radius); } .gradient-border::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--secondary)); z-index:-1; filter:blur(.5px); } /* 7) Components ----------------------------------------------------------- */ /* Tooltips (4 directions) */ .tooltip{ position:relative; display:inline-block; } .tooltip .tooltip-text{ position:absolute; min-width:180px; max-width:260px; padding:.6rem .8rem; border-radius:8px; background:var(--bg-soft); color:var(--text); border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(4px); transition:.18s ease; z-index:var(--z-popover); } .tooltip:hover .tooltip-text{ opacity:1; visibility:visible; transform:none; } .tooltip.top .tooltip-text{ bottom:calc(100% + 8px); left:50%; transform:translate(-50%,4px); } .tooltip.right .tooltip-text{ left:calc(100% + 8px); top:50%; transform:translate(4px,-50%); } .tooltip.bottom .tooltip-text{ top:calc(100% + 8px); left:50%; transform:translate(-50%,4px); } .tooltip.left .tooltip-text{ right:calc(100% + 8px); top:50%; transform:translate(-4px,-50%); } /* Toasts + Container (positions) */ .toast{ padding:.75rem 1rem; border-radius:8px; font-weight:600; box-shadow:var(--shadow-soft); border-left:4px solid currentColor; background:rgba(255,255,255,.04); } .toast.success{ color:var(--ok); } .toast.warning{ color:var(--warn); } .toast.error{ color:var(--err); } .toast.info{ color:var(--info); } .toast-container{ position:fixed; inset:auto 1rem 1rem auto; display:grid; gap:.5rem; z-index:var(--z-toast); } .toast-container.top-left{ inset:1rem auto auto 1rem; } .toast-container.top-right{ inset:1rem 1rem auto auto; } .toast-container.bottom-left{ inset:auto auto 1rem 1rem; } /* Progress */ .progress-container{ width:100%; height:4px; background:rgba(0,0,0,.12); position:sticky; top:60px; z-index:var(--z-fixed); } .progress-bar{ height:4px; width:0%; background:var(--secondary); } /* Speech bubbles */ .speech-bubble{ position:relative; padding:.9rem 1.1rem; border-radius:12px; background:var(--bg-soft); border:1px solid rgba(255,255,255,.12); } .speech-bubble::after{ content:""; position:absolute; width:14px; height:14px; background:inherit; border:inherit; transform:rotate(45deg); } .speech-bubble.top-left::after{ left:16px; top:-7px; border-right:none; border-bottom:none; } .speech-bubble.bottom-right::after{ right:16px; bottom:-7px; border-left:none; border-top:none; } /* Chat bubbles */ .message{ max-width:80%; padding:.9rem 1rem; border-radius:10px; line-height:1.5; animation:fadeIn .3s ease; } .message.user{ margin-left:auto; background:var(--primary); color:#000; } .message.assistant{ background:var(--bg-soft); border:1px solid rgba(255,255,255,.08); } /* App cards top rule */ .app-card{ position:relative; } .app-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); } /* Timeline */ .timeline{ position:relative; margin:2rem 0; padding-left:2rem; } .timeline::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(to bottom,var(--primary),var(--accent)); border-radius:2px; } .timeline-item{ position:relative; margin-bottom:1.5rem; } .timeline-item::before{ content:""; position:absolute; left:-10px; top:.4rem; width:10px; height:10px; border-radius:50%; background:var(--primary); } /* Alerts */ .alert{ padding:16px; border-radius:8px; border-left:4px solid; box-shadow:var(--shadow-soft); } .alert-success{ background:#E8F5E9; color:#2E7D32; border-color:#4CAF50; } .alert-warning{ background:#FFF8E1; color:#F57F17; border-color:#FFC107; } .alert-danger{ background:#FFEBEE; color:#C62828; border-color:#F44336; } .alert-info{ background:#E3F2FD; color:#1565C0; border-color:#42A5F5; } /* CRT Screen */ .crt-screen{ background:#0a0a0a; background-image:linear-gradient(rgba(0,255,0,.06) 1px, transparent 1px); background-size:100% 2px; border:2px solid #0f0; box-shadow: inset 0 0 10px rgba(0,255,0,.15), 0 0 20px rgba(0,255,0,.08); position:relative; } .crt-screen::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,255,0,.07) 0%, transparent 70%); } /* Flip card */ .flip-card{ perspective:1000px; } .flip-card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s; } .flip-card:hover .flip-card-inner{ transform:rotateY(180deg); } .flip-card-front,.flip-card-back{ position:absolute; inset:0; backface-visibility:hidden; display:grid; place-content:center; padding:1rem; border:2px solid var(--primary); border-radius:var(--radius); background:var(--bg-soft); } .flip-card-back{ transform:rotateY(180deg); } /* Gauge */ .gauge-container{ width:200px; height:100px; position:relative; overflow:hidden; margin-inline:auto; } .gauge-background,.gauge-fill,.gauge-center{ width:200px; height:200px; border-radius:100px; position:absolute; top:0; clip-path:polygon(0 50%, 100% 50%, 100% 100%, 0 100%); } .gauge-background{ background:rgba(0,0,0,.2); border:4px solid rgba(0,255,223,.3); border-top:none; border-bottom:4px solid rgba(0,255,223,.3); } .gauge-fill{ background:conic-gradient(from 180deg, rgba(0,255,223,.8) 0%, rgba(0,255,223,.2) 100%); transition:transform 1s ease-out; } .gauge-center{ background:#050505; top:20px; left:20px; } .gauge-needle{ width:4px; height:100px; background:rgba(255,255,255,.9); position:absolute; top:0; left:98px; transform-origin:bottom center; transition:transform 1s ease-out; z-index:2; } .gauge-needle::after{ content:""; position:absolute; top:-5px; left:-3px; width:10px; height:10px; border-radius:5px; background:rgba(255,255,255,.9); box-shadow:0 0 10px rgba(0,255,223,1); } /* Navbar / Sidebar / Offcanvas */ .navbar{ position:sticky; top:0; z-index:var(--z-fixed); background:color-mix(in oklab, var(--bg) 70%, black 30%); backdrop-filter:blur(10px); } .navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; } .sidebar{ position:fixed; inset:0 auto 0 0; width:min(82vw,320px); background:var(--bg-soft); transform:translateX(-100%); transition:transform .25s ease; z-index:var(--z-fixed); border-right:1px solid var(--surface-2); } .sidebar.open{ transform:none; } .offcanvas-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.2s ease; z-index:var(--z-fixed); } .offcanvas-backdrop.show{ opacity:1; visibility:visible; } /* Modal */ .modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:var(--z-modal); } .modal.open{ display:flex; } .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); } .modal-dialog{ position:relative; background:var(--bg-soft); border:1px solid var(--surface-2); border-radius:var(--radius); padding:1rem; max-width:min(90vw,640px); width:100%; box-shadow:var(--shadow-strong); } /* Tabs */ .tabs{ display:flex; border-bottom:2px solid var(--surface-2); overflow-x:auto; gap:.25rem; } .tab{ padding: .75rem 1rem; border-bottom:2px solid transparent; white-space:nowrap; font-family:"Orbitron",sans-serif; font-weight:600; font-size:.9rem; letter-spacing:.8px; color:var(--text); transition:.2s ease; } .tab:hover{ color:var(--primary); background:rgba(79,70,229,.05); } .tab.active{ border-bottom-color:var(--primary); color:var(--primary); box-shadow:0 -5px 10px -5px rgba(79,70,229,.25); } .tab-content{ display:none; } .tab-content.active{ display:block; animation:fadeIn .5s ease; } /* Accordion */ .accordion{ border:1px solid var(--surface-2); border-radius:var(--radius); overflow:hidden; } .accordion-item + .accordion-item{ border-top:1px solid var(--surface-2); } .accordion-summary{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; background:var(--bg-soft); cursor:pointer; font-weight:600; } .accordion-panel{ padding:1rem; display:none; background:var(--surface-1); } .accordion-item.open .accordion-panel{ display:block; } /* Tables */ .table{ width:100%; border-collapse:collapse; } .table th,.table td{ padding:.75rem .9rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; } .table th{ background:rgba(0,0,0,.15); font-weight:700; } .table tr:hover{ background:rgba(255,255,255,.04); } .table-striped tr:nth-child(odd){ background:rgba(255,255,255,.02); } .table-responsive{ width:100%; overflow-x:auto; } /* Forms: inputs/selects/textarea/range/toggles/checkbox ------------------- */ .input, .select, .textarea{ width:100%; padding:.75rem .9rem; border-radius:10px; background:var(--surface-1); color:var(--text); border:1px solid var(--surface-2); transition:border-color .2s ease, box-shadow .2s ease; } .input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 30%, transparent); } .input[aria-invalid="true"]{ border-color:var(--err); box-shadow:0 0 0 3px color-mix(in oklab,var(--err) 30%, transparent); } .help-text{ font-size:.85rem; color:var(--muted); margin-top:.35rem; } .range{ width:100%; -webkit-appearance:none; height:6px; background:var(--surface-2); border-radius:6px; outline:none; } .range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--primary); border:2px solid #000; box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 35%, transparent); cursor:pointer; } .range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--primary); border:2px solid #000; cursor:pointer; } .checkbox{ appearance:none; width:18px; height:18px; border-radius:4px; border:2px solid color-mix(in oklab,var(--primary) 60%, #999); display:inline-grid; place-items:center; background:transparent; cursor:pointer; transition:.2s ease; } .checkbox:checked{ background:var(--primary); border-color:var(--primary); } .checkbox:checked::after{ content:"✓"; font-size:12px; color:#000; font-weight:900; } .switch{ --w:44px; --h:24px; position:relative; width:var(--w); height:var(--h); display:inline-block; } .switch input{ appearance:none; width:100%; height:100%; background:var(--surface-2); border-radius:999px; position:relative; outline:none; border:1px solid var(--surface-2); cursor:pointer; transition:.2s ease; } .switch input::after{ content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:50%; left:2px; transform:translateY(-50%); transition:.2s ease; } .switch input:checked{ background:color-mix(in oklab,var(--primary) 40%, var(--surface-2)); border-color:var(--primary); } .switch input:checked::after{ left:calc(100% - 22px); } /* Select caret (inline SVG) */ .select{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:right .8rem center; background-repeat:no-repeat; background-size:1.1em; padding-right:2.4rem; } /* 8) Animations & Motion Preferences ------------------------------------- */ @keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} } @keyframes neonGlow{ 0%,100%{ text-shadow:0 0 10px rgba(255,184,0,.8),0 0 20px rgba(255,184,0,.6)} 50%{ text-shadow:0 0 20px rgba(255,184,0,1),0 0 30px rgba(255,184,0,.8)} } @keyframes neonGlowCyan{ 0%,100%{ text-shadow:0 0 10px rgba(0,255,255,.8),0 0 20px rgba(0,255,255,.6)} 50%{ text-shadow:0 0 20px rgba(0,255,255,1),0 0 30px rgba(0,255,255,.8)} } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.5} } @keyframes typewriter{ from{width:0} to{width:100%} } @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} } @keyframes raindrop{ 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} } @keyframes glow{ 0%{ text-shadow:0 0 5px rgba(0,255,223,.7),0 0 10px rgba(0,255,223,.5)} 100%{ text-shadow:0 0 10px rgba(0,255,223,.9),0 0 20px rgba(0,255,223,.7),0 0 30px rgba(0,255,223,.5)} } @keyframes shimmer{ 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } } @keyframes spin{ to{ transform:rotate(360deg) } } .animate-neon-amber{ animation:neonGlow 2s ease-in-out infinite alternate; } .animate-neon-cyan{ animation:neonGlowCyan 2s ease-in-out infinite alternate; } .animate-pulse-slow{ animation:pulse 3s cubic-bezier(.4,0,.6,1) infinite; } .typing{ white-space:nowrap; overflow:hidden; display:inline-block; animation:typewriter 2s steps(40) forwards; } .blinking-caret{ border-right:2px solid var(--primary); animation:blink 1s infinite; } .raindrop{ position:absolute; width:1px; height:20px; opacity:.4; background:linear-gradient(to bottom,transparent,#0fa,transparent); animation:raindrop 2s linear infinite; } /* Motion reduce */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 9) Print --------------------------------------------------------------- */ @media print{ @page{ margin:1.5cm; size:A4; } body{ background:#fff !important; color:#000 !important; font-size:12pt; } .no-print, nav, button, .sidebar, .search-container{ display:none !important; } h2{ page-break-before:always; padding-top:1cm; } .gradient-divider, .golden-separator, .chart-container{ break-inside:avoid; page-break-inside:avoid; } a{ text-decoration:none; color:inherit; } } /* 10) Responsive helpers ------------------------------------------------- */ @media (max-width: 1024px){ .grid-md-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } } @media (max-width: 768px){ .grid-responsive-1{ display:grid; grid-template-columns:1fr; gap:1rem; } .mobile-tight{ padding-inline:.75rem; } .hide-md{ display:none !important; } .chart-container-sm{ height:300px !important; } } @media (max-width: 400px){ .xs-hide{ display:none !important; } } /* 11) Section Patterns --------------------------------------------------- */ .hero{ text-align:center; position:relative; z-index:1; } .hero-title{ font-family:"Orbitron",sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); } .hero-sub{ color:var(--muted); max-width:800px; margin-inline:auto; } .section-title{ font-family:"Orbitron",system-ui,sans-serif; color:var(--primary); position:relative; display:inline-block; margin-bottom:15px; font-weight:800; } .section-title::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-8px; width:80px; height:4px; background:var(--secondary); border-radius:2px; } /* 12) Tables & Data viz -------------------------------------------------- */ .chart-tooltip{ background:rgba(10,10,10,.95) !important; border:1px solid var(--secondary) !important; color:#fff !important; font-family:ui-monospace,Menlo,Consolas,"Roboto Mono",monospace !important; font-size:11px !important; padding:8px !important; border-radius:4px !important; } /* 13) Scrollbars --------------------------------------------------------- */ .scrollbar-hide::-webkit-scrollbar{ display:none; } .scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .scroll-thin{ scrollbar-width:thin; } .scroll-thin::-webkit-scrollbar{ width:6px; height:6px; } .scroll-thin::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:4px; } .scroll-thin::-webkit-scrollbar-thumb{ background:rgba(0,210,255,.5); border-radius:4px; } .scroll-thin::-webkit-scrollbar-thumb:hover{ background:rgba(0,210,255,1); } /* 14) Badges / Chips / Pills -------------------------------------------- */ .badge{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; } .badge-primary{ background:color-mix(in oklab,var(--primary) 20%, transparent); color:var(--primary); } .badge-success{ background:color-mix(in oklab,var(--ok) 20%, transparent); color:var(--ok); } .badge-warning{ background:color-mix(in oklab,var(--warn) 20%, transparent); color:var(--warn); } .badge-danger{ background:color-mix(in oklab,var(--err) 20%, transparent); color:var(--err); } /* 15) Breadcrumbs / Pagination ------------------------------------------ */ .breadcrumb{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; color:var(--muted); } .breadcrumb a:hover{ color:var(--primary); text-decoration:underline; } .pagination{ display:flex; align-items:center; gap:.25rem; } .page-btn{ min-width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--surface-2); background:var(--surface-1); color:var(--text); } .page-btn[aria-current="page"], .page-btn:hover{ border-color:var(--primary); color:var(--primary); } /* 16) Skeleton / Loader -------------------------------------------------- */ .skeleton{ background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius:8px; min-height: 1rem; } .spinner{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:var(--primary); animation: spin .9s linear infinite; display:inline-block; } .dots::after{ content:""; display:inline-block; width:1.5em; text-align:left; animation: dots 1.2s steps(4,end) infinite; } @keyframes dots{ 0%,20%{content:""} 40%{content:"."} 60%{content:".."} 80%,100%{content:"..."} } /* ========================================================================== ALL-STYLES-MIX-ADDONS.CSS (add on top of all-styles.css v2) New: header hide-on-scroll, gold scrollbar, drawer, fullscreen overlay, slideshow/carousel, VSCode-dark panels, mode-toggle pills, prayer chat bubbles, mobile bottom-actions. ========================================================================== */ /* 1) Header Hide-on-Scroll (DEMO Studio) --------------------------------- */ .header, .navbar { transition: transform .3s ease, background .25s ease, box-shadow .25s ease; } .header.hidden, .navbar.hidden { transform: translateY(-100%); } /* 2) Gold Scrollbar Variant (DEMO Studio + DVAG) -------------------------- */ .scrollbar-gold { scrollbar-width: thin; scrollbar-color: #C5B358 rgba(0,0,0,.35); } .scrollbar-gold::-webkit-scrollbar { width: 10px; height: 10px; } .scrollbar-gold::-webkit-scrollbar-track { background: color-mix(in oklab, var(--bg) 80%, black 20%); border-radius: 5px; } .scrollbar-gold::-webkit-scrollbar-thumb { background: #C5B358; border-radius: 5px; border: 2px solid color-mix(in oklab, var(--bg) 80%, black 20%); } .scrollbar-gold::-webkit-scrollbar-thumb:hover { background: #b8a350; } /* 3) Right Drawer / Offcanvas (DEMO Studio) ------------------------------- */ .drawer { position: fixed; top: 0; right: -360px; width: min(360px, 90vw); height: 100vh; background: var(--bg-soft); border-left: 2px solid color-mix(in oklab, var(--secondary) 40%, #000); padding: 20px; box-shadow: -4px 0 24px rgba(0,0,0,.5); z-index: var(--z-fixed); transition: right .28s ease; overflow-y: auto; } .drawer.open { right: 0; } .drawer h2 { color: var(--secondary); font-family: "Orbitron", sans-serif; letter-spacing: .8px; } /* 4) Fullscreen Overlay (video / iframe) ---------------------------------- */ .fullscreen-overlay { position: fixed; inset: 0; background: #000; z-index: calc(var(--z-modal) + 2); display: none; } .fullscreen-overlay.open { display: block; } .fullscreen-overlay > iframe, .fullscreen-overlay > video { width: 100%; height: 100%; border: 0; } .fullscreen-controls { position: absolute; top: 16px; right: 16px; display: flex; gap: 10px; z-index: calc(var(--z-modal) + 3); } .full-btn { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #C5B358, #b8a350); color: #0a0a0a; border: 0; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 4px 20px rgba(197,179,88,.4); transition: transform .2s ease, box-shadow .2s ease; } .full-btn:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(197,179,88,.6); } /* 5) Slideshow / Simple Carousel (DEMO Studio + DVAG Landing) ------------- */ .slideshow { position: relative; width: 100%; height: clamp(320px, 60vw, 700px); background: var(--bg-soft); border: 3px solid #C5B358; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(197,179,88,.2); } .slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; } .slide.active { opacity: 1; pointer-events: auto; } .carousel { position: relative; overflow: hidden; } .carousel .track { display: flex; transition: transform .6s ease-in-out; } .carousel .slide { min-width: 100%; flex-shrink: 0; } .carousel-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; } .dot { width: 8px; height: 8px; border-radius: 999px; background: #ffffff55; } .dot.active { background: #C5B358; } /* 6) VSCode-Dark Panels (RAG CRUD) --------------------------------------- */ .ide-shell { background: #1e1e1e; color: #d4d4d4; border: 1px solid #3e3e42; border-radius: 10px; overflow: hidden; } .ide-header { background: #252526; border-bottom: 1px solid #3e3e42; padding: .6rem .8rem; display: flex; align-items: center; justify-content: space-between; } .file-explorer { background: #252526; border-right: 1px solid #3e3e42; width: 100%; transform: translateX(-100%); transition: transform .28s ease; position: fixed; top: var(--header-height, 60px); left: 0; height: calc(100vh - var(--header-height, 60px)); z-index: 50; overflow-y: auto; } .file-explorer.active { transform: translateX(0); } .file-item { padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 4px; min-height: 48px; cursor: pointer; transition: background .15s ease; } .file-item:hover { background: #2a2d2e; } .file-item.selected { background: #094771; } .model-btn { background: #3c3c3c; color: #ccc; padding: 8px 12px; border-radius: 4px; border: 0; } .model-btn.active { background: #007acc; color: #fff; } /* 7) Mode Toggle Pills (Prayer Machine) ----------------------------------- */ .mode-selector { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg, 16px); padding: 1.25rem; text-align: center; } .toggle-container { display: inline-flex; background: rgba(0,0,0,.25); border-radius: 50px; padding: 4px; } .toggle-option { padding: .75rem 2rem; border-radius: 50px; cursor: pointer; font-weight: 800; font-size: .9rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; transition: .2s ease; min-width: 150px; text-align: center; } .toggle-option.active { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: white; box-shadow: 0 4px 12px color-mix(in oklab, var(--primary) 35%, black); } /* 8) Prayer Chat Bubbles & Indicators ------------------------------------ */ .prayer-chat { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg, 16px); padding: 1.25rem; } .prayer-message { display: flex; gap: 1rem; animation: fadeIn .4s ease; } .prayer-message.bot { justify-content: flex-start; } .prayer-message.user { justify-content: flex-end; } .message-bubble { max-width: 75%; padding: 1rem 1.25rem; border-radius: var(--radius-lg, 16px); line-height: 1.75; box-shadow: 0 4px 12px rgba(0,0,0,.2); } .prayer-message.bot .message-bubble { background: color-mix(in oklab, var(--accent) 20%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 55%, #000); border-top-left-radius: 0; } .prayer-message.user .message-bubble { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: #fff; border-top-right-radius: 0; } .kniebeuge-indicator { background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%); color: #fff; padding: .5rem 1rem; border-radius: 50px; font-size: .9rem; font-weight: 800; display: inline-flex; align-items: center; gap: .5rem; animation: pulse 2s ease-in-out infinite; } /* 9) Progress (Prayer Machine style) ------------------------------------- */ .progress-outer { width: 100%; height: 8px; background: rgba(0,0,0,.3); border-radius: 10px; overflow: hidden; } .progress-fill { width: 0%; height: 100%; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: 10px; transition: width .3s ease; box-shadow: 0 0 10px color-mix(in oklab, var(--primary) 60%, transparent); } /* 10) Bottom Actions (mobile) -------------------------------------------- */ .bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; gap: .5rem; padding: .5rem; background: color-mix(in oklab, var(--bg) 70%, black 30%); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); z-index: var(--z-fixed); } .bottom-actions .btn { min-height: 44px; justify-content: center; } @media (min-width: 768px){ .bottom-actions { display: none; } } /* 11) Inputs & URL-group (DEMO Studio) ----------------------------------- */ .input-pill { display: flex; gap: .5rem; background: rgba(0,0,0,.35); border: 1px solid var(--glass-border); padding: .5rem; border-radius: 10px; } .input-pill > input { flex: 1; background: transparent; border: 0; color: var(--text); padding: .6rem .75rem; min-height: 44px; } .input-pill > input::placeholder { color: color-mix(in oklab, var(--text) 40%, transparent); } /* 12) Utility Tokens for this mix ---------------------------------------- */ .shadow-gold { box-shadow: 0 10px 40px rgba(197,179,88,.2); } .border-gold { border-color: #C5B358 !important; } .text-gold { color: #C5B358 !important; } .bg-gold { background: #C5B358 !important; color: #0a0a0a !important; } /* 13) Small Fixes & Compat ----------------------------------------------- */ @supports not (color: color(display-p3 1 1 1)){ /* fallback if color-mix not supported */ .drawer { border-left-color: rgba(255,255,255,.12); } } /* ========================================================================== ALL-STYLES-MIX-ADDONS-2.CSS Adds: Light Orbitron UI (toolbar/editor/modal), Gold search dropdown, Map control/floating buttons, Romance burger menu, Cowboys Chat bits, Neon Mistral tabs/input, Bootstrap tab polish, Pokémon grid/particles/cards/types. ========================================================================== */ /* 1) Orbitron Light Toolbar & Editor (Le Bureau) ------------------------- */ .orbitron-light { --ol-bg: #f0f2f5; --ol-text:#202330; --ol-head:#0a1045; } .orbitron-light { background: var(--ol-bg); color: var(--ol-text); font-family: "Orbitron", sans-serif; } .toolbar { background: linear-gradient(to right, #fff, #f5f7fa); border-bottom: 2px solid #d0d4e0; display:flex; flex-wrap:wrap; align-items:center; padding: 12px; gap: 10px; box-shadow:0 2px 8px rgba(0,30,100,.08); } .toolbar button, .toolbar select, .toolbar input[type="color"], .prompt-section button { padding: 7px 12px; border-radius: 6px; border:1px solid #c0c8d8; background: linear-gradient(to bottom,#fff,#f0f4fa); color:#202540; font-size:.85rem; letter-spacing:.4px; transition: .2s ease; box-shadow:0 2px 4px rgba(0,20,80,.06); } .toolbar button:hover, .prompt-section button:hover { background: linear-gradient(to bottom,#f0f4fa,#e0e8f5); border-color:#a0b0d0; transform: translateY(-1px); } .editor { background:#fff; color:#202330; min-height: 420px; border:1px solid #d0d8e8; padding: 16px; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,30,100,.04); font-size:.95rem; line-height:1.7; overflow:auto; } .editor::-webkit-scrollbar{ width:10px; } .editor::-webkit-scrollbar-track{ background:#f0f4fa; border-radius:5px; } .editor::-webkit-scrollbar-thumb{ background:#c0c8d8; border-radius:5px; } .help-modal{ position:fixed; inset:0; background:rgba(10,20,50,.7); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; z-index:999; } .help-modal.open{ display:flex; } .help-modal-content{ background:#fff; color:#202330; width:min(90vw,800px); max-height:80vh; overflow:auto; border-radius:12px; padding:24px; box-shadow:0 8px 30px rgba(0,20,80,.15); border:1px solid rgba(0,50,150,.1); } /* 2) GoldShield Search Bar + Results (dark) ------------------------------ */ .search-bar{ display:flex; width:100%; max-width: 720px; position:relative; } .search-bar input{ flex:1; padding:.9rem 1rem; border:2px solid var(--gold-primary,#D4AF37); border-radius: 6px 0 0 6px; background: #1E1E1E; color: #fff; font-size:1rem; } .search-bar button{ background: var(--gold-primary,#D4AF37); color:#212121; border:none; padding:0 1.2rem; border-radius:0 6px 6px 0; font-weight:800; } .search-results{ position:absolute; top:100%; left:0; right:0; background:#1E1E1E; border:1px solid var(--gold-primary,#D4AF37); border-top:none; border-radius:0 0 6px 6px; max-height:320px; overflow-y:auto; display:none; z-index: 30; } .search-results.active{ display:block; } .search-item{ padding:.8rem 1rem; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center; cursor:pointer; } .search-item:hover{ background:#2a2a2a; } .search-item-star{ color: var(--gold-primary,#D4AF37); margin-right:.6rem; } /* 3) Burger Menu (romance) ---------------------------------------------- */ .burger-menu { position: sticky; top:0; background: var(--bg-soft, #1e1e1e); z-index: 1000; box-shadow:0 2px 10px rgba(0,0,0,.3); } .burger-menu .menu-toggle{ display:none; cursor:pointer; padding:1em; font-size:1.1em; color: var(--primary,#00ffcc); background:none; border:none; font-family:"Orbitron",sans-serif; } .burger-menu nav{ display:flex; justify-content:center; flex-wrap:wrap; padding:.5em 0; } .burger-menu nav a{ margin:.5em 1em; color: var(--text, #f0f0f0); text-transform:uppercase; font-weight:600; letter-spacing:1px; position:relative; } .burger-menu nav a:hover{ color: var(--primary, #00ffcc); } .burger-menu nav a::after{ content:""; position:absolute; bottom:-5px; left:0; width:0; height:2px; background: var(--primary, #00ffcc); transition: width .28s ease; } .burger-menu nav a:hover::after{ width:100%; } @media (max-width: 768px){ .burger-menu nav{ display:none; flex-direction:column; padding:1em 0;} .burger-menu .menu-toggle{ display:block; width:100%; text-align:center; } .burger-menu.active nav{ display:flex; } } /* 4) Map Controls & Floating Buttons (Navigator) ------------------------ */ .burger-btn{ position:absolute; top:15px; left:15px; z-index: 100; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,.85); border:1px solid var(--primary,#3a86ff); box-shadow: 0 0 15px rgba(58,134,255,.3); } .control-panel{ position:absolute; top:0; left:0; bottom:0; width:320px; max-width:90vw; padding:12px; overflow-y:auto; background: rgba(255,255,255,.9); border-right:1px solid var(--primary,#3a86ff); transition:.3s ease; z-index: 90; } .control-panel.hidden{ transform: translateX(-110%); } .floating-buttons{ position:absolute; bottom:15px; right:15px; display:flex; flex-direction:column; gap:10px; z-index: 90; } .floating-btn{ width:35px; height:35px; border-radius:50%; background: rgba(255,255,255,.85); border:1px solid var(--primary,#3a86ff); display:flex; align-items:center; justify-content:center; box-shadow:0 0 15px rgba(58,134,255,.3); transition:.18s ease; } .floating-btn:hover{ transform: scale(1.08); } /* church badges */ .badge-cathedral{ background: rgba(245,158,11,.2); color:#f59e0b; } .badge-basilica{ background: rgba(59,130,246,.2); color:#3b82f6; } .badge-church{ background: rgba(139,92,246,.2); color:#8b5cf6; } .badge-abbey{ background: rgba(16,185,129,.2); color:#10b981; } .badge-monastery{background: rgba(239,68,68,.2); color:#ef4444; } .badge-chapel{ background: rgba(236,72,153,.2); color:#ec4899; } /* 5) Cowboys Chat chips (GPTurbo) --------------------------------------- */ .message.user{ background: linear-gradient(135deg,#1e90ff,#0078FF); color:#fff; } .message.assistant{ background: rgba(30,144,255,.1); border:1px solid rgba(30,144,255,.3); color:#e0e0e0; } .system-message{ background: rgba(2,34,68,.8); color:#fff; border:1px solid #1e90ff; } /* 6) Neon Mistral Tabs & Input (v8) ------------------------------------- */ .chat-tabs{ display:flex; gap:6px; flex-wrap:wrap; } .chat-tabs button{ background:#222; color:#fff; border:1px solid #0ff; padding:10px 15px; border-radius:6px; transition:.2s ease; } .chat-tabs button:hover{ background:#0ff; color:#000; transform: translateY(-2px); } .chat-tabs button.active{ background:#00f7ff; color:#000; box-shadow:0 0 10px rgba(0,247,255,.5); } .input-bar{ display:flex; margin-top:10px; } .input-bar textarea{ flex:1; padding:12px; border:1px solid #0ff; background:#000; color:#fff; border-radius:8px 0 0 8px; resize:none; height:60px; font-size:1rem; } .input-bar button{ background: linear-gradient(135deg,#00f7ff,#0088ff); border:none; padding:0 22px; border-radius:0 8px 8px 0; font-weight:800; color:#000; transition:.2s ease; } .input-bar button:hover{ background: linear-gradient(135deg,#00d8ff,#0077ff); transform: scale(1.05); } /* 7) Bootstrap Tabs Polish (v10) ---------------------------------------- */ .nav-tabs{ border-bottom:2px solid #dee2e6; } .nav-tabs .nav-link{ color:#495057; border:none; background: transparent; } .nav-tabs .nav-link.active{ color:#007bff; border-bottom:2px solid #007bff; } .nav-tabs .nav-link:hover{ color:#0056b3; } /* 8) Status messages / gallery ----------------------------------------- */ .status-message{ padding:10px; border-radius:6px; margin:10px 0; display:none; } .status-message.success{ background:#d4edda; color:#155724; } .status-message.error{ background:#f8d7da; color:#721c24; } .status-message.warning{ background:#fff3cd; color:#856404; } .image-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } .image-item{ border:1px solid #ddd; border-radius:5px; overflow:hidden; transition: transform .3s; } .image-item:hover{ transform: scale(1.03); } .image-item img{ width:100%; height:150px; object-fit:cover; } /* 9) Pokémon: grid, particles, cards, types ----------------------------- */ .poke-grid{ position:fixed; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px,transparent 1px); background-size:20px 20px; opacity:.5; } #particles{ position:fixed; inset:0; pointer-events:none; z-index:0; } .particle{ position:absolute; border-radius:50%; background: radial-gradient(circle, rgba(255,223,0,.8) 0%, transparent 70%); animation: particle-float 15s linear infinite; } @keyframes particle-float{ 0%{ transform: translateY(100vh) rotate(0deg); opacity: 0; } 10%{ opacity:.7 } 90%{ opacity:.7 } 100%{ transform: translateY(-100px) rotate(360deg); opacity:0; } } .card-game{ width:220px; background: linear-gradient(135deg, rgba(255,0,0,.1), rgba(0,128,255,.1)); border-radius:12px; padding:4px; cursor:pointer; transition:.3s; position:relative; } .card-game.disabled{ opacity:.6; cursor:not-allowed; } .card-game.selected{ transform: scale(1.05); box-shadow:0 0 30px rgba(255,223,0,.8); } .card-inner{ border-radius:8px; overflow:hidden; background: rgba(20,20,35,.9); } .card-legendary{ border: 2px solid rgba(255,215,0,.6); box-shadow:0 0 20px rgba(255,215,0,.3); } .card-rare{ border: 2px solid rgba(139,92,246,.6); box-shadow:0 0 15px rgba(139,92,246,.3); } .card-uncommon{ border: 2px solid rgba(0,212,255,.6); box-shadow:0 0 10px rgba(0,212,255,.3); } .card-common{ border: 2px solid rgba(255,255,255,.3); } .card-type{ padding:.2rem .5rem; border-radius:4px; font-size:.7rem; text-transform:capitalize; } .type-normal{ background:#A8A878; color:#fff; } .type-fire{ background:#F08030; color:#fff; } .type-water{ background:#6890F0; color:#fff; } .type-grass{ background:#78C850; color:#fff; } .type-electric{ background:#F8D030; color:#000; } .type-psychic{ background:#F85888; color:#fff; } .type-dragon{ background:#7038F8; color:#fff; } .type-dark{ background:#705848; color:#fff; } /* ========================================================================== ALL-STYLES-MIX-ADDONS-3.CSS Adds: Story/Sidebar/Progress/Timeline, EuroPilger map UI, Desktop OS (taskbar/windows), TranslateX chips/options/upload/editor, GoldShield old-money blue/gold hero/cards/badges. ========================================================================== */ /* 1) Story / Docs Layout (1264 APPS) ------------------------------------ */ .story-topbar { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.95); color: #111827; box-shadow: 0 2px 10px rgba(0,0,0,.05); backdrop-filter: blur(6px); font-family: Inter, system-ui, sans-serif; } .story-brand { font-weight: 900; background: linear-gradient(135deg, var(--primary, #2563eb), var(--accent, #f59e0b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Sidebar left (desktop fixed, mobile offcanvas) */ .story-sidebar { position: fixed; top: 64px; left: 0; width: 280px; height: calc(100vh - 64px); background: #fff; border-right: 1px solid #e5e7eb; padding: 1.25rem; overflow-y: auto; z-index: 55; transform: translateX(0); transition: transform .28s ease; } @media (max-width: 992px){ .story-sidebar { transform: translateX(-100%); } .story-sidebar.show { transform: translateX(0); } } .story-main { margin-left: 0; padding: 2rem 1rem; transition: margin-left .28s ease; } @media (min-width: 992px){ .story-main { margin-left: 280px; padding: 3rem 4rem; } } /* Reading progress (fixed under topbar) */ .story-progress { position: fixed; top: 64px; left: 0; right: 0; height: 4px; z-index: 70; background: transparent; } .story-progress .bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary,#2563eb), var(--accent,#f59e0b)); } /* Chapter / meta */ .story-chapter { margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: 1px solid #e5e7eb; scroll-margin-top: 90px; } .story-meta { text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; font: 600 12px/1 Inter, sans-serif; } /* Phasen-Timeline bar */ .story-timeline { background: #f9fafb; border-radius: 12px; padding: 1.25rem; margin: 2rem 0; border: 1px solid #e5e7eb; } .story-timeline .bar { height: 12px; border-radius: 6px; margin-bottom: .75rem; background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 11%, #ec4899 22%, #f59e0b 33%, #10b981 44%, #06b6d4 55%, #6366f1 66%, #a855f7 77%, #f43f5e 100%); } /* Back to top */ .story-up { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--primary,#2563eb); box-shadow: 0 10px 25px rgba(37,99,235,.25); opacity: 0; visibility: hidden; transition: .25s ease; } .story-up.show { opacity: 1; visibility: visible; } .story-up:hover { transform: translateY(-3px); background: #1d4ed8; } /* 2) EuroPilger Map UI --------------------------------------------------- */ .ep-app { display: flex; height: 100vh; width: 100vw; overflow: hidden; font-family: Inter, system-ui, sans-serif; } .ep-sidebar { width: 380px; background: #fff; display: flex; flex-direction: column; box-shadow: 2px 0 8px rgba(0,0,0,.1); z-index: 40; transition: transform .3s ease; } @media (max-width: 768px){ .ep-sidebar { position: fixed; top:0; left:0; height: 100vh; transform: translateX(-100%); z-index: 70; } .ep-sidebar.open { transform: translateX(0); } } .ep-sidebar-header { background: linear-gradient(135deg, #2563eb, #1e40af); color:#fff; padding: 24px; position: relative; } .ep-search { position: relative; margin-top: 12px; } .ep-search input { width: 100%; padding: 12px 12px 12px 40px; border-radius: 8px; border: none; background: rgba(255,255,255,.2); color: #fff; } .ep-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #fff; } .ep-section { padding: 18px 22px; border-bottom: 1px solid #e5e7eb; } .ep-mode { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 10px; } .ep-mode-btn { padding: 12px 0; background: #f3f4f6; color: #4b5563; border: none; border-radius: 8px; display: grid; place-items: center; gap: 6px; transition: .2s ease; cursor: pointer; } .ep-mode-btn:hover{ transform: translateY(-2px); box-shadow:0 4px 6px rgba(0,0,0,.1); } .ep-mode-btn.active{ background:#2563eb; color:#fff; box-shadow:0 4px 6px rgba(37,99,235,.2); } .ep-map { flex: 1; position: relative; } #ep-map { position: absolute; inset: 0; } .ep-map-controls { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 50; } .ep-map-btn { width: 44px; height: 44px; background: #fff; border: none; border-radius: 10px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition:.2s ease; cursor: pointer; } .ep-map-btn:hover{ transform: translateY(-2px); background:#f3f4f6; } .ep-toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; } .ep-toast { background: #1f2937; color:#fff; padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transform: translateY(20px); transition: .3s ease; } .ep-toast.show{ opacity: 1; transform: translateY(0); } .ep-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); z-index: 100; } .ep-modal.active{ display: flex; } .ep-modal .content{ background: #fff; width: min(90vw, 600px); max-height: 80vh; overflow: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.3); position: relative; padding: 24px; } .ep-modal .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: none; background:#f3f4f6; color:#374151; } body.ep-dark { background: #111827; color: #f9fafb; } body.ep-dark .ep-sidebar, body.ep-dark .ep-modal .content{ background:#1f2937; color:#f9fafb; } body.ep-dark .ep-map-btn{ background:#1f2937; color:#f9fafb; } /* 3) Desktop OS Shell (Neural Hub) -------------------------------------- */ .os-desktop { height: 100vh; overflow: hidden; background: #fafafa; } .os-taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; z-index: 80; background: rgba(0,0,0,.7); display: flex; align-items: center; padding: 0 10px; gap: 10px; } .os-start { background:none; border:none; color:#fff; font-size:1.1rem; height:100%; display:flex; align-items:center; } .os-tabs { display:flex; gap: 6px; overflow-x:auto; flex:1; } .os-tab { background: rgba(255,255,255,.15); color:#fff; border:none; padding:4px 10px; border-radius:6px; display:flex; align-items:center; gap:6px; } .os-tab.active { background:#2196F3; font-weight:700; } .os-start-menu{ position: fixed; left: 10px; bottom: 46px; background:#fff; border-radius:6px; box-shadow: 0 6px 24px rgba(0,0,0,.2); display:none; overflow:hidden; z-index: 85; } .os-start-menu.active{ display:block; } .os-menu-item{ padding:10px 12px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:10px; cursor:pointer; } .os-menu-item:hover{ background:#eee; } .os-window{ position: absolute; background:#fff; border-radius:8px; box-shadow: 0 10px 30px rgba(0,0,0,.3); min-width: 360px; min-height: 280px; overflow:hidden; z-index: 90; } .os-window-header{ background: linear-gradient(90deg, #2196F3, #1976D2); color:#fff; padding: 10px 15px; display:flex; align-items:center; justify-content:space-between; user-select:none; cursor:move; } .os-window-title{ font-weight:600; display:flex; align-items:center; gap:8px; } .os-window-body{ background:#fff; color:#333; } /* Desktop icons grid */ .os-section-title{ font-family: Orbitron, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; background: rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.1); border-radius:8px; padding: 8px 15px; text-align:center; } .os-icons { display:grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 15px; } .os-icon{ width:80px; height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:10px; text-decoration:none; color:#333; box-shadow:0 4px 6px rgba(0,0,0,.1); transition:.2s; position:relative; overflow:hidden; } .os-icon:hover{ transform: translateY(-5px); } /* 4) TranslateX — chips, options, editor, upload, status ----------------- */ .tx-card { box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); border-radius: 8px; background:#fff; } .tx-card:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(50,50,93,.10), 0 3px 6px rgba(0,0,0,.08); } .tx-chip { display:inline-block; border-radius: 16px; padding: .2rem .8rem; margin:.25rem .5rem .25rem 0; background:#f1f3f5; color:#333; font-weight:600; font-size:.8rem; } .tx-chip-primary{ background: rgba(67,97,238,.1); color:#4361ee; } .tx-chip-secondary{ background: rgba(122,9,183,.1); color:#7209b7; } .tx-option { cursor:pointer; border: 2px solid transparent; transition: .2s ease; } .tx-option:hover { border-color: rgba(67,97,238,.3); } .tx-option.selected { border-color: #4361ee; background: rgba(67,97,238,.06); } .tx-editor { width:100%; min-height: 240px; border:1px solid #ddd; border-radius: 8px; padding: 1rem; font-family: Inter, sans-serif; } .tx-editor:focus { outline:none; border-color:#4361ee; box-shadow: 0 0 0 3px rgba(67,97,238,.12); } .tx-upload { position: relative; display:inline-block; width:100%; } .tx-upload input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; } .tx-upload-btn{ width:100%; padding:1rem; background: rgba(67,97,238,.08); color:#4361ee; border:2px dashed #4361ee; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:.5rem; } .tx-status { display:none; background: rgba(67,97,238,.1); color:#4361ee; padding:.6rem 1rem; border-radius:8px; font-weight:600; text-align:center; } /* 5) GoldShield – old-money blue/gold set -------------------------------- */ .gs-hero { padding-top: 120px; padding-bottom: 4rem; background: linear-gradient(135deg, #0f172a, #1e3a8a); color:#fff; position:relative; overflow:hidden; } .gs-hero h1 { font-family: Orbitron, sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing:.08em; text-shadow: 0 2px 4px rgba(0,0,0,.3); } .gs-hero p { color: #f5e6d3; font-weight: 600; } .gs-btn-primary { font-family: Orbitron, sans-serif; text-transform: uppercase; letter-spacing:.05em; font-weight:800; background: linear-gradient(135deg, #d4af37, #f0c14b); color:#0f172a; border:2px solid #d4af37; padding:.7rem 1.25rem; border-radius:6px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } .gs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.15); background: linear-gradient(135deg,#f0c14b,#d4af37); } .gs-card { background:#fff; border:2px solid #d4af37; border-radius: 10px; padding: 1.25rem; box-shadow: 0 4px 10px rgba(0,0,0,.08); transition:.25s ease; height:100%; display:flex; flex-direction:column; } .gs-card:hover { transform: translateY(-5px); box-shadow: 0 10px 18px rgba(0,0,0,.12); } .gs-badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; background:#d4af37; color:#0f172a; font-family: Orbitron, sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } /* Section title underline */ .gs-section-title { position:relative; text-align:center; } .gs-section-title::after{ content:""; position:absolute; left:50%; transform: translateX(-50%); bottom:-10px; width:60px; height:3px; background:#d4af37; } /* 6) Small helpers ------------------------------------------------------- */ .show@sm { display:none; } .hide@sm { display:initial; } @media (max-width: 768px){ .show@sm { display:initial; } .hide@sm { display:none; } } /* ========================================================================== ALL-STYLES-FREESTYLE.CSS Ultra components & utilities — consistent with your neon/eco/gold/noir stack. Drop this AFTER all-styles.css + addons. ========================================================================== */ /* 0) Tokens+Additions ---------------------------------------------------- */ :root{ --radius-xl: 18px; --surface-3: rgba(255,255,255,.12); --glass-strong: rgba(255,255,255,.10); --shadow-float: 0 10px 40px rgba(0,0,0,.25); --shadow-holo: 0 10px 30px rgba(0,255,223,.18), 0 2px 10px rgba(0,136,255,.14); --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); } /* Gradient library (plug anywhere) */ .grad-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } .grad-amber { background: linear-gradient(135deg, #FFB800, #ffdd73); } .grad-eco { background: linear-gradient(135deg, #0a7c3e, #00bfa5); } .grad-noir { background: linear-gradient(135deg, #0f0, #0fa); } .grad-gold { background: linear-gradient(135deg, #d4af37, #f0c14b); } /* Soft & holo shadows */ .shadow-float { box-shadow: var(--shadow-float); } .shadow-holo { box-shadow: var(--shadow-holo); } /* 1) Parallax Hero + overlay grid --------------------------------------- */ .parallax-hero{ position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab,var(--primary) 16%, transparent), transparent 60%), radial-gradient(1200px 800px at 120% 30%, color-mix(in oklab,var(--accent) 16%, transparent), transparent 60%), var(--bg-soft); } .parallax-layer{ position:absolute; inset:-10%; opacity:.25; transform: translateZ(0); } .parallax-grid{ position:absolute; inset:0; pointer-events:none; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 40px 40px; } .parallax-hero > .container{ position:relative; z-index:1; } /* 2) Fancy 3D tilt cards ------------------------------------------------- */ .tilt-card{ perspective: 900px; } .tilt-card > .tilt-inner{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; transform-style: preserve-3d; will-change: transform; border-radius: var(--radius-xl); background: var(--bg-soft); border: 1px solid var(--surface-3); } .tilt-card:hover > .tilt-inner{ transform: rotateX(6deg) rotateY(-6deg) translateY(-4px); box-shadow: var(--shadow-holo); } /* 3) Sliding tabs underline --------------------------------------------- */ .tabs-slider{ --h: 44px; display:flex; position:relative; gap:.25rem; border-bottom:1px solid var(--surface-3); } .tabs-slider .tab{ height:var(--h); display:grid; place-items:center; padding:0 14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-family: "Orbitron", sans-serif; color: color-mix(in oklab, var(--text) 80%, #999); } .tabs-slider .tab[aria-selected="true"]{ color: var(--primary); } .tabs-indicator{ position:absolute; bottom:-2px; height:3px; background: linear-gradient(90deg,var(--primary),var(--accent)); border-radius: 2px; width: 100px; transform: translateX(0); transition: transform .28s cubic-bezier(.2,.8,.2,1), width .2s; } /* 4) Stepper (horizontal) ----------------------------------------------- */ .stepper{ display:grid; grid-auto-flow:column; gap:18px; align-items:center; width:100%; } .step{ display:flex; align-items:center; gap:12px; } .step .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--primary); font-weight:900; border:1px solid color-mix(in oklab,var(--primary) 50%, transparent); } .step.completed .dot{ background: var(--primary); color:#000; } .step .label{ font-weight:700; color: color-mix(in oklab,var(--text) 85%, #777); } .step-line{ height:3px; border-radius:2px; background: var(--surface-3); } .step.completed + .step-line{ background: linear-gradient(90deg,var(--primary),var(--accent)); } /* 5) Progress ring (pure CSS) ------------------------------------------- */ .progress-ring{ --size: 80px; --val: 0; /* 0..100 */ width: var(--size); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--val) * 1%), rgba(255,255,255,.08) 0), radial-gradient(closest-side, var(--bg) calc(50% - 6px), transparent calc(50% - 5px) 99%, var(--bg) 0); display:grid; place-items:center; font-weight:900; } .progress-ring.small{ --size: 48px; } /* 6) Command Palette / Spotlight ---------------------------------------- */ .cmdk{ position: fixed; inset: 0; display:none; align-items:flex-start; justify-content:center; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); z-index: 999; } .cmdk.open{ display:flex; } .cmdk-dialog{ margin-top: 10vh; width: min(92vw, 720px); border-radius: 14px; background: var(--glass-strong); border:1px solid var(--glass-border); box-shadow: var(--shadow-float); } .cmdk-header{ display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--surface-3); } .cmdk-header input{ flex:1; background: transparent; color: var(--text); border:0; outline: none; padding:12px; } .cmdk-list{ max-height: 50vh; overflow:auto; } .cmdk-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); } .cmdk-item:hover{ background: rgba(255,255,255,.06); } /* 7) Notification Center ------------------------------------------------- */ .notis{ position: fixed; top: 16px; right: 16px; width: min(420px, 92vw); display:grid; gap:10px; z-index: 400; } .noti{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; background: var(--glass-bg); border:1px solid var(--glass-border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-float); } .noti .icon{ font-size: 1.2rem; } .noti.success{ border-left:4px solid #10b981; } .noti.warn{ border-left:4px solid #f59e0b; } .noti.error{ border-left:4px solid #ef4444; } .noti.info{ border-left:4px solid #0ea5e9; } /* 8) Dock (bottom) & FABs ------------------------------------------------ */ .dock{ position: fixed; left:50%; transform: translateX(-50%); bottom: 16px; z-index: 200; display:flex; gap:10px; padding:8px; border-radius: 16px; background: color-mix(in oklab, var(--bg) 70%, black 30%); backdrop-filter: blur(10px); border:1px solid var(--surface-3); } .dock .dock-btn{ width:48px; height:48px; display:grid; place-items:center; border-radius: 12px; background: var(--glass-bg); border:1px solid var(--glass-border); color: var(--text); transition:.18s ease; } .dock .dock-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-holo); } .fab{ position: fixed; right: 18px; bottom: 18px; width:56px; height:56px; border-radius:50%; border:0; color:#000; background: linear-gradient(135deg,var(--primary),var(--accent)); box-shadow: var(--shadow-holo); z-index: 250; } .fab:hover{ transform: translateY(-2px); } /* 9) Kanban lanes -------------------------------------------------------- */ .kanban{ display:grid; grid-auto-flow:column; gap: 14px; align-items:flex-start; overflow:auto; padding-bottom: 10px; } .lane{ min-width: 280px; background: var(--bg-soft); border:1px solid var(--surface-3); border-radius: 12px; } .lane-header{ display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; font-weight:800; text-transform:uppercase; font-family:"Orbitron",sans-serif; border-bottom:1px solid var(--surface-3); } .card-task{ margin: 10px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition: .18s ease; } .card-task:hover{ transform: translateY(-2px); box-shadow: var(--shadow-float); } /* 10) Mini Calendar ------------------------------------------------------ */ .calendar-mini{ width: 100%; background: var(--bg-soft); border:1px solid var(--surface-3); border-radius: 12px; overflow:hidden; } .calendar-mini header{ display:flex; align-items:center; justify-content:space-between; padding: 8px 12px; font-weight:800; font-family:"Orbitron",sans-serif; border-bottom:1px solid var(--surface-3); } .calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 10px; } .calendar-day{ aspect-ratio: 1; display:grid; place-items:center; border-radius: 8px; color: color-mix(in oklab,var(--text) 80%, #8a8a8a); } .calendar-day.today{ background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary); font-weight: 900; } .calendar-day.event{ background: color-mix(in oklab, var(--accent) 16%, transparent); border:1px solid color-mix(in oklab, var(--accent) 45%, transparent); } /* 11) Heatmap (weekly) --------------------------------------------------- */ .heatmap{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .heat-cell{ aspect-ratio:1.4/1; border-radius: 4px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); } .heat-cell[data-level="1"]{ background: color-mix(in oklab,var(--primary) 20%, transparent); } .heat-cell[data-level="2"]{ background: color-mix(in oklab,var(--primary) 35%, transparent); } .heat-cell[data-level="3"]{ background: color-mix(in oklab,var(--primary) 50%, transparent); } .heat-cell[data-level="4"]{ background: color-mix(in oklab,var(--primary) 70%, transparent); } /* 12) Advanced table polish --------------------------------------------- */ .table.table-compact th,.table.table-compact td{ padding: .55rem .7rem; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table .pos { color:#10b981; } .table .neg { color:#ef4444; } .table .spark{ --w: 90px; --h: 24px; display:inline-block; width:var(--w); height:var(--h); background: linear-gradient(to right, rgba(255,255,255,.12), rgba(255,255,255,0)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding-top: 10px; border-top: 2px solid var(--primary); border-radius: 2px; } /* 13) Tag input / Chips input ------------------------------------------- */ .tag-input{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px; border-radius:12px; background: var(--glass-bg); border:1px solid var(--glass-border); } .tag-input input{ flex:1; min-width: 140px; background: transparent; border:0; outline:none; color: var(--text); } .tag{ display:inline-flex; align-items:center; gap:6px; padding:.3rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary); } .tag .x{ cursor:pointer; opacity:.7; } .tag .x:hover{ opacity:1; } /* 14) Tooltip w/ arrow (upgrade) ---------------------------------------- */ .tooltip2{ position:relative; } .tooltip2 .tip{ position:absolute; inset:auto auto calc(100% + 10px) 50%; transform: translateX(-50%); background: var(--bg-soft); color: var(--text); border:1px solid var(--surface-3); padding:.5rem .7rem; border-radius:8px; white-space:nowrap; box-shadow: var(--shadow-float); opacity:0; visibility:hidden; transition:.18s; } .tooltip2 .tip::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg); width: 12px; height:12px; background: inherit; border-left:inherit; border-bottom:inherit; } .tooltip2:hover .tip{ opacity:1; visibility:visible; } /* 15) Code block header + copy btn -------------------------------------- */ .code-block{ position:relative; background: #0b0f17; color:#e5e9f0; border-radius:12px; border:1px solid rgba(255,255,255,.08); overflow:hidden; } .code-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background: linear-gradient(90deg,#0b1222,#0f1930); border-bottom:1px solid rgba(255,255,255,.08); font: 700 .85rem "Orbitron", sans-serif; letter-spacing: .06em; } .copy-btn{ background: #121826; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.35rem .6rem; } .copy-btn:hover{ background:#182038; } /* 16) Map marker badge (badges++ for maps) ------------------------------- */ .marker-badge{ display:inline-flex; align-items:center; gap:6px; padding:.2rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); border:1px solid color-mix(in oklab, var(--accent) 45%, transparent); color: var(--accent); font-weight: 800; font-size: .75rem; } /* 17) Chat composer w/ attachments -------------------------------------- */ .composer{ display:flex; align-items:center; gap:8px; border:1px solid var(--surface-3); background: var(--bg-soft); border-radius: 12px; padding: 6px 6px 6px 10px; } .composer textarea{ flex:1; border:0; outline:0; background: transparent; color: var(--text); resize: vertical; min-height: 42px; max-height: 180px; } .composer .attach{ width:36px; height:36px; border-radius:10px; border:1px solid var(--glass-border); background: var(--glass-bg); display:grid; place-items:center; color: var(--text); } .composer .send{ padding:.7rem 1rem; border-radius: 10px; border:0; color:#000; background: linear-gradient(135deg,var(--primary),var(--accent)); font-weight:900; } /* 18) Accordion w/ smooth height ---------------------------------------- */ .acco{ border:1px solid var(--surface-3); border-radius: 12px; overflow:hidden; } .acco-item + .acco-item{ border-top:1px solid var(--surface-3); } .acco-sum{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px; cursor:pointer; font-weight: 800; } .acco-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; overflow:hidden; background: rgba(255,255,255,.03); } .acco-item.open .acco-panel{ grid-template-rows:1fr; } .acco-inner{ min-height: 0; padding: 10px 14px; } /* 19) Micro utilities ---------------------------------------------------- */ .p-0{ padding:0 !important; } .p-2{ padding:.5rem !important; } .p-4{ padding:1rem !important; } .m-0{ margin:0 !important; } .mt-2{ margin-top:.5rem !important; } .mb-4{ margin-bottom:1rem !important; } .round{ border-radius: 999px !important; } .center{ display:grid; place-items:center; } .max-w-sm{ max-width: 480px; } .max-w-md{ max-width: 720px; } .max-w-lg{ max-width: 980px; } .z-top{ z-index: 999 !important; } .ring { box-shadow: var(--ring); } /* 20) Motion reduce guard ------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .tilt-card > .tilt-inner, .tabs-indicator, .card-task, .dock .dock-btn, .fab, .ep-map .ep-map-btn { transition-duration: .001ms !important; } } /* ========================================================================== MOBILE-FIRST POWER PACK — MEDIA QUERIES ONLY Drop AFTER your main CSS. Targets: 1200 / 992 / 768 / 600 / 480 / 400 Includes: layout collapse, nav/sidebars, buttons, forms, tables, cards, chat, map controls, modals, tooltips, grids, carousels, dock/FAB, etc. ========================================================================== */ /* ---------- XXL to XL tightening (<=1200px) ----------------------------- */ @media (max-width: 1200px) { .container { padding-inline: 1rem; } .grid-md-2 { grid-template-columns: repeat(2, 1fr); } .section { padding-block: clamp(32px, 6vw, 64px); } .hero-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); } .card, .glass-card { border-radius: 12px; } .tabs-slider .tab { padding: 0 12px; } .dock { bottom: 10px; } } /* ---------- Desktop-to-Tablet bridge (<=992px) -------------------------- */ @media (max-width: 992px) { /* Sidebars → offcanvas */ .story-sidebar { transform: translateX(-100%); } .story-sidebar.show { transform: translateX(0); } .story-main { margin-left: 0; padding: 2rem 1rem; } .grid-md-2 { grid-template-columns: 1fr; } .kanban { grid-auto-flow: row; } .lane { min-width: 100%; } .navbar-inner { gap: .5rem; } .tabs-slider .tab { font-size: .85rem; } .calendar-grid { gap: 4px; } .tilt-card > .tilt-inner { transform: none !important; } } /* ---------- Tablet & big phones (<=768px) ------------------------------- */ @media (max-width: 768px) { /* Layout collapse */ .grid, .grid-auto, .grid-responsive-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; } .section { padding-block: 32px; } .mobile-tight { padding-inline: .75rem; } .hide-md { display: none !important; } .show@sm { display: initial !important; } .hide@sm { display: none !important; } /* Header/Nav */ .sticky-header, .navbar { padding-block: .4rem; } .navbar .btn, .navbar .btn-ghost { min-height: 36px; padding: .5rem .75rem; } .header.hidden, .navbar.hidden { transform: translateY(-100%); } /* Hero / text */ .hero-title { font-size: clamp(1.8rem, 5.5vw, 2.2rem); line-height: 1.15; } .hero-sub { max-width: 90%; } /* Buttons & forms */ .btn, .btn-primary, .btn-outline, .btn-gold { width: 100%; justify-content: center; min-height: 44px; } .input, .select, .textarea { min-height: 44px; font-size: 1rem; } .input-pill { flex-wrap: wrap; } .input-pill > input { min-width: 180px; } /* Tables */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table.table-compact th, .table.table-compact td { padding: .6rem .7rem; font-size: .95rem; } /* Cards / lists */ .card, .glass-card, .app-card { padding: 1rem; } .card-task { margin: .6rem; } /* Chat */ .message { max-width: 92%; font-size: .95rem; } .composer { gap: 6px; } .composer .attach { width: 40px; height: 40px; } /* Map controls */ .floating-buttons { bottom: 12px; right: 12px; gap: 8px; } .floating-btn { width: 40px; height: 40px; } .burger-btn { top: 10px; left: 10px; width: 36px; height: 36px; } .control-panel { width: min(90vw, 320px); } /* Modals / overlays */ .modal-dialog, .ep-modal .content { width: 94vw; max-height: 86vh; padding: 16px; border-radius: 12px; } /* Tooltips */ .tooltip .tooltip-text, .tooltip2 .tip { transform: none !important; left: 50% !important; translate: -50% 0 !important; max-width: 80vw; } /* Carousels / slideshows */ .slideshow { height: clamp(220px, 52vw, 420px); border-width: 2px; } .carousel .slide { min-width: 100%; } .carousel-dots { bottom: 6px; } /* Dock & FAB */ .dock { padding: 6px; gap: 8px; } .dock .dock-btn { width: 44px; height: 44px; } .fab { right: 14px; bottom: 14px; width: 54px; height: 54px; } /* Stepper */ .stepper { grid-auto-flow: row; gap: 10px; } .step-line { width: 100%; height: 3px; } /* Command palette */ .cmdk-dialog { width: 94vw; margin-top: 8vh; } } /* ---------- Compact phones (<=600px) ------------------------------------ */ @media (max-width: 600px) { .container { padding-inline: .75rem; } .h1 { font-size: clamp(1.6rem, 7vw, 2rem); } .h2 { font-size: clamp(1.3rem, 5.8vw, 1.6rem); } .tabs-slider { overflow-x: auto; scrollbar-width: none; } .tabs-slider::-webkit-scrollbar { display: none; } .tabs-slider .tab { flex: 0 0 auto; padding: 0 10px; height: 40px; } .tabs-indicator { height: 2px; } .story-progress { top: 56px; } .story-up { width: 44px; height: 44px; } .notis { width: min(94vw, 420px); right: 10px; left: 10px; } .toast-container { inset: auto .75rem .75rem auto; } .badge, .tx-chip { font-size: .72rem; } .calendar-day { border-radius: 6px; } .progress-ring { --size: 64px; } } /* ---------- Narrow phones (<=480px) ------------------------------------- */ @media (max-width: 480px) { .hero-title { font-size: clamp(1.5rem, 7vw, 1.8rem); } .section-title { margin-bottom: 10px; } .grid-pattern, .cyber-grid { background-size: 34px 34px; } .story-topbar { font-size: .95rem; } .burger-menu .menu-toggle { padding: .75rem; } .chat-tabs { gap: 4px; } .chat-tabs button { padding: 8px 10px; border-radius: 6px; } .input-bar textarea { height: 56px; font-size: .95rem; } .image-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } .card-game { width: 48vw; } .composer .send { padding: .65rem .9rem; } .dock .dock-btn { width: 42px; height: 42px; } .badge-cathedral, .badge-basilica, .badge-church, .badge-abbey, .badge-monastery, .badge-chapel { font-size: .7rem; } } /* ---------- Ultra-narrow (<=400px) -------------------------------------- */ @media (max-width: 400px) { .xs-hide { display: none !important; } .btn, .btn-primary, .btn-outline { padding: .65rem .8rem; border-radius: 9px; } .editor { padding: 12px; } .prayer-message .message-bubble { max-width: 88%; padding: .8rem 1rem; } .toggle-option { padding: .6rem 1.2rem; min-width: 120px; } .ep-map-btn { width: 40px; height: 40px; } .fab { width: 52px; height: 52px; bottom: 12px; right: 12px; } .dock { gap: 6px; } } /* ---------- Portrait tall screens -------------------------------------- */ @media (max-height: 700px) and (orientation: landscape) { .slideshow { height: 60vh; } .modal-dialog, .ep-modal .content { max-height: 90vh; } .dock { bottom: 6px; } } /* ---------- Coarse pointers / no hover --------------------------------- */ @media (hover: none) and (pointer: coarse) { a, button, .btn, .dock .dock-btn, .floating-btn, .ep-map-btn { -webkit-tap-highlight-color: transparent; } .btn:hover, .dock .dock-btn:hover, .floating-btn:hover, .ep-map-btn:hover { transform: none !important; } .tilt-card > .tilt-inner { transition: none !important; } .tooltip .tooltip-text, .tooltip2 .tip { display: none; } } /* ---------- Reduced motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .header.hidden, .navbar.hidden { transform: none !important; } } /* ---------- Color scheme sync for [data-theme="auto"] ------------------- */ @media (prefers-color-scheme: light) { [data-theme="auto"] .card, [data-theme="auto"] .glass-card { border-color: rgba(0,0,0,.06); } [data-theme="auto"] .btn-outline { color: #1f2937; border-color: #1f2937; } } /* ---------- Safe areas (iOS notch) ------------------------------------- */ @media (max-width: 768px) { body { padding-bottom: max(0px, env(safe-area-inset-bottom)); } .sticky-header, .navbar { padding-top: max(0px, env(safe-area-inset-top)); } .bottom-actions { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); } } /* ---------- Scroll snap helpers (mobile) -------------------------------- */ @media (max-width: 768px) { .snap-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overflow-x: auto; display: grid; grid-auto-flow: column; gap: .75rem; } .snap-item { scroll-snap-align: start; } } /* ---------- Compact toolbars & command-palette -------------------------- */ @media (max-width: 768px) { .toolbar { gap: 8px; padding: 10px; } .toolbar button, .toolbar select { padding: 6px 10px; } .cmdk-header { padding: 8px; } .cmdk-item { padding: 8px 12px; } } /* ---------- Map/sidebar special compact -------------------------------- */ @media (max-width: 768px) { .ep-mode { grid-template-columns: repeat(3,1fr); gap: 8px; } .ep-mode-btn { padding: 10px 0; font-size: .9rem; } .ep-section { padding: 14px 16px; } } /* ---------- Story/docs readability tweaks ------------------------------- */ @media (max-width: 768px) { .story-chapter { margin-bottom: 2.5rem; padding-bottom: 1.2rem; } .story-meta { font-size: .72rem; } .story-timeline .bar { height: 10px; } } /* ========================================================================== BURGER / SIDEBAR / NAVBAR — MEDIA QUERIES ONLY Drop AFTER main CSS. Uses classes you likely already have: .navbar, .navbar-inner, .burger-menu, .menu-toggle, .nav, .nav-item, .nav-link, .sidebar, .sidebar.open, .offcanvas-backdrop(.show), .control-panel, .drawer, .bottom-actions, .search-bar, .search-results, .dropdown, .dropdown-menu, .mega, .mega-grid, .profile-menu, .tabs, .tab, .header (hide-on-scroll) ========================================================================== */ /* ---------- Wide tighten (<=1200px) ------------------------------------ */ @media (max-width: 1200px) { .navbar-inner { gap: .75rem; padding: .6rem 1rem; } .nav-link { padding: .5rem .75rem; } .mega-grid { grid-template-columns: repeat(4, minmax(160px,1fr)); gap: 1rem; } .sidebar { width: min(320px, 26vw); } } /* ---------- Desktop → Tablet bridge (<=992px) -------------------------- */ @media (max-width: 992px) { /* Navbar compaction */ .navbar { position: sticky; top: 0; } .navbar .search-bar { max-width: 420px; } .navbar .search-results { max-height: 300px; } /* Mega menu → regular stacked dropdowns */ .mega { position: static; } .mega-grid { grid-template-columns: repeat(2, 1fr); } /* Sidebar becomes collapsible (icon rail) */ .sidebar { width: 64px; padding: .5rem; overflow: hidden; } .sidebar .label, .sidebar .section-title { display: none; } .sidebar:hover { width: 240px; transition: width .25s ease; } .sidebar.open { width: min(80vw, 320px); } /* in case JS adds .open on md */ } /* ---------- Tablet & big phones (<=768px) ------------------------------- */ @media (max-width: 768px) { /* Burger menu pattern */ .burger-menu { position: sticky; top: 0; z-index: 1000; } .burger-menu .menu-toggle { display: block; width: 100%; padding: .8rem 1rem; } .burger-menu nav { display: none; flex-direction: column; padding: .5rem 1rem; gap: .35rem; } .burger-menu.active nav { display: flex; } .burger-menu nav .nav-link { padding: .65rem .5rem; border-radius: 8px; } .burger-menu nav .nav-link:hover { background: rgba(255,255,255,.06); } /* Navbar density & scroll shadow */ .navbar-inner { padding: .5rem .75rem; } .navbar.scrolled { box-shadow: 0 6px 16px rgba(0,0,0,.18); } /* Dropdowns convert to accordion style */ .dropdown:hover .dropdown-menu { display: none; } /* disable hover open */ .dropdown.open .dropdown-menu { display: block; position: static; box-shadow: none; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; margin-top: .25rem; } /* Mega menu stacks fully */ .mega-grid { grid-template-columns: 1fr; } /* Sidebar → offcanvas */ .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 360px); height: 100vh; transform: translateX(-100%); transition: transform .28s ease; z-index: 1001; border-right: 1px solid rgba(255,255,255,.12); } .sidebar.open { transform: translateX(0); } .offcanvas-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .2s; z-index: 1000; } .offcanvas-backdrop.show { opacity: 1; visibility: visible; } /* Right drawer (if used) */ .drawer { right: -100%; width: min(90vw, 360px); } .drawer.open { right: 0; } /* Map / control panels */ .control-panel { width: min(90vw, 320px); transform: translateX(-110%); } .control-panel.show { transform: translateX(0); } /* Bottom actions nav for mobile */ .bottom-actions { display: grid; grid-auto-flow: column; } /* Search in navbar goes full-width row */ .navbar .search-bar { max-width: 100%; width: 100%; order: 3; margin-top: .5rem; } /* Tabs collapse to scrollable row */ .tabs { overflow-x: auto; gap: .25rem; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; padding: .55rem .75rem; } /* Profile menu dropdown → sheet */ .profile-menu .dropdown-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 16px 16px 0 0; border: 1px solid rgba(255,255,255,.12); max-height: 60vh; overflow: auto; } } /* ---------- Compact phones (<=600px) ------------------------------------ */ @media (max-width: 600px) { /* Bigger touch targets */ .nav-link, .menu-toggle { min-height: 44px; } /* Stacked navbar blocks */ .navbar-inner { flex-wrap: wrap; row-gap: .5rem; } .navbar .brand { order: 1; } .navbar .actions { order: 2; width: 100%; display: flex; gap: .5rem; } .navbar .search-bar { order: 3; } /* Burger submenu indentation */ .burger-menu nav .dropdown-menu { margin-left: .5rem; border-left: 2px solid rgba(255,255,255,.08); padding-left: .5rem; } } /* ---------- Narrow phones (<=480px) ------------------------------------- */ @media (max-width: 480px) { /* Icon-only top bar */ .navbar .label-lg, .navbar .text-wide { display: none; } .navbar .icon-btn { width: 40px; height: 40px; border-radius: 10px; } /* Bottom bar density */ .bottom-actions { padding: .4rem; gap: .4rem; } .bottom-actions .btn { min-height: 44px; padding: .5rem; } } /* ---------- Ultra-narrow (<=400px) -------------------------------------- */ @media (max-width: 400px) { .menu-toggle { padding: .6rem .75rem; } .burger-menu nav .nav-link { padding: .55rem .6rem; } .sidebar { width: 88vw; } } /* ---------- Landscape small-height ------------------------------------- */ @media (max-height: 700px) and (orientation: landscape) { .sidebar { height: 100vh; } .profile-menu .dropdown-menu { max-height: 80vh; } .bottom-actions { bottom: 6px; } } /* ---------- Coarse pointers / no-hover --------------------------------- */ @media (hover: none) and (pointer: coarse) { .nav-link:hover, .dropdown:hover, .mega:hover { background: none; } .dropdown:hover .dropdown-menu { display: none; } /* click via JS toggles .open */ } /* ---------- Reduced motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .navbar, .burger-menu nav, .sidebar, .drawer, .control-panel, .offcanvas-backdrop { transition-duration: .001ms !important; } .header.hidden, .navbar.hidden { transform: none !important; } } /* ---------- Safe areas (iOS notch) ------------------------------------- */ @media (max-width: 768px) { .navbar, .burger-menu { padding-top: max(0px, env(safe-area-inset-top)); } .bottom-actions { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); } .sidebar { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } } /* ---------- Scroll shadow helper for sticky bars ----------------------- */ @media (max-width: 992px) { .navbar.scroll-shadow::after, .burger-menu.scroll-shadow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0)); } } /* ========================================================================== ALL-STYLES-MARKETING.CSS Image containers, hero sections, animation features, marketing & sales modules — consistent with your theme tokens. ========================================================================== */ /* 0) Base helpers -------------------------------------------------------- */ .img-rounded { border-radius: 12px; overflow: hidden; } .img-shadow { box-shadow: 0 10px 30px rgba(0,0,0,.25); } .img-border { border: 1px solid rgba(255,255,255,.12); } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-1x1 { aspect-ratio: 1 / 1; } .ratio-4x5 { aspect-ratio: 4 / 5; } /* 1) Image containers ---------------------------------------------------- */ /* Cover/Contain wrappers with graceful object-fit */ .image-cover, .image-contain { position: relative; width: 100%; display: block; overflow: hidden; background: var(--bg-soft); border-radius: 12px; border: 1px solid rgba(255,255,255,.08); } .image-cover img, .image-contain img, .image-cover video, .image-contain video { width: 100%; height: 100%; display: block; } .image-cover img, .image-cover video { object-fit: cover; } .image-contain img, .image-contain video { object-fit: contain; background: #0b0f17; } /* Framed with caption */ .image-frame { border-radius: 14px; overflow: hidden; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .image-frame .caption { padding: .75rem 1rem; color: var(--muted); font-size: .9rem; border-top: 1px solid rgba(255,255,255,.08); } /* Before/After compare (pure CSS track) */ .image-compare { position: relative; border-radius: 12px; overflow: hidden; } .image-compare > img { width: 100%; display: block; } .image-compare::after{ content: ""; position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: linear-gradient(var(--primary), var(--accent)); box-shadow: 0 0 10px rgba(0,0,0,.3); } /* Masonry gallery (CSS columns) */ .gallery-masonry { column-count: 3; column-gap: 14px; } .gallery-masonry .m-item { break-inside: avoid; margin-bottom: 14px; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.2); } /* Logo strip (auto-scrolling) */ .logos-strip { overflow: hidden; position: relative; } .logos-track { display: flex; gap: clamp(24px, 6vw, 64px); align-items: center; animation: marquee 24s linear infinite; } .logos-track img { height: 42px; opacity: .8; filter: saturate(.9) contrast(1.05); } /* 2) Hero sections ------------------------------------------------------- */ .hero-split { display: grid; gap: clamp(18px, 3vw, 36px); grid-template-columns: 1.1fr 1fr; align-items: center; padding-block: clamp(48px, 8vw, 120px); } .hero-split .eyebrow { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary); } .hero-split .title { font-family: "Orbitron", sans-serif; font-weight: 900; letter-spacing: .02em; } .hero-split .kicker { color: var(--muted); max-width: 60ch; } .hero-split .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .hero-video { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 40px rgba(0,0,0,.35); } .hero-video .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.5)); } /* 3) Feature lists & highlights ----------------------------------------- */ .feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr)); } .feature { background: var(--glass-bg); border:1px solid var(--glass-border); border-radius: 14px; padding: 18px; transition: transform .2s, box-shadow .2s; } .feature:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .feature .icon { width: 42px; height: 42px; display:grid; place-items:center; border-radius: 10px; background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); box-shadow: 0 10px 20px color-mix(in oklab, var(--accent) 25%, transparent); } /* Benefit bullets */ .bullets { display: grid; gap: .65rem; } .bullets li::marker { color: var(--primary); } /* 4) Pricing tables ------------------------------------------------------ */ .pricing { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .price-card { background: var(--bg-soft); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; display:flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.25); } .price-card .head { padding: 18px; border-bottom:1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 12%, transparent), transparent); } .price-card .title { font-family: "Orbitron", sans-serif; font-weight: 900; letter-spacing:.04em; } .price { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 900; } .price small { color: var(--muted); font-weight: 600; } .price-card .features { padding: 18px; display: grid; gap: .5rem; } .price-card .cta { padding: 18px; margin-top: auto; } /* Ribbon / Most Popular */ .ribbon { position: absolute; top: 12px; right: -36px; rotate: 45deg; padding: 6px 48px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #000; font-weight: 900; letter-spacing: .06em; } /* 5) CTAs & conversion bits --------------------------------------------- */ .cta-bar { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 38%, transparent); padding: 14px 16px; border-radius: 12px; } .cta-bar .trust { display: inline-flex; gap: 10px; align-items:center; color: var(--muted); } .guarantee-badge { display: inline-flex; gap: 8px; align-items:center; border-radius: 999px; padding: .25rem .6rem; font-weight: 900; letter-spacing:.04em; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12); } /* Checkmarks */ .check { display:inline-flex; align-items:center; gap:.5rem; } .check .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent); } /* 6) Testimonials & social proof ---------------------------------------- */ .testimonials { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr)); } .testi { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px; } .testi .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid color-mix(in oklab, var(--accent) 35%, transparent); } .stars { color: #FFB800; letter-spacing: 2px; } .quote { font-style: italic; color: color-mix(in oklab, var(--text) 90%, #9aa); } /* Logos confidence bar (alt strip) */ .confidence { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 20px); align-items: center; opacity: .9; } /* 7) Stats & counters ---------------------------------------------------- */ .stats { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); } .stat { background: var(--bg-soft); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; } .stat .val { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 900; } .stat .label { color: var(--muted); font-weight: 700; letter-spacing:.04em; } /* 8) Sales sections: comparison & FAQ ----------------------------------- */ .compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; } .compare th, .compare td { padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); } .compare th { text-align: left; background: rgba(255,255,255,.04); font-weight: 900; } .compare .good { color:#10b981; } .compare .bad { color:#ef4444; } .faq { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; } .faq-item + .faq-item { border-top: 1px solid rgba(255,255,255,.08); } .faq-q { padding: 14px; display:flex; justify-content:space-between; align-items:center; cursor: pointer; font-weight: 900; } .faq-a { padding: 0 14px 14px; display:none; color: var(--muted); } .faq-item.open .faq-a { display:block; } /* 9) Animations & effects ------------------------------------------------ */ /* Gradient sweep for headlines */ @keyframes sweep { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } } .animate-sweep { background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sweep 2.8s ease-in-out infinite alternate; } /* Reveal on scroll (add .reveal.in when visible via JS/Observer) */ .reveal { opacity: 0; transform: translateY(12px); transition: .5s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } /* Magnetic button (slight scale) */ .btn-magnetic { transition: transform .12s ease, box-shadow .12s ease; } .btn-magnetic:active { transform: scale(.98); box-shadow: none; } /* Underline grow link */ .link-underline { position: relative; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--primary); transition: width .2s ease; } .link-underline:hover::after { width: 100%; } /* Marquee logos (already defined track) */ @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* Confetti burst (call once for hero CTA area) */ .confetti { position: absolute; inset: 0; pointer-events:none; overflow: hidden; } .confetti i { position: absolute; width: 8px; height: 12px; background: linear-gradient(135deg, var(--primary), var(--accent)); top: -10px; left: 50%; transform: translateX(-50%) rotate(15deg); animation: confettiDrop 2.6s ease-in forwards; opacity: .85; border-radius: 2px; } @keyframes confettiDrop { 0% { transform: translate(-50%, -10px) rotate(0deg) } 100% { transform: translate(calc(-50% + var(--dx, 100px)), 110vh) rotate(360deg) } } /* 10) Responsiveness ----------------------------------------------------- */ @media (max-width: 1024px) { .hero-split { grid-template-columns: 1fr; text-align: center; } .hero-split .kicker { margin-inline: auto; } .feature-grid, .pricing, .testimonials, .stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .gallery-masonry { column-count: 2; column-gap: 12px; } .logos-track img { height: 36px; } .cta-bar { grid-template-columns: 1fr; gap: 10px; text-align: center; } .feature-grid, .pricing, .testimonials, .stats { grid-template-columns: 1fr; } } @media (max-width: 480px) { .gallery-masonry { column-count: 1; } .image-frame .caption { font-size: .85rem; } .price { font-size: 1.5rem; } } /* 11) Motion reduce ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .logos-track { animation: none !important; } } /* ========================================================================== THEMES-ORBITRON-NEURAL-ALT.CSS Alternative palettes for Orbitron/Neural looks. Usage: (or neural-aurora, etc.) ========================================================================== */ /* Shared helpers (optional) */ :root{ --radius: 12px; --shadow-holo: 0 10px 30px rgba(0,255,223,.18), 0 2px 10px rgba(0,136,255,.14); } /* ---------------------------------- */ /* ORBITRON FAMILY (futuristic UI) */ /* ---------------------------------- */ /* Orbitron Cyan/Violet (classic neon sci-fi) */ [data-theme="orbitron-cyan"]{ --bg:#0b0f17; --bg-soft:#121a26; --text:#e7f7ff; --muted:#9bb6c9; --primary:#00f7ff; --secondary:#7a5cff; --accent:#2bd9ff; --grid-line: rgba(0,247,255,.06); } [data-theme="orbitron-cyan"] .grad-primary{ background: linear-gradient(135deg,#00f7ff,#7a5cff); } [data-theme="orbitron-cyan"] .glow-text{ text-shadow:0 0 14px rgba(0,247,255,.75); } /* Orbitron Magenta/Indigo (high-contrast) */ [data-theme="orbitron-magenta"]{ --bg:#0d0f1a; --bg-soft:#151a2a; --text:#f2eaff; --muted:#b9aee0; --primary:#ff2ea6; --secondary:#6f7cff; --accent:#00d2ff; --grid-line: rgba(255,46,166,.06); } [data-theme="orbitron-magenta"] .grad-primary{ background: linear-gradient(135deg,#ff2ea6,#6f7cff); } [data-theme="orbitron-magenta"] .glow-text{ text-shadow:0 0 14px rgba(255,46,166,.7); } /* Orbitron Solar (amber/cobalt) */ [data-theme="orbitron-solar"]{ --bg:#0a0c12; --bg-soft:#121521; --text:#e9f0ff; --muted:#a7b5d4; --primary:#FFB800; --secondary:#2a6fff; --accent:#00a3ff; --grid-line: rgba(255,184,0,.06); } [data-theme="orbitron-solar"] .grad-primary{ background: linear-gradient(135deg,#FFB800,#2a6fff); } [data-theme="orbitron-solar"] .glow-text{ text-shadow:0 0 14px rgba(255,184,0,.7); } /* Orbitron Lime/Teal (electric tech) */ [data-theme="orbitron-lime"]{ --bg:#0a0f0f; --bg-soft:#111a1b; --text:#e9fffb; --muted:#a3cfc7; --primary:#00ffbf; --secondary:#64ff00; --accent:#00e0ff; --grid-line: rgba(0,255,191,.06); } [data-theme="orbitron-lime"] .grad-primary{ background: linear-gradient(135deg,#00ffbf,#64ff00); } [data-theme="orbitron-lime"] .glow-text{ text-shadow:0 0 16px rgba(0,255,191,.75); } /* ---------------------------------- */ /* NEURAL FAMILY (soft neon / glass) */ /* ---------------------------------- */ /* Neural Ocean (teal/cyan on dark navy) */ [data-theme="neural-ocean"]{ --bg:#0a0f1b; --bg-soft:#101828; --text:#e7fbff; --muted:#9dc6d1; --primary:#00d5ff; --secondary:#00ffa6; --accent:#69b7ff; --grid-line: rgba(0,213,255,.06); } [data-theme="neural-ocean"] .grad-primary{ background: linear-gradient(135deg,#00d5ff,#00ffa6); } [data-theme="neural-ocean"] .glow-text{ text-shadow:0 0 14px rgba(0,213,255,.65); } /* Neural Aurora (cyan → violet → lime) */ [data-theme="neural-aurora"]{ --bg:#0a0a12; --bg-soft:#151626; --text:#eef7ff; --muted:#a7b1d1; --primary:#00ffe0; --secondary:#9b6bff; --accent:#83ff4c; --grid-line: rgba(155,107,255,.06); } [data-theme="neural-aurora"] .grad-primary{ background: linear-gradient(135deg,#00ffe0 0%,#9b6bff 50%,#83ff4c 100%); } [data-theme="neural-aurora"] .glow-text{ text-shadow:0 0 16px rgba(155,107,255,.6); } /* Neural Matrix (phosphor green on charcoal) */ [data-theme="neural-matrix"]{ --bg:#0b0f0b; --bg-soft:#121712; --text:#d9ffd9; --muted:#a7e8b3; --primary:#00ff66; --secondary:#00ffaa; --accent:#aaff00; --grid-line: rgba(0,255,102,.06); } [data-theme="neural-matrix"] .grad-primary{ background: linear-gradient(135deg,#00ff66,#00ffaa); } [data-theme="neural-matrix"] .glow-text{ text-shadow:0 0 14px rgba(0,255,102,.65); } /* Neural Ice (ultra-clean semi-light) */ [data-theme="neural-ice"]{ --bg:#f5fbff; --bg-soft:#ffffff; --text:#0e1726; --muted:#55657a; --primary:#00c2ff; --secondary:#5d8aff; --accent:#00e0b8; --grid-line: rgba(0,194,255,.12); } [data-theme="neural-ice"] .grad-primary{ background: linear-gradient(135deg,#00c2ff,#5d8aff); } [data-theme="neural-ice"] .glow-text{ text-shadow:0 0 10px rgba(0,194,255,.5); } /* ---------------------------------- */ /* NEON NOIR / GOLD CROSSOVERS */ /* ---------------------------------- */ /* Noir Emerald (dark CRT but luxe) */ [data-theme="noir-emerald"]{ --bg:#0b0f0d; --bg-soft:#0f1411; --text:#d8ffe9; --muted:#9ce3c3; --primary:#00ff9a; --secondary:#00e0c2; --accent:#2bff87; --grid-line: rgba(0,255,154,.06); } [data-theme="noir-emerald"] .grad-primary{ background: linear-gradient(135deg,#00ff9a,#00e0c2); } /* Gold Tech Dark (old money + neon hint) */ [data-theme="gold-tech-dark"]{ --bg:#0c0e14; --bg-soft:#141826; --text:#f6efe0; --muted:#cdbf99; --primary:#d4af37; --secondary:#1ea7ff; --accent:#00ffd1; --grid-line: rgba(212,175,55,.06); } [data-theme="gold-tech-dark"] .grad-primary{ background: linear-gradient(135deg,#d4af37,#1ea7ff); } [data-theme="gold-tech-dark"] .glow-text{ text-shadow:0 0 12px rgba(212,175,55,.6); } /* Gold Tech Light (light variant) */ [data-theme="gold-tech-light"]{ --bg:#f9fafb; --bg-soft:#ffffff; --text:#161a25; --muted:#5b657a; --primary:#d4af37; --secondary:#2563eb; --accent:#00bfa5; --grid-line: rgba(37,99,235,.08); } [data-theme="gold-tech-light"] .grad-primary{ background: linear-gradient(135deg,#d4af37,#2563eb); } /* ---------------------------------- */ /* OPTIONAL THEME UTILITIES */ /* ---------------------------------- */ /* Themed chips & badges (re-use with any theme) */ .theme-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; font-weight:800; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent); } .theme-chip.accent{ background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } /* Themed outline & fill buttons */ .btn-theme-outline{ background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-theme-outline:hover{ background: var(--primary); color:#000; } .btn-theme-fill{ background: linear-gradient(135deg,var(--primary),var(--accent)); color:#000; border:0; } /* Subtle section backgrounds */ .section-soft{ background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 8%, transparent), transparent 60%); } /* Neon glass card */ .card-neon{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow-holo); border-radius: 14px; } /* Grid overlay helper */ .theme-grid{ background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; } /* Accent link underline */ .link-accent{ position: relative; } .link-accent::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px; background: linear-gradient(90deg,var(--primary),var(--accent)); opacity:.65; } /* ========================================================================== ALL-STYLES-AUTH.CSS Login • Register • 2FA/OTP • Paywall • Checkout/Payment • Billing Uses your existing theme tokens: --bg, --bg-soft, --text, --muted, --primary, --secondary, --accent ========================================================================== */ /* 0) Shell & helpers ----------------------------------------------------- */ .auth-wrap{ min-height: 100dvh; display:grid; place-items:center; padding: clamp(20px, 4vw, 48px); background: radial-gradient(800px 400px at 12% -10%, color-mix(in oklab,var(--primary) 12%, transparent), transparent 60%), radial-gradient(1000px 520px at 110% 10%, color-mix(in oklab,var(--accent) 10%, transparent), transparent 60%), var(--bg); } .auth-card{ width: min(98vw, 960px); display:grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .auth-side{ padding: clamp(22px, 3vw, 36px); display:grid; align-content:center; gap: 18px; } .auth-hero{ position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, transparent), transparent); } .auth-hero .brand{ position: absolute; top: 18px; left: 18px; font: 900 .95rem "Orbitron",sans-serif; letter-spacing:.08em; color:#000; background: linear-gradient(135deg,var(--primary),var(--accent)); padding:.35rem .55rem; border-radius: 8px; } /* 1) Headings & micro trust --------------------------------------------- */ .auth-title{ font: 900 clamp(1.3rem,2.6vw,1.8rem) "Orbitron",sans-serif; letter-spacing:.02em; } .auth-sub{ color: var(--muted); font-weight: 600; } .secure-badge{ display:inline-flex; align-items:center; gap:8px; padding:.25rem .5rem; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-weight:800; letter-spacing:.04em; } /* 2) Forms: inputs, icons, strength, toggles ----------------------------- */ .form-grid{ display:grid; gap: 12px; } .form-row{ display:grid; gap: 8px; } .input-field{ display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 12px; padding: .65rem .8rem; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .input-field:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab,var(--primary) 28%, transparent); } .input-field input, .input-field select{ flex:1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1rem; line-height: 1.4; } .input-field .icon { color: color-mix(in oklab, var(--text) 75%, #888); } .password-toggle{ cursor:pointer; opacity:.8; } .password-toggle:hover{ opacity:1; } .help-text{ color: var(--muted); font-size: .9rem; } .error-text{ color: #ef4444; font-weight: 700; } .strength{ height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; } .strength .bar{ height: 100%; width: 0%; background: linear-gradient(90deg,#ef4444,#f59e0b,#10b981); transition: width .3s ease; box-shadow: 0 0 10px rgba(16,185,129,.2); } /* 3) Buttons (auth) ------------------------------------------------------ */ .btn-auth{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height: 44px; padding:.75rem 1rem; border:0; border-radius: 12px; font-weight: 900; letter-spacing: .04em; background: linear-gradient(135deg,var(--primary),var(--accent)); color:#000; box-shadow: 0 10px 30px color-mix(in oklab, var(--primary) 20%, transparent); } .btn-auth:disabled{ opacity:.6; cursor:not-allowed; } .btn-ghost{ background: transparent; border:1px solid rgba(255,255,255,.16); color: var(--text); border-radius: 12px; padding: .7rem 1rem; font-weight: 800; } /* 4) Social login -------------------------------------------------------- */ .social-row{ display:grid; grid-template-columns:1fr 1fr; gap: 10px; } .btn-social{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; border-radius: 12px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--text); font-weight: 800; } .btn-social .logo{ width: 18px; height: 18px; } .btn-google { border-color: #EA4335; } .btn-apple { border-color: #000; background: #fff; color: #000; } .btn-github { border-color: #6e7681; } /* 5) OTP / 2FA ----------------------------------------------------------- */ .otp-row{ display:flex; gap:10px; justify-content:center; } .otp-input{ width: 48px; height: 54px; text-align:center; font: 900 1.1rem ui-monospace,monospace; border-radius: 10px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--text); } .otp-help{ color: var(--muted); text-align:center; } /* 6) Paywall overlay & card ---------------------------------------------- */ .paywall-overlay{ position: fixed; inset: 0; z-index: 120; display: grid; place-items:center; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); } .paywall-card{ width: min(92vw, 820px); background: var(--bg-soft); border:1px solid rgba(255,255,255,.12); border-radius: 16px; overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .paywall-head{ padding: 18px; background: linear-gradient(90deg, color-mix(in oklab,var(--primary) 16%, transparent), transparent); border-bottom: 1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:12px; justify-content:space-between; } .lock-badge{ display:inline-flex; align-items:center; gap:8px; padding:.35rem .6rem; border-radius:999px; font-weight:900; background: color-mix(in oklab,var(--accent) 14%, transparent); color: var(--accent); border:1px solid color-mix(in oklab,var(--accent) 40%, transparent); } .paywall-body{ padding: clamp(16px, 3vw, 24px); display:grid; gap: 14px; } .paywall-actions{ display:flex; flex-wrap:wrap; gap: 10px; } /* 7) Checkout / Payment form -------------------------------------------- */ .checkout{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 16px; } .section-box{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px; } .section-title{ font: 800 .95rem "Orbitron",sans-serif; letter-spacing:.08em; color: var(--primary); margin-bottom: 8px; } .form-split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .country-select select{ appearance:none; background: transparent; } .card-line{ display:grid; gap: 10px; } .card-row{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; } .card-input{ display:flex; align-items:center; gap:10px; border:1px dashed color-mix(in oklab,var(--primary) 35%, transparent); background: rgba(255,255,255,.03); border-radius: 12px; padding: .65rem .8rem; } .card-input input{ border:0; outline:0; background:transparent; color: var(--text); } /* brand pay buttons */ .brand-pay{ display:flex; gap:10px; flex-wrap:wrap; } .pay-apple, .pay-google{ border-radius: 10px; height: 44px; padding: 0 14px; display:inline-flex; align-items:center; gap:8px; border: 1px solid rgba(255,255,255,.16); background: #000; color:#fff; font-weight:900; letter-spacing:.06em; } .pay-google{ background: #fff; color:#000; } .pay-apple .logo, .pay-google .logo{ width:20px; height:20px; } /* order summary / totals */ .summary{ display:grid; gap:8px; } .summary .row{ display:flex; justify-content:space-between; align-items:center; } .summary .total{ font-size: 1.1rem; font-weight: 900; } .price-tag{ font-weight:900; } .coupon{ display:flex; gap:8px; } .coupon input{ flex:1; } /* 8) States: banners, errors, success ----------------------------------- */ .banner{ border-radius: 12px; padding: .75rem 1rem; font-weight: 700; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); } .banner.success{ border-left:4px solid #10b981; } .banner.warn{ border-left:4px solid #f59e0b; } .banner.error{ border-left:4px solid #ef4444; } .inline-error{ display:flex; align-items:center; gap:8px; color:#ef4444; font-weight:800; } .success-check{ width: 56px; height: 56px; border-radius: 50%; background: #10b981; display:grid; place-items:center; color: #000; box-shadow: 0 0 0 6px rgba(16,185,129,.25); margin-inline:auto; animation: pop .35s ease-out both; } @keyframes pop{ 0%{ transform: scale(.6); opacity:.4} 100%{ transform: scale(1); opacity:1} } .spinner{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:var(--primary); animation: spin .9s linear infinite; display:inline-block; } @keyframes spin{ to{ transform: rotate(360deg) } } /* 9) Auth footer / links ------------------------------------------------- */ .auth-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 10px; color: var(--muted); } .auth-foot a{ color: var(--primary); font-weight: 800; } .link-underline{ position:relative; } .link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background: var(--primary); transition:.2s; } .link-underline:hover::after{ width: 100%; } /* 10) Account security settings ----------------------------------------- */ .security-list{ display:grid; gap:10px; } .security-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; } .security-item .state.on { color:#10b981; font-weight: 900; } .security-item .state.off{ color:#ef4444; font-weight: 900; } /* 11) Responsive --------------------------------------------------------- */ @media (max-width: 1024px){ .auth-card{ grid-template-columns: 1fr; } .auth-hero{ min-height: 220px; } } @media (max-width: 768px){ .social-row{ grid-template-columns: 1fr; } .checkout{ grid-template-columns: 1fr; } .form-split, .card-row{ grid-template-columns: 1fr; } .auth-side{ padding: 18px; } } @media (max-width: 480px){ .otp-input{ width:44px; height:50px; } .auth-title{ font-size: 1.25rem; } } /* 12) Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *{ transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* 13) Example states (optional utility classes) ------------------------- */ .is-loading .btn-auth { pointer-events:none; opacity:.75; } .is-invalid .input-field { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25); } .is-success .input-field { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25); } .has-coupon .coupon { border:1px dashed #10b981; border-radius:10px; padding:6px; } /* ======================================================================== GAP-FILLER.CSS — A11y/i18n, contrast, RTL, container queries, legal, empty states, table polish, print receipt, email-lite, density toggles. ======================================================================== */ /* 0) Global A11y bits */ .skip-link { position: fixed; left: 8px; top: 8px; z-index: 9999; background: var(--bg-soft); color: var(--text); padding:.5rem .75rem; border-radius:8px; border:1px solid rgba(255,255,255,.2); transform: translateY(-150%); transition:.15s; } .skip-link:focus { transform: translateY(0); } .kbd { font: 700 .75rem ui-monospace,monospace; padding:.15rem .35rem; border-radius:6px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); } [aria-live="polite"], [aria-live="assertive"] { outline: none; } /* 1) prefers-contrast & reduced-transparency */ @media (prefers-contrast: more) { :root { --glass-bg: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.35); } .btn, .btn-primary, .btn-outline { border-width: 2px; } .card, .glass-card { box-shadow: none; border-color: rgba(255,255,255,.28); } } @media (prefers-reduced-transparency: reduce) { .glass-card, .navbar, .sticky-header { -webkit-backdrop-filter:none; backdrop-filter:none; } } /* 2) RTL support (mirrors core layout) */ :root:dir(rtl) .sidebar { inset: 0 0 0 auto; border-right:none; border-left:1px solid rgba(255,255,255,.12); transform: translateX(100%); } :root:dir(rtl) .sidebar.open { transform: translateX(0); } :root:dir(rtl) .drawer { right:auto; left:-100%; } :root:dir(rtl) .drawer.open { left:0; } :root:dir(rtl) .section-title::after { left:50%; transform: translateX(50%); } /* 3) Density, Radius & Contrast toggles */ :root { --space-1:.5rem; --space-2:1rem; --radius-std:12px; --elev-1:0 6px 18px rgba(0,0,0,.14); } [data-density="compact"] .btn, [data-density="compact"] .input { min-height:38px; padding:.5rem .75rem; } [data-rounded="max"] .card, [data-rounded="max"] .btn { border-radius: 999px; } [data-contrast="hard"] { filter: contrast(1.05) saturate(1.02); } /* 4) Container Queries (cards become list on narrow containers) */ @container (width < 520px) { .feature-grid, .pricing, .testimonials, .stats { display:grid; grid-template-columns: 1fr; } } .wrapper-cq { container-type: inline-size; container-name: section; } /* 5) Empty states, 404/500 */ .empty-state { text-align:center; padding: clamp(32px,6vw,64px); border:1px dashed rgba(255,255,255,.18); border-radius:16px; background: rgba(255,255,255,.04); } .empty-state .icon { font-size: 2rem; margin-bottom: .5rem; opacity:.8; } .page-hero.error { background: linear-gradient(135deg, #ef4444, #b91c1c); color:#fff; padding: 48px 0; } .page-hero.error h1 { font-family:"Orbitron",sans-serif; } /* 6) Cookie/Consent bar */ .cookie-bar { position: fixed; inset:auto 12px 12px 12px; z-index: 2000; background: var(--bg-soft); border:1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px; display:grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items:center; } .cookie-bar .btn { min-height: 38px; } @media (max-width: 640px){ .cookie-bar { grid-template-columns: 1fr; } } /* 7) Tables: sticky header + stack on mobile */ .table.sticky thead th { position: sticky; top: 0; background: var(--bg-soft); z-index: 2; } .table.stack td[data-label] { display: grid; grid-template-columns: 140px 1fr; gap: 10px; } @media (max-width: 768px){ .table.stack thead { display: none; } .table.stack tr { display: grid; gap: 10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding: 10px; } .table.stack td { display: grid; grid-template-columns: 120px 1fr; } } /* 8) Chart Legend / Status badges */ .legend { display:flex; flex-wrap:wrap; gap:10px; } .legend .item { display:inline-flex; align-items:center; gap:8px; } .legend .swatch { width:12px; height:12px; border-radius:3px; } .badge-dot { display:inline-flex; align-items:center; gap:6px; padding:.2rem .5rem; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); } .badge-dot::before { content:""; width:8px; height:8px; border-radius:50%; background: currentColor; } /* 9) Print — invoice/receipt */ @media print { .invoice { color:#000; background:#fff; border: none; box-shadow:none; font: 400 11pt/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .invoice h1, .invoice h2 { font-weight: 800; } .invoice .meta, .invoice .totals { border:1pt solid #333; border-radius:0; } .no-print { display:none !important; } } /* 10) Email-lite block (safe for simple clients) */ .email-lite { background:#ffffff; color:#111827; border:1px solid #e5e7eb; border-radius:8px; padding:16px; font: 400 14px/1.6 -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .email-lite .btn { background:#111827; color:#fff; border-radius:6px; padding:.6rem .9rem; display:inline-block; text-decoration:none; } /* 11) Copy feedback / micro-interactions */ .copy-feedback { display:none; font-weight:800; color: var(--primary); } .is-copied .copy-feedback { display:inline; } /* 12) Utility: sticky subnav shadow */ .subnav.sticky { position: sticky; top: 0; z-index: 40; background: var(--bg-soft); } .subnav.sticky::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:12px; background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0)); pointer-events:none; } { "name": "OpenAI Command Center • Proxy Pack", "version": "1.0.0", "proxy": { "base_url": "https://secure-all.replit.app", "alt_base_urls": ["https://theserver-open-ai.replit.app"], "auth": { "public_api": "none", "vault_api": { "header": "X-Vault-Key", "query": "key" } }, "errors": { "format": "object", "key": "error" }, "rate_limits": { "public_api": { "limit": 50, "window": "15m" }, "vault_api": { "limit": 200, "window": "15m" } }, "notes": [ "Use https://secure-all.replit.app for production.", "All /api/* endpoints require no auth; /vault/* require X-Vault-Key.", "TTS returns an audio stream/blob, not JSON.", "Vision supports image_url and base64.", "Server errors are returned as { \"error\": \"...\" }." ] }, "ui_flows": { "chat": { "fn": "sendChatMessage", "endpoint_ref": "chat", "stream": { "enabled": true, "protocol": "SSE-like lines starting with 'data: ' and ending with '[DONE]'", "delta_path": "choices[0].delta.content", "non_stream_path": "choices[0].message.content" } }, "images": { "fn": "generateImage", "endpoint_ref": "image_generate", "result_path": "data[0].url" }, "tts": { "fn": "generateSpeech", "endpoint_ref": "speech", "response_type": "audio/blob" }, "transcriptions": { "fn": "transcribeAudio", "endpoint_ref": "transcriptions", "upload": { "type": "multipart/form-data", "fields": ["file", "model"] }, "result_path": "text" }, "embeddings": { "fn": "generateEmbeddings", "endpoint_ref": "embeddings" }, "moderations": { "fn": "moderateContent", "endpoint_ref": "moderations", "result_path": "results[0]" }, "models": { "fn": "listModels", "endpoint_ref": "models" } }, "model_autodetect_rules": [ { "prefix": "gpt-", "provider": "openai" }, { "prefix": "mistral-", "provider": "mistral" }, { "prefix": "gemini-", "provider": "google" } ], "endpoints": [ { "id": "chat", "name": "Chat Completions", "method": "POST", "path": "/api/chat", "headers": { "Content-Type": "application/json" }, "request_template": { "model": "gpt-4o-mini", "messages": [ { "role": "user", "content": "Hello!" } ], "temperature": 0.7, "max_tokens": 1000, "stream": false }, "response_paths": { "non_stream_text": "choices[0].message.content" } }, { "id": "vision", "name": "Vision Analysis", "method": "POST", "path": "/api/vision", "headers": { "Content-Type": "application/json" }, "request_template": { "model": "gpt-4o-mini", "messages": [ { "role": "user", "content": [ { "type": "text", "text": "Describe this image." }, { "type": "image_url", "image_url": { "url": "https://example.com/image.jpg" } } ] } ], "detail": "high", "max_tokens": 1000 } }, { "id": "speech", "name": "Text-to-Speech", "method": "POST", "path": "/api/speech", "headers": { "Content-Type": "application/json" }, "request_template": { "input": "Hallo Welt!", "model": "tts-1", "voice": "alloy", "response_format": "mp3", "speed": 1.0 }, "response_type": "audio" }, { "id": "image_generate", "name": "Image Generation", "method": "POST", "path": "/api/image", "headers": { "Content-Type": "application/json" }, "request_template": { "prompt": "A neon cyberpunk city at night", "size": "1024x1024", "quality": "standard", "style": "vivid" }, "response_paths": { "url": "data[0].url" } }, { "id": "images_generate_legacy", "name": "Image Generation (UI variant)", "method": "POST", "path": "/api/images/generate", "headers": { "Content-Type": "application/json" }, "request_template": { "model": "dall-e-3", "prompt": "Futuristic robot in a cyber city", "size": "1024x1024", "quality": "standard" }, "response_paths": { "url": "data[0].url" } }, { "id": "transcriptions", "name": "Audio Transcriptions", "method": "POST", "path": "/api/audio/transcriptions", "headers": { "Content-Type": "multipart/form-data" }, "multipart_template": [ { "name": "file", "type": "file", "accept": "audio/*" }, { "name": "model", "value": "whisper-1" } ], "response_paths": { "text": "text" } }, { "id": "embeddings", "name": "Embeddings", "method": "POST", "path": "/api/embeddings", "headers": { "Content-Type": "application/json" }, "request_template": { "model": "text-embedding-3-small", "input": "The quick brown fox jumps over the lazy dog." } }, { "id": "moderations", "name": "Content Moderation", "method": "POST", "path": "/api/moderations", "headers": { "Content-Type": "application/json" }, "request_template": { "input": "..." }, "response_paths": { "flagged": "results[0].flagged", "categories_true": "results[0].categories (filter truthy)" } }, { "id": "models", "name": "List Models", "method": "GET", "path": "/api/models" }, { "id": "perplexity", "name": "Perplexity Search", "method": "POST", "path": "/api/perplexity", "headers": { "Content-Type": "application/json" }, "request_template": { "messages": [ { "role": "user", "content": "Neueste Entwicklungen bei KI?" } ], "model": "sonar", "temperature": 0.2, "max_tokens": 1000 } }, { "id": "eod", "name": "EOD Financial Data", "method": "GET", "path": "/api/eod", "query_template": { "symbol": "AAPL.US", "endpoint": "real-time", "period": null, "from": null, "to": null, "fmt": "json" } }, { "id": "gemini", "name": "Gemini Chat", "method": "POST", "path": "/api/gemini", "headers": { "Content-Type": "application/json" }, "request_template": { "messages": [ { "role": "user", "content": "Hallo Gemini!" } ], "model": "gemini-2.0-flash-exp", "temperature": 0.7, "maxTokens": 1000 } } ], "vault_endpoints": [ { "id": "vault_status", "method": "GET", "path": "/vault/status", "auth": "X-Vault-Key" }, { "id": "vault_mistral", "method": "GET", "path": "/vault/mistral", "auth": "X-Vault-Key" }, { "id": "vault_anthropic", "method": "GET", "path": "/vault/anthropic", "auth": "X-Vault-Key" }, { "id": "vault_perplexity", "method": "GET", "path": "/vault/perplexity", "auth": "X-Vault-Key" }, { "id": "vault_eod", "method": "GET", "path": "/vault/eod", "auth": "X-Vault-Key" }, { "id": "vault_stripe", "method": "GET", "path": "/vault/stripe", "auth": "X-Vault-Key" }, { "id": "vault_gemini", "method": "GET", "path": "/vault/gemini", "auth": "X-Vault-Key" }, { "id": "vault_all", "method": "GET", "path": "/vault/all", "auth": "X-Vault-Key" } ], "ui_bindings_examples": { "chat_request": { "url": "{{proxy.base_url}}/api/chat", "options": { "method": "POST", "headers": { "Content-Type": "application/json" }, "body": { "model": "{{state.chat.model}}", "messages": [ { "role": "user", "content": "{{state.chat.message}}" } ], "temperature": "{{state.chat.temperature}}", "stream": "{{state.chat.stream}}" } } }, "image_request": { "url": "{{proxy.base_url}}/api/image", "options": { "method": "POST", "headers": { "Content-Type": "application/json" }, "body": { "prompt": "{{state.image.prompt}}", "size": "{{state.image.size}}", "quality": "{{state.image.quality}}", "style": "vivid" } } }, "tts_request": { "url": "{{proxy.base_url}}/api/speech", "options": { "method": "POST", "headers": { "Content-Type": "application/json" }, "body": { "model": "{{state.tts.model}}", "voice": "{{state.tts.voice}}", "input": "{{state.tts.text}}" } }, "response_type": "audio" }, "transcription_request": { "url": "{{proxy.base_url}}/api/audio/transcriptions", "options": { "method": "POST", "headers": { "Content-Type": "multipart/form-data" }, "formdata": [ { "name": "file", "value": "{{state.transcribe.file}}" }, { "name": "model", "value": "whisper-1" } ] } }, "embeddings_request": { "url": "{{proxy.base_url}}/api/embeddings", "options": { "method": "POST", "headers": { "Content-Type": "application/json" }, "body": { "model": "{{state.embeddings.model}}", "input": "{{state.embeddings.text}}" } } }, "moderation_request": { "url": "{{proxy.base_url}}/api/moderations", "options": { "method": "POST", "headers": { "Content-Type": "application/json" }, "body": { "input": "{{state.moderations.text}}" } } }, "models_request": { "url": "{{proxy.base_url}}/api/models", "options": { "method": "GET" } } } }