/* Olympus Legal - Direccion "Olympus Oro sobre Negro" * * Aqui la prioridad no es el impacto sino que se pueda leer: son documentos * largos que la gente consulta buscando un dato concreto. Por eso medida corta, * interlineado amplio, jerarquia muy marcada e indice para saltar. * Sin fotos y sin animaciones: no aportan nada a un texto legal. */ .odt-l { --odt-bg: #101010; --odt-bg-warm: #14120e; --odt-surface: #191817; --odt-ink: #ffffff; --odt-muted: #a6a29b; --odt-accent: #b59953; --odt-support: #e7df9f; --odt-line: #2e2b26; font-family: "Barlow", sans-serif; color: var(--odt-muted); background: linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 40%, var(--odt-bg) 100%); padding: 0 0 88px; } .odt-l *, .odt-l *::before, .odt-l *::after { box-sizing: border-box; } .odt-l .odt-l__wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* Cabecera --------------------------------------------------------------- */ .odt-l .odt-l__hero { padding: 72px 0 36px; margin-bottom: 44px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.15) 55%, rgba(181, 153, 83, 0) 100%) 1; } .odt-l .odt-l__titulo { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(36px, 5.2vw, 62px); line-height: 1.04; text-transform: uppercase; color: var(--odt-ink); margin: 0 0 12px; } .odt-l .odt-l__fecha { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--odt-accent); margin: 0; } /* Indice y texto --------------------------------------------------------- */ .odt-l .odt-l__cuerpo { display: grid; /* 280px en vez de 260: con la columna mas ancha bastantes entradas dejan de partirse en dos lineas y el indice entero cabe en mas pantallas. */ grid-template-columns: 280px 1fr; gap: 52px; align-items: start; } /* El tema lleva una cabecera que se vuelve fija al desplazar. `cabecera.js` mide su altura y la publica en ; el 110px del `var()` es el valor de reserva mientras tanto. Sin esto, el indice quedaba por debajo de ella y sus primeras entradas no se veian nunca. Ojo: la variable NO se declara aqui a proposito. Si se declarara en `.odt-l`, ese valor local ganaria al que escribe el script en y la medicion no serviria de nada. */ .odt-l { --odt-aire: 20px; } .odt-l .odt-l__indice { position: sticky; top: calc(var(--odt-cabecera, 110px) + var(--odt-aire)); padding: 18px 18px 6px; background: var(--odt-surface); border: 1px solid var(--odt-line); border-radius: 10px; /* Altura disponible: la pantalla menos la cabecera y los margenes. La politica de privacidad tiene diecisiete entradas y en una pantalla corta no caben; en ese caso el indice se desplaza dentro de su caja en lugar de recortarse, y `indice.js` va acercando la entrada del apartado que se esta leyendo para que nunca haya que buscarla a mano. */ max-height: calc(100vh - var(--odt-cabecera, 110px) - (var(--odt-aire) * 2)); max-height: calc(100dvh - var(--odt-cabecera, 110px) - (var(--odt-aire) * 2)); overflow-y: auto; overscroll-behavior: contain; /* El suavizado lo decide `indice.js`, que si respeta «reducir movimiento». Puesto aqui en CSS afectaria tambien a cualquier ajuste directo. */ } /* Barra de desplazamiento propia: la del sistema es gris y ancha, y sobre fondo oscuro apenas se ve, asi que no avisaba de que el indice continuaba. */ .odt-l .odt-l__indice { scrollbar-width: thin; scrollbar-color: var(--odt-accent) transparent; } .odt-l .odt-l__indice::-webkit-scrollbar { width: 6px; } .odt-l .odt-l__indice::-webkit-scrollbar-track { background: transparent; } .odt-l .odt-l__indice::-webkit-scrollbar-thumb { background: rgba(181, 153, 83, 0.55); border-radius: 3px; } .odt-l .odt-l__indice::-webkit-scrollbar-thumb:hover { background: var(--odt-accent); } /* Aviso de que queda indice por debajo: las ultimas lineas se desvanecen en vez de cortarse en seco. `indice.js` quita la marca al llegar al final. Se hace con un pseudoelemento pegajoso para que acompane al desplazamiento interno. */ .odt-l .odt-l__indice::after { content: ""; display: block; position: sticky; bottom: -6px; height: 34px; margin-top: -34px; pointer-events: none; background: linear-gradient(180deg, rgba(25, 24, 23, 0) 0%, var(--odt-surface) 78%); opacity: 0; transition: opacity 0.25s ease; } .odt-l .odt-l__indice.odt-l__indice--hay-mas::after { opacity: 1; } .odt-l .odt-l__indice-titulo { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--odt-accent); margin: 0 0 14px; } .odt-l .odt-l__indice-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* Antes 10px. Con diecisiete entradas cada pixel de separacion son diecisiete de altura total, y el indice se salia de la pantalla. */ gap: 6px; counter-reset: odt-sec; padding-bottom: 12px; } .odt-l .odt-l__indice-lista li { counter-increment: odt-sec; } .odt-l .odt-l__indice-lista a { display: block; font-size: 13.5px; line-height: 1.35; color: var(--odt-muted); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } /* Apartados principales: mas peso, para distinguirlos de sus subapartados. */ .odt-l .odt-l__indice-lista > li:not(.odt-l__indice-sub) > a { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--odt-ink); } .odt-l .odt-l__indice-lista > li.odt-l__indice-sub { padding-left: 14px; border-left: 1px solid var(--odt-line); margin-left: 2px; } /* Un poco de aire antes de cada apartado nuevo, salvo el primero. */ .odt-l .odt-l__indice-lista > li:not(.odt-l__indice-sub) + li:not(.odt-l__indice-sub), .odt-l .odt-l__indice-lista > li.odt-l__indice-sub + li:not(.odt-l__indice-sub) { margin-top: 8px; } .odt-l .odt-l__indice-lista a:hover, .odt-l .odt-l__indice-lista a:focus { color: var(--odt-support); } /* Apartado que se esta leyendo. Lo marca `indice.js`. Sirve de orientacion en un documento largo y, sobre todo, hace evidente que el indice sigue el texto. */ .odt-l .odt-l__indice-lista a.odt-l__actual { color: var(--odt-support); } .odt-l .odt-l__indice-lista > li.odt-l__indice-sub:has(a.odt-l__actual) { border-left-color: var(--odt-accent); } /* Cuerpo del documento --------------------------------------------------- */ .odt-l .odt-l__texto { /* Medida corta: leer una linea de 140 caracteres cansa y se pierde el hilo. */ max-width: 68ch; font-size: 16.5px; line-height: 1.8; color: var(--odt-muted); } /* El titulo y la URL que estos documentos repiten arriba sobran: ya estan en la cabecera de la pagina. Los marca el PHP con esta clase. */ .odt-l .odt-l__texto .odt-l__oculto { display: none; } .odt-l .odt-l__texto h2, .odt-l .odt-l__texto h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.14; letter-spacing: 0.01em; text-transform: uppercase; color: var(--odt-ink); margin: 52px 0 16px; padding-top: 22px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(181, 153, 83, 0.7) 0%, rgba(181, 153, 83, 0.12) 55%, rgba(181, 153, 83, 0) 100%) 1; /* Para que el ancla no quede pegada al borde superior al saltar. */ scroll-margin-top: calc(var(--odt-cabecera, 110px) + var(--odt-aire)); } .odt-l .odt-l__texto h4 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: 0.02em; color: var(--odt-accent); margin: 34px 0 10px; scroll-margin-top: calc(var(--odt-cabecera, 110px) + var(--odt-aire)); } .odt-l .odt-l__texto p { margin: 0 0 18px; } .odt-l .odt-l__texto strong, .odt-l .odt-l__texto b { color: var(--odt-ink); font-weight: 600; } .odt-l .odt-l__texto ul, .odt-l .odt-l__texto ol { margin: 0 0 20px; padding-left: 22px; } .odt-l .odt-l__texto li { margin-bottom: 9px; } .odt-l .odt-l__texto li::marker { color: var(--odt-accent); } .odt-l .odt-l__texto a { color: var(--odt-support); text-decoration: none; border-bottom: 1px solid rgba(181, 153, 83, 0.45); /* Una URL larga no debe desbordar la columna en movil. */ overflow-wrap: anywhere; } .odt-l .odt-l__texto a:hover, .odt-l .odt-l__texto a:focus { color: var(--odt-support); border-bottom-color: var(--odt-support); } .odt-l .odt-l__texto a:focus-visible, .odt-l .odt-l__indice-lista a:focus-visible { outline: 2px solid var(--odt-support); outline-offset: 3px; border-radius: 2px; } /* Los datos identificativos vienen en 
: hay que dejarlos legibles y que
   no rompan el ancho. */
.odt-l .odt-l__texto pre {
	font-family: "Barlow", sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--odt-muted);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	margin: 0 0 20px;
	padding: 18px 20px;
	background: var(--odt-surface);
	border: 1px solid var(--odt-line);
	border-radius: 10px;
}

.odt-l .odt-l__texto table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.odt-l .odt-l__texto th,
.odt-l .odt-l__texto td {
	text-align: left;
	vertical-align: top;
	padding: 11px 14px;
	border-bottom: 1px solid var(--odt-line);
}

.odt-l .odt-l__texto th {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odt-accent);
}

.odt-l .odt-l__texto td {
	color: var(--odt-muted);
}

/* Tableta ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.odt-l .odt-l__cuerpo {
		grid-template-columns: 220px 1fr;
		gap: 36px;
	}
}

/* Movil ------------------------------------------------------------------ */

@media (max-width: 820px) {
	.odt-l {
		padding-bottom: 60px;
	}

	.odt-l .odt-l__wrap {
		padding: 0 16px;
	}

	.odt-l .odt-l__hero {
		padding: 48px 0 26px;
		margin-bottom: 30px;
	}

	.odt-l .odt-l__cuerpo {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* En movil el indice va arriba y deja de ser pegajoso: ocuparia media
	   pantalla mientras se lee. */
	.odt-l .odt-l__indice {
		position: static;
	}

	.odt-l .odt-l__texto {
		max-width: none;
		font-size: 16px;
	}

	.odt-l .odt-l__texto h2,
	.odt-l .odt-l__texto h3 {
		margin-top: 38px;
	}

	/* Una tabla ancha se desplaza dentro de su caja, nunca rompe la pagina. */
	.odt-l .odt-l__texto table {
		display: block;
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.odt-l .odt-l__indice-lista a,
	.odt-l .odt-l__texto a {
		transition: none;
	}
}