/** * Theme Name: KPI Tools * Theme URI: https://kpi-tools.fr * Description: Un thème créé pour spécialement pour aider la croissance de KPI Tools * Author: Jérémy Franck * Author URI: https://jrmyfranck.com * Template: blocksy * Text Domain: kpi-tools * Version: 1.0.0 */ /* =========================================================================================== */ /* COLOR PALETTE */ /* =========================================================================================== */ :root { --black: hsl(0, 0%, 0%); --white: hsl(0, 0%, 100%); /* BASE palette ------------------------------------------------------------ */ --palette-base-00: hsl(220 9% 10%); /* #17191C */ --palette-base-01: hsl(218 13% 25%); /* #373E48 */ --palette-base-02: hsl(218 15% 43%); /* #5D697E */ --palette-base-03: hsl(216 17% 62%); /* #8E9BAF */ --palette-base-04: hsl(212 21% 82%); /* #C7D0DB */ --palette-base-05: hsl(204 22% 92%); /* #E6EBEF */ --palette-base-06: hsl(204 22% 97%); /* #F6F8F9 */ --palette-base-00-trans-90: hsl(220 9% 10% / 90%); /* #17191C - 90% */ --palette-base-00-trans-80: hsl(220 9% 10% / 80%); /* #17191C - 80% */ --palette-base-00-trans-70: hsl(220 9% 10% / 70%); /* #17191C - 70% */ --palette-base-00-trans-60: hsl(220 9% 10% / 60%); /* #17191C - 60% */ --palette-base-00-trans-50: hsl(220 9% 10% / 50%); /* #17191C - 50% */ --palette-base-00-trans-40: hsl(220 9% 10% / 40%); /* #17191C - 40% */ --palette-base-00-trans-30: hsl(220 9% 10% / 30%); /* #17191C - 30% */ --palette-base-00-trans-20: hsl(220 9% 10% / 20%); /* #17191C - 20% */ --palette-base-00-trans-10: hsl(220 9% 10% / 10%); /* #17191C - 10% */ --palette-base-01-trans-90: hsl(218 13% 25% / 90%); /* #373E48 - 90% */ --palette-base-01-trans-80: hsl(218 13% 25% / 80%); /* #373E48 - 80% */ --palette-base-01-trans-70: hsl(218 13% 25% / 70%); /* #373E48 - 70% */ --palette-base-01-trans-60: hsl(218 13% 25% / 60%); /* #373E48 - 60% */ --palette-base-01-trans-50: hsl(218 13% 25% / 50%); /* #373E48 - 50% */ --palette-base-01-trans-40: hsl(218 13% 25% / 40%); /* #373E48 - 40% */ --palette-base-01-trans-30: hsl(218 13% 25% / 30%); /* #373E48 - 30% */ --palette-base-01-trans-20: hsl(218 13% 25% / 20%); /* #373E48 - 20% */ --palette-base-01-trans-10: hsl(218 13% 25% / 10%); /* #373E48 - 10% */ --palette-base-02-trans-90: hsl(218 15% 43% / 90%); /* #5D697E - 90% */ --palette-base-02-trans-80: hsl(218 15% 43% / 80%); /* #5D697E - 80% */ --palette-base-02-trans-70: hsl(218 15% 43% / 70%); /* #5D697E - 70% */ --palette-base-02-trans-60: hsl(218 15% 43% / 60%); /* #5D697E - 60% */ --palette-base-02-trans-50: hsl(218 15% 43% / 50%); /* #5D697E - 50% */ --palette-base-02-trans-40: hsl(218 15% 43% / 40%); /* #5D697E - 40% */ --palette-base-02-trans-30: hsl(218 15% 43% / 30%); /* #5D697E - 30% */ --palette-base-02-trans-20: hsl(218 15% 43% / 20%); /* #5D697E - 20% */ --palette-base-02-trans-10: hsl(218 15% 43% / 10%); /* #5D697E - 10% */ --palette-base-03-trans-90: hsl(216 17% 62% / 90%); /* #8E9BAF - 90% */ --palette-base-03-trans-80: hsl(216 17% 62% / 80%); /* #8E9BAF - 80% */ --palette-base-03-trans-70: hsl(216 17% 62% / 70%); /* #8E9BAF - 70% */ --palette-base-03-trans-60: hsl(216 17% 62% / 60%); /* #8E9BAF - 60% */ --palette-base-03-trans-50: hsl(216 17% 62% / 50%); /* #8E9BAF - 50% */ --palette-base-03-trans-40: hsl(216 17% 62% / 40%); /* #8E9BAF - 40% */ --palette-base-03-trans-30: hsl(216 17% 62% / 30%); /* #8E9BAF - 30% */ --palette-base-03-trans-20: hsl(216 17% 62% / 20%); /* #8E9BAF - 20% */ --palette-base-03-trans-10: hsl(216 17% 62% / 10%); /* #8E9BAF - 10% */ --palette-base-04-trans-90: hsl(212 21% 82% / 90%); /* #C7D0DB - 90% */ --palette-base-04-trans-80: hsl(212 21% 82% / 80%); /* #C7D0DB - 80% */ --palette-base-04-trans-70: hsl(212 21% 82% / 70%); /* #C7D0DB - 70% */ --palette-base-04-trans-60: hsl(212 21% 82% / 60%); /* #C7D0DB - 60% */ --palette-base-04-trans-50: hsl(212 21% 82% / 50%); /* #C7D0DB - 50% */ --palette-base-04-trans-40: hsl(212 21% 82% / 40%); /* #C7D0DB - 40% */ --palette-base-04-trans-30: hsl(212 21% 82% / 30%); /* #C7D0DB - 30% */ --palette-base-04-trans-20: hsl(212 21% 82% / 20%); /* #C7D0DB - 20% */ --palette-base-04-trans-10: hsl(212 21% 82% / 10%); /* #C7D0DB - 10% */ --palette-base-05-trans-90: hsl(204 22% 92% / 90%); /* #E6EBEF - 90% */ --palette-base-05-trans-80: hsl(204 22% 92% / 80%); /* #E6EBEF - 80% */ --palette-base-05-trans-70: hsl(204 22% 92% / 70%); /* #E6EBEF - 70% */ --palette-base-05-trans-60: hsl(204 22% 92% / 60%); /* #E6EBEF - 60% */ --palette-base-05-trans-50: hsl(204 22% 92% / 50%); /* #E6EBEF - 50% */ --palette-base-05-trans-40: hsl(204 22% 92% / 40%); /* #E6EBEF - 40% */ --palette-base-05-trans-30: hsl(204 22% 92% / 30%); /* #E6EBEF - 30% */ --palette-base-05-trans-20: hsl(204 22% 92% / 20%); /* #E6EBEF - 20% */ --palette-base-05-trans-10: hsl(204 22% 92% / 10%); /* #E6EBEF - 10% */ --palette-base-06-trans-90: hsl(204 22% 97% / 90%); /* #F6F8F9 - 90% */ --palette-base-06-trans-80: hsl(204 22% 97% / 80%); /* #F6F8F9 - 80% */ --palette-base-06-trans-70: hsl(204 22% 97% / 70%); /* #F6F8F9 - 70% */ --palette-base-06-trans-60: hsl(204 22% 97% / 60%); /* #F6F8F9 - 60% */ --palette-base-06-trans-50: hsl(204 22% 97% / 50%); /* #F6F8F9 - 50% */ --palette-base-06-trans-40: hsl(204 22% 97% / 40%); /* #F6F8F9 - 40% */ --palette-base-06-trans-30: hsl(204 22% 97% / 30%); /* #F6F8F9 - 30% */ --palette-base-06-trans-20: hsl(204 22% 97% / 20%); /* #F6F8F9 - 20% */ --palette-base-06-trans-10: hsl(204 22% 97% / 10%); /* #F6F8F9 - 10% */ /* PRIMARY palette --------------------------------------------------------- */ --palette-primary-01: hsl(222 74% 34%); /* #173D97 */ --palette-primary-02: hsl(218 67% 42%); /* #2358B3 */ --palette-primary-03: hsl(215 56% 53%); /* #447CCA */ --palette-primary-04: hsl(211 58% 69%); /* #82AEDE */ --palette-primary-05: hsl(207 65% 81%); /* #AFD2EE */ --palette-primary-01-trans-90: hsl(222 74% 34% / 90%); /* #173D97 - 90% */ --palette-primary-01-trans-80: hsl(222 74% 34% / 80%); /* #173D97 - 80% */ --palette-primary-01-trans-70: hsl(222 74% 34% / 70%); /* #173D97 - 70% */ --palette-primary-01-trans-60: hsl(222 74% 34% / 60%); /* #173D97 - 60% */ --palette-primary-01-trans-50: hsl(222 74% 34% / 50%); /* #173D97 - 50% */ --palette-primary-01-trans-40: hsl(222 74% 34% / 40%); /* #173D97 - 40% */ --palette-primary-01-trans-30: hsl(222 74% 34% / 30%); /* #173D97 - 30% */ --palette-primary-01-trans-20: hsl(222 74% 34% / 20%); /* #173D97 - 20% */ --palette-primary-01-trans-10: hsl(222 74% 34% / 10%); /* #173D97 - 10% */ --palette-primary-02-trans-90: hsl(218 67% 42% / 90%); /* #2358B3 - 90% */ --palette-primary-02-trans-80: hsl(218 67% 42% / 80%); /* #2358B3 - 80% */ --palette-primary-02-trans-70: hsl(218 67% 42% / 70%); /* #2358B3 - 70% */ --palette-primary-02-trans-60: hsl(218 67% 42% / 60%); /* #2358B3 - 60% */ --palette-primary-02-trans-50: hsl(218 67% 42% / 50%); /* #2358B3 - 50% */ --palette-primary-02-trans-40: hsl(218 67% 42% / 40%); /* #2358B3 - 40% */ --palette-primary-02-trans-30: hsl(218 67% 42% / 30%); /* #2358B3 - 30% */ --palette-primary-02-trans-20: hsl(218 67% 42% / 20%); /* #2358B3 - 20% */ --palette-primary-02-trans-10: hsl(218 67% 42% / 10%); /* #2358B3 - 10% */ --palette-primary-03-trans-90: hsl(215 56% 53% / 90%); /* #447CCA - 90% */ --palette-primary-03-trans-80: hsl(215 56% 53% / 80%); /* #447CCA - 80% */ --palette-primary-03-trans-70: hsl(215 56% 53% / 70%); /* #447CCA - 70% */ --palette-primary-03-trans-60: hsl(215 56% 53% / 60%); /* #447CCA - 60% */ --palette-primary-03-trans-50: hsl(215 56% 53% / 50%); /* #447CCA - 50% */ --palette-primary-03-trans-40: hsl(215 56% 53% / 40%); /* #447CCA - 40% */ --palette-primary-03-trans-30: hsl(215 56% 53% / 30%); /* #447CCA - 30% */ --palette-primary-03-trans-20: hsl(215 56% 53% / 20%); /* #447CCA - 20% */ --palette-primary-03-trans-10: hsl(215 56% 53% / 10%); /* #447CCA - 10% */ --palette-primary-04-trans-90: hsl(211 58% 69% / 90%); /* #82AEDE - 90% */ --palette-primary-04-trans-80: hsl(211 58% 69% / 80%); /* #82AEDE - 80% */ --palette-primary-04-trans-70: hsl(211 58% 69% / 70%); /* #82AEDE - 70% */ --palette-primary-04-trans-60: hsl(211 58% 69% / 60%); /* #82AEDE - 60% */ --palette-primary-04-trans-50: hsl(211 58% 69% / 50%); /* #82AEDE - 50% */ --palette-primary-04-trans-40: hsl(211 58% 69% / 40%); /* #82AEDE - 40% */ --palette-primary-04-trans-30: hsl(211 58% 69% / 30%); /* #82AEDE - 30% */ --palette-primary-04-trans-20: hsl(211 58% 69% / 20%); /* #82AEDE - 20% */ --palette-primary-04-trans-10: hsl(211 58% 69% / 10%); /* #82AEDE - 10% */ --palette-primary-05-trans-90: hsl(207 65% 81% / 90%); /* #AFD2EE - 90% */ --palette-primary-05-trans-80: hsl(207 65% 81% / 80%); /* #AFD2EE - 80% */ --palette-primary-05-trans-70: hsl(207 65% 81% / 70%); /* #AFD2EE - 70% */ --palette-primary-05-trans-60: hsl(207 65% 81% / 60%); /* #AFD2EE - 60% */ --palette-primary-05-trans-50: hsl(207 65% 81% / 50%); /* #AFD2EE - 50% */ --palette-primary-05-trans-40: hsl(207 65% 81% / 40%); /* #AFD2EE - 40% */ --palette-primary-05-trans-30: hsl(207 65% 81% / 30%); /* #AFD2EE - 30% */ --palette-primary-05-trans-20: hsl(207 65% 81% / 20%); /* #AFD2EE - 20% */ --palette-primary-05-trans-10: hsl(207 65% 81% / 10%); /* #AFD2EE - 10% */ /* SECONDARY palette ------------------------------------------------------- */ --palette-secondary-01: hsl(32 96% 35%); /* #AE5F04 */ --palette-secondary-02: hsl(34 91% 41%); /* #C87509 */ --palette-secondary-03: hsl(36 87% 48%); /* #E68F10 */ --palette-secondary-04: hsl(39 83% 50%); /* #E99F16 */ --palette-secondary-05: hsl(40 79% 61%); /* #EAB64D */ --palette-secondary-01-trans-90: hsl(32 96% 35% / 90%); /* #AE5F04 - 90% */ --palette-secondary-01-trans-80: hsl(32 96% 35% / 80%); /* #AE5F04 - 80% */ --palette-secondary-01-trans-70: hsl(32 96% 35% / 70%); /* #AE5F04 - 70% */ --palette-secondary-01-trans-60: hsl(32 96% 35% / 60%); /* #AE5F04 - 60% */ --palette-secondary-01-trans-50: hsl(32 96% 35% / 50%); /* #AE5F04 - 50% */ --palette-secondary-01-trans-40: hsl(32 96% 35% / 40%); /* #AE5F04 - 40% */ --palette-secondary-01-trans-30: hsl(32 96% 35% / 30%); /* #AE5F04 - 30% */ --palette-secondary-01-trans-20: hsl(32 96% 35% / 20%); /* #AE5F04 - 20% */ --palette-secondary-01-trans-10: hsl(32 96% 35% / 10%); /* #AE5F04 - 10% */ --palette-secondary-02-trans-90: hsl(34 91% 41% / 90%); /* #C87509 - 90% */ --palette-secondary-02-trans-80: hsl(34 91% 41% / 80%); /* #C87509 - 80% */ --palette-secondary-02-trans-70: hsl(34 91% 41% / 70%); /* #C87509 - 70% */ --palette-secondary-02-trans-60: hsl(34 91% 41% / 60%); /* #C87509 - 60% */ --palette-secondary-02-trans-50: hsl(34 91% 41% / 50%); /* #C87509 - 50% */ --palette-secondary-02-trans-40: hsl(34 91% 41% / 40%); /* #C87509 - 40% */ --palette-secondary-02-trans-30: hsl(34 91% 41% / 30%); /* #C87509 - 30% */ --palette-secondary-02-trans-20: hsl(34 91% 41% / 20%); /* #C87509 - 20% */ --palette-secondary-02-trans-10: hsl(34 91% 41% / 10%); /* #C87509 - 10% */ --palette-secondary-03-trans-90: hsl(36 87% 48% / 90%); /* #E68F10 - 90% */ --palette-secondary-03-trans-80: hsl(36 87% 48% / 80%); /* #E68F10 - 80% */ --palette-secondary-03-trans-70: hsl(36 87% 48% / 70%); /* #E68F10 - 70% */ --palette-secondary-03-trans-60: hsl(36 87% 48% / 60%); /* #E68F10 - 60% */ --palette-secondary-03-trans-50: hsl(36 87% 48% / 50%); /* #E68F10 - 50% */ --palette-secondary-03-trans-40: hsl(36 87% 48% / 40%); /* #E68F10 - 40% */ --palette-secondary-03-trans-30: hsl(36 87% 48% / 30%); /* #E68F10 - 30% */ --palette-secondary-03-trans-20: hsl(36 87% 48% / 20%); /* #E68F10 - 20% */ --palette-secondary-03-trans-10: hsl(36 87% 48% / 10%); /* #E68F10 - 10% */ --palette-secondary-04-trans-90: hsl(39 83% 50% / 90%); /* #E99F16 - 90% */ --palette-secondary-04-trans-80: hsl(39 83% 50% / 80%); /* #E99F16 - 80% */ --palette-secondary-04-trans-70: hsl(39 83% 50% / 70%); /* #E99F16 - 70% */ --palette-secondary-04-trans-60: hsl(39 83% 50% / 60%); /* #E99F16 - 60% */ --palette-secondary-04-trans-50: hsl(39 83% 50% / 50%); /* #E99F16 - 50% */ --palette-secondary-04-trans-40: hsl(39 83% 50% / 40%); /* #E99F16 - 40% */ --palette-secondary-04-trans-30: hsl(39 83% 50% / 30%); /* #E99F16 - 30% */ --palette-secondary-04-trans-20: hsl(39 83% 50% / 20%); /* #E99F16 - 20% */ --palette-secondary-04-trans-10: hsl(39 83% 50% / 10%); /* #E99F16 - 10% */ --palette-secondary-05-trans-90: hsl(40 79% 61% / 90%); /* #EAB64D - 90% */ --palette-secondary-05-trans-80: hsl(40 79% 61% / 80%); /* #EAB64D - 80% */ --palette-secondary-05-trans-70: hsl(40 79% 61% / 70%); /* #EAB64D - 70% */ --palette-secondary-05-trans-60: hsl(40 79% 61% / 60%); /* #EAB64D - 60% */ --palette-secondary-05-trans-50: hsl(40 79% 61% / 50%); /* #EAB64D - 50% */ --palette-secondary-05-trans-40: hsl(40 79% 61% / 40%); /* #EAB64D - 40% */ --palette-secondary-05-trans-30: hsl(40 79% 61% / 30%); /* #EAB64D - 30% */ --palette-secondary-05-trans-20: hsl(40 79% 61% / 20%); /* #EAB64D - 20% */ --palette-secondary-05-trans-10: hsl(40 79% 61% / 10%); /* #EAB64D - 10% */ /* CONTEXTUAL palette ------------------------------------------------------ */ --palette-info-light: hsl(204 77% 85%); /* #BBDFF6 */ --palette-info-base: hsl(204 77% 47%); /* #1C8AD4 */ --palette-info-dark: hsl(204 77% 15%); /* #092C44 */ --palette-info-light-trans-10: hsl(204 77% 85% / .1); --palette-info-light-trans-20: hsl(204 77% 85% / .2); --palette-info-light-trans-30: hsl(204 77% 85% / .3); --palette-info-light-trans-40: hsl(204 77% 85% / .4); --palette-info-light-trans-50: hsl(204 77% 85% / .5); --palette-info-light-trans-60: hsl(204 77% 85% / .6); --palette-info-light-trans-70: hsl(204 77% 85% / .7); --palette-info-light-trans-80: hsl(204 77% 85% / .8); --palette-info-light-trans-90: hsl(204 77% 85% / .9); --palette-info-base-trans-10: hsl(204 77% 47% / .1); --palette-info-base-trans-20: hsl(204 77% 47% / .2); --palette-info-base-trans-30: hsl(204 77% 47% / .3); --palette-info-base-trans-40: hsl(204 77% 47% / .4); --palette-info-base-trans-50: hsl(204 77% 47% / .5); --palette-info-base-trans-60: hsl(204 77% 47% / .6); --palette-info-base-trans-70: hsl(204 77% 47% / .7); --palette-info-base-trans-80: hsl(204 77% 47% / .8); --palette-info-base-trans-90: hsl(204 77% 47% / .9); --palette-info-dark-trans-10: hsl(204 77% 15% / .1); --palette-info-dark-trans-20: hsl(204 77% 15% / .2); --palette-info-dark-trans-30: hsl(204 77% 15% / .3); --palette-info-dark-trans-40: hsl(204 77% 15% / .4); --palette-info-dark-trans-50: hsl(204 77% 15% / .5); --palette-info-dark-trans-60: hsl(204 77% 15% / .6); --palette-info-dark-trans-70: hsl(204 77% 15% / .7); --palette-info-dark-trans-80: hsl(204 77% 15% / .8); --palette-info-dark-trans-90: hsl(204 77% 15% / .9); --palette-success-light: hsl(136 66% 85%); /* #C0F2CD */ --palette-success-base: hsl(136 66% 45%); /* #27BE4F */ --palette-success-dark: hsl(135 66% 15%); /* #0D3F1A */ --palette-success-light-trans-10: hsl(136 66% 85% / .1); --palette-success-light-trans-20: hsl(136 66% 85% / .2); --palette-success-light-trans-30: hsl(136 66% 85% / .3); --palette-success-light-trans-40: hsl(136 66% 85% / .4); --palette-success-light-trans-50: hsl(136 66% 85% / .5); --palette-success-light-trans-60: hsl(136 66% 85% / .6); --palette-success-light-trans-70: hsl(136 66% 85% / .7); --palette-success-light-trans-80: hsl(136 66% 85% / .8); --palette-success-light-trans-90: hsl(136 66% 85% / .9); --palette-success-base-trans-10: hsl(136 66% 45% / .1); --palette-success-base-trans-20: hsl(136 66% 45% / .2); --palette-success-base-trans-30: hsl(136 66% 45% / .3); --palette-success-base-trans-40: hsl(136 66% 45% / .4); --palette-success-base-trans-50: hsl(136 66% 45% / .5); --palette-success-base-trans-60: hsl(136 66% 45% / .6); --palette-success-base-trans-70: hsl(136 66% 45% / .7); --palette-success-base-trans-80: hsl(136 66% 45% / .8); --palette-success-base-trans-90: hsl(136 66% 45% / .9); --palette-success-dark-trans-10: hsl(135 66% 15% / .1); --palette-success-dark-trans-20: hsl(135 66% 15% / .2); --palette-success-dark-trans-30: hsl(135 66% 15% / .3); --palette-success-dark-trans-40: hsl(135 66% 15% / .4); --palette-success-dark-trans-50: hsl(135 66% 15% / .5); --palette-success-dark-trans-60: hsl(135 66% 15% / .6); --palette-success-dark-trans-70: hsl(135 66% 15% / .7); --palette-success-dark-trans-80: hsl(135 66% 15% / .8); --palette-success-dark-trans-90: hsl(135 66% 15% / .9); --palette-warning-light: hsl(55 100% 85%); /* #FFF9B2 */ --palette-warning-base: hsl(55 100% 52%); /* #FFEB0A */ --palette-warning-dark: hsl(54 100% 15%); /* #4D4500 */ --palette-warning-light-trans-10: hsl(55 100% 85% / .1); --palette-warning-light-trans-20: hsl(55 100% 85% / .2); --palette-warning-light-trans-30: hsl(55 100% 85% / .3); --palette-warning-light-trans-40: hsl(55 100% 85% / .4); --palette-warning-light-trans-50: hsl(55 100% 85% / .5); --palette-warning-light-trans-60: hsl(55 100% 85% / .6); --palette-warning-light-trans-70: hsl(55 100% 85% / .7); --palette-warning-light-trans-80: hsl(55 100% 85% / .8); --palette-warning-light-trans-90: hsl(55 100% 85% / .9); --palette-warning-base-trans-10: hsl(55 100% 52% / .1); --palette-warning-base-trans-20: hsl(55 100% 52% / .2); --palette-warning-base-trans-30: hsl(55 100% 52% / .3); --palette-warning-base-trans-40: hsl(55 100% 52% / .4); --palette-warning-base-trans-50: hsl(55 100% 52% / .5); --palette-warning-base-trans-60: hsl(55 100% 52% / .6); --palette-warning-base-trans-70: hsl(55 100% 52% / .7); --palette-warning-base-trans-80: hsl(55 100% 52% / .8); --palette-warning-base-trans-90: hsl(55 100% 52% / .9); --palette-warning-dark-trans-10: hsl(54 100% 15% / .1); --palette-warning-dark-trans-20: hsl(54 100% 15% / .2); --palette-warning-dark-trans-30: hsl(54 100% 15% / .3); --palette-warning-dark-trans-40: hsl(54 100% 15% / .4); --palette-warning-dark-trans-50: hsl(54 100% 15% / .5); --palette-warning-dark-trans-60: hsl(54 100% 15% / .6); --palette-warning-dark-trans-70: hsl(54 100% 15% / .7); --palette-warning-dark-trans-80: hsl(54 100% 15% / .8); --palette-warning-dark-trans-90: hsl(54 100% 15% / .9); --palette-danger-light: hsl(354 71% 85%); /* #F4BEC3 */ --palette-danger-base: hsl(354 70% 54%); /* #DC3848 */ --palette-danger-dark: hsl(354 71% 15%); /* #410B11 */ --palette-danger-light-trans-10: hsl(354 71% 85% / .1); --palette-danger-light-trans-20: hsl(354 71% 85% / .2); --palette-danger-light-trans-30: hsl(354 71% 85% / .3); --palette-danger-light-trans-40: hsl(354 71% 85% / .4); --palette-danger-light-trans-50: hsl(354 71% 85% / .5); --palette-danger-light-trans-60: hsl(354 71% 85% / .6); --palette-danger-light-trans-70: hsl(354 71% 85% / .7); --palette-danger-light-trans-80: hsl(354 71% 85% / .8); --palette-danger-light-trans-90: hsl(354 71% 85% / .9); --palette-danger-base-trans-10: hsl(354 70% 54% / .1); --palette-danger-base-trans-20: hsl(354 70% 54% / .2); --palette-danger-base-trans-30: hsl(354 70% 54% / .3); --palette-danger-base-trans-40: hsl(354 70% 54% / .4); --palette-danger-base-trans-50: hsl(354 70% 54% / .5); --palette-danger-base-trans-60: hsl(354 70% 54% / .6); --palette-danger-base-trans-70: hsl(354 70% 54% / .7); --palette-danger-base-trans-80: hsl(354 70% 54% / .8); --palette-danger-base-trans-90: hsl(354 70% 54% / .9); --palette-danger-dark-trans-10: hsl(354 71% 15% / .1); --palette-danger-dark-trans-20: hsl(354 71% 15% / .2); --palette-danger-dark-trans-30: hsl(354 71% 15% / .3); --palette-danger-dark-trans-40: hsl(354 71% 15% / .4); --palette-danger-dark-trans-50: hsl(354 71% 15% / .5); --palette-danger-dark-trans-60: hsl(354 71% 15% / .6); --palette-danger-dark-trans-70: hsl(354 71% 15% / .7); --palette-danger-dark-trans-80: hsl(354 71% 15% / .8); --palette-danger-dark-trans-90: hsl(354 71% 15% / .9); } /* =========================================================================================== */ /* FRAMEWORK */ /* =========================================================================================== */ :root { /* BASE UNITS -------------------------------------------------------------- */ --unit-micro: 0.1875rem; /* 3px */ --unit-xxs: 0.375rem; /* 6px */ --unit-xs: 0.75rem; /* 12px */ --unit-s: 1.5rem; /* 24px */ --unit-m: 3rem; /* 48px */ --unit-l: 3.75rem; /* 60px */ --unit-xl: 6rem; /* 96px */ --unit-xxl: 7.5rem; /* 120px */ --unit-maxi: 11.25rem; /* 180px */ --unit-huge: 15rem; /* 240px */ /* SPACING ----------------------------------------------------------------- */ --space-micro: var(--unit-micro); /* 3px */ --space-xxs: var(--unit-xxs); /* 6px */ --space-xs: var(--unit-xs); /* 12px */ --space-s: var(--unit-s); /* 24px */ --space-m: var(--unit-m); /* 48px */ --space-l: var(--unit-l); /* 60px */ --space-xl: var(--unit-xl); /* 96px */ --space-xxl: var(--unit-xxl); /* 120px */ --space-maxi: var(--unit-maxi); /* 180px */ --space-huge: var(--unit-huge); /* 240px */ /* CONTEXTUAL SPACING ------------------------------------------------------ */ --container-gap: var(--unit-l); /* 60px */ --content-gap: var(--unit-s); /* 24px */ --grid-gap: var(--unit-s); /* 24px */ --section-padding-block: clamp(var(--space-l), -0.536rem + 8.929vw, var(--space-xxl)); /* 60px (@768px) <---> 120px (@1440px) */ --section-padding-inline: clamp(var(--space-s), -0.306rem + 4.507vw, var(--space-l)); /* 24px (@375px) <---> 60px (@1440px) */ /* WIDTHS ------------------------------------------------------------------ */ --content-width: 75rem; /* 1200px */ --content-wide: calc(var(--content-width) * 1.125); /* 1440px */ --content-ultrawide: calc(var(--content-width) * 1.3125); /* 1680px */ --width--10: calc(var(--content-width) * .1); /* 10% of content-width */ --width--20: calc(var(--content-width) * .2); /* 20% of content-width */ --width--30: calc(var(--content-width) * .3); /* 30% of content-width */ --width--40: calc(var(--content-width) * .4); /* 40% of content-width */ --width--50: calc(var(--content-width) * .5); /* 50% of content-width */ --width--60: calc(var(--content-width) * .6); /* 60% of content-width */ --width--70: calc(var(--content-width) * .7); /* 70% of content-width */ --width--80: calc(var(--content-width) * .8); /* 80% of content-width */ --width--90: calc(var(--content-width) * .9); /* 90% of content-width */ --website-width: var(--content-width); /* 100% of content-width */ /* TEXT UNITS -------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-s: 0.875rem; /* 14px */ --text-m: 1.125rem; /* 18px */ --text-l: 1.5rem; /* 24px */ --text-xl: 2.25rem; /* 36px */ --heading-xs: 1.125rem; /* 18px */ --heading-s: 1.5rem; /* 24px */ --heading-m: 2.25rem; /* 36px */ --heading-l: 3rem; /* 48px */ --heading-xl: 3.75rem; /* 60px */ --heading-xxl: 7.5rem; /* 120px */ --heading-huge: 18.75rem; /* 300px */ /* RADII ------------------------------------------------------------------- */ --radius-xs: var(--unit-micro); /* 3px */ --radius-s: var(--unit-xxs); /* 6px */ --radius-m: var(--unit-xs); /* 12px */ --radius-l: var(--unit-s); /* 24px */ --radius-xl: var(--unit-l); /* 60px */ --radius-xxl: var(--unit-xxl); /* 120px */ --radius-50: 50%; /* 50% */ --radius-full: 50vh; /* fully rounded */ } /* =========================================================================================== */ /* TYPOGRAPHY */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* Font Stack */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* Global Type styles */ /* ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, blockquote, code, pre, div { margin: 0; } :where(h1 + p), :where(h2 + p), :where(h3 + p), :where(h4 + p), :where(h5 + p), :where(h6 + p), :where(p + p) { margin-top: var(--space-s); } /* =========================================================================================== */ /* LAYOUT UTILITY CLASSES */ /* =========================================================================================== */ /* Grids ------------------------------------------------------------------- */ /* Grid - core */ .auto-grid { display: grid !important; grid-template-columns: repeat(var(--grid-columns-nb), minmax(0, 1fr)); gap: var(--grid-gap); } /* Flex - core */ .flex-grid { --grid-columns: 4; --grid-gap: var(--space-s); --col-size: calc((100% - var(--grid-gap) * (var(--grid-columns-nb) - 1)) / var(--grid-columns-nb)); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--grid-gap); } .flex-grid > * { --growth-factor: 1; flex-grow: var(--growth-factor); flex-shrink: 0; flex-basis: 100%; max-inline-size: min(calc(var(--col-size) * var(--growth-factor, 1)), 100%); } /* Modifiers */ .auto-grid.grid--1, .flex-grid.grid--1 { --grid-columns-nb: 1; } .auto-grid.grid--2, .flex-grid.grid--2 { --grid-columns-nb: 2; } .auto-grid.grid--3, .flex-grid.grid--3 { --grid-columns-nb: 3; } .auto-grid.grid--4, .flex-grid.grid--4 { --grid-columns-nb: 4; } .auto-grid.grid--5, .flex-grid.grid--5 { --grid-columns-nb: 5; } .auto-grid.grid--6, .flex-grid.grid--6 { --grid-columns-nb: 6; } @media screen and (max-width: 1024px) { .auto-grid.grid-t--1, .flex-grid.grid-t--1 { --grid-columns-nb: 1; } .auto-grid.grid-t--2, .flex-grid.grid-t--2 { --grid-columns-nb: 2; } .auto-grid.grid-t--3, .flex-grid.grid-t--3 { --grid-columns-nb: 3; } .auto-grid.grid-t--4, .flex-grid.grid-t--4 { --grid-columns-nb: 4; } .auto-grid.grid-t--5, .flex-grid.grid-t--5 { --grid-columns-nb: 5; } .auto-grid.grid-t--6, .flex-grid.grid-t--6 { --grid-columns-nb: 6; } } @media screen and (max-width: 767px) { .auto-grid.grid-m--1, .flex-grid.grid-m--1 { --grid-columns-nb: 1; } .auto-grid.grid-m--2, .flex-grid.grid-m--2 { --grid-columns-nb: 2; } .auto-grid.grid-m--3, .flex-grid.grid-m--3 { --grid-columns-nb: 3; } .auto-grid.grid-m--4, .flex-grid.grid-m--4 { --grid-columns-nb: 4; } .auto-grid.grid-m--5, .flex-grid.grid-m--5 { --grid-columns-nb: 5; } .auto-grid.grid-m--6, .flex-grid.grid-m--6 { --grid-columns-nb: 6; } } /* Flex utilities */ .flex-aic { align-items: center; } .flex-jcc { justify-content: center; } .flex-grow--0 { flex-grow: 0; } .flex-grow--1 { flex-grow: 1; } .flex-grow--2 { flex-grow: 2; } .flex-grow--3 { flex-grow: 3; } .flex-grow--4 { flex-grow: 4; } .flex-shrink--0 { flex-shrink: 0; } .flex-shrink--1 { flex-shrink: 1; } .flex-shrink--2 { flex-shrink: 2; } .flex-shrink--3 { flex-shrink: 3; } .flex-shrink--4 { flex-shrink: 4; } .flex-basis--0 { flex-basis: 0; } .flex-basis--25 { flex-basis: 25%; } .flex-basis--33 { flex-basis: 33.3333%; } .flex-basis--50 { flex-basis: 50%; } .flex-basis--66 { flex-basis: 66.6666%; } .flex-basis--75 { flex-basis: 75%; } .flex-basis--100 { flex-basis: 100%; } /* Lists ------------------------------------------------------------------- */ .list--inline { list-style: none; padding-inline-start: 0; } .list--inline > li { list-style: none; display: inline-block; margin-bottom: 0; vertical-align: baseline; } /* =========================================================================================== */ /* OTHER UTILITY CLASSES */ /* =========================================================================================== */ /* Aspect ratio ------------------------------------------------------------ */ .ar--1-1 { aspect-ratio: 1 / 1; } .ar--1-2 { aspect-ratio: 1 / 2; } .ar--2-1 { aspect-ratio: 2 / 1; } .ar--2-3 { aspect-ratio: 2 / 3; } .ar--3-2 { aspect-ratio: 3 / 2; } .ar--3-4 { aspect-ratio: 3 / 4; } .ar--4-3 { aspect-ratio: 4 / 3; } .ar--4-5 { aspect-ratio: 4 / 5; } .ar--5-4 { aspect-ratio: 5 / 4; } .ar--16-9 { aspect-ratio: 16 / 9; } .ar--9-16 { aspect-ratio: 9 / 16; } /* Shadows ----------------------------------------------------------------- */ :root { --shadow-fx-s: 2px 6px 10px hsl(0deg, 0%, 0%, .25); --shadow-fx-m: 4px 12px 30px hsl(0deg, 0%, 0%, .25); --shadow-fx-l: 12px 12px 50px hsl(0deg, 0%, 0%, .25); --shadow-box-s: 2px 6px 10px -2px hsl(0deg, 0%, 0%, .25); --shadow-box-m: 4px 12px 30px -5px hsl(0deg, 0%, 0%, .25); --shadow-box-l: 12px 12px 50px -10px hsl(0deg, 0%, 0%, .25); } /* Utility classes - shadow */ .kpi_fx-shadow-s { -webkit-filter: drop-shadow(var(--shadow-fx-s)); -moz-filter: drop-shadow(var(--shadow-fx-s)); -ms-filter: drop-shadow(var(--shadow-fx-s)); -o-filter: drop-shadow(var(--shadow-fx-s)); filter: drop-shadow(var(--shadow-fx-s)); } .kpi_fx-shadow-m { -webkit-filter: drop-shadow(var(--shadow-fx-m)); -moz-filter: drop-shadow(var(--shadow-fx-m)); -ms-filter: drop-shadow(var(--shadow-fx-m)); -o-filter: drop-shadow(var(--shadow-fx-m)); filter: drop-shadow(var(--shadow-fx-m)); } .kpi_fx-shadow-l { -webkit-filter: drop-shadow(var(--shadow-fx-l)); -moz-filter: drop-shadow(var(--shadow-fx-l)); -ms-filter: drop-shadow(var(--shadow-fx-l)); -o-filter: drop-shadow(var(--shadow-fx-l)); filter: drop-shadow(var(--shadow-fx-l)); } .kpi_box-shadow-s { -webkit-box-shadow: var(--shadow-box-s); -moz-box-shadow: var(--shadow-box-s); -ms-box-shadow: var(--shadow-box-s); box-shadow: var(--shadow-box-s); } .kpi_box-shadow-m { -webkit-box-shadow: var(--shadow-box-m); -moz-box-shadow: var(--shadow-box-m); -ms-box-shadow: var(--shadow-box-m); box-shadow: var(--shadow-box-m); } .kpi_box-shadow-l { -webkit-box-shadow: var(--shadow-box-l); -moz-box-shadow: var(--shadow-box-l); -ms-box-shadow: var(--shadow-box-l); box-shadow: var(--shadow-box-l); } /* Text Utilities ---------------------------------------------------------- */ .util_uppercase { text-transform: uppercase; } /* =========================================================================================== */ /* ACCESSIBILITY UTILITY STYLES */ /* =========================================================================================== */ .visually-hidden:not(:focus):not(:active) { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .clickable-parent { --inner-content-radius: var(--radius-s); --padding-space: var(--space-s); position: relative; margin: calc(var(--padding-space) * -1); padding: var(--padding-space); border-radius: calc(var(--padding-space) + var(--inner-content-radius)); isolation: isolate; cursor: pointer; transition-property: box-shadow, transform; transition-duration: .5s; transition-timing-function: ease; } .clickable-parent:hover { box-shadow: 4px 8px 30px 0 hsla(0, 0%, 0%, .1); transform: translate3d(10px, -10px, 0); z-index: 2; } .clickable-parent:focus-within { box-shadow: 0 0 0 3px white, 0 0 0 5px var(--palette-primary-02, black); } .clickable-parent a::after { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .clickable-parent a:focus-visible, .clickable-parent a:focus { outline: unset; } .clickable-parent a:hover { transform: unset; } /* =========================================================================================== */ /* RESPONSIVE UTILITY STYLES */ /* =========================================================================================== */ /* Responsive visibility utility classes ----------------------------------- */ /* Desktop */ @media screen and (min-width: 769px) { .rwd.hide.desktop { display: none; } .rwd.hide.tablet { /* do nothing */ } .rwd.hide.mobile { /* do nothing */ } .rwd.show.desktop { /* do nothing */ } .rwd.show.tablet { display: none; } .rwd.show.mobile { display: none; } } /* Tablet */ @media screen and (max-width: 768px) and (min-width: 600px) { .rwd.hide.desktop { /* do nothing */ } .rwd.hide.tablet { display: none; } .rwd.hide.mobile { /* do nothing */ } .rwd.show.desktop { display: none; } .rwd.show.tablet { /* do nothing */ } .rwd.show.mobile { display: none; } } /* Mobile */ @media screen and (max-width: 599px) { .rwd.hide.desktop { /* do nothing */ } .rwd.hide.tablet { /* do nothing */ } .rwd.hide.mobile { display: none; } .rwd.show.desktop { display: none; } .rwd.show.tablet { /* do nothing */ } .rwd.show.mobile { display: none; } } /* Responsive linebreaks --------------------------------------------------- */ br.rwd { display: none; } /* XL screen (larger than 1440px) */ @media screen and (min-width: 1441px) { br.rwd.xl { display: unset; } } /* Desktop (992px–1440px) */ @media screen and (max-width: 1440px) and (min-width: 992px) { br.rwd.desktop { display: unset; } } /* Laptop (768px–991px) */ @media screen and (max-width: 991px) and (min-width: 768px) { br.rwd.laptop { display: unset; } } /* Tablet (576px–767px) */ @media screen and (max-width: 767px) and (min-width: 576px) { br.rwd.tablet { display: unset; } } /* Mobile (375px–575px) */ @media screen and (max-width: 575px) and (min-width: 375px) { br.rwd.mobile { display: unset; } } /* XS Mobile (less than 375px) */ @media screen and (max-width: 374px) { br.rwd.xs { display: unset; } } /* ↓↓↓ GLOBAL STYLES ↓↓↓ ===================================================================== */ /* =========================================================================================== */ /* GLOBAL LAYOUT */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* Base Elements */ /* ------------------------------------------------------------------------- */ .kpi_container { padding-top: 3.75rem; padding-top: var(--pad-section--top, 3.75rem); padding-block-start: var(--pad-section--top); padding-bottom: 3.75rem; padding-bottom: var(--pad-section--bottom, 3.75rem); padding-block-end: var(--pad-section--bottom); margin-top: 0; margin-block-start: 0; margin-bottom: 0; margin-block-end: 0; } /* =========================================================================================== */ /* GLOBAL TYPOGRAPHY */ /* =========================================================================================== */ /* Special inline elements */ /* code { background-color: hsla(0, 0%, 0%, .1); font-weight: 600; } */ /* Remove bottom margin if elements are the last child of their div/section */ h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child { margin-bottom: 0; } a { font-weight: 600; } @supports (text-underline-offset: .25em) { a { text-underline-offset: .25em } } /* ↓↓↓ WordPress ↓↓↓ ========================================================================= */ /* =========================================================================================== */ /* WORDPRESS */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* Post Archive */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* Post Single */ /* ------------------------------------------------------------------------- */ /* ↓↓↓ GLOBAL COMPONENTS ↓↓↓ ================================================================= */ /* =========================================================================================== */ /* GLOBAL COMPONENTS */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* Full-screen Menu */ /* ------------------------------------------------------------------------- */ .kpi_fs-menu__wrapper {} .kpi_fs-menu {} .kpi_fs-menu__col {} .kpi_fs-menu__list {} .kpi_fs-menu__link {} /* ------------------------------------------------------------------------- */ /* Footer */ /* ------------------------------------------------------------------------- */ .footer-item {} .footer__link {} .footer__link a {} /* ↓↓↓ WooCommerce ↓↓↓ ======================================================================= */ /* =========================================================================================== */ /* WOOCOMMERCE */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* WOO - Shop Page */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* WOO - Product Archive */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* WOO - Product Single */ /* ------------------------------------------------------------------------- */ body.single-product main .product.type-product .ct-product-add-to-cart .stock { display: none; } /* ------------------------------------------------------------------------- */ /* WOO - Panier */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* WOO - Checkout */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* WOO - My Account */ /* ------------------------------------------------------------------------- */ /* ↓↓↓ Other Plugins - Global styles ↓↓↓ ===================================================== */ /* ========================================================================= */ /* FORMS */ /* ========================================================================= */ /* ↓↓↓ Local styles ↓↓↓ ====================================================================== */ /* =========================================================================================== */ /* PAGES */ /* =========================================================================================== */ /* ------------------------------------------------------------------------- */ /* HOME */ /* ------------------------------------------------------------------------- */ /* Section titles styles */ /* Reset the section counters at beginning of page */ body:is(.home, .page-id-3457) { counter-reset: home-sections; } /* ------------------------------------------------------------------------- */ /* CONTACT */ /* ------------------------------------------------------------------------- */ /* ↓↓↓ Custom Blocks and Shortcodes ↓↓↓ ====================================================== */ /* =========================================================================================== */ /* KPI Tools Blocks */ /* =========================================================================================== */ /* =========================================================================================== */ /* SHORTCODES Styles */ /* =========================================================================================== */ /* Payment options icons */ .payment-icons { margin: 0; } .payment-icons > li { margin: 0 0.25rem; } .payment-icons > li:first-child { margin-left: 0; } .payment-icons > li:last-child { margin-right: 0; } /* Typography Default style */ :root{ --headings-font-family: ct_font_hubot__sans, "Hubot Sans", Sans-Serif; /* This should be aligned with Blocksy's customizer, except for overrides */ --h1--font-family: var(--headings-font-family); --h1--font-size: var(--heading-l); --h1--font-weight: 700; --h1--font-style: normal; --h1--line-height: 1.1; --h1--letter-spacing: 0; --h1--font-variation-settings: 'wght' 700,'wdth' 125 !important; --h1--font-variant-alternates: ; --h1--text-transform: ; --h1--color: var(--theme-heading-1-color, var(--theme-headings-color)); --h2--font-family: var(--headings-font-family); --h2--font-size: var(--heading-m); --h2--font-weight: 700; --h2--font-style: normal; --h2--line-height: 1.25; --h2--letter-spacing: 0; --h2--font-variation-settings: 'wght' 700,'wdth' 105; --h2--font-variant-alternates: ; --h2--text-transform: ; --h2--color: var(--theme-heading-2-color, var(--theme-headings-color)); --h3--font-family: var(--headings-font-family); --h3--font-size: var(--heading-s); --h3--font-weight: 700; --h3--font-style: normal; --h3--line-height: 1.33; --h3--letter-spacing: 0; --h3--font-variation-settings: ; --h3--font-variant-alternates: ; --h3--text-transform: ; --h3--color: var(--theme-heading-3-color, var(--theme-headings-color)); --h4--font-family: var(--headings-font-family); --h4--font-size: var(--heading-xs); --h4--font-weight: 700; --h4--font-style: normal; --h4--line-height: 1.33; --h4--letter-spacing: 0; --h4--font-variation-settings: ; --h4--font-variant-alternates: ; --h4--text-transform: ; --h4--color: var(--theme-heading-4-color, var(--theme-headings-color)); --h5--font-family: var(--headings-font-family); --h5--font-size: 1rem; --h5--font-weight: 700; --h5--font-style: normal; --h5--line-height: 1.3333; --h5--letter-spacing: 0.1rem; --h5--font-variation-settings: ; --h5--font-variant-alternates: ; --h5--text-transform: ; --h5--color: var(--theme-heading-5-color, var(--theme-headings-color)); --h6--font-family: var(--headings-font-family); --h6--font-size: var(--text-s); --h6--font-weight: 600; --h6--font-style: normal; --h6--line-height: 1.5; --h6--letter-spacing: 0.5em; --h6--font-variation-settings: ; --h6--font-variant-alternates: ; --h6--text-transform: uppercase; --h6--color: var(--theme-heading-6-color, var(--theme-headings-color)); } .looks-like-h1 { font-family: var(--h1--font-family); font-size: var(--h1--font-size); font-weight: var(--h1--font-weight); font-style: var(--h1--font-style); line-height: var(--h1--line-height); letter-spacing: var(--h1--letter-spacing); font-variation-settings: var(--h1--font-variation-settings); font-variant-alternates: var(--h1--font-variant-alternates); color: var(--h1--color); } .looks-like-h2 { font-family: var(--h2--font-family); font-size: var(--h2--font-size); font-weight: var(--h2--font-weight); font-style: var(--h2--font-style); line-height: var(--h2--line-height); letter-spacing: var(--h2--letter-spacing); font-variation-settings: var(--h2--font-variation-settings); font-variant-alternates: var(--h2--font-variant-alternates); color: var(--h2--color); } .looks-like-h3 { font-family: var(--h3--font-family); font-size: var(--h3--font-size); font-weight: var(--h3--font-weight); font-style: var(--h3--font-style); line-height: var(--h3--line-height); letter-spacing: var(--h3--letter-spacing); font-variation-settings: var(--h3--font-variation-settings); font-variant-alternates: var(--h3--font-variant-alternates); color: var(--h3--color); } .looks-like-h4 { font-family: var(--h4--font-family); font-size: var(--h4--font-size); font-weight: var(--h4--font-weight); font-style: var(--h4--font-style); line-height: var(--h4--line-height); letter-spacing: var(--h4--letter-spacing); font-variation-settings: var(--h4--font-variation-settings); font-variant-alternates: var(--h4--font-variant-alternates); color: var(--h4--color); } .looks-like-h5 { font-family: var(--h5--font-family); font-size: var(--h5--font-size); font-weight: var(--h5--font-weight); font-style: var(--h5--font-style); line-height: var(--h5--line-height); letter-spacing: var(--h5--letter-spacing); font-variation-settings: var(--h5--font-variation-settings); font-variant-alternates: var(--h5--font-variant-alternates); color: var(--h5--color); } .looks-like-h6 { font-family: var(--h6--font-family); font-size: var(--h6--font-size); font-weight: var(--h6--font-weight); font-style: var(--h6--font-style); line-height: var(--h6--line-height); letter-spacing: var(--h6--letter-spacing); font-variation-settings: var(--h6--font-variation-settings); font-variant-alternates: var(--h6--font-variant-alternates); color: var(--h6--color); } i { font-family: Georgia, serif; } em { font-weight: 600; } h1 { font-size: var(--h1--font-size); letter-spacing: var(--h1--letter-spacing); font-variation-settings: var(--h1--font-variation-settings); margin: 0; } h2 { font-variation-settings: var(--h2--font-variation-settings); margin: 0; } :is(:where(.entry-content > section)) { margin: 0; } /* Styling */ :root { --noise: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%202056%202056%27%3E%3Cfilter%20id%3D%27a%27%3E%3CfeTurbulence%20baseFrequency%3D%27.5%27%20stitchTiles%3D%27stitch%27%20type%3D%27fractalNoise%27%20/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23a%29%27%20/%3E%3C/svg%3E"); --noise-filter--01: contrast(300%) brightness(100%); --noise-filter--02: contrast(200%) brightness(150%); --noise-filter--03: contrast(200%) brightness(250%); --noise-filter--04: contrast(200%) brightness(500%); --noise-filter--05: contrast(200%) brightness(1000%); } .fx-shadow--01 { box-shadow: 6px 12px 30px -10px rgba(0, 0, 0, 0.15); } /* Header */ header a { font-variation-settings: 'wdth' 87.5; margin: 0; } /** HOME **/ /* Hero section */ .home-hero__section { background: radial-gradient(closest-side, var(--palette-base-06) 75%, transparent); } .home-hero { box-shadow: 2px 6px 12px -10px rgba(0, 0, 0, 0.05), 6px 12px 30px -10px rgba(0, 0, 0, 0.1), 12px 24px 80px -10px rgba(0, 0, 0, 0.1) ; } .home-hero::before { content: ""; position: absolute; inset: 0px; background: var(--noise); background-size: 200%; filter: var(--noise-filter--02); opacity: .2; z-index: 2; } .home-hero::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l); background-color: var(--palette-primary-03-trans-40); background: radial-gradient(circle at 35% 30%, hsla(0, 0%, 100%, .6), transparent), linear-gradient(to right, hsla(0, 0%, 0%, .5), transparent) ; mix-blend-mode: hard-light; z-index: 1; } .home-hero__holder { box-shadow: 2px 6px 12px -10px rgba(0, 0, 0, 0.1), 6px 12px 30px -10px rgba(0, 0, 0, 0.15), 12px 24px 80px -10px rgba(0, 0, 0, 0.15) ; z-index: 10; } .home-hero__link svg { --animation-distance: .33em; animation: infinite 1.25s both alternate bobUpDown; } :root { --animation-distance: 1em; } @keyframes bobUpDown { 0% { transform: translateY(calc(var(--animation-distance) * -.5)); } 100% { transform: translateY(calc(var(--animation-distance) * .5)); } } /*** Global Components ***/ /** Forms **/ /* Contact Form */ .wsf-field-wrapper.contact-form__notice, #contact-form .contact-form__notice { margin-bottom: var(--content-gap, 1.5rem); } .wsf-field-wrapper.contact-form__notice p, #contact-form .contact-form__notice p { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: var(--space-xs); background-color: var(--palette-info-light-trans-60); color: var(--palette-info-dark); font-weight: 500; border: 2px solid var(--palette-info-base); border-radius: var(--radius-s); } .wsf-field-wrapper.contact-form__consent small, #contact-form.contact-form__consent small { font-size: 1rem; } /* Outils spéciaux */ .anim--rolling-color { --itemsnb: 3; --baseduration: 1s; --animdur: calc(var(--baseduration) * calc(var(--itemsnb) + 1)); --animdelay: calc(var(--animdur) / calc(var(--itemsnb) + 1)); animation-name: rollingColor; animation-duration: var(--animdur); animation-iteration-count: infinite; animation-fill-mode: both; animation-direction: normal; } .anim--rolling-color:nth-of-type(1) { animation-delay: calc(var(--animdelay) * 1); } .anim--rolling-color:nth-of-type(2) { animation-delay: calc(var(--animdelay) * 2); } .anim--rolling-color:nth-of-type(3) { animation-delay: calc(var(--animdelay) * 3); } @keyframes rollingColor { 25% { color: var(--palette-primary-03); } 0%, 50%, 100% { color: var(--palette-primary-05); } } /* Header stuff */ header a.hello-bar-link { display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--space-xs) / 2); margin: calc(var(--space-xs) / 2) 0; padding: calc(var(--space-xs) / 2) var(--space-xs); font-size: 0.8125rem; font-weight: 600; letter-spacing: .05em; font-variation-settings: 'wght' 600; color: var(--palette-base-00); border-radius: var(--radius-s); transition: color .25s ease-in-out; } header a.hello-bar-link:hover { color: var(--palette-primary-03); } header a.hello-bar-link svg { width: auto; height: 1em; } header [data-row="top"], header [data-row="top"] > * { opacity: .7; filter: grayscale(.2); transition-property: opacity, box-shadow, background-color !important; } header:hover [data-row="top"], header:focus [data-row="top"], header:focus-within [data-row="top"], header:hover [data-row="top"] > *, header:focus [data-row="top"] > *, header:focus-within [data-row="top"] > * { opacity: 1; filter: unset; } /* Increase interaction area on hellobar items */ header [data-row="top"] .ct-contact-info li { position: relative; line-height: 1.25; } header [data-row="top"] .ct-contact-info li a::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; } /* Footer */ .footer-nav__link { position: relative; display: inline-block; isolation: isolate; } .footer-nav__link a { --current-color: var(--palette-base-01); display: block; width: 100%; height: 100%; color: var(--current-color); transition: color .35s ease-in-out; } .footer-nav__link.footer-nav__link--social-icon a { display: flex; } .footer-nav__link.footer-nav__link--social-icon a .gspb_svgBox { position: relative; top: -0.05em; } .footer-nav__link a:hover { --current-color: var(--wp--preset--color--palette-color-2, var(--theme-palette-primary-04)); } .footer-nav__link a::before { --link-offshoot: .5em; content: ""; position: absolute; top: calc(-1 * var(--link-offshoot)); right: calc(-1 * var(--link-offshoot)); bottom: calc(-1 * var(--link-offshoot)); left: calc(-1 * var(--link-offshoot)); z-index: 1; /* background-color: #f004; */ } .footer-nav__link a::after { --underline-color: var(--current-color); content: ""; position: absolute; bottom: -2px; left: 0; right: 0; width: 100%; height: 2px; background-color: var(--underline-color); z-index: -1; transform-origin: center left; transform: scaleX(0); transition: .3s ease-in-out; transition-property: transform, background-color; } .footer-nav__link a:hover::after { --underline-color: var(--current-color); transform: scaleX(1); } /* Separator between links and socials */ .footer-nav__wrapper:last-of-type .footer-nav__list-item:nth-last-of-type(2) { --gutter: var(--space-xs)/2; --offset: calc(1.5em + var(--gutter)); /* corresponds to 1 line + 1 gutter */ position: relative; margin-top: var(--offset); } .footer-nav__wrapper:last-of-type .footer-nav__list-item:nth-last-of-type(2)::before { --height: 2px; content: ""; position: absolute; width: 1em; height: var(--height); top: calc(-1 * (var(--offset) + var(--gutter) + var(--height)) / 2); background-color: var(--palette-base-01); }