/* ========================================================================== GENFO AI — CHROME Reset, base elements, and shared UI components used across every page. ========================================================================== */ /* ---- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { padding: 0; margin: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Base ------------------------------------------------------------ */ html, body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); min-height: 100%; } body { position: relative; overflow-x: hidden; } h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); font-weight: 600; } ::selection { background: var(--aurora-violet); color: #fff; } :focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--radius-sm); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--glass-border-hi); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--aurora-violet); } /* ---- Aurora background layer --------------------------------------- A fixed, full-viewport layer placed behind all content via z-index. Drop

right after on every page. ------------------------------------------------------------------------- */ .aurora-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-base); } .aurora-field::before { content: ""; position: absolute; inset: -10%; background-image: radial-gradient(circle at 12% 18%, rgba(46,230,201,0.16), transparent 42%), radial-gradient(circle at 82% 12%, rgba(140,107,255,0.18), transparent 45%), radial-gradient(circle at 70% 78%, rgba(225,84,214,0.14), transparent 48%), radial-gradient(circle at 18% 82%, rgba(79,210,255,0.12), transparent 45%); filter: blur(60px) saturate(120%); animation: aurora-drift var(--dur-aurora) ease-in-out infinite alternate; } .aurora-field::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, transparent 1px, transparent 2px); opacity: 0.6; mix-blend-mode: overlay; } .aurora-field .noise-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, transparent 0%, var(--bg-base) 78%); } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(-2%, 3%, 0) scale(1.08) rotate(4deg); } 100% { transform: translate3d(2%, -2%, 0) scale(1.02) rotate(-3deg); } } /* ---- Signal line — signature motif ---------------------------------- A thin animated pulse line. Used in section dividers throughout. ------------------------------------------------------------------------- */ .signal-line { position: relative; height: 1px; width: 100%; background: var(--border-subtle); overflow: hidden; } .signal-line::after { content: ""; position: absolute; top: 0; left: -30%; height: 100%; width: 30%; background: var(--aurora-gradient); filter: blur(0.5px); animation: signal-travel 5.5s var(--ease-in-out) infinite; } @keyframes signal-travel { 0% { left: -30%; opacity: 0; } 8% { opacity: 1; } 50% { left: 50%; opacity: 1; } 92% { opacity: 1; } 100% { left: 130%; opacity: 0; } } /* ---- Layout primitives ----------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-10); } @media (max-width: 720px) { .section { padding-block: var(--space-8); } } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: var(--space-4); top: -48px; background: var(--bg-raised); color: var(--text-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--border-default); z-index: 200; transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* ---- Glass panel ------------------------------------------------------ */ .glass-panel { background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--shadow-md); } /* ---- Top navigation ---------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(8, 10, 16, 0.6); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .nav-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-5); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--ls-tight); white-space: nowrap; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--aurora-gradient); position: relative; flex-shrink: 0; } .brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 5px; background: var(--bg-base); clip-path: polygon(0 100%, 100% 100%, 100% 35%, 55% 35%, 55% 0, 30% 0, 30% 65%, 0 65%); } .nav-links { display: flex; align-items: center; gap: var(--space-6); } .nav-links a { font-size: var(--fs-body-sm); color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); position: relative; } .nav-links a:hover { color: var(--text-primary); } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } .nav-toggle { display: none; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); width: 40px; height: 40px; align-items: center; justify-content: center; } .nav-toggle svg { width: 18px; height: 18px; } @media (max-width: 860px) { .nav-links { display: none; } .nav-toggle { display: flex; } .nav-actions .btn-secondary { display: none; } } /* Mobile nav drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 150; background: rgba(5, 6, 10, 0.88); backdrop-filter: blur(8px); display: flex; flex-direction: column; padding: var(--space-6) var(--space-5); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); } .mobile-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-drawer .drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-7); } .mobile-drawer nav { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); } .mobile-drawer nav a { font-family: var(--font-display); font-size: var(--fs-h3); } .mobile-drawer .drawer-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; } /* ---- Buttons ---------------------------------------------------------- */ .btn { --btn-h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-h); padding-inline: var(--space-5); border-radius: var(--radius-pill); font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: var(--ls-normal); border: 1px solid transparent; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); position: relative; } .btn:active { transform: translateY(1px) scale(0.99); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-sm { --btn-h: 38px; padding-inline: var(--space-4); font-size: var(--fs-caption); } .btn-lg { --btn-h: 54px; padding-inline: var(--space-6); font-size: var(--fs-body-lg); } .btn-block { width: 100%; } .btn-primary { background: var(--aurora-gradient); color: var(--text-on-accent); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-sm); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, var(--glow-violet); transform: translateY(-1px); } .btn-secondary { background: var(--glass-fill); color: var(--text-primary); border-color: var(--glass-border-hi); } .btn-secondary:hover { background: var(--glass-fill-hi); border-color: var(--aurora-cyan); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); background: var(--glass-fill); } .btn-danger { background: rgba(255,92,122,0.12); color: var(--color-error); border-color: rgba(255,92,122,0.35); } .btn-danger:hover { background: rgba(255,92,122,0.2); } .btn-social { background: var(--bg-raised-2); color: var(--text-primary); border-color: var(--border-default); width: 100%; } .btn-social:hover { background: var(--bg-raised); border-color: var(--glass-border-hi); } .btn-social svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-icon { --btn-h: 40px; width: var(--btn-h); padding: 0; border-radius: 50%; } /* ---- Spinner ----------------------------------------------------------- */ .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: currentColor; animation: spin 0.7s linear infinite; flex-shrink: 0; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .btn .spinner { display: none; } .btn.is-loading .spinner { display: inline-flex; position: absolute; } .btn.is-loading .btn-label { opacity: 0; } .btn.is-loading { pointer-events: none; } /* ---- Form elements ------------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } .field-label { font-size: var(--fs-body-sm); color: var(--text-secondary); font-weight: 500; } .field-input-wrap { position: relative; } .field-input { width: 100%; height: 50px; background: var(--bg-raised-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding-inline: var(--space-4); color: var(--text-primary); font-size: var(--fs-body); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .field-input::placeholder { color: var(--text-tertiary); } .field-input:hover { border-color: var(--glass-border-hi); } .field-input:focus { outline: none; border-color: var(--aurora-cyan); box-shadow: var(--glow-focus); background: var(--bg-raised); } .field-input.has-error { border-color: var(--color-error); } .field-input.has-error:focus { box-shadow: var(--glow-error); } .field-toggle-visibility { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-tertiary); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .field-toggle-visibility:hover { color: var(--text-primary); } .field-toggle-visibility svg { width: 18px; height: 18px; } .field-error { display: none; font-size: var(--fs-caption); color: var(--color-error); align-items: center; gap: var(--space-1); } .field-error.is-visible { display: flex; animation: shake-in var(--dur-base) var(--ease-out); } @keyframes shake-in { 0% { transform: translateX(0); opacity: 0; } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 100% { transform: translateX(0); opacity: 1; } } .field-hint { font-size: var(--fs-caption); color: var(--text-tertiary); } /* ---- Alert / banner ----------------------------------------------------- */ .alert { display: none; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body-sm); margin-bottom: var(--space-5); } .alert.is-visible { display: flex; animation: fade-slide-in var(--dur-base) var(--ease-out); } .alert-error { background: rgba(255,92,122,0.1); border: 1px solid rgba(255,92,122,0.3); color: #ffb3c0; } .alert-success { background: rgba(54,224,160,0.1); border: 1px solid rgba(54,224,160,0.3); color: #a7f3d6; } .alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } /* ---- Toast container ------------------------------------------------------ */ .toast-stack { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 500; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(360px, calc(100vw - 2 * var(--space-5))); } .toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); font-size: var(--fs-body-sm); animation: toast-in var(--dur-base) var(--ease-out); } .toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-out) forwards; } .toast-error { border-color: rgba(255,92,122,0.4); } .toast-success { border-color: rgba(54,224,160,0.4); } .toast-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .toast-error .toast-dot { background: var(--color-error); } .toast-success .toast-dot { background: var(--color-success); } .toast-info .toast-dot { background: var(--aurora-cyan); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateX(20px) scale(0.96); } } /* ---- Generic reveal animations ------------------------------------------- */ @keyframes fade-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---- Badge --------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; border: 1px solid var(--glass-border-hi); background: var(--glass-fill); color: var(--text-secondary); } .badge-accent { color: var(--aurora-teal); border-color: rgba(46,230,201,0.35); background: rgba(46,230,201,0.08); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-teal); box-shadow: 0 0 8px var(--aurora-teal); } /* ---- Avatar -------------------------------------------------------------- */ .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--aurora-gradient); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--text-on-accent); flex-shrink: 0; text-transform: uppercase; } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-8) var(--space-6); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-7); } .footer-col h4 { font-family: var(--font-body); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-tertiary); margin-bottom: var(--space-4); font-weight: 600; } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a { color: var(--text-secondary); font-size: var(--fs-body-sm); transition: color var(--dur-fast); } .footer-col a:hover { color: var(--text-primary); } .footer-brand p { color: var(--text-tertiary); font-size: var(--fs-body-sm); max-width: 280px; margin-top: var(--space-3); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--fs-caption); } .footer-socials { display: flex; gap: var(--space-3); } .footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; } .footer-socials a:hover { border-color: var(--aurora-cyan); color: var(--aurora-cyan); } .footer-socials svg { width: 16px; height: 16px; } @media (max-width: 780px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }