[ipfire.org.git] / static / scss / style.scss

/*!
 * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap-4.0.0-alpha.6/scss/variables";
@import "bootstrap-4.0.0-alpha.6/scss/mixins";
@import "bootstrap-4.0.0-alpha.6/scss/custom";

// Reset and dependencies
@import "bootstrap-4.0.0-alpha.6/scss/normalize";
// @import "bootstrap-4.0.0-alpha.6/scss/print";

// Core CSS
@import "bootstrap-4.0.0-alpha.6/scss/reboot";
@import "bootstrap-4.0.0-alpha.6/scss/type";
//@import "bootstrap-4.0.0-alpha.6/scss/images";
// @import "bootstrap-4.0.0-alpha.6/scss/code";
@import "bootstrap-4.0.0-alpha.6/scss/grid";
// @import "bootstrap-4.0.0-alpha.6/scss/tables";
// @import "bootstrap-4.0.0-alpha.6/scss/forms";
@import "bootstrap-4.0.0-alpha.6/scss/buttons";

// Components
@import "bootstrap-4.0.0-alpha.6/scss/transitions";
//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
@import "bootstrap-4.0.0-alpha.6/scss/button-group";
//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
@import "bootstrap-4.0.0-alpha.6/scss/nav";
@import "bootstrap-4.0.0-alpha.6/scss/navbar";
//@import "bootstrap-4.0.0-alpha.6/scss/card";
// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
// @import "bootstrap-4.0.0-alpha.6/scss/badge";
// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
// @import "bootstrap-4.0.0-alpha.6/scss/alert";
@import "bootstrap-4.0.0-alpha.6/scss/progress";
@import "bootstrap-4.0.0-alpha.6/scss/media";
@import "bootstrap-4.0.0-alpha.6/scss/list-group";
// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
// @import "bootstrap-4.0.0-alpha.6/scss/close";

// Components w/ JavaScript
// @import "bootstrap-4.0.0-alpha.6/scss/modal";
// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
// @import "bootstrap-4.0.0-alpha.6/scss/popover";
// @import "bootstrap-4.0.0-alpha.6/scss/carousel";

// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";


// Colors
.amber-800 {
	color: $amber-800;
}

// Fonts
h1 {
	line-height: 3rem;
}

h2 {
	line-height: 2.75rem;
}

h3 {
	line-height: 2rem;
	@include media-breakpoint-down(sm) {
		font-size: 1em;
	}
}

h4 {
	font-weight: 500;
	line-height: 1.75rem;
	@include media-breakpoint-down(sm) {
		font-size: 1em;
	}
}

h5 {
	line-height: 1.5rem;
}

p {
	line-height: 1.5rem;
	@include media-breakpoint-down(sm) {
		font-size: .85em;
	}
	&.lead {
		line-height: 2rem;
		@include media-breakpoint-down(md) {
			font-size: 1.5rem;
			line-height: 2rem;
		}
		@include media-breakpoint-down(sm) {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}
}

.display-2 {
	margin-bottom: 4rem;
	@include media-breakpoint-down(md) {
		font-size: 2.5rem;
		line-height: 3.5rem;
		margin-bottom: 3rem;
	}
	@include media-breakpoint-down(sm) {
		font-size: 2rem;
		line-height: 2.75rem;
	}
}

.display-4 {
	@include media-breakpoint-down(xs) {
		font-size: .875rem;
		line-height: 1.25rem;
	}
}

small {
	line-height: 1rem;
	@include media-breakpoint-down(sm) {
		font-size: .75em;
	}
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Images
img {
	&.img-fluid {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

// Icons
.icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	vertical-align: -.15rem;
	overflow: hidden;
	margin-right: .5rem;
}

.i_arrow_down {
	margin: 0;
	position: absolute;
	left: .75rem;
	top: -.25rem;
	animation: scroll 1.5s ease-in-out infinite;
	@include media-breakpoint-down(xs) {
		width: 1.75rem !important;
		height: 1.75rem !important;
		left: .25rem;
		top: -.5rem;
	}
}

.i_lg {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	transform: translateY(-.35rem);
	fill: $red_900;
}

.i_sm {
	vertical-align: top;
	transform: translateY(-.10rem);
}

footer {
	.btn-toolbar .icon {
		height: 2.25rem;
		width: 2.25rem;
		fill: rgba($blue-grey-900, .6);
	}
	.i_heart {
		vertical-align: top;
		transform: translateY(-.15rem);
		@include media-breakpoint-down(sm) {
			transform: translateY(-.75rem);
		}
	}
}

// Buttons
.btn-red900 {
  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
}
.btn-white {
  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
}
.btn-bluegrey900 {
  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
}

button.navbar-toggler div {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1rem;
	display: inline-block;
	position: relative;
	top: -4px;
}

.btn {
	height: 36px;
	text-transform: uppercase;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	transition: box-shadow .25s ease-in-out;
	&:hover {
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
		transition: box-shadow .25s ease-in-out;
	}
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
	}
}

.btn-outline-primary,
.btn-outline-secondary {
	transition: background-color .25s ease-in-out;
	&:hover {
		transition: background-color .25s ease-in-out;
	}
}

.btn-lg {
	height: 48px;
	margin: 0 24px;
	@include media-breakpoint-down(sm) {
		height: 36px;
		margin: 0 8px;
		padding: 1rem;
		font-size: .875rem;
		line-height: 0;
	}
}

.btn-md {
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: .4rem 1rem .5rem 1rem;
}

.btn-block {
	margin: 0 0 1.5rem 0;
	@include media-breakpoint-up(md) {
		margin: 0 0 2rem 0;	
	}
	@include media-breakpoint-down(xs) {
		font-size: .875rem;
		line-height: 0;
	}
}

button:focus {
	outline: none;
}

// Top Navigation
.fixed-top {
	transition: background-color 700ms linear;
	.navbar {
		width: 100%;
		@include media-breakpoint-down(md) {
			padding: .5rem 0;
		}
		.navbar-toggler-left {
			left: -1rem;
		}
	}
	.navbar-brand {
		opacity: 0;
		transition: opacity 700ms linear;
		@include media-breakpoint-up(lg) {
			opacity: 1;
		}
	}
}

.scrolled {
	background-color: rgba(255, 255, 255, .96);
	.navbar-brand {
		opacity: 1;
		transition: opacity 700ms linear;
	}
}

.menu-text.hidden {
	display: none;
	visibility: hidden;
}

.navbar {
	a {
		color: $blue-grey-900;
	}
	.btn {
		margin-top: .15rem;
	}
}

a.nav-link {
	padding-bottom: 30px;
	display: block;
	position: relative;
	&:after {
		content: "";
		border-bottom: 2px solid $red_900;
		position: absolute;
		transform: scaleX(0);
		width: 100%;
		left: 0;
		padding: inherit;
		transition: transform .3s ease-out, color .3s ease-out;
	}
}

a.nav-link:hover {
	color: $red_900;
}

a.nav-link:hover:after {
	transform: scaleX(1);
}

.navbar-brand {
	font-size: 1.25rem;
	@include media-breakpoint-up(sm) {
		font-size: 2rem;
	}
	font-weight: 300;
	strong {
		font-weight: 900;
	}
	img {
		margin-right: 1rem;
		transform: translateY(-5px);
	}
}

// Sections
section.intro {
	min-height: 100vh;
	background-image: url('../img/header-background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;
	position: relative;
	.branding {
		padding-top: 6rem;
		@include media-breakpoint-up(sm) {
			padding-top: 192px;
		}
		margin-bottom: 64px;
		text-align: center;
		color: $blue-grey-600;
		h1 {
			font-weight: 300 !important;
			color: $blue-grey-900;
			@include media-breakpoint-down(xs) {
				font-size: 4.5rem;
			}
			strong {
				font-weight: 700 !important;
			}
		}
		h1:before {
			content: "";
			height: 60px;
			width: 76px;
			background-image: url('../img/ipfire-tux.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			display: inline-block;
			position: relative;
			top: 4px;
			@include media-breakpoint-up(sm) {
				height: 120px;
				width: 93px;
				margin-right: 32px;
				top: 8px;
			}
		}
	}
	.page-scroll {
		position: absolute;
		bottom: 48px;
		left: 50%;
		transform: translateX(-50%);
		.btn {
			width: 36px;
			height: 36px;
			fill: $red_900;
			@include media-breakpoint-up(sm) {
				width: 64px;
				height: 64px;
			}
			&:hover .i_arrow_down {
				fill: white;
			}
		}
	}
}

section.content-section {
	padding: 3rem 0;
	@include media-breakpoint-up(sm) {
		padding: 72px 0;
	}
}

.feature_icons {
	width: 40px;
	height: 100%;
	float: left;
	margin-right: .75rem;
}

section#news,
footer {
	background-color: rgba($blue-grey-900, .06);
}

section#news {
	color: rgba($blue-grey-900, .6);
	h2 {
		color: $blue-grey-900;
	}
}

section#wishlist {
	background-image: url('../img/wishlist-background.jpg');
	background-size: cover;
	background-position: center center;
}

.progress {
	background-color: rgba(255, 255, 255, .2);
}

.bg-progress {
	background-image: linear-gradient(to right, $yellow-700, $amber-800);
}

section#fireinfo {
	border-bottom: 1px solid rgba($blue-grey-900, .2);
}

.circle {
	position: relative;
	p.lead {
		color: $blue-grey-600;
		position: absolute;
		top: calc(50% - 1.25rem);
		width: 100%;
		font-size: 1.25em;
	}
}

section#appliances {
	padding-bottom: 48px;
}

footer {
	padding: 3rem 0 0 0;
	@include media-breakpoint-down(md) {
		padding-top: 31px;
	}
	h4 {
		margin-bottom: 1.25rem;
		color: rgba($blue-grey-900, .6);
	}
	ul {
		li {
			font-size: $small-font-size;
			margin-bottom: .75rem;
			a {
				color: rgba($blue-grey-900, .6);
				text-decoration: none;
				&:hover {
					color: $blue-grey-900;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
	}
	.btn-sm {
		box-shadow: none;
		&:hover {
			box-shadow: none;
		}
	}
}

#copyright {
	background-color: rgba($blue-grey-900, .06);
	padding: 1rem 0;
}

// Animation
@keyframes scroll {
  0%, 100%   { transform: translateY(30%); }
  50% { transform: translateY(50%); }
}
Commit	Line	Data
b2051dd7 S	1	/*!
	2	* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
	3	* Copyright 2011-2017 The Bootstrap Authors
	4	* Copyright 2011-2017 Twitter, Inc.
	5	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	6	*/
	7
	8	// Core variables and mixins
	9	@import "bootstrap-4.0.0-alpha.6/scss/variables";
	10	@import "bootstrap-4.0.0-alpha.6/scss/mixins";
	11	@import "bootstrap-4.0.0-alpha.6/scss/custom";
	12
	13	// Reset and dependencies
	14	@import "bootstrap-4.0.0-alpha.6/scss/normalize";
	15	// @import "bootstrap-4.0.0-alpha.6/scss/print";
	16
	17	// Core CSS
	18	@import "bootstrap-4.0.0-alpha.6/scss/reboot";
	19	@import "bootstrap-4.0.0-alpha.6/scss/type";
22cfab2d	20	//@import "bootstrap-4.0.0-alpha.6/scss/images";
b2051dd7 S	21	// @import "bootstrap-4.0.0-alpha.6/scss/code";
	22	@import "bootstrap-4.0.0-alpha.6/scss/grid";
	23	// @import "bootstrap-4.0.0-alpha.6/scss/tables";
	24	// @import "bootstrap-4.0.0-alpha.6/scss/forms";
	25	@import "bootstrap-4.0.0-alpha.6/scss/buttons";
	26
	27	// Components
	28	@import "bootstrap-4.0.0-alpha.6/scss/transitions";
b6d1f3b7	29	//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
b2051dd7	30	@import "bootstrap-4.0.0-alpha.6/scss/button-group";
b6d1f3b7 S	31	//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
b6d1f3b7 S	32	//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
b2051dd7 S	33	@import "bootstrap-4.0.0-alpha.6/scss/nav";
b2051dd7 S	34	@import "bootstrap-4.0.0-alpha.6/scss/navbar";
b6d1f3b7	35	//@import "bootstrap-4.0.0-alpha.6/scss/card";
b2051dd7 S	36	// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
	37	// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
	38	// @import "bootstrap-4.0.0-alpha.6/scss/badge";
	39	// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
97ed546d	40	// @import "bootstrap-4.0.0-alpha.6/scss/alert";
b2051dd7 S	41	@import "bootstrap-4.0.0-alpha.6/scss/progress";
	42	@import "bootstrap-4.0.0-alpha.6/scss/media";
	43	@import "bootstrap-4.0.0-alpha.6/scss/list-group";
97ed546d S	44	// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
97ed546d S	45	// @import "bootstrap-4.0.0-alpha.6/scss/close";
b2051dd7 S	46
	47	// Components w/ JavaScript
	48	// @import "bootstrap-4.0.0-alpha.6/scss/modal";
	49	// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
	50	// @import "bootstrap-4.0.0-alpha.6/scss/popover";
	51	// @import "bootstrap-4.0.0-alpha.6/scss/carousel";
	52
	53	// Utility classes
97ed546d S	54	@import "bootstrap-4.0.0-alpha.6/scss/utilities";
97ed546d S	55
22cfab2d	56
a6a4d1cf	57	// Colors
a6a4d1cf S	58	.amber-800 {
	59	color: $amber-800;
	60	}
	61
22cfab2d	62	// Fonts
22cfab2d S	63	h1 {
	64	line-height: 3rem;
	65	}
	66
	67	h2 {
	68	line-height: 2.75rem;
	69	}
	70
	71	h3 {
	72	line-height: 2rem;
7a9f7ff6 S	73	@include media-breakpoint-down(sm) {
	74	font-size: 1em;
	75	}
22cfab2d S	76	}
22cfab2d S	77
ccd81281	78	h4 {
32efbb1f	79	font-weight: 500;
22cfab2d	80	line-height: 1.75rem;
32efbb1f S	81	@include media-breakpoint-down(sm) {
	82	font-size: 1em;
	83	}
22cfab2d S	84	}
	85
	86	h5 {
	87	line-height: 1.5rem;
	88	}
	89
	90	p {
	91	line-height: 1.5rem;
7a9f7ff6 S	92	@include media-breakpoint-down(sm) {
	93	font-size: .85em;
	94	}
22cfab2d S	95	&.lead {
	96	line-height: 2rem;
	97	@include media-breakpoint-down(md) {
	98	font-size: 1.5rem;
	99	line-height: 2rem;
	100	}
	101	@include media-breakpoint-down(sm) {
	102	font-size: 1rem;
	103	line-height: 1.5rem;
	104	}
	105	}
	106	}
	107
	108	.display-2 {
	109	margin-bottom: 4rem;
	110	@include media-breakpoint-down(md) {
	111	font-size: 2.5rem;
	112	line-height: 3.5rem;
	113	margin-bottom: 3rem;
	114	}
	115	@include media-breakpoint-down(sm) {
	116	font-size: 2rem;
	117	line-height: 2.75rem;
	118	}
	119	}
	120
	121	.display-4 {
7a9f7ff6	122	@include media-breakpoint-down(xs) {
22cfab2d S	123	font-size: .875rem;
	124	line-height: 1.25rem;
	125	}
	126	}
	127
	128	small {
	129	line-height: 1rem;
7a9f7ff6 S	130	@include media-breakpoint-down(sm) {
	131	font-size: .75em;
	132	}
22cfab2d S	133	}
	134
	135	.truncate {
	136	width: 100%;
	137	white-space: nowrap;
	138	overflow: hidden;
	139	text-overflow: ellipsis;
	140	}
	141
	142	// Images
	143	img {
	144	&.img-fluid {
	145	width: 100%;
	146	max-width: 100%;
	147	height: auto;
	148	}
	149	}
	150
	151	// Icons
22cfab2d S	152	.icon {
	153	width: 1.5rem;
	154	height: 1.5rem;
	155	fill: currentColor;
	156	vertical-align: -.15rem;
	157	overflow: hidden;
	158	margin-right: .5rem;
	159	}
	160
	161	.i_arrow_down {
	162	margin: 0;
efb8b657 S	163	position: absolute;
	164	left: .75rem;
	165	top: -.25rem;
eafb8738	166	animation: scroll 1.5s ease-in-out infinite;
7a9f7ff6	167	@include media-breakpoint-down(xs) {
32efbb1f S	168	width: 1.75rem !important;
	169	height: 1.75rem !important;
	170	left: .25rem;
	171	top: -.5rem;
efb8b657	172	}
22cfab2d S	173	}
	174
	175	.i_lg {
	176	width: 2.5rem;
	177	height: 2.5rem;
	178	margin: 0;
efb8b657	179	transform: translateY(-.35rem);
22cfab2d S	180	fill: $red_900;
	181	}
	182
	183	.i_sm {
efb8b657 S	184	vertical-align: top;
efb8b657 S	185	transform: translateY(-.10rem);
22cfab2d S	186	}
	187
	188	footer {
	189	.btn-toolbar .icon {
efb8b657 S	190	height: 2.25rem;
efb8b657 S	191	width: 2.25rem;
22cfab2d S	192	fill: rgba($blue-grey-900, .6);
	193	}
	194	.i_heart {
efb8b657 S	195	vertical-align: top;
	196	transform: translateY(-.15rem);
	197	@include media-breakpoint-down(sm) {
	198	transform: translateY(-.75rem);
	199	}
22cfab2d S	200	}
	201	}
	202
	203	// Buttons
22cfab2d S	204	.btn-red900 {
	205	@include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
	206	}
	207	.btn-white {
	208	@include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
	209	}
	210	.btn-bluegrey900 {
	211	@include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
ccd81281 S	212	}
	213
	214	button.navbar-toggler div {
	215	font-family: 'Ubuntu', sans-serif;
	216	font-size: 1rem;
	217	display: inline-block;
b3af5d9b S	218	position: relative;
b3af5d9b S	219	top: -4px;
ccd81281 S	220	}
ccd81281 S	221
97ed546d	222	.btn {
22cfab2d	223	height: 36px;
97ed546d	224	text-transform: uppercase;
9ce2074c S	225	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	226	transition: box-shadow .25s ease-in-out;
	227	&:hover {
	228	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
	229	transition: box-shadow .25s ease-in-out;
	230	}
22cfab2d S	231	@include media-breakpoint-down(sm) {
22cfab2d S	232	font-size: .875rem;
9ce2074c	233	}
97ed546d S	234	}
97ed546d S	235
69a9b33d S	236	.btn-outline-primary,
	237	.btn-outline-secondary {
	238	transition: background-color .25s ease-in-out;
	239	&:hover {
	240	transition: background-color .25s ease-in-out;
	241	}
	242	}
	243
1e5bc9c9	244	.btn-lg {
22cfab2d	245	height: 48px;
1e5bc9c9	246	margin: 0 24px;
22cfab2d S	247	@include media-breakpoint-down(sm) {
22cfab2d S	248	height: 36px;
69a9b33d	249	margin: 0 8px;
22cfab2d S	250	padding: 1rem;
	251	font-size: .875rem;
	252	line-height: 0;
69a9b33d S	253	}
	254	}
	255
efb8b657 S	256	.btn-md {
	257	font-size: 0.875rem;
	258	line-height: 1.25rem;
	259	padding: .4rem 1rem .5rem 1rem;
	260	}
	261
b6d1f3b7	262	.btn-block {
22cfab2d	263	margin: 0 0 1.5rem 0;
ccd81281	264	@include media-breakpoint-up(md) {
22cfab2d S	265	margin: 0 0 2rem 0;
22cfab2d S	266	}
7a9f7ff6	267	@include media-breakpoint-down(xs) {
22cfab2d S	268	font-size: .875rem;
22cfab2d S	269	line-height: 0;
ccd81281	270	}
b6d1f3b7 S	271	}
b6d1f3b7 S	272
848a7d41 S	273	button:focus {
	274	outline: none;
	275	}
	276
22cfab2d	277	// Top Navigation
1e5bc9c9 S	278	.fixed-top {
1e5bc9c9 S	279	transition: background-color 700ms linear;
69a9b33d S	280	.navbar {
69a9b33d S	281	width: 100%;
22cfab2d S	282	@include media-breakpoint-down(md) {
	283	padding: .5rem 0;
	284	}
	285	.navbar-toggler-left {
	286	left: -1rem;
	287	}
69a9b33d S	288	}
	289	.navbar-brand {
	290	opacity: 0;
	291	transition: opacity 700ms linear;
	292	@include media-breakpoint-up(lg) {
	293	opacity: 1;
	294	}
	295	}
1e5bc9c9 S	296	}
	297
	298	.scrolled {
	299	background-color: rgba(255, 255, 255, .96);
69a9b33d S	300	.navbar-brand {
	301	opacity: 1;
	302	transition: opacity 700ms linear;
	303	}
1e5bc9c9 S	304	}
1e5bc9c9 S	305
ccd81281 S	306	.menu-text.hidden {
	307	display: none;
	308	visibility: hidden;
	309	}
	310
1e5bc9c9 S	311	.navbar {
	312	a {
	313	color: $blue-grey-900;
	314	}
b6d1f3b7 S	315	.btn {
	316	margin-top: .15rem;
	317	}
1e5bc9c9 S	318	}
1e5bc9c9 S	319
c60d28da S	320	a.nav-link {
	321	padding-bottom: 30px;
	322	display: block;
	323	position: relative;
	324	&:after {
	325	content: "";
	326	border-bottom: 2px solid $red_900;
	327	position: absolute;
	328	transform: scaleX(0);
	329	width: 100%;
	330	left: 0;
	331	padding: inherit;
81747382	332	transition: transform .3s ease-out, color .3s ease-out;
c60d28da S	333	}
	334	}
	335
81747382 S	336	a.nav-link:hover {
	337	color: $red_900;
	338	}
	339
c60d28da S	340	a.nav-link:hover:after {
	341	transform: scaleX(1);
	342	}
	343
97ed546d	344	.navbar-brand {
ccd81281 S	345	font-size: 1.25rem;
	346	@include media-breakpoint-up(sm) {
	347	font-size: 2rem;
	348	}
97ed546d	349	font-weight: 300;
22cfab2d S	350	strong {
	351	font-weight: 900;
	352	}
97ed546d S	353	img {
	354	margin-right: 1rem;
	355	transform: translateY(-5px);
	356	}
	357	}
	358
22cfab2d	359	// Sections
97ed546d S	360	section.intro {
	361	min-height: 100vh;
	362	background-image: url('../img/header-background.jpg');
	363	background-size: cover;
	364	background-attachment: fixed;
	365	background-position: center top;
	366	position: relative;
	367	.branding {
69a9b33d	368	padding-top: 6rem;
7a9f7ff6	369	@include media-breakpoint-up(sm) {
69a9b33d S	370	padding-top: 192px;
69a9b33d S	371	}
97ed546d S	372	margin-bottom: 64px;
	373	text-align: center;
	374	color: $blue-grey-600;
	375	h1 {
	376	font-weight: 300 !important;
	377	color: $blue-grey-900;
7a9f7ff6	378	@include media-breakpoint-down(xs) {
69a9b33d S	379	font-size: 4.5rem;
69a9b33d S	380	}
97ed546d S	381	strong {
	382	font-weight: 700 !important;
	383	}
	384	}
	385	h1:before {
	386	content: "";
69a9b33d S	387	height: 60px;
69a9b33d S	388	width: 76px;
97ed546d S	389	background-image: url('../img/ipfire-tux.png');
	390	background-repeat: no-repeat;
	391	background-position: center center;
	392	background-size: contain;
97ed546d S	393	display: inline-block;
97ed546d S	394	position: relative;
69a9b33d	395	top: 4px;
7a9f7ff6	396	@include media-breakpoint-up(sm) {
69a9b33d S	397	height: 120px;
	398	width: 93px;
	399	margin-right: 32px;
	400	top: 8px;
	401	}
97ed546d S	402	}
97ed546d S	403	}
97ed546d S	404	.page-scroll {
	405	position: absolute;
	406	bottom: 48px;
97ed546d S	407	left: 50%;
	408	transform: translateX(-50%);
	409	.btn {
ac8ab589 S	410	width: 36px;
ac8ab589 S	411	height: 36px;
97ed546d	412	fill: $red_900;
7a9f7ff6	413	@include media-breakpoint-up(sm) {
69a9b33d S	414	width: 64px;
	415	height: 64px;
	416	}
a6a4d1cf S	417	&:hover .i_arrow_down {
	418	fill: white;
	419	}
97ed546d S	420	}
97ed546d S	421	}
1e5bc9c9 S	422	}
	423
	424	section.content-section {
6a63d20a	425	padding: 3rem 0;
7a9f7ff6	426	@include media-breakpoint-up(sm) {
22cfab2d	427	padding: 72px 0;
ccd81281	428	}
1e5bc9c9 S	429	}
1e5bc9c9 S	430
22cfab2d S	431	.feature_icons {
	432	width: 40px;
	433	height: 100%;
	434	float: left;
	435	margin-right: .75rem;
1e5bc9c9 S	436	}
1e5bc9c9 S	437
b6d1f3b7 S	438	section#news,
b6d1f3b7 S	439	footer {
22cfab2d S	440	background-color: rgba($blue-grey-900, .06);
	441	}
	442
	443	section#news {
	444	color: rgba($blue-grey-900, .6);
	445	h2 {
	446	color: $blue-grey-900;
	447	}
1e5bc9c9 S	448	}
	449
	450	section#wishlist {
	451	background-image: url('../img/wishlist-background.jpg');
	452	background-size: cover;
	453	background-position: center center;
b6d1f3b7 S	454	}
b6d1f3b7 S	455
3d770ad7 S	456	.progress {
	457	background-color: rgba(255, 255, 255, .2);
	458	}
	459
22cfab2d S	460	.bg-progress {
	461	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	462	}
	463
b6d1f3b7 S	464	section#fireinfo {
	465	border-bottom: 1px solid rgba($blue-grey-900, .2);
	466	}
	467
22cfab2d S	468	.circle {
	469	position: relative;
	470	p.lead {
	471	color: $blue-grey-600;
	472	position: absolute;
	473	top: calc(50% - 1.25rem);
	474	width: 100%;
32efbb1f	475	font-size: 1.25em;
22cfab2d	476	}
b6d1f3b7 S	477	}
b6d1f3b7 S	478
7a9f7ff6 S	479	section#appliances {
	480	padding-bottom: 48px;
	481	}
	482
b6d1f3b7 S	483	footer {
b6d1f3b7 S	484	padding: 3rem 0 0 0;
7a9f7ff6 S	485	@include media-breakpoint-down(md) {
	486	padding-top: 31px;
	487	}
9ce2074c S	488	h4 {
9ce2074c S	489	margin-bottom: 1.25rem;
22cfab2d	490	color: rgba($blue-grey-900, .6);
9ce2074c S	491	}
	492	ul {
	493	li {
	494	font-size: $small-font-size;
	495	margin-bottom: .75rem;
	496	a {
22cfab2d	497	color: rgba($blue-grey-900, .6);
9ce2074c S	498	text-decoration: none;
9ce2074c S	499	&:hover {
22cfab2d	500	color: $blue-grey-900;
9ce2074c S	501	text-decoration: underline;
	502	}
	503	}
	504	}
	505	}
	506	.btn-lg {
	507	margin-bottom: 2.75rem;
9ce2074c S	508	}
	509	.btn-sm {
	510	box-shadow: none;
	511	&:hover {
	512	box-shadow: none;
	513	}
9ce2074c	514	}
b6d1f3b7 S	515	}
b6d1f3b7 S	516
22cfab2d S	517	#copyright {
	518	background-color: rgba($blue-grey-900, .06);
	519	padding: 1rem 0;
b6eb5162 S	520	}
b6eb5162 S	521
22cfab2d	522	// Animation
22cfab2d	523	@keyframes scroll {
eafb8738	524	0%, 100% { transform: translateY(30%); }
efb8b657	525	50% { transform: translateY(50%); }
97ed546d	526	}