/* ============================================================ Sierrabot · Orbe iA — css/site.css (consolidado) §0 Fuentes · §1 Login · §2 App · §3 Error 404 Cada página usa . Cada sección conserva la cascada ORIGINAL de su página; los selectores van prefijados con :where(body.page-*) (especificidad cero: no altera empates) para no fugarse a otras páginas. NOTA: no se deduplican reglas entre secciones a propósito — moverlas rompería empates de cascada (ej. .page vs .fade-in). ============================================================ */ /* ==================== §0 FUENTES ==================== */ @font-face { font-family: 'Titillium Web'; src: url('../fonts/TitilliumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/TitilliumWeb-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Titillium Web'; src: url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'), url('../fonts/TitilliumWeb-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* ==================== §1 LOGIN (login.html) · body class: page-login ==================== */ /* Variables del :root original de login.html */ body.page-login { --primary-color: #6346c9; --secondary-color: #f8fafb; --section-background: #090727; --color-sidebar: #323232; --color-primary: gainsboro; --color-secondary: #424242; --color-accent: #6346c9; --color-font: #f2f2f2; --color-background: #090727; --orb-c1: #4285f4; --orb-c2: #9b51e0; --orb-c3: #e91e63; --orb-c4: #2196f3; --orb-c5: #00f2ff; --orb-gradient: linear-gradient( 90deg, var(--orb-c1) 0%, var(--orb-c2) 25%, var(--orb-c3) 50%, var(--orb-c4) 75%, var(--orb-c5) 100% ); } :where(body.page-login) * { margin: 0; padding: 0; box-sizing: border-box; } html:has(body.page-login) { height: 100%; min-height: 100%; background: radial-gradient(ellipse at 14% 72%, #176cdb 0, transparent 35%), radial-gradient(ellipse at 88% 74%, #c624b5 0, transparent 43%), radial-gradient(ellipse at 57% 38%, #6346c9 0, transparent 44%), linear-gradient(145deg, #050b31 0%, #171153 45%, #430e60 100%); background-attachment: fixed; } body.page-login { font-family: 'Titillium Web', sans-serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; overflow: hidden; background: transparent; color: white; transition: background 0.4s ease, color 0.4s ease; touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } .theme-dark body.page-login { color: white; background: transparent; } :where(body.page-login) h1, :where(body.page-login) h2, :where(body.page-login) h3, :where(body.page-login) h4, :where(body.page-login) h5, :where(body.page-login) h6 { line-height: 1; font-weight: 200; margin: 20px 0 10px 0; } :where(body.page-login) h1, :where(body.page-login) h2, :where(body.page-login) h3 { font-size: 16px; color: var(--color-accent); } :where(body.page-login) h4, :where(body.page-login) h5, :where(body.page-login) h6 { color: var(--color-accent); font-size: 16px; } :where(body.page-login) p { margin: 0 0 10px 0; } :where(body.page-login) b { color: var(--color-accent); font-weight: 200; } :where(body.page-login) a, :where(body.page-login) a:link, :where(body.page-login) a:active, :where(body.page-login) a:visited, :where(body.page-login) a:hover { color: inherit; text-decoration: none; } :where(body.page-login) .page { opacity: 0; transition: opacity 600ms ease; } :where(body.page-login) .fade-in { display: block !important; opacity: 1; } :where(body.page-login) .fade-out { opacity: 0; } :where(body.page-login) .page-loader { display: block; width: 100%; height: 100%; position: fixed; z-index: 1000; overflow: auto; background: radial-gradient(ellipse at 14% 72%, #176cdb 0, transparent 35%), radial-gradient(ellipse at 88% 74%, #c624b5 0, transparent 43%), radial-gradient(ellipse at 57% 38%, #6346c9 0, transparent 44%), linear-gradient(145deg, #050b31 0%, #171153 45%, #430e60 100%); } :where(body.page-login) .loader-text { position: absolute; top: 50%; left: 0; right: 0; margin: 50px 0 0 0; height: 30px; text-align: center; font-size: 10px; letter-spacing: 3px; color: var(--color-font); } :where(body.page-login) .loader-animation { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50%; margin-top: -30px; margin-left: -30px; } :where(body.page-login) .loader-animation svg .st1 { stroke: var(--color-accent); fill: #fff; stroke-width: 0; } :where(body.page-login) .loader-animation svg .st2 { fill: var(--color-accent); } :where(body.page-login) .loader-animation svg .st3 { fill: var(--color-accent); opacity: 0.75; } :where(body.page-login) .loader-animation svg .st4 { fill: var(--color-accent); opacity: 0.5; } :where(body.page-login) .loader-donut { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; border: 2px solid rgba(255, 255, 255, 0.1); border-left-color: #ffffff; border-radius: 50%; margin: -33px 3rem 2rem -33px; animation: donut-spin 2s linear infinite; } :where(body.page-login) .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 28px clamp(20px, 4vw, 58px); } :where(body.page-login) .brand { font-size: 16px; font-weight: 720; letter-spacing: -.02em; display: flex; gap: 7px; align-items: center; } :where(body.page-login) .brand span:last-child { color: #d8cef3; font-weight: 450; } :where(body.page-login) .brand-icon { width: 20px; height: 20px; flex-shrink: 0; } :where(body.page-login) .page-footer { position: absolute; right: clamp(20px, 4vw, 58px); bottom: 5px; left: clamp(20px, 4vw, 58px); z-index: 20; text-align: center; } :where(body.page-login) .footer-copyright { font-size: 13px; font-weight: 300; letter-spacing: .04em; color: rgba(223, 226, 255, .6); text-decoration: none; } :where(body.page-login) .footer-copyright:hover { color: rgba(223, 226, 255, .9); } :where(body.page-login) #page { height: 100vh; box-sizing: border-box; transition: margin-left 0.5s ease; overflow: visible; display: none; } :where(body.page-login) .content { position: absolute; width: 100%; height: 100%; padding: 0; z-index: 50; overflow: visible; } :where(body.page-login) .page-loader { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 2s ease; z-index: 900; } :where(body.page-login) .page-loader.fade-out { opacity: 0; pointer-events: none; visibility: hidden; } :where(body.page-login) .content-login { position: fixed; width: 100%; height: 100%; background: transparent; overflow: visible; z-index: 10; } :where(body.page-login) .card-login { position: relative; font-size: 14px; margin: 0 auto; color: white; top: calc(50% - 25px) !important; transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; z-index: 20; overflow: visible; } :where(body.page-login) .table-login { table-layout: fixed; margin-left: auto; margin-right: auto; overflow: visible; } :where(body.page-login) .table-login tr { overflow: visible; } :where(body.page-login) .table-login td { overflow: visible; } :where(body.page-login) .table-login .table-title { font-size: clamp(12px, 3.5vw, 16px); letter-spacing: clamp(3px, 1vw, 6px); align-content: center; text-align: center; color: white; overflow: visible; } :where(body.page-login) .form-group { position: relative; margin: auto; width: 350px; min-width: 350px; max-width: 350px; padding: 0px; background: transparent; z-index: 10; } :where(body.page-login) .form-control { margin-bottom: 5px; font-size: 16px; color: var(--color-accent); background-color: #fff; } :where(body.page-login) .form-control:focus { border-color: var(--color-accent); background: #fff; color: var(--color-accent); box-shadow: 0 0 0 2px rgba(99, 70, 201, 0.5); } :where(body.page-login) .form-floating > .form-control:focus ~ label::after, :where(body.page-login) .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent !important; padding: 0 4px; } :where(body.page-login) .form-control:disabled { background-color: #1a1a1a; border-color: #555; color: #666; opacity: 0.6; cursor: not-allowed; } :where(body.page-login) .otp-input:disabled { background-color: #1a1a1a; border-color: #555; color: #666; opacity: 0.6; cursor: not-allowed; } :where(body.page-login) .otp-container { display: none; text-align: center; align-content: center; justify-content: space-between; margin-top: 15px; } :where(body.page-login) .otp-input { width: 45px; height: 50px; text-align: center; font-size: 22px; border-radius: 10px; border: 2px solid white; background: white; color: var(--color-accent); outline: none; transition: all 0.15s ease-in-out; } :where(body.page-login) .otp-input:focus { border-color: var(--color-accent); background: #fff; color: var(--color-accent); box-shadow: 0 0 0 2px rgba(99, 70, 201, 0.5); } :where(body.page-login) .btn-default { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; min-width: 350px; margin-top: 15px; cursor: pointer; height: 45px; border-radius: 5px; color: white; border: 1px solid white; background-color: var(--color-accent); opacity: 0.9; transition: background-color 0.2s ease-in, border-color 0.2s ease-in; gap: 10px; position: relative; } :where(body.page-login) .btn-default:hover { color: white; border-color: #FFFFFF; background-color: var(--color-accent); } :where(body.page-login) .btn-default:disabled { opacity: 0.7; cursor: not-allowed; color: white; border-color: #FFFFFF; background-color: var(--color-accent); } :where(body.page-login) .spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid white; border-radius: 50%; animation: spin 0.6s linear infinite; } :where(body.page-login) .processing-content { display: none; align-items: center; gap: 10px; } :where(body.page-login) .btn-default.processing .default-text { display: none; } :where(body.page-login) .btn-default.processing .processing-content { display: inline-flex; } :where(body.page-login) #canvas-container { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: transparent; } :where(body.page-login) #siri-orb { width: 100%; height: 100%; display: block; } :where(body.page-login) .hero { position: fixed; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 10; padding: 0 24px; overflow: visible; } :where(body.page-login) .message-rotator { position: relative; width: min(860px, 100%); height: 260px; margin-top: 0; } :where(body.page-login) .message-slide { position: absolute; inset: 0; padding: 20px 24px 64px; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: center; text-align: center; gap: 0; opacity: 0; transform: translateY(8px); transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1); pointer-events: none; will-change: opacity, transform; } :where(body.page-login) .message-slide.is-active { opacity: 1; transform: translateY(0); } :where(body.page-login) .message-slide.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); } :where(body.page-login) .message-kicker { margin: 0 0 10px; color: #fff; font-size: 11px; font-weight: 200; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } :where(body.page-login) .message-kicker::before { content: ""; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, #fff); } :where(body.page-login) .message-kicker::after { content: ""; width: 14px; height: 1px; background: linear-gradient(90deg, #fff, transparent); } :where(body.page-login) .message-slide h2 { margin: 0 0 12px; max-width: 760px; color: #fff; font-size: clamp(40px, 6vw, 72px); font-weight: 400; line-height: .98; letter-spacing: -.04em; text-shadow: 0 8px 36px rgba(53, 15, 121, .5); } :where(body.page-login) .hero-inline-logo { display: inline-block; width: clamp(290px, 13vw, 150px); height: auto; vertical-align: middle; margin: 0 .08em .12em; } :where(body.page-login) .hero-inline-logo--small { width: 110px; height: auto; vertical-align: middle; margin: 0 .15em .1em 0; } :where(body.page-login) .login-logo { width: 350px; max-width: 100%; height: auto; display: block; margin: 0 auto; } :where(body.page-login) .message-slide p { margin: 0; max-width: 620px; color: #fff; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6; } :where(body.page-login) .rotator-dots { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } :where(body.page-login) .rotator-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; padding: 0; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .3s, box-shadow .3s, transform .3s; } :where(body.page-login) .rotator-dot.is-active { background: #ff6600; box-shadow: 0 0 10px rgba(255, 102, 0, .65); transform: scale(1.2); } :where(body.page-login) .message-rotator { cursor: pointer; margin-top: 0; transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1), visibility .7s; } :where(body.page-login) .content-login { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; overflow: visible; z-index: 10; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .7s cubic-bezier(.4,0,.2,1) .15s, transform .7s cubic-bezier(.4,0,.2,1) .15s, visibility .7s .15s; pointer-events: none; } :where(body.page-login) .hero.show-login .message-rotator { opacity: 0; visibility: hidden; transform: translateY(-14px); pointer-events: none; } :where(body.page-login) .hero.show-login .content-login { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } :where(body.page-login) .card-login { position: relative; font-size: 14px; margin: 0 auto; color: white; top: auto !important; transform: none !important; -webkit-transform: none !important; z-index: 20; overflow: visible; } @keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { :where(body.page-login) .hero { gap: 12px; padding: 0 16px; justify-content: center; align-items: center; } :where(body.page-login) .message-rotator { height: 210px; margin-top: 0; } :where(body.page-login) .message-slide h2 { font-size: clamp(32px, 9vw, 46px); font-weight: 400; } :where(body.page-login) .message-slide p { font-size: 14px; line-height: 1.5; } } /* ==================== §2 APP (index.html) · body class: page-index ==================== */ /* Variables del :root original de index.html */ body.page-index { --color-sidebar: #323232; --color-primary: gainsboro; --color-secondary: #424242; --color-accent: #FF6600; --color-font: #f2f2f2; --color-background: #2b2b2b; --orb-c1: #4285f4; --orb-c2: #9b51e0; --orb-c3: #e91e63; --orb-c4: #2196f3; --orb-c5: #00f2ff; --orb-gradient: linear-gradient( 90deg, var(--orb-c1) 0%, var(--orb-c2) 25%, var(--orb-c3) 50%, var(--orb-c4) 75%, var(--orb-c5) 100% ); } :where(body.page-index) * { margin: 0; padding: 0; box-sizing: border-box; } html:has(body.page-index) { height: 100%; min-height: 100%; background: radial-gradient(ellipse at 14% 72%, #176cdb 0, transparent 35%), radial-gradient(ellipse at 88% 74%, #c624b5 0, transparent 43%), radial-gradient(ellipse at 57% 38%, #6346c9 0, transparent 44%), linear-gradient(145deg, #050b31 0%, #171153 45%, #430e60 100%); background-attachment: fixed; } body.page-index { background: transparent; display: flex; justify-content: center; align-items: center; height: 100%; overflow: hidden; font-family: 'Titillium Web', sans-serif; touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } :where(body.page-index) .status-corner { position: fixed; top: 14px; right: 14px; z-index: 40; display: flex; align-items: center; background: transparent; border: none; backdrop-filter: none; } body.page-index.theme-light .status-corner { background: transparent; border: none; } :where(body.page-index) .connection-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 999px; color: #fff; user-select: none; white-space: nowrap; } :where(body.page-index) .connection-badge.disconnected { background: #ef4444; } :where(body.page-index) .connection-badge.connected { background: #16a34a; } :where(body.page-index) .connection-badge.connecting { background: #6b7280; } body.page-index.theme-light { background: transparent; } :where(body.page-index) .container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; width: 100%; } :where(body.page-index) #canvas-container { position: relative; width: 500px; height: 500px; border-radius: 0; overflow: visible; background: transparent; } :where(body.page-index) .orb-listening-spinner { position: absolute; inset: -2px; border-radius: 50%; border: none; background: conic-gradient( from -90deg, transparent 0deg 250deg, var(--orb-c1) 292deg, var(--orb-c2) 308deg, var(--orb-c3) 324deg, var(--orb-c4) 338deg, var(--orb-c5) 350deg, transparent 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.14s ease; animation: spin 0.8s linear infinite; } :where(body.page-index) #canvas-container.is-user-speaking .orb-listening-spinner { opacity: 1; } :where(body.page-index) #canvas-container::before { content: none; } body.page-index.theme-light #canvas-container::before { content: none; } body.page-index.theme-light #canvas-container::after { content: none; } :where(body.page-index) #canvas-container::after { content: none; } :where(body.page-index) canvas { position: relative; width: 100%; height: 100%; filter: saturate(1.18) contrast(1.04); transform: scale(2.2); transform-origin: center; display: block; background: transparent; z-index: 1; } :where(body.page-index) .top-tools { position: fixed; top: 14px; left: 14px; z-index: 40; display: flex; gap: 8px; } :where(body.page-index) .tool-btn { width: 34px; height: 34px; border-radius: 0; border: none; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: none; } :where(body.page-index) .tool-btn svg { width: 16px; height: 16px; fill: currentColor; } :where(body.page-index) .tool-btn.active { color: #84b8ff; } body.page-index.theme-light .tool-btn { background: transparent; color: #fff; border: none; } :where(body.page-index) .quick-panel { position: fixed; top: 58px; left: 14px; right: 14px; width: auto; padding: 12px; border-radius: 12px; background: rgba(18, 24, 35, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); z-index: 39; transition: opacity 0.16s ease, transform 0.16s ease; } :where(body.page-index) .quick-panel.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); } body.page-index.theme-light .quick-panel { background: rgba(255, 255, 255, 0.94); border-color: rgba(0, 0, 0, 0.14); } :where(body.page-index) .control-group { display: flex; flex-direction: column; gap: 10px; } :where(body.page-index) .control-group label { color: #fff; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; } body.page-index.theme-light .control-group label { color: #fff; } :where(body.page-index) .control-group label span:last-child { background: color-mix(in srgb, var(--orb-c1) 30%, transparent); padding: 4px 10px; border-radius: 6px; color: var(--orb-c1); font-weight: 600; font-size: 12px; min-width: 40px; text-align: center; } :where(body.page-index) input[type="range"] { width: 100%; height: 6px; border-radius: 3px; background: var(--orb-gradient); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; } :where(body.page-index) input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s; } :where(body.page-index) input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px color-mix(in srgb, var(--orb-c1) 50%, transparent); } :where(body.page-index) input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s; } :where(body.page-index) input[type="range"]::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px color-mix(in srgb, var(--orb-c1) 50%, transparent); } :where(body.page-index) .instrucciones { position: fixed; left: 0; right: 0; bottom: 12px; color: #fff; font-size: 13px; text-align: center; opacity: 0.85; padding: 10px 14px; z-index: 10; } :where(body.page-index) .footer-disconnected-hint { width: min(460px, 86vw); margin: 10px auto 0; font-size: 12px; letter-spacing: 0.2px; color: #fff; opacity: 0.95; } :where(body.page-index) .footer-disconnected-hint.hidden { display: none; } :where(body.page-index) .footer-inline-logo { width: 90px; height: auto; vertical-align: middle; margin: 0 .1em .15em .25em; } :where(body.page-index) .idle-footer { display: none; width: min(460px, 86vw); margin: 10px auto 0; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } :where(body.page-index) .idle-footer.visible { display: block; opacity: 1; } :where(body.page-index) .idle-timer { display: flex; justify-content: center; font-size: 11px; letter-spacing: 0.3px; color: #fff; margin-bottom: 6px; } body.page-index.theme-light .idle-timer { color: #fff; } :where(body.page-index) .idle-progress-wrap { width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } body.page-index.theme-light .idle-progress-wrap { background: rgba(0, 0, 0, 0.18); } :where(body.page-index) .idle-progress { width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 120ms linear; background: var(--orb-gradient); } body.page-index.theme-light .instrucciones { color: #fff; } body.page-index.theme-light .footer-disconnected-hint { color: #fff; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.75; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.75; } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 720px) { :where(body.page-index) #canvas-container { width: min(88vw, 500px); height: min(88vw, 500px); } :where(body.page-index) .top-tools { top: 10px; left: 10px; gap: 6px; } :where(body.page-index) .quick-panel { top: 52px; left: 10px; right: 10px; width: auto; } } /* ==================== §3 ERROR 404 (404.html) · body class: page-404 ==================== */ /* Variables del :root original de 404.html */ body.page-404 { --primary-color: #6346c9; --secondary-color: #f8fafb; --section-background: #090727; --orb-c1: #4285f4; --orb-c2: #9b51e0; --orb-c3: #e91e63; --orb-c4: #2196f3; --orb-c5: #00f2ff; } html:has(body.page-404), body.page-404 { height: 100%; margin: 0; font-family: 'Titillium Web', sans-serif; font-weight: 200; background: #090727; color: #f8fafb; } body.page-404 { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; overflow: hidden; background: radial-gradient(ellipse at 14% 72%, #176cdb 0, transparent 35%), radial-gradient(ellipse at 88% 74%, #c624b5 0, transparent 43%), radial-gradient(ellipse at 57% 38%, #6346c9 0, transparent 44%), linear-gradient(145deg, #050b31 0%, #171153 45%, #430e60 100%); } :where(body.page-404) #canvas-container { position: absolute; inset: 0; z-index: 0; pointer-events: none; } :where(body.page-404) #siri-orb { width: 100%; height: 100%; display: block; } :where(body.page-404) .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 28px clamp(20px, 4vw, 58px); } :where(body.page-404) .brand { font-size: 16px; font-weight: 720; letter-spacing: -.02em; display: flex; gap: 7px; align-items: center; } :where(body.page-404) .brand span:last-child { color: #d8cef3; font-weight: 450; } :where(body.page-404) .brand-icon { width: 20px; height: 20px; flex-shrink: 0; } :where(body.page-404) .page-footer { position: absolute; right: clamp(20px, 4vw, 58px); bottom: 5px; left: clamp(20px, 4vw, 58px); z-index: 20; text-align: center; } :where(body.page-404) .footer-copyright { font-size: 13px; font-weight: 300; letter-spacing: .04em; color: rgba(223,226,255,.6); text-decoration: none; } :where(body.page-404) .footer-copyright:hover { color: rgba(223,226,255,.9); } :where(body.page-404) h1.number { color: white; margin: 0; line-height: 1; font-size: clamp(100px, 25vw, 220px); animation: heartbeat 1.6s ease-in-out infinite, fadeIn 1s ease forwards; position: relative; z-index: 10; } :where(body.page-404) span.notfoundmessage { color: white; display: block; margin-top: 10px; font-size: clamp(40px, 10vw, 100px); opacity: 0; position: relative; z-index: 10; } :where(body.page-404) .notfound-icon { display: block; margin: 20px auto; opacity: 0; position: relative; z-index: 10; } :where(body.page-404) .message-es, :where(body.page-404) .message-en { display: block; margin: 5px 0; font-size: clamp(14px, 2.5vw, 22px); opacity: 0; position: relative; z-index: 10; } :where(body.page-404) .message-es { color: white; } :where(body.page-404) .message-en { color: white; } .theme-dark body.page-404 { color: white; background: radial-gradient(ellipse at 14% 72%, #176cdb 0, transparent 35%), radial-gradient(ellipse at 88% 74%, #c624b5 0, transparent 43%), radial-gradient(ellipse at 57% 38%, #6346c9 0, transparent 44%), linear-gradient(145deg, #050b31 0%, #171153 45%, #430e60 100%); } :where(body.page-404) .theme-dark .message-es { color: white; } :where(body.page-404) .theme-dark .message-en { color: white; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.08); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 400px) { body.page-404 { padding: 10px; } }