@charset "UTF-8";
/*
HTML5 Reset :: style.css
https://github.com/murtaugh/HTML5-Reset/blob/master/assets/css/reset.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent; }
main, article, aside, figure, footer, header, nav, section, details, summary {
display: block; }
/* Handle box-sizing while better addressing child elements:
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
box-sizing: border-box; }
*,
*:before,
*:after {
box-sizing: inherit; }
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
max-width: 100%; }
/*
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
In fact, it *will* cause problems with Google Maps' controls at small size.
If this is the case for you, try uncommenting the following:
#map img {
max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
overflow-y: scroll; }
/* we use a lot of ULs that aren't bulleted.
you'll have to restore the bullets within content,
which is fine because they're probably customized anyway */
ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
del {
text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help; }
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0; }
th {
font-weight: bold;
vertical-align: bottom; }
td {
font-weight: normal;
vertical-align: top; }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
input, select {
vertical-align: middle; }
pre {
white-space: pre;
/* CSS2 */
white-space: pre-wrap;
/* CSS 2.1 */
white-space: pre-line;
/* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word;
/* IE */ }
input[type="radio"] {
vertical-align: text-bottom; }
input[type="checkbox"] {
vertical-align: bottom; }
.ie7 input[type="checkbox"] {
vertical-align: baseline; }
.ie6 input {
vertical-align: text-bottom; }
select, input, textarea {
font: 99% sans-serif; }
table {
font-size: inherit;
font: 100%; }
small {
font-size: 85%; }
strong {
font-weight: bold; }
td, td img {
vertical-align: top; }
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* standardize any monospaced elements */
pre, code, kbd, samp {
font-family: monospace, sans-serif; }
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
cursor: pointer; }
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
margin: 0; }
/* make buttons play nice in IE */
button,
input[type=button] {
width: auto;
overflow: visible; }
/* scale images in IE7 more attractively */
.ie7 img {
-ms-interpolation-mode: bicubic; }
/* prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
content: " ";
display: block;
clear: both; }
a {
text-decoration: none; }
:root {
--link-arrow-red: url('data:image/svg+xml,');
--link-arrow-black: url('data:image/svg+xml,');
--icon-lock: url('data:image/svg+xml,');
--link-arrow-red: url('data:image/svg+xml,');
--link-arrow-black: url('data:image/svg+xml,');
--link-arrow-gray: url('data:image/svg+xml,');
--link-arrow-orange: url('data:image/svg+xml,');
--link-arrow-white: url('data:image/svg+xml,');
--dropdown-arrow: url('data:image/svg+xml,'); }
@font-face {
font-family: 'Suisse Intl Mono';
font-weight: normal;
font-style: normal;
src: local(""), url("../fonts/SuisseIntlMono-Regular-WebXL.woff2") format("woff2"), url("../fonts/SuisseIntlMono-Regular-WebXL.woff") format("woff"); }
@font-face {
font-family: 'Arial MT Condensed';
font-weight: normal;
font-style: normal;
src: url("../fonts/Arial-MT-Condensed.otf") format("opentype"); }
@media (max-width: 980px) {
.desktop-only {
display: none; } }
@media (min-width: 981px) {
.mobile-only {
display: none; } }
:root {
--primary-color: #000000;
--secondary-color: #ffffff;
--active-font: Arial MT Condensed, Arial, sans-serif; }
.alternative-font {
--active-font: Suisse Intl Mono, Helvetica, Arial, sans-serif; }
main, header, footer, .banner {
font-family: var(--active-font);
font-size: 1.4375rem;
line-height: 1.15;
letter-spacing: -0.01em;
color: #000000; }
@media (max-width: 980px) {
main, header, footer, .banner {
font-size: 1.0625rem; } }
@media (max-width: 480px) {
main, header, footer, .banner {
font-size: 1.0625rem; } }
@media (max-width: 980px) {
main, header, footer, .banner {
line-height: 1.15; } }
@media (max-width: 480px) {
main, header, footer, .banner {
line-height: 1.15; } }
@media (max-width: 980px) {
main, header, footer, .banner {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main, header, footer, .banner {
letter-spacing: -0.03em; } }
html, body {
scroll-behavior: smooth;
scroll-padding-top: 316px; }
@media (max-width: 980px) {
html, body {
scroll-padding-top: 135px; } }
@media (max-width: 480px) {
html, body {
scroll-padding-top: 135px; } }
body {
display: flex;
flex-direction: column; }
body.menu-open, body.modal-popup {
overflow: hidden; }
.spector-books {
display: flex;
width: 100vw;
height: 100vh;
/*
.no-touch & {
&.hover {
> .left:hover, >.right:hover {
width: calc(50% + 25px);
}
> .left:not(:hover), >.right:not(:hover) {
width: calc(50% - 25px);
}
}
}
*/ }
.spector-books > * {
font-family: "Arial MT Condensed", Arial, sans-serif;
font-size: 2.4375rem;
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--primary-color);
background: var(--secondary-color);
width: 50%;
display: flex;
align-items: center; }
@media (max-width: 980px) {
.spector-books > * {
font-size: 1.8125rem; } }
@media (max-width: 480px) {
.spector-books > * {
font-size: 1.8125rem; } }
@media (max-width: 980px) {
.spector-books > * {
line-height: 1.15; } }
@media (max-width: 480px) {
.spector-books > * {
line-height: 1.15; } }
@media (max-width: 980px) {
.spector-books > * {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.spector-books > * {
letter-spacing: -0.03em; } }
.spector-books > * > * {
margin: 0.5em; }
.no-touch .spector-books > * > * {
transition: transform 250ms ease-out; }
.no-touch .spector-books > *:hover > * {
transform: scale(1.1); }
.spector-books .left {
justify-content: flex-end; }
.spector-books .right {
--primary-color: #ffffff;
--secondary-color: #000000; }
.spector-books .left, .spector-books .right {
transition: width 500ms ease-in-out; }
body {
--sidebar-speed: 250ms;
--sidebar-left: 155px;
--sidebar-right: 155px; }
@media (max-width: 980px) {
body {
--sidebar-left: 1rem;
--sidebar-right: 1rem; } }
@media (max-width: 980px) {
body[data-scheme="white"] {
--sidebar-left: 0; }
body[data-scheme="black"] {
--sidebar-right: 0; } }
main, .sidebar {
color: var(--primary-color);
background: var(--secondary-color);
display: flex;
flex-direction: column;
justify-content: space-between; }
main .canvas, .sidebar .canvas {
width: 100%;
display: flex;
flex-direction: column; }
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
font-family: var(--active-font);
font-size: 2.4375rem;
line-height: 1.05;
letter-spacing: -0.03em;
padding-top: 0.5rem; }
@media (max-width: 980px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
font-size: 2.4375rem; } }
@media (max-width: 480px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
font-size: 2.4375rem; } }
@media (max-width: 980px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
line-height: 1.05; } }
@media (max-width: 480px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
line-height: 1.05; } }
@media (max-width: 980px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main h1, main .sidebar-title, main .top-nav, .sidebar h1, .sidebar .sidebar-title, .sidebar .top-nav {
letter-spacing: -0.03em; } }
main h1, main .top-nav, .sidebar h1, .sidebar .top-nav {
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px var(--primary-color) solid;
text-align: center; }
@media (max-width: 980px) {
main h1, main .top-nav, .sidebar h1, .sidebar .top-nav {
text-align: left; } }
main .top-nav, .sidebar .top-nav {
display: flex;
flex-wrap: wrap;
justify-content: center; }
@media (max-width: 980px) {
main .top-nav, .sidebar .top-nav {
flex-wrap: nowrap;
flex-direction: column; } }
main .top-nav a, .sidebar .top-nav a {
margin: 0 0.5em; }
[data-scheme="white"] main .top-nav a::after, [data-scheme="white"] .sidebar .top-nav a::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
[data-scheme="white"] main .top-nav a:hover::after, [data-scheme="white"] .sidebar .top-nav a:hover::after {
opacity: 1; }
[data-scheme="white"] main .top-nav a.current::after, [data-scheme="white"] .sidebar .top-nav a.current::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
[data-scheme="white"] main .top-nav a.current:hover::after, [data-scheme="white"] .sidebar .top-nav a.current:hover::after {
opacity: 1; }
[data-scheme="white"] main .top-nav a.current::after, [data-scheme="white"] .sidebar .top-nav a.current::after {
opacity: 1; }
[data-scheme="black"] main .top-nav a::before, [data-scheme="black"] .sidebar .top-nav a::before {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
[data-scheme="black"] main .top-nav a:hover::before, [data-scheme="black"] .sidebar .top-nav a:hover::before {
opacity: 1; }
[data-scheme="black"] main .top-nav a.current::before, [data-scheme="black"] .sidebar .top-nav a.current::before {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
[data-scheme="black"] main .top-nav a.current:hover::before, [data-scheme="black"] .sidebar .top-nav a.current:hover::before {
opacity: 1; }
[data-scheme="black"] main .top-nav a.current::before, [data-scheme="black"] .sidebar .top-nav a.current::before {
opacity: 1; }
@media (max-width: 980px) {
main .top-nav a, .sidebar .top-nav a {
margin: 0; } }
@media (max-width: 480px) {
main .top-nav a, .sidebar .top-nav a {
margin: 0; } }
main {
font-family: var(--active-font);
font-size: 1.4375rem;
line-height: 1.15;
letter-spacing: -0.01em;
display: flex;
flex-direction: column;
margin: 0 var(--sidebar-right) 0 var(--sidebar-left);
height: 100vh;
overflow-y: scroll;
padding: 0 92px; }
@media (max-width: 980px) {
main {
font-size: 1.0625rem; } }
@media (max-width: 480px) {
main {
font-size: 1.0625rem; } }
@media (max-width: 980px) {
main {
line-height: 1.15; } }
@media (max-width: 480px) {
main {
line-height: 1.15; } }
@media (max-width: 980px) {
main {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main {
letter-spacing: -0.03em; } }
@media (max-width: 980px) {
main {
padding: 0 1em; } }
[data-scheme="black"] main {
--primary-color: #ffffff;
--secondary-color: #000000; }
main .canvas {
position: relative; }
main .canvas + nav {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
font-size: 0.9375rem;
line-height: 1.2;
letter-spacing: -0.03em;
border-top: 1px var(--primary-color) solid;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
margin-top: 3.75em;
width: 100%;
display: flex;
justify-content: space-between; }
@media (max-width: 980px) {
main .canvas + nav {
font-size: 0.75rem; } }
@media (max-width: 480px) {
main .canvas + nav {
font-size: 0.75rem; } }
@media (max-width: 980px) {
main .canvas + nav {
line-height: 1.2; } }
@media (max-width: 480px) {
main .canvas + nav {
line-height: 1.2; } }
@media (max-width: 980px) {
main .canvas + nav {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main .canvas + nav {
letter-spacing: -0.03em; } }
@media (max-width: 980px) {
main .canvas + nav {
padding-bottom: 1em;
flex-direction: column; } }
main .canvas + nav a::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
main .canvas + nav a:hover::after {
opacity: 1; }
main img.full {
display: block;
height: auto;
width: 100%; }
main img.half {
display: block;
height: auto;
width: 50%; }
.sidebar {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
font-size: 0.9375rem;
line-height: 1.05;
letter-spacing: -0.03em;
position: fixed;
top: 0;
bottom: 0;
overflow: hidden;
z-index: 150;
transition: width var(--sidebar-speed) ease-out; }
@media (max-width: 980px) {
.sidebar {
font-size: 2.4375rem; } }
@media (max-width: 480px) {
.sidebar {
font-size: 2.4375rem; } }
@media (max-width: 980px) {
.sidebar {
line-height: 1.05; } }
@media (max-width: 480px) {
.sidebar {
line-height: 1.05; } }
@media (max-width: 980px) {
.sidebar {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.sidebar {
letter-spacing: -0.03em; } }
.sidebar.left {
width: var(--sidebar-left);
left: 0; }
.sidebar.right {
width: var(--sidebar-right);
right: 0; }
@media (max-width: 980px) {
.sidebar.left .canvas, .sidebar.left .language-switch, .sidebar.right .canvas, .sidebar.right .language-switch {
min-width: calc(100vw - 1rem); }
[data-sidebar-left="open"] .sidebar.left {
width: calc(100% - 1rem); }
[data-sidebar-right="open"] .sidebar.right {
width: calc(100% - 1rem); } }
.sidebar .sidebar-title {
font-family: var(--active-font);
font-size: 2.4375rem;
line-height: 1.05;
letter-spacing: -0.03em; }
@media (max-width: 980px) {
.sidebar .sidebar-title {
font-size: 2.4375rem; } }
@media (max-width: 480px) {
.sidebar .sidebar-title {
font-size: 2.4375rem; } }
@media (max-width: 980px) {
.sidebar .sidebar-title {
line-height: 1.05; } }
@media (max-width: 480px) {
.sidebar .sidebar-title {
line-height: 1.05; } }
@media (max-width: 980px) {
.sidebar .sidebar-title {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.sidebar .sidebar-title {
letter-spacing: -0.03em; } }
.sidebar.left {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
font-size: 0.9375rem;
line-height: 1.05;
letter-spacing: -0.03em; }
@media (max-width: 980px) {
.sidebar.left {
font-size: 2.4375rem; } }
@media (max-width: 480px) {
.sidebar.left {
font-size: 2.4375rem; } }
@media (max-width: 980px) {
.sidebar.left {
line-height: 1.05; } }
@media (max-width: 480px) {
.sidebar.left {
line-height: 1.05; } }
@media (max-width: 980px) {
.sidebar.left {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.sidebar.left {
letter-spacing: -0.03em; } }
[data-scheme="white"] .sidebar.left {
z-index: 149; }
[data-scheme="black"] .sidebar.left {
z-index: 151; }
.sidebar.left > * {
padding: 0 0 0.5rem 1rem; }
.sidebar.left a {
display: block; }
.sidebar.left a:not(:first-child) {
text-transform: uppercase; }
.sidebar.left a:first-child {
margin-bottom: 0.25rem; }
.sidebar.left a.break {
margin-top: 0.75rem; }
.sidebar.left a.menu-link {
text-transform: uppercase; }
.sidebar.left a.menu-link::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
.sidebar.left a.menu-link:hover::after {
opacity: 1; }
.sidebar.left a.menu-link.current::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
.sidebar.left a.menu-link.current:hover::after {
opacity: 1; }
.sidebar.left a.menu-link.current::after {
opacity: 1; }
@media (max-width: 979px) {
.sidebar.left .language-switch {
font-family: var(--active-font);
font-size: 1.4375rem;
line-height: 1.15;
letter-spacing: -0.01em; } }
@media (max-width: 979px) and (max-width: 980px) {
.sidebar.left .language-switch {
font-size: 1.0625rem; } }
@media (max-width: 979px) and (max-width: 480px) {
.sidebar.left .language-switch {
font-size: 1.0625rem; } }
@media (max-width: 979px) and (max-width: 980px) {
.sidebar.left .language-switch {
line-height: 1.15; } }
@media (max-width: 979px) and (max-width: 480px) {
.sidebar.left .language-switch {
line-height: 1.15; } }
@media (max-width: 979px) and (max-width: 980px) {
.sidebar.left .language-switch {
letter-spacing: -0.03em; } }
@media (max-width: 979px) and (max-width: 480px) {
.sidebar.left .language-switch {
letter-spacing: -0.03em; } }
.sidebar.right {
--primary-color: #ffffff;
--secondary-color: #000000; }
[data-scheme="white"] .sidebar.right {
z-index: 151; }
[data-scheme="black"] .sidebar.right {
z-index: 149; }
.sidebar.right > * {
padding: 0 1rem 0.5rem 1rem; }
.sidebar.right > * > *:first-child {
margin-bottom: 0.25em; }
.sidebar.right > * > * + * {
margin-top: 0.75rem; }
.sidebar.right input {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif; }
#toggle-sidebar {
position: fixed;
z-index: 200;
top: 0;
bottom: 0;
width: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: left var(--sidebar-speed) ease-out, right var(--sidebar-speed) ease-out; }
@media (min-width: 981px) {
#toggle-sidebar {
display: none; } }
#toggle-sidebar svg {
width: 80%;
fill: var(--primary-color);
transition: transform var(--sidebar-speed) ease-out; }
[data-scheme="white"] #toggle-sidebar {
right: 0;
--primary-color: #ffffff; }
[data-scheme="white"] #toggle-sidebar svg {
transform: rotate(180deg); }
[data-scheme="black"] #toggle-sidebar {
left: 0;
--primary-color: #000000; }
[data-scheme="black"] #toggle-sidebar svg {
transform: rotate(0); }
[data-sidebar-right="open"][data-scheme="white"] #toggle-sidebar {
right: calc(100% - 1rem);
--primary-color: #000000; }
[data-sidebar-right="open"][data-scheme="white"] #toggle-sidebar svg {
transform: rotate(0); }
[data-sidebar-left="open"][data-scheme="black"] #toggle-sidebar {
left: calc(100% - 1rem);
--primary-color: #ffffff; }
[data-sidebar-left="open"][data-scheme="black"] #toggle-sidebar svg {
transform: rotate(180deg); }
#expand-sidebar, #back-to-books-link {
z-index: 151;
color: #ffffff;
mix-blend-mode: difference;
font-family: "Arial MT Condensed", Arial, sans-serif;
font-size: 1.875rem;
line-height: 1.05;
letter-spacing: -0.03em;
text-align: right;
position: absolute;
right: calc(1rem + 1rem);
top: 0.5rem;
cursor: pointer; }
@media (min-width: 981px) {
#expand-sidebar, #back-to-books-link {
display: none !important; } }
[data-scheme="white"] #expand-sidebar::before {
content: 'menu'; }
[data-scheme="black"] #expand-sidebar::before {
content: 'filters'; }
#expand-sidebar::after {
content: 'close';
display: none; }
[data-scheme="white"][data-sidebar-left="open"] #expand-sidebar::before,
[data-scheme="black"][data-sidebar-right="open"] #expand-sidebar::before {
display: none; }
[data-scheme="white"][data-sidebar-left="open"] #expand-sidebar::after,
[data-scheme="black"][data-sidebar-right="open"] #expand-sidebar::after {
display: inherit; }
html[data-scheme="black"], body[data-scheme="black"] {
scrollbar-width: thin;
scrollbar-color: #ffffff #000000; }
html[data-scheme="black"] ::-webkit-scrollbar, body[data-scheme="black"] ::-webkit-scrollbar {
width: 3px;
background: #ffffff; }
html[data-scheme="black"] ::-webkit-scrollbar-track, body[data-scheme="black"] ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
border-radius: 10px; }
html[data-scheme="black"] ::-webkit-scrollbar-thumb, body[data-scheme="black"] ::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(0deg, #000, #333, #111);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
html[data-scheme="white"], body[data-scheme="white"] {
scrollbar-width: thin;
scrollbar-color: #000000 #ffffff; }
html[data-scheme="white"] ::-webkit-scrollbar, body[data-scheme="white"] ::-webkit-scrollbar {
width: 3px;
background: #000000; }
html[data-scheme="white"] ::-webkit-scrollbar-track, body[data-scheme="white"] ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; }
html[data-scheme="white"] ::-webkit-scrollbar-thumb, body[data-scheme="white"] ::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(0deg, #fff, #ccc, #eee);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
a {
color: var(--primary);
text-decoration: none; }
main .canvas > *:not(:first-child) + * {
margin-top: 1rem; }
main .canvas .text {
font-family: var(--active-font);
font-size: 1.4375rem;
line-height: 1.15;
letter-spacing: -0.01em; }
@media (max-width: 980px) {
main .canvas .text {
font-size: 1.0625rem; } }
@media (max-width: 480px) {
main .canvas .text {
font-size: 1.0625rem; } }
@media (max-width: 980px) {
main .canvas .text {
line-height: 1.15; } }
@media (max-width: 480px) {
main .canvas .text {
line-height: 1.15; } }
@media (max-width: 980px) {
main .canvas .text {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main .canvas .text {
letter-spacing: -0.03em; } }
main .canvas .text.special {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif; }
main .canvas .text.small {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em; }
@media (max-width: 980px) {
main .canvas .text.small {
font-size: 0.8rem; } }
@media (max-width: 480px) {
main .canvas .text.small {
font-size: 0.8rem; } }
@media (max-width: 980px) {
main .canvas .text.small {
line-height: 1.2; } }
@media (max-width: 480px) {
main .canvas .text.small {
line-height: 1.2; } }
@media (max-width: 980px) {
main .canvas .text.small {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main .canvas .text.small {
letter-spacing: -0.03em; } }
main .canvas .text.medium {
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em; }
@media (max-width: 980px) {
main .canvas .text.medium {
font-size: 0.75rem; } }
@media (max-width: 480px) {
main .canvas .text.medium {
font-size: 0.75rem; } }
@media (max-width: 980px) {
main .canvas .text.medium {
line-height: 1.1; } }
@media (max-width: 480px) {
main .canvas .text.medium {
line-height: 1.1; } }
@media (max-width: 980px) {
main .canvas .text.medium {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
main .canvas .text.medium {
letter-spacing: -0.03em; } }
.book-back-link {
display: "inline-block";
position: absolute;
top: 0.5rem;
left: calc(0.5rem - 92px); }
@media (max-width: 980px) {
.book-back-link {
display: none; } }
@media (max-width: 480px) {
.book-back-link {
display: none; } }
.row-container {
column-count: 2; }
@media (max-width: 980px) {
.row-container {
column-count: 1; } }
@media (max-width: 480px) {
.row-container {
column-count: 1; } }
.row-container > * {
display: inline-block;
width: 100%;
margin-bottom: 1em; }
.row-container > * > * + * {
margin-top: 1em; }
.row-container.lined > * {
border-bottom: 1px #000000 solid;
padding-bottom: 0.5em;
margin-bottom: 0.5em; }
.row-container.three {
column-count: 3;
margin-top: 0; }
@media (max-width: 980px) {
.row-container.three {
column-count: 1; } }
@media (max-width: 480px) {
.row-container.three {
column-count: 1; } }
.row-container.three > * {
display: inline-block;
width: 100%;
margin-bottom: 0; }
.row-grid {
display: flex;
align-items: space-between;
flex-direction: row; }
@media (max-width: 980px) {
.row-grid {
flex-direction: column; } }
@media (max-width: 480px) {
.row-grid {
flex-direction: column; } }
.row-grid > .left, .row-grid > .right {
width: calc(50% - 50px/2); }
@media (max-width: 980px) {
.row-grid > .left, .row-grid > .right {
width: 100%; } }
@media (max-width: 480px) {
.row-grid > .left, .row-grid > .right {
width: 100%; } }
.row-grid > .left {
margin-right: 50px; }
@media (max-width: 980px) {
.row-grid > .left {
margin-right: 0; } }
@media (max-width: 480px) {
.row-grid > .left {
margin-right: 0; } }
.row-grid.spaced > * > * + * {
margin-top: 1em; }
.four-grid {
display: flex;
flex-wrap: wrap;
width: 100%; }
.four-grid > * {
margin-bottom: 1em; }
.four-grid > *:not(:nth-child(4n)):nth-last-child(1) {
content: ' ';
display: block;
margin-right: auto; }
@media (min-width: 981px) {
.four-grid > * {
width: calc(100%/4 - 50px / 4 * 3); }
.four-grid > *:not(:nth-child(4n)) {
margin-right: 50px; } }
@media (max-width: 980px) {
.four-grid > * {
width: calc(100%/2 - 50px / 2 * 1); }
.four-grid > *:not(:nth-child(2n)) {
margin-right: 50px; } }
.four-grid > * > * + * {
margin-top: 1em; }
.text > * + * {
margin-top: 0.75em; }
.text > h1, .text > h2, .text > h3, .text > .text-headline {
margin-top: 1.5em; }
.text .text-headline {
font-weight: bold; }
.text a:hover {
text-decoration: underline; }
.text ul li {
position: relative;
padding-left: 1em; }
.text ul li:before {
content: '•';
position: absolute;
left: 0; }
.text ul li + li {
margin-top: 15px; }
@media (max-width: 980px) {
.text ul li + li {
margin-top: 8px; } }
@media (max-width: 480px) {
.text ul li + li {
margin-top: 8px; } }
.text ol {
counter-reset: list-counter;
list-style: none; }
.text ol li {
position: relative;
padding-left: 1.5em;
counter-increment: list-counter; }
.text ol li:before {
content: counter(list-counter) ".";
position: absolute;
left: 0; }
.text ol li + li {
margin-top: 15px; }
@media (max-width: 980px) {
.text ol li + li {
margin-top: 8px; } }
@media (max-width: 480px) {
.text ol li + li {
margin-top: 8px; } }
.division {
display: flex;
justify-content: space-between;
width: 100%; }
.division > * {
width: calc(50% - 12.5px); }
.address-title {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif; }
.address-title:first-child {
margin-top: 0.2em !important; }
.address-title:not(:first-child) {
margin-top: 1em !important; }
@media (max-width: 980px) {
.address-title {
font-size: 0.8rem; } }
@media (max-width: 480px) {
.address-title {
font-size: 0.8rem; } }
@media (max-width: 980px) {
.address-title {
line-height: 1.2; } }
@media (max-width: 480px) {
.address-title {
line-height: 1.2; } }
@media (max-width: 980px) {
.address-title {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.address-title {
letter-spacing: -0.03em; } }
.address-title:not(:last-child) {
text-transform: uppercase; }
.address-title + textarea {
margin-top: 0.5em !important; }
.billing-address-expander-wrapper {
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em; }
@media (max-width: 980px) {
.billing-address-expander-wrapper {
font-size: 0.75rem; } }
@media (max-width: 480px) {
.billing-address-expander-wrapper {
font-size: 0.75rem; } }
@media (max-width: 980px) {
.billing-address-expander-wrapper {
line-height: 1.1; } }
@media (max-width: 480px) {
.billing-address-expander-wrapper {
line-height: 1.1; } }
@media (max-width: 980px) {
.billing-address-expander-wrapper {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.billing-address-expander-wrapper {
letter-spacing: -0.03em; } }
.billing-address-expansion {
display: none; }
.billing-address-expansion > * + * {
margin-top: calc(0.5em + 3px); }
.three-grid {
display: flex;
flex-wrap: wrap;
width: 100%; }
.three-grid > * {
transition: transform 250ms ease-out;
margin-bottom: 2em; }
.no-touch .three-grid > *:hover {
transform: scale(1.02); }
.three-grid > *:not(:nth-child(3n)):nth-last-child(1) {
content: ' ';
display: block;
margin-right: auto; }
@media (min-width: 981px) {
.three-grid > * {
width: calc(100%/3 - 50px / 3 * 2); }
.three-grid > *:not(:nth-child(3n)) {
margin-right: 50px; } }
@media (max-width: 980px) {
.three-grid > * {
width: calc(100%/2 - 50px / 2 * 1); }
.three-grid > *:not(:nth-child(2n)) {
margin-right: 50px; } }
@media (max-width: 480px) {
.three-grid > * {
width: 100%;
margin-right: 0 !important;
display: flex;
flex-direction: column;
align-items: center; } }
.three-grid > * img {
max-height: 375px; }
@media (max-width: 980px) {
.three-grid > * img {
max-height: 280px; } }
@media (max-width: 480px) {
.three-grid > * img {
max-height: 280px; } }
.three-grid > * > * + * {
margin-top: 1em; }
.two-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between; }
.two-grid > * {
margin-bottom: 2em; }
.two-grid > *:not(:nth-child(2n)):nth-last-child(1) {
content: ' ';
display: block;
margin-right: auto; }
@media (min-width: 981px) {
.two-grid > * {
width: calc(100%/2 - 25px); } }
@media (max-width: 980px) {
.two-grid > * {
width: 100%;
margin-right: 0 !important;
display: flex;
flex-direction: column; } }
.two-grid > * > * + * {
margin-top: 1em; }
.two-grid > *.address-form > * + * {
margin-top: 0.5em; }
.address-form .error input {
border-color: #910808E2;
background: #ffff0044; }
.address-form .error .error-text {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
color: #910808E2 !important;
font-size: 0.75rem !important;
margin: 0.5em 0.5em 0 0.5em; }
.book-gallery {
margin-top: 1rem; }
.grid-book-name {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif !important; }
.book-grid {
display: flex;
justify-content: space-between;
flex-direction: row; }
@media (max-width: 980px) {
.book-grid {
flex-direction: column; } }
@media (max-width: 480px) {
.book-grid {
flex-direction: column; } }
.book-grid > .left {
width: 230px; }
@media (max-width: 980px) {
.book-grid > .left {
width: 100%; } }
@media (max-width: 480px) {
.book-grid > .left {
width: 100%; } }
.book-grid > .right {
width: calc(100% - 20px - 230px);
margin-top: 0; }
@media (max-width: 980px) {
.book-grid > .right {
width: 100%; } }
@media (max-width: 480px) {
.book-grid > .right {
width: 100%; } }
@media (max-width: 980px) {
.book-grid > .right {
margin-top: 2rem; } }
@media (max-width: 480px) {
.book-grid > .right {
margin-top: 2rem; } }
.book-grid > .left, .book-grid > .right {
display: flex;
flex-direction: column; }
.book-data-image {
display: block;
width: 100%;
max-width: 300px;
height: auto;
margin-top: 0.2rem; }
.book-data {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif !important; }
.order-book-button {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif !important;
width: 100%;
margin-top: 2rem !important;
margin-bottom: 2rem !important; }
@media (max-width: 980px) {
.order-book-button {
width: auto; } }
.contact-grid {
display: flex;
align-items: space-between;
flex-direction: row; }
@media (max-width: 980px) {
.contact-grid {
flex-direction: column; } }
@media (max-width: 480px) {
.contact-grid {
flex-direction: column; } }
.contact-grid > .left, .contact-grid > .right {
width: calc(50% - 50px/4);
display: flex;
flex-direction: column;
justify-content: space-between; }
@media (max-width: 980px) {
.contact-grid > .left, .contact-grid > .right {
width: 100%; } }
@media (max-width: 480px) {
.contact-grid > .left, .contact-grid > .right {
width: 100%; } }
.contact-grid > .left {
margin-right: 25px; }
@media (max-width: 980px) {
.contact-grid > .left {
margin-right: 0; } }
@media (max-width: 480px) {
.contact-grid > .left {
margin-right: 0; } }
@media (max-width: 980px) {
.contact-grid > .right {
margin-top: 1em; } }
.contact-grid .top > * + * {
margin-top: 1em; }
.contact-grid .bottom::before {
content: '';
border-bottom: 1px var(--primary-color) solid;
height: 1px;
display: block;
margin: 0.5em 0 0.5em 0; }
.to-right {
margin-left: auto; }
.sb-input {
display: block;
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em;
height: 20px;
line-height: 1;
border-radius: 10px;
text-align: left;
color: var(--primary-color);
border: 1px var(--primary-color) solid;
background: var(--secondary-color);
padding: 0 0.5em;
position: relative; }
@media (max-width: 980px) {
.sb-input {
font-size: 0.75rem; } }
@media (max-width: 480px) {
.sb-input {
font-size: 0.75rem; } }
@media (max-width: 980px) {
.sb-input {
line-height: 1.1; } }
@media (max-width: 480px) {
.sb-input {
line-height: 1.1; } }
@media (max-width: 980px) {
.sb-input {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.sb-input {
letter-spacing: -0.03em; } }
.sb-input.invert {
color: var(--secondary-color);
border: 1px var(--primary-color) solid;
background: var(--primary-color); }
.no-touch .sb-input[type=button]:hover, .no-touch .sb-input[type=submit]:hover {
color: var(--secondary-color);
background: var(--primary-color); }
.no-touch .sb-input[type=button]:hover.invert, .no-touch .sb-input[type=submit]:hover.invert {
color: var(--primary-color);
background: var(--secondary-color); }
.sb-input::placeholder {
opacity: 1; }
.sb-input.scaled {
width: 80%; }
.sb-input.full {
width: 100%; }
.sb-input.small, .sb-input.scaled {
min-width: 200px; }
textarea.sb-input {
min-height: 7rem;
margin-bottom: 0.5rem; }
.required {
position: relative; }
.required::after {
content: '*';
position: absolute;
z-index: 10;
top: 11px;
right: 0.5rem;
transform: translateY(-35%);
line-height: 1;
font-size: 0.80rem;
pointer-events: none; }
.sb-checkbox, .sb-radio {
text-align: left;
flex-grow: 1;
display: flex;
align-items: center; }
.sb-checkbox label, .sb-radio label {
margin-left: 10px; }
.sb-checkbox a, .sb-radio a {
text-decoration: none; }
.sb-checkbox input[type=checkbox], .sb-checkbox input[type=radio], .sb-radio input[type=checkbox], .sb-radio input[type=radio] {
appearance: none; }
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em;
height: 20px;
line-height: 1;
border-radius: 10px;
text-align: left;
color: var(--primary-color);
border: 1px var(--primary-color) solid;
background: var(--secondary-color);
content: '✓';
display: inline-flex;
width: 40px;
color: #0000;
transition: color 250ms ease-out;
justify-content: center;
align-items: center;
cursor: pointer; }
@media (max-width: 980px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
font-size: 0.75rem; } }
@media (max-width: 480px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
font-size: 0.75rem; } }
@media (max-width: 980px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
line-height: 1.1; } }
@media (max-width: 480px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
line-height: 1.1; } }
@media (max-width: 980px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.sb-checkbox input[type=checkbox]::before, .sb-checkbox input[type=radio]::before, .sb-radio input[type=checkbox]::before, .sb-radio input[type=radio]::before {
letter-spacing: -0.03em; } }
.sb-checkbox input[type=checkbox]::before.invert, .sb-checkbox input[type=radio]::before.invert, .sb-radio input[type=checkbox]::before.invert, .sb-radio input[type=radio]::before.invert {
color: var(--secondary-color);
border: 1px var(--primary-color) solid;
background: var(--primary-color); }
.no-touch .sb-checkbox input[type=checkbox]::before[type=button]:hover, .no-touch .sb-checkbox input[type=checkbox]::before[type=submit]:hover, .no-touch .sb-checkbox input[type=radio]::before[type=button]:hover, .no-touch .sb-checkbox input[type=radio]::before[type=submit]:hover, .no-touch .sb-radio input[type=checkbox]::before[type=button]:hover, .no-touch .sb-radio input[type=checkbox]::before[type=submit]:hover, .no-touch .sb-radio input[type=radio]::before[type=button]:hover, .no-touch .sb-radio input[type=radio]::before[type=submit]:hover {
color: var(--secondary-color);
background: var(--primary-color); }
.no-touch .sb-checkbox input[type=checkbox]::before[type=button]:hover.invert, .no-touch .sb-checkbox input[type=checkbox]::before[type=submit]:hover.invert, .no-touch .sb-checkbox input[type=radio]::before[type=button]:hover.invert, .no-touch .sb-checkbox input[type=radio]::before[type=submit]:hover.invert, .no-touch .sb-radio input[type=checkbox]::before[type=button]:hover.invert, .no-touch .sb-radio input[type=checkbox]::before[type=submit]:hover.invert, .no-touch .sb-radio input[type=radio]::before[type=button]:hover.invert, .no-touch .sb-radio input[type=radio]::before[type=submit]:hover.invert {
color: var(--primary-color);
background: var(--secondary-color); }
.sb-checkbox input[type=checkbox]:checked::before, .sb-checkbox input[type=radio]:checked::before, .sb-radio input[type=checkbox]:checked::before, .sb-radio input[type=radio]:checked::before {
color: var(--primary-color); }
.sb-checkbox input[type=radio]::before, .sb-radio input[type=radio]::before {
border-radius: 10px; }
@media (min-width: 981px) {
.all-books {
display: none; } }
.books-categories-mobile {
display: flex;
flex-direction: column;
margin-top: 1rem !important; }
.books-categories-mobile a::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
.books-categories-mobile a:hover::after {
opacity: 1; }
@media (min-width: 981px) {
.books-categories-mobile {
display: none !important; } }
@media (max-width: 980px) {
.books-categories-desktop {
display: none !important; } }
.books-filters {
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
margin-top: 1.5rem !important; }
@media (max-width: 980px) {
.books-filters {
font-size: 0.75rem; } }
@media (max-width: 480px) {
.books-filters {
font-size: 0.75rem; } }
@media (max-width: 980px) {
.books-filters {
line-height: 1.1; } }
@media (max-width: 480px) {
.books-filters {
line-height: 1.1; } }
@media (max-width: 980px) {
.books-filters {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.books-filters {
letter-spacing: -0.03em; } }
.books-filters .filter, .books-filters .reset {
cursor: pointer; }
.books-filters .filter.category::after, .books-filters .filter.reset::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
.books-filters .filter.category:hover::after, .books-filters .filter.reset:hover::after {
opacity: 1; }
.books-filters .filter.category.current::after, .books-filters .filter.reset.current::after {
content: '•';
opacity: 0;
transition: opacity 250ms ease-out; }
.books-filters .filter.category.current:hover::after, .books-filters .filter.reset.current:hover::after {
opacity: 1; }
.books-filters .filter.category.current::after, .books-filters .filter.reset.current::after {
opacity: 1; }
.books-filters .filter.sort[data-order="desc"]::after {
content: '\2193'; }
.books-filters .filter.sort[data-order="asc"]::after {
content: '\2191';
transform: rotate(180deg); }
.books-filters .filter.sort::after {
margin-left: 0.1rem;
opacity: 0;
transition: opacity 250ms ease-out; }
.books-filters .filter.sort:hover::after {
opacity: 1; }
.books-filters .filter.sort.current[data-order="desc"]::after {
content: '\2193'; }
.books-filters .filter.sort.current[data-order="asc"]::after {
content: '\2191';
transform: rotate(180deg); }
.books-filters .filter.sort.current::after {
margin-left: 0.1rem;
opacity: 0;
transition: opacity 250ms ease-out; }
.books-filters .filter.sort.current:hover::after {
opacity: 1; }
.books-filters .filter.sort.current::after {
opacity: 1; }
.shopping-navigation {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
margin-top: 1rem;
display: flex;
justify-content: flex-start; }
@media (max-width: 980px) {
.shopping-navigation {
font-size: 0.8rem; } }
@media (max-width: 480px) {
.shopping-navigation {
font-size: 0.8rem; } }
@media (max-width: 980px) {
.shopping-navigation {
line-height: 1.2; } }
@media (max-width: 480px) {
.shopping-navigation {
line-height: 1.2; } }
@media (max-width: 980px) {
.shopping-navigation {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.shopping-navigation {
letter-spacing: -0.03em; } }
.shopping-navigation > * {
display: inline-block;
text-decoration: none;
color: var(--primary-color); }
.shopping-navigation > *:not(:last-child) {
margin-right: 2rem; }
.shopping-navigation > *.current {
font-weight: bold; }
.shopping-cart {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif; }
@media (max-width: 980px) {
.shopping-cart {
font-size: 0.8rem; } }
@media (max-width: 480px) {
.shopping-cart {
font-size: 0.8rem; } }
@media (max-width: 980px) {
.shopping-cart {
line-height: 1.2; } }
@media (max-width: 480px) {
.shopping-cart {
line-height: 1.2; } }
@media (max-width: 980px) {
.shopping-cart {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.shopping-cart {
letter-spacing: -0.03em; } }
.shopping-cart th, .shopping-cart td {
font-weight: normal;
text-align: right; }
.shopping-cart th:first-child, .shopping-cart th:nth-child(2), .shopping-cart th:nth-child(4), .shopping-cart td:first-child, .shopping-cart td:nth-child(2), .shopping-cart td:nth-child(4) {
text-align: left; }
.shopping-cart th:not(:last-child), .shopping-cart td:not(:last-child) {
padding-right: 1rem; }
.shopping-cart td:first-child {
width: 130px; }
.shopping-cart tr td:not(:first-child), .shopping-cart tr th:not(:first-child) {
border-bottom: 1px black solid; }
.shopping-cart tr + tr td {
padding-top: 0.2rem;
padding-bottom: 0.2rem; }
.shopping-cart th, .shopping-cart .cart-subtotal, .shopping-cart .cart-total {
text-transform: uppercase; }
.shopping-cart .book-title {
font-family: var(--active-font);
font-size: 1.4375rem;
line-height: 1.15;
letter-spacing: -0.01em; }
@media (max-width: 980px) {
.shopping-cart .book-title {
font-size: 1.0625rem; } }
@media (max-width: 480px) {
.shopping-cart .book-title {
font-size: 1.0625rem; } }
@media (max-width: 980px) {
.shopping-cart .book-title {
line-height: 1.15; } }
@media (max-width: 480px) {
.shopping-cart .book-title {
line-height: 1.15; } }
@media (max-width: 980px) {
.shopping-cart .book-title {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.shopping-cart .book-title {
letter-spacing: -0.03em; } }
.shopping-cart .book-image {
display: block;
width: auto;
max-height: 130px; }
.shopping-cart .remove-from-cart:hover {
text-decoration: underline; }
.shopping-cart select, .shopping-cart input {
display: inline-block; }
.shopping-cart-small {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif; }
@media (max-width: 980px) {
.shopping-cart-small {
font-size: 0.8rem; } }
@media (max-width: 480px) {
.shopping-cart-small {
font-size: 0.8rem; } }
@media (max-width: 980px) {
.shopping-cart-small {
line-height: 1.2; } }
@media (max-width: 480px) {
.shopping-cart-small {
line-height: 1.2; } }
@media (max-width: 980px) {
.shopping-cart-small {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.shopping-cart-small {
letter-spacing: -0.03em; } }
.shopping-cart-small th, .shopping-cart-small .subtotal, .shopping-cart-small .total {
text-transform: uppercase; }
.shopping-cart-small th, .shopping-cart-small td {
font-weight: normal;
text-align: right; }
.shopping-cart-small th:first-child, .shopping-cart-small th:nth-child(2), .shopping-cart-small th:nth-child(3), .shopping-cart-small td:first-child, .shopping-cart-small td:nth-child(2), .shopping-cart-small td:nth-child(3) {
text-align: left; }
.shopping-cart-small th:not(:last-child), .shopping-cart-small td:not(:last-child) {
padding-right: 1rem; }
.shopping-cart-small tr td, .shopping-cart-small tr th {
border-bottom: 1px black solid; }
.shopping-cart-small tr + tr td {
padding-top: 0.2rem;
padding-bottom: 0.2rem; }
.shopping-cart-small tr th:nth-last-child(1) {
width: 15%; }
.shopping-cart-small tr th:nth-last-child(2) {
width: 35%; }
.shopping-cart-small .cart-subtotal td, .shopping-cart-small .cart-shipping td, .shopping-cart-small .cart-subtotal-netto td, .shopping-cart-small .cart-taxes td, .shopping-cart-small .cart-total td {
border-bottom: none; }
.shopping-cart-small .cart-subtotal td:last-child, .shopping-cart-small .cart-shipping td:last-child, .shopping-cart-small .cart-subtotal-netto td:last-child, .shopping-cart-small .cart-taxes td:last-child, .shopping-cart-small .cart-total td:last-child {
text-align: right; }
.shopping-cart-small .cart-shipping td {
padding-top: 1em; }
.shopping-cart-small .cart-taxes td {
padding-bottom: 1em; }
.shopping-cart-small .cart-subtotal-netto td {
padding-top: 0;
padding-bottom: 0; }
.shopping-cart-small .cart-subtotal td:nth-last-child(1), .shopping-cart-small .cart-subtotal td:nth-last-child(2), .shopping-cart-small .cart-total td:nth-last-child(1), .shopping-cart-small .cart-total td:nth-last-child(2), .shopping-cart-small .cart-taxes td:nth-last-child(1), .shopping-cart-small .cart-taxes td:nth-last-child(2) {
border-bottom: 1px black solid; }
.shopping-input {
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif !important; }
.shopping-cart-canvas {
display: flex;
flex-direction: column; }
.shopping-cart-canvas > * + * {
margin-top: 1rem; }
.shopping-cart-canvas > * + hr {
margin-top: 0.2rem;
border-top: 1px black solid;
padding-top: 0.2rem;
margin-bottom: 0;
height: 0; }
.shopping-cart-canvas > hr + * {
margin-top: 0; }
.shopping-grid {
display: flex;
flex-direction: column;
justify-content: space-between;
width: calc(50% - 25px); }
@media (max-width: 980px) {
.shopping-grid {
width: 100%; } }
@media (max-width: 480px) {
.shopping-grid {
width: 100%; } }
.shopping-grid.left {
margin-right: calc(50% + 25px); }
@media (max-width: 980px) {
.shopping-grid.left {
margin-right: 0; } }
@media (max-width: 480px) {
.shopping-grid.left {
margin-right: 0; } }
.shopping-grid.right {
margin-left: calc(50% + 25px); }
@media (max-width: 980px) {
.shopping-grid.right {
margin-left: 0; } }
@media (max-width: 480px) {
.shopping-grid.right {
margin-left: 0; } }
.shopping-cart-steps input {
min-width: Min(95%, 210px); }
.order-complete {
font-family: var(--active-font);
font-size: 2.4375rem;
line-height: 1.05;
letter-spacing: -0.03em;
text-align: center; }
@media (max-width: 980px) {
.order-complete {
font-size: 2.4375rem; } }
@media (max-width: 480px) {
.order-complete {
font-size: 2.4375rem; } }
@media (max-width: 980px) {
.order-complete {
line-height: 1.05; } }
@media (max-width: 480px) {
.order-complete {
line-height: 1.05; } }
@media (max-width: 980px) {
.order-complete {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.order-complete {
letter-spacing: -0.03em; } }
.order-history-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
margin-top: 0;
border-bottom: 1px black solid; }
.order-history-grid > * {
width: 50%; }
@media (max-width: 980px) {
.order-history-grid > * {
width: 100%;
margin-right: 0 !important;
display: flex;
flex-direction: column; }
.order-history-grid > *.right {
margin-bottom: 1rem !important; }
.order-history-grid > *.left {
border-bottom: 1px black solid; } }
.order-history-grid .left, .order-history-grid .right {
margin-top: 0;
margin-bottom: 0; }
@media (min-width: 981px) {
.order-history-grid + .order-history-grid table tr:first-child {
display: none; } }
.order-history-grid .left {
display: flex;
flex-direction: column;
justify-content: space-between; }
.order-history-grid .left td {
width: 50% !important; }
.order-history-grid .download-invoice {
font-family: var(--active-font);
font-size: 0.9375rem;
line-height: 1.1;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
margin: 0 0 0.2rem 0; }
@media (max-width: 980px) {
.order-history-grid .download-invoice {
font-size: 0.75rem; } }
@media (max-width: 480px) {
.order-history-grid .download-invoice {
font-size: 0.75rem; } }
@media (max-width: 980px) {
.order-history-grid .download-invoice {
line-height: 1.1; } }
@media (max-width: 480px) {
.order-history-grid .download-invoice {
line-height: 1.1; } }
@media (max-width: 980px) {
.order-history-grid .download-invoice {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.order-history-grid .download-invoice {
letter-spacing: -0.03em; } }
.order-history-grid .download-invoice a:hover {
text-decoration: underline; }
.order-history-grid table {
font-family: var(--active-font);
font-size: 0.9rem;
line-height: 1.2;
letter-spacing: -0.03em;
font-family: "Suisse Intl Mono", Helvetica, Arial, sans-serif;
width: 100%; }
@media (max-width: 980px) {
.order-history-grid table {
font-size: 0.8rem; } }
@media (max-width: 480px) {
.order-history-grid table {
font-size: 0.8rem; } }
@media (max-width: 980px) {
.order-history-grid table {
line-height: 1.2; } }
@media (max-width: 480px) {
.order-history-grid table {
line-height: 1.2; } }
@media (max-width: 980px) {
.order-history-grid table {
letter-spacing: -0.03em; } }
@media (max-width: 480px) {
.order-history-grid table {
letter-spacing: -0.03em; } }
.order-history-grid table th, .order-history-grid table .subtotal, .order-history-grid table .total {
text-transform: uppercase; }
.order-history-grid table th, .order-history-grid table td {
font-weight: normal;
text-align: right; }
.order-history-grid table th:first-child, .order-history-grid table th:nth-child(2), .order-history-grid table th:nth-child(3), .order-history-grid table td:first-child, .order-history-grid table td:nth-child(2), .order-history-grid table td:nth-child(3) {
text-align: left; }
.order-history-grid table th:not(:last-child), .order-history-grid table td:not(:last-child) {
padding-right: 1rem; }
.order-history-grid table tr td, .order-history-grid table tr th {
border-bottom: 1px black solid; }
.order-history-grid table tr + tr td {
padding-top: 0.2rem;
padding-bottom: 0.2rem; }
.order-history-grid table tr th:nth-last-child(1) {
width: 15%; }
.order-history-grid table tr th:nth-last-child(2) {
width: 35%; }
.order-history-grid table .cart-shipping td, .order-history-grid table .cart-total td {
border-bottom: none; }
.order-history-grid table .cart-shipping td:last-child, .order-history-grid table .cart-total td:last-child {
text-align: right; }
.order-history-grid table .cart-shipping td:nth-last-child(1), .order-history-grid table .cart-shipping td:nth-last-child(2) {
border-bottom: 1px black solid; }
.order-history-grid table .order-id-row td {
border-bottom: none; }