/* * TEMA DEAFORM * Realizzato da dal team di Arkys - Digital Marketing (2023) * * Il seguente file contiene le variabili css del layout del sito di Deaform. * Dipendenze: nessuna. * - deaform-fonts ( /assets/css/fonts.css ) */ :root { /* ---------------------------------------------------- * COLORS * ---------------------------------------------------- */ /* ----- Gray ----- */ --df-e-color-Gray-100: var(--e-global-color-4435702, #040404); --df-e-color-Gray-90: var(--e-global-color-ea86779, #222222); --df-e-color-Gray-80: var(--e-global-color-bbd64d3, #404040); --df-e-color-Gray-70: var(--e-global-color-f7de0cb, #5E5E5E); --df-e-color-Gray-60: var(--e-global-color-a1fd15f, #7E7E7E); --df-e-color-Gray-50: var(--e-global-color-0b003e9, #9C9C9C); --df-e-color-Gray-40: var(--e-global-color-5b8467c, #BABABA); --df-e-color-Gray-30: var(--e-global-color-087df6e, #DBDBDB); --df-e-color-Gray-25: var(--e-global-color-17ed872, #E5E5E5); --df-e-color-Gray-20: var(--e-global-color-8eb6107, #EFEFEF); --df-e-color-Gray-10: var(--e-global-color-ecfe0dd, #F9F9F9); --df-e-color-Gray-0: var(--e-global-color-12edd2b, #FFFFFF); /* ----- Neutral ----- */ --df-e-color-Neutral-100: var(--e-global-color-97e5605, #181B31); --df-e-color-Neutral-90: var(--e-global-color-8ced24d, #36394F); --df-e-color-Neutral-80: var(--e-global-color-ce868e8, #54576D); --df-e-color-Neutral-70: var(--e-global-color-d8d43dc, #72758B); --df-e-color-Neutral-60: var(--e-global-color-4c1e772, #9093A9); --df-e-color-Neutral-50: var(--e-global-color-57fa9a1, #AEB1C7); --df-e-color-Neutral-40: var(--e-global-color-79fb810, #CCCFE5); --df-e-color-Neutral-30: var(--e-global-color-1b512c8, #EAEDFF); --df-e-color-Neutral-20: var(--e-global-color-22f9a37, #F4F7FF); /* ----- Primary ----- */ --df-e-color-Primary-100: var(--e-global-color-83329ba, #000024); --df-e-color-Primary-90: var(--e-global-color-55a3745, #000042); --df-e-color-Primary-80: var(--e-global-color-accbd11, #001060); --df-e-color-Primary-70: var(--e-global-color-0604bdd, #002E7E); --df-e-color-Primary-60: var(--e-global-color-c9df072, #1C4C9C); --df-e-color-Primary-50: var(--e-global-color-ce963fd, #3A6ABA); --df-e-color-Primary-40: var(--e-global-color-6e7bf39, #5888D8); --df-e-color-Primary-30: var(--e-global-color-17f824f, #76A6F6); --df-e-color-Primary-20: var(--e-global-color-f3e98e6, #94C4FF); --df-e-color-Primary-10: var(--e-global-color-638eaa5, #B2E2FF); --df-e-color-Primary-0: var(--e-global-color-c31d38b, #BCECFF); /* ----- Secondary ----- */ --df-e-color-Secondary-100: var(--e-global-color-6f140c8, #001759); --df-e-color-Secondary-90: var(--e-global-color-fa9b823, #003577); --df-e-color-Secondary-80: var(--e-global-color-4b939da, #005395); --df-e-color-Secondary-70: var(--e-global-color-4c61bec, #0071B3); --df-e-color-Secondary-60: var(--e-global-color-ad88332, #008FD1); --df-e-color-Secondary-50: var(--e-global-color-1de673f, #01ADEF); --df-e-color-Secondary-40: var(--e-global-color-e05edf6, #1FCBFF); /* ----- Accent ----- */ --df-e-color-Accent-100: var(--e-global-color-4f54715, #590000); --df-e-color-Accent-90: var(--e-global-color-a9d961d, #770000); --df-e-color-Accent-80: var(--e-global-color-00dedce, #950000); --df-e-color-Accent-70: var(--e-global-color-703f45e, #B30400); --df-e-color-Accent-60: var(--e-global-color-1c1c610, #D12219); --df-e-color-Accent-50: var(--e-global-color-7bb71f8, #EF4037); --df-e-color-Accent-40: var(--e-global-color-e1d4115, #FF5E55); --df-e-color-Accent-30: var(--e-global-color-20c8ec1, #FF7C73); --df-e-color-Accent-20: var(--e-global-color-d18bb2a, #FF9A91); --df-e-color-Accent-10: var(--e-global-color-c463306, #FFB8AF); --df-e-color-Accent-0: var(--e-global-color-17937ab, #FFD6CD); /* ---------------------------------------------------- * TYPOGRAPHY (Fluid Typography) * ---------------------------------------------------- */ --df-scaler: 10vw; --df-ratio-font_size: 4/5; /* rapporto min/max font-size */ /* ----- Headings----- */ --df-font_family-h: Jost, "Roboto", sans-serif; --df-font_style-h: normal; --df-line_height-h: 100%; /* ----- h1 ----- */ --df-font_family-h1: var(--e-global-typography-93a1c93-font-family, var(--df-font_family-h)); --df-font_size-h1-max: var(--e-global-typography-93a1c93-font-size, 48px); --df-font_weight-h1: var(--e-global-typography-93a1c93-font-weight, 600); --df-text_transform-h1: var(--e-global-typography-93a1c93-text-transform, normal); --df-font_style-h1: var(--e-global-typography-93a1c93-font-style, normal); --df-text_decoration-h1: var(--e-global-typography-93a1c93-text-decoration, none); --df-line_height-h1: var(--e-global-typography-93a1c93-line-height, var(--df-line_height-h)); --df-letter_spacing-h1: var(--e-global-typography-93a1c93-letter-spacing, 0); --df-word_spacing-h1: var(--e-global-typography-93a1c93-word-spacing, 0); --df-font_size-h1-min: calc( var(--df-font_size-h1-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h1: clamp( var(--df-font_size-h1-min), var(--df-scaler), var(--df-font_size-h1-max)); --df-color-h1: var(--df-e-color-gray-50); /* ----- h2 ----- */ --df-font_family-h2: var(--e-global-typography-1ebaeac-font-family, var(--df-font_family-h)); --df-font_size-h2-max: var(--e-global-typography-1ebaeac-font-size, 37px); --df-font_weight-h2: var(--e-global-typography-1ebaeac-font-weight, 500); --df-text_transform-h2: var(--e-global-typography-1ebaeac-text-transform, normal); --df-font_style-h2: var(--e-global-typography-1ebaeac-font-style, normal); --df-text_decoration-h2: var(--e-global-typography-1ebaeac-text-decoration, none); --df-line_height-h2: var(--e-global-typography-1ebaeac-line-height, var(--df-line_height-h)); --df-letter_spacing-h2: var(--e-global-typography-1ebaeac-letter-spacing, 0); --df-word_spacing-h2: var(--e-global-typography-1ebaeac-word-spacing, 0); --df-font_size-h2-min: calc( var(--df-font_size-h2-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h2: clamp( var(--df-font_size-h2-min), var(--df-scaler), var(--df-font_size-h2-max)); --df-color-h2: var(--df-e-color-gray-50); /* ----- h3 ----- */ --df-font_family-h3: var(--e-global-typography-1dd194b-font-family, var(--df-font_family-h)); --df-font_size-h3-max: var(--e-global-typography-1dd194b-font-size, 28px); --df-font_weight-h3: var(--e-global-typography-1dd194b-font-weight, 400); --df-text_transform-h3: var(--e-global-typography-1dd194b-text-transform, normal); --df-font_style-h3: var(--e-global-typography-1dd194b-font-style, normal); --df-text_decoration-h3: var(--e-global-typography-1dd194b-text-decoration, none); --df-line_height-h3: var(--e-global-typography-1dd194b-line-height, var(--df-line_height-h)); --df-letter_spacing-h3: var(--e-global-typography-1dd194b-letter-spacing, 0); --df-word_spacing-h3: var(--e-global-typography-1dd194b-word-spacing, 0); --df-font_size-h3-min: calc( var(--df-font_size-h3-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h3: clamp( var(--df-font_size-h3-min), var(--df-scaler), var(--df-font_size-h3-max)); --df-color-h3: var(--df-e-color-gray-50); /* ----- h4 ----- */ --df-font_family-h4: var(--e-global-typography-e96ae50-font-family, var(--df-font_family-h)); --df-font_size-h4-max: var(--e-global-typography-e96ae50-font-size, 20px); --df-font_weight-h4: var(--e-global-typography-e96ae50-font-weight, 400); --df-text_transform-h4: var(--e-global-typography-e96ae50-text-transform, normal); --df-font_style-h4: var(--e-global-typography-e96ae50-font-style, normal); --df-text_decoration-h4: var(--e-global-typography-e96ae50-text-decoration, none); --df-line_height-h4: var(--e-global-typography-e96ae50-line-height, var(--df-line_height-h)); --df-letter_spacing-h4: var(--e-global-typography-e96ae50-letter-spacing, 0); --df-word_spacing-h4: var(--e-global-typography-e96ae50-word-spacing, 0); --df-font_size-h4-min: calc( var(--df-font_size-h4-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h4: clamp( var(--df-font_size-h4-min), var(--df-scaler), var(--df-font_size-h4-max)); --df-color-h4: var(--df-e-color-Neutral-90); /* ----- h5 ----- */ --df-font_family-h5: var(--e-global-typography-7441319-font-family, var(--df-font_family-h)); --df-font_size-h5-max: var(--e-global-typography-7441319-font-size, 18px); --df-font_weight-h5: var(--e-global-typography-7441319-font-weight, 400); --df-text_transform-h5: var(--e-global-typography-7441319-text-transform, normal); --df-font_style-h5: var(--e-global-typography-7441319-font-style, normal); --df-text_decoration-h5: var(--e-global-typography-7441319-text-decoration, none); --df-line_height-h5: var(--e-global-typography-7441319-line-height, var(--df-line_height-h)); --df-letter_spacing-h5: var(--e-global-typography-7441319-letter-spacing, 0); --df-word_spacing-h5: var(--e-global-typography-7441319-word-spacing, 0); --df-font_size-h5-min: calc( var(--df-font_size-h5-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h5: clamp( var(--df-font_size-h5-min), var(--df-scaler), var(--df-font_size-h5-max)); --df-color-h5: var(--df-e-color-Neutral-80); /* ----- h6 ----- */ --df-font_family-h6: var(--e-global-typography-3d9b89b-font-family, SackersGothicStd-Heavy, Lato, Roboto, sans-serif); --df-font_size-h6-max: var(--e-global-typography-3d9b89b-font-size, 14px); --df-font_weight-h6: var(--e-global-typography-3d9b89b-font-weight, 700); --df-text_transform-h6: var(--e-global-typography-3d9b89b-text-transform, uppercase); --df-font_style-h6: var(--e-global-typography-3d9b89b-font-style, normal); --df-text_decoration-h6: var(--e-global-typography-3d9b89b-text-decoration, none); --df-line_height-h6: var(--e-global-typography-3d9b89b-line-height, var(--df-line_height-h)); --df-letter_spacing-h6: var(--e-global-typography-3d9b89b-letter-spacing, 1.4px); --df-word_spacing-h6: var(--e-global-typography-3d9b89b-word-spacing, 0); --df-font_size-h6-min: calc( var(--df-font_size-h6-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-h6: clamp( var(--df-font_size-h6-min), var(--df-scaler), var(--df-font_size-h6-max)); --df-color-h6: var(--df-e-color-Neutral-70); /* ----- body ----- */ --df-font_family-body: var(--e-global-typography-text-font-family, Lato, "Roboto", sans-serif); --df-font_size-body-max: var(--e-global-typography-text-font-size, 16px); --df-font_weight-body: var(--e-global-typography-text-font-weight, 400); --df-text_transform-body: var(--e-global-typography-text-text-transform, normal); --df-font_style-body: var(--e-global-typography-text-font-style, normal); --df-text_decoration-body: var(--e-global-typography-text-text-decoration, none); --df-line_height-body: var(--e-global-typography-text-line-height, 160%); --df-letter_spacing-body: var(--e-global-typography-text-letter-spacing, 0.6px); --df-word_spacing-body: var(--e-global-typography-text-word-spacing, 0); --df-font_size-body-min: calc( var(--df-font_size-body-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-body: clamp( var(--df-font_size-body-min), var(--df-scaler), var(--df-font_size-body-max)); --df-color-body: var(--df-e-color-gray-50); /* ----- generic labels ----- */ --df-font_family-label: var(--e-global-typography-0125a69-font-family, var(--df-font_family-body)); --df-font_size-label-max: var(--e-global-typography-0125a69-font-size, 14px); --df-font_weight-label: var(--e-global-typography-0125a69-font-weight, 400); --df-text_transform-label: var(--e-global-typography-0125a69-text-transform, normal); --df-font_style-label: var(--e-global-typography-0125a69-font-style, normal); --df-text_decoration-label: var(--e-global-typography-0125a69-text-decoration, none); --df-line_height-label: var(--e-global-typography-0125a69-line-height, 120%); --df-letter_spacing-label: var(--e-global-typography-0125a69-letter-spacing, 0.6px); --df-word_spacing-label: var(--e-global-typography-0125a69-word-spacing, 0); --df-font_size-label-min: calc( var(--df-font_size-label-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-label: clamp( var(--df-font_size-label-min), var(--df-scaler), var(--df-font_size-label-max)); --df-color-label: var(--df-e-color-gray-50); /* ----- input_field_label ----- */ --df-font_family-input_field_label: var(--e-global-typography-72c5b50-font-family, SackersGothicStd-Light, Lato, Roboto, sans-serif); --df-font_size-input_field_label-max: var(--e-global-typography-72c5b50-font-size, 14px); --df-font_weight-input_field_label: var(--e-global-typography-72c5b50-font-weight, 400); --df-text_transform-input_field_label: var(--e-global-typography-72c5b50-text-transform, lowercase); --df-font_style-input_field_label: var(--e-global-typography-72c5b50-font-style, normal); --df-text_decoration-input_field_label: var(--e-global-typography-72c5b50-text-decoration, none); --df-line_height-input_field_label: var(--e-global-typography-72c5b50-line-height, 100%); --df-letter_spacing-input_field_label: var(--e-global-typography-72c5b50-letter-spacing, -0.2px); --df-word_spacing-input_field_label: var(--e-global-typography-72c5b50-word-spacing, 0); --df-font_size-input_field_label-min: calc( var(--df-font_size-input_field_label-max) * ( var(--df-ratio-font_size) ) ); --df-font_size-input_field_label: clamp( var(--df-font_size-input_field_label-min), var(--df-scaler), var(--df-font_size-input_field_label-max)); --df-color-input_field_label: var(--df-e-color-gray-50); /* ---------------------------------------------------- * ANIMATIONS * ---------------------------------------------------- */ --df-transition_duration-std: 0.3s; /* ---------------------------------------------------- * GENERIC GEOMETRY * ---------------------------------------------------- */ --df-std-border_width: 1px; --df-std-border_style: solid; --df-std-border_color: var(--df-e-color-gray-30); --df-std-border-radius: 0px; --df-std-padding: 14px; /* ---------------------------------------------------- * FORMS * ---------------------------------------------------- */ --df-form-gap: var(--df-std-padding); /* ----- input ----- */ --df-input-border: var(--df-std-border_width) var(--df-std-border_style) var(--df-color-gray-70); --df-input-line_height: var(--df-line_height-body); --df-input-border_radius: var(--df-std-border-radius); --df-input-font_size-max: 14px; --df-input-font_size-min: calc( var(--df-input-font_size-max) * ( var(--df-ratio-font_size) ) ); --df-input-font_size: clamp( var(--df-input-font_size-min), var(--df-scaler), var(--df-input-font_size-max)); /* ---- input hover ---- */ --df-input-hover-border: var(--df-std-border_width) var(--df-std-border_style) var(--df-e-color-gray-40); /* ---- input active ---- */ --df-input-hover-border: var(--df-std-border_width) var(--df-std-border_style) var(--df-e-color-gray-50); }