/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ html { scroll-behavior: smooth; } .centered { display: flex; justify-content: center; align-items: center; height: 55vh; margin: 0; text-align: center; } .blinking-cursor { display: inline-block; animation: blink 1.5s steps(1, start) infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .banner-image { float: right; margin-left: 20px; max-width: 50%; border-radius: 10px; /* Ajusta el valor para definir el radio de las esquinas */ } @media (max-width: 600px) { .banner-image { float: none; display: block; margin: 0 auto 20px; max-width: 100%; border-radius: 10px; /* Se mantienen las esquinas curveadas en pantallas pequeñas */ } } /* Oculta la línea del brand text por defecto */ .brand-text { opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.4s ease-in-out; } /* Muestra el brand text cuando se hace scroll hacia abajo */ body.scroll-down .brand-text { opacity: 1; visibility: visible; transform: translateY(0); } /* Estilos para el Spinner en los botones */ .spinner_hzlK{ animation:spinner_vc4H .8s linear infinite;animation-delay:-.8s } .spinner_koGT{ animation-delay:-.65s } .spinner_YF1u{ animation-delay:-.5s } @keyframes spinner_vc4H{ 0%{ y:1px;height:22px } 93.75%{ y:5px;height:14px;opacity:.2 } } /* Syntax highlighting (highlight.js, loaded from a CDN -- see the layout and app/javascript/controllers/highlight_controller.js) for 
 code blocks
   inside article bodies. No highlight.js theme stylesheet is loaded; these are
   the only token colors, hand-picked so every one of them clears WCAG AA
   (4.5:1) against the block background in BOTH themes.

   This file is served after actiontext.css (propshaft's `stylesheet_link_tag :app`
   emits them alphabetically), so these rules win over trix's own `pre` styles.

   A block that highlight.js skipped -- prose in a 
, or a page where the CDN
   never answered -- still gets the background and foreground below, so nothing
   ever renders as dark-on-dark. */

.trix-content pre {
    /* trix.css makes this an inline-block, which puts a 100%-wide box into an
       inline formatting context and lets a long line widen the page on a phone.
       A block box keeps the overflow inside the scroller where it belongs. */
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
    border-radius: 6px;
    padding: 0.75em 1em;
    background-color: #1e1e2e;
    color: #cdd6f4;
}

/* Dark is the default theme (). */
.hljs-comment, .hljs-quote {
    color: #8087a2;          /* 4.61:1 on #1e1e2e */
    font-style: italic;
}
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-subst, .hljs-doctag {
    color: #cba6f7;          /* 8.07:1 */
}
.hljs-string, .hljs-regexp, .hljs-addition {
    color: #a6e3a1;          /* 11.03:1 */
}
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-deletion {
    color: #fab387;          /* 9.27:1 */
}
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class {
    color: #89b4fa;          /* 7.79:1 */
}
.hljs-type, .hljs-built_in, .hljs-class .hljs-title {
    color: #f9e2af;          /* 12.91:1 */
}
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-params {
    color: #f38ba8;          /* 7.08:1 */
}
.hljs-meta, .hljs-meta .hljs-keyword {
    color: #94e2d5;          /* 11.01:1 */
}
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

/* Light theme overrides. */
:root[data-theme="light"] .trix-content pre {
    background-color: #f6f8fa;
    color: #24292e;          /* 13.78:1 on #f6f8fa */
}
:root[data-theme="light"] .hljs-comment,
:root[data-theme="light"] .hljs-quote {
    color: #5d6570;          /* 5.54:1 */
}
:root[data-theme="light"] .hljs-keyword,
:root[data-theme="light"] .hljs-selector-tag,
:root[data-theme="light"] .hljs-literal,
:root[data-theme="light"] .hljs-subst,
:root[data-theme="light"] .hljs-doctag {
    color: #cf222e;          /* 5.03:1 */
}
:root[data-theme="light"] .hljs-string,
:root[data-theme="light"] .hljs-regexp,
:root[data-theme="light"] .hljs-addition {
    color: #116329;          /* 6.94:1 */
}
:root[data-theme="light"] .hljs-number,
:root[data-theme="light"] .hljs-symbol,
:root[data-theme="light"] .hljs-bullet,
:root[data-theme="light"] .hljs-deletion {
    color: #953800;          /* 6.94:1 */
}
:root[data-theme="light"] .hljs-title,
:root[data-theme="light"] .hljs-section,
:root[data-theme="light"] .hljs-name,
:root[data-theme="light"] .hljs-selector-id,
:root[data-theme="light"] .hljs-selector-class {
    color: #005cc5;          /* 5.91:1 */
}
:root[data-theme="light"] .hljs-type,
:root[data-theme="light"] .hljs-built_in,
:root[data-theme="light"] .hljs-class .hljs-title {
    color: #6f42c1;          /* 6.12:1 */
}
:root[data-theme="light"] .hljs-attr,
:root[data-theme="light"] .hljs-attribute,
:root[data-theme="light"] .hljs-variable,
:root[data-theme="light"] .hljs-template-variable,
:root[data-theme="light"] .hljs-params {
    color: #953800;          /* 6.94:1 */
}
:root[data-theme="light"] .hljs-meta,
:root[data-theme="light"] .hljs-meta .hljs-keyword {
    color: #005cc5;          /* 5.91:1 */
}