/*
Enhancements Style
• Contains usability enhancements on Active Areas (AAs)
• Visually hides headings for visual purposes
• Contains styles of functionalities
• Contains Generic CSS Variables
*/
/* ------------------ Variables ------------------ */
.html
{
/* Level 1: Absolutes - see default.css */
/* ------------ Level 2: Generics ------------ */
/* Main Color */
--main-color--pri: var(--color--superhero-blue);
--main-color--sec: var(--color--uhog-green);
/* Accent Color */
--accent-color--pri: var(--color--panda-blue);
--accent-color--sec: var(--color--chikka-orange);
/* Background Color */
--bg-color: var(--dash-of-darkness--color);
/* Foreground Color */
--fg-color: var(--color--off-black);
/* Image Placeholder Color */
--image-placeholder--bg-color: var(--color--off-black-a);
/* Foreground Color - Reverse (use with a dark background) */
--fg-color--reverse: var(--color--white);
/* Faint Color */
--faint-color--pri: var(--color--transparent-black);
/* Border Color */
--border-color: var(--black-half--color-a);
/* Gutter */
--gutter-x--base: 1rem;
--gutter-x--xsm--multiplier: .25;
--gutter-x--sm--multiplier: .5;
--gutter-x--md--multiplier: 1;
--gutter-x--lg--multiplier: 1.5;
--gutter-x--xsm: calc( var(--gutter-x--base) * var(--gutter-x--xsm--multiplier) );
--gutter-x--sm: calc( var(--gutter-x--base) * var(--gutter-x--sm--multiplier) );
--gutter-x--md: calc( var(--gutter-x--base) * var(--gutter-x--md--multiplier) );
--gutter-x--lg: calc( var(--gutter-x--base) * var(--gutter-x--lg--multiplier) );
/* Spacing */
--spacing-y--base: 1rem;
--spacing-y--xsm--multiplier: .25;
--spacing-y--sm--multiplier: .5;
--spacing-y--md--multiplier: 1;
--spacing-y--lg--multiplier: 1.5;
--spacing-y--xsm: calc( var(--spacing-y--base) * var(--spacing-y--xsm--multiplier) );
--spacing-y--sm: calc( var(--spacing-y--base) * var(--spacing-y--sm--multiplier) );
--spacing-y--md: calc( var(--spacing-y--base) * var(--spacing-y--md--multiplier) );
--spacing-y--lg: calc( var(--spacing-y--base) * var(--spacing-y--lg--multiplier) );
--spacing-relative-y--base: 1em;
--spacing-relative-y--sm: calc( var(--spacing-relative-y--base) * var(--spacing-y--sm--multiplier) );
--spacing-relative-y--md: calc( var(--spacing-relative-y--base) * var(--spacing-y--md--multiplier) );
--spacing-relative-y--lg: calc( var(--spacing-relative-y--base) * var(--spacing-y--lg--multiplier) );
/* Font Size */
--font-size--sm: .875em;
--font-size--md: 1.125em;
--font-size--lg: 1.5em;
/* Element Dimensions */
--elem-dimension--md: var(--dimension--md);
/* Transition */
--transition--generic: all .125s ease-in-out;
/* Aspect Ratio */
--aspect-ratio--hd: var(--ratio--16-9);
/* Buttons */
--button--pri--bg-color: var(--accent-color--pri);
--button--pri--fg-color: var(--fg-color--reverse);
--button--padding: .5em 1em;
--button--min-width: 10em;
/* ------------ Level 3 - Specifics ------------ */
/* Main Header - Colors */
--main-header--bg-color: var(--main-color--pri);
/* Button - Colors */
--button--bg-color: var(--accent-color--pri);
--button--fg-color: var(--fg-color--reverse);
/* Selection - Colors */
--selection--bg-color: var(--main-color--sec);
--selection--fg-color: var(--fg-color--reverse);
/* Section - Spacing */
--section--spacing: var(--spacing-y--md) var(--gutter-x--md);
--section--spacing-x: var(--gutter-x--md);
--section--spacing-y: var(--spacing-y--md);
/* Content - Spacing */
--content--spacing: .75em var(--gutter-x--md);
--content--spacing-x: var(--gutter-x--md);
--content--spacing-y: var(--spacing-relative-y--sm);
/* Object - Spacing */
--object--spacing-x: var(--gutter-x--md);
--object--spacing-y: var(--spacing-y--md);
--object--spacing-y--sm: var(--spacing-y--sm);
--object--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
/* Component - Spacing */
--component--spacing-x: var(--gutter-x--md);
--component--spacing-y: var(--spacing-y--md);
--component--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
/* Content - Font Size */
--content--font-size: var(--font-size--md);
/* Caption - Font Size */
--caption--font-size: var(--font-size--sm);
/* Copyright Info - Colors */
--copyright-info--fg-color: var(--faint-color--pri);
/* Generic Text - Colors */
--generic-text--fg-color: var(--main-color--sec);
/* List - Spacing */
--list--spacing--xsm: var(--spacing-y--xsm) var(--gutter-x--xsm);
--list--spacing-y--xsm: var(--spacing-y--xsm);
/* Table - Spacing */
--table--spacing: var(--spacing-y--md) var(--gutter-x--md);
/* Web Product - Colors */
--wbp--bg-color: var(--bg-color);
--wbp--fg-color: var(--fg-color);
/* Links - Colors */
--links--fg-color: var(--accent-color--pri);
/* Main Nav */
--main-nav--bg-color: var(--color--white);
/* Sub Nav - Toggle Button - Colors */
--sub-nav-func-root--toggle-button--fg-color: var(--fg-color);
--sub-nav-func-branches--toggle-button--fg-color: var(--fg-color);
/* Main Header Aside - Colors */
--main-header-aside--bg-color: var(--wbp--bg-color);
/* Main Menu - Colors */
--main-menu-func--fg-color: var(--wbp--fg-color);
/* Go to Start Nav - Colors */
--go-start-nav-func--fg-color: var(--wbp--fg-color);
/* Input Text - Border Color */
--input-text--border-color: var(--border-color);
/* Image - Color */
--image--bg-color: var(--image-placeholder--bg-color);
/* Element Dimensions */
--elem--width--md: var(--elem-dimension--md);
--elem--height--md: var(--elem-dimension--md);
--elem--dimension: var(--elem-dimension--md);
/* Active Area Dimensions */
--active-area--dimension--md: var(--elem-dimension--md);
--active-area--width--md: var(--elem-dimension--md);
--active-area--height--md: var(--elem-dimension--md);
/* Main Logo - Dimensions */
--main-logo--height: 2.25rem;
/* Label - Spacing */
--glabel--spacing: var(--gutter-x--md);
/* Author Avatar - Dimensions */
--author-avatar--width: var(--elem-dimension--md);
--author-avatar--height: var(--elem-dimension--md);
/* Commenter Avatar - Dimensions */
--commenter-avatar--width: calc( var(--elem-dimension--md) - 1rem );
--commenter-avatar--height: calc( var(--elem-dimension--md) - 1rem );
/* Dismiss Icon - Dimensions */
--dismiss-icon--width: .75rem;
--dismiss-icon--height: .75rem;
/* Text Spacing */
--glabel--between--spacing: .3em;
/* Overlays */
--overlay--light: var(--color--white);
--overlay--dark: var(--color--black);
/* Note */
--note--font-size: var(--font-size--sm);
--note--fg-color: var(--font-size--sm);
/* Go to Content Nav */
--go-content-nav--bg-color: var(--button--pri--bg-color);
--go-content-nav--fg-color: var(--button--pri--fg-color);
/* Easy Access Nav - Main Nav - Colors */
--easy-access-nav-func--main-nav--fg-color: var(--color--black);
/* Sub Nav - Colors */
--easy-access-nav-func--sub-nav--bg-color: var(--color--white);
--easy-access-nav-func--sub-nav--fg-color: var(--color--black);
/* Easy Access Nav - Sub Nav - Indicator - Colors */
--easy-access-nav-func--navi--root--indicator: var(--black-eighth--color);
--easy-access-nav-func--navi--current-ancestor--indicator: var(--black-fourth--color);
--easy-access-nav-func--navi--branch--indicator: var(--black-eighth--color);
/* Easy Access Nav - Sub Nav - Border Color */
--easy-access-nav-func--sub-nav--border-color: var(--black-eighth--color);
/* Easy Access Nav - Indicator - Dimensions */
--easy-access-nav-func--indicator--height: .125rem;
--easy-access-nav-func--indicator--width: .125rem;
}
/* ------------------ Visually Hidden ------------------ */
.visually-hidden,
/* Main Menu */
.main-menu-tog---b_l .show-hide---txt,
.sub-nav-tog---b_l .show-hide---txt,
.main-nav---h,
/* Main Search */
.main-search-tog---b_l .show-hide---txt,
.main-search-func .search-form-search-axn .go---txt,
.main-search-func .search-form-reset-axn .reset---txt,
.applicator--main-search--active .main-name,
.applicator--main-search--active .main-logo,
.applicator--main-search--active .main-description,
/* Go to Start Nav */
.go-start-nav-func .go-to-start---txt,
/* Go to Content Nav */
.go-content-nav--inactive,
/* Name and Logo */
.main-name-description--disabled .main-name,
.main-name-description--disabled .main-description,
/* Main Content Heading */
.blog .main-content-heading,
.single-post .main-content-heading,
.attachment .main-content-heading,
.page .main-content-heading,
.view--multisite-directory .main-content-heading,
/* Nav */
.page-nav---h,
.entry-nav---h,
.post-nav---h,
.breadcrumbs-nav---h,
.comments-nav---h,
/* Comments */
.comments---h,
.comment-content---h,
/* Widgets */
.widget---h,
.widget-content---h,
.widget .screen-reader-text,
/* Search */
.post-content .search-form-reset-axn,
.aside .search-form-reset-axn,
/* Main Media Banner */
.main-media-banner img,
/* Comments */
.applicator--comments .post-header-aside .comments-actions-snippet .comments-population,
.applicator--comments .comments-actions-snippet.comments-population--empty .add-comment-axn,
.applicator--comments--active .comments-toggle .comments-count---txt,
/* Page Nav */
.applicator--page-nav .adjacent-navi---l,
.main-description
{
position:absolute;margin:-1px;padding:0;width:1px;min-width:auto;height:1px;min-height:auto;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal;
}
/* ------------------ Unlist ------------------ */
.unlist,
.entry-nav---grp,
.page-nav ul,
.post-nav---grp,
.comments-nav---grp,
.breadcrumbs-nav---grp,
.main-nav ul,
.widget_nav_menu ul,
.widget_pages ul
{
list-style: none;
margin: 0;
padding: 0;
}
/* ------------------ HTML ------------------ */
.html
{
text-rendering: geometricPrecision;
background-color: var(--wbp--bg-color);
color: var(--wbp--fg-color);
}
/* ------------------ Overlay ------------------ */
/* Overlay Inactive */
.applicator--main-menu .overlay--main-menu-func,
.applicator--main-menu .overlay--go-content-nav-func
{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 100%;
background-color: black;
background-color: var(--overlay--dark);
opacity: 0;
transition: opacity .3s, bottom 0s .3s;
}
/* Overlay Active */
.applicator--main-menu--active .overlay--main-menu-func,
.applicator--go-content-nav--active .overlay--go-content-nav-func
{
bottom: 0%;
opacity: .75;
transition: opacity .3s;
z-index: 99;
}
.applicator--main-menu .overlay--go-content-nav-func
{
background-color: white;
background-color: var(--overlay--light);
}
/* ------------------ Highlight ------------------ */
::-moz-selection {
background: var(--selection--bg-color);
color: var(--selection--fg-color);
text-shadow: none;
}
::selection {
background: var(--selection--bg-color);
color: var(--selection--fg-color);
text-shadow: none;
}
/* ------------------ Active Area (AA) ------------------ */
.active-area,
.comments-count-axn---a_l,
.entry-navi---a_l,
.main-post-title---a_l,
.input-text,
.b_l,
input[type="text"],
input[type="password"],
input[type="submit"],
.comment-form-submit-axn---b,
.go-start-navi---a_l,
.go-ct-navi---a_l,
.main-post-title---h_l,
.copyright---g_l,
.post-pub-d-stamp-dtstamp---a_l,
.post-pub-t-stamp-dtstamp---a_l,
.post-mod-d-stamp-dtstamp---a_l,
.post-mod-t-stamp-dtstamp---a_l,
.author-name---a_l,
.add-com-axn---a_l,
.comment-title---a_l,
.comment-pub-d-stamp-dtstamp---a_l,
.comment-pub-t-stamp-dtstamp---a_l,
.commenter-name---a_l,
.comment-reply-axn---a_l,
.adjacent-navi---a_l,
.page-navi---a_l,
.show-more-axn---a_l,
.edit-post-axn---a_l,
.post-navi---a_l,
.post-navi---g_l,
.edit-com-axn---a_l,
.signed-in-account-name---a_l,
.account-log-out-axn---a_l,
.comments-navi---a_l,
.type-attachment .post-navi a,
.show-more-glabel---g_l,
.breadcrumbs-navi---a_l,
.breadcrumbs-navi---g_l,
.comment-reply-cancel-axn---a_l,
.comment-subscription-form .subscribe-label,
.main-description--empty .main-name---a,
.site-main-name---a_l,
.site-main-desc---a_l
{
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-width: var(--elem--width--md);
min-height: var(--elem--height--md);
}
/* ------------------ Forms, Active Objects ------------------ */
.input-text,
input[type="password"],
input[type="submit"],
select,
.b
{
/* Reset */
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
width: 100%;
}
/* ------------------ Forms ------------------ */
/* Textboxes */
.input-text,
input[type="text"],
input[type="password"],
select
{
padding: .5em;
width: 100%;
border: 1px solid var(--input-text--border-color);
}
.input-text--textarea
{
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Buttons */
.b_l,
input[type="submit"]
{
padding: .5em 1em;
width: 100%;
background-color: var(--button--pri--bg-color);
color: var(--button--pri--fg-color);
}
select
{
height: 3rem;
}
/* ------------------ Focusing, Tap Highlight ------------------ */
.tab-key--inactive .input-text:focus,
.tab-key--inactive .b:focus
{
outline: none;
}
.input-text,
.b
{
-webkit-tap-highlight-color: transparent;
}
/* ------------------ Data Format ------------------ */
.data-format
{
padding-left: 0;
padding-right: 0;
overflow-x: auto;
}
/* ------------------ Data Format - ------------------ */
.window--unloaded .post-content img
{
visibility: hidden;
}
.data-format img
{
width: 100%;
}
/* ------------------ Data Format -
------------------ */
.data-format > pre
{
padding: var(--content--spacing);
}
.data-format--pre
{
overflow-y: hidden;
}
/* ------------------ Data Format -