/* ===========================================================
BLACK HIGHLIGHTER — ADAPTED FOR sht.stratix.cl
===========================================================
Extraído y adaptado del theme original Black Highlighter
(Nu-SCPTheme / NamedNameless).
Incluye:
- Paleta de colores completa con variables CSS
- Gradientes (header, topbar, background)
- Top-bar con animaciones de bordes deslizantes
- Sidebar responsive con slide-in animation
- Estilos para los elementos del acortador
CÓMO USAR:
1. Linkeá este CSS en tu
2. Agregá la estructura HTML del top-bar y sidebar
(ver comentarios al final del archivo)
=========================================================== */
/* ===========================================================
1. FONTS
=========================================================== */
@import url("https://namednameless.github.io/Black-Highlighter-reworked/fonts/fonts.css");
/* Fallback: si los fonts de gh-pages no cargan */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
/* ===========================================================
2. CSS CUSTOM PROPERTIES — COLOR PALETTE & GRADIENTS
=========================================================== */
:root {
/* === TYPEFACES === */
--body-font: Inter, Verdana, Geneva, "Helvetica Neue", Arial, sans-serif;
--ui-font: PTRootUI, -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
--header-font: Inter, "Franklin Gothic Medium", Arial, sans-serif;
--title-font: var(--header-font);
--mono-font: Recursive, Consolas, monaco, monospace;
/* === BASE FONT SIZES === */
--min-font-size: 0.8125rem;
--max-font-size: 0.9375rem;
--base-font-size: var(--max-font-size);
--base-line-height: 1.5;
/* === COLOR MONOCHROMES — graphite / charcoal === */
--white-monochrome: 245, 242, 242;
--pale-gray-monochrome: 224, 219, 219;
--light-pale-gray-monochrome: 183, 174, 174;
--very-light-gray-monochrome: 116, 108, 108;
--light-gray-monochrome: 82, 74, 74;
--gray-monochrome: 48, 43, 45;
--dark-gray-monochrome: 24, 22, 24;
--black-monochrome: 10, 10, 11;
/* === ACCENT COLORS (rojo / hierro) === */
--pale-accent: 237, 103, 103;
--bright-accent: 194, 46, 46;
--medium-accent: 154, 28, 28;
--dark-accent: 102, 16, 16;
--alt-accent: 143, 132, 132;
--danger-accent: 214, 56, 56;
/* === PRIMARY COLORS === */
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--dark-accent);
--swatch-border-color: var(--light-gray-monochrome);
/* === TEXT COLORS === */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-text-general: var(--pale-gray-monochrome);
--swatch-important-text: var(--pale-accent);
/* === MENU BACKGROUND COLORS === */
--swatch-menubg-color: 24, 22, 24;
--swatch-menubg-light-color: 33, 30, 32;
--swatch-menubg-medium-color: 79, 71, 71;
--swatch-menubg-medium-dark-color: 110, 101, 101;
--swatch-menubg-dark-color: 12, 11, 12;
--swatch-menubg-black-color: 5, 5, 6;
--swatch-menubg-hover-color: var(--bright-accent);
/* === MENU TEXT COLORS === */
--swatch-menutxt-dark-color: var(--pale-gray-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
/* === SECONDARY & TERTIARY === */
--swatch-secondary-color: var(--swatch-menubg-light-color);
--swatch-tertiary-color: var(--swatch-menubg-medium-color);
--swatch-alternate-color: var(--swatch-menubg-black-color);
--swatch-text-secondary-color: var(--white-monochrome);
--swatch-text-tertiary-color: var(--pale-gray-monochrome);
/* === BACKGROUND === */
--swatch-background: 14, 13, 15;
--background-gradient-color: 49, 16, 16;
/* === GRADIENTE DEL HEADER — rojo apagado → grafito === */
--header-gradient-color-bottom: 64, 16, 16;
--header-gradient-color-middle: 18, 16, 17;
--header-gradient-color-top: 9, 9, 10;
--gradient-header: linear-gradient(
to top,
rgb(var(--header-gradient-color-bottom)) 0%,
rgb(var(--header-gradient-color-middle)) 90%,
rgb(var(--header-gradient-color-top)) 100%
);
/* === DIAGONAL STRIPES === */
--diagonal-stripes: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh
);
/* === GRADIENTE DEL TOPBAR — carbón / rojo === */
--swatch-topmenu-bg-color: var(--swatch-menubg-color);
--swatch-topmenu-border-color: var(--swatch-menubg-medium-color);
--gradient-topmenu: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) var(--header-height-on-desktop, 7.5rem),
rgba(var(--swatch-topmenu-border-color), 1) var(--header-height-on-desktop, 7.5rem),
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--header-height-on-desktop, 7.5rem) + 0.0625rem),
rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.0625rem),
rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.0625rem),
rgba(var(--swatch-topmenu-border-color), 1) 100%
);
--gradient-topmenu-mobile: linear-gradient(
to bottom,
rgba(var(--swatch-topmenu-border-color), 1) 0,
rgba(var(--swatch-topmenu-bg-color), 1) 0.0625rem,
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--topbar-height-on-mobile, 3rem) - 0.0625rem),
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--topbar-height-on-mobile, 3rem) - 0.0625rem),
rgba(var(--swatch-topmenu-border-color), 1) var(--topbar-height-on-mobile, 3rem)
);
/* === GRADIENTE DE FONDO === */
--background-gradient-distance: 40rem;
--gradient-background: linear-gradient(
to bottom,
rgba(var(--background-gradient-color), 1) 0,
rgba(var(--background-gradient-color), 0) var(--background-gradient-distance)
);
/* === LINK COLORS — red links, muted alternate === */
--link-color: var(--bright-accent);
--visited-link-color: var(--medium-accent);
--hover-link-color: var(--medium-accent);
--newpage-color: var(--alt-accent);
/* === HEADER MEASUREMENTS === */
--header-height-on-desktop: 8.75rem;
--header-height-on-mobile: 6.75rem;
--topbar-height-on-desktop: 4.25rem;
--topbar-height-on-mobile: 4rem;
--final-header-height-on-desktop: calc(
var(--header-height-on-desktop) + var(--topbar-height-on-desktop)
);
/* === TOPBAR COLORS — light text on dark bg, red hover === */
--topmenu-category-color: var(--pale-gray-monochrome);
--topmenu-category-hover-color: var(--white-monochrome);
--topmenu-category-hover-bg: 0, 0, 0, 0;
--topmenu-hover-border-color: var(--bright-accent);
/* === DROPDOWN COLORS === */
--dropdown-bg-color: var(--swatch-alternate-color), 0.95;
--dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
--dropdown-links-color: var(--swatch-menutxt-light-color);
--dropdown-links-bg-color: 0, 0, 0, 0;
--dropdown-links-hover-color: var(--swatch-menutxt-light-color);
--dropdown-links-hover-bg-color: var(--swatch-primary);
/* === SIDEBAR COLORS === */
--sidebar-bg-color: var(--swatch-menubg-color);
--sidebar-width-on-mobile: 18rem;
--sidebar-links-text: var(--swatch-menutxt-general-color);
--sidebar-links-hover-bg-color: var(--swatch-primary);
--sidebar-links-hover-text-color: var(--swatch-menutxt-light-color);
/* === UI BUTTONS === */
--ui-button-bg: var(--swatch-secondary-color);
--ui-button-txt: var(--swatch-text-tertiary-color);
--ui-button-hover-bg: var(--swatch-primary);
--ui-button-hover-txt: var(--swatch-menutxt-light-color);
--ui-button-hover-outline: var(--swatch-primary);
/* === SITE HEADER === */
--swatch-headerh1-color: var(--white-monochrome);
/* === SCROLLBAR === */
--scrollbar-width: 0.5rem;
}
/* ===========================================================
3. GLOBAL STYLES
=========================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 1em;
line-height: var(--base-line-height);
color-scheme: dark;
scrollbar-width: thin;
scrollbar-color: rgba(var(--swatch-tertiary-color), 0.6)
rgba(var(--swatch-secondary-color), 0.3);
}
body {
margin: 0;
padding: 0;
font-family: var(--body-font);
font-size: var(--base-font-size);
line-height: var(--base-line-height);
color: rgb(var(--swatch-text-general));
background-color: rgba(var(--swatch-background), 1);
background-image: var(--gradient-header),
var(--gradient-topmenu),
var(--gradient-background);
background-repeat: repeat-x;
background-size: 100% var(--header-height-on-desktop),
100% var(--final-header-height-on-desktop),
100% var(--background-gradient-distance);
min-height: 100vh;
word-break: normal;
hyphens: manual;
}
/* Selection */
::selection {
background: rgba(var(--swatch-primary), 0.25);
text-shadow: none;
}
/* Scrollbar Webkit */
::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
border: solid 0.0625rem rgba(var(--swatch-menubg-black-color), 0.1);
border-radius: 0.031rem;
}
::-webkit-scrollbar-track {
background: rgba(var(--swatch-menubg-black-color), 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(var(--swatch-tertiary-color), 0.4);
}
/* Links globales */
a {
transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
color 150ms cubic-bezier(0.4, 0, 0.2, 1);
color: rgb(var(--link-color));
text-decoration: underline 0.09375em;
text-decoration-color: transparent;
}
a:visited {
color: rgb(var(--visited-link-color));
}
a:hover, a:active {
color: rgb(var(--hover-link-color));
text-decoration-color: currentColor;
}
/* ===========================================================
4. DIAGONAL STRIPES OVERLAY (legacy global band disabled)
=========================================================== */
.diagonal-stripes {
display: none;
}
/* ===========================================================
5. TOP-BAR / NAVBAR (Black Highlighter Style)
=========================================================== */
.top-bar {
--wght: 600;
display: flex;
position: sticky;
top: 0;
z-index: 60;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: var(--topbar-height-on-desktop);
padding: 0 1.25rem;
font-family: var(--ui-font);
font-size: calc(var(--base-font-size) * 0.88);
font-weight: var(--wght);
letter-spacing: 0.04em;
background: linear-gradient(
180deg,
rgba(var(--swatch-menubg-black-color), 0.96) 0%,
rgba(var(--swatch-menubg-color), 0.96) 100%
);
border-bottom: 0.0625rem solid rgba(var(--swatch-primary), 0.28);
box-shadow: 0 0.875rem 1.8rem rgba(var(--swatch-menubg-black-color), 0.28);
backdrop-filter: blur(12px);
}
.top-bar-brand {
display: inline-flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
color: rgb(var(--swatch-text-light));
text-decoration: none;
}
.top-bar-brand:hover,
.top-bar-brand:active {
color: rgb(var(--swatch-text-light));
text-decoration: none;
}
.top-bar-brand:visited {
color: rgb(var(--swatch-text-light));
}
.top-bar-brand__mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3rem;
height: 2.3rem;
padding: 0 0.7rem;
border: 0.0625rem solid rgba(var(--swatch-primary), 0.38);
border-radius: 0.65rem;
background: linear-gradient(
135deg,
rgba(var(--swatch-primary-darkest), 0.95) 0%,
rgba(var(--swatch-primary), 0.88) 100%
);
box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-text-light), 0.06);
color: rgb(var(--swatch-text-light));
font-family: var(--title-font);
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.14em;
}
.top-bar-brand__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.top-bar-brand__title {
color: rgb(var(--swatch-text-light));
font-family: var(--title-font);
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.1;
text-transform: uppercase;
}
.top-bar-brand__meta {
color: rgba(var(--swatch-text-light), 0.62);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.2;
text-transform: uppercase;
}
.top-bar-nav-shell {
display: flex;
flex: 1 1 auto;
justify-content: flex-end;
min-width: 0;
}
.top-bar-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
height: auto;
margin: 0;
padding: 0;
list-style: none;
}
.top-bar-nav li {
display: inline-flex;
position: relative;
flex-grow: 0;
margin: 0;
padding: 0;
list-style: none;
cursor: pointer;
}
.top-bar-nav li a {
--wght: 600;
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.55rem 0.9rem;
overflow: hidden;
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
border: 0.0625rem solid transparent;
border-radius: 0.55rem;
background-color: rgba(var(--swatch-menubg-light-color), 0.2);
color: rgb(var(--topmenu-category-color));
font-weight: var(--wght);
font-size: calc(var(--base-font-size) * 0.85);
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.top-bar-nav li > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.55rem 0.9rem;
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.35);
border-radius: 0.55rem;
background: rgba(var(--swatch-menubg-light-color), 0.36);
color: rgba(var(--swatch-text-light), 0.82);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.top-bar-nav li a:visited {
color: rgb(var(--topmenu-category-color));
}
.top-bar-nav li:hover > a,
.top-bar-nav li:active > a {
--wght: 700;
color: rgb(var(--topmenu-category-hover-color));
border-color: rgba(var(--swatch-primary), 0.38);
background-color: rgba(var(--swatch-primary-darkest), 0.42);
box-shadow: 0 0 0 0.0625rem rgba(var(--swatch-primary), 0.16);
font-weight: var(--wght);
}
/* Sliding borders (top & bottom) — the signature BH animation */
.top-bar-nav li > a::before,
.top-bar-nav li > a::after {
content: " ";
position: absolute;
width: 100%;
height: 0.1875rem;
transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
background-color: rgb(var(--topmenu-hover-border-color));
}
.top-bar-nav li > a::before {
--clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
clip-path: var(--clip-path);
top: 0;
left: 0;
}
.top-bar-nav li > a::after {
--clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: var(--clip-path);
right: 0;
bottom: 0;
}
.top-bar-nav li:hover > a::before,
.top-bar-nav li:active > a::before,
.top-bar-nav li:hover > a::after,
.top-bar-nav li:active > a::after {
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
/* ===========================================================
6. SIDEBAR MOBILE - Slide-in Animation
=========================================================== */
.sidebar-toggle {
display: none;
align-items: center;
justify-content: center;
width: 2.85rem;
height: 2.85rem;
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.35);
border-radius: 0.6rem;
background: rgba(var(--swatch-menubg-light-color), 0.24);
color: rgb(var(--topmenu-category-color));
font-size: 1.35rem;
cursor: pointer;
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-toggle:hover {
color: rgb(var(--topmenu-category-hover-color));
border-color: rgba(var(--swatch-primary), 0.38);
background: rgba(var(--swatch-primary-darkest), 0.4);
}
.sidebar-overlay {
display: none;
position: fixed;
z-index: 86;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--swatch-menubg-black-color), 0.72);
opacity: 0;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
pointer-events: none;
}
.sidebar-overlay.open {
opacity: 1;
pointer-events: auto;
}
.sidebar {
position: fixed;
z-index: 87;
top: 0;
left: calc(var(--sidebar-width-on-mobile) * -1);
width: var(--sidebar-width-on-mobile);
max-width: 80vw;
height: 100%;
padding: 0.9rem;
overflow-y: auto;
background: linear-gradient(
180deg,
rgba(var(--swatch-menubg-black-color), 0.98) 0%,
rgba(var(--sidebar-bg-color), 1) 100%
);
color: rgb(var(--sidebar-links-text));
font-family: var(--ui-font);
direction: initial;
transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
border-right: 0.0625rem solid rgba(var(--swatch-primary), 0.24);
box-shadow: 0.5rem 0 1.8rem rgba(var(--swatch-menubg-black-color), 0.48);
}
.sidebar.open {
left: 0;
}
.sidebar .side-block {
margin: 0.5rem 0;
padding: 0;
border: none;
background: transparent;
}
.sidebar .heading {
display: flex;
align-items: flex-end;
justify-content: flex-start;
min-height: 1.5rem;
margin: 0 0 0.25rem 0;
padding: 0 0.25rem;
box-shadow: 0 0.0625rem 0 0 rgb(var(--swatch-primary-darker));
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 0.85);
font-weight: 700;
letter-spacing: 0.016em;
text-transform: uppercase;
color: rgb(var(--swatch-primary-darker));
}
.sidebar .menu-item {
display: flex;
align-items: center;
min-height: 2.6rem;
padding: 0;
box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--swatch-border-color), 0.08);
}
.sidebar .menu-item a {
--wght: 500;
display: flex;
flex-grow: 2;
align-items: center;
height: 100%;
padding: 0.65rem 0.8em 0.65rem 1em;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
color 150ms cubic-bezier(0.4, 0, 0.2, 1),
font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1);
color: rgb(var(--sidebar-links-text));
font-size: calc(var(--base-font-size) * 0.9);
font-weight: var(--wght);
letter-spacing: 0.04em;
line-height: 1.5;
text-decoration: none;
background-color: transparent;
border-radius: 0.5rem;
position: relative;
overflow: hidden;
}
.sidebar .menu-item span {
display: flex;
flex-grow: 2;
align-items: center;
width: 100%;
height: 100%;
padding: 0.65rem 0.8em 0.65rem 1em;
color: rgba(var(--swatch-text-light), 0.76);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
}
.sidebar .menu-item a:visited {
color: rgb(var(--sidebar-links-text));
}
/* Hover bar diagonal — another signature BH animation */
.sidebar .menu-item a::before {
--clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: -1em;
width: calc(100% + 1em);
height: 100%;
transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
background-color: rgb(var(--sidebar-links-hover-bg-color));
pointer-events: none;
clip-path: var(--clip-path);
}
.sidebar .menu-item a:hover::before,
.sidebar .menu-item a:active::before {
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
.sidebar .menu-item a:hover,
.sidebar .menu-item a:active {
--wght: 700;
color: rgb(var(--sidebar-links-hover-text-color));
font-weight: var(--wght);
text-decoration: none;
}
.sidebar .close-btn {
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.sidebar .close-btn button {
background: rgba(var(--swatch-menubg-light-color), 0.28);
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.28);
border-radius: 0.55rem;
color: rgb(var(--sidebar-links-text));
font-size: 1.25rem;
cursor: pointer;
padding: 0.35rem 0.7rem;
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar .close-btn button:hover {
color: rgb(var(--swatch-primary));
}
/* ===========================================================
7. ACORTADOR — MAIN CONTENT
=========================================================== */
/* Contenedor principal */
.container {
width: 100%;
max-width: 640px;
margin: 1.75rem auto 2.5rem;
padding: 0 1.5rem;
}
/* Header del sitio */
.site-header {
position: relative;
margin-bottom: 2rem;
padding: 1.45rem 1.55rem 1.65rem;
border: 0.0625rem solid rgba(var(--swatch-primary), 0.22);
border-radius: 0.9rem;
background: linear-gradient(
135deg,
rgba(var(--swatch-primary-darkest), 0.34) 0%,
rgba(var(--swatch-menubg-color), 0.96) 42%,
rgba(var(--swatch-menubg-dark-color), 0.98) 100%
);
box-shadow: 0 1rem 2rem rgba(var(--swatch-menubg-black-color), 0.34);
overflow: hidden;
}
.site-header::before {
content: "";
position: absolute;
top: -35%;
right: -10%;
width: 16rem;
height: 16rem;
background: radial-gradient(
circle,
rgba(var(--swatch-primary), 0.22) 0%,
rgba(var(--swatch-primary), 0) 72%
);
pointer-events: none;
}
.site-header::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: var(--diagonal-stripes);
background-repeat: repeat;
opacity: 0.28;
pointer-events: none;
}
.site-header > * {
position: relative;
z-index: 1;
}
.site-header h1 {
font-family: var(--header-font);
font-size: clamp(1.85rem, 4vw, 2.75rem);
font-weight: 800;
color: rgb(var(--swatch-headerh1-color, var(--swatch-text-secondary-color)));
letter-spacing: -0.02em;
line-height: 1.12;
}
.site-header .sub {
max-width: 50rem;
color: rgba(var(--swatch-text-secondary-color), 0.76);
font-size: 0.96rem;
margin-top: 0.6rem;
}
/* Cards */
.card {
background: linear-gradient(
180deg,
rgba(var(--swatch-secondary-color), 0.96) 0%,
rgba(var(--swatch-menubg-color), 0.92) 100%
);
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.34);
border-radius: 0.75rem;
padding: 1.6rem;
margin-bottom: 1.5rem;
box-shadow: 0 0.8rem 1.75rem rgba(var(--swatch-alternate-color), 0.32);
}
.card label {
display: block;
font-family: var(--ui-font);
font-size: 0.85rem;
font-weight: 600;
color: rgb(var(--swatch-text-tertiary-color));
margin-bottom: 0.4rem;
letter-spacing: 0.03em;
}
.card .optional {
font-size: 0.8rem;
color: rgba(var(--swatch-text-tertiary-color), 0.6);
font-weight: 400;
}
/* Input row */
.input-row {
display: flex;
gap: 0.5rem;
}
.input-row input {
flex: 1;
}
/* Inputs genéricos */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.52);
border-radius: 0.375rem;
background-color: rgba(var(--swatch-menubg-black-color), 0.82);
color: rgb(var(--swatch-text-light));
font-family: var(--body-font);
font-size: 0.95rem;
outline: 0 solid rgb(var(--swatch-primary));
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
input:focus {
outline-width: 0;
box-shadow: 0 0 0 0.125em rgb(var(--swatch-primary));
border-color: rgb(var(--swatch-primary));
}
input::placeholder {
color: rgba(var(--swatch-text-tertiary-color), 0.52);
}
/* ===========================================================
8. BOTONES — Black Highlighter Style
=========================================================== */
.btn {
--wght: 500;
display: inline-flex;
position: relative;
z-index: 2;
align-items: center;
justify-content: center;
min-width: 5em;
padding: 0.7rem 1.4rem;
overflow: hidden;
transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
border: 0.0625rem solid rgba(var(--swatch-primary), 0.18);
outline: 0 solid rgb(var(--swatch-primary));
background-color: rgba(var(--ui-button-bg), 0.98);
box-shadow: 0 0 0 0 rgb(var(--ui-button-bg));
color: rgb(var(--ui-button-txt));
font-family: var(--ui-font);
font-size: 0.95rem;
font-weight: var(--wght);
border-radius: 0.375rem;
cursor: pointer;
white-space: nowrap;
}
.btn:hover, .btn:active {
--wght: 700;
border-color: transparent;
outline: 0 solid rgb(var(--swatch-primary));
background-color: rgb(var(--ui-button-hover-bg));
box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline));
color: rgb(var(--ui-button-hover-txt));
text-decoration: none;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
--wght: 600;
background-color: rgb(var(--swatch-primary-darkest));
color: rgb(var(--swatch-menutxt-light-color));
border-color: transparent;
}
.btn-primary:hover, .btn-primary:active {
background-color: rgb(var(--swatch-primary));
color: rgb(var(--swatch-menutxt-light-color));
}
.btn-secondary {
background-color: rgba(var(--swatch-menubg-black-color), 0.58);
color: rgb(var(--swatch-menutxt-general-color));
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.38);
}
.btn-secondary:hover, .btn-secondary:active {
background-color: rgb(var(--swatch-primary));
color: rgb(var(--swatch-menutxt-light-color));
border-color: transparent;
}
.btn-danger {
background-color: rgba(var(--danger-accent), 0.8);
color: rgb(var(--swatch-menutxt-light-color));
border-color: transparent;
}
.btn-danger:hover, .btn-danger:active {
background-color: rgb(var(--danger-accent));
color: rgb(var(--swatch-menutxt-light-color));
}
.btn-sm {
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
min-width: auto;
}
/* ===========================================================
9. SHORT URL RESULT BOX
=========================================================== */
.short-url {
display: flex;
align-items: center;
gap: 0.6rem;
background: rgba(var(--swatch-menubg-black-color), 0.58);
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.34);
border-radius: 0.375rem;
padding: 0.6rem 0.9rem;
margin-top: 1rem;
font-family: var(--mono-font);
font-size: 0.9rem;
}
.short-url a {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgb(var(--link-color));
}
/* ===========================================================
10. LINK ITEMS (Lista de links acortados)
=========================================================== */
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
}
.list-header h2 {
font-family: var(--title-font);
font-size: 1.1rem;
font-weight: 700;
color: rgb(var(--swatch-primary-darker));
}
.list-header span {
color: rgba(var(--swatch-text-tertiary-color), 0.6);
font-size: 0.85rem;
}
.empty {
text-align: center;
color: rgba(var(--swatch-text-tertiary-color), 0.5);
padding: 2rem 0;
font-size: 0.9rem;
}
.link-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.9rem;
background: rgba(var(--swatch-menubg-black-color), 0.46);
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.24);
border-radius: 0.375rem;
margin-bottom: 0.5rem;
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.link-item:hover {
border-color: rgba(var(--swatch-primary-darker), 0.3);
transform: translateY(-0.0625rem);
box-shadow: 0 0.75rem 1.4rem rgba(var(--swatch-menubg-black-color), 0.3);
}
.link-item .code {
color: rgb(var(--link-color));
font-family: var(--mono-font);
font-weight: 600;
min-width: 5rem;
font-size: 0.9rem;
}
.link-item .dest {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(var(--swatch-text-tertiary-color), 0.7);
font-size: 0.85rem;
}
.link-item .clicks {
color: rgba(var(--swatch-text-tertiary-color), 0.5);
font-size: 0.8rem;
min-width: 3rem;
text-align: right;
}
.link-item .actions {
display: flex;
gap: 0.3rem;
}
/* ===========================================================
11. TOAST NOTIFICATION
=========================================================== */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: rgba(var(--swatch-menubg-black-color), 0.96);
border: 0.0625rem solid rgba(var(--swatch-primary), 0.28);
color: rgb(var(--swatch-text-secondary-color));
padding: 0.7rem 1.4rem;
border-radius: 0.375rem;
font-size: 0.9rem;
font-family: var(--ui-font);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 100;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.toast.show {
opacity: 1;
}
.public-footer {
margin-top: 3rem;
padding-bottom: 2rem;
}
.public-footer__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.25);
}
.public-footer__inner p {
margin-top: 0.25rem;
color: rgba(var(--swatch-text-tertiary-color), 0.65);
font-size: 0.85rem;
}
.public-footer__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.8rem;
}
.public-footer__links a {
font-size: 0.85rem;
}
.consent-banner {
position: fixed;
right: 1rem;
bottom: 1rem;
left: 1rem;
z-index: 80;
}
.consent-banner__content {
max-width: 64rem;
margin: 0 auto;
padding: 1rem 1.1rem;
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.3);
border-radius: 0.5rem;
background: rgba(var(--swatch-menubg-color), 0.98);
box-shadow: 0 0.75rem 2rem rgba(var(--swatch-alternate-color), 0.18);
}
.consent-banner__content p {
color: rgba(var(--swatch-text-tertiary-color), 0.78);
font-size: 0.9rem;
}
.consent-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.9rem;
}
.consent-shortcut {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 85;
padding: 0.7rem 0.95rem;
border: 0.0625rem solid rgba(var(--swatch-primary), 0.25);
border-radius: 999px;
background: rgba(var(--swatch-menubg-color), 0.98);
box-shadow: 0 0.5rem 1.5rem rgba(var(--swatch-alternate-color), 0.16);
color: rgb(var(--swatch-primary-darker));
cursor: pointer;
font-family: var(--ui-font);
font-size: 0.82rem;
font-weight: 700;
}
.consent-shortcut:hover,
.consent-shortcut:active {
background: rgb(var(--swatch-primary));
color: rgb(var(--swatch-menutxt-light-color));
}
.consent-panel {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(var(--swatch-menubg-black-color), 0.45);
}
.consent-panel__card {
width: 100%;
max-width: 38rem;
margin-bottom: 0;
}
.consent-panel__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.consent-panel__header h2 {
margin-bottom: 0.2rem;
font-size: 1.1rem;
color: rgb(var(--swatch-primary-darker));
}
.consent-panel__header p {
color: rgba(var(--swatch-text-tertiary-color), 0.7);
font-size: 0.9rem;
}
.consent-option {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.9rem 1rem;
margin-bottom: 0.8rem;
border: 0.0625rem solid rgba(var(--swatch-tertiary-color), 0.25);
border-radius: 0.375rem;
background: rgba(var(--swatch-menubg-dark-color), 0.08);
}
.consent-option strong {
display: block;
margin-bottom: 0.2rem;
}
.consent-option p,
.consent-option span {
color: rgba(var(--swatch-text-tertiary-color), 0.72);
font-size: 0.85rem;
}
.consent-option input[type="checkbox"] {
width: 1.2rem;
height: 1.2rem;
flex: 0 0 auto;
}
.consent-option--locked {
cursor: default;
}
.consent-panel__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
}
/* ===========================================================
12. MOBILE / RESPONSIVE
=========================================================== */
@media only screen and (max-width: 56.25rem) {
/* Ajustar body background para mobile */
body {
background-size: 100% var(--header-height-on-mobile),
100% calc(var(--header-height-on-mobile) + var(--topbar-height-on-mobile)),
100% var(--background-gradient-distance);
}
/* Top-bar mobile */
.top-bar {
min-height: var(--topbar-height-on-mobile);
padding: 0 0.9rem 0 1rem;
background: var(--gradient-topmenu-mobile);
}
.top-bar-brand__mark {
min-width: 2.65rem;
height: 2.25rem;
padding: 0 0.55rem;
}
.top-bar-brand__title {
font-size: 0.88rem;
}
.top-bar-brand__meta {
display: none;
}
.top-bar-nav-shell {
display: none;
}
/* Mostrar sidebar toggle */
.sidebar-toggle {
display: flex;
}
.sidebar-overlay {
display: block;
}
/* Ajustes de contenido */
.container {
padding: 0 1rem;
margin: 1.25rem auto 2rem;
}
.site-header {
padding: 1.2rem 1rem 1.35rem;
}
.site-header .sub {
font-size: 0.92rem;
}
.card {
padding: 1.15rem;
}
.input-row {
flex-direction: column;
}
.hero-actions .btn,
.input-row .btn {
width: 100%;
}
#customInput,
#loginForm .btn,
#registerForm .btn {
width: 100% !important;
}
.link-item {
flex-wrap: wrap;
}
.link-item .code {
min-width: auto;
}
.link-item .clicks {
min-width: auto;
}
.public-footer__inner,
.consent-panel__header,
.consent-option {
flex-direction: column;
align-items: flex-start;
}
.list-header {
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
}
.public-footer__links {
justify-content: flex-start;
}
.consent-banner {
right: 0.75rem;
bottom: 0.75rem;
left: 0.75rem;
}
.consent-shortcut {
right: 0.75rem;
bottom: 0.75rem;
left: 0.75rem;
text-align: center;
}
}
/* Pantallas muy chicas */
@media only screen and (max-width: 20rem) {
body {
font-size: calc(var(--base-font-size) * (14 / 15));
}
}
/* ===========================================================
INSTRUCCIONES: HTML QUE TENÉS QUE AGREGAR
===========================================================
Para que esto funcione, necesitás agregar esta estructura
DENTRO del de tu página, ANTES del .container:
Y este JavaScript para el sidebar:
=========================================================== */