/* ==========================================================================
ACID TEARS — custom overrides
Loaded AFTER the Webflow stylesheets on every page.
Keep hand-written changes in here so a Webflow re-export never wipes them.
Breakpoints used throughout:
> 1024px laptop / desktop
<= 1024px iPad landscape, small laptops
<= 900px iPad portrait
<= 600px large phones
<= 479px Webflow's own mobile layout takes over for shared sections
========================================================================== */
/* --------------------------------------------------------------------------
1. NAVBAR — links pushed to the right edge of the bar
.div-block-120 = index.html bar, .div-block-32 = every other page.
The Webflow export put the link container in an absolutely positioned
.w-container, which parked the links near the middle of the bar.
-------------------------------------------------------------------------- */
.div-block-32,
.div-block-120 {
justify-content: space-between;
padding-right: 24px;
}
.container-10,
.container-26 {
position: static;
width: auto;
max-width: none;
margin-left: auto;
margin-right: 0;
}
.container-9,
.container-25 {
margin-right: 0;
}
.div-block-33,
.div-block-121 {
justify-content: flex-end;
margin-right: 0;
}
/* Below ~990px the bar still has to carry the wordmark plus up to four links,
so both ends step down rather than colliding. */
@media screen and (max-width: 991px) {
.div-block-32,
.div-block-120 {
padding-right: 16px;
}
.container-9,
.container-25 {
margin-left: 16px;
}
.div-block-32 .link,
.div-block-120 .link-6 {
font-size: 20px;
}
.div-block-33,
.div-block-121 {
grid-column-gap: 18px;
}
.div-block-33 a,
.div-block-121 a {
font-size: 13px;
white-space: nowrap;
}
}
/* The tears are inlined as data URIs on purpose: a mask that points at a
separate .svg file is blocked by Chrome and Safari when the page is opened
straight from disk (file://), so the marks silently vanish in local preview.
Inlined, they render everywhere — local file, server, anywhere. */
/* --------------------------------------------------------------------------
The tears, used as the accent mark. Painted as a CSS mask so the colour
comes from background-color — one file serves every context.
-------------------------------------------------------------------------- */
.at-tears,
.at-tear {
display: inline-block;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* pair — 1.83 : 1 */
.at-tears {
width: 18px;
height: 10px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E");
}
/* single — 0.89 : 1 */
.at-tear {
width: 10px;
height: 11px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E");
}
/* ==========================================================================
2. RESPONSIVE REPAIR — the 480-991px band
The export only defines a real layout at 991px and 479px, so between those
the desktop grids stayed at full width and ran off the right edge. These
rules give the shared sections somewhere to go on iPad and small laptops.
========================================================================== */
/* --- footer, on every page ------------------------------------------------ */
@media screen and (max-width: 1024px) {
.grid-10 {
grid-template-areas: "Area Area-3 Area-4 Area-5";
grid-template-columns: 1.4fr 1fr 1fr 1fr;
padding: 40px 24px 32px;
}
.grid-10 > *:nth-child(2) {
display: none;
}
}
@media screen and (max-width: 900px) {
.grid-10 {
grid-column-gap: 24px;
grid-row-gap: 32px;
grid-template-areas: "Area Area"
"Area-3 Area-4"
"Area-5 Area-5";
grid-template-columns: 1fr 1fr;
padding: 32px 20px 28px;
}
}
@media screen and (max-width: 600px) {
.grid-10 {
grid-template-areas: "Area"
"Area-3"
"Area-4"
"Area-5";
grid-template-columns: 1fr;
grid-row-gap: 24px;
padding: 28px 16px 24px;
}
}
/* --- index: the product block -------------------------------------------- */
@media screen and (max-width: 1024px) {
.div-block-28 {
max-width: none;
margin-left: 24px;
margin-right: 24px;
}
}
@media screen and (max-width: 900px) {
.section-10.copy {
height: auto;
min-height: 0;
padding: 40px 20px 56px;
}
.grid-9.copy {
grid-row-gap: 40px;
grid-template-rows: auto;
grid-template-columns: 1fr;
min-height: 0;
place-items: center stretch;
}
.div-block-25 {
height: auto;
}
.div-block-28 {
margin: 0;
}
.image-23,
.image-24 {
margin-left: auto;
margin-right: auto;
}
.text-block-26 {
font-size: 22px;
margin-bottom: 20px;
}
}
/* --- index: the full screen header --------------------------------------- */
@media screen and (max-width: 900px) {
.overlay {
width: 62%;
max-width: 400px;
}
.div-block-119 {
padding-bottom: 40px;
padding-right: 40px;
}
}
/* ==========================================================================
3. ABOUT PAGE
The artwork is painted once and pinned; the story lives in its own scroll
window so the page itself stays a single screen, and the contact details
have a panel instead of floating loose over the background.
========================================================================== */
body.body-11 {
background-image: none;
background-color: #272727;
}
body.body-11::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url('../images/BAnnessr.avif');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.at-about {
--ab-panel: rgba(20, 20, 20, .74);
--ab-line: rgba(255, 255, 255, .22);
--ab-dim: rgba(255, 255, 255, .62);
--ab-sans: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
--ab-display: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
position: relative;
z-index: 1;
padding: 56px 40px 72px;
}
.at-about-inner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.at-about-story,
.at-about-contact {
background: var(--ab-panel);
border: 1px solid var(--ab-line);
padding: 32px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.at-about-title {
font-family: var(--ab-display);
font-size: clamp(34px, 4vw, 56px);
line-height: 1;
letter-spacing: -1px;
text-transform: uppercase;
color: #fff;
margin: 0 0 12px;
}
.at-about-standfirst {
font-family: var(--ab-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ab-dim);
margin: 0 0 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--ab-line);
}
/* the scroll window */
.at-about-scroll {
max-height: 52vh;
overflow-y: auto;
padding-right: 20px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .45) transparent;
/* fade the last line so it reads as "there is more" */
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.at-about-scroll:focus-visible {
outline: 2px solid #fff;
outline-offset: 6px;
}
.at-about-scroll::-webkit-scrollbar {
width: 4px;
}
.at-about-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .1);
}
.at-about-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .45);
}
.at-about-scroll p {
font-family: var(--ab-sans);
font-size: clamp(15px, 1.35vw, 17px);
line-height: 1.62;
color: #fff;
margin: 0 0 18px;
}
.at-about-scroll p:last-child {
margin-bottom: 28px;
}
/* contact panel */
.at-about-head {
font-family: var(--ab-sans);
font-size: 10px;
line-height: 14px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ab-dim);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ab-line);
}
.at-about-head + * {
margin-top: 0;
}
.at-about-contact > .at-about-head ~ .at-about-head {
margin-top: 28px;
}
.at-about-email {
display: inline-block;
font-family: var(--ab-sans);
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.3;
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
word-break: break-word;
margin: 0;
}
.at-about-email:hover {
color: #ff2121;
}
.at-about-addr {
font-family: var(--ab-sans);
font-size: 14px;
line-height: 1.6;
color: #fff;
margin: 0;
}
.at-about-links {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.at-about-links a {
font-family: var(--ab-sans);
font-size: 14px;
line-height: 1.4;
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
}
.at-about-links a:hover {
color: #ff2121;
}
@media screen and (max-width: 1024px) {
.at-about {
padding: 40px 24px 56px;
}
.at-about-story,
.at-about-contact {
padding: 24px;
}
}
@media screen and (max-width: 900px) {
.at-about-inner {
grid-template-columns: 1fr;
gap: 20px;
}
.at-about-scroll {
max-height: 46vh;
}
}
@media screen and (max-width: 600px) {
.at-about {
padding: 28px 14px 40px;
}
.at-about-story,
.at-about-contact {
padding: 20px 18px;
}
.at-about-scroll {
max-height: 52vh;
padding-right: 14px;
}
}
/* ==========================================================================
4. FUCK NUKES — page built after the FKNK / DROP 01 email,
same palette as the email. Scoped to .fknk-page so none of it leaks into
the rest of the site.
========================================================================== */
.fknk-page {
/* palette of the FKNK / DROP 01 email */
--fk-main: #1a1a1a;
--fk-second: #f4f2ec;
--fk-accent: #ffee00;
--fk-muted: #5a564e;
--fk-rule: #c9c5ba;
--fk-sans: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
--fk-display: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
/* the email's field is the yellow, with the card sitting on top of it */
background-color: var(--fk-accent);
background-image: none;
}
/* Swirl artwork behind the whole page, pinned, dialled back so the card
stays the loud thing on screen. */
.fknk-page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url('../images/lookbook/waves.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
opacity: .12;
pointer-events: none;
}
.fknk-page .fk-shell {
padding: 56px 24px 64px;
}
.fknk-page .fk-card {
width: 100%;
max-width: 1080px;
margin: 0 auto;
background: var(--fk-second);
border: 1px solid var(--fk-main);
}
.fknk-page .fk-card + .fk-card {
margin-top: 40px;
}
/* --- meta strip: AT / EST 2022 · FKNK / DROP 01 / 2026 + shop button ------ */
.fknk-page .fk-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 12px 12px 12px 24px;
background: var(--fk-accent);
border-bottom: 1px solid var(--fk-main);
}
.fknk-page .fk-meta-line {
font-family: var(--fk-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fk-main);
}
.fknk-page .fk-meta-shop {
flex: 0 0 auto;
display: block;
padding: 10px 18px 9px;
background: var(--fk-main);
border: 2px solid var(--fk-main);
font-family: var(--fk-sans);
font-size: 11px;
line-height: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--fk-accent);
transition: background-color .15s ease, color .15s ease;
}
.fknk-page .fk-meta-shop:hover {
background: var(--fk-accent);
color: var(--fk-main);
}
/* --- hero ---------------------------------------------------------------- */
.fknk-page .fk-hero {
padding: 72px 24px 56px;
text-align: center;
}
.fknk-page .fk-eyebrow {
font-family: var(--fk-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fk-main);
margin: 0 0 22px;
}
.fknk-page .fk-hero-title {
font-family: var(--fk-display);
font-size: clamp(48px, 11vw, 132px);
line-height: .92;
letter-spacing: -2px;
text-transform: uppercase;
color: var(--fk-main);
margin: 0;
}
.fknk-page .fk-hero-sub {
font-family: var(--fk-sans);
font-size: 12px;
line-height: 18px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fk-main);
margin: 26px 0 0;
}
/* --- product: shop layout, gallery left / details right ------------------ */
.fknk-page .fk-product {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px;
padding: 0 20px 36px;
align-items: start;
}
/* main image, then a row of thumbnails underneath */
.fknk-page .fk-gallery-main {
position: relative;
/* bone, not white: the tee is white and had nothing to separate against */
background: var(--fk-second);
border: 1px solid var(--fk-main);
aspect-ratio: 1 / 1;
overflow: hidden;
}
.fknk-page .fk-gallery-main img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease;
}
.fknk-page .fk-gallery-main img.is-active {
opacity: 1;
visibility: visible;
}
.fknk-page .fk-thumbs {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-top: 8px;
}
.fknk-page .fk-thumb {
padding: 0;
background: var(--fk-second);
border: 1px solid var(--fk-rule);
aspect-ratio: 1 / 1;
cursor: pointer;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
transition: border-color .15s ease;
}
.fknk-page .fk-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.fknk-page .fk-thumb:hover {
border-color: var(--fk-main);
}
.fknk-page .fk-thumb.is-active {
border-color: var(--fk-main);
box-shadow: inset 0 0 0 1px var(--fk-main);
}
/* details column */
.fknk-page .fk-details {
font-family: var(--fk-sans);
color: var(--fk-main);
}
.fknk-page .fk-details-name {
font-family: var(--fk-display);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.1;
letter-spacing: -.5px;
text-transform: uppercase;
margin: 0 0 6px;
}
.fknk-page .fk-details-sub {
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fk-muted);
margin: 0 0 18px;
}
.fknk-page .fk-price {
font-family: var(--fk-display);
font-size: clamp(26px, 3vw, 36px);
line-height: 1;
letter-spacing: -.5px;
color: var(--fk-main);
margin: 0 0 4px;
}
.fknk-page .fk-price-note {
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fk-muted);
margin: 0 0 24px;
}
.fknk-page .fk-buy {
display: block;
width: 100%;
padding: 16px 20px;
background: var(--fk-main);
border: 2px solid var(--fk-main);
text-align: center;
font-family: var(--fk-sans);
font-size: 13px;
line-height: 16px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: var(--fk-accent);
transition: background-color .15s ease, color .15s ease;
}
.fknk-page .fk-buy:hover {
background: var(--fk-accent);
color: var(--fk-main);
}
.fknk-page .fk-detail-head {
font-size: 11px;
line-height: 16px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fk-main);
margin: 28px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--fk-main);
}
/* measurements straight off the techpack */
.fknk-page .fk-measure {
width: 100%;
border-collapse: collapse;
font-size: 11px;
line-height: 16px;
letter-spacing: .5px;
text-transform: uppercase;
}
.fknk-page .fk-measure th,
.fknk-page .fk-measure td {
padding: 8px 0;
border-bottom: 1px solid var(--fk-rule);
font-weight: 400;
text-align: right;
color: var(--fk-main);
}
.fknk-page .fk-measure thead th {
color: var(--fk-muted);
border-bottom-color: var(--fk-main);
}
.fknk-page .fk-measure th:first-child,
.fknk-page .fk-measure td:first-child {
text-align: left;
color: var(--fk-muted);
}
.fknk-page .fk-measure tbody tr:last-child th,
.fknk-page .fk-measure tbody tr:last-child td {
border-bottom: 0;
}
/* sits under the thumbnails, in the same voice as the measurements note
further down the column */
.fknk-page .fk-model-note {
font-family: var(--fk-sans);
font-size: 10px;
line-height: 15px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fk-muted);
margin: 12px 0 0;
}
.fknk-page .fk-measure-note {
font-size: 10px;
line-height: 15px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fk-muted);
margin: 10px 0 0;
}
/* --- 360 spin, rendered from the Blender model ---------------------------- */
.fknk-page .fk-spin {
position: absolute;
inset: 0;
background: var(--fk-second);
cursor: grab;
touch-action: pan-y;
user-select: none;
}
.fknk-page .fk-spin.is-grabbing {
cursor: grabbing;
}
.fknk-page .fk-spin:focus-visible {
outline: 2px solid var(--fk-main);
outline-offset: -2px;
}
.fknk-page .fk-spin[hidden] {
display: none;
}
.fknk-page .fk-spin-frames {
position: absolute;
inset: 0;
}
/* one canvas, drawn into on every frame — stacked ![]()
layers flickered
because the browser re-rasterised each one on show */
.fknk-page .fk-spin-frames .fk-spin-canvas {
display: block;
width: 100%;
height: 100%;
}
.fknk-page .fk-spin-hint {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
padding: 6px 12px 5px;
background: var(--fk-main);
font-family: var(--fk-sans);
font-size: 10px;
line-height: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fk-accent);
pointer-events: none;
transition: opacity .3s ease;
}
.fknk-page .fk-spin-hint.is-gone {
opacity: 0;
}
/* the 360 thumbnail wears a badge so it reads as different */
.fknk-page .fk-thumb-360 {
position: relative;
}
.fknk-page .fk-360-badge {
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
padding: 2px 6px 1px;
background: var(--fk-main);
font-family: var(--fk-sans);
font-size: 8px;
line-height: 11px;
font-weight: 700;
letter-spacing: .8px;
color: var(--fk-accent);
pointer-events: none;
}
/* --- manifesto ----------------------------------------------------------- */
.fknk-page .fk-copy {
padding: 0 20px 36px;
max-width: 760px;
}
.fknk-page .fk-copy p {
margin: 0 0 18px;
font-family: var(--fk-sans);
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
color: var(--fk-main);
}
.fknk-page .fk-copy p:last-child {
margin-bottom: 0;
}
.fknk-page .fk-copy strong {
font-weight: 700;
}
/* --- video panel --------------------------------------------------------- */
.fknk-page .fk-video-head {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 20px 14px;
font-family: var(--fk-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fk-main);
}
.fknk-page .fk-video-head::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 10px;
background-color: var(--fk-main);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
}
.fknk-page .fk-video {
position: relative;
margin: 0 20px 20px;
padding-top: 56.25%;
background: var(--fk-main);
border: 1px solid var(--fk-main);
}
.fknk-page .fk-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --- product layout, iPad and phone --------------------------------------- */
@media screen and (max-width: 900px) {
.fknk-page .fk-product {
grid-template-columns: 1fr;
gap: 28px;
}
.fknk-page .fk-thumbs {
grid-template-columns: repeat(7, 1fr);
}
}
@media screen and (max-width: 600px) {
/* seven tiles: 4 + 3 across two rows */
.fknk-page .fk-thumbs {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.fknk-page .fk-measure th,
.fknk-page .fk-measure td {
padding: 7px 0;
}
}
/* --- fuck nukes page, iPad and phone ------------------------------------- */
@media screen and (max-width: 1024px) {
.fknk-page .fk-shell {
padding: 40px 20px 48px;
}
.fknk-page .fk-hero {
padding: 56px 20px 44px;
}
}
@media screen and (max-width: 900px) {
.fknk-page {
/* fixed attachment is unreliable on touch devices */
background-attachment: scroll;
}
.fknk-page .fk-card + .fk-card {
margin-top: 28px;
}
}
@media screen and (max-width: 600px) {
.fknk-page .fk-shell {
padding: 24px 12px 36px;
}
.fknk-page .fk-meta {
padding: 10px 10px 10px 14px;
gap: 10px;
}
.fknk-page .fk-meta-line {
font-size: 10px;
letter-spacing: 1px;
}
.fknk-page .fk-meta-shop {
padding: 9px 12px 8px;
letter-spacing: 1px;
}
.fknk-page .fk-hero {
padding: 40px 14px 32px;
}
.fknk-page .fk-hero-sub {
font-size: 11px;
letter-spacing: 1.5px;
margin-top: 20px;
}
.fknk-page .fk-product,
.fknk-page .fk-copy {
padding-left: 14px;
padding-right: 14px;
}
.fknk-page .fk-video {
margin-left: 14px;
margin-right: 14px;
}
.fknk-page .fk-video-head {
padding: 16px 14px 10px;
}
}
/* ==========================================================================
5. LOOKBOOK — full screen slider showing the lookbook spreads whole
Replaces the old "FUCK NUKES LOOKBOOK" PDF download button.
Pages are a mix of portrait covers and landscape spreads, so every page is
contained rather than cropped.
========================================================================== */
.fk-lookbook {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
background: #1a1a1a;
overflow: hidden;
user-select: none;
}
.fk-lb-stage {
position: absolute;
inset: 64px 96px 68px;
}
.fk-lb-slide {
position: absolute;
inset: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .45s ease;
}
.fk-lb-slide.is-active {
opacity: 1;
visibility: visible;
}
.fk-lb-slide img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* header row: title left, counter right */
.fk-lb-head {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 28px;
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #ffee00;
pointer-events: none;
}
.fk-lb-head > span:first-child {
display: flex;
align-items: center;
gap: 10px;
}
/* yellow tears — the lookbook stage is ink */
.fk-lb-head > span:first-child::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 10px;
background-color: #ffee00;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
}
.fk-lb-count {
color: #f4f2ec;
font-variant-numeric: tabular-nums;
}
/* caption bottom left */
.fk-lb-caption {
position: absolute;
z-index: 3;
left: 28px;
bottom: 24px;
max-width: 40%;
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #a8a49a;
pointer-events: none;
}
/* prev / next */
.fk-lb-nav {
position: absolute;
z-index: 4;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 1px solid #ffee00;
border-radius: 50%;
color: #ffee00;
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
-webkit-appearance: none;
appearance: none;
}
.fk-lb-nav:hover {
background: #ffee00;
color: #1a1a1a;
}
.fk-lb-prev { left: 24px; }
.fk-lb-next { right: 24px; }
/* dots */
.fk-lb-dots {
position: absolute;
z-index: 4;
right: 28px;
bottom: 24px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
max-width: 50%;
}
.fk-lb-dot {
width: 10px;
height: 11px;
padding: 0;
border: 0;
background-color: rgba(244, 242, 236, .45);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
cursor: pointer;
transition: background-color .15s ease, transform .15s ease;
-webkit-appearance: none;
appearance: none;
}
.fk-lb-dot:hover {
background-color: rgba(244, 242, 236, .8);
}
.fk-lb-dot.is-active {
background-color: #ffee00;
transform: scale(1.12);
}
@media screen and (max-width: 1024px) {
.fk-lb-stage {
inset: 60px 80px 64px;
}
}
@media screen and (max-width: 900px) {
.fk-lb-stage {
inset: 56px 20px 76px;
}
/* the spread now runs close to the edges, so the arrows get a solid ground
to stay readable over artwork. Swipe is the primary gesture here. */
.fk-lb-nav {
width: 44px;
height: 44px;
font-size: 16px;
background: rgba(26, 26, 26, .82);
}
.fk-lb-prev { left: 10px; }
.fk-lb-next { right: 10px; }
.fk-lb-head {
padding: 18px 20px;
letter-spacing: 1.5px;
}
}
@media screen and (max-width: 600px) {
.fk-lb-stage {
inset: 52px 12px 72px;
}
.fk-lb-head {
padding: 16px 14px;
font-size: 10px;
letter-spacing: 1px;
}
.fk-lb-caption {
left: 14px;
bottom: 18px;
max-width: 46%;
font-size: 10px;
letter-spacing: 1px;
}
.fk-lb-dots {
right: 14px;
bottom: 18px;
max-width: 46%;
gap: 6px;
}
.fk-lb-dot {
width: 9px;
height: 10px;
}
}
/* --------------------------------------------------------------------------
Portrait tablets and phones.
The spreads are landscape, so a full screen would be mostly empty black
above and below. Here the slider becomes a band that takes the shape of
whichever page is showing (the script sets the real ratio), which means no
page sits in dead space.
These blocks must stay LAST in the file: the width-only rules above set
`inset` on the stage, and once it is position:relative that inset would
shove it down over the caption row.
-------------------------------------------------------------------------- */
@media screen and (max-width: 900px) and (orientation: portrait) {
.fk-lookbook {
height: auto;
padding: 56px 0 76px;
}
.fk-lb-stage {
position: relative;
inset: auto;
height: auto;
aspect-ratio: 16 / 10;
max-height: 66vh;
margin: 0 20px;
transition: aspect-ratio .35s ease;
}
}
@media screen and (max-width: 600px) and (orientation: portrait) {
.fk-lookbook {
padding: 52px 0 76px;
}
.fk-lb-stage {
inset: auto;
max-height: 60vh;
margin: 0 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.fk-lb-stage {
transition: none;
}
}
/* ==========================================================================
6. INDEX — FUCK NUKES call to action
A quarter-screen band. The techpack IS the background: it cross-fades
behind an ink scrim and takes no input at all — no arrows, no dots, no
swipe, pointer-events off — so the only thing to click is the button.
Palette follows the FKNK / DROP 01 email.
========================================================================== */
.at-cta {
--at-accent: #ffee00;
--at-bone: #f4f2ec;
--at-ink: #1a1a1a;
--at-sans: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
--at-display: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
position: relative;
display: block;
height: 33vh;
min-height: 240px;
max-height: 420px;
background: var(--at-ink);
border-top: 2px solid var(--at-accent);
border-bottom: 2px solid var(--at-accent);
overflow: hidden;
}
/* the techpack, running behind everything */
.at-techpack {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
}
.at-techpack img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
opacity: 0;
transition: opacity .9s ease;
}
.at-techpack img.is-active {
opacity: 1;
}
/* scrim so the copy stays readable over the sheets */
.at-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(26, 26, 26, .93) 0%, rgba(26, 26, 26, .82) 55%, rgba(26, 26, 26, .62) 100%);
pointer-events: none;
}
/* progress ticks — read-only, they mirror the sheet that is showing */
.at-techpack-ticks {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
display: flex;
gap: 2px;
}
.at-techpack-tick {
flex: 1;
height: 3px;
background: rgba(244, 242, 236, .25);
}
.at-techpack-tick.is-active {
background: var(--at-accent);
}
.at-techpack-label {
position: absolute;
z-index: 3;
right: 20px;
bottom: 18px;
padding: 4px 9px 3px;
background: var(--at-accent);
font-family: var(--at-sans);
font-size: 9px;
line-height: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--at-ink);
}
/* content sits on top, one row */
.at-cta-inner {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.at-cta-inner > div:not(.at-cta-spin) {
flex: 1 1 auto;
min-width: 0;
}
/* The shirt turning inside the CTA band — first in the row, then the copy,
then the button.
A sprite sheet stepped by a CSS animation, not a canvas redrawn every
frame. The browser hands this to the compositor and does no per-frame work,
which is the only way it runs smoothly on a page that already has a fixed
background sitting behind it. */
/* Two things have to line up or the shirt gets sliced instead of turning.
The box must be square, because the frames are square and the background
is stretched to fill whatever shape it is given. And the sheet carries 33
slots for 32 frames — the last repeats the first — so that travelling the
full width in 32 equal steps lands on a frame edge every time. With 32
slots the travel is only 31 frame-widths and every step falls a fraction
short, which is what put a hard vertical edge through the middle of it. */
.at-cta-spin {
order: -1;
flex: 0 0 auto;
align-self: center;
width: clamp(150px, 20vw, 240px);
aspect-ratio: 1 / 1;
pointer-events: none;
background-image: url('../images/spin/sprite.webp');
background-repeat: no-repeat;
background-size: 3300% 100%; /* 33 slots */
background-position: 0 50%;
animation: at-spin 9s steps(32) infinite;
}
@keyframes at-spin {
from { background-position: 0 50%; }
to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.at-cta-spin { animation: none; }
}
.at-cta-eyebrow {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--at-sans);
font-size: 10px;
line-height: 14px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--at-bone);
margin: 0 0 10px;
}
.at-cta-eyebrow::before {
content: "";
width: 20px;
height: 11px;
background-color: var(--at-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
}
.at-cta-title {
font-family: var(--at-display);
font-size: clamp(28px, 4.2vw, 56px);
line-height: .92;
letter-spacing: -1px;
text-transform: uppercase;
color: var(--at-accent);
margin: 0;
}
.at-cta-specs {
font-family: var(--at-sans);
font-size: 10px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--at-bone);
margin: 10px 0 0;
}
.at-cta-btn {
flex: 0 0 auto;
display: inline-block;
padding: 15px 28px;
background: var(--at-accent);
border: 2px solid var(--at-accent);
font-family: var(--at-sans);
font-size: 12px;
line-height: 15px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--at-ink);
transition: background-color .15s ease, color .15s ease;
}
.at-cta-btn:hover {
background: transparent;
color: var(--at-accent);
}
@media screen and (max-width: 1024px) {
.at-cta-inner {
padding: 0 24px;
gap: 24px;
}
}
@media screen and (max-width: 600px) {
.at-cta-spin {
display: none;
}
.at-cta {
height: auto;
min-height: 0;
max-height: none;
}
.at-cta-inner {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 18px;
padding: 28px 16px 34px;
}
.at-cta::before {
background: rgba(26, 26, 26, .88);
}
.at-cta-specs {
font-size: 9px;
letter-spacing: 1px;
}
.at-techpack-label {
right: 16px;
bottom: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.at-techpack img {
transition: none;
}
}
/* ==========================================================================
7. PROJECTS — a desktop, with the projects sitting in a Finder-style
window in gallery view. The dock doubles as the site navigation.
========================================================================== */
.at-desk {
--dk-accent: #ffee00;
--dk-chrome: rgba(42, 42, 45, .82);
--dk-chrome-solid: #2a2a2d;
--dk-bar: rgba(58, 58, 62, .9);
--dk-side: rgba(28, 28, 30, .66);
--dk-line: rgba(255, 255, 255, .14);
--dk-text: #fff;
--dk-dim: rgba(255, 255, 255, .55);
--dk-sans: 'Clashgrotesk Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--dk-display: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
min-height: 100vh;
min-height: 100svh;
margin: 0;
display: flex;
flex-direction: column;
background-color: #0d0f14;
background-image: url('../images/Heroatbg.avif');
background-size: cover;
background-position: 50% 45%;
background-repeat: no-repeat;
background-attachment: fixed;
overflow-x: hidden;
}
/* --- menu bar ------------------------------------------------------------ */
.dk-menubar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 28px;
padding: 0 14px;
background: rgba(20, 20, 22, .55);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
font-family: var(--dk-sans);
font-size: 12.5px;
line-height: 1;
color: #fff;
position: sticky;
top: 0;
z-index: 40;
}
.dk-menu-list {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.dk-menu-brand {
font-weight: 700;
letter-spacing: .3px;
white-space: nowrap;
}
.dk-menu-list span:not(.dk-menu-brand) {
color: rgba(255, 255, 255, .9);
white-space: nowrap;
}
.dk-menu-right {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.dk-menu-right svg {
display: block;
opacity: .9;
}
.dk-clock {
font-variant-numeric: tabular-nums;
}
/* --- desktop area -------------------------------------------------------- */
.dk-stage {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px 24px;
min-height: 0;
}
/* --- the window ---------------------------------------------------------- */
.dk-window {
width: 100%;
max-width: 1120px;
height: min(72vh, 660px);
min-height: 460px;
display: flex;
flex-direction: column;
background: var(--dk-chrome);
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 11px;
box-shadow: 0 32px 70px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .4);
overflow: hidden;
}
.dk-titlebar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 16px;
height: 46px;
padding: 0 14px;
background: var(--dk-bar);
border-bottom: 1px solid rgba(0, 0, 0, .35);
}
.dk-lights {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.dk-lights i,
.dk-lights .dk-light {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
padding: 0;
border: 0;
-webkit-appearance: none;
appearance: none;
}
.dk-lights > *:nth-child(1) { background: #ff5f57; }
.dk-lights > *:nth-child(2) { background: #febc2e; }
.dk-lights > *:nth-child(3) { background: #28c840; }
/* the lights that do something say so on hover, the way a Mac's do */
.dk-light {
position: relative;
cursor: pointer;
line-height: 1;
}
.dk-light::after {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--dk-sans);
opacity: 0;
transition: opacity .12s ease;
}
.dk-light[data-at-close]::after {
content: "\00d7";
color: rgba(60, 0, 0, .7);
}
.dk-light[data-at-full]::after {
content: "\2921"; /* the diagonal, out to the corners */
font-size: 9px;
color: rgba(0, 46, 0, .75);
}
/* once it is full screen the arrows point back in */
.at-full .dk-light[data-at-full]::after {
content: "\2922";
}
.dk-lights:hover .dk-light::after,
.dk-light:focus-visible::after {
opacity: 1;
}
.dk-light:focus-visible {
outline: 2px solid var(--dk-accent);
outline-offset: 2px;
}
.dk-title {
flex: 1 1 auto;
text-align: center;
font-family: var(--dk-sans);
font-size: 13px;
font-weight: 600;
color: var(--dk-text);
min-width: 0;
}
.dk-body {
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 244px;
min-height: 0;
}
/* --- gallery: big preview over a filmstrip ------------------------------- */
.dk-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.dk-preview {
flex: 1 1 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 26px;
min-height: 0;
background: rgba(0, 0, 0, .22);
}
.dk-preview figure {
position: absolute;
inset: 26px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .22s ease;
}
.dk-preview figure.is-on {
opacity: 1;
visibility: visible;
}
.dk-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 3px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
/* filmstrip */
.dk-strip {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
/* Centred while the folder fits, packed to the start once it does not.
Plain `center` keeps centring past the overflow point, which pushes the
first items off the left edge where no amount of scrolling reaches them
and clips the last one against the right. */
justify-content: safe center;
gap: 22px;
padding: 14px 18px 18px;
background: rgba(0, 0, 0, .3);
border-top: 1px solid rgba(0, 0, 0, .35);
overflow-x: auto;
scroll-padding: 0 18px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.dk-strip::-webkit-scrollbar {
height: 9px;
}
.dk-strip::-webkit-scrollbar-track {
background: transparent;
}
.dk-strip::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .26);
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 999px;
}
.dk-folder {
flex: 0 0 auto;
width: 118px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 8px 6px 7px;
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
font-family: var(--dk-sans);
-webkit-appearance: none;
appearance: none;
transition: background-color .15s ease;
}
.dk-folder:hover {
background: rgba(255, 255, 255, .08);
}
.dk-folder.is-on {
background: rgba(255, 255, 255, .16);
}
.dk-folder:focus-visible {
outline: 2px solid var(--dk-accent);
outline-offset: 2px;
}
.dk-folder svg {
display: block;
width: 62px;
height: auto;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}
.dk-folder-name {
font-size: 12px;
line-height: 1.25;
text-align: center;
color: rgba(255, 255, 255, .92);
padding: 2px 6px;
border-radius: 4px;
word-break: break-word;
}
.dk-folder.is-on .dk-folder-name {
background: var(--dk-accent);
color: #1a1a1a;
font-weight: 600;
}
/* --- info pane ----------------------------------------------------------- */
.dk-info {
background: rgba(0, 0, 0, .26);
border-left: 1px solid rgba(0, 0, 0, .3);
padding: 20px 16px;
overflow-y: auto;
font-family: var(--dk-sans);
display: flex;
flex-direction: column;
}
.dk-info-name {
font-family: var(--dk-display);
font-size: 15px;
line-height: 1.2;
letter-spacing: -.2px;
text-transform: uppercase;
color: #fff;
margin: 0 0 4px;
}
.dk-info-kind {
font-size: 11.5px;
line-height: 16px;
color: var(--dk-dim);
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--dk-line);
}
.dk-info dl {
margin: 0 0 18px;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 10px;
font-size: 11.5px;
line-height: 16px;
}
.dk-info dt {
color: var(--dk-dim);
white-space: nowrap;
}
.dk-info dd {
margin: 0;
color: #fff;
text-align: right;
}
.dk-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
}
.dk-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: rgba(255, 255, 255, .8);
}
.dk-tag::before {
content: "";
width: 16px;
height: 9px;
background-color: var(--dk-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 417.99 228.02' fill='currentColor'%3E %3Cpath d='M529.67,247.69l.2,25.14c-7.02,39.97-27.56,71.72-69.66,77.34l-32.22-.27c-27.22-4.64-50.16-17.8-68.7-37.98-13.44-14.63-24.38-30.33-33.33-48.15l-21.44-42.69c-3.55-7.07-5.89-15.31-1.92-22.58,4.28-1.44,10.64.71,14.75,3.08,30.3,17.48,59.96,18.97,89.1-.94,11.58-7.91,23.28-12.14,37.48-13.75,15.93-1.8,30.45,2.34,44.96,9.31,21.44,10.29,36.33,28.53,40.8,51.51Z'/%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
}
.dk-open {
margin-top: auto;
display: block;
padding: 11px 16px;
background: var(--dk-accent);
border: 2px solid var(--dk-accent);
border-radius: 7px;
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
color: #1a1a1a;
transition: background-color .15s ease, color .15s ease;
}
.dk-open:hover {
background: transparent;
color: var(--dk-accent);
}
/* --- dock (this is the site nav) ----------------------------------------- */
.dk-dock-wrap {
flex: 0 0 auto;
display: flex;
justify-content: center;
padding: 0 16px 14px;
}
.dk-dock {
display: flex;
align-items: flex-end;
gap: 12px;
padding: 9px 12px;
background: rgba(30, 30, 32, .55);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
max-width: 100%;
overflow-x: auto;
}
.dk-app {
position: relative;
flex: 0 0 auto;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
text-decoration: none;
overflow: hidden;
transition: transform .16s ease;
}
.dk-app:hover {
transform: translateY(-7px) scale(1.06);
}
.dk-app img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dk-app-label {
font-family: var(--dk-display);
font-size: 15px;
line-height: 1;
letter-spacing: -.5px;
text-transform: uppercase;
}
/* tooltip on hover, like the dock does */
.dk-app::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
padding: 4px 9px;
background: rgba(30, 30, 32, .95);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 6px;
font-family: var(--dk-sans);
font-size: 11px;
white-space: nowrap;
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.dk-app:hover::after {
opacity: 1;
}
.dk-app-sep {
width: 1px;
align-self: stretch;
margin: 4px 2px;
background: rgba(255, 255, 255, .2);
}
/* back / forward, where the view switcher used to be */
.dk-nav {
flex: 0 0 auto;
display: flex;
gap: 2px;
}
.dk-nav-btn {
width: 26px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
border-radius: 5px;
color: rgba(255, 255, 255, .85);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.dk-nav-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, .14);
}
.dk-nav-btn:disabled {
color: rgba(255, 255, 255, .28);
cursor: default;
}
/* keeps the title optically centred now the right side is empty */
.dk-title-spacer {
flex: 0 0 auto;
width: 54px;
}
/* preview panes are built by the script */
.dk-pane {
position: absolute;
inset: 26px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .22s ease;
}
.dk-pane.is-on {
opacity: 1;
visibility: visible;
}
/* many of these are transparent PNGs, so the preview gives them a white
card to sit on rather than leaving them to float on the dark stage */
.dk-pane img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: #fff;
padding: 18px;
border-radius: 3px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
/* a document sits a little narrower than a folder */
.dk-folder.dk-file svg {
width: 46px;
}
/* an image item shows itself rather than a generic icon */
.dk-file-shot {
display: block;
width: 62px;
height: 48px;
object-fit: contain;
background: #fff;
border: 1px solid rgba(255, 255, 255, .25);
}
.dk-empty {
margin: 22px auto;
font-family: var(--dk-sans);
font-size: 12.5px;
color: rgba(255, 255, 255, .45);
}
/* dock tiles */
.dk-app-ink { background: #1a1a1a; color: #ffee00; }
.dk-app-white { background: #fff; }
/* .dk-app img sets object-fit: cover and outranks a bare class, so the
wordmarks have to be scoped past it or they get cropped to the square */
.dk-app img.dk-app-art {
width: 70%;
height: 70%;
object-fit: contain;
}
.dk-app-white img.dk-app-art { width: 76%; }
/* the graffiti ships white; invert it to sit on the yellow tile */
.dk-app-invert { filter: invert(1); }
.dk-app-glyph {
width: 56%;
height: 56%;
color: #ffee00;
}
/* --- responsive ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
.dk-body {
grid-template-columns: minmax(0, 1fr) 214px;
}
.dk-stage {
padding: 24px 16px 18px;
}
}
@media screen and (max-width: 900px) {
.dk-window {
height: auto;
min-height: 0;
max-width: 640px;
}
.dk-body {
grid-template-columns: 1fr;
}
/* the sidebar is chrome, not content — it goes first on a narrow screen */
.dk-preview {
height: 300px;
flex: 0 0 auto;
}
.dk-info {
border-left: 0;
border-top: 1px solid rgba(0, 0, 0, .3);
}
.dk-open {
margin-top: 8px;
}
}
@media screen and (max-width: 600px) {
.dk-menubar {
font-size: 11.5px;
padding: 0 10px;
}
.dk-menu-list span:not(.dk-menu-brand) {
display: none;
}
.dk-stage {
padding: 16px 10px 12px;
}
.dk-preview {
height: 220px;
padding: 16px;
}
.dk-preview figure {
inset: 16px;
}
.dk-strip {
gap: 12px;
padding: 12px;
}
.dk-folder {
width: 96px;
}
.dk-folder svg {
width: 50px;
}
/* the dock has to fit the width of a phone without scrolling sideways */
.dk-app {
width: 40px;
height: 40px;
border-radius: 10px;
}
.dk-app-label {
font-size: 12px;
}
.dk-app-sep {
display: none;
}
.dk-dock {
gap: 8px;
padding: 8px 10px;
}
}
/* smallest phones: the dock still has to sit on one line */
@media screen and (max-width: 400px) {
.dk-app {
width: 36px;
height: 36px;
border-radius: 9px;
}
.dk-app-label {
font-size: 11px;
}
.dk-dock {
gap: 6px;
padding: 7px 9px;
}
.dk-preview {
height: 190px;
}
.dk-folder {
width: 88px;
}
.dk-folder svg {
width: 44px;
}
}
/* Adding PROJECTS pushed the WIP pages to five links; below ~600px the bar
steps down again so it still fits at 480 (the narrowest width it shows at —
under that the burger menu takes over). */
@media screen and (max-width: 600px) {
.div-block-32 .link,
.div-block-120 .link-6 {
font-size: 16px;
}
.div-block-33,
.div-block-121 {
grid-column-gap: 12px;
}
.div-block-33 a,
.div-block-121 a {
font-size: 11px;
}
}
/* ==========================================================================
8. CI COLOURS — the shared chrome
Navbar, footer and the plain page ground move onto the CI blue with white
type. Artwork grounds are left alone: the about page keeps its pinned
image, the index keeps its hero, and the clothing page keeps the yellow
field of the drop email.
========================================================================== */
.at-ci {
--ci-blue: #074069;
--ci-pale: #afbbc7;
}
/* --- page ground --- */
body.body-6,
body.body-11 {
background-color: #074069;
}
/* --- navbar --- */
.div-block-32,
.div-block-120 {
background-color: #074069;
}
.navbar.mobile.home.acid-tears,
.navbar.acid-tears {
background-color: #074069;
}
/* the burger panel that slides over it */
.div-block-4 {
background-color: #074069;
}
.div-block-32 .link,
.div-block-120 .link-6,
.div-block-33 a,
.div-block-121 a {
color: #fff;
}
.div-block-33 a:hover,
.div-block-121 a:hover {
color: var(--ci-pale, #afbbc7);
}
/* --- footer: CI blue everywhere ------------------------------------------ */
.grid-10,
.grid-13 {
background-color: #074069;
/* the swirl stays, sunk into the ground rather than sitting on top of it */
background-blend-mode: luminosity;
}
.section-13,
.section-18 {
background-color: #0000;
}
.grid-10 .text-block-24,
.grid-13 .text-block-24 {
color: #fff;
}
.grid-10 .text-block-24.footertitle,
.grid-13 .text-block-24.footertitle,
.grid-10 .text-block-24.title,
.grid-13 .text-block-24.title {
color: #afbbc7;
}
.grid-10 a:hover .text-block-24,
.grid-13 a:hover .text-block-24 {
color: #afbbc7;
}
/* --- except on the FKNK page, where it takes that page's palette --------- */
.fknk-page .grid-10,
.fknk-page .grid-13 {
background-color: #1a1a1a;
}
.fknk-page .grid-10 .text-block-24,
.fknk-page .grid-13 .text-block-24 {
color: #f4f2ec;
}
.fknk-page .grid-10 .text-block-24.footertitle,
.fknk-page .grid-13 .text-block-24.footertitle,
.fknk-page .grid-10 .text-block-24.title,
.fknk-page .grid-13 .text-block-24.title {
color: #ffee00;
}
.fknk-page .grid-10 a:hover .text-block-24,
.fknk-page .grid-13 a:hover .text-block-24 {
color: #ffee00;
}
/* ==========================================================================
9. The FKNK wordmark standing in for the CLOTHING nav link.
========================================================================== */
.at-nav-fknk {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.at-nav-fknk img {
display: block;
width: auto;
height: 27px;
max-width: none;
}
/* the burger panel and the mobile home screen carry it larger */
.div-block-6 .at-nav-fknk img { height: 26px; }
.section-14 .at-nav-fknk img { height: 20px; }
@media screen and (max-width: 991px) {
.at-nav-fknk img { height: 23px; }
}
@media screen and (max-width: 600px) {
.at-nav-fknk img { height: 19px; }
.div-block-6 .at-nav-fknk img { height: 22px; }
.section-14 .at-nav-fknk img { height: 18px; }
}
/* ==========================================================================
10. The navbar on the FKNK page follows that page's palette.
Ink rather than yellow: the page ground is already yellow and the meta
strip below it is too, so a yellow bar would have nothing to sit against.
========================================================================== */
.fknk-page .div-block-32,
.fknk-page .navbar.mobile.home.acid-tears,
.fknk-page .navbar.acid-tears,
.fknk-page .div-block-4 {
background-color: #1a1a1a;
}
.fknk-page .div-block-32 .link,
.fknk-page .text-block-24.title.mobile-logo {
color: #ffee00;
}
.fknk-page .div-block-33 a,
.fknk-page .div-block-6 .text-block-7 {
color: #f4f2ec;
}
.fknk-page .div-block-33 a:hover,
.fknk-page .div-block-6 a:hover .text-block-7 {
color: #ffee00;
}
/* ==========================================================================
11. INDEX — ticker and lookbook teaser, filling the run between the CTA
and the footer now the film has moved to the FKNK page.
========================================================================== */
.at-ticker {
overflow: hidden;
background: #ffee00;
border-top: 2px solid #1a1a1a;
border-bottom: 2px solid #1a1a1a;
padding: 11px 0;
}
.at-tick-track {
display: flex;
width: max-content;
animation: at-tick 26s linear infinite;
}
.at-tick-run {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.at-tick-item {
font-family: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
font-size: 15px;
line-height: 1;
letter-spacing: -.2px;
text-transform: uppercase;
color: #1a1a1a;
padding: 0 18px;
white-space: nowrap;
}
/* a tear between each one */
.at-tick-sep {
flex: 0 0 auto;
width: 11px;
height: 12px;
background-color: #1a1a1a;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='111.88 122.15 174.12 195.87' fill='currentColor'%3E %3Cpath d='M123.95,122.15l13.2,25.52c16.04,30.84,51.8,42.23,85.14,47.19,33.32,4.96,58.33,22.13,63.17,56.08,2.3,16.15-2.87,31.31-14.18,43.31-19.02,20.16-46.03,26.01-73.72,23.05-21.18-2.26-41.96-9.74-56.23-25.54-17.54-19.42-25.36-44.99-28.26-70.86l-1.19-5.4.11-49.27c.44-2.19.77-5.07,1.17-8.08l3.6-27.2c.34-2.58,2.03-6.72,3.16-8.79h4.02Z'/%3E %3C/svg%3E") no-repeat center / contain;
}
/* Eight identical runs, shifted by exactly one of them. The remaining seven
still span the widest screen at the moment it resets, so there is no end to
see — four runs was enough for a laptop but ran out on a big monitor. */
@keyframes at-tick {
from { transform: translateX(0); }
to { transform: translateX(-12.5%); }
}
@media (prefers-reduced-motion: reduce) {
.at-tick-track { animation: none; }
}
/* --- the lookbook teaser --- */
.at-peek {
background: #074069;
padding: 72px 40px 80px;
}
.at-peek-inner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
gap: 48px;
align-items: center;
}
.at-peek-eyebrow {
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
letter-spacing: 3px;
text-transform: uppercase;
color: #afbbc7;
margin: 0 0 18px;
}
.at-peek-title {
font-family: 'Akira Expanded Demo', 'Arial Black', Arial, sans-serif;
font-size: clamp(26px, 3.2vw, 44px);
line-height: 1.02;
letter-spacing: -1px;
text-transform: uppercase;
color: #fff;
margin: 0 0 18px;
}
.at-peek-text {
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.55;
color: #afbbc7;
margin: 0 0 26px;
max-width: 34ch;
}
.at-peek-btn {
display: inline-block;
padding: 14px 26px;
background: #ff2121;
border: 2px solid #ff2121;
font-family: 'Clashgrotesk Variable', Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
transition: background-color .15s ease, color .15s ease;
}
.at-peek-btn:hover {
background: transparent;
color: #ff2121;
}
.at-peek-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.at-peek-shot {
display: block;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .22);
background: #061f33;
}
.at-peek-shot img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform .35s ease, opacity .2s ease;
}
.at-peek-shot:hover img {
transform: scale(1.05);
}
@media screen and (max-width: 1024px) {
.at-peek { padding: 56px 24px 64px; }
.at-peek-inner { gap: 32px; }
}
@media screen and (max-width: 900px) {
.at-peek-inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
@media screen and (max-width: 600px) {
.at-peek { padding: 40px 14px 48px; }
.at-tick-item { font-size: 13px; padding: 0 13px; }
.at-peek-grid { gap: 8px; }
.at-peek-btn { display: block; text-align: center; }
}
/* ==========================================================================
12. OPENING SCREEN
The logo animation plays over the whole window while the page settles.
It runs at 2.2x — the source is nearly eleven seconds, which is far too
long to hold someone at the door — and it clears as soon as the page has
loaded, with a hard ceiling so a slow asset can never trap anyone.
========================================================================== */
.at-boot {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #074069;
opacity: 1;
/* the screen is only up for a second; a half second fade off the end of
that is most of the time again */
transition: opacity .3s ease;
overflow: hidden;
}
/* the swirl in white: screen blending keeps the pale strokes and drops the
black straight through to the blue underneath */
.at-boot::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../images/lookbook/waves.jpg');
background-size: cover;
background-position: 50% 50%;
mix-blend-mode: screen;
opacity: .3;
pointer-events: none;
}
.at-boot.is-going {
opacity: 0;
}
.at-boot.is-done {
display: none;
}
.at-boot-art {
position: relative;
z-index: 1;
width: min(84vw, 780px);
aspect-ratio: 16 / 9;
overflow: visible;
}
.at-boot-art svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* a thin bar so it reads as loading, not just a splash */
.at-boot-bar {
position: absolute;
z-index: 1;
left: 50%;
bottom: 12%;
transform: translateX(-50%);
width: min(180px, 40vw);
height: 2px;
background: rgba(255, 255, 255, .22);
overflow: hidden;
}
.at-boot-bar::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
transform: translateX(-100%);
animation: at-boot-bar 2.6s ease-in-out infinite;
}
@keyframes at-boot-bar {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* anyone who has asked for less motion gets the site, not the show */
@media (prefers-reduced-motion: reduce) {
.at-boot { display: none; }
}
/* ==========================================================================
13. The film on the FKNK page.
A poster with a play button rather than an iframe on load. YouTube's embed
is unreliable from a file:// origin and costs a few hundred KB before
anyone asks for it; this way the section always shows the still, and the
player is only fetched on a click.
========================================================================== */
.fknk-page .fk-video-play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: var(--fk-main);
cursor: pointer;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
}
.fknk-page .fk-video-play img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease, opacity .2s ease;
}
.fknk-page .fk-video-play:hover img {
transform: scale(1.03);
opacity: .85;
}
/* the play triangle */
.fknk-page .fk-video-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 60px;
border-radius: 12px;
background: var(--fk-main);
transition: background-color .15s ease;
}
.fknk-page .fk-video-btn::after {
content: "";
position: absolute;
left: 52%;
top: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent var(--fk-accent);
}
.fknk-page .fk-video-play:hover .fk-video-btn {
background: var(--fk-accent);
}
.fknk-page .fk-video-play:hover .fk-video-btn::after {
border-left-color: var(--fk-main);
}
.fknk-page .fk-video-play:focus-visible {
outline: 3px solid var(--fk-accent);
outline-offset: -3px;
}
.fknk-page .fk-video-note {
margin: 0 20px 20px;
font-family: var(--fk-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fk-muted);
}
.fknk-page .fk-video-note a {
color: var(--fk-main);
text-underline-offset: 3px;
}
@media screen and (max-width: 600px) {
.fknk-page .fk-video-note {
margin-left: 14px;
margin-right: 14px;
}
.fknk-page .fk-video-btn {
width: 58px;
height: 58px;
}
}
/* ========================================================================== */
/* 14. FKNK — hero film */
/* ========================================================================== */
.fknk-page .fk-vhero {
position: relative;
width: 100%;
height: min(78vh, 760px);
min-height: 420px;
overflow: hidden;
background: var(--fk-main);
border-bottom: 1px solid var(--fk-main);
display: flex;
align-items: flex-end;
}
.fknk-page .fk-vhero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border: 0;
pointer-events: none;
}
.fknk-page .fk-vhero-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(26, 26, 26, .78) 0%, rgba(26, 26, 26, .30) 42%, rgba(26, 26, 26, 0) 72%);
pointer-events: none;
}
.fknk-page .fk-vhero-copy {
position: relative;
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 0 24px 48px;
text-align: center;
}
.fknk-page .fk-vhero-copy .fk-eyebrow {
color: var(--fk-accent);
margin: 0 0 18px;
}
.fknk-page .fk-vhero-copy .fk-hero-title {
color: var(--fk-second);
text-shadow: 0 2px 28px rgba(26, 26, 26, .55);
}
.fknk-page .fk-vhero-copy .fk-hero-sub {
color: var(--fk-second);
margin: 20px 0 0;
}
@media screen and (max-width: 767px) {
.fknk-page .fk-vhero {
height: min(70vh, 560px);
min-height: 340px;
}
.fknk-page .fk-vhero-copy {
padding: 0 20px 36px;
}
}
/* ========================================================================== */
/* 15. Rounded buttons */
/* ========================================================================== */
/* Every call-to-action on the live pages reads as a pill. The radius is larger
than any button is tall, so each one rounds fully to its own height and the
full-width buy button and the small shop chip stay visually related. */
.at-cta-btn,
.at-peek-btn,
.fknk-page .fk-buy,
.fknk-page .fk-meta-shop {
border-radius: 999px;
}
/* The play button is squared off above so this renders as a true circle. */
.fknk-page .fk-video-btn {
width: 76px;
height: 76px;
border-radius: 999px;
}
/* Repeat loads inside the boot window never show the opening screen at all. */
html.at-booted .at-boot {
display: none;
}
/* ==========================================================================
16. DESKTOP SHELL — every page is an app window
The projects page turned the site into a desktop: a menu bar at the top, a
Finder window in the middle, the dock doing the navigating. That was only
ever true of one page. This section lifts the same chrome onto the rest of
the site, so home, the drop and the about page all open as windows on the
same machine.
Projects keeps its own gallery window (section 7); everything else uses the
document window below — a source list on the left, one scrolling pane on
the right, and a status bar along the bottom.
========================================================================== */
/* --- wallpapers: one desktop picture per page ----------------------------- */
.at-desk-home { background-image: url('../images/Heroatbg.avif'); }
.at-desk-about { background-image: url('../images/BAnnessr.avif'); }
.at-desk-fknk { background-color: #ffee00; background-image: none; }
/* Sunk a stop so the window edges read against it. Negative z-index puts this
above the wallpaper (which paints as the canvas) and below every child. */
.at-desk::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(120% 95% at 50% 0%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .58) 100%);
}
/* The drop's desktop is the acid yellow, with the swirl showing through it
as a second, deeper yellow rather than as the black and white it ships as.
The picture multiplies down onto the yellow ground — which paints its whites
yellow and its blacks black — and a flat wash of the same yellow over the
top lifts those blacks back up into a mustard. Two yellows, one file. */
.at-desk.fknk-page::before {
background-color: #ffee00;
background-image:
linear-gradient(rgba(255, 238, 0, .82), rgba(255, 238, 0, .82)),
url('../images/lookbook/waves.jpg');
background-size: cover, cover;
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat, no-repeat;
background-blend-mode: normal, multiply;
opacity: 1;
}
/* --- the document window -------------------------------------------------- */
/* The stage centres the projects window. A document window fills it instead:
the page scrolls inside the window, not under it, which is what keeps the
menu bar and the dock where a desktop puts them.
That needs a definite height to measure against, so a page carrying a
document window pins the desktop to the screen. Without it the window is
sized by its own contents, the percentage height below resolves to auto,
and the whole desktop scrolls away with the dock at the end of it. */
.at-desk-fixed {
/* Fixed to the viewport, not merely as tall as it. height + overflow:hidden
was not enough: the scrolling pane's content still counted towards the
shell's scrollable extent — .dk-stage reported 3029px of it against 788px
of height — so the browser could and did drag the whole desktop upward to
reach a fragment or a focused field, taking the menu bar off the top of
the screen with no scrollbar to bring it back. A fixed box the size of the
viewport has nowhere to go. */
position: fixed;
inset: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.dk-stage-doc {
align-items: stretch;
}
.dk-window.dk-doc {
height: 100%;
max-width: 1280px;
margin: 0 auto;
}
.dk-doc-body {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
}
/* --- source list ---------------------------------------------------------- */
.dk-sidebar {
background: rgba(0, 0, 0, .3);
border-right: 1px solid rgba(0, 0, 0, .35);
padding: 10px 8px 16px;
overflow-y: auto;
font-family: var(--dk-sans);
}
.dk-side-head {
font-size: 10.5px;
line-height: 14px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
padding: 14px 8px 6px;
}
.dk-side-link {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12.5px;
line-height: 17px;
color: rgba(255, 255, 255, .88);
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.dk-side-link {
cursor: pointer;
}
.dk-side-link:hover {
background: rgba(255, 255, 255, .09);
color: #fff;
}
/* it should feel pressed, not just hovered */
.dk-side-link:active {
background: rgba(255, 255, 255, .18);
transform: translateY(1px);
}
.dk-side-link:focus-visible {
outline: 2px solid var(--dk-accent);
outline-offset: -2px;
}
.dk-side-link.is-on {
background: var(--dk-accent);
color: #1a1a1a;
font-weight: 600;
}
.dk-side-link svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
color: var(--dk-accent);
}
.dk-side-link.is-on svg,
.dk-side-link:hover svg {
color: currentColor;
}
.dk-side-link.is-on svg {
color: #1a1a1a;
}
/* --- the scrolling pane --------------------------------------------------- */
.dk-page {
min-width: 0;
overflow-y: auto;
overscroll-behavior: contain;
/* No scroll-behavior: smooth here. A smooth scroll inside a nested pane is
driven by the frame loop, and when that loop is throttled — a background
tab, low power, a slow machine — the scroll is not merely slow, it is
dropped: scrollTop goes back to where it started and the source list
looks dead. The links animate themselves in the script instead. */
background: rgba(0, 0, 0, .2);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.dk-page::-webkit-scrollbar,
.dk-sidebar::-webkit-scrollbar {
width: 9px;
}
.dk-page::-webkit-scrollbar-track,
.dk-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.dk-page::-webkit-scrollbar-thumb,
.dk-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .26);
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 999px;
}
.dk-page::-webkit-scrollbar-thumb:hover,
.dk-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, .42);
background-clip: padding-box;
}
/* anchors have to clear nothing — the pane is the scroller — but a little
room above a heading stops it landing hard against the title bar */
.dk-page [id] {
scroll-margin-top: 0;
}
/* --- status bar ----------------------------------------------------------- */
.dk-statusbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 26px;
padding: 0 12px;
/* opaque, not tinted: the pane scrolls under it and a translucent bar
picked up whatever band happened to be passing behind */
background: #232326;
border-top: 1px solid rgba(0, 0, 0, .45);
font-family: var(--dk-sans);
font-size: 11px;
line-height: 14px;
color: var(--dk-dim);
white-space: nowrap;
overflow: hidden;
}
/* --- dock: mark the app that is open -------------------------------------- */
/* The dock clips its tiles, so the running light sits inside the bottom edge
rather than under the tile. A dark ring keeps it legible on the yellow one
as well as on the ink ones. */
.dk-app.is-current::before {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55);
z-index: 2;
}
/* --- page furniture ------------------------------------------------------- */
.dk-sect {
padding: 34px 40px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
font-family: var(--dk-sans);
}
.dk-sect:last-child {
border-bottom: 0;
}
.dk-kicker {
font-family: var(--dk-sans);
font-size: 10.5px;
line-height: 14px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--dk-accent);
margin: 0 0 14px;
}
.dk-h1 {
font-family: var(--dk-display);
font-size: clamp(30px, 4.4vw, 58px);
line-height: .98;
letter-spacing: -1px;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
}
.dk-h2 {
font-family: var(--dk-display);
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.06;
letter-spacing: -.4px;
text-transform: uppercase;
color: #fff;
margin: 0 0 14px;
}
.dk-lede {
font-family: var(--dk-sans);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
color: rgba(255, 255, 255, .82);
max-width: 54ch;
margin: 0 0 24px;
}
.dk-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dk-btn {
display: inline-block;
padding: 11px 20px;
background: var(--dk-accent);
border: 2px solid var(--dk-accent);
border-radius: 999px;
font-family: var(--dk-sans);
font-size: 12px;
line-height: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
color: #1a1a1a;
transition: background-color .15s ease, color .15s ease;
}
.dk-btn:hover {
background: transparent;
color: var(--dk-accent);
}
.dk-btn-ghost {
background: transparent;
border-color: rgba(255, 255, 255, .35);
color: #fff;
}
.dk-btn-ghost:hover {
background: #fff;
border-color: #fff;
color: #1a1a1a;
}
/* --- home: the hero, framed like a window's first screen ------------------ */
/* Photo, scrim and content share one grid cell, so the picture is the ground
the hero is built on rather than an image placed inside it. */
.dk-hero {
position: relative;
display: grid;
border-bottom: 1px solid rgba(255, 255, 255, .12);
overflow: hidden;
}
.dk-hero > * {
grid-area: 1 / 1;
min-width: 0;
}
.dk-hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 45%;
display: block;
}
.dk-hero-scrim {
background:
linear-gradient(90deg, rgba(12, 12, 14, .46) 0%, rgba(12, 12, 14, .72) 46%, rgba(12, 12, 14, .93) 100%),
linear-gradient(to top, rgba(12, 12, 14, .55) 0%, rgba(12, 12, 14, 0) 42%);
pointer-events: none;
}
.dk-hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 40px;
padding: 48px;
}
/* the wordmark sits over the photograph at about half the width it is given,
which is the proportion the old full screen header used */
.dk-hero-mark img {
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
display: block;
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6));
}
.dk-hero-copy {
min-width: 0;
}
/* --- a list of links, set like Finder rows -------------------------------- */
/* three columns became four when the legal pages arrived; auto-fit means the
next one to turn up does not need this touched again */
.dk-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 28px;
}
.dk-col-head {
font-family: var(--dk-sans);
font-size: 10.5px;
line-height: 14px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(255, 255, 255, .45);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.dk-col a {
display: block;
font-family: var(--dk-sans);
font-size: 13px;
line-height: 1.5;
padding: 3px 0;
color: rgba(255, 255, 255, .86);
text-decoration: none;
}
.dk-col a:hover {
color: var(--dk-accent);
}
/* --- about: the panels lose their own padding, the window supplies it ----- */
.dk-page .at-about {
padding: 30px 34px 40px;
}
/* Side by side, the story and the contact panel start at the same height, and
a source list that points at both has nothing to distinguish. Stacked, the
two entries follow each other the way the sidebar says they do. */
.dk-page .at-about-inner {
max-width: none;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.dk-page .at-about-contact {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px 32px;
align-items: start;
}
.dk-page .at-about-story,
.dk-page .at-about-contact {
background: rgba(0, 0, 0, .34);
border-color: rgba(255, 255, 255, .14);
border-radius: 10px;
}
.dk-page .at-about-scroll {
max-height: none;
-webkit-mask-image: none;
mask-image: none;
padding-right: 0;
}
/* the story used to live in a narrow column; across the full width of the
window the lines have to be reined in or the measure runs to 120 characters */
.dk-page .at-about-scroll p,
.dk-page .at-about-standfirst {
max-width: 76ch;
}
/* --- home: the bands that came off the old long page --------------------- */
.dk-page .at-cta {
height: auto;
min-height: 0;
max-height: none;
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, .12);
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dk-page .at-cta-inner {
padding: 0 32px;
}
.dk-page .at-cta-spin {
width: clamp(120px, 14vw, 180px);
}
.dk-page .at-peek {
background: transparent;
padding: 34px 40px 40px;
}
.dk-page .at-peek-inner {
max-width: none;
}
/* ==========================================================================
17. THE DROP, RESKINNED FOR THE WINDOW
The FKNK page is built out of five custom properties, so moving it onto the
dark chrome is mostly a matter of redefining them. The exceptions are the
places where --fk-main was standing in for a *background* rather than for
ink; those are named out below.
========================================================================== */
.at-desk.fknk-page {
--fk-main: #f2f0ea; /* was ink; now the light on dark */
--fk-second: rgba(255, 255, 255, .05); /* was bone card; now a dark panel */
--fk-muted: rgba(255, 255, 255, .55);
--fk-rule: rgba(255, 255, 255, .18);
/* The shots are cut out — they carry an alpha channel — so whatever sits
behind them shows through. The wall they hang on is a flat colour rather
than another translucent layer, because the loupe has to paint the same
one behind the magnified picture or the glass reads as a hole. */
--fk-panel: #3d3d40;
}
.at-desk.fknk-page .fk-shell {
padding: 30px 34px 34px;
}
.at-desk.fknk-page .fk-card {
max-width: none;
border-radius: 10px;
overflow: hidden;
}
.at-desk.fknk-page .fk-card + .fk-card {
margin-top: 26px;
}
/* the meta strip stays yellow, so its type stays ink */
.at-desk.fknk-page .fk-meta-line {
color: #1a1a1a;
}
/* buttons: filled with the accent instead of with the ink that is now light */
.at-desk.fknk-page .fk-meta-shop,
.at-desk.fknk-page .fk-buy {
background: var(--fk-accent);
border-color: var(--fk-accent);
color: #1a1a1a;
}
.at-desk.fknk-page .fk-meta-shop:hover,
.at-desk.fknk-page .fk-buy:hover {
background: transparent;
color: var(--fk-accent);
}
/* small ink chips sitting on top of imagery */
.at-desk.fknk-page .fk-spin-hint,
.at-desk.fknk-page .fk-360-badge {
background: #1a1a1a;
color: var(--fk-accent);
}
/* The window chrome is translucent and sits on a blurred backdrop, which is
right over the dark wallpapers and wrong over this one: a bright yellow
desktop read straight through the glass and turned the whole window,
sidebar and all, olive. On this page the chrome is solid. */
.at-desk.fknk-page .dk-window {
background: var(--dk-chrome-solid);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* boxes that were ink-filled and have to stay dark */
.at-desk.fknk-page .fk-video,
.at-desk.fknk-page .fk-vhero {
background: #0e0e10;
border-color: rgba(255, 255, 255, .16);
}
.at-desk.fknk-page .fk-video-btn {
background: rgba(18, 18, 20, .82);
}
.at-desk.fknk-page .fk-video-play:hover .fk-video-btn {
background: var(--fk-accent);
}
/* the film hero sat at three quarters of the screen; inside the window it
answers to the pane instead */
.at-desk.fknk-page .fk-vhero {
height: min(52vh, 460px);
min-height: 280px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
/* the title measures itself against this, not against the screen */
container-type: inline-size;
}
/* 11vw was right when the hero was the whole screen. Inside a window that is
narrower than the screen — and narrower again once the source list takes
its column — the viewport is the wrong thing to measure against, and the
words ran to both edges. Container units size it to the pane it is in. */
.at-desk.fknk-page .fk-vhero-copy .fk-hero-title {
font-size: clamp(32px, 8.5cqw, 76px);
letter-spacing: -.02em;
}
.at-desk.fknk-page .fk-vhero-copy .fk-hero-sub {
margin-top: 18px;
}
.at-desk.fknk-page .fk-vhero-copy .fk-hero-title,
.at-desk.fknk-page .fk-vhero-copy .fk-hero-sub {
color: #fff;
}
/* the lookbook was a full screen of its own; here it is a panel */
.at-desk.fknk-page .fk-lookbook {
height: min(74vh, 640px);
border-top: 1px solid rgba(255, 255, 255, .12);
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* the tee is white, so the gallery needs a wall to sit against */
.at-desk.fknk-page .fk-gallery-main,
.at-desk.fknk-page .fk-spin,
.at-desk.fknk-page .fk-loupe {
background-color: var(--fk-panel);
}
/* ==========================================================================
18. THE SHELL ON SMALL SCREENS
A window that scrolls inside itself is right on a laptop and wrong on a
phone: two scrollers fight, and the address bar never gets out of the way.
Below 900 the window opens up, the page scrolls normally, and the dock
sticks to the bottom of the screen so the navigation is always to hand.
========================================================================== */
@media screen and (max-width: 900px) {
.at-desk-fixed {
/* below 900 the page is the scroller again, so it has to leave the
viewport and behave like a document */
position: static;
inset: auto;
height: auto;
min-height: 100vh;
min-height: 100svh;
overflow-x: hidden;
overflow-y: visible;
}
.dk-window.dk-doc {
height: auto;
max-width: 720px;
}
.dk-doc-body {
grid-template-columns: 1fr;
}
/* the source list is chrome, not content — it becomes a row of chips */
.dk-sidebar {
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, .35);
display: flex;
gap: 6px;
padding: 8px 10px;
overflow-x: auto;
overflow-y: hidden;
/* the chips run off the edge on purpose; a scrollbar under them would
read as a second, broken window control */
scrollbar-width: none;
}
.dk-sidebar::-webkit-scrollbar {
height: 0;
}
.dk-side-head {
display: none;
}
.dk-side-link {
flex: 0 0 auto;
background: rgba(255, 255, 255, .08);
white-space: nowrap;
}
.dk-page {
overflow: visible;
}
/* the dock parks over the foot of the page, so the window has to stop
short of it or the last thing on every page sits underneath it */
.dk-dock-wrap {
position: sticky;
bottom: 0;
z-index: 30;
padding-bottom: 10px;
}
/* the projects window has the same sticky dock over its foot */
.dk-stage {
padding-bottom: 80px;
}
.dk-hero-inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 30px 22px 34px;
}
.dk-hero-mark img {
max-width: 340px;
}
.dk-sect {
padding: 26px 22px;
}
.dk-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.dk-page .at-about {
padding: 20px 18px 26px;
}
.dk-page .at-about-contact {
grid-template-columns: 1fr;
gap: 22px;
}
.dk-page .at-peek {
padding: 26px 22px 30px;
}
.dk-page .at-cta-inner {
padding: 0 22px;
}
.at-desk.fknk-page .fk-shell {
padding: 20px 18px 24px;
}
.at-desk.fknk-page .fk-lookbook {
height: min(68vh, 520px);
}
}
@media screen and (max-width: 600px) {
.dk-cols {
grid-template-columns: 1fr;
}
.dk-statusbar {
font-size: 10.5px;
}
.dk-sect {
padding: 22px 16px;
}
}
/* ==========================================================================
19. THE HERO FILLS THE WINDOW
The window is the viewport now, so the first screen of it should be one
thing: the mark, the name, and the two ways in. Everything else starts
below the fold of the pane.
========================================================================== */
.dk-page .dk-hero {
/* the pane has a definite height, so this is the whole of the first screen */
min-height: 100%;
}
/* ==========================================================================
20. CLOSING THE WINDOW
The red light shuts the window. A tab the site opened itself can really be
closed; anything else is left on the desktop with the dock still running,
which is what a Mac does when you close the last window of an app. The
desktop takes a click to open it again.
========================================================================== */
.dk-window {
transform-origin: 50% 92%;
transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
.at-shut .dk-window {
opacity: 0;
transform: scale(.9) translateY(20px);
pointer-events: none;
}
/* the empty desktop is the way back in */
.at-shut .dk-stage {
cursor: pointer;
}
/* --- the logo, played in the space the window left ----------------------- */
.dk-relaunch {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: dk-relaunch-in .3s ease both;
}
/* the mark has to read on the dark wallpapers and on the drop's yellow one
alike, so it brings its own pool of shade with it */
.dk-relaunch::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(closest-side,
rgba(8, 8, 10, .68) 0%, rgba(8, 8, 10, .42) 52%, rgba(8, 8, 10, 0) 80%);
}
.dk-relaunch-art {
position: relative;
z-index: 1;
width: min(72%, 560px);
aspect-ratio: 16 / 9;
}
@keyframes dk-relaunch-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* while it is playing, the animation is the answer — the hint is not needed */
.at-relaunching .dk-stage::after {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.dk-relaunch {
animation: none;
}
}
.at-shut .dk-stage::after {
content: "Click the desktop to open the window again";
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
padding: 7px 14px;
background: rgba(20, 20, 22, .62);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
font-family: var(--dk-sans);
font-size: 11.5px;
line-height: 15px;
color: rgba(255, 255, 255, .78);
white-space: nowrap;
pointer-events: none;
animation: dk-shut-hint .4s ease .35s both;
}
.dk-stage {
position: relative;
}
@keyframes dk-shut-hint {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.dk-window { transition: none; }
.at-shut .dk-stage::after { animation: none; }
}
/* ==========================================================================
21. A SOURCE LIST FOR THE PROJECTS WINDOW
The gallery had a preview, a filmstrip and an info pane but no way to jump
straight to a folder. The sidebar is that: the favourites walk the tree in
place, the locations leave for another window.
========================================================================== */
.dk-window-wide {
max-width: 1280px;
}
.dk-body-3 {
grid-template-columns: 194px minmax(0, 1fr) 236px;
}
@media screen and (max-width: 1180px) {
.dk-body-3 {
grid-template-columns: 172px minmax(0, 1fr) 214px;
}
}
@media screen and (max-width: 900px) {
.dk-body-3 {
grid-template-columns: 1fr;
}
}
/* the hero gives up the full screen once the pane stops being the scroller */
@media screen and (max-width: 900px) {
.dk-page .dk-hero {
min-height: 0;
}
}
@media screen and (max-width: 600px) {
.dk-hero-inner {
padding: 24px 16px 28px;
}
.at-shut .dk-stage::after {
white-space: normal;
max-width: 80vw;
text-align: center;
}
}
/* ==========================================================================
22. QUICK LOOK — the product shots, closer
A tee is a thing you want to look at properly: the weave, the halftone, the
puff on the neck tears. Clicking the big image opens it in a window of its
own — wheel, pinch or the buttons to zoom, drag to move, arrows along the
row. It borrows the same chrome as everything else, so it reads as another
window rather than as a lightbox bolted on.
========================================================================== */
.dk-ql {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 28px;
background: rgba(6, 6, 8, .64);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
animation: dk-ql-fade .18s ease both;
}
.dk-ql[hidden] {
display: none;
}
.dk-ql-window {
width: min(1080px, 100%);
height: min(84vh, 820px);
display: flex;
flex-direction: column;
/* the ground behind is already blurred; a second backdrop-filter nested
inside the first is where Safari starts dropping the window entirely */
background: var(--dk-chrome-solid);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 11px;
box-shadow: 0 32px 70px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .45);
overflow: hidden;
animation: dk-ql-open .2s cubic-bezier(.2, .8, .3, 1) both;
}
.dk-ql-tools {
flex: 0 0 auto;
display: flex;
gap: 4px;
}
.dk-ql-tools .dk-nav-btn {
width: 30px;
font: 600 14px/1 var(--dk-sans);
}
.dk-ql-tools .dk-ql-fit {
width: auto;
padding: 0 10px;
font: 700 10.5px/1 var(--dk-sans);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.dk-ql-stage {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .07);
cursor: zoom-in;
/* the stage takes the gestures itself, so a pinch zooms the shot rather
than the page underneath it */
touch-action: none;
user-select: none;
}
.dk-ql-stage.is-zoomed { cursor: grab; }
.dk-ql-stage.is-zoomed:active { cursor: grabbing; }
.dk-ql-stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
transform-origin: 50% 50%;
will-change: transform;
-webkit-user-drag: none;
}
@keyframes dk-ql-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes dk-ql-open {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
/* nothing behind the preview should move while it is open */
body.at-ql-open {
overflow: hidden;
}
/* --- the loupe ----------------------------------------------------------- */
/* A round glass that follows the pointer, painting the same picture at two
and a half times the size the page shows it at. The magnified copy is the
full resolution file, so the glass genuinely resolves more than the page —
it is not the on-screen image blown up. */
.fknk-page .fk-loupe {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 210px;
height: 210px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .9);
box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .45);
background-repeat: no-repeat;
pointer-events: none;
opacity: 0;
transition: opacity .14s ease;
will-change: transform, background-position;
}
.fknk-page .fk-loupe.is-on {
opacity: 1;
}
/* under the glass, the glass is the pointer */
.fknk-page .fk-gallery-main.is-loupe {
cursor: none;
}
@media (prefers-reduced-motion: reduce) {
.fknk-page .fk-loupe {
transition: none;
}
}
/* --- the invitation on the gallery itself -------------------------------- */
.fknk-page .fk-gallery-main[data-at-zoom] {
cursor: zoom-in;
}
/* the hint has to tell the truth about the device it is being read on */
.fknk-page .fk-zoom-hint .on-hover { display: none; }
@media (hover: hover) and (pointer: fine) {
.fknk-page .fk-zoom-hint .on-hover { display: inline; }
.fknk-page .fk-zoom-hint .on-tap { display: none; }
}
.fknk-page .fk-zoom-hint {
position: absolute;
z-index: 2;
left: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px 5px;
border-radius: 999px;
background: rgba(18, 18, 20, .74);
font-family: var(--fk-sans);
font-size: 10px;
line-height: 13px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #fff;
pointer-events: none;
/* legible without hover, since a phone never gets one */
opacity: .74;
transition: opacity .18s ease;
}
.fknk-page .fk-gallery-main:hover .fk-zoom-hint {
opacity: 1;
}
/* the turntable is showing, and dragging that already means something else */
.fknk-page .fk-spin:not([hidden]) ~ .fk-zoom-hint {
display: none;
}
@media screen and (max-width: 600px) {
.dk-ql {
padding: 16px 10px;
}
.dk-ql-window {
height: min(88vh, 760px);
}
.dk-ql-tools .dk-ql-fit {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.dk-ql,
.dk-ql-window {
animation: none;
}
}
/* ==========================================================================
23. LEGAL PAGES — Impressum and AGB
Running text, a key/value block for the company details, and a marker for
everything that still needs a real answer. The marker is loud on purpose:
these are documents that get shipped by accident, and a blank clause that
looks like prose is worse than no page at all.
========================================================================== */
.dk-prose {
max-width: 68ch;
font-family: var(--dk-sans);
}
.dk-prose h2 {
font-family: var(--dk-display);
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.2;
letter-spacing: -.2px;
text-transform: uppercase;
color: #fff;
margin: 30px 0 10px;
}
.dk-prose h2:first-child {
margin-top: 0;
}
.dk-prose p,
.dk-prose li {
font-size: 14px;
line-height: 1.62;
color: rgba(255, 255, 255, .8);
margin: 0 0 12px;
}
.dk-prose ul {
margin: 0 0 12px;
padding-left: 18px;
}
.dk-prose h3 {
font-family: var(--dk-sans);
font-size: 13px;
line-height: 1.4;
font-weight: 700;
letter-spacing: .3px;
color: #fff;
margin: 18px 0 6px;
}
.dk-prose address {
font-style: normal;
font-size: 14px;
line-height: 1.62;
color: #fff;
margin: 0 0 14px;
}
.dk-prose a {
color: var(--dk-accent);
text-underline-offset: 3px;
}
/* "Allgemeine Geschäftsbedingungen" and "Datenschutzerklärung" are single
unbreakable words at display size, and they ran to both edges of the pane.
The legal titles get their own step down. */
.dk-h1-long {
font-size: clamp(24px, 3.1vw, 40px);
letter-spacing: -.4px;
}
/* the date line under the title */
.dk-legal-meta {
font-family: var(--dk-sans);
font-size: 11px;
line-height: 16px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
margin: -6px 0 26px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
/* The author marked the points still to settle with . On paper those
were red on white; here they take the accent, and they stay loud on
purpose — they are the reason these pages are not finished yet. */
.dk-prose mark {
background: var(--dk-accent);
color: #1a1a1a;
padding: 1px 6px 2px;
border-radius: 3px;
font-weight: 700;
}
/* the company details, set as a Finder-style key/value list */
.dk-facts {
display: grid;
grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
gap: 8px 22px;
margin: 0 0 22px;
font-size: 14px;
line-height: 1.5;
}
.dk-facts dt {
color: rgba(255, 255, 255, .5);
}
.dk-facts dd {
margin: 0;
color: #fff;
}
/* --- the gaps, made impossible to miss ----------------------------------- */
.dk-todo {
display: inline-flex;
align-items: baseline;
gap: 7px;
padding: 2px 9px 3px;
background: var(--dk-accent);
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
font-weight: 700;
color: #1a1a1a;
}
.dk-todo::before {
content: "FEHLT";
font-size: 9.5px;
letter-spacing: 1.2px;
}
.dk-note {
margin: 0 0 24px;
padding: 14px 16px;
background: rgba(255, 238, 0, .1);
border: 1px solid rgba(255, 238, 0, .4);
border-radius: 8px;
font-family: var(--dk-sans);
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, .88);
}
.dk-note strong {
color: var(--dk-accent);
}
@media screen and (max-width: 600px) {
.dk-facts {
grid-template-columns: 1fr;
gap: 2px 0;
}
.dk-facts dd {
margin-bottom: 10px;
}
}
/* ==========================================================================
24. CONSENT
A notification, in the language the rest of the desktop speaks: it slides in
under the menu bar at the top right, the way a Mac tells you something. It
does not black out the page or trap the pointer — the site stays usable
while it is up, because nothing that tracks has loaded yet and there is
nothing to protect the visitor from until they say yes.
========================================================================== */
.dk-consent {
position: fixed;
top: 38px;
right: 14px;
z-index: 50;
width: min(340px, calc(100vw - 28px));
animation: dk-consent-in .34s cubic-bezier(.2, .8, .3, 1) both;
}
.dk-consent[hidden] {
display: none;
}
.dk-consent-card {
padding: 15px 16px 14px;
background: rgba(38, 38, 41, .92);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
font-family: var(--dk-sans);
}
.dk-consent-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.dk-consent-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dk-accent);
border-radius: 8px;
}
.dk-consent-icon svg {
width: 17px;
height: 17px;
display: block;
}
.dk-consent-title {
font-size: 13px;
line-height: 1.2;
font-weight: 700;
color: #fff;
margin: 0;
}
.dk-consent-sub {
font-size: 11px;
line-height: 1.3;
color: rgba(255, 255, 255, .5);
margin: 2px 0 0;
}
.dk-consent-text {
font-size: 12.5px;
line-height: 1.5;
color: rgba(255, 255, 255, .84);
margin: 0 0 13px;
}
.dk-consent-acts {
display: flex;
gap: 8px;
margin: 0 0 10px;
}
.dk-consent-acts .dk-btn {
flex: 1 1 0;
padding: 9px 12px;
font-size: 11px;
letter-spacing: 1.1px;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.dk-consent-more {
display: inline-block;
font-size: 11px;
line-height: 1.4;
color: rgba(255, 255, 255, .55);
text-decoration: underline;
text-underline-offset: 3px;
}
.dk-consent-more:hover {
color: var(--dk-accent);
}
@keyframes dk-consent-in {
from { opacity: 0; transform: translate(14px, -10px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* under the dock's own breakpoint it sits at the foot instead, where a phone
expects a sheet and where the thumb already is */
@media screen and (max-width: 600px) {
.dk-consent {
top: auto;
bottom: 92px;
right: 10px;
left: 10px;
width: auto;
}
@keyframes dk-consent-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
}
@media (prefers-reduced-motion: reduce) {
.dk-consent {
animation: none;
}
}
/* ==========================================================================
25. NEWSLETTER SIGNUP
The promise the drop mail makes — subscribers get a day's head start — has
to be visible somewhere you can act on it. It sits at the foot of every
page except Projects, which is a Finder window and has no page foot to
put it in.
========================================================================== */
.dk-signup {
padding: 34px 40px 38px;
border-top: 1px solid rgba(255, 255, 255, .12);
background:
linear-gradient(90deg, rgba(255, 238, 0, .09) 0%, rgba(255, 238, 0, 0) 60%);
font-family: var(--dk-sans);
}
.dk-signup-inner {
max-width: 640px;
}
.dk-signup-title {
font-family: var(--dk-display);
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.06;
letter-spacing: -.4px;
text-transform: uppercase;
color: #fff;
margin: 0 0 10px;
}
.dk-signup-text {
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, .78);
margin: 0 0 18px;
}
.dk-signup-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 12px;
}
.dk-signup-field {
flex: 1 1 240px;
min-width: 0;
padding: 13px 15px;
background: rgba(0, 0, 0, .34);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
font-family: var(--dk-sans);
font-size: 14px;
line-height: 18px;
color: #fff;
-webkit-appearance: none;
appearance: none;
}
.dk-signup-field::placeholder {
color: rgba(255, 255, 255, .4);
}
.dk-signup-field:focus {
outline: none;
border-color: var(--dk-accent);
background: rgba(0, 0, 0, .5);
}
.dk-signup-go {
flex: 0 0 auto;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.dk-signup-go[disabled] {
opacity: .55;
cursor: default;
}
.dk-signup-small {
font-size: 11.5px;
line-height: 1.5;
color: rgba(255, 255, 255, .5);
margin: 0;
}
.dk-signup-small a {
color: rgba(255, 255, 255, .68);
text-underline-offset: 2px;
}
.dk-signup-small a:hover {
color: var(--dk-accent);
}
/* the honeypot: off-screen, unreachable by tab, invisible to a reader */
.dk-signup-pot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.dk-signup-said {
margin: 12px 0 0;
font-size: 13.5px;
line-height: 1.5;
font-weight: 700;
color: var(--dk-accent);
}
.dk-signup-said.is-bad {
color: #ff6b6b;
}
@media screen and (max-width: 900px) {
.dk-signup {
padding: 26px 22px 30px;
}
}
@media screen and (max-width: 600px) {
.dk-signup {
padding: 22px 16px 26px;
}
.dk-signup-go {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
26. 404 — the alert
The rest of the site is a desktop, so a missing page is not a broken web
page: it is the dialog you get when the Finder cannot find something. The
menu bar and the dock stay up behind it, because the machine is fine — it
is only this one item that is not there.
========================================================================== */
.dk-stage-alert {
align-items: center;
justify-content: center;
}
.dk-alert {
width: min(440px, 100%);
padding: 26px 26px 22px;
background: var(--dk-chrome);
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 13px;
box-shadow: 0 32px 70px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .45);
font-family: var(--dk-sans);
text-align: center;
animation: dk-alert-in .26s cubic-bezier(.2, .8, .3, 1) both;
}
.dk-alert-icon {
width: 62px;
height: 62px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dk-accent);
border-radius: 15px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.dk-alert-icon svg {
width: 34px;
height: 34px;
display: block;
}
.dk-alert-code {
font-family: var(--dk-display);
font-size: 15px;
line-height: 1;
letter-spacing: 3px;
color: var(--dk-accent);
margin: 0 0 8px;
}
.dk-alert-title {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.dk-alert-text {
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, .72);
margin: 0 0 20px;
}
.dk-alert-text code {
display: inline-block;
max-width: 100%;
padding: 2px 7px;
background: rgba(0, 0, 0, .4);
border-radius: 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
color: var(--dk-accent);
word-break: break-all;
}
.dk-alert-acts {
display: flex;
gap: 8px;
}
.dk-alert-acts .dk-btn {
flex: 1 1 0;
padding: 11px 14px;
font-size: 11.5px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* the Finder's "recently opened", which is the useful part of being lost */
.dk-alert-more {
margin: 20px 0 0;
padding: 16px 0 0;
border-top: 1px solid rgba(255, 255, 255, .13);
}
.dk-alert-more-head {
font-size: 10px;
line-height: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
margin: 0 0 10px;
}
.dk-alert-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.dk-alert-links a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
background: rgba(255, 255, 255, .08);
border-radius: 7px;
font-size: 12.5px;
color: rgba(255, 255, 255, .88);
text-decoration: none;
}
.dk-alert-links a:hover {
background: var(--dk-accent);
color: #1a1a1a;
}
.dk-alert-links svg {
width: 14px;
height: 14px;
color: var(--dk-accent);
}
.dk-alert-links a:hover svg {
color: #1a1a1a;
}
@keyframes dk-alert-in {
from { opacity: 0; transform: scale(.95); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.dk-alert { animation: none; }
}
@media screen and (max-width: 600px) {
.dk-alert {
padding: 22px 18px 18px;
}
.dk-alert-acts {
flex-direction: column;
}
}
/* ==========================================================================
27. THE SHELL ON A PHONE, PART TWO
Below 900 the window stops being the scroller and the page takes over, and
two things that were right on a laptop stop being right here.
========================================================================== */
@media screen and (max-width: 900px) {
/* The logo plays inside the stage, and on a phone the stage is as tall as
the whole page — so the animation was centred somewhere down the middle
of the document rather than on the screen, and half the time you could
not see it at all. Pinned to the viewport instead. */
.dk-relaunch {
position: fixed;
inset: 0;
z-index: 45;
}
.dk-relaunch-art {
width: min(78%, 420px);
}
/* the hint belongs on the screen too, not at the foot of a long page */
.at-shut .dk-stage::after {
position: fixed;
bottom: 96px;
}
/* With the window gone the page has nothing in it, so it should stop being
a long page: the desktop fills the screen and stays put. */
.at-shut .dk-stage {
min-height: calc(100svh - 130px);
}
.at-shut {
overflow: hidden;
}
/* --- about: the story gets its scroll box back --------------------------
On a laptop the pane scrolls and the story can simply be long. On a phone
that makes one endless column and the contact details are a thumb-ache
away, so the story goes back to being its own scrolling window, the way
it was before it moved into the shell. */
.dk-page .at-about-scroll {
max-height: 52vh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-right: 14px;
/* the last line fades, so it reads as "there is more" */
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent 100%);
}
.dk-page .at-about-scroll p:last-child {
margin-bottom: 26px;
}
}