: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; --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"); --vr:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/%3E%3Cpath d="M14 12h1.5a1.5 1.5 0 0 0 0-3H14v6m3 0-2-3M7 9l2 6 2-6"/%3E%3C/svg%3E'); --video: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%204v16l13-8z%22/%3E%3C/svg%3E"); /* -------------------------------- FONTS -------------------------------- */ /* Font families */ /*--wp--preset--font-family--poppins: "Poppins", sans-serif; --wp--preset--font-family--forma-djr-display: "Forma DJR Display", sans-serif; --wp--preset--font-family--forma-djr-micro: "Forma DJR Micro", sans-serif; --wp--preset--font-family--forma-djr-text: "Forma DJR Text", sans-serif;*/ /* line-height */ --content-gap: 20vw; --wp--preset--font-family--body: var(--wp--preset--font-family--forma-djr-text); --wp--preset--font-family--header: var(--wp--preset--font-family--forma-djr-display); /* Fonts Clamp: */ /* -------------------------------- LAYOUT -------------------------------- */ --space-unit: 1em; --screen: 84vw; --screen-gap: 10vw; /* ESPACIO ENTRE COLUMNAS */ /* --space-xxxs: clamp(0.25rem, calc(0.19rem + 0.17vw), 0.31rem); --space-xxs: clamp(0.50rem, calc(0.39rem + 0.33vw), 0.63rem); --space-xs: clamp(0.75rem, calc(0.64rem + 0.33vw), 0.88rem); --space-s: clamp(1.00rem, calc(0.83rem + 0.50vw), 1.19rem); --space-m: clamp(1.50rem, calc(1.22rem + 0.83vw), 1.81rem); --space-l: clamp(2.00rem, calc(1.66rem + 1.00vw), 2.38rem); --space-xl: clamp(4.00rem, calc(3.33rem + 2.00vw), 4.75rem); --space-xxl: clamp(6.00rem, calc(4.99rem + 3.00vw), 7.13rem); --space-xxxl: clamp(8.00rem, calc(6.65rem + 4.00vw), 9.50rem); --space-large: clamp(10.00rem, calc(8.31rem + 5.00vw), 11.88rem); --space-huge: clamp(16.00rem, calc(13.30rem + 8.00vw), 19.00rem); --space-new: clamp(7.00rem, calc(1.90rem + 24.00vw), 19.00rem); https://utopia.fyi/space/calculator/?c=620,16,1.2,1240,19,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|10,m-3xl|m-2xl|2xl-4xl&g=s,l,xl,12 --space-m-2xl: clamp(1.5rem, -1.75rem + 8.3871vw, 4.75rem); --space-m-3xl: clamp(1.5rem, -4.125rem + 14.5161vw, 7.125rem); --space-2xl-4xl: clamp(4rem, -3.875rem + 20.3226vw, 11.875rem); */ --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) { :root { --wide-gap:8vw; --content-gap:10vw; --wp--style--global--content-size:calc(100% - var(--content-gap))!important; --wp--style--global--wide-size:calc(100% - var(--wide-gap))!important; } } @media only screen and (max-width: 1024px) { :root { --wide-gap:6vw; --content-gap:12vw; } }