:root { --ora: 1px solid #f90; --black: 1px solid black; --red: 1px solid red; --pink: 1px solid pink; --blue: 1px solid blue; --green: 4px solid green; --wide-gap: 10vw; --content-gap: 26vw; --normal: calc(100vw - var(--content-gap)); --wide: calc(100vw - var(--wide-gap)); --arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2315402C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M8 7h9v9'/%3E%3C/svg%3E"); --calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm12-4v4M8 3v4m-4 4h16M7 14h.013m2.997 0h.005m2.995 0h.005m3 0h.005m-3.005 3h.005m-6.01 0h.005m2.995 0h.005'/%3E%3C/svg%3E"); --time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0m9 0-3-2m3-3v5'/%3E%3C/svg%3E"); --location:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18.5 9 17l-6 3V7l6-3 6 3 6-3v7.5M9 4v13m6-10v5.5m6.121 7.621a3 3 0 1 0-4.242 0c.418.419 1.125 1.045 2.121 1.879 1.051-.89 1.759-1.516 2.121-1.879zM19 18v.01'/%3E%3C/svg%3E"); --date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3'/%3E%3C/svg%3E"); --noevent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h9a2 2 0 0 1 2 2v9m-.184 3.839A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2V7a2 2 0 0 1 1.158-1.815M16 3v4M8 3v1m-4 7h7m4 0h5M3 3l18 18'/%3E%3C/svg%3E"); /* -------------------------------- FONTS -------------------------------- */ /* Font families */ --font-data: var(--wp--preset--font-family--data); --font-body: var(--wp--preset--font-family--header); /* @link https://utopia.fyi/type/calculator?c=520,16,1.2,1240,16,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* --text-xs: clamp(0.5628rem, 0.7895rem + -0.2926vw, 0.6944rem); --text-s: clamp(0.7502rem, 0.8934rem + -0.1848vw, 0.8333rem); --text-p: clamp(1rem, 1rem + 0vw, 1rem); --text-h4: clamp(1.2rem, 1.1039rem + 0.2956vw, 1.333rem); --text-h3: clamp(1.44rem, 1.1967rem + 0.7486vw, 1.7769rem); --text-h2: clamp(1.728rem, 1.2653rem + 1.4235vw, 2.3686rem); --text-h1: clamp(2.0736rem, 1.2909rem + 2.4083vw, 3.1573rem); --text-large: clamp(2.4883rem, 1.2458rem + 3.8231vw, 4.2087rem);*/ /* -------------------------------- LAYOUT -------------------------------- */ /* ESPACIO ENTRE COLUMNAS */ /* @link https://utopia.fyi/space/calculator?c=520,16,1.2,1240,19,1.333,5,2,&s=0.75|0.25,2|4|6|8|12,2xl-3xl|xl-2xl|l-xl&g=s,l,xl,12 */ /* --space-2xs: clamp(0.25rem, 0.2049rem + 0.1389vw, 0.3125rem); --space-xs: clamp(0.75rem, 0.6597rem + 0.2778vw, 0.875rem); --space-s: clamp(1rem, 0.8646rem + 0.4167vw, 1.1875rem); --space-m: clamp(2rem, 1.7292rem + 0.8333vw, 2.375rem); --space-l: clamp(4rem, 3.4583rem + 1.6667vw, 4.75rem); --space-xl: clamp(6rem, 5.1875rem + 2.5vw, 7.125rem); --space-2xl: clamp(8rem, 6.9167rem + 3.3333vw, 9.5rem); --space-3xl: clamp(12rem, 10.375rem + 5vw, 14.25rem); --space-2xl-3xl: clamp(8rem, 3.4861rem + 13.8889vw, 14.25rem); --space-xl-2xl: clamp(6rem, 3.4722rem + 7.7778vw, 9.5rem); --space-l-xl: clamp(4rem, 1.7431rem + 6.9444vw, 7.125rem);*/ --fluid-large: clamp(3rem, -0.5135rem + 14.0541vw, 9.5rem); --flow-space: var(--wp--preset--spacing--s); --ch-6: 6ch; --ch-12: 12ch; --ch-14: 14ch; --ch-20: 20ch; --ch-30: 30ch; --ch-35: 35ch; --ch-45: 45ch; --ch-65: 65ch; /* -------------------------------- SHADOWS -------------------------------- */ --shadow-s: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; --shadow-m: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.21); --shadow-brand: 0 8px 14px var(--wp--preset--color--accent-60); --shadow-color: 220 3% 15%; --shadow-strength: 1%; --shadow-1: 0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%)); --shadow-2: 0 3px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 7px 14px -5px hsl(220 3% 15% / calc(1% + 5%)); --shadow-3: 0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 1px 2px -5px hsl(220 3% 15% / calc(1% + 2%)), 0 2px 5px -5px hsl(220 3% 15% / calc(1% + 4%)), 0 4px 12px -5px hsl(220 3% 15% / calc(1% + 5%)), 0 12px 15px -5px hsl(220 3% 15% / calc(1% + 7%)); --shadow-4: 0 -2px 5px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 1px 1px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 2px 2px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 5px 5px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 9px 9px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 16px 16px -2px hsl(220 3% 15% / calc(1% + 6%)); --shadow-5: 0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 2px 1px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 5px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 10px 10px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 20px 20px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 40px 40px -2px hsl(220 3% 15% / calc(1% + 7%)); --shadow-6: 0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 3px 2px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 7px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 12px 10px -2px hsl(220 3% 15% / calc(1% + 4%)), 0 22px 18px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 41px 33px -2px hsl(220 3% 15% / calc(1% + 6%)), 0 100px 80px -2px hsl(220 3% 15% / calc(1% + 7%)); --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); /* -------------------------------- ICONS & RADIUS -------------------------------- */ --radius-4: 4px; --radius-8: 8px; --radius-16: 16px; --radius-30:30px; --icon-12: 12px; --icon-16: 16px; --icon-20: 20px; --icon-24: 24px; --icon-36: 36px; --icon-48: 48px; --icon-64: 64px; --cubic-01:cubic-bezier(0.45,0.05,0.55,0.95); --cubic-02:cubic-bezier(0.79,0.14,0.15,0.86); --cubic-03:cubic-bezier(0.25,0.46,0.45,0.94); } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 820px) { :root { --wide-gap: 8vw; --content-gap: 16vw; } } @media only screen and (max-width: 512px) { :root { } }