/* Layout: a streetwear lookbook sheet framed on a dark forest ground. Big condensed-heavy headlines, bracketed mono labels, clipped-corner cards, a spray-painted 狐 (fox) tag, and a misty pine-forest band at the bottom. One deliberate look in every theme. */ :root { --frame: #26302a; /* deep forest ground behind the sheet */ --bg: #4c5a50; /* the sheet: moss slate */ --bg-2: #57665b; /* raised band */ --sage: #a8b6a6; /* light card */ --sage-2: #bcc8ba; --mist: #eef2eb; /* headline + body on the sheet */ --mist-2: #d6ded2; /* secondary text on the sheet */ --pine: #161e19; /* text on light cards, dark cards */ --line: rgba(238, 242, 235, 0.24); --font-display: 'Dela Gothic One', 'Arial Black', Impact, sans-serif; --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'M PLUS 1 Code', ui-monospace, 'SF Mono', Menlo, monospace; --step-0: 1rem; --step-1: 1.2rem; --step-2: clamp(1.9rem, 5vw, 3rem); --step-3: clamp(2.9rem, 9vw, 5.6rem); --cut: 16px; /* clipped-corner size */ --measure: 58ch; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--frame); color: var(--mist); font: 400 var(--step-0)/1.7 var(--font-body); padding-block: 0; } img, video { max-width: 100%; display: block; } a { color: inherit; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; } .skip { position: absolute; left: 16px; top: -80px; z-index: 30; background: var(--mist); color: var(--pine); padding: 10px 14px; font-weight: 700; text-decoration: none; } .skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); } /* The sheet */ .sheet { max-width: 1180px; margin: 0 auto; background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } .pad { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } @media (min-width: 900px) { .pad { padding-left: 48px; padding-right: 48px; } } /* Type */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; margin: 0; letter-spacing: 0.01em; text-wrap: balance; } h1 { font-size: var(--step-3); line-height: 0.95; } h2 { font-size: var(--step-2); line-height: 1; } h3 { font-size: 1.05rem; line-height: 1.2; } .mono { font: 400 0.75rem/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .br::before { content: "[ "; } .br::after { content: " ]"; } .muted { color: var(--mist-2); } /* Nav */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; flex-wrap: wrap; } .mark { font: 400 1.15rem/1 var(--font-display); text-decoration: none; letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: 8px; } /* 狐 as a stamp: lighter weight so the strokes stay readable at small sizes */ .mark .jp { font: 400 1.15rem/1 var(--font-body); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid currentColor; border-radius: 4px; } .mark { align-items: center; } .nav ul { list-style: none; margin: 0; padding: 0; display: none; gap: 28px; } @media (min-width: 760px) { .nav ul { display: flex; } } .nav ul a { text-decoration: none; } .nav ul a:hover { text-decoration: underline; } .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--mist); color: var(--pine); text-decoration: none; font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .pill:hover { background: #ffffff; } /* Hero */ .hero { position: relative; overflow: hidden; padding-block: 8px 36px; } .hero-grid { position: relative; display: grid; gap: 24px; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.7fr); align-items: center; gap: 28px; } } .hero-copy { position: relative; z-index: 2; display: grid; gap: 22px; align-content: center; } .crumbs { display: flex; flex-wrap: wrap; gap: 6px 14px; } .spec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; max-width: 26rem; } .spec-row { display: grid; gap: 10px; align-content: start; } .spec-head { font: 400 1rem/1 var(--font-display); letter-spacing: 0.1em; color: var(--mist); padding-bottom: 9px; border-bottom: 1px solid var(--line); } .spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.8rem; color: var(--mist-2); } .lede { margin: 0; max-width: 34ch; color: var(--mist); font-size: var(--step-1); line-height: 1.6; } .octa { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; width: fit-content; } .octa .shape { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; } /* The emblem: solid octagon, dashed "cut line" inside, scissors aimed up and out */ .octa .o-base { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .o-fill { fill: var(--mist); } .o-cut { fill: none; stroke: var(--pine); stroke-width: 1.2; stroke-dasharray: 3 2.6; opacity: 0.5; } .o-snip { position: relative; width: 54%; height: auto; overflow: visible; color: var(--pine); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transform: rotate(-45deg) translateX(6%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .o-snip g { transform-box: view-box; transform-origin: 15.5px 9px; } .octa:hover .o-base, .octa:focus-visible .o-base { transform: rotate(22.5deg); } .octa:hover .o-snip, .octa:focus-visible .o-snip { transform: rotate(-45deg) translateX(13%); } .octa:hover .o-fill { fill: #ffffff; } .octa:focus-visible { outline: 2px solid var(--mist); outline-offset: 6px; } @media (prefers-reduced-motion: no-preference) { .octa:hover .b1, .octa:focus-visible .b1 { animation: snip-a 0.45s ease-in-out 2; } .octa:hover .b2, .octa:focus-visible .b2 { animation: snip-b 0.45s ease-in-out 2; } } @keyframes snip-a { 50% { transform: rotate(-16deg); } } @keyframes snip-b { 50% { transform: rotate(16deg); } } .octa strong { display: block; font: 400 1.25rem/1.1 var(--font-display); text-transform: uppercase; } .octa small { display: block; } .hero-media { position: relative; z-index: 1; justify-self: center; width: min(100%, 400px); } .frame-video { position: relative; aspect-ratio: 9 / 16; max-width: 100%; background: var(--pine); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .frame-video video, .frame-video img { width: 100%; height: 100%; object-fit: cover; } .hero-media .frame-video { box-shadow: 0 20px 50px rgba(0,0,0,.3); } .tag { position: absolute; pointer-events: none; z-index: 0; color: var(--mist); opacity: 0.38; font: 400 clamp(16rem, 48vw, 34rem)/0.8 var(--font-display); filter: url(#spray); user-select: none; } .hero .tag { left: -28%; top: -6%; transform: translateY(var(--ty, 0px)) rotate(calc(-8deg + var(--spin, 0deg))); } .vert { display: none; position: absolute; z-index: 2; right: 0; top: 18px; writing-mode: vertical-rl; font: 400 0.85rem/1 var(--font-body); letter-spacing: 0.3em; color: var(--mist-2); } .hero-side { display: grid; gap: 14px; position: relative; z-index: 2; } .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .thumb { display: block; text-decoration: none; } .thumb .frame-video { aspect-ratio: 3 / 4; background: var(--sage); } .pager { display: flex; align-items: center; gap: 10px; } .pager i { flex: 1; height: 1px; background: var(--line); } @media (max-width: 899px) { .hero-side { display: none; } } /* Section scaffolding */ .band { position: relative; border-top: 1px solid var(--line); padding-block: 48px 56px; } .band-head { display: grid; gap: 18px; margin-bottom: 30px; } @media (min-width: 900px) { .band-head { grid-template-columns: 1.2fr 0.8fr 0.8fr auto; align-items: end; } } .band-head p { margin: 0; } /* Cuts grid */ .grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } } .span-2 { grid-column: span 2; } .clip { display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; } .clip .frame-video { aspect-ratio: 9 / 16; background: var(--sage); } .clip figcaption { display: grid; gap: 2px; } .clip figcaption b { font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .clip figcaption span { font-size: 0.875rem; color: var(--mist-2); line-height: 1.5; } .feature { position: relative; overflow: hidden; background: var(--pine); color: var(--mist); min-height: 320px; padding: 26px; display: grid; align-content: space-between; gap: 24px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .feature .tag { transform: translateY(var(--ty, 0px)) rotate(var(--spin, 0deg)); right: -6%; bottom: -18%; font-size: clamp(14rem, 34vw, 22rem); opacity: 0.22; } .feature > *:not(.tag):not(.card-pines) { position: relative; z-index: 1; } .feature h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; } .feature p { margin: 0; max-width: 34ch; color: var(--mist-2); } .menu { background: var(--sage); color: var(--pine); padding: 26px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .menu .mono { color: var(--pine); } .menu ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; } .menu li { padding: 12px 0; border-top: 1px solid rgba(22, 30, 25, 0.22); display: grid; gap: 2px; min-width: 0; } .menu li b { font: 400 0.95rem/1.25 var(--font-display); text-transform: uppercase; } .menu li span { font-size: 0.875rem; line-height: 1.5; } @media (max-width: 899px) { .feature.span-2, .menu.span-2 { grid-column: 1 / -1; } } /* Booking */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { counter-increment: s; background: var(--bg-2); padding: 22px; display: grid; gap: 8px; align-content: start; min-width: 0; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); } .steps li::before { content: "0" counter(s) " ——"; font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--mist-2); } .steps p { margin: 0; color: var(--mist); } .info { display: grid; gap: 18px; margin-top: 18px; } @media (min-width: 900px) { .info { grid-template-columns: 1.2fr 1fr; } } .panel { background: var(--sage); color: var(--pine); padding: 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); min-width: 0; } .panel .mono { color: var(--pine); } .hours { list-style: none; margin: 10px 0 0; padding: 0; } .hours li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(22, 30, 25, 0.22); } .hours span:last-child { white-space: nowrap; font: 600 0.875rem/1.6 var(--font-mono); text-align: right; } .panel p { margin: 10px 0 0; font-size: 0.9375rem; } .notes { display: grid; gap: 14px; align-content: start; } .note { border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 6px; } .note p { margin: 0; color: var(--mist-2); } /* FAQ */ .faq { max-width: 760px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-mono); } .faq details[open] summary::after { content: "−"; } .faq details p { margin: 0 0 16px; color: var(--mist-2); } /* Forest band */ .forest { position: relative; overflow: hidden; min-height: 560px; background: linear-gradient(#56665b, #3a463e 60%, #1c241f); } .forest canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .forest .tag { left: 50%; top: -2%; transform: translate(-50%, var(--ty, 0px)) rotate(calc(-6deg + var(--spin, 0deg))); opacity: 0.32; font-size: clamp(18rem, 55vw, 36rem); } .forest-inner { position: relative; z-index: 2; min-height: 560px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding-block: 40px 36px; } .forest-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .forest-top p { margin: 0; max-width: 24ch; } .forest h2 { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 0.98; align-self: end; text-shadow: 0 2px 20px rgba(0,0,0,.35); } .forest-bottom { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; } .forest-bottom .octa { color: var(--mist); } /* Footer */ .foot { background: var(--pine); color: var(--mist-2); } .foot .inner { padding-block: 26px 34px; display: grid; gap: 12px; font-size: 0.9375rem; } .foot p { margin: 0; } .foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .foot strong { color: var(--mist); font-weight: 400; font-family: var(--font-display); } .contact { overflow-wrap: anywhere; } /* Policy pages */ .doc .band { border-top: 0; } .doc article { background: var(--sage); color: var(--pine); max-width: 780px; padding: 36px clamp(18px, 4vw, 44px); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .doc article h1 { font-size: var(--step-2); line-height: 1; margin-bottom: 8px; } .doc article h2 { font-size: 1.35rem; margin: 30px 0 8px; } .doc article a { color: var(--pine); } .doc article :focus-visible { outline-color: var(--pine); } .doc .updated { margin: 0 0 22px; color: var(--pine); } .doc ul { padding-left: 1.2em; } .doc li + li { margin-top: 6px; } .doc p, .doc li { max-width: var(--measure); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (min-width: 900px) { .vert { display: block; } } /* Why Fox Cuts */ .why { display: grid; gap: 22px; } @media (min-width: 900px) { .why { grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; } } .why-head { display: grid; gap: 12px; } .why-head h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); } .why-body { display: grid; gap: 14px; max-width: 54ch; } .why-body p { margin: 0; font-size: var(--step-1); line-height: 1.6; } .why-body p + p { color: var(--mist-2); font-size: var(--step-0); } .chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .chips li { border: 1px solid var(--line); padding: 6px 10px; } /* Exhibit A: the botched cut */ .exhibit { position: relative; margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; } .exhibit-photo { position: relative; aspect-ratio: 4 / 5; background: var(--pine); box-shadow: 0 18px 40px rgba(0,0,0,.35); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .exhibit-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05); } .exhibit figcaption { display: grid; gap: 6px; } .exhibit figcaption b { color: var(--mist); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .exhibit figcaption span { color: var(--mist-2); font-size: 0.9rem; line-height: 1.5; } .why-body .kicker { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-1); color: var(--mist); line-height: 1.25; margin-top: 6px; } .lede strong { display: block; text-wrap: balance; color: var(--mist); font-weight: 700; margin-bottom: 4px; } .feature p + p { color: var(--mist-2); } .forest h2 .sub { display: block; font-size: 0.5em; margin-top: 0.5em; letter-spacing: 0.04em; } /* Foxcut pair: two clips, one caption */ .pair-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } @media (min-width: 900px) { .pair-videos { gap: 22px; } } @media (max-width: 899px) { .pair.span-2 { grid-column: 1 / -1; } } .socials { display: flex; flex-wrap: wrap; gap: 10px; } /* Sticky header. On the home page the name fades in once the big one scrolls away. */ .site-head { position: sticky; top: 0; z-index: 30; background: rgba(76, 90, 80, 0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .site-head .nav { padding-block: 14px; } .mark-name { transition: opacity 0.35s ease, translate 0.35s ease; } .js .site-head:not(.past) .mark-name { opacity: 0; translate: -6px 0; } /* Scroll progress: a dashed cut line with scissors snipping along it */ .cutline { position: absolute; left: 0; right: 0; bottom: -7px; height: 14px; pointer-events: none; --p: 0; } .cutline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px dashed var(--line); } .cutline i { position: absolute; left: 0; top: 7px; width: 100%; height: 1px; background: var(--mist); transform-origin: 0 50%; transform: scaleX(var(--p)); } .cutline svg { position: absolute; top: 0; left: calc(var(--p) * (100% - 22px)); width: 22px; height: 14px; color: var(--mist); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .cutline g { transform-box: view-box; transform-origin: 15.5px 9px; } .cutline .b1 { transform: rotate(calc(var(--snip, 0deg) * -1)); } .cutline .b2 { transform: rotate(var(--snip, 0deg)); } @media (prefers-reduced-motion: reduce) { .cutline { display: none; } } /* The name: one wordmark, two lines, sized to its column */ .hero-copy { container-type: inline-size; } .name { font-size: var(--step-3); font-size: min(16.5cqi, 4.6rem); line-height: 0.92; letter-spacing: 0; } .name .nw { white-space: nowrap; } .name .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.04em; margin: -0.1em 0 -0.04em; } .name .w > span { display: inline-block; } /* Motion. Only runs when the visitor hasn't asked for reduced motion. */ .anim .name .w > span { translate: 0 110%; transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms); } .anim .hero-in { opacity: 0; translate: 0 18px; transition: opacity 0.8s ease var(--d, 0ms), translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms); } .anim.ready .name .w > span, .anim.ready .hero-in { translate: 0 0; opacity: 1; } .anim .r { opacity: 0; translate: 0 24px; transition: opacity 0.7s ease var(--d, 0ms), translate 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms); } .anim .r.in { opacity: 1; translate: 0 0; } .clip .frame-video { transition: translate 0.35s ease; } .clip:hover .frame-video { translate: 0 -4px; } section[id] { scroll-margin-top: 76px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* "here" meme: marker circle + arrow around the 9th grade photo, looping like a gif */ #why { overflow-x: clip; } .here-mark { position: absolute; left: -10%; top: -8.667%; width: 166.667%; height: auto; overflow: visible; pointer-events: none; z-index: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .here-ring { stroke: #ff3b30; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 0; } .here-shaft, .here-head { stroke: #ffffff; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 0; } .here-word { position: absolute; left: 123%; top: -4.7%; z-index: 3; pointer-events: none; white-space: nowrap; font: 400 20cqi/1 'Caveat Brush', var(--font-display); color: #ff3b30; transform: rotate(-12deg); } @media (prefers-reduced-motion: no-preference) { .here-ring { animation: here-ring 4.2s linear infinite; } .here-shaft { animation: here-shaft 4.2s linear infinite; } .here-head { animation: here-head 4.2s linear infinite; } .here-word { animation: here-word 4.2s steps(4, end) infinite; } } @keyframes here-ring { 0% { stroke-dashoffset: 1; opacity: 1; } 24% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes here-shaft { 0%, 21.9% { stroke-dashoffset: 1; opacity: 0; } 22% { stroke-dashoffset: 1; opacity: 1; } 33% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes here-head { 0%, 31.9% { stroke-dashoffset: 1; opacity: 0; } 32% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes here-word { 0%, 36% { clip-path: inset(0 100% 0 0); opacity: 1; } 48% { clip-path: inset(0 0 0 0); } 84% { clip-path: inset(0 0 0 0); opacity: 1; } 93%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } } /* Gapless loops: two copies of each clip trade places on the last frame */ .frame-video video { position: absolute; inset: 0; } .has-twin video:not(.on) { opacity: 0; } /* Before / after pair */ .ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(48px, 14vw, 96px); max-width: 500px; margin: 34px 0 0 10px; } .shot { position: relative; container-type: inline-size; } .ba-before { transform: rotate(-2.5deg); z-index: 2; } .ba-after { transform: rotate(3deg); margin-top: 56px; } .ba-after .exhibit-photo img { filter: none; } .ba-note { grid-column: 1 / -1; margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var(--mist); color: var(--mist-2); font-size: 1rem; line-height: 1.55; max-width: 40ch; } .ba-note strong { display: block; color: var(--mist); font: 400 1.05rem/1.25 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .ba-before, .ba-after { transform: none; } } .ba figcaption { padding-top: 16px; } /* The story line, set apart in the typewriter face */ .why-body .confess { font-family: var(--font-mono); font-size: 1.08rem; line-height: 1.65; color: var(--mist); letter-spacing: 0.01em; } /* Misty pine forest motif, carried through the page */ :root { --ridge: url("data:image/svg+xml,"); } .band::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px; pointer-events: none; background: var(--ridge) repeat-x left bottom / auto 40px; } .band:nth-of-type(2n)::before { background-position-x: -230px; } .band:nth-of-type(3n)::before { background-position-x: -410px; transform: scaleX(-1); } .hero { isolation: isolate; } .hero-grid { z-index: 2; } .hero-forest { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 68%; z-index: 0; pointer-events: none; } .mist { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .mist::before, .mist::after { content: ""; position: absolute; left: -40%; width: 180%; height: 34%; top: 46%; background: radial-gradient(ellipse 40% 50% at 30% 50%, rgba(214, 222, 210, 0.16), transparent 70%), radial-gradient(ellipse 35% 45% at 72% 55%, rgba(214, 222, 210, 0.12), transparent 70%); filter: blur(14px); } .mist::after { top: 68%; height: 30%; opacity: 0.8; } .forest .mist::before { top: 38%; } .forest .mist::after { top: 60%; } @media (prefers-reduced-motion: no-preference) { .mist::before { animation: mist-drift 60s ease-in-out infinite alternate; } .mist::after { animation: mist-drift 85s ease-in-out infinite alternate-reverse; } } @keyframes mist-drift { from { transform: translateX(-10%); } to { transform: translateX(10%); } } .card-pines { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; z-index: 0; background: var(--ridge) repeat-x -120px bottom / auto 110px; opacity: 0.55; } .hero .mist { opacity: 0.5; } /* Sound button on each clip */ .snd { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(22, 30, 25, 0.74); color: var(--mist); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .snd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .snd .spk { fill: currentColor; stroke: none; } .snd .w-on { display: none; } .snd[aria-pressed="true"] { background: var(--mist); color: var(--pine); } .snd[aria-pressed="true"] .w-on { display: inline; } .snd[aria-pressed="true"] .w-off { display: none; } .snd:hover { background: rgba(22, 30, 25, 0.9); } .snd[aria-pressed="true"]:hover { background: #ffffff; } .snd:focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; } @media (max-width: 520px) { .pair .snd span { display: none; } .pair .snd { padding: 0 9px; } }