/****************************************************************** ██████╗ ██████╗ ██╗ ██████╗ ██╗ ██╗██████╗ ███████╗ ██╔════╝██╔═══██╗██║ ██╔═══██╗██║ ██║██╔══██╗██╔════╝ ██║ ██║ ██║██║ ██║ ██║██║ ██║██████╔╝███████╗ ██║ ██║ ██║██║ ██║ ██║██║ ██║██╔══██╗╚════██║ ╚██████╗╚██████╔╝███████╗╚██████╔╝╚██████╔╝██║ ██║███████║ ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝ ******************************************************************/ .responsiville { --nvm-white : 255, 255, 255; --nvm-black : 0, 0, 0; --nvm-gray-10 : 229, 229, 229; /* #E5E5E5 */ --nvm-gray-20 : 204, 204, 204; /* #CCCCCC */ --nvm-gray-30 : 178, 178, 178; /* #B2B2B2 */ --nvm-gray-40 : 153, 153, 153; /* #999999 */ --nvm-gray-50 : 127, 127, 127; /* #7F7F7F */ --nvm-gray-60 : 102, 102, 102; /* #666666 */ --nvm-gray-70 : 76, 76, 76; /* #4C4C4C */ --nvm-gray-80 : 51, 51, 51; /* #333333 */ --nvm-gray-90 : 25, 25, 25; /* #191919 */ --nvm-red : 202, 28, 37; --nvm-orange : 236, 185, 123; --nvm-green : 183, 191, 29; --nvm-blue : 12, 155, 212; --nvm-color-white : rgb(var(--nvm-white)); --nvm-color-black : rgb(var(--nvm-black)); --nvm-color-gray-1 : rgb(var(--nvm-gray-10)); --nvm-color-gray-2 : rgb(var(--nvm-gray-20)); --nvm-color-gray-3 : rgb(var(--nvm-gray-30)); --nvm-color-gray-4 : rgb(var(--nvm-gray-40)); --nvm-color-gray-5 : rgb(var(--nvm-gray-50)); --nvm-color-gray-6 : rgb(var(--nvm-gray-60)); --nvm-color-gray-7 : rgb(var(--nvm-gray-70)); --nvm-color-gray-8 : rgb(var(--nvm-gray-80)); --nvm-color-gray-9 : rgb(var(--nvm-gray-90)); --nvm-color-red : rgb(var(--nvm-red)); --nvm-color-orange : rgb(var(--nvm-orange)); --nvm-color-green : rgb(var(--nvm-green)); --nvm-color-blue : rgb(var(--nvm-blue)); /* Brand Colors */ --brand-white : 255, 255, 255; /* #FFFFFF */ --brand-black : 0, 0, 0; /* #000000 */ --brand-grey : 214, 225, 229; /* #D6E1E5 */ --brand-pale-blue : 165, 194, 208; /* #A5C2D0 */ --brand-blue : 7, 56, 172; /* #0738AC */ --brand-darker-pale-blue : 140, 180, 199; /* #8CB4C7 */ --brand-beige : 231, 214, 202; /* #E7D6CA */ --brand-brown : 127, 115, 107; /* #7F736B */ --brand-dark-brown : 85, 71, 62; /* #55473E */ --brand-color-white : rgb(var(--brand-white)); --brand-color-black : rgb(var(--brand-black)); --brand-color-grey : rgb(var(--brand-grey)); --brand-color-pale-blue : rgb(var(--brand-pale-blue)); --brand-color-blue : rgb(var(--brand-blue)); --brand-color-darker-pale-blue : rgb(var(--brand-darker-pale-blue)); --brand-color-beige : rgb(var(--brand-beige)); --brand-color-brown : rgb(var(--brand-brown)); --brand-color-dark-brown : rgb(var(--brand-dark-brown)); /* End of "Brand Colors" */ --nvm-color-text : var(--brand-color-black); --nvm-color-text-link : var(--brand-color-blue); --nvm-color-text-selection : var(--brand-color-white); --nvm-color-text-selection-bg : var(--brand-color-black); } /*************************************************************************** ██╗ ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗ ███████╗███████╗ ██║ ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║ ██╔════╝██╔════╝ ██║ ██║███████║██████╔╝██║███████║██████╔╝██║ █████╗ ███████╗ ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║ ██╔══╝ ╚════██║ ╚████╔╝ ██║ ██║██║ ██║██║██║ ██║██████╔╝███████╗███████╗███████║ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝ ****************************************************************************/ .responsiville { --nvm-panel-wide-width : 1920px; /* The width of the wide panel element */ --nvm-panel-xlarge-width : 1680px; /* The width of the xlarge panel element */ --nvm-panel-medium-width : 1440px; /* The width of the medium panel element */ --nvm-panel-normal-width : 1280px; /* The width of the normal panel element */ --nvm-panel-narrow-width : 1024px; /* The width of the narrow panel element */ --nvm-panel-small-width : 768px; /* The width of the very narrow panel element */ } .small { --nvm-base-font-size : 16px; /* The body element base font size */ --nvm-base-line-height : 1.5; /* The default line height of all elements */ --nvm-text-line-height : 1.5; /* The default line height of text elements */ --nvm-heading-line-height: 1.3; /* The line height of heading elements */ --nvm-text-rhythm : 30px; /* Vertical margins between text elements */ --nvm-grid-gutter : 10px; /* Paddings between columns, the grid gutters */ --nvm-grid-rhythm : 50px; /* Vertical margins between major grid sections */ } .tablet { --nvm-base-font-size : 17px; /* The body element base font size */ --nvm-base-line-height : 1.4; /* The default line height of all elements */ --nvm-text-line-height : 1.4; /* The default line height of text elements */ --nvm-heading-line-height: 1.25; /* The line height of heading elements */ --nvm-text-rhythm : 50px; /* Vertical margins between text elements */ --nvm-grid-gutter : 20px; /* Paddings between columns, the grid gutters */ --nvm-grid-rhythm : 75px; /* Vertical margins between major grid sections */ } .laptop { --nvm-base-font-size : 17px; /* The body element base font size */ --nvm-base-line-height : 1.4; /* The default line height of all elements */ --nvm-text-line-height : 1.4; /* The default line height of text elements */ --nvm-heading-line-height: 1.2; /* The line height of heading elements */ --nvm-text-rhythm : 60px; /* Vertical margins between text elements */ --nvm-grid-gutter : 40px; /* Paddings between columns, the grid gutters */ --nvm-grid-rhythm : 100px; /* Vertical margins between major grid sections */ } /*************************************************** ███████╗ ██████╗ ███╗ ██╗████████╗███████╗ ██╔════╝██╔═══██╗████╗ ██║╚══██╔══╝██╔════╝ █████╗ ██║ ██║██╔██╗ ██║ ██║ ███████╗ ██╔══╝ ██║ ██║██║╚██╗██║ ██║ ╚════██║ ██║ ╚██████╔╝██║ ╚████║ ██║ ███████║ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═╝ ╚══════╝ ***************************************************/ .responsiville { --nvm-font-serif : 'Caudex', Georgia, serif; --nvm-font-sans-serif: 'Google Sans', 'Segoe UI', Arial, sans-serif; --nvm-font-display: 'Caudex', Georgia, serif; --nvm-font-monospace : Consolas, 'Courier New', monospace; --nvm-font-icons : 'Responsiville icons'; } /****************************************************************** ██╗ ███████╗███╗ ██╗ ██████╗████████╗██╗ ██╗███████╗ ██║ ██╔════╝████╗ ██║██╔════╝╚══██╔══╝██║ ██║██╔════╝ ██║ █████╗ ██╔██╗ ██║██║ ███╗ ██║ ███████║███████╗ ██║ ██╔══╝ ██║╚██╗██║██║ ██║ ██║ ██╔══██║╚════██║ ███████╗███████╗██║ ╚████║╚██████╔╝ ██║ ██║ ██║███████║ ╚══════╝╚══════╝╚═╝ ╚═══╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝╚══════╝ ******************************************************************/ .responsiville { --nvm-length-small: calc(0.5*var(--nvm-grid-rhythm)); --nvm-length-medium: calc(1.0*var(--nvm-grid-rhythm)); --nvm-length-normal: calc(1.5*var(--nvm-grid-rhythm)); --nvm-length-large: calc(2.0*var(--nvm-grid-rhythm)); --nvm-length-xlarge: calc(2.5*var(--nvm-grid-rhythm)); } /*************************************************************************** ███████╗ ██████╗ ██████╗██╗ ██╗███████╗ ██╔════╝██╔═══██╗██╔════╝██║ ██║██╔════╝ █████╗ ██║ ██║██║ ██║ ██║███████╗ ██╔══╝ ██║ ██║██║ ██║ ██║╚════██║ ██║ ╚██████╔╝╚██████╗╚██████╔╝███████║ ╚═╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ ***************************************************************************/ /* WCAG 2.4.7 Focus Visible (Level AA). responsiville.moressette.css removes the focus indicator from every element with "*:focus, *:active { outline: none; }". That rule stays - it is what stops an outline appearing when you click something with a mouse - but keyboard users were left with no indication of where they were anywhere on the site. :focus-visible only matches when the browser decides the user needs an indicator, which in practice means keyboard and assistive technology. Mouse behaviour is therefore unchanged. The ring is two colours on purpose. A single colour cannot stay visible across a white page, a pale blue section and a hero photograph. The white inner ring shows on dark grounds, the blue outer ring shows on light ones, and one of the two always reads. !important is deliberate: several component stylesheets zero the outline on their own elements, and a focus indicator must not be silently lost to a later rule. */ :focus-visible { outline: 2px solid var(--brand-color-white) !important; outline-offset: 0 !important; box-shadow: 0 0 0 4px var(--brand-color-blue) !important; }