/* Theme Name: Sporobole Author: Cake Communication Version: 1.0 */ /********************************************************/ /* /* Variables initialization /* /********************************************************/ :root { /* Units */ --const-browser-font_size : 16; /* Browser base font size - Unitless value in px (default to 16) */ /* COLORS */ /* base values */ --const-gray-h : 0; --const-gray-s : 0; --const-gray-l : 0; --const-color-h : 0; --const-color-s : 100; --const-color-l : 50; --const-red-h : 0; --const-yellow-h : 60; --const-green-h : 120; --const-cyan-h : 180; --const-blue-h : 240; --const-magenta-h : 300; --const-font_weight-thin : 100; --const-font_weight-extralight : 200; --const-font_weight-light : 300; --const-font_weight-regular : 400; --const-font_weight-medium : 500; --const-font_weight-semibold : 600; --const-font_weight-bold : 700; --const-font_weight-extrabold : 800; --const-font_weight-black : 900; --const-font_style-normal : normal; --const-font_style-italic : italic; --const-font_style-oblique : oblique; --const-font_kerning : normal; --const-font_case-lower : lowercase; --const-font_case-caps : uppercase; --const-font_case-capitalize : capitalize; --const-font_case-none : none; --const-writing_mode : horizontal-tb; } :root { /* Required Values */ --init-base-grid : 8; /* Base Line Height Unit - Unitless value in px ( 1rem ) (default to 24) */ --init-base-spacing : 8; /* Value for spacing calculation - Unitless value in px (default to --init-base-grid or 24) */ --init-base-font_size : 18; /* Base font size - Unitless value in px (default to --const-browser-font_size or 16) */ /* Font Stack */ --init-font_stack-degular : 'degular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --init-font_stack-degular-display : 'degular-display', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --init-font_stack-degular-text : 'degular-text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --init-font_stack-courrier : 'Courier New', 'Courier', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; --init-font_stack-arial : 'Arial', sans-serif; --init-font_stack-fontawsome : 'FontAwesome'; --init-font_stack-body : var(--init-font_stack-courrier); --init-font_stack-heading : var(--init-font_stack-degular-display); --init-font_stack-icon : var(--init-font_stack-fontawsome); --init-font_stack-mono : monospace; /* Config values */ /* Initial - Body config */ --init-body-overflow_x : hidden; --init-body-overflow_y : auto; --init-body-min_width : 100%; --init-body-min_height : 100vh; /* Initial - Imgs and Bkgs config */ --init-bkg_position : center center; /* Position of Bkgs */ --init-bkg_size : cover; /* Size of Bkgs */ --init-bkg_repeat : repeat; /* Repeat of Bkgs */ --init-obj_position : center center; /* Position of imgs */ --init-obj_size : contain; /* Size of Imgs */ /* Margins and padding modifiers ( in REM ) */ --init-spacing_mod-xxs : 1; --init-spacing_mod-xs : 1; --init-spacing_mod-s : 2; --init-spacing_mod : 3; --init-spacing_mod-l : 6; --init-spacing_mod-xl : 9; --init-spacing_mod-xxl : 12; /* Trqansition */ --init-transition-fast : .2s; --init-transition-medium : .4s; --init-transition-slow : .8s; --init-transition-ease : ease-in-out; /* Contant mappings - used to overwrite constant */ /* Initial font config */ --init-font_weight-thin : var(--const-font_weight-thin, 100); --init-font_weight-extralight : var(--const-font_weight-extralight ,200); --init-font_weight-light : var(--const-font_weight-light ,300); --init-font_weight-regular : var(--const-font_weight-regular ,400); --init-font_weight-medium : var(--const-font_weight-medium ,500); --init-font_weight-semibold : var(--const-font_weight-semibold ,600); --init-font_weight-bold : var(--const-font_weight-bold ,700); --init-font_weight-extrabold : var(--const-font_weight-extrabold ,800); --init-font_weight-black : var(--const-font_weight-black ,900); --init-font_style-normal : var(--const-font_style-normal, normal); --init-font_style-italic : var(--const-font_style-italic, italic); --init-font_style-oblique : var(--const-font_style-oblique, oblique); --init-font_kerning : var(--const-font_kerning ,normal); --init-font_case-lower : var(--const-font_case-lower, lowercase); --init-font_case-caps : var(--const-font_case-caps, uppercase); --init-font_case-capitalize : var(--const-font_case-capitalize, capitalize); --init-font_case-none : var(--const-font_case-none, none); /* Initial HTML Config */ --init-writing_mode : var(--const-writing_mode, horizontal-tb); /* COLORS */ /* Colors : White */ --init-white-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-white-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-white-l : calc(100 + var(--init-gray-s, var(--const-gray-s, 0))); --init-white-hsl : hsl(var(--init-white-h), calc(var(--init-white-s) * 1%), calc(var(--init-white-l) * 1%)); --init-white-hex : #ffffff; /* Colors : Gray 95% */ --init-gray_95-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_95-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_95-l : calc(95 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_95-hsl : hsl(var(--init-gray_95-h), calc(var(--init-gray_95-s) * 1%), calc(var(--init-gray_95-l) * 1%)); --init-gray_98-hex : #f2f2f2; /* Colors : Gray 90% */ --init-gray_90-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_90-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_90-l : calc(90 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_90-hsl : hsl(var(--init-gray_90-h), calc(var(--init-gray_90-s) * 1%), calc(var(--init-gray_90-l) * 1%)); --init-gray_90-hex : #e6e6e6; /* Colors : Gray 85% */ --init-gray_85-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_85-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_85-l : calc(85 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_85-hsl : hsl(var(--init-gray_85-h), calc(var(--init-gray_85-s) * 1%), calc(var(--init-gray_85-l) * 1%)); --init-gray_85-hex : #d9d9d9; /* Colors : Gray 80% */ --init-gray_80-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_80-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_80-l : calc(80 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_80-hsl : hsl(var(--init-gray_80-h), calc(var(--init-gray_80-s) * 1%), calc(var(--init-gray_80-l) * 1%)); --init-gray_80-hex : #cccccc; /* Colors : Gray 75% */ --init-gray_75-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_75-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_75-l : calc(75 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_75-hsl : hsl(var(--init-gray_75-h), calc(var(--init-gray_75-s) * 1%), calc(var(--init-gray_75-l) * 1%)); --init-gray_75-hex : #bfbfbf; /* Colors : Gray 70% */ --init-gray_70-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_70-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_70-l : calc(70 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_70-hsl : hsl(var(--init-gray_70-h), calc(var(--init-gray_70-s) * 1%), calc(var(--init-gray_70-l) * 1%)); --init-gray_70-hex : #b3b3b3; /* Colors : Gray 65% */ --init-gray_65-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_65-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_65-l : calc(65 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_65-hsl : hsl(var(--init-gray_65-h), calc(var(--init-gray_65-s) * 1%), calc(var(--init-gray_65-l) * 1%)); --init-gray_65-hex : #a6a6a6; /* Colors : Gray 60% */ --init-gray_60-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_60-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_60-l : calc(60 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_60-hsl : hsl(var(--init-gray_60-h), calc(var(--init-gray_60-s) * 1%), calc(var(--init-gray_60-l) * 1%)); --init-gray_60-hex : #999999; /* Colors : Gray 55% */ --init-gray_55-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_55-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_55-l : calc(55 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_55-hsl : hsl(var(--init-gray_55-h), calc(var(--init-gray_55-s) * 1%), calc(var(--init-gray_55-l) * 1%)); --init-gray_55-hex : #8c8c8c; /* Colors : Gray 50% */ --init-gray_50-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_50-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_50-l : calc(50 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_50-hsl : hsl(var(--init-gray_50-h), calc(var(--init-gray_50-s) * 1%), calc(var(--init-gray_50-l) * 1%)); --init-gray_50-hex : #808080; /* Colors : Gray 45% */ --init-gray_45-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_45-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_45-l : calc(45 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_45-hsl : hsl(var(--init-gray_45-h), calc(var(--init-gray_45-s) * 1%), calc(var(--init-gray_45-l) * 1%)); --init-gray_45-hex : #737373; /* Colors : Gray 40% */ --init-gray_40-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_40-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_40-l : calc(40 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_40-hsl : hsl(var(--init-gray_40-h), calc(var(--init-gray_40-s) * 1%), calc(var(--init-gray_40-l) * 1%)); --init-gray_40-hex : #666666; /* Colors : Gray 35% */ --init-gray_35-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_35-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_35-l : calc(35 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_35-hsl : hsl(var(--init-gray_35-h), calc(var(--init-gray_35-s) * 1%), calc(var(--init-gray_35-l) * 1%)); --init-gray_35-hex : #595959; /* Colors : Gray 30% */ --init-gray_30-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_30-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_30-l : calc(30 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_30-hsl : hsl(var(--init-gray_30-h), calc(var(--init-gray_30-s) * 1%), calc(var(--init-gray_30-l) * 1%)); --init-gray_30-hex : #4d4d4d; /* Colors : Gray 25% */ --init-gray_25-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_25-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_25-l : calc(25 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_25-hsl : hsl(var(--init-gray_25-h), calc(var(--init-gray_25-s) * 1%), calc(var(--init-gray_25-l) * 1%)); --init-gray_25-hex : #404040; /* Colors : Gray 20% */ --init-gray_20-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_20-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_20-l : calc(20 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_20-hsl : hsl(var(--init-gray_20-h), calc(var(--init-gray_20-s) * 1%), calc(var(--init-gray_20-l) * 1%)); --init-gray_20-hex : #333333; /* Colors : Gray 15% */ --init-gray_15-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_15-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_15-l : calc(15 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_15-hsl : hsl(var(--init-gray_15-h), calc(var(--init-gray_15-s) * 1%), calc(var(--init-gray_15-l) * 1%)); --init-gray_15-hex : #262626; /* Colors : Gray 10% */ --init-gray_10-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_10-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_10-l : calc(10 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_10-hsl : hsl(var(--init-gray_10-h), calc(var(--init-gray_10-s) * 1%), calc(var(--init-gray_10-l) * 1%)); --init-gray_10-hex : #1a1a1a; /* Colors : Gray 5% */ --init-gray_5-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-gray_5-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-gray_5-l : calc(5 + var(--init-gray-s, var(--const-gray-s, 0))); --init-gray_5-hsl : hsl(var(--init-gray_5-h), calc(var(--init-gray_5-s) * 1%), calc(var(--init-gray_5-l) * 1%)); --init-gray_5-hex : #0d0d0d; /* Colors : Black */ --init-black-h : var(--init-gray-h, var(--const-gray-h, 0)); --init-black-s : var(--init-gray-s, var(--const-gray-s, 0)); --init-black-l : calc(0 + var(--init-gray-s, var(--const-gray-s, 0))); --init-black-hsl : hsl(var(--init-black-h), calc(var(--init-black-s) * 1%), calc(var(--init-black-l) * 1%)); --init-black-hex : #000000; /* Colors : Red */ --init-red-h : var(--init-red-h, var(--const-red-h, 0)); --init-red-s : var(--init-color-s, var(--const-color-s, 100)); --init-red-l : var(--init-color-l, var(--const-color-l, 50)); --init-red-hsl : hsl(var(--init-red-h), calc(var(--init-red-s) * 1%), calc(var(--init-red-l) * 1%)); --init-red-hex : #ff0000; /* Colors : Yellow */ --init-yellow-h : var(--init-yellow-h, var(--const-yellow-h, 0)); --init-yellow-s : var(--init-color-s, var(--const-color-s, 100)); --init-yellow-l : var(--init-color-l, var(--const-color-l, 50)); --init-yellow-hsl : hsl(var(--init-yellow-h), calc(var(--init-yellow-s) * 1%), calc(var(--init-yellow-l) * 1%)); --init-yellow-hex : #ff0000; /* Colors : Green */ --init-green-h : var(--init-green-h, var(--const-green-h, 0)); --init-green-s : var(--init-color-s, var(--const-color-s, 100)); --init-green-l : var(--init-color-l, var(--const-color-l, 50)); --init-green-hsl : hsl(var(--init-green-h), calc(var(--init-green-s) * 1%), calc(var(--init-green-l) * 1%)); --init-green-hex : #00ff00; /* Colors : Cyan */ --init-cyan-h : var(--init-cyan-h, var(--const-cyan-h, 0)); --init-cyan-s : var(--init-color-s, var(--const-color-s, 100)); --init-cyan-l : var(--init-color-l, var(--const-color-l, 50)); --init-cyan-hsl : hsl(var(--init-cyan-h), calc(var(--init-cyan-s) * 1%), calc(var(--init-cyan-l) * 1%)); --init-cyan-hex : #00ffff; /* Colors : Bleu */ --init-blue-h : var(--init-blue-h, var(--const-blue-h, 0)); --init-blue-s : var(--init-color-s, var(--const-color-s, 100)); --init-blue-l : var(--init-color-l, var(--const-color-l, 50)); --init-blue-hsl : hsl(var(--init-blue-h), calc(var(--init-blue-s) * 1%), calc(var(--init-blue-l) * 1%)); --init-blue-hex : #0000ff; /* Colors : Magenta */ --init-magenta-h : var(--init-magenta-h, var(--const-magenta-h, 0)); --init-magenta-s : var(--init-color-s, var(--const-color-s, 100)); --init-magenta-l : var(--init-color-l, var(--const-color-l, 50)); --init-magenta-hsl : hsl(var(--init-magenta-h), calc(var(--init-magenta-s) * 1%), calc(var(--init-magenta-l) * 1%)); --init-magenta-hex : #ff00ff; } /********************************************************/ /* /* Value setup /* /********************************************************/ :root { /* LINE HEIGHTS */ --ul-line_height-xxxxl : 104; --ul-line_height-xxxl : 80; --ul-line_height-xxl : 48; --ul-line_height-xl : 40; --ul-line_height-l : 32; --ul-line_height-m : 24; --ul-line_height-s : 16; --vl-line_height-xxxxl : calc( var(--ul-line_height-xxxxl) * var(--util-px_rem) ); --vl-line_height-xxxl : calc( var(--ul-line_height-xxxl) * var(--util-px_rem) ); --vl-line_height-xxl : calc( var(--ul-line_height-xxl) * var(--util-px_rem) ); --vl-line_height-xl : calc( var(--ul-line_height-xl) * var(--util-px_rem) ); --vl-line_height-l : calc( var(--ul-line_height-l) * var(--util-px_rem) ); --vl-line_height-m : calc( var(--ul-line_height-m) * var(--util-px_rem) ); --vl-line_height-s : calc( var(--ul-line_height-s) * var(--util-px_rem) ); /* Font size */ --ul-font_size-xxxxl : 124; --ul-font_size-xxxl : 56; --ul-font_size-xxl : 42; --ul-font_size-xl : 28; --ul-font_size-l : 20; --ul-font_size-m : 18; --ul-font_size-s : 14; --ul-font_size-xs : 12; --vl-font_size-xxxxl : calc( var(--ul-font_size-xxxxl) * var(--util-px_rem) ); --vl-font_size-xxxl : calc( var(--ul-font_size-xxxl) * var(--util-px_rem) ); --vl-font_size-xxl : calc( var(--ul-font_size-xxl) * var(--util-px_rem) ); --vl-font_size-xl : calc( var(--ul-font_size-xl ) * var(--util-px_rem) ); --vl-font_size-l : calc( var(--ul-font_size-l) * var(--util-px_rem) ); --vl-font_size-m : calc( var(--ul-font_size-m) * var(--util-px_rem) ); --vl-font_size-s : calc( var(--ul-font_size-s) * var(--util-px_rem) ); --vl-font_size-xs : calc( var(--ul-font_size-xs ) * var(--util-px_rem) ); /* Kerning */ --vl-font_kerning-m : var(--init-font_kerning); --vl-font_kerning-l : calc( 1.6 * var(--util-px_rem) ); --vl-font_kerning-xl : calc( 2.3 * var(--util-px_rem) ); --vl-font_kerning-xxl : calc( 2.4 * var(--util-px_rem) ); --vl-font_kerning-xxxl : calc( 3.6 * var(--util-px_rem) ); /* Colors */ --vl-rose-h : 338; --vl-rose-s : 93; --vl-rose-l : 68; --vl-rose-hsl : hsl(var(--vl-rose-h), calc(var(--vl-rose-s) * 1%), calc(var(--vl-rose-l) * 1%)); --vl-rose-hex : #f9619a; /* Colors : orange */ --vl-orange-h : 22; --vl-orange-s : 100; --vl-orange-l : 47; --vl-orange-hsl : hsl(var(--vl-orange-h), calc(var(--vl-orange-s) * 1%), calc(var(--vl-orange-l) * 1%)); --vl-orange-hex : #F15A00; --vl-ttl_gray-h : 0; --vl-ttl_gray-s : 0; --vl-ttl_gray-l : 29; --vl-ttl_gray-hsl : hsl(var(--vl-ttl_gray-h), calc(var(--vl-ttl_gray-s) * 1%), calc(var(--vl-ttl_gray-l) * 1%)); --vl-ttl_gray-hex : #4A4A4A; --vl-txt_gray-h : 0; --vl-txt_gray-s : 0; --vl-txt_gray-l : 28; --vl-txt_gray-hsl : hsl(var(--vl-txt_gray-h), calc(var(--vl-txt_gray-s) * 1%), calc(var(--vl-txt_gray-l) * 1%)); --vl-txt_gray-hex : #484848; --vl-txt_pale-h : 0; --vl-txt_pale-s : 0; --vl-txt_pale-l : 56; --vl-txt_pale-hsl : hsl(var(--vl-txt_pale-h), calc(var(--vl-txt_pale-s) * 1%), calc(var(--vl-txt_pale-l) * 1%)); --vl-txt_pale-hex : #8F8F8F; } /********************************************************/ /* /* RESET /* /********************************************************/ :root { /* Calculated values */ --init-font_size : calc( var(--init-base-font_size, 16) * calc( 1rem / var(--init-base-grid, 24) ) ); /* Base font size in REM */ --init-baseline : calc( var(--init-base-grid, 24) / var(--const-browser-font_size, 16) * 100 * 1% ); /* Body font size (%) */ --init-spacing : calc( var(--init-base-spacing, var(--init-base-grid, 24)) * calc( 1rem / var(--init-base-grid, 24) ) ); /* Default spacing (REM) */ --init-line_height : calc( ( var(--init-base-spacing, var(--init-base-grid, 24)) ) * calc( 1rem / var(--init-base-grid, 24) ) * var(--init-spacing_mod, 1) ); /* Default line height(REM) */ } /*Reset */ *, *:before, *:after { /* Var initialisation (to prevent inheritance) */ --elem-padding_mod-start : 0; --elem-padding_mod-end : 0; --elem-padding_mod-top : 0; --elem-padding_mod-bottom : 0; --elem-margin_mod-start : 0; --elem-margin_mod-end : 0; --elem-margin_mod-top : 0; --elem-margin_mod-bottom : 0; --elem-size_inline : initial; --elem-size_inline-min : 0; --elem-size_inline-max : none; --elem-size_block : initial; --elem-size_block-min : 0; --elem-size_block-max : none; --elem-bkg_position : var(--vl-bkg_position, var(--init-bkg_position, initial)); --elem-bkg_size : var(--vl-bkg_size, var(--init-bkg_size, initial)); --elem-bkg_repeat : var(--vl-bkg_repeat, var(--init-bkg_repeat, initial)); box-sizing : border-box; text-align : inherit; vertical-align : initial; } html, body { --elem-size_inline-min : var(--vl-body-min_width, var(--init-body-min_width, 100%)); --elem-size_block-min : var(--vl-body-min_height, var(--init-body-min_height, 100vh)); } html { --elem-font_size : var(--vl-baseline, var(--init-baseline, 150%)); writing-mode : var(--vl-writing_mode, var(--init-writing_mode, horizontal-tb)); -ms-text-size-adjust : 100%; -webkit-text-size-adjust : 100%; } body { --elem-font_style : var(--vl-font_style-normal, var(--init-font_style-normal, var(--const-font_style-normal, normal))); --elem-font_weight : var(--vl-font_weight-regular, var(--init-font_weight-regular, var(--const-font_weight-regular, 400))); --elem-font_case : var(--vl-font_case-none, var(--init-font_case-none, var(--const-font_case-none, none))); --elem-font_kerning : var(--vl-font_kerning, var(--init-font_kerning, var(--const-font_kerning, normal))); --elem-font_family : var(--vl-font_stack-body, var(--init-font_stack-body, 'Verdana', 'Arial', 'Helvetica', 'sans-serif')); --elem-font_size : var(--vl-font_size, var(--init-font_size, calc( 16/24 * 1rem))); overflow-x : var(--elem-body-overflow_x, var(--vl-body-overflow_x, var(--init-body-overflow_x, auto))); overflow-y : var(--elem-body-overflow_y, var(--vl-body-overflow_y, var(--init-body-overflow_y, auto))); text-align : start; -webkit-font-smoothing : subpixel-antialiased; scroll-behavior : smooth; text-rendering : optimizeSpeed; background-color : var(--color-bkg, #ffffff); }; main { display : block; } menu, nav, ul, ol, dd { list-style : none; } hr { --elem-size_block : 0; box-sizing : content-box; overflow : visible; } abbr[title]:not([title='']) { text-decoration : underline; text-decoration : underline dotted; cursor : help; text-decoration-skip-ink : none; } small { --elem-font_size : 80%; } sub, sup { --elem-font_size : 75%; --elem-line_height : 0; position : relative; vertical-align : baseline; } sub { bottom : -.25em; } sup { top : -.5em; } a { text-decoration : none; cursor : default; } a[href]:not([href='']) { cursor : pointer; } address, blockquote, h1, h2, h3, h4, h5, h6, hr, p, pre { --elem-margin_mod-bottom : var(--vl-spacing_mod, var(--init-spacing_mod, 1rem)); } code, kbd, pre, samp { --elem-font_size : 1em; --elem-font_family : var(--vl-font_stack-mono, var(--init-font_stack-mono, monospace)); } pre { overflow : auto; } blockquote, q { quotes : none; } del { text-decoration : line-through; } b, strong { --elem-font_weight : var(--vl-font_weight-bold, var(--init-font_weight-bold, var(--const-font_weight-bold, 700))); } dfn, em { --elem-font_style : var(--vl-font_style-italic, var(--init-font_style-italic, var(--const-font_style-italic, italic))); } audio, canvas, progress, video { display : inline-block; vertical-align : baseline; } img { --elem-size_inline-max : 100%; --elem-size_block : auto; vertical-align : middle; outline : 0; object-position : var(--elem-obj_position, var(--vl-obj_position, var(--init-obj_position, initial))); object-fit : var(--elem-obj_size, var(--vl-obj_size, var(--init-obj_size, initial))); } svg { overflow : hidden; vertical-align : middle; fill : currentColor; } embed, object, video { --elem-size_block : auto; --elem-size_inline-max : 100%; object-position : var(--elem-obj_position, var(--vl-obj_position, var(--init-obj_position, initial))); object-fit : var(--elem-obj_size, var(--vl-obj_size, var(--init-obj_size, initial))); } iframe { --elem-size_inline : 100%; overflow : auto; } table { border-collapse : collapse; border-spacing : 0; } caption { color : inherit; text-align : start; caption-side : bottom; } td, th { overflow : auto; } th { text-align : inherit; } details { display : block; } summary { display : list-item; cursor : pointer; } legend { --elem-size_inline-max : 100%; display : table; white-space : normal; } label { display : inline-block; } label[for]:not([for='']) { cursor : pointer; } button { border-radius : 0; } button:focus { outline : 1px dotted; outline : 5px auto -webkit-focus-ring-color; } button, input { overflow : visible; } select { word-wrap : normal; } textarea { overflow : auto; resize : vertical; } progress { vertical-align : baseline; } output { display : inline-block; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance : button; } button:not([disabled]), [type=button]:not([disabled]), [type=reset]:not([disabled]), [type=submit]:not([disabled]) { cursor : pointer; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style : none; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline : 1px dotted; } [type=checkbox], [type=radio] { box-sizing : border-box; } [type=date], [type=datetime-local], [type=month], [type=time] { -webkit-appearance : listbox; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { --elem-size_block : auto; } [type=search] { outline-offset : -2px; -webkit-appearance : none; } [type=search]::-webkit-search-decoration { -webkit-appearance : none; } ::-webkit-file-upload-button { -webkit-appearance : button; } [hidden], template { --elem-size_block : 0; --elem-size_inline : 0; display : none; overflow : hidden; } input[hidden], select[hidden], textarea[hidden], button[hidden] { display : block; position : fixed; top : 0; left : -9999em; } a, a > * { transition: : all var(--transition-speed) var(--transition-ease); } /* Typographic baseline (block element) */ small { --elem-font_size : var(--vl-font_size-s); --elem-font_family : var(--init-font_stack-body); --elem-line_height : var(--vl-line_height-m); --elem-color-txt-h : var(--theme-color-pale-h); --elem-color-txt-s : var(--theme-color-pale-s); --elem-color-txt-l : var(--theme-color-pale-l); --elem-color-txt-a : var(--theme-color-pale-a); } h1 { --elem-font_family : var(--init-font_stack-degular, --init-font_stack-heading); --elem-font_size : var(--vl-font_size-xxxxl ); --elem-line_height : var(--vl-line_height-xxxxl); --elem-font_weight : var(--init-font_weight-bold); --elem-font_case : var(--init-font_case-none); --elem-font_kerning : var(--vl-font_kerning-m); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); } h2 { --elem-font_family : var(--init-font_stack-heading); --elem-font_size : var(--vl-font_size-xxl); --elem-line_height : var(--vl-line_height-xxl); --elem-font_weight : var(--init-font_weight-bold); --elem-font_case : var(--init-font_case-caps); --elem-font_kerning : var(--vl-font_kerning-xl); } h3 { --elem-font_family : var(--init-font_stack-heading); --elem-font_size : var(--vl-font_size-xl); --elem-line_height : var(--vl-line_height-xl); --elem-font_weight : var(--init-font_weight-regular); --elem-font_case : var(--init-font_case-caps); --elem-font_kerning : var(--vl-font_kerning-xxl); } h4 { --elem-font_family : var(--init-font_stack-body); --elem-font_size : var(--vl-font_size-l); --elem-line_height : var(--vl-line_height-m ); --elem-font_weight : var(--init-font_weight-bold); --elem-font_case : var(--init-font_case-none); } p { --elem-txt-offset : 2px; } ul, ol { --elem-txt-offset : 2px; } .calendly { display : block; position : absolute; top: 60px; z-index: 10; right:20px;; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; border : 1px solid #fff; transform: rotate(10deg); } .calendly:hover { background-color: var(--vl-rose-hex); } .calendly__title { position: absolute; --r : 12; --rotation : var(--r) * 1deg; --elem-font_size : var(--vl-font_size-xs); --elem-line_height : var(--vl-line_height-s); --elem-font_case : var(--init-font_case-caps); --elem-font_weight : var(--init-font_weight-semibold); top: 0; left: 0; width: 100px; height: 100px; transform: rotate( calc( (180 - (var(--r) * 0.5) + ( (360 - (var(--letters) * var(--r))) / 2) ) * 1deg )); } .calendly__title span { display: block; position: absolute; width: 10px; text-align: center; height: 50px; left: calc(50% - 5px); top: 0; transform-origin: bottom center; } .calendly__title span:nth-child(1) {transform: rotate(calc(1 * var(--rotation))); } .calendly__title span:nth-child(2) {transform: rotate(calc(2 * var(--rotation))); } .calendly__title span:nth-child(3) {transform: rotate(calc(3 * var(--rotation))); } .calendly__title span:nth-child(4) {transform: rotate(calc(4 * var(--rotation))); } .calendly__title span:nth-child(5) {transform: rotate(calc(5 * var(--rotation))); } .calendly__title span:nth-child(6) {transform: rotate(calc(6 * var(--rotation))); } .calendly__title span:nth-child(7) {transform: rotate(calc(7 * var(--rotation))); } .calendly__title span:nth-child(8) {transform: rotate(calc(8 * var(--rotation))); } .calendly__title span:nth-child(9) {transform: rotate(calc(9 * var(--rotation))); } .calendly__title span:nth-child(10) {transform: rotate(calc(10 * var(--rotation))); } .calendly__title span:nth-child(11) {transform: rotate(calc(11 * var(--rotation))); } .calendly__title span:nth-child(12) {transform: rotate(calc(12 * var(--rotation))); } .calendly__title span:nth-child(13) {transform: rotate(calc(13 * var(--rotation))); } .calendly__title span:nth-child(14) {transform: rotate(calc(14 * var(--rotation))); } .calendly__title span:nth-child(15) {transform: rotate(calc(15 * var(--rotation))); } .calendly__title span:nth-child(16) {transform: rotate(calc(16 * var(--rotation))); } .calendly__title span:nth-child(17) {transform: rotate(calc(17 * var(--rotation))); } .calendly__title span:nth-child(18) {transform: rotate(calc(18 * var(--rotation))); } .calendly__title span:nth-child(19) {transform: rotate(calc(19 * var(--rotation))); } .calendly__title span:nth-child(20) {transform: rotate(calc(20 * var(--rotation))); } .calendly__title span:nth-child(21) {transform: rotate(calc(21 * var(--rotation))); } .calendly__title span:nth-child(22) {transform: rotate(calc(22 * var(--rotation))); } .calendly__title span:nth-child(23) {transform: rotate(calc(23 * var(--rotation))); } .calendly__title span:nth-child(24) {transform: rotate(calc(24 * var(--rotation))); } .calendly__title span:nth-child(25) {transform: rotate(calc(25 * var(--rotation))); } .calendly__title span:nth-child(26) {transform: rotate(calc(26 * var(--rotation))); } .calendly__title span:nth-child(27) {transform: rotate(calc(27 * var(--rotation))); } .calendly__title span:nth-child(28) {transform: rotate(calc(28 * var(--rotation))); } .calendly__title span:nth-child(29) {transform: rotate(calc(29 * var(--rotation))); } .calendly__title span:nth-child(30) {transform: rotate(calc(30 * var(--rotation))); } .calendly:after { --elem-font_family : var(--init-font_stack-icon); display: block; width: 100%; height: 100%; line-height: 100px; font-size: 40px; text-align: center; content:''; } @media only screen and (max-width: 880px) { body { /* LINE HEIGHTS */ --ul-line_height-xxxxl : 80; --ul-line_height-xxxl : 80; --ul-line_height-xxl : 48; --ul-line_height-xl : 40; --ul-line_height-l : 32; --ul-line_height-m : 24; --ul-line_height-s : 16; /* Font size */ --ul-font_size-xxxxl : 72; --ul-font_size-xxxl : 56; --ul-font_size-xxl : 42; --ul-font_size-xl : 28; --ul-font_size-l : 20; --ul-font_size-m : 18; --ul-font_size-s : 14; --ul-font_size-xs : 12; --vl-line_height-xxxxl : calc( var(--ul-line_height-xxxxl) * var(--util-px_rem) ); --vl-line_height-xxxl : calc( var(--ul-line_height-xxxl) * var(--util-px_rem) ); --vl-line_height-xxl : calc( var(--ul-line_height-xxl) * var(--util-px_rem) ); --vl-line_height-xl : calc( var(--ul-line_height-xl) * var(--util-px_rem) ); --vl-line_height-l : calc( var(--ul-line_height-l) * var(--util-px_rem) ); --vl-line_height-m : calc( var(--ul-line_height-m) * var(--util-px_rem) ); --vl-line_height-s : calc( var(--ul-line_height-s) * var(--util-px_rem) ); --vl-font_size-xxxxl : calc( var(--ul-font_size-xxxxl) * var(--util-px_rem) ); --vl-font_size-xxxl : calc( var(--ul-font_size-xxxl) * var(--util-px_rem) ); --vl-font_size-xxl : calc( var(--ul-font_size-xxl) * var(--util-px_rem) ); --vl-font_size-xl : calc( var(--ul-font_size-xl ) * var(--util-px_rem) ); --vl-font_size-l : calc( var(--ul-font_size-l) * var(--util-px_rem) ); --vl-font_size-m : calc( var(--ul-font_size-m) * var(--util-px_rem) ); --vl-font_size-s : calc( var(--ul-font_size-s) * var(--util-px_rem) ); --vl-font_size-xs : calc( var(--ul-font_size-xs ) * var(--util-px_rem) ); } } @media only screen and (max-width: 720px) { body { /* LINE HEIGHTS */ --ul-line_height-xxxxl : 48; --ul-line_height-xxxl : 48; --ul-line_height-xxl : 48; --ul-line_height-xl : 40; --ul-line_height-l : 32; --ul-line_height-m : 24; --ul-line_height-s : 16; /* Font size */ --ul-font_size-xxxxl : 48; --ul-font_size-xxxl : 48; --ul-font_size-xxl : 42; --ul-font_size-xl : 28; --ul-font_size-l : 20; --ul-font_size-m : 18; --ul-font_size-s : 14; --ul-font_size-xs : 12; --vl-line_height-xxxxl : calc( var(--ul-line_height-xxxxl) * var(--util-px_rem) ); --vl-line_height-xxxl : calc( var(--ul-line_height-xxxl) * var(--util-px_rem) ); --vl-line_height-xxl : calc( var(--ul-line_height-xxl) * var(--util-px_rem) ); --vl-line_height-xl : calc( var(--ul-line_height-xl) * var(--util-px_rem) ); --vl-line_height-l : calc( var(--ul-line_height-l) * var(--util-px_rem) ); --vl-line_height-m : calc( var(--ul-line_height-m) * var(--util-px_rem) ); --vl-line_height-s : calc( var(--ul-line_height-s) * var(--util-px_rem) ); --vl-font_size-xxxxl : calc( var(--ul-font_size-xxxxl) * var(--util-px_rem) ); --vl-font_size-xxxl : calc( var(--ul-font_size-xxxl) * var(--util-px_rem) ); --vl-font_size-xxl : calc( var(--ul-font_size-xxl) * var(--util-px_rem) ); --vl-font_size-xl : calc( var(--ul-font_size-xl ) * var(--util-px_rem) ); --vl-font_size-l : calc( var(--ul-font_size-l) * var(--util-px_rem) ); --vl-font_size-m : calc( var(--ul-font_size-m) * var(--util-px_rem) ); --vl-font_size-s : calc( var(--ul-font_size-s) * var(--util-px_rem) ); --vl-font_size-xs : calc( var(--ul-font_size-xs ) * var(--util-px_rem) ); } } @media only screen and (max-width: 520px) { body { /* LINE HEIGHTS */ --ul-line_height-xxxxl : 40; --ul-line_height-xxxl : 40; --ul-line_height-xxl : 40; --ul-line_height-xl : 40; --ul-line_height-l : 32; --ul-line_height-m : 24; --ul-line_height-s : 16; /* Font size */ --ul-font_size-xxxxl : 40; --ul-font_size-xxxl : 36; --ul-font_size-xxl : 32; --ul-font_size-xl : 28; --ul-font_size-l : 20; --ul-font_size-m : 18; --ul-font_size-s : 14; --ul-font_size-xs : 12; --vl-line_height-xxxxl : calc( var(--ul-line_height-xxxxl) * var(--util-px_rem) ); --vl-line_height-xxxl : calc( var(--ul-line_height-xxxl) * var(--util-px_rem) ); --vl-line_height-xxl : calc( var(--ul-line_height-xxl) * var(--util-px_rem) ); --vl-line_height-xl : calc( var(--ul-line_height-xl) * var(--util-px_rem) ); --vl-line_height-l : calc( var(--ul-line_height-l) * var(--util-px_rem) ); --vl-line_height-m : calc( var(--ul-line_height-m) * var(--util-px_rem) ); --vl-line_height-s : calc( var(--ul-line_height-s) * var(--util-px_rem) ); --vl-font_size-xxxxl : calc( var(--ul-font_size-xxxxl) * var(--util-px_rem) ); --vl-font_size-xxxl : calc( var(--ul-font_size-xxxl) * var(--util-px_rem) ); --vl-font_size-xxl : calc( var(--ul-font_size-xxl) * var(--util-px_rem) ); --vl-font_size-xl : calc( var(--ul-font_size-xl ) * var(--util-px_rem) ); --vl-font_size-l : calc( var(--ul-font_size-l) * var(--util-px_rem) ); --vl-font_size-m : calc( var(--ul-font_size-m) * var(--util-px_rem) ); --vl-font_size-s : calc( var(--ul-font_size-s) * var(--util-px_rem) ); --vl-font_size-xs : calc( var(--ul-font_size-xs ) * var(--util-px_rem) ); } } /********************************************************/ /* /* THEMES /* /********************************************************/ body { --theme-color-txt-a : 1; --theme-color-ttl-a : 1; --theme-color-focus-a : 1; --theme-color-inverted-a : 1; --theme-color-pale-a : 1; --theme-color-bkg-a : 1; } body, [data-theme|="white"] { --theme-color-txt-h : var(--vl-txt_gray-h); --theme-color-txt-s : var(--vl-txt_gray-s); --theme-color-txt-l : var(--vl-txt_gray-l); --theme-color-ttl-h : var(--vl-ttl_gray-h); --theme-color-ttl-s : var(--vl-ttl_gray-s); --theme-color-ttl-l : var(--vl-ttl_gray-l); --theme-color-focus-h : var(--vl-rose-h); --theme-color-focus-s : var(--vl-rose-s); --theme-color-focus-l : var(--vl-rose-l); --theme-color-focus-hsl : hsl(var(--vl-rose-h), calc(var(--vl-rose-s) * 1%), calc(var(--vl-rose-l) * 1%)); --theme-color-pale-h : var(--vl-txt_pale-h); --theme-color-pale-s : var(--vl-txt_pale-s); --theme-color-pale-l : var(--vl-txt_pale-l); --theme-color-dark-h : var(--init-black-h); --theme-color-dark-s : var(--init-black-s); --theme-color-dark-l : var(--init-black-l); --theme-color-inverted-h : var(--init-white-h); --theme-color-inverted-s : var(--init-white-s); --theme-color-inverted-l : var(--init-white-l); --theme-color-bkg-h : var(--init-gray_95-h); --theme-color-bkg-s : var(--init-gray_95-s); --theme-color-bkg-l : var(--init-gray_95-l); } [data-theme|="black"] { --theme-color-txt-h : var(--init-gray_90-h); --theme-color-txt-s : var(--init-gray_90-s); --theme-color-txt-l : var(--init-gray_90-l); --theme-color-ttl-h : var(--init-white-h); --theme-color-ttl-s : var(--init-white-s); --theme-color-ttl-l : var(--init-white-l); --theme-color-focus-h : var(--vl-rose-h); --theme-color-focus-s : var(--vl-rose-s); --theme-color-focus-l : var(--vl-rose-l); --theme-color-pale-h : var(--init-gray_60-h); --theme-color-pale-s : var(--init-gray_60-s); --theme-color-pale-l : var(--init-gray_60-l); --theme-color-dark-h : var(--init-white-h); --theme-color-dark-s : var(--init-white-s); --theme-color-dark-l : var(--init-white-l); --theme-color-inverted-h : var(--init-white-h); --theme-color-inverted-s : var(--init-white-s); --theme-color-inverted-l : var(--init-white-l); --theme-color-bkg-h : var(--init-gray_30-h); --theme-color-bkg-s : var(--init-gray_30-s); --theme-color-bkg-l : var(--init-gray_30-l); } /********************************************************/ /* /* Layout /* /********************************************************/ body { background-color: #fff;} body.home { background-color: rgb(242, 242, 242); } main { width: 100%;} .footer { position: relative; z-index: 3 } /********************************************************/ /* /* Component : Entry /* /********************************************************/ [class|="entry"]:empty { display: none; } [class|="entry"] a[href]:not([href=""]) { --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); --elem-color-txt-a : var(--theme-color-focus-a); --elem-font_weight : var(--init-font_weight-semibold); text-decoration : underline; } [class|="entry"] ul, [class|="entry"] ol { --elem-line_height : var(--vl-line_height-m); --elem-padding_mod-start : var(--init-spacing_mod); list-style : none; } [class|="entry"] ol { counter-reset : ol-counter; } [class|="entry"] li { --elem-margin_mod-bottom : var(--init-spacing_mod-xs); position : relative; } [class|="entry"] ul li:before { --elem-size_block : .8em; --elem-size_inline : .8em; content : ''; background-color : var(--color-txt); } [class|="entry"] ol li:before { --elem-size_block : 1.2em; --elem-size_inline : 1em; counter-increment : ol-counter; content : counter(ol-counter); } [class|="entry"] li:before { --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); --elem-font_weight : var(--init-font_weight-bold); text-align : center; display : inline-block; position : absolute; vertical-align : top; top : calc(var(--elem-size_block ) * -0.5); left : calc(var(--elem-size_inline ) * -0.5); transform : translate( calc( var(--init-spacing_mod, 0) * var(--spacing) * -0.5), calc(var(--elem-line_height) * 0.5) ); } [class|="entry"] ul, [class|="entry"] ol, [class|="entry"] figcaption, [class|="entry"] table { --elem-margin_mod-bottom : var(--init-spacing_mod, 1rem); } [class|="entry"] img, [class|="entry"] .alignleft, [class|="entry"] img.alignleft, [class|="entry"] .alignright, [class|="entry"] img.alignright, [class|="entry"] .aligncenter, [class|="entry"] img.aligncenter, [class|="entry"] .alignnone, [class|="entry"] img.alignnone { --elem-margin_mod-bottom : var(--elem-spacing_mod, var(--vl-spacing_mod, var(--init-spacing_mod, 1))); } [class|="entry"] .alignleft, [class|="entry"] img.alignleft { --elem-margin_mod-end : var(--elem-spacing_mod, var(--vl-spacing_mod, var(--init-spacing_mod, 1))); float : left; } [class|="entry"] .alignright, [class|="entry"] img.alignright { --elem-margin_mod-start : var(--elem-spacing_mod, var(--vl-spacing_mod, var(--init-spacing_mod, 1))); float : right; } [class|="entry"] .aligncenter, [class|="entry"] img.aligncenter { margin-inline-end : auto; margin-inline-start : auto; display : block; clear : both; } [class|="entry"] mark { --elem-color-bkg-h : var(--theme-color-focus-h); --elem-color-bkg-s : var(--theme-color-focus-s); --elem-color-bkg-l : var(--theme-color-focus-l); --elem-color-txt-h : var(--theme-color-inverted-h); --elem-color-txt-s : var(--theme-color-inverted-s); --elem-color-txt-l : var(--theme-color-inverted-l); --hrztl-spacing : calc( var(--init-spacing_mod-xxs) * var(--spacing) ); --leading : 0.25rem; --spread : calc( var(--line_height) / 2 - var(--font_size) / 2 - var(--leading) ); --shadow_offset_left : calc( -1 * var(--hrztl-spacing) + var(--spread) ); --shadow_offset_right : calc( var(--hrztl-spacing) - var(--spread) ); --shadow : var(--shadow_offset_left) 0 0 var(--spread) var(--color-bkg), var(--shadow_offset_right) 0 0 var(--spread) var(--color-bkg); background-color : var(--color-bkg); box-shadow : var(--shadow); } [class|="entry"] .pale { --elem-color-txt-h : var(--theme-color-pale-h); --elem-color-txt-s : var(--theme-color-pale-s); --elem-color-txt-l : var(--theme-color-pale-l); } [class|="entry"] > *:last-child { --elem-margin_mod-bottom : 0; } [class|="entry"][class*="--sidebar"] { --elem-font_size : var(--vl-font_size-s); --elem-line_height : var(--vl-line_height-m); } [class|="entry"] .embed-container { --elem-margin_mod-bottom : var(--init-spacing_mod, 1rem); display : block; position : relative; padding-bottom : var(--ratio, 56.25%); overflow : hidden; max-width : 100%; background : black; } [class|="entry"] .embed-container iframe, [class|="entry"].embed-container object, [class|="entry"] .embed-container embed { --elem-size_inline : 100%; --elem-size_block : 100%; position : absolute; top : 0; left : 0; } /********************************************************/ /* /* Component : Link-list /* /********************************************************/ [class|="items"] { --ul-item-lh : var(--ul-line_height-xxxl); --vl-item-lh : var(--vl-line_height-xxxl); --vl-item-fs : var(--vl-font_size-xxxl); box-sizing : border-box; inline-size : 100%; max-inline-size : 194rem; min-height : 100vh; border : 3rem solid transparent; border-bottom-width : 5rem; margin-inline-start : auto; margin-inline-end : auto; position : relative; overflow : hidden; } [class|="items"]:before { content : ''; position : absolute; top : 0; left : 0; right : 0; bottom : 0; background : linear-gradient( to bottom, hsla(var(--init-gray_85-h), calc(var(--init-gray_85-s) * 1%), calc(var(--init-gray_85-l) * 1%), 0) 0%, hsla(var(--init-gray_85-h), calc(var(--init-gray_85-s) * 1%), calc(var(--init-gray_85-l) * 1%), 0) calc( (100 - (200 / var(--ul-item-lh) ) ) * 1% ), hsla(var(--init-gray_85-h), calc(var(--init-gray_85-s) * 1%), calc(var(--init-gray_85-l) * 1%), 1) calc( (100 - (200 / var(--ul-item-lh) ) ) * 1% ), hsla(var(--init-gray_85-h), calc(var(--init-gray_85-s) * 1%), calc(var(--init-gray_85-l) * 1%), 1) 100% ); background-size : 100% var(--vl-item-lh ); background-clip : content-box; } [class|="items__container"] { transition : none; opacity : 1; z-index : 2; pointer-events : all; position : relative; transform : translateY( 0) ); } [class|="items__container"][data-active="0"] { opacity : 0; z-index : 1; pointer-events : none; position : absolute; top : 0; transform : translateY( calc( var(--vl-item-lh ) * .5) ); } [class|="items__container"][data-trx="1"] { opacity : 0; transform : translateY( calc( var(--vl-item-lh ) * -.5) ); transition : all ease 0.2s; } [class|="items__container"][data-active="0"][data-trx="1"] { opacity : 1; transform : translateY(0); } [class|="items__item"] { --elem-font_family : var(--init-font_stack-degular-text); --elem-font_size : var(--vl-item-fs); --elem-line_height : var(--vl-item-lh ); --elem-font_weight : var(--init-font_weight-semibold); --elem-color-txt-h : var(--init-gray_85-h); --elem-color-txt-s : var(--init-gray_85-s); --elem-color-txt-l : var(--init-gray_85-l); white-space : nowrap; position : relative; z-index : 1; } [class|="items__item"][data-visible="hidden"] { display : none; pointer-events : none; } [class|="items__item"]:after { content: '\00a0\00a0\00a0'; white-space : nowrap; display : inline; } [class|="items__link"] { white-space : normal; } [class|="items__link"]:hover { --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); } @media only screen and (max-width: 880px) { [class|="items"] { border : 2rem solid transparent; border-bottom-width : 5rem; } } @media only screen and (max-width: 720px) { [class|="items"] { --ul-item-lh : var(--ul-line_height-xxxl); --vl-item-lh : var(--vl-line_height-xxxl); --vl-item-fs : var(--vl-font_size-l); } } @media only screen and (max-width: 520px) { [class|="items"] { --ul-item-lh : var(--ul-line_height-xxxl); --vl-item-lh : var(--vl-line_height-xxxl); --vl-item-fs : var(--vl-font_size-l); } } /********************************************************/ /* /* Component : Widget /* /********************************************************/ [class|="widget"] { display : block; position : sticky; width : 100%; max-width : 58rem; bottom : 0; height : 0; overflow : visible; margin-inline-start : min( calc( 50% + (194rem / 2) - 58rem - 3rem ), calc( 100% - 58rem - 3rem ) ); margin-inline-end : auto; z-index : 2; } [class|="navbar__items"] [class|="widget"] { position : relative; margin-inline-start : auto; margin-inline-end : auto; height : auto; flex-grow: 2; display: flex; } [class|="navbar__items"] .card__title--cke_programmation--selectedworks { --elem-font_size: var(--vl-font_size-m); --elem-line_height: var(--vl-line_height- ); --elem-color-txt-h: var(--theme-color-bkg-h); --elem-color-txt-s: var(--theme-color-bkg-s); --elem-color-txt-l: var(--theme-color-bkg-l); --elem-color-txt-a: var(--theme-color-bkg-a); } [class|="widget__inner"] { position : absolute; width : 100%; bottom : 0; background-color : #fff; border-left : 1px solid var(--init-gray_60-hsl); border-right : 1px solid var(--init-gray_60-hsl); border-top : 1px solid var(--init-gray_60-hsl); max-height : calc(100vh - 16rem); } [class|="navbar__items"] [class|="widget__inner"] { position: relative; align-self: flex-end; border-left: none; border-right: none; } [class|="widget__inner"]:hover { overflow-y : auto; } [class|="widget__header"] { --elem-font_family : var(--init-font_stack-arial); --elem-font_size : var(--vl-font_size-xs); --elem-line_height : var(--vl-line_height-s ); --elem-font_weight : var(--init-font_weight-bold); --elem-font_kerning : var(--vl-font_kerning-l); --elem-font_case : var(--init-font_case-caps); --elem-color-txt-h : var(--init-gray_90-h); --elem-color-txt-s : var(--init-gray_90-s); --elem-color-txt-l : var(--init-gray_90-l); --elem-color-bkg-h : var(--theme-color-focus-h); --elem-color-bkg-s : var(--theme-color-focus-s); --elem-color-bkg-l : var(--theme-color-focus-l); min-block-size : 5rem; position : relative; z-index : 2; display : flex; align-items : center; justify-content : space-between; border-top : 1px solid var(--init-gray_60-hsl); padding-inline-start : 3rem; padding-inline-end : 3rem; background-color : var(--cutom-bg, --color-bkg); color : var(--cutom-txt, --color-txt); } [class|="widget__header"][class*="--works"] { --elem-color-bkg-h : var(--init-gray_30-h); --elem-color-bkg-s : var(--init-gray_30-s); --elem-color-bkg-l : var(--init-gray_30-l); background-color : var(--color-bkg); border-top: none; } [class|="widget__filter"] { transition : height ease .4s; overflow : hidden; } [class|="widget__filter"]:not([data-collapsed]), [class|="widget__filter"][data-collapsed=""] { height : 0; } [class|="widget__item"] { --elem-font_family : var(--init-font_stack-arial); --elem-font_size : var(--vl-font_size-xs); --elem-line_height : var(--vl-line_height-s ); --elem-font_weight : var(--init-font_weight-bold); --elem-font_kerning : var(--vl-font_kerning-l); --elem-font_case : var(--init-font_case-caps); --elem-color-txt-h : var(--init-gray_55-h); --elem-color-txt-s : var(--init-gray_55-s); --elem-color-txt-l : var(--init-gray_55-l); --elem-color-bkg-h : var(--theme-color-focus-h); --elem-color-bkg-s : var(--theme-color-focus-s); --elem-color-bkg-l : var(--theme-color-focus-l); min-block-size : 5rem; display : flex; align-items : center; border-top : 1px solid var(--init-gray_60-hsl); padding-inline-start : 3rem; padding-inline-end : 3rem; } [class|="widget__count"] { --elem-color-txt-h : var(--init-gray_20-h); --elem-color-txt-s : var(--init-gray_20-s); --elem-color-txt-l : var(--init-gray_20-l); flex-grow : 2; display : flex; align-items : center; justify-content : flex-end } [class|="widget__count"][class*="--header"] { --elem-color-txt-h : var(--init-gray_90-h); --elem-color-txt-s : var(--init-gray_90-s); --elem-color-txt-l : var(--init-gray_90-l); color : var(--cutom-txt, --color-txt); } [class|="widget__count"]:after { --elem-font_family : var(--init-font_stack-icon); --elem-font_weight : var(--vl-font_weight-regular); display : inline-block; transform : translateY(-1px); font-size : 1.5em; padding-left : 1em; content : '\f30b'; } [class|="widget__count"][class*="--header"]:after { content : '\f067'; } [class|="widget__toggle"]:checked + [class|="widget__header"] [class|="widget__count"][class*="--header"]:after, [class|="widget__toggle"]:checked + [class|="widget__header"] [class|="widget__count"][class*="--header"]:after, [class|="widget__toggle"]:checked + [class|="widget__header"] [class|="widget__count"][class*="--header"]:after { content : '\f068'; } [class|="widget__toggle"] + [class|="widget__name"] { display: flex; align-items : center; } [class|="widget__toggle"] + [class|="widget__name"]:before { content : ''; display : inline-block; width : .8em; height : .8em; outline : 2px solid var(--init-gray_20-hsl);; border : 2px solid white; margin-inline-end : 1em; transition : background-color ease .4s; } [class|="widget__toggle"]:checked + [class|="widget__name"]:before { background-color: var(--cutom-bg, --color-bkg); } @media only screen and (max-width: 600px) { [class|="widget"] { display: none; } [class|="navbar__items"] [class|="widget"] { display: flex; } } /********************************************************/ /* /* Component : Google map /* /********************************************************/ [class|="google-map"] { width: 100%; height: 100%; } /********************************************************/ /* /* Component : Gravity forms /* /********************************************************/ .gform_body{ width : 100%; } .gform_fields { --gutter : var(--init-spacing_mod-xxs); /*calc(var(--init-spacing_mod-s) * var(--spacing) );*/ --elem-size_inline : calc(100% + (var(--gutter) * 2 * var(--spacing )) ); transform : translateX(calc(var(--gutter) * var(--spacing ) * -1)); display : flex; flex-wrap : wrap; padding-left : 0; } .gfield { --elem-padding_mod-start : var(--gutter); --elem-padding_mod-end : var(--gutter); --elem-padding_mod-bottom : var(--init-spacing_mod-s); line-height : inherit; margin-bottom : 0; min-width: 100%; } .gform_hidden { --elem-padding_mod-start : 0; --elem-padding_mod-end : 0; --elem-padding_mod-bottom : 0; width: 100%; } .gfield:before { display: none!important; } .gfield.width_medium { width: 50%;} .gfield.width_large { width: 100%;} .gfield_label { display: none; /* --elem-font_family : var(--vl-font_stack-small); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_weight : var(--vl-font_weight-medium); --elem-font_case : var(--vl-font_case-caps); --elem-font_size : var(--vl-font_size-14); --elem-color-txt-h : var(--theme-color-lbl-h); --elem-color-txt-s : var(--theme-color-lbl-s); --elem-color-txt-l : var(--theme-color-lbl-l); --elem-padding_mod-start : var(--gutter); --elem-padding_mod-end : var(--gutter); transform : translateY(100%); transition : all ease .4s; */ } .gfield_description { --elem-font_family : var(--vl-font_stack-small); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_weight : var(--vl-font_weight-medium); --elem-font_size : var(--vl-font_size-xs ); --elem-line_height : var(--vl-line_height-s); } /*.hidden_label { padding-top: 32px; }*/ .hidden_label .gfield_label { display: none;} /* .gfield_label.focus { --elem-font_size : var(--vl-font_size-12); transform : translateY(0%); }*/ .validation_message, .validation_error { --elem-font_family : var(--vl-font_stack-small); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_weight : var(--vl-font_weight-medium); --elem-font_size : var(--vl-font_size-xs ); --elem-line_height : var(--vl-line_height-s); color : hsl(0, 100%, 50%); } .validation_error { display: none; } .gfield_required { padding-left: 0.25em; } img.gform_ajax_spinner { display: none !important; } .gfield input[type='text'], .gfield input[type='email'], .gfield input[type='tel'], .gfield textarea, .gfield select { --elem-padding_mod-start : var(--gutter); --elem-padding_mod-end : var(--gutter); --elem-color-bkg-h : var(--theme-color-bkg-h); --elem-color-bkg-s : var(--theme-color-bkg-s); --elem-color-bkg-l : calc( var(--theme-color-bkg-l) + 4 ); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-font_family : var(--vl-font_stack-small); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_weight : var(--vl-font_weight-regular); --elem-font_case : var(--vl-font_case-regular); --elem-font_size : var(--vl-font_size-14); width : 100%; background-color : var(--color-bkg); border : none; border-bottom : 2px solid } .gfield input[type='text'], .gfield input[type='email'], .gfield input[type='tel'], .gfield select { --elem-line_height : var(--vl-line_height-40); height : var(--vl-line_height-40); } .gfield textarea { --elem-line_height : var(--vl-line_height-32); } .gfield select { --elem-font_case : var(--vl-font_case-caps); --elem-font_weight : var(--vl-font_weight-medium); --elem-color-txt-h : var(--theme-color-lbl-h); --elem-color-txt-s : var(--theme-color-lbl-s); --elem-color-txt-l : var(--theme-color-lbl-l); } .ginput_container_fileupload span { --elem-font_family : var(--vl-font_stack-small); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_weight : var(--vl-font_weight-regular); --elem-font_size : var(--vl-font_size-12); --elem-color-txt-h : 0; --elem-color-txt-s : 100; --elem-color-txt-l : 100; --elem-padding_mod-start : var(--gutter); --elem-padding_mod-end : var(--gutter); } .gfield input[type='file'] { display: block; position: fixed; top: 0; left: -9999em; } .gform_footer .button { --elem-color-txt-h: var(--theme-color-focus-h); --elem-color-txt-s: var(--theme-color-focus-s); --elem-color-txt-l: var(--theme-color-focus-l); --elem-padding_mod-start : var(--gutter); --elem-padding_mod-end : var(--gutter); --elem-color-bkg-h : var(--theme-color-bkg-h); --elem-color-bkg-s : var(--theme-color-bkg-s); --elem-color-bkg-l : calc( var(--theme-color-bkg-l) + 4 ); background: none; border: none; padding: 10px; background-color : var(--color-bkg); border : none; border-bottom : 2px solid #fff; } .gform_footer .button:hover { border-bottom : 2px solid; } /********************************************************/ /* /* Component : Pop Up /* /********************************************************/ [class*="--popup-grid"] { display : grid ; grid-template-columns : [full-start] auto [outer-start] 3rem [inner-start main-start] 153rem [inner-end main-end] 3rem [outer-end] auto [full-end]; grid-template-rows : [outer-start banner-start] 3rem [inner-start title-start] auto [inner-end title-end ] 3rem [outer-end banner-end]; column-gap : 0; row-gap : 0; } @media only screen and (max-width: 1272px) { [class*="--popup-grid"] { grid-template-columns :[full-start outer-start] 3rem [inner-start main-start] 1fr [inner-end main-end] 3rem [full-end outer-end]; } } @media only screen and (max-width: 880px) { [class*="--popup-grid"] { grid-template-columns :[full-start outer-start] 2rem [inner-start main-start] 1fr [inner-end main-end] 2rem [full-end outer-end]; } } [class|="popup__figure"] { grid-column : full; grid-row : banner; position: relative; } [class|="popup__figure"]:after { position : absolute; content : ''; width : 100%; height : 100%; top : 0; left : 0; background : rgba(255,255,255,.6) } [class|="popup__figure__href"] { display : block; height: 100%; } [class|="popup__thumbnail"] { margin-inline : auto; display : block; width : 100%; height : 100%; max-width : 275rem; max-height : 100rem; object-fit : cover; } [class|="popup__body"] { grid-column : inner; grid-row : inner-start; align-self : center; padding : 2rem; position: relative; z-index: 2; } [class|="popup__title"] { --elem-font_size: var(--vl-font_size-xxl); --elem-line_height: var(--vl-line_height-xxl); } /********************************************************/ /* /* Component : Cards /* /********************************************************/ /* CARDS */ [class|="cards"] { max-inline-size : min(156rem, 100%); border-left : 3rem solid transparent; border-right : 3rem solid transparent; margin-block-start : 10rem; margin-block-end : 6rem; margin-inline-start : auto; margin-inline-end : auto; display : grid ; grid-template-columns : 1fr; column-gap : 0; row-gap : 6rem; inline-size : 100% } [class|="cards"][class*="--small"] { display : grid ; grid-template-columns : 1fr 1fr 1fr; column-gap : 6rem; } [class|="cards"][class*="--large"] { display : grid ; grid-template-columns : 1fr 1fr; column-gap : 6rem; } @media only screen and (max-width: 980px) { [class|="cards"][class*="--small"] { grid-template-columns : 1fr 1fr; } } @media only screen and (max-width: 880px) { [class|="cards"] { border-left : 2rem solid transparent; border-right : 2rem solid transparent; } } @media only screen and (max-width: 720px) { [class|="cards"][class*="--small"], [class|="cards"][class*="--large"] { grid-template-columns : 1fr; } } /* CARD */ [class|="card"] { display : flex; flex-wrap : nowrap; flex-direction : column; justify-content : flex-end; margin-block-end : 3rem; align-self : end; } [class|="card__header"] { display : block; width : 100%; } [class|="card__title"] { --elem-font_family : var(--init-font_stack-degular); --elem-font_size : var(--vl-font_size-xl); --elem-line_height : var(--vl-line_height-xl ); --elem-font_weight : var(--init-font_weight-regular); --elem-font_case : var(--init-font_case-none); --elem-font_kerning : var(--vl-font_kerning-xxl); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); padding-block-end : 3rem; border-bottom : 1px solid hsl(var(--theme-color-focus-h), calc(var(--theme-color-focus-s) * 1%), calc(var(--theme-color-focus-l) * 1%)) } [class|="card__figure__href"] { background-image : url(images/sporobole.svg); background-color : #fff; background-size : contain; block-size : 45rem; display : block; position : relative; margin-bottom : 3rem; } [class|="card__thumbnail"] { position : absolute; top : 0; left : 0; width : 100%; height : 100%; object-fit : cover; } [class|="card__body"] { margin-block-end : 3rem; } [class|="card__title"][class*="--sidebar"] { --elem-font_family : var(--init-font_stack-courrier); --elem-font_weight : var(--init-font_weight-bold); --elem-font_size : var(--vl-font_size-m); --elem-line_height : var(--vl-line_height-m ); --elem-font_case : var(--init-font_case-caps); --elem-font_kerning : normal; padding-block-end : 0; margin-block-end : 3rem; border-bottom : none; } [class|="card"][class*="--archive"] { flex-direction : row; flex-wrap : wrap; justify-content : space-between; align-items : center; } [class|="card__header"][class*="--archive"], [class|="card__figure"][class*="--archive"], [class|="card__footer"][class*="--archive"] { display : contents; } [class|="card__title"][class*="--archive"], [class|="card__figure__href"][class*="--archive"] { flex-basis : 100%; } [class|="card__footer__action"][class*="--archive"] { display : inline-block; justify-self : flex-end; order : 4; } [class|="card__meta"][class*="--archive"] { --elem-font_weight : var( --init-font_weight-bold ); display : inline-block; order : 3; min-width : 1px; } [class|="card"][class*="--selectedworks"] { padding : 3rem; padding-bottom : 0; } [class|="card__title"][class*="--selectedworks"] { --elem-font_family : var(--init-font_stack-arial); --elem-font_weight : var(--init-font_weight-bold); --elem-font_kerning : normal; padding-block-end : 0; margin-block-end : 1rem; border-bottom : none; } [class|="card__figure"][class*="--selectedworks"] { margin-top : -3rem; margin-left : -3rem; width : calc( 100% + 6rem); } [class|="card__figure__href"][class*="--selectedworks"] { block-size : 17rem; } [class|="card__body"][class*="--selected_works"] { padding: 0 3rem 3rem 3rem; } [class|="card"][class*="--main"][class*="--adress"] { grid-column : sidebar-inv; grid-row : body; align-self: flex-start; } [class|="card"][class*="--main"][class*="--map"] { grid-column : main-inv; grid-row : body; align-self : stretch; } [class|="card"][class*="--main"][class*="--galleryhours"], [class|="card"][class*="--main"][class*="--office_hours"] { grid-column : inner; grid-row : gallery; align-self : flex-start; } [class|="card"][class*="--main"][class*="--galleryhours"]:not(:last-of-type), [class|="card"][class*="--main"][class*="--office_hours"]:not(:last-of-type) { grid-column : left-half; } [class|="card"][class*="--main"][class*="--galleryhours"] ~ [class|="card"][class*="--main"][class*="--office_hours"] { grid-column : right-half; } @media only screen and (max-width: 720px) { [class|="card"][class*="--main"][class*="--adress"] { grid-column : left-half; } [class|="card"][class*="--main"][class*="--map"] { grid-column : right-half; } [class|="card"][class*="--main"][class*="--galleryhours"], [class|="card"][class*="--main"][class*="--office_hours"] { grid-column : inner!important; } [class|="card"][class*="--main"][class*="--galleryhours"] ~ [class|="card"][class*="--main"][class*="--office_hours"] { grid-row : footer; } } @media only screen and (max-width: 680px) { [class|="card"][class*="--main"][class*="--adress"] { grid-column : inner; } [class|="card"][class*="--main"][class*="--map"] { display : none; } } /********************************************************/ /* /* Component : Singles /* /********************************************************/ [class|="single"] { inline-size : 100%; border-left : none; border-right : none; margin-block-start : 3rem; margin-inline-start : auto; margin-inline-end : auto; } [class*="--single-grid"] { display : grid ; grid-template-columns : [full-start] auto [outer-start] 3rem [inner-start main-start sidebar-inv-start left-half-start] 48rem [sidebar-inv-end] 9rem [main-inv-start] 15rem [left-half-end] 9rem [right-half-start] 15rem [main-end] 9rem [sidebar-start] 48rem [inner-end main-inv-end sidebar-end right-half-end] 3rem [outer-end] auto [full-end]; grid-template-rows : [header-start] auto [header-end banner-start] auto [banner-end body-start] auto [body-end aside-start] auto [aside-end gallery-start] auto [gallery-end footer-start] auto [footer-end]; column-gap : 0; row-gap : 0; } @media only screen and (max-width: 1272px) { [class*="--single-grid"] { grid-template-columns : [full-start outer-start] 3rem [inner-start main-start sidebar-inv-start left-half-start] 2fr [sidebar-inv-end] 9rem [main-inv-start] 1fr [left-half-end] 9rem [right-half-start] 1fr [main-end] 9rem [sidebar-start] 2fr [inner-end main-inv-end sidebar-end right-half-end] 3rem [ full-endouter-end] } } @media only screen and (max-width: 880px) { [class*="--single-grid"] { grid-template-columns : [full-start outer-start] 2rem [inner-start main-start sidebar-inv-start left-half-start] 2fr [sidebar-inv-end] 4rem [main-inv-start] 1fr [left-half-end] 4rem [right-half-start] 1fr [main-end] 6rem [sidebar-start] 2fr [inner-end main-inv-end sidebar-end right-half-end] 2rem [ full-endouter-end] } } [class|="single__article"] { display : contents; } [class|="single__header"] { grid-column : inner; grid-row : header; margin-bottom : 6rem; } [class|="single__title"] { --elem-font_family : var(--init-font_stack-degular); --elem-font_size : var(--vl-font_size-xl); --elem-line_height : var(--vl-line_height-xl ); --elem-font_weight : var(--init-font_weight-regular); --elem-font_case : var(--init-font_case-none); --elem-font_kerning : var(--vl-font_kerning-xxl); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); padding-block-end : 3rem; border-bottom : 1px solid hsl(var(--theme-color-focus-h), calc(var(--theme-color-focus-s) * 1%), calc(var(--theme-color-focus-l) * 1%)) } [class|="single__title"][class*="--main"]:not([class*="--footer"]) { grid-column : inner; grid-row : header ; --elem-font_size : var(--vl-font_size-xxxxl ); --elem-line_height : var(--vl-line_height-xxxxl); --elem-font_weight : var(--init-font_weight-bold); --elem-font_kerning : var(--vl-font_kerning-m); padding-block-end : 0; border-bottom : none; margin-block-start : 6rem; margin-block-end : 6rem; } [class|="single__meta__content"][class*="--event"] { border-top : 1px solid rgba(0,0,0,0.28); border-bottom : 1px solid rgba(0,0,0,0.28); padding-top : calc(3rem - 1px); padding-bottom : calc(3rem - 1px); margin-top : 3rem; margin-bottom : 3rem; } [class|="single__meta__items"] { text-transform : uppercase; --elem-font_family : var(--init-font_stack-degular-display); --elem-font_size : var(--vl-font_size-l); --elem-line_height : var(--vl-line_height-l); font-weight: : var(--init-font_weight-light); } [class|="single__meta__items"][class*="--dates"] { font-weight : var(--init-font_weight-bold); } [class|="single__figure"] { grid-column : full; grid-row : banner; margin-block-end : 10rem; } [class|="single__figure__href"] { display : contents; } [class|="single__thumbnail"] { margin-inline : auto; display : block; width : 100%; height : auto; max-width : 275rem; max-height : 100rem; min-height : 38rem; object-fit : cover; } [class|="single__body"] { grid-column : inner; grid-row : body; margin-block-end : 10rem; } [class|="single__sidebar"] + [class|="single__article"] [class|="single__body"] { grid-column : main; grid-row : body; } [class|="single__sidebar"] { grid-column : sidebar; grid-row : body; margin-block-end : 10rem; } [class|="single__sidebar__title"] { --elem-font_family : var(--init-font_stack-degular); --elem-font_size : var(--vl-font_size-xl); --elem-line_height : var(--vl-line_height-xl ); --elem-font_weight : var(--init-font_weight-regular); --elem-font_case : var(--init-font_case-none); --elem-font_kerning : var(--vl-font_kerning-xxl); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); padding-block-end : 3rem; border-bottom : 1px solid hsl(var(--theme-color-focus-h), calc(var(--theme-color-focus-s) * 1%), calc(var(--theme-color-focus-l) * 1%)) } [class|="single__slider"] { grid-column : full; grid-row : gallery; } [class|="single__footer"] { grid-column : full; grid-row : footer ; // margin-block-end : 10rem; } [class|="popup"][class*="--single"][class*="--footer"] { grid-column : full; grid-row : banner ; } [class|="slider"][class*="--single"][class*="--main"] { grid-column : full; grid-row : gallery; } [class|="slider__header"][class*="--single"][class*="--main"] { grid-column : inner; grid-row : header; // margin-block-end : 6rem; } [class|="slider__items"][class*="--single"][class*="--main"] { grid-column : inner; grid-row : banner; } [class|="slider__nav"][class*="--single"][class*="--main"] { grid-column : inner; grid-row : banner; } [class|="btn"][class*="--slider"] { grid-column : inner; grid-row : banner; } @media only screen and (max-width: 720px) { [class|="single__body"] { grid-column : inner; grid-row : body; margin-block-end : 10rem; } [class|="single__sidebar"] + [class|="single__article"] [class|="single__body"] { grid-column : inner; grid-row : body; } [class|="single__sidebar"] { grid-column : inner; grid-row : aside; margin-block-end : 10rem; } } [class|="single__body"][class*="--page"][class*="--main"], [class|="single__figure"][class*="--page"][class*="--main"], [class|="single__title"][class*="--page"][class*="--main"] { margin-block-end: 0; } [class|="single__meta"][class*="--page"][class*="--main"] { display: none; } [class|="entry"][class*="--main"][class*="--page"], [class|="single__thumbnail"][class*="--page"][class*="--main"] { margin-block-end : 10rem; } [class|="single__figure__href"][class*="--page"][class*="--main"]:empty { display: none; } [class|="single__figure__href"][class*="--page"][class*="--main"]:empty { display: none; } /********************************************************/ /* /* Component : Sliders /* /********************************************************/ [class|="slider"] { margin-block-end : 10rem; overflow : hidden; } [class|="slider__title"] { --elem-font_family : var(--init-font_stack-degular); --elem-font_size : var(--vl-font_size-xl); --elem-line_height : var(--vl-line_height-xl ); --elem-font_weight : var(--init-font_weight-regular); --elem-font_case : var(--init-font_case-none); --elem-font_kerning : var(--vl-font_kerning-xxl); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); padding-block-end : 3rem; border-bottom : 1px solid hsl(var(--theme-color-focus-h), calc(var(--theme-color-focus-s) * 1%), calc(var(--theme-color-focus-l) * 1%)) } [class|="slider__items"] { width : 100%; display : grid; position : relative; column-gap : 3rem; grid-auto-columns : max-content; grid-auto-flow : column; transform : translateX( var(--offset, 0) ); transition : transform .4s ease-in-out ; } [class|="slider__figure"] { width : 100%; height : 100%; } [class|="slider__thumbnail"] { width : auto; max-width : none; height : 90vh; max-height : 720px; } [class|="btn"][class*="--slider"] { align-self: center; opacity: 1; transition : opacity .2s ease-in-out ; } [class|="btn"][class*="--slider"][rel='prev'] { justify-self : start; } [class|="btn"][class*="--slider"][rel='next'] { justify-self : end; } @media only screen and (max-width: 1272px) { [class|="slider__thumbnail"] { width : 100%; max-width : none; height : auto; max-height : none; } } /********************************************************/ /* /* Component : Boutton /* /********************************************************/ [class|="btn"] { --elem-font_family : var(--init-font_stack-arial); --elem-font_size : var(--vl-font_size-xs); --elem-font_weight : var(--vl-font_weight-bold); --elem-font_case : var(--init-font_case-caps); --elem-font_kerning : var(--vl-font_kerning-l); --elem-line_height : var(--vl-line_height-xxl ); --elem-color-txt-h : var(--theme-color-ttl-h); --elem-color-txt-s : var(--theme-color-ttl-s); --elem-color-txt-l : var(--theme-color-ttl-l); --elem-color-txt-a : var(--theme-color-ttl-a); --vr_icn-prepend : none; --vr_icn-append : var(--vr_icn-ctn); --margin_mod-bottom : var(--init-spacing_mod); block-size : var(--line_height); display : inline-block; position : relative; overflow : visible; vertical-align : middle; background-color : var(--init-gray_90-hsl); margin-block-end : 0; } [class|="btn"] { --vr_icn-append : var(--vr_icn-ctn, '\f30b'); --vr_icn-prepend : none; } [class|="btn"]:not([href]), [class|="btn"][href=""] { --vr_icn-ctn : none; } [class|="btn"][rel="back"], [class|="btn"][rel="index"], [class|="btn"][rel="prev"], [class|="btn"][class*="--back"] { --vr_icn-ctn : '\f30a'; } [class|="btn"][rel="next"], [class|="btn"][class*="--next"] { --vr_icn-ctn : '\f30b'; } [class|="btn"][href$=".pdf"], [class|="btn"][href$=".doc"], [class|="btn"][href$=".docx"], [class|="btn"][href$=".zip"], [class|="btn"][href$=".xls"], [class|="btn"][href$=".xlsx"], [class|="btn"][href*="/wp-content/upload/"], [class|="btn"][rel="download"], [class|="btn"][download], [class|="btn"][class*="--download"] { --vr_icn-ctn : '\f56d'; } [class|="btn"][href^="maito:"], [class|="btn"][rel="email"], [class|="btn"][class*="--email"] { --vr_icn-ctn : 'Ùf0e0'; } [class|="btn"][href^="tel:"], [class|="btn"][rel="tel"], [class|="btn"][class*="--phone"] { --vr_icn-ctn : '\f095'; } [class|="btn"]:hover { --elem-color-txt-h : var(--theme-color-inverted-h); --elem-color-txt-s : var(--theme-color-inverted-s); --elem-color-txt-l : var(--theme-color-inverted-l); --elem-color-txt-a : var(--theme-color-inverted-a); background-color : var(--init-gray_30-hsl); } [class|="btn__ctn"] { --padding_mod-start : var(--init-spacing_mod); --padding_mod-end : var(--init-spacing_mod); display : flex; flex-wrap : nowrap; white-space : nowrap; float : left; inline-size : max(100%, 22rem) } [class|="btn__ctn"]:before, [class|="btn__ctn"]:after { --elem-font_family : var(--init-font_stack-icon); --elem-font_weight : var(--vl-font_weight-regular); --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); --elem-color-txt-a : var(--theme-color-focus-a); display : block; transform : translateY(-1px); font-size : 1.5em; } [class|="btn__ctn"]:before { padding-right : 0.75rem } [class|="btn__ctn"]:after { padding-left : 0.75rem } [class|="btn__ctn"]:before { content : var(--vr_icn-prepend); } [class|="btn__ctn"]:after { content : var(--vr_icn-append); } /********************************************************/ /* /* Component : NavBar /* /********************************************************/ [class|="header"] { --elem-size_inline : 100%; position : sticky; top : 0; z-index : 3; } [class|="footer"] { --elem-size_inline : 100%; position : relative; } [class|="navbar"] { --elem-font_family : var(--init-font_stack-degular-display); max-inline-size : 194rem; padding-inline-start : 3rem; padding-inline-end : 3rem; margin-inline-start : auto; margin-inline-end : auto; } [class|="navbar"][class*="--header"] { --elem-font_size : var(--vl-font_size-s); --elem-line_height : var(--vl-line_height-s); --elem-font_weight : var(--init-font_weight-semibold); --elem-font_kerning : var(--vl-font_kerning-l); } [class|="navbar"][class*="--footer"] { --elem-font_size : var(--vl-font_size-s); --elem-line_height : var(--vl-line_height-m ); --elem-font_weight : var(--init-font_weight-medium); --elem-font_kerning : var(--vl-font_kerning-xxxl); --elem-font_case : var(--init-font_case-caps); display : flex; justify-content : space-between; padding-block-start : 6rem; padding-block-end : 6rem; } [class|="navbar"][class*="--mobile"] { position : fixed; z-index : 3; top : 6rem; left : 0; width : 100%; max-width : 300px; height : calc(100% - 6rem); margin : 0; padding : 0; background-color : var(--color-bkg); transform : translateX(-100%); transition: all ease-in-out .3s; } #mobile-nav:checked ~ [class|="navbar"][class*="--mobile"] { transform : translateX(0); } [class|="navbar__close"][class*="--mobile"] { z-index : 3; display : block; background : rgba(255,255,255, .5); opacity : 0; pointer-events : none; position : fixed; left : 0; top : 6rem; width : 100%; height : calc(100% - 6rem); transition: opacity ease-out .3s; } #mobile-nav:checked ~ [class|="navbar__close"][class*="--mobile"] { pointer-events : all; opacity : 1; } [class|="navbar__items"][class*="--mobile"] { display : flex; flex-direction: column; flex-shrink: 0; width : 100%; height : 100%; overflow : auto; } [class|="navbar__item"][class*="--mobile"] { --elem-line_height : var(--vl-line_height-xxl ); padding : 0 3rem; display : block; border-bottom : 1px solid ; } [class|="navbar__item"][class*="--mobile"][class*="--social"] { --elem-line_height : var(--vl-line_height-xxl ); } [class|="navbar__item"][class*="--mobile"][class*="--social"] a:before { --elem-font_family : var(--init-font_stack-icon); min-width : 3rem; text-align : center; padding-right :1rem; font-size: .8em; display: block; } [class|="navbar__header"] { margin-block-end : 3rem; --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); } [class|="navbar__items"][class*="--primary"] { min-block-size : 6rem; display : flex; align-items : center; } [class|="navbar__items"][class*="--footer_newsletter"] { max-width: 300px; } [class|="navbar__items"][class*="--footer_newsletter"], [class|="navbar__items"][class*="--footer_nav"], [class|="navbar__items"][class*="--footer_social"]{ --elem-margin_mod-bottom : 6; } [class|="navbar__items"][class*="--footer_newsletter"], [class|="navbar__items"][class*="--footer_nav"], [class|="navbar__items"][class*="--footer_address"], [class|="navbar__items"][class*="--footer_social"]{ --elem-margin_mod-end : 6; } [class|="navbar__item"] > a:hover, [class|="navbar__item"][class*="--current"] > a { --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); } [class|="navbar__item"][class*="--primary"] { display : block; padding-inline-start : 6rem; } [class|="navbar__item"][class*="--primary"]:first-child, [class|="navbar__item"][class*="--primary"]:nth-child(2) { padding-inline-start : 0; } [class|="navbar__item"][class*="--primary"][class*="--label"] { display: none; } [class|="navbar__item__label"] { --elem-font_size : var(--vl-font_size-l); --elem-font_family : var(--init-font_stack-icon); min-width : 5rem; text-align : center; padding-right : 1rem; cursor : pointer; display : block; } [class|="navbar__item__label"]:hover { --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); } [class|="navbar__item"][class*="--primary"][class*="--logo"] { flex-grow : 2; text-align : right; } [class|="navbar__item"][class*="--primary"][class*="--logo"] svg { height : 2rem; width : auto; fill : hsl( var(--theme-color-ttl-h), calc(var(--theme-color-ttl-s) * 1% ), calc(var(--theme-color-ttl-l) * 1%)); } [class|="navbar__item"][class*="--primary"][class*="--logo"] a:hover svg { fill : hsl( var(--theme-color-focus-h), calc(var(--theme-color-focus-s) * 1% ), calc(var(--theme-color-focus-l) * 1%)); } [class|="navbar__item"][class*="--footer_nav"] { --elem-line_height : var(--vl-line_height-l ); } [class|="navbar__item"][class*="--social"] { --elem-line_height : var(--vl-line_height-l ); } [class|="navbar__item"][class*="--social"] a { display: flex; } [class|="navbar__item"][class*="--social"] a:before { --elem-font_family : var(--init-font_stack-icon); min-width: 5rem; text-align: center; padding-right :1rem; font-size: 1.4em; display: block; } [class|="navbar__item"][class*="--facebook"] a:before { content: '\f39e'; } [class|="navbar__item"][class*="--twitter"] a:before { content: '\f099'; } [class|="navbar__item"][class*="--youtube"] a:before { content: '\f167'; } [class|="navbar__item"][class*="--linkedin"] a:before { content: '\f0e1'; } [class|="navbar__item"][class*="--instagram"] a:before { content: '\f16d'; } [class|="navbar__item"][class*="--vimeo"] a:before { content: '\f27d'; } @media only screen and (max-width: 1080px) { [class|="navbar__item"][class*="--primary"] { padding-inline-start : 3rem; } } @media only screen and (max-width: 940px) { [class|="navbar__item"][class*="--primary"] { padding-inline-start : 2rem; } } @media only screen and (min-width: 880px) { #mobile-nav:checked ~ [class|="navbar"][class*="--mobile"] { transform : translateX(-100%); } #mobile-nav:checked ~ [class|="navbar__close"][class*="--mobile"] { pointer-events : none; opacity : 0; } } @media only screen and (max-width: 880px) { [class|="navbar"] { padding-inline-start : 2rem; padding-inline-end : 2rem; } [class|="navbar__item"][class*="--primary"]:not([class*="label"]):not([class*="--logo"]) { display: none; } [class|="navbar__item"][class*="--primary"][class*="--label"] { display: block; } } @media only screen and (max-width: 1140px) { [class|="navbar"][class*="--footer"] { flex-wrap: wrap; } [class|="navbar__items"][class*="--footer_newsletter"], [class|="navbar__items"][class*="--footer_nav"], [class|="navbar__items"][class*="--footer_address"], [class|="navbar__items"][class*="--footer_social"]{ width: calc(50% - 48px); } [class|="navbar__items"][class*="--footer_nav"], [class|="navbar__items"][class*="--footer_social"] { --elem-margin_mod-end : 0; } } @media only screen and (max-width: 720px) { [class|="navbar"][class*="--footer"] { max-width: 500px; margin-left: auto; margin-right: auto; } [class|="navbar__items"][class*="--footer_nav"] { display: none; } [class|="navbar__items"][class*="footer_newsletter"] { max-width: none; } [class|="navbar__items"][class*="--footer_newsletter"], [class|="navbar__items"][class*="--footer_nav"], [class|="navbar__items"][class*="--footer_address"], [class|="navbar__items"][class*="--footer_social"]{ width:100%; --elem-margin_mod-end : 0; } [class|="navbar__items"][class*="--footer_address"], [class|="navbar__items"][class*="--footer_social"] { min-width: 200px } } @media only screen and (max-width: 500px) { [class|="navbar"][class*="--footer"] { max-width: 300px; } [class|="navbar__items"][class*="--footer_address"], [class|="navbar__items"][class*="--footer_social"] { min-width: 100% } } /********************************************************/ /* /* Component : Footer /* /********************************************************/ [class|="footer"] a:hover, [class|="footer"] a:hover > * { --elem-color-txt-h : var(--theme-color-focus-h); --elem-color-txt-s : var(--theme-color-focus-s); --elem-color-txt-l : var(--theme-color-focus-l); } [class|="footer__section"] { --elem-color-bkg-h : var(--theme-color-pale-h); --elem-color-bkg-s : var(--theme-color-pale-s); --elem-color-bkg-l : var(--theme-color-pale-l); --elem-padding_mod-bottom : var(--init-spacing_mod); --elem-margin_mod-bottom : var(--init-spacing_mod); position : relative; border-bottom : 1px var(--color-bkg) solid; padding-block-end : calc(var(--padding-bottom) - 1px); } [class|="footer__section"][class*="--menu"] { --elem-margin_mod-bottom : var(--init-spacing_mod); border-bottom-color : transparent; } [class|="footer__header"] { --elem-padding_mod-bottom : var(--init-spacing_mod-xxs); --elem-padding_mod-top : var(--init-spacing_mod-xxs); } [class|="footer__header"] > *:last-child { margin-block-end : 0; } [class|="footer__ctn"] { --elem-font_family : var(--vl-font_stack-small); --elem-font_size : var(--vl-font_size-14); --elem-line_height : var(--vl-line_height-40); --elem-font_kerning : var(--vl-font_kerning-small); --elem-font_case : var(--vl-font_case-caps); --elem-font_weight : var(--vl-font_weight-medium); --elem-padding_mod-bottom : var(--init-spacing_mod-xxs); --elem-padding_mod-bottom : var(--init-spacing_mod-xxs); --elem-size_inline : 100%; } [class|="footer__ctn"] > *:last-child { --elem-margin_mod-bottom : 0; } [class|="footer__ctn"][class*="--txt-small"] { --elem-color-txt-h : var(--theme-color-pale-h); --elem-color-txt-s : var(--theme-color-pale-s); --elem-color-txt-l : var(--theme-color-pale-l); --elem-font_size : var(--vl-font_size-12); --elem-font_weight : var(--vl-font_weight-regular); --elem-line_height : var(--vl-line_height-24); } [class|="footer__ctn"][class*="--left-align"] { max-inline-size : 40rem; } /********************************************************/ /* /* Layouts /* /********************************************************/ /* Theme : Generic Colors */ [data-theme*="--txt-color-white"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 100; } [data-theme*="--txt-color-gray90"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 90; } [data-theme*="--txt-color-gray80"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 80; } [data-theme*="--txt-color-gray70"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 70; } [data-theme*="--txt-color-gray60"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 60; } [data-theme*="--txt-color-gray50"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 50; } [data-theme*="--txt-color-gray40"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 40; } [data-theme*="--txt-color-gray30"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 30; } [data-theme*="--txt-color-gray20"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 20; } [data-theme*="--txt-color-gray10"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 10; } [data-theme*="--txt-color-black"] { --elem-color-txt-h: var(--const-gray-h, 0); --elem-color-txt-s: var(--const-gray-s, 0); --elem-color-txt-l: 0; } [data-theme*="--txt-color-red"] { --elem-color-txt-h: var(--const-red-h, 0); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--txt-color-yellow"] { --elem-color-txt-h: var(--const-yellow-h, 60); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--txt-color-green"] { --elem-color-txt-h: var(--const-green-h, 120); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--txt-color-cyan"] { --elem-color-txt-h: var(--const-cyan-h, 180); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--txt-color-blue"] { --elem-color-txt-h: var(--const-blue-h, 240); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--txt-color-magenta"] { --elem-color-txt-h: var(--const-magenta-h, 300); --elem-color-txt-s: var(--const-color-s, 100); --elem-color-txt-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-white"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 100; } [data-theme*="--bkg-color-gray90"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 90; } [data-theme*="--bkg-color-gray80"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 80; } [data-theme*="--bkg-color-gray70"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 70; } [data-theme*="--bkg-color-gray60"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 60; } [data-theme*="--bkg-color-gray50"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 50; } [data-theme*="--bkg-color-gray40"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 40; } [data-theme*="--bkg-color-gray30"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 30; } [data-theme*="--bkg-color-gray20"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 20; } [data-theme*="--bkg-color-gray10"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 10; } [data-theme*="--bkg-color-black"] { --elem-color-bkg-h: var(--const-gray-h, 0); --elem-color-bkg-s: var(--const-gray-s, 0); --elem-color-bkg-l: 0; } [data-theme*="--bkg-color-red"] { --elem-color-bkg-h: var(--const-red-h, 0); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-yellow"] { --elem-color-bkg-h: var(--const-yellow-h, 60); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-green"] { --elem-color-bkg-h: var(--const-green-h, 120); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-cyan"] { --elem-color-bkg-h: var(--const-cyan-h, 180); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-blue"] { --elem-color-bkg-h: var(--const-blue-h, 240); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } [data-theme*="--bkg-color-magenta"] { --elem-color-bkg-h: var(--const-magenta-h, 300); --elem-color-bkg-s: var(--const-color-s, 100); --elem-color-bkg-l: var(--const-color-l, 50); } /* Theme : Generic Opacity */ [data-theme*="--txt-alpha-o"] { --elem-color-txt-a : 1; } [data-theme*="--txt-alpha-90"] { --elem-color-txt-a : 0.9; } [data-theme*="--txt-alpha-80"] { --elem-color-txt-a : 0.8; } [data-theme*="--txt-alpha-70"] { --elem-color-txt-a : 0.7; } [data-theme*="--txt-alpha-66"] { --elem-color-txt-a : 0.6; } [data-theme*="--txt-alpha-50"] { --elem-color-txt-a : 0.5; } [data-theme*="--txt-alpha-40"] { --elem-color-txt-a : 0.4; } [data-theme*="--txt-alpha-30"] { --elem-color-txt-a : 0.3; } [data-theme*="--txt-alpha-20"] { --elem-color-txt-a : 0.2; } [data-theme*="--txt-alpha-10"] { --elem-color-txt-a : 0.1; } [data-theme*="--txt-alpha-0"] { --elem-color-txt-a : 0; } [data-theme*="--bkg-alpha-o"] { --elem-color-bkg-a : 1; } [data-theme*="--bkg-alpha-90"] { --elem-color-bkg-a : 0.9; } [data-theme*="--bkg-alpha-80"] { --elem-color-bkg-a : 0.8; } [data-theme*="--bkg-alpha-70"] { --elem-color-bkg-a : 0.7; } [data-theme*="--bkg-alpha-60"] { --elem-color-bkg-a : 0.6; } [data-theme*="--bkg-alpha-50"] { --elem-color-bkg-a : 0.5; } [data-theme*="--bkg-alpha-40"] { --elem-color-bkg-a : 0.4; } [data-theme*="--bkg-alpha-30"] { --elem-color-bkg-a : 0.3; } [data-theme*="--bkg-alpha-20"] { --elem-color-bkg-a : 0.2; } [data-theme*="--bkg-alpha-10"] { --elem-color-bkg-a : 0.1; } [data-theme*="--bkg-alpha-0"] { --elem-color-bkg-a : 0; } /* Generic Layouts */ [data-layout*="--justify-start"] { text-align: start; } [data-layout*="--justify-center"] { text-align: center; } [data-layout*="--justify-end"] { text-align: end; } [data-layout*="--align-top"] { vertical-align: top; } [data-layout*="--align-middle"] { vertical-align: middle; } [data-layout*="--align-bottom"] { vertical-align: bottom; } /* Block Layouts */ [data-layout|="block"] { display: block; } [data-layout|="block"][data-layout*="--inline"] { display: inline-block; } /* Table Layout */ [data-layout|="table"] { display: table; block-size: 100%; table-layout: fixed; } [data-layout|="table"][data-layout*="--inline"] { display: inline-table; } /* Grids Layouts */ [data-layout|="grid"] { display: grid; } [data-layout|="grid"][data-layout*="--inline"] { display: inline-grid; } [data-layout|="grid"][data-layout*="--align-top"] { align-items: start; } [data-layout|="grid"][data-layout*="--align-middle"] { align-items: center; } [data-layout|="grid"][data-layout*="--align-bottom"] { align-items: end; } [data-layout|="grid"][data-layout*="--align-stretch"] { align-items: stretch; } [data-layout|="grid"][data-layout*="--justify-start"] { justify-items: start; } [data-layout|="grid"][data-layout*="--justify-center"] { justify-items: center; } [data-layout|="grid"][data-layout*="--justify-end"] { justify-items: end; } [data-layout|="grid"][data-layout*="--justify-stretch"] { justify-items: stretch; } [data-layout|="grid"][data-layout*="--align-ctn-start"] { align-content: start; } [data-layout|="grid"][data-layout*="--align-ctn-center"] { align-content: center; } [data-layout|="grid"][data-layout*="--align-ctn-end"] { align-content: end; } [data-layout|="grid"][data-layout*="--align-ctn-stretch"] { align-content: stretch; } [data-layout|="grid"][data-layout*="--align-ctn-around"] { align-content: space-around; } [data-layout|="grid"][data-layout*="--align-ctn-between"] { align-content: space-between; } [data-layout|="grid"][data-layout*="--align-ctn-evenly"] { align-content: space-evenly; } [data-layout|="grid"][data-layout*="--justify-ctn-start"] { justify-content: start; } [data-layout|="grid"][data-layout*="--justify-ctn-center"] { justify-content: center; } [data-layout|="grid"][data-layout*="--justify-ctn-end"] { justify-content: end; } [data-layout|="grid"][data-layout*="--justify-ctn-stretch"] { justify-content: stretch; } [data-layout|="grid"][data-layout*="--justify-ctn-around"] { justify-content: space-around; } [data-layout|="grid"][data-layout*="--justify-ctn-between"] { justify-content: space-between; } [data-layout|="grid"][data-layout*="--justify-ctn-evenly"] { justify-content: space-evenly; } [data-layout|="grid"][data-layout*="--align-top"] { grid-auto-flow: row; } [data-layout|="grid"][data-layout*="--align-top"] { grid-auto-flow: column; } /* Flex layouts */ [data-layout|="flex"] { display: flex; } [data-layout|="flex"][data-layout*="--inline"] { display: inline-flex; } [data-layout|="flex"][data-layout*="--row"] { flex-direction: row; } [data-layout|="flex"][data-layout*="--row-reverse"] { flex-direction: row-reverse; } [data-layout|="flex"][data-layout*="--column"] { flex-direction: column; } [data-layout|="flex"][data-layout*="--column-reverse"] { flex-direction: column-reverse; } [data-layout|="flex"][data-layout*="--nowrap"] { flex-wrap: nowrap; } [data-layout|="flex"][data-layout*="--wrap"] { flex-wrap: wrap; } [data-layout|="flex"][data-layout*="--wrap-reverse"] { flex-wrap: wrap-reverse; } [data-layout|="flex"][data-layout*="--align-top"] { align-items: flex-start; vertical-align: bottom;} [data-layout|="flex"][data-layout*="--align-middle"] { align-items: center; vertical-align: bottom;} [data-layout|="flex"][data-layout*="--align-bottom"] { align-items: flex-end; vertical-align: bottom;} [data-layout|="flex"][data-layout*="--align-stretch"] { align-items: stretch; vertical-align: bottom;} [data-layout|="flex"][data-layout*="--align-baseline"] { align-items: baseline; vertical-align: bottom;} [data-layout|="flex"][data-layout*="--align-content-top"] { align-content: flex-start; } [data-layout|="flex"][data-layout*="--align-content-middle"] { align-content: center; } [data-layout|="flex"][data-layout*="--align-content-bottom"] { align-content: flex-end; } [data-layout|="flex"][data-layout*="--align-content-stretch"] { align-content: stretch; } [data-layout|="flex"][data-layout*="--align-content-between"] { align-content : space-between; } [data-layout|="flex"][data-layout*="--align-content-around"] { align-content : space-around; } [data-layout|="flex"][data-layout*="--justify-start"] { justify-content : flex-start; text-align: start;} [data-layout|="flex"][data-layout*="--justify-center"] { justify-content : center; text-align: start;} [data-layout|="flex"][data-layout*="--justify-end"] { justify-content : flex-end; text-align: start;} [data-layout|="flex"][data-layout*="--justify-between"] { justify-content : space-between; text-align: start;} [data-layout|="flex"][data-layout*="--justify-around"] { justify-content : space-around; text-align: start;} [data-layout|="flex"][data-layout*="--justify-evenly"] { justify-content : space-evenly; text-align: start;} /* Generic display */ [data-display*="--static"] { position: static; } [data-display*="--relative"] { position: relative; } [data-display*="--absolute"] { position: absolute; } [data-display*="--justify-start"] { text-align: start; } [data-display*="--justify-center"] { text-align: center; } [data-display*="--justify-end"] { text-align: end; } [data-display*="--align-top"] { vertical-align: top; } [data-display*="--align-middle"] { vertical-align: middle; } [data-display*="--align-bottom"] { vertical-align: bottom; } [data-display*="--centered"] { margin-inline-start: auto; margin-inline-end: auto; } [data-display*="--horizontal-tb"] { writing-mode: horizontal-tb; } [data-display*="--vertical-lr"] { writing-mode: vertical-lr; } [data-display*="--vertical-rl"] { writing-mode: vertical-rl; } [data-display*="--ltr"] { direction: ltr; } [data-display*="--rtl"] { direction: rtl; } [data-display*="--upright"] { text-orientation: upright;} [data-display*="--side-txt-tb"] { writing-mode: vertical-rl; } [data-display*="--side-txt-bt"] { writing-mode: vertical-rl; transform: rotate(180deg); } [data-display*="--side-txt-upright"] { writing-mode: vertical-rl; text-orientation: upright; } [data-display*="--float-start"] { float: right; } [data-display*="--float-end"] { float: left; } [data-display*="--clear-left"] { clear: left; } [data-display*="--clear-right"] { clear: right; } [data-display*="--clear-both"] { clear: both; } [data-display|="inline"] { display: inline; } [data-display|="contents"] { display: contents; } [data-display|="inline-block"] { display: inline-block; } [data-display|="block"] { display: block; } [data-display|="block"][data-display*="--inline"] { display: inline-block; } [data-display|="flex-item"][data-display*="--align-top"] { align-self: flex-start; vertical-align: bottom;} [data-display|="flex-item"][data-display*="--align-middle"] { align-self: center; vertical-align: bottom;} [data-display|="flex-item"][data-display*="--align-bottom"] { align-self: flex-end; vertical-align: bottom;} [data-display|="flex-item"][data-display*="--align-stretch"] { align-self: stretch; vertical-align: bottom;} [data-display|="flex-item"][data-display*="--align-baseline"] { align-self: baseline; vertical-align: bottom;} [data-display|="flex-item"][data-display*="--grow"] { flex-grow: 2;} [data-display|="grid-item"][data-display*="--align-top"] { align-self: start; vertical-align: bottom;} [data-display|="grid-item"][data-display*="--align-middle"] { align-self: center; vertical-align: bottom;} [data-display|="grid-item"][data-display*="--align-bottom"] { align-self: end; vertical-align: bottom;} [data-display|="grid-item"][data-display*="--align-stretch"] { align-self: stretch; vertical-align: bottom;} [data-display|="grid-item"][data-display*="--justify-start"] { justify-self: start; text-align: start;} [data-display|="grid-item"][data-display*="--justify-center"] { justify-self: center; text-align: start;} [data-display|="grid-item"][data-display*="--justify-end"] { justify-self: end; text-align: start;} [data-display|="grid-item"][data-display*="--justify-stretch"] { justify-self: stretch; text-align: start;} [data-display|="row"] { display: table-row; block-size: 1px; } [data-display|="row"][data-display*="--align-stretch"] { block-size: auto; } [data-display|="cell"] { display: table-cell; } *, *:before, *:after { /* Unit conversion utilities */ --util-px_rem : calc( 1rem / var(--elem-base-unit, var(--vl-base-unit, var(--init-base-grid, 24))) ); --util-rem_px : calc( 1px * var(--elem-base-unit, var(--vl-base-unit, var(--init-base-grid, 24))) ); --util-dc_pc : calc( 100 * 1% ); --util_dc_vw : calc( 100 * 1vw ); --util-dc_vh : calc( 100 * 1vh ); --util-pc_dc : calc( 1 / 100 ); /* Local variables */ /* Colors Setup */ --color-txt-h : var(--elem-color-txt-h, var(--theme-color-txt-h, var(--vl-txt-h, var(--init-color-txt-h, 0)))); --color-txt-s : var(--elem-color-txt-s, var(--theme-color-txt-s, var(--vl-txt-s, var(--init-color-txt-s, 0)))); --color-txt-l : var(--elem-color-txt-l ,var(--theme-color-txt-l, var(--vl-txt-l, var(--init-color-txt-l, 0)))); --color-txt-a : var(--elem-color-txt-a, var(--theme-color-txt-a, var(--vl-txt-a, var(--init-color-txt-a, 1)))); --color-bkg-h : var(--elem-color-bkg-h, var(--theme-color-bkg-h, var(--vl-bkg-h, var(--init-color-bkg-h, 0)))); --color-bkg-s : var(--elem-color-bkg-s, var(--theme-color-bkg-s, var(--vl-bkg-s, var(--init-color-bkg-s, 0)))); --color-bkg-l : var(--elem-color-bkg-l, var(--theme-color-bkg-l, var(--vl-color-bkg-l, var(--init-color-bkg-l, 0)))); --color-bkg-a : var(--elem-color-bkg-a, var(--theme-color-bkg-a, var(--vl-color-bkg-a, var(--init-color-bkg-a, 1)))); /* Spacings Setup */ --spacing : var(--elem-spacing, var(--vl-spacing, var(--init-spacing, 1rem))); --padding_mod-start : var(--elem-padding_mod-start, 0); --padding_mod-end : var(--elem-padding_mod-end, 0); --padding_mod-top : var(--elem-padding_mod-top, 0); --padding_mod-bottom : var(--elem-padding_mod-bottom, 0); --margin_mod-start : var(--elem-margin_mod-start, 0); --margin_mod-end : var(--elem-margin_mod-end, 0); --margin_mod-top : var(--elem-margin_mod-top, 0); --margin_mod-bottom : var(--elem-margin_mod-bottom, 0); /* Local values */ /* Transition */ --transition-speed : var(--elem-transition-speed, var(--vl-transition-speed, var(--init-transition-medium, .4s))); --transition-ease : var(--elem-transition-ease, var(--vl-transition-ease, var(--init-transition-ease, ease-in-out))); /* paddings */ --padding-start : calc( var(--padding_mod-start, 0) * var(--spacing) ); --padding-end : calc( var(--padding_mod-end, 0) * var(--spacing) ); --padding-top : calc( var(--padding_mod-top, 0) * var(--spacing) ); --padding-bottom : calc( var(--padding_mod-bottom, 0) * var(--spacing) ); /* Font*/ --font_size : var(--elem-font_size, var(--vl-font_size, var(--init-font_size, calc( 16/24 * 1rem)))); --font_style : var(--elem-font_style, var(--vl-font_style-normal, var(--init-font_style-normal, normal))); --font_weight : var(--elem-font_weight, var(--vl-font_weight-regular, var(--init-font_weight-regular, 400))); --font_family : var(--elem-font_family, var(--vl-font_stack-body, var(--init-font_stack-body, initial))); --font_case : var(--elem-font_case, var(--vl-font_case-none, var(--init-font_case-none, none))); --font_kerning : var(--elem-font_kerning, var(--vl-font_kerning, var(--init-font_kerning, normal))); --line_height : var(--elem-line_height, var(--vl-line_height, var(--init-line_height, 1rem))); --txt-offset : var(--elem-txt-offset, 0); /* Margins */ --margin-start : calc( var(--margin_mod-start, 0) * var(--spacing) ); --margin-end : calc( var(--margin_mod-end, 0) * var(--spacing) ); --margin-top : calc( var(--margin_mod-top, 0) * var(--spacing) - var(--elem-txt-offset, 0px)); --margin-bottom : calc( var(--margin_mod-bottom, 0) * var(--spacing) + var(--elem-txt-offset, 0px)); /* Sizing */ --size_inline : var(--elem-size_inline, initial); --size_inline-min : var(--elem-size_inline-min, 0); --size_inline-max : var(--elem-size_inline-max, none); --size_block : var(--elem-size_block, initial); --size_block-min : var(--elem-size_block-min, 0); --size_block-max : var(--elem-size_block-max, none); /* Backgrounds */ --bkg_position : var(--elem-bkg_position); --bkg_size : var(--elem-bkg_size); --bkg_repeat : var(--elem-bkg_repeat); /* Colors */ --color-txt : hsla(var(--color-txt-h), calc(var(--color-txt-s) * 1%), calc(var(--color-txt-l) * 1%), var(--color-txt-a)); --color-bkg : hsla(var(--color-bkg-h), calc(var(--color-bkg-s) * 1%), calc(var(--color-bkg-l) * 1%), var(--color-bkg-a)); } *, *::before, *::after { letter-spacing : var(--font_kerning); text-transform : var(--font_case); font : var(--font_style) var(--font_weight) var(--font_size)/var(--line_height) var(--font_family); color : var(--color-txt); inline-size : var(--size_inline); min-inline-size : var(--size_inline-min); max-inline-size : var(--size_inline-max); block-size : var(--size_block); min-block-size : var(--size_block-min); max-block-size : var(--size_block-max); padding-inline-start : var(--padding-start); padding-inline-end : var(--padding-end); padding-block-start : var(--padding-top); padding-block-end : var(--padding-bottom); margin-inline-start : var(--margin-start); margin-inline-end : var(--margin-end); margin-block-start : var(--margin-top); margin-block-end : var(--margin-bottom); background-position : var(--init-bkg_position); background-size : var(--init-bkg_size); background-repeat : var(--init-bkg_repeat); } [data-theme*="--bkg-alpha"] { background-color : var(--color-bkg); } [data-theme*="--bkg-alpha-0"] { background-color : transparent; }