/* ==========================================================================
Base Styles
========================================================================== */
body {
font-family: var(--font-primary);
font-size: var(--text-xs);
font-weight: var(--weight-normal);
color: var(--text-dark-gray);
background-color: var(--bg-white);
line-height: 1.6;
position: relative;
overflow-x: hidden;
}
/* ==========================================================================
Base Styles
========================================================================== */
body {
font-family: var(--font-primary);
font-size: var(--text-xs);
font-weight: var(--weight-normal);
color: var(--text-dark-gray);
background-color: var(--bg-white);
line-height: 1.6;
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-size:
800px auto,
600px auto,
60% auto,
700px auto,
700px auto,
700px auto;
background-position:
101% 132%,
109% 293%,
100% 8%,
-35% 185%,
-80% 42%,
-80% 42%;
/* Para que jamás te vuelva a aparecer repeat-y por otro CSS */
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat !important;
opacity: 1;
h1, h2, h3, h4, h5, h6 {
font-weight: var(--weight-bold);
line-height: 1.2;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-md); }
.text-orange { color: var(--primary-orange); }
.text-gray { color: var(--text-gray); }
.bg-cream { background-color: var(--bg-cream); }
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-size: 800px auto, 600px auto, 780px auto, 700px auto, 700px auto;
background-position: 140% 195%, 117% 668%, 122% -3%, -58% -146%, -80% 102%;
background-repeat: no-repeat;
opacity: 1.0;
pointer-events: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--weight-bold);
line-height: 1.2;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-md); }
.text-orange { color: var(--primary-orange); }
.text-gray { color: var(--text-gray); }
.bg-cream { background-color: var(--bg-cream); }
@media (max-width: 1024px){ body{ --bg-scale: .9; } }
@media (max-width: 768px){ body{ --bg-scale: .75; } }
@media (max-width: 480px){ body{ --bg-scale: .65; } }
@media (max-width: 520px){
body::before{
/* por si alguna regla lo pisa */
background-repeat: no-repeat !important;
/* mismo orden que tus background-image (1..5) */
background-position:
calc(100% + 220px) 132%, /* 1: naranja derecha */
calc(100% + 260px) 293%, /* 2: celeste derecha */
calc(100% + 240px) 8%, /* 3: naranja arriba derecha */
calc(0% - 220px) 215%, /* 4: celeste izquierda */
calc(0% - 260px) 42%; /* 5: naranja izquierda */
}
}
@media (min-width: 1800px){
body::before{
background-position:
98% 132%,
105% 293%,
100% 8%,
-5% -135%,
-70% 42%;
}
}
/* =========================
Typography overrides (global)
========================= */
html { font-size: 16px; }
body{
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--weight-normal);
font-family: var(--font-primary);
}
/* Form elements inherit typography */
input, button, textarea, select{
font: inherit;
}
/* Headings: consistent hierarchy */
h1, h2, h3, h4, h5, h6{
font-family: var(--font-primary);
color: var(--text-dark-gray);
}
h1{ font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--weight-bold); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--weight-bold); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
/* Default paragraphs */
p{ font-size: var(--fs-body); line-height: var(--lh-body); }