html {
font-size: 62.5%;
}
body {
background: #FFF url('http://candomachinery.com/images/y-so-serious-white.png') repeat center;
font-family: 'Montserrat', sans-serif;
color: #333;
margin: 0;
font-size: 1.5rem;
}
.site-wrapper {
min-width: 960px;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
color: #000;
margin: 24px 0;
}
h1 { font-size: 4.8rem; }
h2 { font-size: 4rem; }
h3 { font-size: 3.2rem; }
h4 { font-size: 2.4rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
a,
a:visited {
color: #1E42AF;
text-decoration: none;
transition: all 150ms ease-in-out;
}
a:hover {
text-decoration: underline;
color: #15379E;
}
hr {
background-color: #EEE;
margin: 32px 0;
border: none;
height: 2px;
}
/* Buttons */
.button {
font-family: "Barlow Condensed", sans-serif;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
transition: all .2s ease;
text-decoration: none;
border-radius: 6px;
padding: 12px 16px;
font-weight: 500;
font-size: 2rem;
display: grid;
grid-template-columns: 1fr 28px;
/* Gray by default */
border: 1px solid #E5E5E5;
color: #333;
background: rgb(238,238,238);
background: linear-gradient(164deg, rgba(238,238,238,1) 54%, rgba(246,246,246,1) 100%);
}
.button svg {
transition: all .2s ease;
fill: #333;
justify-self: right;
align-self: center;
height: 20px;
width: 20px;
}
.button:hover {
text-decoration: none;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
/* Gray by default */
color: #000;
background: rgb(229,229,229);
background: linear-gradient(164deg, rgba(229,229,229,1) 54%, rgba(246,246,246,1) 100%);
}
.button:hover svg { fill: #000; }
.button.inline {
display: inline-block;
}
.button.blue {
color: #FFF;
border: none;
background: rgb(30,66,175);
background: linear-gradient(164deg, rgba(30,66,175,1) 54%, rgba(48,95,197,1) 100%);
}
.button.blue svg { fill: #FFF; }
.button.blue:hover {
background: rgb(21,55,158);
background: linear-gradient(164deg, rgba(21,55,158,1) 54%, rgba(48,95,197,1) 100%);
}
.button.orange {
color: #FFF;
border: none;
}
/* Header */
header {
background-color: #FFF;
padding: 24px 40px;
}
header .top {
display: grid;
grid-template-columns: 1fr 240px 1fr;
}
header p.tagline {
max-width: 260px;
margin: 0;
align-self: center;
}
header p.call {
text-align: right;
color: #000;
font-size: 1.4rem;
margin: 0;
align-self: center;
}
header .call a,
header .call a:visited {
font-family: "Barlow Condensed", sans-serif;
color: #000;
font-size: 2.8rem;
font-weight: 700;
}
header .call a:hover {
color: #1E42AF;
}
.logo {
display: block;
}
.logo:hover {
opacity: .75;
}
.logo img {
height: 56px;
width: 240px;
}
/* Nav bar */
nav {
border-bottom: 2px solid #EEE;
background-color: #FFF;
padding-bottom: 16px;
}
nav ul { /* generalized */
list-style: none;
text-align: left;
display: flex;
padding: 0;
justify-content: center;
margin: 0;
}
nav ul li {
}
nav ul li a,
nav ul li a:visited {
display: block;
border-radius: 6px;
padding: 14px 20px;
font-size: 1.6rem;
font-weight: 700;
background-color: rgba(255, 255, 255, 0);
color: #1E42AF;
}
nav ul li a:hover {
background-color: rgba(30, 66, 175, .1);
color: #15379E;
text-decoration: none;
}
nav ul li a.active {
background-color: #1E42AF;
color: #FFF;
}
nav ul li a.active:hover {
background-color: #15379E;
color: #FFF;
}
/* top level only */
nav > ul {
}
nav > ul > li {
}
/* Sidebar */
aside.sidebar {}
aside.sidebar section {
background-color: rgba(238, 238, 238, .75);
padding: 8px;
text-align: center;
margin-bottom: 16px;
}
aside.sidebar section > h1 {
font-size: 1.8rem;
font-weight: 700;
text-align: center;
margin: 0 0 8px 0;
text-transform: uppercase;
}
aside.sidebar section > h1 a:visited,
aside.sidebar section > h1 a {
display: block;
color: #000;
}
aside.sidebar section > h1 a:hover {
color: #1E42AF;
}
aside.sidebar section > div {
background-color: #FFF;
padding: 8px;
font-size: 1.2rem;
margin-bottom: 8px;
}
aside.sidebar section > div:last-child {
margin-bottom: 0;
}
aside.sidebar section > div p.quote {
color: #000;
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
font-size: 1.8rem;
margin: 0;
}
aside.sidebar section > div img.quotation-mark {
margin: 8px 0;
}
ul.checklist,
aside.sidebar section ul.checklist {
text-align: left;
font-size: 1.4rem;
list-style: none;
margin: 0;
padding: 0;
}
ul.checklist li,
aside.sidebar section ul.checklist li {
padding: 10px 0 10px 42px;
background-image: url('../images/checkmark-icon.svg');
background-repeat: no-repeat;
background-position: 0 0;
}
/* Content Max-Widths */
header,
section.page,
.page-header,
footer {
display: flex;
justify-content: center;
}
header > .inner,
section.page .content,
.page-header .inner,
footer .inner {
flex-grow: 1;
max-width: 1600px;
}
/* Page Contents */
section.page {
padding: 32px;
}
section.page > .inner {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
section.page > .inner.has-sidebar-left {
grid-template-columns: 240px 1fr;
}
section.page > .inner.has-sidebar-right {
grid-template-columns: 1fr 240px;
}
.layout {
display: grid;
/* grid-template-rows: 1fr auto; */
gap: 32px;
}
.layout.no-margin {
margin: 0;
}
.layout.col-2 {
grid-template-columns: 1fr 1fr;
}
.layout.col-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.product-page {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.product-page.has-sidebar {
grid-template-columns: 1fr 240px;
}
/* Hero section header */
.page-header {
background-color: #FFF;
border-bottom: 2px solid #EEE;
padding: 24px 40px;
}
.page-header .inner {
display: grid;
/* grid-template-columns: 748px 1fr; */
grid-template-columns: .65fr .35fr;
gap: 32px;
align-items: center;
}
.page-header h1 {
margin: 0;
display: flex;
align-items: center;
line-height: 4.8rem;
font-size: 4.8rem;
flex-grow: 1;
}
.page-header h1 img {
border-right: 1px solid #EEE;
margin-right: 40px;
}
.page-header p {
text-align: right;
margin: 0;
font-family: "Barlow Condensed", sans-serif;
font-size: 2rem;
align-self: center;
}
.page-header p strong {
color: #000;
font-size: 2.4rem;
}
/* Special content box calls to action */
.message-box {
text-align: center;
padding: 8px;
display: flex;
flex-direction: column;
background: rgb(22,56,160);
background: linear-gradient(135deg, rgba(22,56,160,1) 57%, rgba(65,127,219,1) 100%);
}
.message-box.orange {
background: rgb(255,138,0);
background: linear-gradient(135deg, rgba(255,138,0,1) 57%, rgba(255,179,66,1) 100%);
}
.message-box h3 {
margin: 0 0 8px;
font-size: 3.2rem;
font-weight: 500;
color: #FFF;
}
.message-box div {
background-color: #FFF;
padding: 24px 32px;
flex-grow: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
.message-box p {
font-size: 1.6rem;
}
.message-box p:first-child {
margin: 0 0 16px;
}
.message-box p:last-child {
margin: 0;
}
/* Product details hero sections */
.product-details {
display: grid;
grid-template-rows: min-content 1fr;
}
.product-details .product-inner {
background-color: #FFF;
border: 2px solid #EEE;
border-top: none;
}
.layout.col-2 .product-details .product-inner {
display: grid;
grid-template-columns: 322px 1fr;
}
.product-details h2 {
font-size: 3.2rem;
text-align: center;
background-color: #000;
padding: 8px 40px 16px;
color: #FFF;
margin: 0;
}
.layout.col-2 .product-details h2 {
text-align: left;
font-size: 4rem;
}
.product-details .product-inner aside {
display: flex;
flex-direction: column;
}
.layout.col-3 .product-details .product-inner aside {
border-bottom: 2px solid #EEE;
}
.layout.col-2 .product-details .product-inner aside {
border-right: 2px solid #EEE;
}
.product-details .product-inner aside img {
align-self: center;
}
.product-details .product-inner aside p {
font-family: "Barlow Condensed", sans-serif;
text-align: center;
}
.product-details .product-inner aside .downloads p {
font-size: 1.6rem;
}
.product-details .product-inner aside .product-price p {
margin: 0 0 32px 0;
font-size: 2.6rem;
}
.product-details .product-inner aside .product-price p strong {
font-size: 4.8rem;
color: #27AE60;
display: block;
}
.product-details .product-inner .downloads {
padding: 0 24px 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-details .product-inner .downloads .buttons {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
}
.product-details .product-inner .downloads .buttons .button {
margin-bottom: 16px;
}
.product-details .product-inner .downloads .buttons .button:last-child {
margin-bottom: 0;
}
.product-features {
padding: 16px;
overflow: hidden;
max-height: fit-content;
position: relative;
}
.product-features.overflow {
padding-bottom: 72px;
}
.layout.col-2 .product-features.overflow.closed {
max-height: 488px;
}
.layout.col-3 .product-features.overflow.closed {
max-height: 312px;
}
.product-features a {
font-family: "Barlow Condensed", sans-serif;
font-size: 2rem;
display: none;
bottom: 0;
left: 0;
right: 0;
padding: 32px 16px 16px;
text-decoration: none;
text-align: center;
font-weight: 600;
position: absolute;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%);
}
.product-features.overflow a {
display: block;
}
.product-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.product-features ul li {
padding: 8px 0 8px 32px;
background-image: url('../images/icons/icon-tick-green.svg');
background-repeat: no-repeat;
background-position: 0 0;
font-size: 1.4rem;
}
/* Gray content wells for short messages */
.note {
font-family: "Barlow Condensed", sans-serif;
background-color: #EEE;
padding: 8px 24px 12px;
text-align: center;
font-size: 2.4rem;
color: #333333;
}
.note p {
margin: 0;
}
/* Solid white content area */
.content-block {
display: grid;
margin: 32px 0;
background: #FFF;
border: 2px solid #EEE;
}
.content-block.has-sidebar {
grid-template-columns: 200px 1fr;
}
.content-block-main {
padding: 8px 40px 16px;
}
/* Content area sidebar */
.content-block aside {
background-color: #F7F7F7;
border-right: 2px solid #EEE;
padding-bottom: 16px;
}
.sticky-sidebar {
position: -webkit-sticky;
position: sticky;
top: -1px;
}
.content-block aside hr {
margin: 16px 0;
}
.label-bar {
background-color: #eee;
padding: 4px 28px 8px;
margin: 0 0 16px;
font-size: 2rem;
color: #909090;
font-weight: 400;
}
.link-group {
padding: 0 16px;
}
.link-group h2 {
padding: 0 12px 8px;
font-weight: 600;
font-size: 2rem;
margin: 0;
}
.link-group ul {
list-style: none;
padding: 0;
margin: 0;
}
.link-group ul li a,
.link-group ul li a:visited {
border: 2px solid rgba(30, 66, 175, 0);
text-decoration: none;
border-radius: 4px;
padding: 4px 12px;
font-weight: 400;
display: block;
color: #666;
}
.link-group ul li a:hover {
border: 2px solid rgba(30, 66, 175, 1);
color: #15379E;
}
.link-group ul li a svg,
.link-group ul li a:visited svg {
margin-right: 12px;
fill: #999;
}
.link-group ul li a:hover svg {
fill: #15379E;
}
/******************/
/* Product Tables */
/******************/
/* For legacy Pages */
.product-cells table .sc-content p {
margin: 0;
}
.powerfeeds-product {
font-size: 1rem;
}
.powerfeeds-price {
font-size: 1rem;
font-weight: bold;
color: red;
}
/* End Legacy Page Styles */
h2.table-anchor {
background-color: #1E42AF;
padding: 4px 16px 8px;
font-size: 4rem;
color: #FFF;
margin: 0;
position: -webkit-sticky;
position: sticky;
top: -1px;
z-index: 10;
}
h2.table-anchor.background-acurite { background-color: #376DB3; }
h2.table-anchor.background-anilam { background-color: #EC1B2E; }
h2.table-anchor.background-bestline { background-color: #EAD32D; }
h2.table-anchor.background-fagor { background-color: #E62203; }
h2.table-anchor.background-heidenhain { background-color: #B5BD00; }
h2.table-anchor.background-mitutoyo { background-color: #EB5C02; }
h2.table-anchor.background-newall { background-color: #EE1B2E; }
h2.table-anchor.background-magnescale { background-color: #FE0000; }
h2.table-anchor.background-starrett { background-color: #DA2128; }
h2.table-anchor svg {
vertical-align: top;
margin: 10px 16px 0 0;
}
.table {
font-family: "Barlow Condensed", sans-serif;
margin-bottom: 24px;
font-size: 2rem;
font-weight: 400;
display: grid;
color: #444;
}
.table .header,
.table .subheader,
.table .body > ul {
display: grid;
}
.table ul {
/* display: contents; */
list-style: none;
padding: 0;
margin: 0;
}
.table ul li {
border-bottom: 1px solid #EEE;
padding: 4px 12px 6px;
margin: 0 8px 0 0;
}
.table .header,
.table .subheader {
position: -webkit-sticky;
position: sticky;
}
.table .header {
top: 59px;
z-index: 9;
}
.table .subheader {
top: 95px;
z-index: 8;
}
.table .header li {
background-color: #000;
padding: 4px 12px 6px;
font-weight: 600;
color: #FFF;
border-bottom: none;
}
.table .subheader li{
background-color: #F7F7F7;
color: #4F4F4F;
font-size: 1.6rem;
border-bottom: none;
}
.table ul li:last-child {
margin: 0;
}
/*****************************************/
/* 3-column table with travels & pricing */
/*****************************************/
.table.col-3 .header {
grid-template-columns: 1fr 1fr 1fr;
}
.table.col-3 .subheader,
.table.col-3 .body > ul {
grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr; /* Table Travel, then two column pairs */
}
/*****************************************/
/* 2-column table with travels & pricing */
/*****************************************/
.table.col-2 .header {
grid-template-columns: 1fr 1fr;
}
.table.col-2 .subheader,
.table.col-2 .body > ul {
grid-template-columns: 1fr 0.5fr 0.5fr; /* Table Travel, then one column pair */
}
/*****************************************/
/* 4-column table with travels & pricing */
/*****************************************/
.table.col-4 .header {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.table.col-4 .subheader,
.table.col-4 .body > ul {
grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr; /* Table Travel, then three column pairs */
}
/* Travel column */
.table.col-2.has-travel .body ul li:nth-child(3n+1),
.table.col-3.has-travel .body ul li:nth-child(5n+1),
.table.col-4.has-travel .body ul li:nth-child(7n+1) {
font-weight: 600;
font-size: 2.4rem;
}
/* Travel column subline */
.table.col-2.has-travel .body ul li:nth-child(3n+1) em,
.table.col-3.has-travel .body ul li:nth-child(5n+1) em,
.table.col-4.has-travel .body ul li:nth-child(7n+1) em {
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
font-weight: 400;
display: block;
color: #828282;
}
/* Price columns */
.table.col-2.has-price .body ul li:nth-child(3n+3),
.table.col-3.has-price .body ul li:nth-child(5n+3),
.table.col-3.has-price .body ul li:nth-child(5n+5),
.table.col-4.has-price .body ul li:nth-child(7n+3),
.table.col-4.has-price .body ul li:nth-child(7n+5),
.table.col-4.has-price .body ul li:nth-child(7n+7) {
font-weight: 600;
color: #27AE60;
}
/* Price columns */
.table.col-2.has-price .body ul li:nth-child(3n+3) em,
.table.col-3.has-price .body ul li:nth-child(5n+3) em,
.table.col-3.has-price .body ul li:nth-child(5n+5) em,
.table.col-4.has-price .body ul li:nth-child(7n+3) em,
.table.col-4.has-price .body ul li:nth-child(7n+5) em,
.table.col-4.has-price .body ul li:nth-child(7n+7) em {
color: #FF8A00;
}
.table.col-2 .subheader li:nth-child(3n+2),
.table.col-2.has-price .body ul li:nth-child(3n+2),
.table.col-3 .subheader li:nth-child(5n+2),
.table.col-3 .subheader li:nth-child(5n+4),
.table.col-3 .subheader li:nth-child(5n+5),
.table.col-3.has-price .body ul li:nth-child(5n+2),
.table.col-3.has-price .body ul li:nth-child(5n+4),
.table.col-3.has-price .body ul li:nth-child(5n+5),
.table.col-4 .subheader li:nth-child(7n+2),
.table.col-4.has-price .body ul li:nth-child(7n+2),
.table.col-4 .subheader li:nth-child(7n+4),
.table.col-4 .subheader li:nth-child(7n+6),
.table.col-4.has-price .body ul li:nth-child(7n+2),
.table.col-4.has-price .body ul li:nth-child(7n+4),
.table.col-4.has-price .body ul li:nth-child(7n+6) {
margin: 0;
}
/* Icons */
svg {
vertical-align: middle;
display: inline-block;
fill: #FFF;
transition: all .25s ease;
}
svg.gray { fill: #999; }
svg.black { fill: #000; }
svg.blue { fill: #1E42AF; }
svg.sml {
height: 24px;
width: 24px;
}
svg.med {
height: 32px;
width: 32px;
}
/* Footer */
footer {
background-color: #FFF;
border-top: 2px solid #EEE;
padding: 40px;
font-size: 1.6rem;
line-height: 2rem;
}
footer .inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
}
footer .inner section {
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid #EEE;
}
footer .inner section:last-child {
border: none;
}
footer img {
margin-right: 4px;
}
footer img:last-child {
margin: 0;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
}
footer ul li {
margin: 2px 0;
}
footer p {
margin: 0;
}
footer p.payments,
footer section.copyright p:last-child {
margin-top: 16px;
}
footer section.copyright {
font-size: 1.4rem;
line-height: 1.8rem;
}