/* ========================================================================== Easyprint — shop theme Brand: the Easyprint ink ring (cyan, magenta, yellow on black), Montserrat. Rules: square corners everywhere, no italics. Print-trade details — crop marks, CMYK colour bars, halftone dots, offset "misregistration" shadows. ========================================================================== */ :root { --ink: #231f20; --ink-2: #3b3637; --paper: #ffffff; --well: #f3f3f3; --paper-2: #e9e9e9; --line: #dddddd; --muted: #69645f; --white: #fff; --cyan: #4e91d3; --magenta: #b91c70; --yellow: #f2f145; --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --max: 1280px; --gutter: clamp(16px, 4vw, 40px); --ease: cubic-bezier(.2, .7, .2, 1); --header-h: 0px; --halftone: radial-gradient(circle, rgba(35, 31, 32, .16) 1.3px, transparent 1.7px) 0 0 / 11px 11px; } /* Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; } em, i, cite, address, dfn, var, blockquote { font-style: normal; } em, cite { font-weight: 600; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--magenta); } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; } p { margin: 0 0 1em; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } ::selection { background: var(--yellow); color: var(--ink); } .icon { width: 1.25em; height: 1.25em; flex: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--yellow); color: var(--ink); font-weight: 700; } .skip-link:focus { top: 1rem; } .container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .section { padding-block: clamp(56px, 8vw, 112px); } .section--tight { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); } .section--flush-top { padding-top: 0; } /* Two white sections in a row share one gap instead of doubling it */ .section:not(.band--ink) + .band--paper { padding-top: 0; } .band { padding-block: clamp(56px, 8vw, 112px); } .band--paper { background: var(--paper); } .band--ink { background: var(--ink); color: var(--white); } /* Type ========================================================================== */ .eyebrow { display: inline-flex; align-items: center; gap: .625rem; margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .eyebrow--light { color: var(--yellow); } .section-title { margin: .5rem 0 0; font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: clamp(24px, 3vw, 40px); } .section-head__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .section-head__link .icon { transition: transform .25s var(--ease); } .section-head__link:hover .icon { transform: translateX(4px); } .cmyk { display: inline-flex; gap: 2px; } .cmyk i { display: block; width: 8px; height: 8px; } .cmyk i:nth-child(1) { background: var(--cyan); } .cmyk i:nth-child(2) { background: var(--magenta); } .cmyk i:nth-child(3) { background: var(--yellow); } .cmyk i:nth-child(4) { background: var(--ink); } .band--ink .cmyk i:nth-child(4) { background: var(--white); } .prose { max-width: 72ch; font-size: 1.0625rem; } .prose h2 { margin: 2em 0 .5em; font-size: 1.75rem; font-weight: 800; } .prose h3 { margin: 1.5em 0 .5em; font-size: 1.25rem; font-weight: 800; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin-bottom: .35em; } .prose li::marker { color: var(--magenta); } /* Crop marks: corner brackets drawn with gradients (decoration only) */ .crop-marks { position: relative; } .crop-marks::after { --c: var(--ink); --l: 16px; content: ""; position: absolute; inset: var(--cm-inset, 12px); pointer-events: none; z-index: 2; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l), linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l); background-repeat: no-repeat; transition: inset .35s var(--ease), opacity .35s; } /* Buttons ========================================================================== */ .button, button.button, input.button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem 1.375rem; border: 2px solid var(--ink); background: var(--ink); color: var(--white); font-family: var(--font); font-size: .9375rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; } .button:hover, button.button:hover, input.button:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .button:disabled, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--ink); background: var(--ink); color: var(--white); } .button .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); } .button:hover .icon { transform: translateX(3px); } .button--big { padding: 1.0625rem 1.75rem; font-size: 1rem; } .button.button--small, .woocommerce a.button.button--small { padding: .5rem .875rem; font-size: .8125rem; } .button.button--ghost, .woocommerce a.button.button--ghost { background: transparent; border-color: var(--ink); color: var(--ink); } .button.button--ghost:hover, .woocommerce a.button.button--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); } .button.button--yellow, .woocommerce a.button.button--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .button.button--yellow:hover, .woocommerce a.button.button--yellow:hover { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--magenta); } .button.button--ghost-light { background: transparent; border-color: var(--white); color: var(--white); } .button.button--ghost-light:hover { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--yellow); } .button-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* Top bar & header ========================================================================== */ .topbar { position: relative; background: #181516; color: rgba(255, 255, 255, .78); font-size: .8125rem; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 40px; } .topbar p { display: flex; align-items: center; gap: 1.5rem; margin: 0; white-space: nowrap; } .topbar a { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; } .topbar a:hover { color: var(--yellow); } .topbar strong { color: var(--white); font-weight: 700; } .topbar .icon { width: 1rem; height: 1rem; color: var(--yellow); } .topbar__hours { gap: .4rem !important; } .topbar__ticker { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .topbar__track { display: flex; align-items: center; width: max-content; animation: marquee 40s linear infinite; } .topbar__item { padding: 0 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); white-space: nowrap; } .topbar__ink { width: 7px; height: 7px; flex: none; } .topbar__ink--c { background: var(--cyan); } .topbar__ink--m { background: var(--magenta); } .topbar__ink--y { background: var(--yellow); } .topbar__ink--k { box-shadow: inset 0 0 0 1.5px var(--white); } .site-header { position: sticky; top: calc(-1 * var(--main-h, 0px)); z-index: 60; background: var(--ink); color: var(--white); transition: box-shadow .25s; } .site-header.is-stuck { box-shadow: 0 10px 30px rgba(35, 31, 32, .3); } .site-header__main { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 104px; padding-top: 12px; padding-bottom: 12px; transition: min-height .3s var(--ease); } /* Logo: the ink ring turns slowly around the black disc and overhangs the menu bar like a stamp */ .site-logo { position: relative; z-index: 3; display: flex; align-items: center; gap: 1rem; flex: none; color: var(--white); text-decoration: none; } .site-logo:hover { color: var(--white); } .site-logo__mark { position: relative; display: block; width: 92px; height: 90px; transition: width .3s var(--ease), height .3s var(--ease); } .site-logo__ring, .site-logo__disc { position: absolute; inset: 0; width: 100%; height: 100%; } .site-logo__ring { animation: spin 50s linear infinite; transition: scale .5s var(--ease); } .site-logo:hover .site-logo__ring { scale: 1.08; } .site-logo__tag { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .2); font-size: .6875rem; font-weight: 800; line-height: 1.45; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .site-logo img:not(.site-logo__ring):not(.site-logo__disc) { width: auto; height: 84px; } .site-search { position: relative; flex: 1; max-width: 560px; margin-left: auto; } .site-search input { width: 100%; height: 50px; padding: 0 3.75rem 0 1.125rem; border: 2px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); color: var(--white); font: inherit; font-size: .9375rem; font-weight: 500; transition: background .2s, border-color .2s, box-shadow .2s; } .site-search input::placeholder { color: rgba(255, 255, 255, .55); } .site-search input:focus { outline: none; border-color: var(--yellow); background: rgba(255, 255, 255, .1); box-shadow: 5px 5px 0 var(--magenta); } .site-search input::-webkit-search-cancel-button { filter: invert(1); } .site-search button { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 50px; height: 50px; border: 0; background: var(--yellow); color: var(--ink); cursor: pointer; transition: background .2s; } .site-search button:hover { background: var(--white); } .site-tools { display: flex; align-items: center; gap: .25rem; flex: none; } .site-tools__link { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem .625rem; color: var(--white); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .site-tools__link .icon { width: 1.625rem; height: 1.625rem; transition: transform .25s var(--ease); } .site-tools__link:hover { color: var(--yellow); } .site-tools__link:hover .icon { transform: translateY(-2px); } .site-tools__count { position: absolute; top: 0; right: .125rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; background: var(--magenta); color: var(--white); font-size: .6875rem; font-weight: 800; letter-spacing: 0; } .site-tools__count[data-count="0"] { display: none; } .nav-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 2px solid var(--white); background: transparent; color: var(--white); cursor: pointer; place-items: center; } .nav-toggle .icon { width: 1.5rem; height: 1.5rem; } .nav-toggle__close { display: none; } .nav-open .nav-toggle__open { display: none; } .nav-open .nav-toggle__close { display: block; } /* Main menu: an ink-black bar; each item underlines in a different process ink */ .site-nav { background: var(--ink); color: var(--white); border-top: 1px solid rgba(255, 255, 255, .12); } .site-nav > .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; } .site-nav__list { display: flex; flex-wrap: nowrap; margin: 0 0 0 -.875rem; padding: 0; list-style: none; } .site-nav__item { position: relative; display: flex; align-items: center; --ink-line: var(--yellow); } .site-nav__list > .site-nav__item:nth-child(4n+1) { --ink-line: var(--cyan); } .site-nav__list > .site-nav__item:nth-child(4n+2) { --ink-line: var(--magenta); } .site-nav__list > .site-nav__item:nth-child(4n+3) { --ink-line: var(--yellow); } .site-nav__list > .site-nav__item:nth-child(4n+4) { --ink-line: var(--white); } .site-nav__list > .site-nav__item > .site-nav__link { position: relative; display: block; padding: 1.0625rem .875rem; font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--white); white-space: nowrap; } .site-nav__list > .site-nav__item > .site-nav__link::after { content: ""; position: absolute; left: .875rem; right: .875rem; bottom: 0; height: 5px; background: var(--ink-line); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); } .site-nav__list > .site-nav__item:hover > .site-nav__link::after, .site-nav__list > .site-nav__item.is-current > .site-nav__link::after, .site-nav__list > .site-nav__item.is-open > .site-nav__link::after { transform: scaleY(1); } .site-nav__list > .site-nav__item > .site-nav__link:hover { color: var(--white); } .site-nav__list > .has-sub > .site-nav__link { padding-right: .25rem; } .site-nav__open { display: grid; place-items: center; width: 1.75rem; height: 2rem; margin-right: .375rem; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; } .site-nav__open .icon { width: 1rem; height: 1rem; transition: transform .2s; } .site-nav__item.is-open .site-nav__open .icon { transform: rotate(180deg); } .site-nav__panel { position: absolute; left: 0; top: 100%; z-index: 70; min-width: 320px; padding: .75rem; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-top: 5px solid var(--ink-line); box-shadow: 10px 10px 0 rgba(35, 31, 32, .12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; } .site-nav__item.is-open > .site-nav__panel { opacity: 1; visibility: visible; transform: none; } @media (hover: hover) and (min-width: 1081px) { .site-nav__item:hover > .site-nav__panel, .site-nav__item:focus-within > .site-nav__panel { opacity: 1; visibility: visible; transform: none; } } .site-nav__sub { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .site-nav__item--sub .site-nav__link { display: flex; align-items: center; gap: .875rem; width: 100%; padding: .5rem; font-size: .9375rem; font-weight: 700; text-decoration: none; color: var(--ink); transition: background .15s, transform .2s var(--ease); } .site-nav__item--sub .site-nav__link:hover { background: var(--well); color: var(--ink); transform: translateX(4px); } .site-nav__thumb { width: 52px; height: 52px; object-fit: cover; background: var(--well); flex: none; } .site-nav__thumb--blank { display: block; background: var(--halftone), var(--well); } .site-nav__design { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; background: var(--yellow); color: var(--ink); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s var(--ease); } .site-nav__design:hover { background: var(--white); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--magenta); } .site-nav__design .icon { width: 1.1rem; height: 1.1rem; } /* Compact bar: shown in the menu bar once the logo row has scrolled away */ .site-nav__mini-logo, .site-nav__mini-tools { display: none; } .site-nav__end { display: flex; align-items: center; gap: .75rem; } .site-header.is-stuck .site-nav__mini-logo { position: relative; display: block; flex: none; width: 44px; height: 43px; margin-right: 1.25rem; animation: rise .4s var(--ease) both; } .site-nav__mini-logo img { position: absolute; inset: 0; width: 100%; height: 100%; } .site-nav__mini-logo .site-logo__ring { animation: spin 50s linear infinite; } .site-header.is-stuck .site-nav__mini-tools { display: flex; align-items: center; gap: .25rem; animation: rise .4s var(--ease) both; } .site-nav__mini-tools button, .site-nav__mini-tools a { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; } .site-nav__mini-tools button:hover, .site-nav__mini-tools a:hover { color: var(--yellow); } .site-nav__mini-tools .icon { width: 1.375rem; height: 1.375rem; } .site-nav__mini-tools .site-tools__count { top: 2px; right: 0; } .site-header.is-stuck .site-nav__list { margin-left: 0; } .site-header.is-stuck .site-nav > .container { min-height: 60px; } /* Hero ========================================================================== */ .hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); background: var(--paper); } .hero__dots { position: absolute; top: -40px; right: -40px; width: 55%; height: 80%; background: var(--halftone); -webkit-mask: radial-gradient(circle at 100% 0, #000 0, transparent 70%); mask: radial-gradient(circle at 100% 0, #000 0, transparent 70%); } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hero__kicker { animation: rise .8s var(--ease) both; } .hero__title { margin: 1.25rem 0 1.25rem; font-size: clamp(2.75rem, 7vw, 5.75rem); font-weight: 900; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; animation: rise .9s .08s var(--ease) both; } .ink-swipe { position: relative; z-index: 0; display: inline-block; } .ink-swipe::before { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.05em; bottom: .04em; height: .38em; background: var(--yellow); transform-origin: left; animation: swipe .8s .55s var(--ease) both; } .hero__lead { max-width: 52ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink-2); animation: rise .9s .16s var(--ease) both; } .hero .button-row { margin-top: 2rem; animation: rise .9s .24s var(--ease) both; } .hero__points-unused { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 2.25rem 0 0; padding: 0; list-style: none; font-size: .875rem; font-weight: 600; animation: rise .9s .32s var(--ease) both; } .hero__points li { display: inline-flex; align-items: center; gap: .5rem; } .hero__points .icon { color: var(--magenta); } .hero__stage { position: relative; width: 100%; max-width: 620px; justify-self: center; } .hero__art { position: relative; width: 100%; aspect-ratio: 1; } .hero__ring { position: absolute; inset: 4%; width: 92%; height: auto; animation: spin 140s linear infinite, pop 1.1s .2s var(--ease) both; } .hero__floor { position: absolute; left: 50%; bottom: 13%; width: 54%; height: 26px; translate: -50% 0; background: radial-gradient(closest-side, rgba(35, 31, 32, .3), transparent); filter: blur(4px); } .hero__product { position: absolute; left: 50%; top: 46%; width: 60%; height: 66%; object-fit: contain; translate: -50% -50%; filter: drop-shadow(0 26px 26px rgba(35, 31, 32, .24)) drop-shadow(0 4px 6px rgba(35, 31, 32, .14)); } .hero__product.is-in { animation: place .7s var(--ease) both; } .hero__product.is-out { animation: lift-off .3s ease-in both; } @keyframes place { from { opacity: 0; transform: translateY(-36px) rotate(-6deg) scale(.94); } } @keyframes lift-off { to { opacity: 0; transform: translateY(24px) scale(.96); } } .hero__reg { position: absolute; color: var(--ink); opacity: .7; } .hero__reg .icon { width: 28px; height: 28px; animation: spin 18s linear infinite; } .hero__reg--a { left: 2%; top: 4%; } .hero__reg--b { right: 2%; top: 4%; } /* Headline arrives "out of register": cyan and magenta copies slide into place, then settle into ink */ .hero__title { position: relative; } .hero__title::before, .hero__title::after { content: attr(data-text); position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; pointer-events: none; animation: register 1.4s .2s var(--ease) both; } .hero__title::before { color: var(--cyan); --from: -.06em -.03em; } .hero__title::after { color: var(--magenta); --from: .05em .04em; } @keyframes register { from { translate: var(--from); opacity: 1; } 70% { translate: 0 0; opacity: 1; } to { translate: 0 0; opacity: 0; } } .hero__proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(16px, 3vw, 40px); margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--ink); animation: rise .9s .32s var(--ease) both; } .hero__proof div { margin: 0; } .hero__proof dt { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; } .hero__proof div:nth-child(1) dt { color: var(--cyan); } .hero__proof div:nth-child(2) dt { color: var(--magenta); } .hero__proof div:nth-child(3) dt { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 6px; text-underline-offset: -1px; text-decoration-skip-ink: none; } .hero__proof dd { margin: .375rem 0 0; max-width: 18ch; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); } /* Instant price bar under the product stage (the stage is a slideshow of the popular products) */ .hero__stage { display: grid; } .hero__stage .hero__art { width: 100%; aspect-ratio: 1 / .86; } .hero__stage .hero__ring { inset: 0 6%; width: 88%; } .quote-card { position: relative; z-index: 5; margin-top: -9%; padding: 1rem 1.125rem .875rem; background: var(--white); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--magenta); animation: rise .9s .9s var(--ease) both; } .quote-card__timer { position: absolute; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)); } .quote-card__timer.is-running { animation: timer var(--slide, 4.5s) linear both; } @keyframes timer { to { width: 100%; } } .quote-card__head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .quote-card__live { width: 8px; height: 8px; background: #1f9d55; animation: blink 1.6s steps(2) infinite; } @keyframes blink { 50% { opacity: .2; } } .quote-card__spec { margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); } .quote-card__row { display: grid; grid-template-columns: 1.3fr 1fr auto auto; gap: .5rem; align-items: center; } .quote-card select { width: 100%; padding: .5rem; border: 1.5px solid var(--ink); background: var(--white); font: inherit; font-size: .8125rem; font-weight: 700; } .quote-card__price { display: grid; margin: 0 .25rem; font-size: 1.625rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; white-space: nowrap; } .quote-card__price small { font-size: .625rem; font-weight: 600; letter-spacing: 0; color: var(--muted); } .quote-card__price span { display: inline-block; transition: transform .25s var(--ease); } .quote-card.is-updating .quote-card__price span { transform: translateY(-4px); } .quote-card__go { padding: .75rem 1rem; font-size: .875rem; } .quote-card__ready { display: flex; align-items: center; gap: .375rem; margin: .625rem 0 0; font-size: .75rem; font-weight: 600; } .quote-card__ready .icon { width: 1rem; height: 1rem; color: var(--magenta); } @keyframes rise { from { opacity: 0; transform: translateY(24px); } } @keyframes swipe { from { transform: scaleX(0); } } @keyframes spin { to { rotate: 360deg; } } @keyframes pop { from { opacity: 0; scale: .85; } } @keyframes float { 50% { transform: translateY(-12px); } } @keyframes drop { from { opacity: 0; margin-top: -40px; } } /* Marquee ========================================================================== */ .marquee { overflow: hidden; background: var(--ink); color: var(--white); border-top: 4px solid var(--yellow); } .marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__list { display: flex; margin: 0; padding: 1.125rem 0; list-style: none; } .marquee__list a { color: inherit; text-decoration: none; transition: color .2s; } .marquee__list a:hover { color: var(--yellow); } .marquee__list li { display: flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; } .marquee__dot { width: 12px; height: 12px; } .marquee__dot--c { background: var(--cyan); } .marquee__dot--m { background: var(--magenta); } .marquee__dot--y { background: var(--yellow); } .marquee__dot--k { background: transparent; box-shadow: inset 0 0 0 2px var(--white); } @keyframes marquee { to { transform: translateX(-50%); } } /* Product cards ========================================================================== */ ul.products, .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; } ul.products--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .products li.product { float: none !important; clear: none !important; width: auto !important; margin: 0 !important; padding: 0; } .product-card { --shadow: var(--cyan); } .product-card:nth-child(3n+2) { --shadow: var(--magenta); } .product-card:nth-child(3n) { --shadow: var(--yellow); } .product-card__link { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1.5px solid var(--line); color: inherit; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .product-card__link:hover { color: inherit; border-color: var(--ink); transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--shadow); } .product-card__image { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--well); --cm-inset: 22px; } .product-card__image::after { opacity: 0; } .product-card__link:hover .product-card__image::after { opacity: 1; --cm-inset: 12px; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .product-card__link:hover .product-card__image img { transform: scale(1.05); } .product-card__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.25rem 1.375rem 1.375rem; } .product-card__title { font-size: 1.125rem; font-weight: 900; letter-spacing: .01em; line-height: 1.15; text-transform: uppercase; } .product-card__text { flex: 1; font-size: .9375rem; line-height: 1.55; color: var(--muted); } .product-card__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .product-card__price { font-size: 1.0625rem; font-weight: 800; } .product-card__price del { font-weight: 500; color: var(--muted); } .product-card__price ins { text-decoration: none; } .product-card__cta { display: inline-flex; align-items: center; gap: .375rem; padding: .625rem .875rem; background: var(--ink); color: var(--white); font-size: .8125rem; font-weight: 700; white-space: nowrap; transition: background .25s; } .product-card__cta .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); } .product-card__link:hover .product-card__cta { background: var(--magenta); } .product-card__link:hover .product-card__cta .icon { transform: translateX(3px); } .onsale, .woocommerce span.onsale { position: absolute; top: 12px; left: 12px; z-index: 3; min-width: 0; min-height: 0; margin: 0; padding: .25rem .5rem; background: var(--magenta); color: var(--white); font-size: .75rem; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; } /* Home: orders of service, a folded booklet that opens like the real thing ========================================================================== */ .oos { position: relative; overflow: hidden; } .oos::before { content: ""; position: absolute; left: -60px; bottom: -60px; width: 420px; height: 420px; background: var(--halftone); -webkit-mask: radial-gradient(circle at 0 100%, #000 0, transparent 70%); mask: radial-gradient(circle at 0 100%, #000 0, transparent 70%); } .oos__inner { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .oos__lead { margin: 1.25rem 0 0; max-width: 54ch; font-size: 1.0625rem; color: var(--ink-2); } .oos .button-row { margin-top: 1.75rem; } .oos__try { display: grid; gap: .5rem; max-width: 440px; margin-top: 1.75rem; } .oos__try-label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); } .oos__try-field { position: relative; display: block; } .oos__try-field .icon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; color: var(--ink); pointer-events: none; } .oos__try input { width: 100%; height: 56px; padding: 0 1rem 0 3rem; border: 2px solid var(--ink); background: var(--white); font: 500 1.25rem/1 "Cormorant Garamond", Georgia, serif; color: var(--ink); transition: box-shadow .2s; } .oos__try input:focus { outline: none; box-shadow: 6px 6px 0 var(--yellow); } /* The booklet: an A5 page (the inside right) with the cover hinged on its left edge */ .oos__stage { position: relative; display: grid; place-items: center; min-height: clamp(370px, 33vw, 480px); perspective: 2200px; } .booklet { --w: clamp(230px, 21vw, 300px); position: relative; width: var(--w); aspect-ratio: 148 / 210; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: center; transform-style: preserve-3d; transform: translateX(0) rotateX(10deg) rotateZ(-3deg); transition: transform 1.3s var(--ease); } .oos.is-open .booklet { transform: translateX(calc(var(--w) / 2)) rotateX(8deg) rotateZ(-1deg); } .booklet__page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 9% 9%; background: #fff; box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .06); } .booklet__inside-right { background: #ffffff; box-shadow: 0 18px 36px rgba(35, 31, 32, .16), inset 14px 0 18px -14px rgba(0, 0, 0, .18); } .booklet__cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.5s var(--ease); } .oos.is-open .booklet__cover { transform: rotateY(-178deg); } .booklet__front, .booklet__back { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .booklet__front { justify-content: flex-start; padding: 0 9% 8%; box-shadow: 0 18px 36px rgba(35, 31, 32, .18); } .booklet__back { transform: rotateY(180deg); box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, .18); } .booklet:hover .booklet__cover { transform: rotateY(-14deg); } .oos.is-open .booklet:hover .booklet__cover { transform: rotateY(-170deg); } .oos__hint { position: absolute; right: 0; bottom: 0; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .oos__hint-close, .oos.is-open .oos__hint-open { display: none; } .oos.is-open .oos__hint-close { display: inline; } /* What's printed on it: the Seascape template at its real proportions. 1u = 1% of the page width = 1.48mm on the printed A5, so every size below is the template's mm ÷ 1.48. */ .booklet { --u: calc(var(--w) / 100); } .booklet__page { padding: 0; display: block; text-align: center; } .bk-safe { position: absolute; inset: calc(var(--u) * 4.73); display: flex; flex-direction: column; align-items: center; } .bk-hero { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 73.6); background: center / cover no-repeat; } .bk-portrait { position: absolute; left: 50%; top: calc(var(--u) * 50); width: calc(var(--u) * 35.1); height: calc(var(--u) * 43.9); margin-left: calc(var(--u) * -17.55); padding: calc(var(--u) * 1.35); background: #fff; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.7) rgba(20, 30, 40, .25); } .bk-portrait img { width: 100%; height: 100%; object-fit: cover; } .bk-text { position: absolute; left: calc(var(--u) * 6.76); right: calc(var(--u) * 6.76); top: calc(var(--u) * 97.3); bottom: calc(var(--u) * 6.76); display: flex; flex-direction: column; align-items: center; justify-content: center; } .bk-kicker { font: 500 calc(var(--u) * 1.53) / 1.3 var(--font); letter-spacing: .3em; text-transform: uppercase; color: #23455f; } .bk-name { max-width: 100%; margin-top: calc(var(--u) * 1.62); overflow: hidden; font: 500 calc(var(--u) * 6.44) / 1.1 "Cormorant Garamond", Georgia, serif; color: #1d2a33; white-space: nowrap; transition: color .3s; } .bk-dates { margin-top: calc(var(--u) * .95); font: 400 calc(var(--u) * 2.98) / 1.2 "Cormorant Garamond", Georgia, serif; color: #5a6a74; } .bk-wave { width: calc(var(--u) * 13.5); margin: calc(var(--u) * 2.7) 0 calc(var(--u) * 2.43); } .bk-service { font: 600 calc(var(--u) * 1.57) / 1.75 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #5a6a74; } .bk-title { margin-top: calc(var(--u) * 2); font: 500 calc(var(--u) * 4.77) / 1.1 "Cormorant Garamond", Georgia, serif; color: #1d2a33; } .booklet__inside-right .bk-title { font-size: calc(var(--u) * 4.05); } .bk-rule { display: block; flex: none; width: calc(var(--u) * 9.46); height: calc(var(--u) * .24); margin: calc(var(--u) * 2.7) auto calc(var(--u) * 3.4); background: #23455f; } .bk-item { display: block; margin-bottom: calc(var(--u) * 2.4); font: 400 calc(var(--u) * 2.62) / 1.25 "Cormorant Garamond", Georgia, serif; color: #1d2a33; } .bk-item b { display: block; font: 600 calc(var(--u) * 1.57) / 1.4 var(--font); letter-spacing: .22em; text-transform: uppercase; color: #23455f; } .bk-verse { display: block; margin-bottom: calc(var(--u) * 3); font: 400 calc(var(--u) * 2.74) / 1.45 "Cormorant Garamond", Georgia, serif; color: #1d2a33; } .booklet__back { background: #ffffff; } .booklet__inside-right { background: #fff; } .oos.is-typing .bk-name { color: var(--magenta); } /* The four real templates underneath */ .oos__designs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin: clamp(8px, 2vw, 24px) 0 0; padding: clamp(20px, 3vw, 32px) 0 0; border-top: 2px solid var(--ink); list-style: none; } .oos__designs a { display: flex; align-items: center; gap: .875rem; color: var(--ink); text-decoration: none; } .oos__designs img { width: 56px; height: auto; flex: none; box-shadow: 0 6px 14px rgba(35, 31, 32, .18); transition: transform .3s var(--ease), box-shadow .3s; } .oos__designs a:hover img { transform: translateY(-4px) rotate(-3deg); box-shadow: 5px 5px 0 var(--magenta); } .oos__designs span { display: grid; font-size: .9375rem; font-weight: 900; text-transform: uppercase; } .oos__designs small { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); } /* Home: Gifts & Art Shop, a gallery wall at night ========================================================================== */ .gallery { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0; background: #1b1819; color: var(--white); } .gallery__lights { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 55% at 22% 0%, rgba(255, 248, 225, .16), transparent 70%), radial-gradient(30% 50% at 64% 0%, rgba(255, 248, 225, .12), transparent 70%), radial-gradient(28% 48% at 88% 0%, rgba(255, 248, 225, .1), transparent 70%); } .gallery .container { position: relative; } .gallery .section-head__link { color: var(--white); } .gallery .section-head__link:hover { color: var(--yellow); } .gallery__wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); margin-top: clamp(16px, 3vw, 40px); padding-top: 44px; } .gallery__wall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(#3a3536, #262223); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); } .gallery__piece { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 1.25rem; color: inherit; text-decoration: none; } .gallery__piece:hover { color: inherit; } .gallery__spot { position: absolute; left: -20%; right: -20%; top: -44px; height: 75%; background: radial-gradient(50% 60% at 50% 0%, rgba(255, 246, 220, .2), transparent 75%); opacity: .55; transition: opacity .5s; pointer-events: none; } .gallery__piece:hover .gallery__spot { opacity: 1; } .frame { position: relative; display: block; padding: 12px; background: #0f0d0d; box-shadow: 0 26px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .45s var(--ease), box-shadow .45s; } /* Each frame hangs from a hook on the rail by a wire, and swings on it when hovered */ .frame { transform-origin: 50% -41px; } .frame::before { content: ""; position: absolute; left: 24%; right: 24%; top: -41px; height: 41px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 50 0 100 100' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .frame::after { content: ""; position: absolute; left: 50%; top: -46px; width: 10px; height: 9px; margin-left: -5px; background: linear-gradient(#6a6264, #3a3536); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); } .frame__mount { display: block; padding: clamp(14px, 1.8vw, 24px); background: #ffffff; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); } .frame__mount img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .gallery__piece:hover .frame { animation: swing 1.6s var(--ease); box-shadow: 0 34px 56px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1); } @keyframes swing { 0% { rotate: 0deg; } 22% { rotate: -1.4deg; } 50% { rotate: .9deg; } 76% { rotate: -.4deg; } 100% { rotate: 0deg; } } /* Personalised gifts: a proof waiting for the customer's photo */ .yours { position: relative; display: block; aspect-ratio: 4 / 5; } .yours__proof { position: absolute; inset: 0; width: 100%; height: 100%; } .yours__trim { stroke: var(--magenta); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; } .yours__marks { fill: none; stroke: var(--ink); stroke-width: 1.25px; vector-effect: non-scaling-stroke; } .gallery__piece:hover .yours__trim { animation: march .7s linear infinite; } @keyframes march { to { stroke-dashoffset: -10; } } .yours__text { position: absolute; inset: 12%; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1rem; text-align: center; color: var(--ink); } .yours__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .25rem; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transition: transform .35s var(--ease); } .yours__icon .icon { width: 24px; height: 24px; } .gallery__piece:hover .yours__icon { transform: translateY(-4px); } .yours__title { font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; } .yours__sub { display: grid; font-size: .6875rem; font-weight: 800; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .plaque { display: grid; align-content: start; gap: .35rem; padding: 1rem 1.125rem 1.125rem; background: #ffffff; color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); } .plaque__no { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; color: var(--magenta); } .plaque__title { font-size: 1.125rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; } .plaque__text { font-size: .875rem; line-height: 1.5; color: var(--muted); } .plaque__cta { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .8125rem; font-weight: 800; } .plaque__cta .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); } .gallery__piece:hover .plaque__cta .icon { transform: translateX(4px); } .gallery__rail-head { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(48px, 7vw, 88px); padding-top: 1.25rem; border-top: 2px solid rgba(255, 255, 255, .1); } .gallery__rail-title { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); } .gallery__rail-buttons { display: flex; gap: .5rem; } .gallery__rail-buttons button { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--white); background: transparent; color: var(--white); cursor: pointer; transition: background .2s, color .2s; } .gallery__rail-buttons button:hover { background: var(--white); color: var(--ink); } .icon--flip { transform: scaleX(-1); } .gallery__rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 18vw, 230px); gap: clamp(16px, 2vw, 28px); margin: 1.5rem 0 0; padding: 0 0 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; } .gallery__rail li { scroll-snap-align: start; } .mini-frame { display: grid; gap: .25rem; color: var(--white); text-decoration: none; } .mini-frame:hover { color: var(--white); } .mini-frame__mount { display: block; margin-bottom: .625rem; padding: 10px; background: #ffffff; border: 8px solid #0f0d0d; box-shadow: 0 16px 30px rgba(0, 0, 0, .5); transition: transform .35s var(--ease); } .mini-frame__mount img { width: 100%; aspect-ratio: 1; object-fit: cover; } .mini-frame:hover .mini-frame__mount { transform: translateY(-6px); } .mini-frame__name { font-weight: 800; font-size: .9375rem; } .mini-frame__by { font-size: .8125rem; color: rgba(255, 255, 255, .6); } .mini-frame__price { font-size: .875rem; font-weight: 700; color: var(--yellow); } .mini-frame__price .ep-price-from, .mini-frame__price small { color: rgba(255, 255, 255, .6); } /* Home: business accounts ========================================================================== */ .business { position: relative; overflow: hidden; } .business::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; background: url("../img/splat-ring-ink.svg") center / contain no-repeat; opacity: .06; filter: invert(1); animation: spin 200s linear infinite; } .business__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .business__copy p { max-width: 50ch; margin-top: 1.25rem; color: rgba(255, 255, 255, .78); font-size: 1.0625rem; } .business__copy .button-row { margin-top: 2rem; } .business__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); } .business__features li { padding: 1.5rem; background: var(--ink); } .business__features .icon { width: 2rem; height: 2rem; color: var(--yellow); } .business__features h3 { margin: 1rem 0 .375rem; font-size: 1rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; } .business__features p { margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .7); } .business__tiers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(12px, 2vw, 24px); margin: 0; padding: 0; list-style: none; } /* Each tier stands a step higher than the last: rewards that grow */ .tier { display: grid; justify-items: start; gap: .625rem; padding: 1.5rem; background: var(--white); color: var(--ink); border-top: 8px solid var(--cyan); } .tier--2 { padding-top: calc(1.5rem + 22px); border-top-color: var(--magenta); } .tier--3 { padding-top: calc(1.5rem + 44px); border-top-color: var(--yellow); } .tier__level { padding: .25rem .5rem; background: var(--cyan); font-size: .6875rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .tier--2 .tier__level { background: var(--magenta); color: var(--white); } .tier--3 .tier__level { background: var(--yellow); } .tier__gives { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; } .tier__spend { font-size: .875rem; font-weight: 600; color: var(--muted); } .tier__spend .amount { color: var(--ink); font-weight: 800; } /* Home: how it works, a little print line ========================================================================== */ .how__line { position: relative; } .how__track { position: absolute; left: 0; right: 0; top: calc(var(--art-h, 210px) / 2); height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 22px); } .how__sheet { position: absolute; top: -13px; left: -60px; width: 44px; height: 30px; background: var(--white); border: 2px solid var(--ink); box-shadow: inset 0 5px 0 var(--cyan); animation: travel 12s linear infinite; } .how__sheet:nth-child(2) { animation-delay: -3s; box-shadow: inset 0 5px 0 var(--magenta); } .how__sheet:nth-child(3) { animation-delay: -6s; box-shadow: inset 0 5px 0 var(--yellow); } .how__sheet:nth-child(4) { animation-delay: -9s; } @keyframes travel { from { left: -60px; } to { left: 100%; } } .how__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); margin: 0; padding: 0; list-style: none; } .how__step { --art-h: 210px; } .how__art { position: relative; z-index: 1; display: grid; place-items: center; height: var(--art-h); margin: 0 0 1.5rem; background: var(--well); --cm-inset: 10px; } .how__art svg { width: 82%; max-height: 82%; overflow: visible; } .how__num { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .875rem; background: var(--ink); color: var(--yellow); font-size: .9375rem; font-weight: 900; } .how__step:nth-child(1) .how__num { box-shadow: 4px 4px 0 var(--cyan); } .how__step:nth-child(2) .how__num { box-shadow: 4px 4px 0 var(--magenta); } .how__step:nth-child(3) .how__num { box-shadow: 4px 4px 0 var(--yellow); } .how__step h3 { font-size: 1.375rem; font-weight: 900; text-transform: uppercase; } .how__step p { margin: .625rem 0 0; color: var(--ink-2); } .how__cursor { animation: point 3.2s var(--ease) infinite; } .how__pick { animation: pick 3.2s var(--ease) infinite; } @keyframes point { 0%, 100% { transform: translate(28px, 18px); } 45%, 70% { transform: translate(0, 0); } } @keyframes pick { 0%, 40% { fill: #fff; } 50%, 100% { fill: #f2f145; } } .how__badge { animation: stamp 3.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; } @keyframes stamp { 0%, 30% { opacity: 0; transform: scale(1.6); } 42%, 100% { opacity: 1; transform: none; } } .how__up { animation: lift 3.2s var(--ease) infinite; } @keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .how__roller { animation: roll 1.4s linear infinite; } @keyframes roll { to { transform: rotate(360deg); } } .how__out { animation: feed 2.4s var(--ease) infinite; } @keyframes feed { from { transform: translateX(-40px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } } /* Home: visit, a map with our business card on it ========================================================================== */ .visit__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .visit__copy p { max-width: 52ch; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--ink-2); } .visit__facts { display: grid; gap: .625rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-weight: 700; } .visit__facts li { display: flex; align-items: center; gap: .625rem; } .visit__facts .icon { color: var(--magenta); } .visit__stage { position: relative; padding-bottom: 64px; } .visit__map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 10px 10px 0 var(--ink); } .visit__map { display: block; } .visit__map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .visit__map:hover img { transform: scale(1.04); } .visit__pin { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -44px 0 0 -22px; background: var(--magenta); color: var(--white); box-shadow: 4px 4px 0 var(--ink); animation: bob 2.4s var(--ease) infinite; } .visit__pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -6px; border: 6px solid transparent; border-top: 6px solid var(--magenta); border-bottom: 0; } .visit__pin .icon { width: 1.5rem; height: 1.5rem; } @keyframes bob { 50% { transform: translateY(-6px); } } .visit__map-label { position: absolute; left: calc(50% + 32px); top: calc(50% - 40px); z-index: 2; padding: .25rem .5rem; background: var(--ink); color: var(--yellow); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .visit__map-credit { position: absolute; right: 0; bottom: 0; z-index: 2; padding: .125rem .375rem; background: rgba(255, 255, 255, .85); font-size: .625rem; color: var(--ink); } .bizcard { position: absolute; left: -6%; bottom: 0; width: min(330px, 62%); aspect-ratio: 85 / 55; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; text-align: left; font: inherit; color: inherit; transform: rotate(-5deg); transition: transform .4s var(--ease); } .bizcard:hover { transform: rotate(-2deg) translateY(-6px); } .bizcard__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); } .bizcard.is-flipped .bizcard__inner { transform: rotateY(180deg); } @media (hover: hover) { .bizcard:hover .bizcard__inner { transform: rotateY(180deg); } .bizcard.is-flipped:hover .bizcard__inner { transform: none; } } .bizcard__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .125rem; padding: 1.125rem 1.25rem; backface-visibility: hidden; box-shadow: 0 24px 40px rgba(35, 31, 32, .35); } .bizcard__front { background: var(--ink); color: var(--white); } .bizcard__back { background: var(--white); color: var(--ink); transform: rotateY(180deg); border: 1px solid var(--line); } .bizcard__logo { position: absolute; right: 1rem; top: 1rem; width: 68px; height: 66px; } .bizcard__logo img { position: absolute; inset: 0; width: 100%; height: 100%; } .bizcard__logo .site-logo__ring { animation: spin 40s linear infinite; } .bizcard__label { font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .bizcard__back .bizcard__label { color: var(--magenta); } .bizcard__phone { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; color: var(--yellow); line-height: 1.1; } .bizcard__email { font-size: .8125rem; font-weight: 600; } .bizcard__hint { position: absolute; left: 1.25rem; top: 1rem; font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .bizcard__address { font-size: .9375rem; font-weight: 700; line-height: 1.35; } .bizcard__hours { margin-top: .375rem; font-size: .75rem; font-weight: 600; color: var(--muted); } .bizcard__bar { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--cyan) 0 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, var(--ink) 75%); } .visit__actions { position: absolute; right: 0; bottom: 0; display: flex; gap: .5rem; margin: 0; } /* Contact page: text beside the map card ========================================================================== */ .contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .contact__text h2:first-child, .contact__text p:first-child { margin-top: 0; } .contact__quick { display: grid; gap: .625rem; margin: 2rem 0 0; padding: 0 !important; list-style: none; } .contact__quick li { margin: 0 !important; } .contact__quick li::marker { content: none; } .contact__quick a { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border: 2px solid var(--ink); text-decoration: none; transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease); } .contact__quick a:hover { background: var(--ink); color: var(--white); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--yellow); } .contact__quick .icon { width: 1.5rem; height: 1.5rem; color: var(--magenta); } .contact__quick a:hover .icon { color: var(--yellow); } .contact__quick span { display: grid; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .contact__quick strong { font-size: 1.125rem; letter-spacing: 0; text-transform: none; } .contact .visit__stage { margin-top: .5rem; } /* Section divider: the edge of a press sheet (3mm bleed, dashed trim, crop marks, scissors) ========================================================================== */ .cut-line { padding: 0; } /* The divider replaces the gap between sections, so the sections either side give up most of theirs */ :is(.section, .band):has(+ .cut-line) { padding-bottom: clamp(36px, 4.5vw, 64px); } .cut-line + :is(.section, .band) { padding-top: clamp(36px, 4.5vw, 64px); } .js .cut-line.reveal { opacity: 1; transform: none; } .cut-line__inner { display: flex; align-items: center; gap: 14px; } .cut-line__label { flex: none; font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .cut-line__sheet { position: relative; flex: 1; height: 26px; } /* crop marks at both ends */ .cut-line__sheet::before, .cut-line__sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: linear-gradient(var(--ink), var(--ink)) center 0 / 1.5px 9px no-repeat, linear-gradient(var(--ink), var(--ink)) center 100% / 1.5px 9px no-repeat; } .cut-line__sheet::before { left: 0; } .cut-line__sheet::after { right: 0; } /* 3mm bleed strip (hatched) above the trim */ .cut-line__bleed { position: absolute; left: 18px; right: 18px; top: 4px; height: 9px; background: repeating-linear-gradient(-45deg, rgba(185, 28, 112, .22) 0 2px, transparent 2px 6px); } .cut-line__trim { position: absolute; left: 18px; right: 18px; top: 13px; height: 0; border-top: 1.5px dashed var(--magenta); } .cut-line__scissors { position: absolute; left: 6px; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; background: var(--paper); color: var(--ink); transform: rotate(0deg); } .cut-line.is-visible .cut-line__scissors { animation: snip 2.4s .2s var(--ease) both; } .cut-line.is-visible .cut-line__trim { animation: cut-open 2.4s .2s var(--ease) both; } @keyframes snip { 0% { left: 6px; transform: rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); } 20%, 40%, 60%, 80% { transform: rotate(4deg); } 100% { left: calc(100% - 30px); transform: rotate(0deg); } } @keyframes cut-open { from { border-top-style: dashed; } to { border-top-style: solid; } } /* Home: FAQ ========================================================================== */ .faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .faq__head { position: sticky; top: calc(var(--header-h) + 32px); } .faq__head p { margin: 1.25rem 0 1.5rem; max-width: 36ch; font-size: 1.0625rem; color: var(--ink-2); } .faq__list { border-top: 2px solid var(--ink); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__num { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--ink); color: var(--yellow); font-size: .75rem; font-weight: 900; } .faq__item:nth-child(3n+1) .faq__num { box-shadow: 3px 3px 0 var(--cyan); } .faq__item:nth-child(3n+2) .faq__num { box-shadow: 3px 3px 0 var(--magenta); } .faq__item:nth-child(3n) .faq__num { box-shadow: 3px 3px 0 var(--yellow); } .faq__q { font-size: 1.125rem; font-weight: 800; } .faq__toggle { position: relative; width: 18px; height: 18px; } .faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); } .faq__toggle::after { transform: rotate(90deg); } .faq__item[open] .faq__toggle::after { transform: rotate(0deg); } .faq__item summary:hover .faq__q { color: var(--magenta); } .faq__item p { margin: 0 0 1.25rem; padding-left: 3.25rem; max-width: 62ch; color: var(--ink-2); } /* Page header, breadcrumbs, chips ========================================================================== */ .page-hero { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 64px) 0; background: var(--paper); border-bottom: 1px solid var(--line); } .page-hero::before { content: ""; position: absolute; right: -40px; top: -40px; width: 380px; height: 300px; background: var(--halftone); -webkit-mask: radial-gradient(circle at 100% 0, #000 0, transparent 70%); mask: radial-gradient(circle at 100% 0, #000 0, transparent 70%); } .page-hero--compact { padding: clamp(28px, 4vw, 48px) 0; } .page-hero .container { position: relative; } .page-hero__title { margin: .5rem 0 0; font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; } .page-hero__lead { max-width: 64ch; margin-top: 1rem; font-size: 1.0625rem; color: var(--ink-2); } .page-hero__lead p:last-child { margin-bottom: 0; } .breadcrumbs, .woocommerce .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted); } .breadcrumbs a { color: var(--ink); text-decoration: none; } .breadcrumbs a:hover { color: var(--magenta); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .chips a { display: inline-block; padding: .5rem .875rem; border: 1.5px solid var(--ink); background: var(--white); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; } .chips a:hover { background: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--yellow); } .post-list { display: grid; gap: 1.5rem; max-width: 72ch; } .post-item { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .post-item__title { font-size: 1.5rem; font-weight: 800; } .post-item__title a { text-decoration: none; } /* WooCommerce: archive toolbar, notices, forms ========================================================================== */ .woocommerce .woocommerce-result-count { margin: 0 0 1.5rem; font-size: .875rem; color: var(--muted); } .woocommerce .woocommerce-ordering { margin: 0 0 1.5rem; } .woocommerce .woocommerce-ordering select, .woocommerce select, .woocommerce form .form-row select { padding: .625rem 2rem .625rem .75rem; border: 1.5px solid var(--ink); background: var(--white); font: inherit; font-size: .875rem; } .woocommerce nav.woocommerce-pagination ul { border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 2px; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { padding: .625rem .875rem; border: 1.5px solid var(--ink); font-weight: 700; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ink); color: var(--white); } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > div { margin: 0 0 1.5rem !important; padding: 1rem 1.25rem 1rem 3.25rem !important; border: 0 !important; border-left: 5px solid var(--cyan) !important; background: var(--well) !important; color: var(--ink) !important; font-weight: 500; list-style: none; } .woocommerce-message { border-left-color: #1f7a4d !important; } .woocommerce-error { border-left-color: var(--magenta) !important; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 1rem !important; left: 1.125rem !important; color: inherit !important; } .woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 1rem; padding: .5rem .875rem; font-size: .8125rem; } .woocommerce form .form-row { padding: 0; margin: 0 0 1rem; } .woocommerce form .form-row label { margin-bottom: .3rem; font-size: .8125rem; font-weight: 700; line-height: 1.4; } .woocommerce form .form-row .input-text, .woocommerce form .form-row textarea, .woocommerce-page form .form-row .input-text, .woocommerce form .form-row input[type="text"], .woocommerce form .form-row input[type="email"], .woocommerce form .form-row input[type="tel"], .woocommerce form .form-row input[type="password"], .woocommerce .quantity .qty, .woocommerce-cart table.cart td.actions .coupon .input-text { width: 100%; padding: .75rem .875rem; border: 1.5px solid var(--line); background: var(--white); font: inherit; font-size: .9375rem; line-height: 1.4; color: var(--ink); } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce .quantity .qty:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(78, 145, 211, .35); } .woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--magenta); } .woocommerce .required { color: var(--magenta); text-decoration: none; } .select2-container--default .select2-selection--single { height: auto; padding: .5rem .5rem; border: 1.5px solid var(--line); } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); } .select2-dropdown { border: 1.5px solid var(--ink); } /* WooCommerce: single product ========================================================================== */ .product-container { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(48px, 7vw, 96px); } .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(32px, 4.5vw, 72px); align-items: start; margin-top: 1rem; } .ep-print-product.woocommerce div.product { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .woocommerce div.product > .onsale { position: absolute; } .woocommerce div.product div.images.woocommerce-product-gallery { grid-column: 1; float: none !important; width: auto !important; margin: 0 !important; position: sticky; top: calc(var(--header-h) + 24px); } .woocommerce div.product div.summary { grid-column: 2; float: none !important; width: auto !important; margin: 0 !important; } .woocommerce .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .up-sells { grid-column: 1 / -1; } .product-container > .woocommerce-tabs { margin-top: clamp(40px, 6vw, 80px); } .product-container > .related, .product-container > .up-sells { margin-top: clamp(48px, 7vw, 96px); } .woocommerce div.product div.images .flex-viewport, .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { background: var(--well); } .woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; } .woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; float: none; } .woocommerce div.product div.images .flex-control-thumbs li img { opacity: .55; border: 2px solid transparent; transition: opacity .2s; } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--ink); } .woocommerce div.product .woocommerce-product-gallery__trigger { top: 1rem; right: 1rem; width: 40px; height: 40px; background: var(--white); border: 1.5px solid var(--ink); } .woocommerce div.product .woocommerce-product-gallery__trigger::before { border-color: var(--ink); top: 10px; left: 10px; } .woocommerce div.product .woocommerce-product-gallery__trigger::after { background: var(--ink); top: 23px; left: 22px; } .woocommerce div.product .product_title { margin: 0 0 .75rem; font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; } .woocommerce div.product p.price, .woocommerce div.product span.price { margin: 0 0 1rem; color: var(--ink); font-size: 1.5rem; font-weight: 800; } .woocommerce div.product .woocommerce-product-details__short-description { font-size: 1.0625rem; color: var(--ink-2); } .woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.1em; } .woocommerce div.product .woocommerce-product-details__short-description li::marker { color: var(--magenta); } .product-promises { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.25rem 0 0; padding: .875rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; font-size: .8125rem; font-weight: 600; } .product-promises li { display: inline-flex; align-items: center; gap: .4rem; } .product-promises .icon { width: 1.125rem; height: 1.125rem; color: var(--magenta); } .woocommerce div.product form.cart { margin: 1.5rem 0; } .woocommerce div.product form.cart .variations { margin-bottom: 1rem; } .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; line-height: 1.4; } .woocommerce div.product form.cart .variations label { font-weight: 700; } .woocommerce div.product form.cart .variations select { width: 100%; max-width: 360px; margin: .375rem 0 1rem; padding: .75rem; border: 1.5px solid var(--ink); } .woocommerce div.product form.cart .reset_variations { font-size: .8125rem; } .woocommerce div.product form.cart .variations select[hidden] { display: none; } /* Media option as picture tiles (inc/woocommerce.php) */ .media-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; max-width: 420px; margin: .5rem 0 1.25rem; } .media-tile { --tile-bg: var(--white); display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; padding: 1rem 1rem .875rem; border: 1.5px solid var(--line); background: var(--tile-bg); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s, color .15s; } .media-tile:hover { border-color: var(--ink); } .media-tile[aria-pressed="true"] { --tile-bg: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--yellow); } .media-tile:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .media-tile[hidden] { display: none; } .media-tile__art { width: 4rem; height: 3rem; margin-bottom: .625rem; } .media-tile__art .paper { fill: var(--tile-bg); transition: fill .15s; } .media-tile__art .ink-c { fill: var(--cyan); stroke: none; } .media-tile__art .ink-m { fill: var(--magenta); stroke: none; } .media-tile__art .ink-y { fill: var(--yellow); stroke: none; } .media-tile__art .thin { stroke-width: 1; } .media-tile__label { font-weight: 700; line-height: 1.25; } .media-tile__price { font-size: .875rem; color: var(--muted); transition: color .15s; } .media-tile[aria-pressed="true"] .media-tile__price { color: rgba(255, 255, 255, .75); } .woocommerce div.product form.cart .button { padding: 1rem 1.75rem; font-size: 1rem; } .woocommerce .quantity .qty { width: 5rem; text-align: center; } .woocommerce .woocommerce-tabs, .woocommerce .woocommerce-tabs { margin-top: clamp(24px, 4vw, 56px); } .woocommerce .woocommerce-tabs ul.tabs { display: flex; gap: 0; margin: 0 0 1.5rem; padding: 0; border-bottom: 2px solid var(--ink); overflow-x: auto; } .woocommerce .woocommerce-tabs ul.tabs::before, .woocommerce .woocommerce-tabs ul.tabs li::before, .woocommerce .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; } .woocommerce .woocommerce-tabs ul.tabs li a { display: block; padding: .875rem 1.25rem; font-weight: 700; color: var(--muted); } .woocommerce .woocommerce-tabs ul.tabs li.active { background: var(--ink); } .woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--white); } .woocommerce .woocommerce-tabs .panel { max-width: 76ch; margin: 0; font-size: 1.0625rem; } .woocommerce .woocommerce-tabs .panel h2, .woocommerce .woocommerce-tabs .panel h3 { margin: 1.5em 0 .5em; font-weight: 800; } .woocommerce table.shop_attributes { border: 0; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); font-style: normal; } .related > h2, .up-sells > h2 { margin-bottom: 1.5rem; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; } /* WooCommerce: basket, checkout, account ========================================================================== */ .shop-page { max-width: 100%; } .woocommerce table.shop_table { border: 1.5px solid var(--ink); border-collapse: collapse; margin-bottom: 2rem; } .woocommerce table.shop_table th { padding: .875rem 1rem; background: var(--ink); color: var(--white); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--line); } .woocommerce table.shop_table td.product-name a { font-weight: 800; text-decoration: none; } .woocommerce table.shop_table td.product-thumbnail img { width: 88px; } .woocommerce table.cart td.actions { background: var(--well); } .woocommerce table.cart td.actions .coupon .input-text { width: 12rem; padding: .625rem .75rem; } .woocommerce a.remove { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--ink) !important; border: 1.5px solid var(--ink); font-weight: 500; } .woocommerce a.remove:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white) !important; } .woocommerce td.product-name dl.variation, .woocommerce .wc-item-meta { display: grid; grid-template-columns: auto 1fr; gap: .125rem .75rem; margin: .5rem 0 0; padding: 0; font-size: .8125rem; list-style: none; } .woocommerce td.product-name dl.variation dt, .woocommerce .wc-item-meta .wc-item-meta-label { float: none; margin: 0; font-weight: 600; color: var(--muted); } .woocommerce td.product-name dl.variation dd, .woocommerce .wc-item-meta p { float: none; margin: 0; } .woocommerce .wc-item-meta li { display: contents; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { padding: 1.5rem; background: var(--well); } .woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.375rem; font-weight: 900; text-transform: uppercase; } .woocommerce .cart-collaterals .cart_totals table.shop_table { background: var(--white); } .woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; padding: 1.125rem; font-size: 1.0625rem; } .woocommerce-checkout h3, #order_review_heading { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 900; text-transform: uppercase; } .woocommerce form.checkout .col2-set { margin-bottom: 2rem; } .woocommerce-checkout #payment, .woocommerce #payment { background: var(--well) !important; } .woocommerce-checkout #payment div.payment_box { background: var(--white) !important; color: var(--ink) !important; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce #payment #place_order { width: 100%; padding: 1.125rem; font-size: 1.0625rem; } .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .woocommerce-account .woocommerce > * { grid-column: 1 / -1; } .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; position: sticky; top: calc(var(--header-h) + 24px); } .woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1.5px solid var(--ink); } .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--line); } .woocommerce-MyAccount-navigation a { display: block; padding: .75rem 1rem; font-weight: 700; font-size: .9375rem; text-decoration: none; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: var(--white); box-shadow: inset 6px 0 0 var(--yellow); } .woocommerce-MyAccount-navigation a:hover { background: var(--well); color: var(--ink); } .account-hello { margin: 0 0 1.5rem; font-size: 1.5rem; } .account-hello__company { display: inline-block; margin-left: .5rem; padding: .125rem .5rem; background: var(--yellow); font-size: .875rem; font-weight: 700; vertical-align: middle; } .woocommerce-account:not(.logged-in) .woocommerce { display: block; } .woocommerce .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); } .woocommerce .u-columns.col2-set::before, .woocommerce .u-columns.col2-set::after { display: none; } .woocommerce .u-columns.col2-set .u-column1, .woocommerce .u-columns.col2-set .u-column2 { float: none; width: auto; padding: clamp(24px, 3vw, 40px); background: var(--well); } .woocommerce .u-columns.col2-set h2 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; } .woocommerce form.login, .woocommerce form.register { margin: 0; padding: 0; border: 0; } /* Footer ========================================================================== */ .site-footer { position: relative; overflow: hidden; background: var(--ink); color: rgba(255, 255, 255, .78); font-size: .9375rem; } .site-footer a { color: var(--white); text-decoration: none; } .site-footer a:hover { color: var(--yellow); } /* Print control strip: each ink at 100/75/50/25%, with registration marks */ .control-strip { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 2px; overflow: hidden; background: var(--white); } .control-strip i { flex: 1 0 18px; height: 14px; background: var(--patch); } .control-strip__reg { display: grid; place-items: center; flex: 0 0 26px; color: var(--ink); } .control-strip__reg .icon { width: 16px; height: 16px; } .control-strip--slim { height: 12px; gap: 1px; padding: 0 1px; background: #ffffff; } .control-strip--slim i { flex-basis: 12px; height: 8px; } .control-strip--slim .control-strip__reg { flex-basis: 16px; } .control-strip--slim .control-strip__reg .icon { width: 10px; height: 10px; } .site-footer__cta { position: relative; padding: clamp(56px, 8vw, 104px) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .site-footer__ring { position: absolute; right: -6%; top: 50%; width: min(560px, 55vw); translate: 0 -50%; opacity: .16; animation: spin 160s linear infinite; pointer-events: none; } .site-footer__cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; } .site-footer__headline { margin: .75rem 0 0; color: var(--white); font-size: clamp(2.5rem, 6.5vw, 5.5rem); font-weight: 900; line-height: .92; letter-spacing: -.03em; text-transform: uppercase; } .site-footer__headline span { color: var(--yellow); } .site-footer__cta-side { display: grid; justify-items: start; gap: .5rem; } .site-footer__cta-label { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .site-footer .site-footer__phone { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--yellow); } .site-footer .site-footer__phone:hover { color: var(--white); } .site-footer__cta-side .button-row { margin-top: 1rem; } .joke { position: relative; display: grid; gap: .375rem; max-width: 420px; margin-top: 1.5rem; padding: 1rem 1.125rem; border: 1.5px dashed rgba(255, 255, 255, .35); } .joke__label { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); } .joke__text { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--white); transition: opacity .25s; } .joke__text.is-swapping { opacity: 0; } .joke__more { justify-self: start; margin-top: .25rem; padding: 0; border: 0; background: none; color: var(--yellow); font: inherit; font-size: .8125rem; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .joke__more:hover { color: var(--white); } .site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(40px, 5vw, 56px); } .site-footer__logo { position: relative; display: block; width: 104px; height: 101px; margin-bottom: 1.25rem; } .site-footer__logo img { position: absolute; inset: 0; width: 100%; height: 100%; } .site-footer__logo-ring { animation: spin 50s linear infinite; } .site-footer__brand p { max-width: 36ch; } .site-footer__title { margin: 0 0 1.125rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); } .site-footer__links { margin: 0; padding: 0; list-style: none; } .site-footer__links li { margin-bottom: .625rem; } .site-footer__links a { position: relative; display: inline-block; transition: transform .25s var(--ease), color .2s; } .site-footer__links a::before { content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--cyan); opacity: 0; transform: scale(0); transition: opacity .2s, transform .25s var(--ease); } .site-footer__links li:nth-child(3n+2) a::before { background: var(--magenta); } .site-footer__links li:nth-child(3n) a::before { background: var(--yellow); } .site-footer__links a:hover { transform: translateX(16px); } .site-footer__links a:hover::before { opacity: 1; transform: none; } .site-footer__social { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; } .site-footer__line { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: .75rem; } .site-footer__line .icon { margin-top: .15em; color: var(--yellow); } .site-footer__directions { display: inline-flex; align-items: center; gap: .5rem; margin-top: .375rem; padding-bottom: 2px; border-bottom: 2px solid var(--yellow); font-weight: 800; } .site-footer__directions .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); } .site-footer__directions:hover .icon { transform: translateX(4px); } .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; } .site-footer__base p { margin: 0; } .site-footer__sister { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; } .site-footer__sister img { width: 36px; height: 36px; } .site-footer__legal { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; } /* The wordmark comes into register: three ink layers slide together into white */ .footer-mark { position: relative; height: .74em; margin-top: 1rem; overflow: hidden; font-size: clamp(64px, 15.5vw, 260px); font-weight: 900; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; text-align: center; white-space: nowrap; user-select: none; } .js .footer-mark.reveal { opacity: 1; transform: none; } .footer-mark__ink { position: absolute; left: 0; right: 0; top: 0; mix-blend-mode: screen; transition: transform 1.6s var(--ease); } .footer-mark__ink--c { color: var(--cyan); transform: translate(-.05em, -.02em); } .footer-mark__ink--m { color: var(--magenta); transform: translate(.05em, .03em); } .footer-mark__ink--y { color: var(--yellow); transform: translate(.02em, -.04em); } .footer-mark.is-visible .footer-mark__ink { transform: none; transition-delay: .2s; } /* Scroll reveal (only when JS runs) ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .product-card.reveal.is-visible .product-card__link { transition-delay: 0s; } /* Responsive ========================================================================== */ @media (max-width: 1280px) and (min-width: 1081px) { .site-nav__list > .site-nav__item > .site-nav__link { padding-left: .625rem; padding-right: .625rem; letter-spacing: .03em; } .site-nav__list > .site-nav__item > .site-nav__link::after { left: .625rem; right: .625rem; } .site-nav__list { margin-left: -.625rem; } .site-logo__tag { display: none; } } @media (max-width: 1080px) { .nav-toggle { display: grid; } .site-tools__link span:not(.site-tools__count) { display: none; } .site-nav__list { margin-left: 0; } .site-logo__mark { width: 72px; height: 70px; } .site-logo__tag { display: none; } .site-header.is-stuck .site-logo__mark { width: 52px; height: 50px; } .topbar__ticker { display: none; } .site-nav { color: var(--ink); } .site-nav__list > .site-nav__item > .site-nav__link, .site-nav__open { color: var(--ink); } .site-nav { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 55; overflow-y: auto; background: var(--white); border-top: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; } .nav-open .site-nav { transform: none; visibility: visible; } .nav-open { overflow: hidden; } .site-nav > .container { flex-direction: column; align-items: stretch; padding-top: 1rem; padding-bottom: 2rem; } .site-nav__list { flex-direction: column; flex-wrap: nowrap; } .site-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); } .site-nav__list > .site-nav__item > .site-nav__link, .site-nav__list > .site-nav__item:first-child > .site-nav__link { flex: 1; padding: 1rem 0; font-size: 1.125rem; } .site-nav__list > .site-nav__item > .site-nav__link::after { display: none; } .site-nav__open { width: 3rem; height: 3rem; margin: 0; } .site-nav__panel { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 1rem; border: 0; box-shadow: none !important; opacity: 1; visibility: visible; transform: none; display: none; } .site-nav__item.is-open > .site-nav__panel { display: block; } .site-nav__design { justify-content: center; margin-top: 1.5rem; padding: 1rem; } .hero__inner, .oos__inner, .business__inner, .visit__inner, .site-footer__cta-inner, .contact, .faq__inner { grid-template-columns: 1fr; } .faq__head { position: static; } .gallery__wall { grid-template-columns: 1fr 1fr; } .gallery__piece--3 { display: none; } .site-header { top: 0; } .site-nav__end { flex-direction: column; align-items: stretch; } .hero__art { max-width: 520px; } .quote-card__row { grid-template-columns: 1fr 1fr; } .quote-card__go { grid-column: 1 / -1; } ul.products, .woocommerce ul.products, .woocommerce-page ul.products, ul.products--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__grid { grid-template-columns: 1fr 1fr; } .woocommerce div.product, .ep-print-product.woocommerce div.product { grid-template-columns: 1fr; } .woocommerce div.product div.images.woocommerce-product-gallery { position: relative; top: 0; } .woocommerce div.product div.summary { grid-column: 1; } } @media (max-width: 720px) { .topbar__email { display: none !important; } .topbar__inner { justify-content: center; flex-wrap: wrap; padding-top: .375rem; padding-bottom: .375rem; gap: .25rem 1rem; } .site-header__main { flex-wrap: wrap; gap: 12px; } .site-logo__tag { display: none; } .site-tools { margin-left: auto; } .site-search { order: 3; flex-basis: 100%; max-width: none; } .site-header.is-stuck .site-search { display: none; } .section-head { flex-direction: column; align-items: flex-start; } ul.products, .woocommerce ul.products, .woocommerce-page ul.products, ul.products--four { grid-template-columns: 1fr; } .product-card__body { padding: 1rem 1.125rem 1.125rem; } .art__grid { grid-template-columns: 1fr; grid-template-rows: none; } .art-tile--1 { grid-row: auto; min-height: 380px; } .business__features, .business__tiers, .how__steps, .gallery__wall { grid-template-columns: 1fr; } .tier--2, .tier--3 { padding-top: 1.5rem; } .how__track { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 14px, transparent 14px 22px); } .how__sheet { left: -20px; animation-name: travel-down; } @keyframes travel-down { from { top: -40px; } to { top: 100%; } } /* Phones: the card tucks under the map's bottom edge and the buttons follow it, so nothing overlaps */ .visit__stage { padding-bottom: 0; } .bizcard { position: relative; left: 2%; display: block; width: 78%; margin-top: -18%; } .visit__actions { position: static; flex-wrap: wrap; margin-top: 1.75rem; } .oos__designs { grid-template-columns: 1fr 1fr; } .oos.is-open .booklet { transform: translateX(calc(var(--w) / 2)) scale(.92); } .booklet { --w: 42vw; } .oos__stage { min-height: 0; padding: 1.5rem 0 2.5rem; } .hero__proof { grid-template-columns: 1fr 1fr; } .site-footer__grid { grid-template-columns: 1fr; } .woocommerce-account .woocommerce, .woocommerce .u-columns.col2-set { grid-template-columns: 1fr; } .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; position: static; } .woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td { padding: .75rem 1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } .hero__product { animation: none; } } /* About page (template-parts/about/*, built into blocks by bin/build-about-page.php) ========================================================================== */ /* Hero: a Bude photo as a print sitting in the ink ring, with an "Est. 1983" stamp (corners stay square, like everything) */ .about-hero .hero__stage .hero__art { aspect-ratio: 1; } .about-hero .hero__stage .hero__ring { inset: 4%; width: 92%; } .about-hero__photo { position: absolute; left: 50%; top: 50%; width: 54%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; translate: -50% -50%; rotate: -3deg; box-shadow: 0 0 0 10px var(--white), 0 0 0 12px var(--ink), 14px 14px 0 12px var(--cyan), 0 30px 50px 12px rgba(35, 31, 32, .25); animation: print-in .9s .3s var(--ease) both; } @keyframes print-in { from { opacity: 0; translate: -50% -42%; rotate: -10deg; } } .about-hero__stamp { position: absolute; right: 5%; bottom: 9%; z-index: 2; display: grid; place-content: center; width: clamp(92px, 11vw, 128px); aspect-ratio: 1; margin: 0; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--magenta); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 900; line-height: .95; text-align: center; rotate: -12deg; animation: stamp .6s 1s var(--ease) both; } .about-hero__stamp span { display: block; font-size: .45em; letter-spacing: .16em; text-transform: uppercase; } @keyframes stamp { from { opacity: 0; scale: 1.6; rotate: -30deg; } } /* Our story: a vertical timeline drawn as the trim line of a press sheet. Ink runs down it as the page scrolls; each stop is "printed" (inked marker, card slides in) when the ink reaches it. */ .vtimeline { --x: 50%; --dot: clamp(76px, 7vw, 96px); position: relative; padding-block: 8px; } .vtimeline::before { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; width: 2px; translate: -50% 0; background: repeating-linear-gradient(180deg, var(--ink) 0 10px, transparent 10px 16px); opacity: .35; } .vtimeline__ink { position: absolute; left: var(--x); top: 0; width: 8px; height: var(--ink-h, 100%); translate: -50% 0; background: linear-gradient(180deg, var(--cyan), var(--magenta) 50%, var(--yellow)); } .vtimeline__list { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; } .vtimeline__item { --c: var(--ink); --t: var(--yellow); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--dot) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); align-items: center; } .vtimeline__item--c { --c: var(--cyan); --t: var(--white); } .vtimeline__item--m { --c: var(--magenta); --t: var(--white); } .vtimeline__item--y { --c: var(--yellow); --t: var(--ink); } .vtimeline__dot { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: grid; place-content: center; justify-items: center; gap: .2rem; width: var(--dot); aspect-ratio: 1; border: 2px solid var(--ink); background: var(--c); color: var(--t); box-shadow: 5px 5px 0 var(--ink); font: 900 clamp(1.05rem, 1.6vw, 1.35rem)/1 var(--font); letter-spacing: -.01em; transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease); } .vtimeline__dot small { font-size: .5em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .vtimeline__item--next .vtimeline__dot { border-style: dashed; } .vtimeline__card { --pad: clamp(22px, 3vw, 36px); position: relative; grid-column: 3; grid-row: 1; overflow: hidden; padding: var(--pad); border: 2px solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 var(--c); transition: opacity .6s var(--ease), transform .6s var(--ease); } .vtimeline__item:nth-child(even) .vtimeline__card { grid-column: 1; } .vtimeline__card::before { content: attr(data-year); position: absolute; right: -.06em; bottom: -.22em; z-index: 0; font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none; } .vtimeline__card > * { position: relative; z-index: 1; } .vtimeline__media { display: block; width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; aspect-ratio: 16 / 9; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); object-fit: cover; border-bottom: 2px solid var(--ink); background: var(--well); } .vtimeline__date { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .vtimeline__card h3 { margin: .375rem 0 .625rem; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; } .vtimeline__card p:last-child { max-width: 52ch; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); } /* With JavaScript: un-inked until the ink reaches each stop */ .js .vtimeline__item:not(.is-inked) .vtimeline__dot { background: var(--paper); color: var(--ink); box-shadow: none; transform: scale(.88); } .js .vtimeline__item:not(.is-inked) .vtimeline__card { opacity: 0; transform: translateX(36px) rotate(1.5deg); } .js .vtimeline__item:nth-child(even):not(.is-inked) .vtimeline__card { transform: translateX(-36px) rotate(-1.5deg); } /* Home: our story in five stops; the ink runs across once the line scrolls into view */ .mini-story__line { --dot: clamp(68px, 6vw, 84px); position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; } .mini-story__line::before, .mini-story__line::after { content: ""; position: absolute; left: 0; top: calc(var(--dot) / 2); translate: 0 -50%; } .mini-story__line::before { right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px); opacity: .35; } .mini-story__line::after { width: 100%; height: 8px; background: linear-gradient(90deg, var(--cyan), var(--magenta) 50%, var(--yellow)); transform-origin: left; transition: transform 1.6s var(--ease); } .mini-story__stop { --c: var(--ink); --t: var(--yellow); position: relative; z-index: 1; display: grid; align-content: start; justify-items: start; gap: 1rem; } .mini-story__stop--c { --c: var(--cyan); --t: var(--white); } .mini-story__stop--m { --c: var(--magenta); --t: var(--white); } .mini-story__stop--y { --c: var(--yellow); --t: var(--ink); } .mini-story__dot { display: grid; place-content: center; justify-items: center; gap: .2rem; width: var(--dot); aspect-ratio: 1; border: 2px solid var(--ink); background: var(--c); color: var(--t); box-shadow: 4px 4px 0 var(--ink); font: 900 clamp(1rem, 1.4vw, 1.2rem)/1 var(--font); transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease); } .mini-story__dot small { font-size: .5em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .mini-story__stop p { max-width: 24ch; margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); } .mini-story__stop strong { display: block; margin-bottom: .25rem; font-size: 1rem; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); } .js .mini-story__line:not(.is-visible)::after { transform: scaleX(0); } .js .mini-story__line:not(.is-visible) .mini-story__dot { background: var(--paper); color: var(--ink); box-shadow: none; transform: scale(.9); } .mini-story__stop:nth-child(2) .mini-story__dot { transition-delay: .3s; } .mini-story__stop:nth-child(3) .mini-story__dot { transition-delay: .6s; } .mini-story__stop:nth-child(4) .mini-story__dot { transition-delay: .9s; } .mini-story__stop:nth-child(5) .mini-story__dot { transition-delay: 1.2s; } @media (max-width: 1080px) { .about-hero .hero__stage { max-width: 480px; } } @media (max-width: 720px) { /* Home story: a short list with the line down the left */ .mini-story__line { grid-template-columns: 1fr; --dot: 60px; } .mini-story__line::before, .mini-story__line::after { left: calc(var(--dot) / 2); top: 0; bottom: 0; translate: -50% 0; } .mini-story__line::before { right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 10px, transparent 10px 16px); } .mini-story__line::after { width: 8px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--cyan), var(--magenta) 50%, var(--yellow)); } .js .mini-story__line:not(.is-visible)::after { transform: scaleY(0); } .mini-story__stop { grid-template-columns: var(--dot) minmax(0, 1fr); align-items: center; column-gap: 14px; } .mini-story__stop p { max-width: none; } /* Phones: the line runs down the left, every card on the right */ .vtimeline { --x: 31px; --dot: 62px; } .vtimeline__item { grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 14px; align-items: start; } .vtimeline__dot { grid-column: 1; font-size: .9375rem; box-shadow: 3px 3px 0 var(--ink); } .vtimeline__card, .vtimeline__item:nth-child(even) .vtimeline__card { grid-column: 2; box-shadow: 6px 6px 0 var(--c); } .js .vtimeline__item:nth-child(even):not(.is-inked) .vtimeline__card { transform: translateX(36px) rotate(1.5deg); } .about-hero__stamp { right: 1%; bottom: 4%; } } @media (prefers-reduced-motion: reduce) { .about-hero__photo, .about-hero__stamp { animation: none; } }