storefront/sass/base/_base.scss

/**
 * Global styles
 */

* {
	box-sizing: border-box;
}

body {
	background-color: $body-background;
}

.clearfix {
	@include clearfix;
}

/**
 * Header
 */
.site-header {
	background-color: #2c2d33;
	padding-top: 2.618em;
	color: #9aa0a7;
	background-position: center center;
	position: relative;
	z-index: 999;

	.site-logo-anchor {
		display: block;

		img {
			max-height: 2.618em;
			width: auto;
		}
	}

	.site-branding,
	.site-logo-anchor {
		margin-bottom: 1.618em;
	}

	.widget {
		margin-bottom: 0;
	}
}

.home.blog,
.home.page:not(.page-template-template-homepage),
.home.post-type-archive-product {
	.site-header {
		margin-bottom: 4.236em;
	}
}

.no-wc-breadcrumb {
	.site-header {
		margin-bottom: 4.236em;
	}

	&.page-template-template-homepage {
		.site-header {
			margin-bottom: 0;
		}
	}
}

.header-widget-region {
	position: relative;
	z-index: 99;
}

.site-branding {
	h1 {
		font-size: 1.618em;
		letter-spacing: -1px;
		margin: 0;

		a {
			font-weight: 700;
		}
	}

	.site-description {
		font-size: .857em;
		display: none;
	}
}

/**
 * Main content area
 */
.site-main {
	margin-bottom: 2.618em;
}

.site-content {
	outline: none;
}

.page-template-template-homepage {
	.site-main {
		padding-top: 4.236em;
	}
}

/**
 * Footer
 */
.site-footer {
	background-color: #f3f3f3;
	color: $color_body + #333;
	padding: 1.618em 0;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: $color_body + #222;
	}

	a:not(.button) {
		color: $color_links;
	}
}

.site-info {
	padding: 2.618em 0;
}

/**
 * Alignment
 */
.alignleft {
	display: inline;
	float: left;
	margin-right: $vspacing;
}
.alignright {
	display: inline;
	float: right;
	margin-left: $vspacing;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/**
 * Accessibility
 */
.screen-reader-text {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	display: block;
	font-weight: bold;
	height: auto;
	left: 0;
	line-height: normal;
	padding: 1em 1.618em;
	text-decoration: none;
	top: 0;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
	outline: none;
}

/**
 * Clearing
 */
.clear,
.entry-content,
.comment-content,
.site-header,
.site-content,
.site-footer {
	@extend %clearfix;
}

/**
 * Tables
 */
table {
	border-spacing: 0;
	width: 100%;
	border-collapse: separate;

	caption {
		padding: 1em 0;
		font-weight: 700;
	}

	td,
	th {
		padding: .857em 1.387em;
		text-align: left;
		vertical-align: top;

		p:last-child {
			margin-bottom: 0;
		}
	}

	thead {
		th {
			border-bottom: 2px solid $color_border;
			text-transform: uppercase;
			padding: 1.387em;
			vertical-align: middle;
		}
	}

	tbody {
		tr:nth-child(2n) {
			td {
				background: rgba(0,0,0,0.015);

				&:last-child {
					border-right: 0;
				}
			}
		}

		td {
			background: rgba(0,0,0,0.025);
		}

		h2 {
			font-size: 1em;
			letter-spacing: normal;
			font-weight: normal;

			a {
				font-weight: normal;
			}
		}

		tr:last-child {
			td {
				border-bottom: 0;
			}

			th:first-child {
				border-bottom: 0;
			}
		}
	}

	tfoot {
		th,
		td {
			border-top:1px dotted $color_border;
		}
	}
}