/* ============================================================ ALKACALM — Design System (plain-CSS port of app/globals.css) Liquid Glass × Minimal × Obsidian. Holographic signature. No Tailwind, no build step. Utility classes live in utilities.css. ============================================================ */ /* ---------- Preflight (minimal port of Tailwind's reset) ---------- */ *, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; } body { margin: 0; line-height: inherit; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } p, blockquote, dl, dd, figure, hr { margin: 0; } ol, ul { list-style: none; margin: 0; padding: 0; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } small { font-size: 80%; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: var(--color-graphite); } summary { display: list-item; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* !important so display utilities (.flex, .grid) never override the hidden attribute */ [hidden] { display: none !important; } /* ---------- Design tokens (was the Tailwind v4 @theme block) ---------- */ :root { /* Foundation */ --color-obsidian: #000000; --color-obsidian-2: #0e0e12; --color-ink: #131318; --color-ink-2: #1a1b21; --color-white: #ffffff; /* Metallics */ --color-platinum: #dde0e4; --color-silver: #a9aeb5; --color-graphite: #5c616a; --color-graphite-2: #3a3e45; /* Accents (used sparingly) */ --color-aqua: #2bb3a3; --color-aqua-deep: #157f73; /* Semantic */ --color-background: var(--color-obsidian); --color-foreground: #c7ccd3; --color-heading: #f3f5f7; --color-border: rgba(221, 224, 228, 0.1); --color-border-strong: rgba(221, 224, 228, 0.22); /* Type — Inter, self-hosted via Google Fonts link in */ --font-inter: "Inter"; --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Radii */ --radius-xl: 1.25rem; --radius-2xl: 1.75rem; /* Easing */ --ease-lux: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-lux: cubic-bezier(0.64, 0, 0.78, 0); color-scheme: dark; } * { border-color: var(--color-border); } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Lenis handles smooth scroll */ } body { background-color: var(--color-obsidian); color: var(--color-foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: rgba(43, 179, 163, 0.28); color: #fff; } /* Focus — accessible aqua ring */ :focus-visible { outline: 2px solid var(--color-aqua); outline-offset: 2px; border-radius: 3px; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-obsidian); } ::-webkit-scrollbar-thumb { background: #26272e; border-radius: 99px; border: 2px solid var(--color-obsidian); } ::-webkit-scrollbar-thumb:hover { background: #34363f; } /* ============================================================ Typography helpers ============================================================ */ .text-balance { text-wrap: balance; } .heading { color: var(--color-heading); font-weight: 300; letter-spacing: -0.02em; line-height: 1.02; } .eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-silver); } /* ============================================================ Liquid Glass surfaces ============================================================ */ .glass { background: linear-gradient( 160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) ); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.8); } .glass-hover { transition: transform 0.5s var(--ease-lux), border-color 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux); } .glass-hover:hover { transform: translateY(-4px); border-color: rgba(43, 179, 163, 0.35); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 36px 80px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(43, 179, 163, 0.08); } .hairline { height: 1px; width: 100%; background: linear-gradient( 90deg, transparent, rgba(221, 224, 228, 0.18), transparent ); } /* ============================================================ Holographic foil signature ============================================================ */ .holo-text { background-image: linear-gradient( 100deg, #c7ccd3 0%, #2bb3a3 18%, #b388ff 34%, #ff8fcf 50%, #ffe08a 64%, #6ee7ff 80%, #c7ccd3 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-pan 8s linear infinite; } .holo-ring { border-radius: 9999px; background: conic-gradient( from 0deg, #c7ccd3, #2bb3a3, #6ee7ff, #b388ff, #ff8fcf, #ffe08a, #6ee7ff, #c7ccd3 ); animation: holo-spin 14s linear infinite; } @keyframes holo-pan { to { background-position: 200% 0; } } @keyframes holo-spin { to { transform: rotate(360deg); } } /* Shimmer divider / sweep */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 20%, rgba(255, 255, 255, 0.14) 50%, transparent 80% ); transform: translateX(-120%); animation: shimmer-sweep 6s var(--ease-lux) infinite; } @keyframes shimmer-sweep { to { transform: translateX(120%); } } /* Float */ @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floaty { animation: floaty 7s ease-in-out infinite; } /* Reveal-on-scroll base (js/main.js toggles .is-in via IntersectionObserver) */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-lux), transform 0.9s var(--ease-lux); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3rem; padding: 0 1.6rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.4s var(--ease-lux), background-color 0.4s var(--ease-lux), border-color 0.4s var(--ease-lux), color 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux); white-space: nowrap; user-select: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--color-white); color: #0a0a0c; box-shadow: 0 10px 40px -12px rgba(255, 255, 255, 0.5); } .btn-primary:hover { box-shadow: 0 14px 50px -10px rgba(43, 179, 163, 0.5), 0 0 0 1px rgba(43, 179, 163, 0.4); } .btn-ghost { background: transparent; color: var(--color-platinum); border: 1px solid rgba(221, 224, 228, 0.2); } .btn-ghost:hover { border-color: rgba(221, 224, 228, 0.55); background: rgba(255, 255, 255, 0.03); } .btn-aqua { background: linear-gradient(180deg, var(--color-aqua), var(--color-aqua-deep)); color: #fff; box-shadow: 0 12px 40px -12px rgba(43, 179, 163, 0.6); } .btn-aqua:hover { filter: brightness(1.08); box-shadow: 0 16px 50px -10px rgba(43, 179, 163, 0.75); } /* Section rhythm */ .section { position: relative; padding-block: clamp(5rem, 12vh, 10rem); } .container-lux { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } /* Noise / vignette atmosphere */ .vignette::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 120% 80% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100% ); } /* ============================================================ Lenis smooth scroll ============================================================ */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================ Mobile & tablet polish — desktop (≥1024px) layout is untouched. ============================================================ */ html { -webkit-tap-highlight-color: transparent; } button, a, [role="button"] { touch-action: manipulation; } /* Anchor links land clear of the fixed navbar (native scroll) */ section[id] { scroll-margin-top: 5rem; } /* Keep the floating WhatsApp button clear of the iOS home indicator */ .wa-fab { bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); } /* Phones only: tighter vertical rhythm so sections aren't over-spaced */ @media (max-width: 640px) { .section { padding-block: clamp(2.75rem, 8vh, 4.5rem); } } /* ============================================================ Admin — Tier-1 motion primitives ============================================================ */ .neon { transition: border-color 0.22s ease, box-shadow 0.22s ease; } .neon-good { border-color: rgba(52, 211, 153, 0.32); } .neon-good:hover { border-color: rgba(52, 211, 153, 0.95); box-shadow: 0 0 7px 0 rgba(52, 211, 153, 0.5); } .neon-warn { border-color: rgba(251, 191, 36, 0.32); } .neon-warn:hover { border-color: rgba(251, 191, 36, 0.95); box-shadow: 0 0 7px 0 rgba(251, 191, 36, 0.5); } .neon-poor { border-color: rgba(248, 113, 113, 0.32); } .neon-poor:hover { border-color: rgba(248, 113, 113, 0.95); box-shadow: 0 0 7px 0 rgba(248, 113, 113, 0.5); } .neon-idle { border-color: rgba(43, 179, 163, 0.28); } .neon-idle:hover { border-color: rgba(43, 179, 163, 0.85); box-shadow: 0 0 7px 0 rgba(43, 179, 163, 0.45); } /* Table / list rows — subtle neon inset on hover */ .neon-row { transition: background-color 0.2s ease, box-shadow 0.2s ease; } .neon-row:hover { background-color: rgba(43, 179, 163, 0.05); box-shadow: inset 0 0 0 1px rgba(43, 179, 163, 0.42); } /* Big glass panels — hover-only glow, no resting tint */ .neon-hover { transition: border-color 0.22s ease, box-shadow 0.22s ease; } .neon-hover:hover { border-color: rgba(43, 179, 163, 0.5); box-shadow: 0 0 9px -1px rgba(43, 179, 163, 0.38); } @keyframes admin-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .rise-in { opacity: 0; animation: admin-rise 0.5s var(--ease-lux) forwards; } .rise-stagger > * { opacity: 0; animation: admin-rise 0.5s var(--ease-lux) forwards; } .rise-stagger > *:nth-child(1) { animation-delay: 60ms; } .rise-stagger > *:nth-child(2) { animation-delay: 105ms; } .rise-stagger > *:nth-child(3) { animation-delay: 150ms; } .rise-stagger > *:nth-child(4) { animation-delay: 195ms; } .rise-stagger > *:nth-child(5) { animation-delay: 240ms; } .rise-stagger > *:nth-child(6) { animation-delay: 285ms; } .rise-stagger > *:nth-child(7) { animation-delay: 330ms; } @media (prefers-reduced-motion: reduce) { .rise-in, .rise-stagger > * { opacity: 1 !important; animation: none !important; transform: none !important; } } /* ============================================================ Admin — Tier-3 depth & refinement ============================================================ */ .admin-glow { position: absolute; top: -34px; left: 50%; width: min(720px, 92%); height: 300px; transform: translateX(-50%); background: radial-gradient( ellipse at center, rgba(43, 179, 163, 0.085), rgba(43, 179, 163, 0) 68% ); pointer-events: none; z-index: 0; } @keyframes admin-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .page-fade { animation: admin-page-in 0.24s var(--ease-lux); } @media (prefers-reduced-motion: reduce) { .page-fade { animation: none !important; } }