/* ALLIN MAKI · Peruvian ornament
Generated by peru/make-css.js — edit the geometry there, not here.
Four section dividers and four standalone marks, each drawn from a real Andean
tradition. Every one is a CSS mask over a token colour, so:
- it is vector, and stays crisp at any size or pixel density
- it repeats seamlessly, at any container width
- it recolours with the page: change --peru-ink, not the asset
Use:
Dial the presence with --peru-scale (0.75 quiet, 1 default, 1.4 stated)
and --peru-fade (mask the ends into the page, 0 for edge to edge).
*/
.peru-divider {
--peru-ink: var(--accent, #E4B46F);
--peru-scale: 1;
--peru-fade: 18%;
--peru-max: var(--container, 1360px);
width: 100%;
max-width: var(--peru-max);
margin-inline: auto;
background-color: var(--peru-ink);
-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
-webkit-mask-position: center bottom; mask-position: center bottom;
}
/* Two mask layers, intersected: the tile, and a gradient that fades both ends out
so the band never runs hard into the page gutter. */
.peru-divider {
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.peru-mark {
--peru-ink: var(--accent, #E4B46F);
--peru-scale: 1;
display: inline-block;
vertical-align: middle;
background-color: var(--peru-ink);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
@media (prefers-reduced-motion: no-preference) {
.peru-divider { transition: opacity var(--t-hover, .3s); }
}
/* 1 · Chakana */
.peru-divider--chakana {
height: calc(21px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2221%22%20viewBox%3D%220%200%2018%2021%22%3E%3Cpath%20d%3D%22M6%2C0L12%2C0L12%2C3L15%2C3L15%2C6L18%2C6L18%2C12L15%2C12L15%2C15L12%2C15L12%2C18L6%2C18L6%2C15L3%2C15L3%2C12L0%2C12L0%2C6L3%2C6L3%2C3L6%2C3ZM7.5%2C7.5H10.5V10.5H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20y%3D%2220%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2221%22%20viewBox%3D%220%200%2018%2021%22%3E%3Cpath%20d%3D%22M6%2C0L12%2C0L12%2C3L15%2C3L15%2C6L18%2C6L18%2C12L15%2C12L15%2C15L12%2C15L12%2C18L6%2C18L6%2C15L3%2C15L3%2C12L0%2C12L0%2C6L3%2C6L3%2C3L6%2C3ZM7.5%2C7.5H10.5V10.5H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20y%3D%2220%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
-webkit-mask-size: calc(18px * var(--peru-scale)) calc(21px * var(--peru-scale)), 100% 100%;
mask-size: calc(18px * var(--peru-scale)) calc(21px * var(--peru-scale)), 100% 100%;
-webkit-mask-repeat: repeat-x, no-repeat;
mask-repeat: repeat-x, no-repeat;
}
/* 2 · Escalonado */
.peru-divider--escalonado {
height: calc(15px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2215%22%20viewBox%3D%220%200%2024%2015%22%3E%3Cpath%20d%3D%22M0%2C12V10H3V8H6V6H9V4H12V6H15V8H18V10H21V12H24%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%2F%3E%3Crect%20y%3D%2214%22%20width%3D%2224%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2215%22%20viewBox%3D%220%200%2024%2015%22%3E%3Cpath%20d%3D%22M0%2C12V10H3V8H6V6H9V4H12V6H15V8H18V10H21V12H24%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%2F%3E%3Crect%20y%3D%2214%22%20width%3D%2224%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
-webkit-mask-size: calc(24px * var(--peru-scale)) calc(15px * var(--peru-scale)), 100% 100%;
mask-size: calc(24px * var(--peru-scale)) calc(15px * var(--peru-scale)), 100% 100%;
-webkit-mask-repeat: repeat-x, no-repeat;
mask-repeat: repeat-x, no-repeat;
}
/* 3 · Condor */
.peru-divider--condor {
height: calc(26px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2226%22%20viewBox%3D%220%200%2030%2026%22%3E%3Crect%20width%3D%2230%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2225%22%20width%3D%2230%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%223%22%20width%3D%221.4%22%20height%3D%2220%22%2F%3E%3Cpath%20d%3D%22M5%2C6L7.5%2C2H9L6.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2C6L11%2C2H12.5L10%2C6Z%22%2F%3E%3Cpath%20d%3D%22M12%2C6L14.5%2C2H16L13.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M5%2C6H15V9H19L23%2C10.5L19%2C13H15V20H5Z%20M7.5%2C9H11.5V13H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2221%22%20width%3D%2210%22%20height%3D%221.2%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2222.8%22%20width%3D%227%22%20height%3D%221.2%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2226%22%20viewBox%3D%220%200%2030%2026%22%3E%3Crect%20width%3D%2230%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2225%22%20width%3D%2230%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%223%22%20width%3D%221.4%22%20height%3D%2220%22%2F%3E%3Cpath%20d%3D%22M5%2C6L7.5%2C2H9L6.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2C6L11%2C2H12.5L10%2C6Z%22%2F%3E%3Cpath%20d%3D%22M12%2C6L14.5%2C2H16L13.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M5%2C6H15V9H19L23%2C10.5L19%2C13H15V20H5Z%20M7.5%2C9H11.5V13H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2221%22%20width%3D%2210%22%20height%3D%221.2%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2222.8%22%20width%3D%227%22%20height%3D%221.2%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
-webkit-mask-size: calc(30px * var(--peru-scale)) calc(26px * var(--peru-scale)), 100% 100%;
mask-size: calc(30px * var(--peru-scale)) calc(26px * var(--peru-scale)), 100% 100%;
-webkit-mask-repeat: repeat-x, no-repeat;
mask-repeat: repeat-x, no-repeat;
}
/* 4 · Pallay */
.peru-divider--pallay {
height: calc(20px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20y%3D%220%22%20width%3D%2220%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2219%22%20width%3D%2220%22%20height%3D%221%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M10%2C3L20%2C10L10%2C17L0%2C10Z%22%2F%3E%3Cpath%20d%3D%22M10%2C6L16%2C10L10%2C14L4%2C10Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M10%2C8.6L11.6%2C10L10%2C11.4L8.4%2C10Z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20y%3D%220%22%20width%3D%2220%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2219%22%20width%3D%2220%22%20height%3D%221%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M10%2C3L20%2C10L10%2C17L0%2C10Z%22%2F%3E%3Cpath%20d%3D%22M10%2C6L16%2C10L10%2C14L4%2C10Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M10%2C8.6L11.6%2C10L10%2C11.4L8.4%2C10Z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, transparent 0, #000 var(--peru-fade), #000 calc(100% - var(--peru-fade)), transparent 100%);
-webkit-mask-size: calc(20px * var(--peru-scale)) calc(20px * var(--peru-scale)), 100% 100%;
mask-size: calc(20px * var(--peru-scale)) calc(20px * var(--peru-scale)), 100% 100%;
-webkit-mask-repeat: repeat-x, no-repeat;
mask-repeat: repeat-x, no-repeat;
}
.peru-mark--chakana {
width: calc(18px * var(--peru-scale));
height: calc(18px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M6%2C0H12V3H15V6H18V12H15V15H12V18H6V15H3V12H0V6H3V3H6Z%20M7.5%2C7.5H10.5V10.5H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M6%2C0H12V3H15V6H18V12H15V15H12V18H6V15H3V12H0V6H3V3H6Z%20M7.5%2C7.5H10.5V10.5H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}
.peru-mark--escalonado {
width: calc(18px * var(--peru-scale));
height: calc(18px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M2%2C16H16V2H5V13H13V6H8V10%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M2%2C16H16V2H5V13H13V6H8V10%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
}
.peru-mark--condor {
width: calc(24px * var(--peru-scale));
height: calc(24px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2C6L7.5%2C2H9L6.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2C6L11%2C2H12.5L10%2C6Z%22%2F%3E%3Cpath%20d%3D%22M12%2C6L14.5%2C2H16L13.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M5%2C6H15V9H19L23%2C10.5L19%2C13H15V20H5Z%20M7.5%2C9H11.5V13H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2221%22%20width%3D%2210%22%20height%3D%221.2%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2222.8%22%20width%3D%227%22%20height%3D%221.2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2C6L7.5%2C2H9L6.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2C6L11%2C2H12.5L10%2C6Z%22%2F%3E%3Cpath%20d%3D%22M12%2C6L14.5%2C2H16L13.5%2C6Z%22%2F%3E%3Cpath%20d%3D%22M5%2C6H15V9H19L23%2C10.5L19%2C13H15V20H5Z%20M7.5%2C9H11.5V13H7.5Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2221%22%20width%3D%2210%22%20height%3D%221.2%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2222.8%22%20width%3D%227%22%20height%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
}
.peru-mark--pallay {
width: calc(20px * var(--peru-scale));
height: calc(20px * var(--peru-scale));
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M10%2C1L19%2C10L10%2C19L1%2C10Z%22%2F%3E%3Cpath%20d%3D%22M10%2C5L15%2C10L10%2C15L5%2C10Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M10%2C8L12%2C10L10%2C12L8%2C10Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M10%2C1L19%2C10L10%2C19L1%2C10Z%22%2F%3E%3Cpath%20d%3D%22M10%2C5L15%2C10L10%2C15L5%2C10Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M10%2C8L12%2C10L10%2C12L8%2C10Z%22%2F%3E%3C%2Fsvg%3E");
}