/* ============================================================================= nfts.auction — design system A sticker-book universe on warm paper. One free NFT, every single day. Lineage: the Slush "inflatable sticker on pastel paper" language — crushed display type, hand-cut black outlines, pill nav, marquee, full-bleed colour bands, a rainbow sticker palette. Own touches (how this is NOT Slush): - Warm CREAM paper ground, not cold sky-blue/white. - GRAPE/VIOLET is the signature colour; the blue becomes one sticker among many. - Bolder 2px hand-cut outlines for a chunkier cut-out feel. - A daily COUNTDOWN clock treated as a sculptural object. - A live MISSION counter ("an NFT in every wallet on Earth"). - The concept flip: "the only auction where everyone wins." ========================================================================== */ /* ---------- Fonts ---------------------------------------------------------- */ /* Display: Anton (a free stand-in for the crushed condensed display face). UI/body: Inter (the suggested Aeonik substitute). Loaded in each page's via Google Fonts with system fallbacks below. */ /* ---------- Tokens -------------------------------------------------------- */ :root { /* Ink & paper */ --ink: #101010; --ink-soft: #3a3a37; --paper: #fbf5e9; /* warm cream page canvas — the signature "paper" */ --white: #ffffff; /* Section grounds (the scroll rhythm — full-bleed colour bands) */ --ground-cream: #fcf1dd; --ground-sky: #dbecff; --ground-mint: #d2f2df; --ground-lilac: #ece0ff; --ground-blush: #ffe4f1; --ground-gray: #ebe7dc; /* warm neutral interlude (not cold #ccc) */ /* Sticker palette (a shared set — never one "the" accent) */ --coral: #ff5a36; --sun: #ffc73a; --mint: #22cc7a; --sky: #4da2ff; --grape: #6b4bff; /* signature — the "drop" object, primary brand hit */ --bubble: #ff6fcf; /* Roles */ --cta-bg: var(--ink); --cta-fg: var(--white); --border: var(--ink); /* Type scale (fluid) */ --fs-mega: clamp(3.5rem, 13vw, 12rem); /* the sculptural word */ --fs-display: clamp(2.5rem, 8vw, 6rem); --fs-h1: clamp(2.4rem, 7vw, 5rem); --fs-h2: clamp(1.9rem, 4.5vw, 3.25rem); --fs-h3: clamp(1.4rem, 2.6vw, 1.9rem); --fs-lead: clamp(1.1rem, 1.6vw, 1.45rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-cap: 0.75rem; /* Fonts */ --font-display: "Anton", "Archivo Black", Impact, "Haettenschweiler", "Franklin Gothic Bold", sans-serif; --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Radius */ --r-pill: 999px; --r-card: 22px; --r-lg: 34px; --r-sm: 14px; /* Outline weight — chunkier than Slush's 1px */ --stroke: 2px; --stroke-bold: 3px; /* Spacing rhythm */ --gap: clamp(3.5rem, 8vw, 7rem); /* section gap */ --pad-x: clamp(1.1rem, 4vw, 3rem); --wrap: 1240px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill); z-index: 200; transition: top .2s var(--ease); font-weight: 700; font-size: var(--fs-small); } .skip-link:focus { top: 12px; } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Type utilities ----------------------------------------------- */ .display, .mega, h1, h2 { font-family: var(--font-display); font-weight: 400; } .mega { font-size: var(--fs-mega); line-height: 0.82; /* crushed leading — the sculptural stack */ letter-spacing: 0.005em; text-transform: uppercase; } .display { font-size: var(--fs-display); line-height: 0.84; text-transform: uppercase; } .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 0.9; text-transform: uppercase; } .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 0.92; text-transform: uppercase; } .h3 { font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.02em; } .lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; } .eyebrow { font-weight: 800; font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: 0.14em; } .muted { color: var(--ink-soft); } .small { font-size: var(--fs-small); } .center { text-align: center; } /* UI headings may break long words; display type overflows gracefully instead (min-width:0 on hero/split children stops it blowing out the grid) */ .h1, .h2, .h3, .statement { overflow-wrap: break-word; } /* artwork titles are variable-length: size them to always fit a half column */ .art-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; font-size: clamp(2.1rem, 4.6vw, 3.6rem); overflow-wrap: anywhere; } /* ---------- Layout -------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--gap); } .stack > * + * { margin-top: 1rem; } .stack-lg > * + * { margin-top: 1.75rem; } /* Full-bleed colour bands */ .band { position: relative; } .band--cream { background: var(--ground-cream); } .band--sky { background: var(--ground-sky); } .band--mint { background: var(--ground-mint); } .band--lilac { background: var(--ground-lilac); } .band--blush { background: var(--ground-blush); } .band--gray { background: var(--ground-gray); } .band--paper { background: var(--paper); } .band--ink { background: var(--ink); color: var(--paper); } /* ---------- Marquee ------------------------------------------------------- */ .marquee { background: var(--ink); color: var(--paper); border-bottom: var(--stroke) solid var(--ink); overflow: hidden; white-space: nowrap; --marquee-duration: 34s; } .marquee__track { display: inline-flex; align-items: center; gap: 0; will-change: transform; animation: marquee var(--marquee-duration) linear infinite; } .marquee__item { display: inline-flex; align-items: center; font-weight: 800; font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: 0.18em; padding-block: 9px; } .marquee__item::after { content: "★"; margin-inline: 1.1em; opacity: .6; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; transform: translateX(0); } } /* ---------- Nav ----------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: var(--stroke) solid var(--ink); } .nav__inner { max-width: var(--wrap); margin-inline: auto; padding: 12px var(--pad-x); display: flex; align-items: center; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; } .badge { width: 42px; height: 42px; border-radius: var(--r-pill); border: var(--stroke) solid var(--ink); background: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; flex: 0 0 auto; } .brand__word { font-size: 1.02rem; letter-spacing: -0.02em; } .brand__word b { color: var(--grape); } .nav__spacer { flex: 1 1 auto; } .pillnav { display: flex; align-items: center; gap: 6px; } .pill { display: inline-flex; align-items: center; gap: 8px; border: var(--stroke) solid var(--ink); background: var(--white); border-radius: var(--r-pill); padding: 9px 15px; font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.01em; transition: transform .15s var(--ease), background .15s var(--ease); } .pill:hover { transform: translateY(-2px); background: var(--ground-lilac); } .pill[aria-current="page"] { background: var(--grape); color: var(--white); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: var(--stroke) solid var(--ink); border-radius: var(--r-pill); padding: 12px 20px; font-weight: 800; font-size: var(--fs-small); letter-spacing: 0.02em; transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--fill { background: var(--ink); color: var(--white); } .btn--fill:hover { background: #000; } .btn--ghost { background: var(--white); color: var(--ink); } .btn--ghost:hover { background: var(--ground-sun, var(--sun)); } .btn--grape { background: var(--grape); color: var(--white); } .btn--grape:hover { background: #5a3ce8; } .btn--lg { padding: 17px 30px; font-size: 1.05rem; } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* mobile menu toggle (the "plus" control, Slush-style) */ .menu-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: var(--stroke) solid var(--ink); background: var(--white); font-size: 1.5rem; line-height: 1; place-items: center; } .menu-toggle span { display: block; transition: transform .2s var(--ease); } .nav.is-open .menu-toggle span { transform: rotate(45deg); } /* ---------- Buttons row --------------------------------------------------- */ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Cards & stickers ---------------------------------------------- */ .card { background: var(--white); border: var(--stroke) solid var(--ink); border-radius: var(--r-card); padding: clamp(1.25rem, 2.5vw, 1.75rem); } .card--lg { border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); } .card--cream { background: var(--ground-cream); } .card--mint { background: var(--ground-mint); } .card--lilac { background: var(--ground-lilac); } .card--sky { background: var(--ground-sky); } .card--blush { background: var(--ground-blush); } .tag { display: inline-flex; align-items: center; gap: 7px; border: var(--stroke) solid var(--ink); border-radius: var(--r-pill); padding: 6px 13px; font-weight: 800; font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: 0.08em; background: var(--white); } .tag--coral { background: var(--coral); } .tag--sun { background: var(--sun); } .tag--mint { background: var(--mint); } .tag--sky { background: var(--sky); } .tag--grape { background: var(--grape); color: var(--white); } .tag--bubble { background: var(--bubble); } .tag--live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 1.5px solid var(--ink); animation: pulse 1.4s var(--ease) infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .tag--live::before { animation: none; } } /* Floating decorative stickers */ .sticker { position: absolute; z-index: 2; border: var(--stroke) solid var(--ink); border-radius: var(--r-sm); display: grid; place-items: center; transform: rotate(var(--rot, -6deg)); } .sticker svg { width: 62%; height: 62%; } .float { animation: float 6s ease-in-out infinite; } .float--slow { animation-duration: 8.5s; } @keyframes float { 0%,100% { transform: rotate(var(--rot, -6deg)) translateY(0); } 50% { transform: rotate(var(--rot, -6deg)) translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .float { animation: none; } } /* ---------- Grid helpers -------------------------------------------------- */ .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================================================= THE DROP — signature sculptural object (stands in for Slush's 3D ribbon) A big grainy, inflated "chip" that holds today's artwork. ========================================================================== */ .drop { position: relative; width: min(92vw, 440px); aspect-ratio: 1 / 1.12; margin-inline: auto; } .drop__frame { position: absolute; inset: 0; border: var(--stroke-bold) solid var(--ink); border-radius: 40px; background: var(--white); overflow: hidden; z-index: 2; } .drop__art { position: absolute; inset: 0; } .drop__art svg, .drop__art img { width: 100%; height: 100%; object-fit: cover; } /* grain overlay to read as a render, not a flat fill */ .drop__grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply; opacity: 0.10; background-image: url("data:image/svg+xml;utf8,"); } .drop__label { position: absolute; z-index: 4; left: 50%; bottom: -18px; transform: translateX(-50%); background: var(--grape); color: var(--white); border: var(--stroke) solid var(--ink); border-radius: var(--r-pill); padding: 9px 18px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-cap); white-space: nowrap; } /* the inflated colour blob behind the frame — the atmospheric weight */ .drop__blob { position: absolute; inset: -9% -12% -12% -9%; z-index: 1; border-radius: 46% 54% 52% 48% / 55% 46% 54% 45%; background: radial-gradient(60% 55% at 35% 30%, #a48cff 0%, var(--grape) 45%, #4a2fd0 100%); border: var(--stroke-bold) solid var(--ink); } .drop--float { animation: dropfloat 7s ease-in-out infinite; } @keyframes dropfloat { 0%,100% { transform: translateY(0) rotate(-1.5deg);} 50% { transform: translateY(-14px) rotate(1.5deg);} } @media (prefers-reduced-motion: reduce) { .drop--float { animation: none; } } /* ============================================================================= COUNTDOWN — the daily ritual, as a sculptural row of chips ========================================================================== */ .countdown { display: inline-flex; gap: 10px; align-items: stretch; } .count-chip { min-width: 84px; background: var(--white); border: var(--stroke) solid var(--ink); border-radius: 18px; padding: 12px 14px 10px; text-align: center; } .count-chip b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 0.9; font-variant-numeric: tabular-nums; } .count-chip span { font-size: var(--fs-cap); text-transform: uppercase; font-weight: 800; letter-spacing: 0.12em; color: var(--ink-soft); } .count-chip:nth-child(1) { background: var(--ground-lilac); } .count-chip:nth-child(2) { background: var(--ground-sky); } .count-chip:nth-child(3) { background: var(--ground-mint); } .count-chip:nth-child(4) { background: var(--ground-blush); } /* ============================================================================= MISSION counter — "an NFT in every wallet on Earth" ========================================================================== */ .counter { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 10vw, 7rem); line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ---------- Steps (how it works) ----------------------------------------- */ .step { position: relative; } .step__n { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--grape); -webkit-text-stroke: 1.5px var(--ink); } /* ---------- Forms --------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-weight: 800; font-size: var(--fs-small); } .field input, .field select, .field textarea { font: inherit; border: var(--stroke) solid var(--ink); border-radius: var(--r-sm); padding: 13px 15px; background: var(--white); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--grape); outline-offset: 1px; } .form-note { font-size: var(--fs-small); color: var(--ink-soft); } /* ---------- Gallery ------------------------------------------------------- */ .tile { border: var(--stroke) solid var(--ink); border-radius: var(--r-card); overflow: hidden; background: var(--white); transition: transform .18s var(--ease); } .tile:hover { transform: translateY(-4px) rotate(-0.6deg); } .tile__art { aspect-ratio: 1; border-bottom: var(--stroke) solid var(--ink); } .tile__art svg { width: 100%; height: 100%; } .tile__meta { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tile__meta b { font-weight: 800; } .tile__meta span { font-size: var(--fs-cap); color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Logo wall ----------------------------------------------------- */ .logowall { display: flex; flex-wrap: wrap; gap: 12px; } .logowall .slot { border: var(--stroke) dashed var(--ink); border-radius: var(--r-pill); padding: 12px 22px; font-weight: 800; letter-spacing: 0.04em; background: color-mix(in srgb, var(--white) 60%, transparent); } /* ---------- FAQ ----------------------------------------------------------- */ .faq { border: var(--stroke) solid var(--ink); border-radius: var(--r-card); background: var(--white); overflow: hidden; } .faq details { border-bottom: var(--stroke) solid var(--ink); } .faq details:last-child { border-bottom: none; } .faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 800; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--grape); } .faq details[open] summary::after { content: "–"; } .faq p { padding: 0 20px 20px; color: var(--ink-soft); max-width: 62ch; } /* ---------- Footer -------------------------------------------------------- */ .footer { border-top: var(--stroke) solid var(--ink); } .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } .footer a:hover { color: var(--grape); } .footer h4 { font-weight: 800; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; } .footer li + li { margin-top: 8px; } @media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } } /* ============================================================================= MODAL — claim flow (presentational demo of connect/claim) ========================================================================== */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--ink) 55%, transparent); } .modal__card { width: min(94vw, 460px); background: var(--paper); border: var(--stroke-bold) solid var(--ink); border-radius: var(--r-lg); padding: clamp(1.4rem, 4vw, 2.2rem); position: relative; } .modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: var(--r-pill); border: var(--stroke) solid var(--ink); background: var(--white); font-size: 1.3rem; display: grid; place-items: center; } .wallet-list { display: grid; gap: 10px; margin-top: 4px; } .wallet-opt { display: flex; align-items: center; gap: 12px; border: var(--stroke) solid var(--ink); border-radius: var(--r-sm); background: var(--white); padding: 13px 15px; font-weight: 700; text-align: left; transition: background .15s var(--ease), transform .15s var(--ease); } .wallet-opt:hover { background: var(--ground-lilac); transform: translateY(-2px); } .wallet-opt .ico { width: 34px; height: 34px; border-radius: 9px; border: var(--stroke) solid var(--ink); display: grid; place-items: center; flex: 0 0 auto; } .divider { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-weight: 700; font-size: var(--fs-small); margin: 6px 0; } .divider::before, .divider::after { content: ""; height: 2px; background: var(--ink); flex: 1; opacity: .25; } .claim-success { text-align: center; } .claim-success .big { font-family: var(--font-display); font-size: clamp(2.4rem,9vw,3.6rem); line-height: .9; color: var(--grape); -webkit-text-stroke: 1.5px var(--ink); } /* confetti burst */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; } .confetti i { position: absolute; top: -12px; width: 11px; height: 15px; border: 1.5px solid var(--ink); animation: fall linear forwards; } @keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .confetti { display: none; } } /* ============================================================================= HERO layout ========================================================================== */ .hero { position: relative; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); } .hero__inner > * { min-width: 0; } /* stop long display words blowing out the grid */ .hero__word { position: relative; z-index: 3; } .hero__word .mega { color: var(--ink); } .hero__word .mega em { font-style: normal; color: var(--grape); -webkit-text-stroke: 2px var(--ink); } .hero__media { position: relative; display: grid; place-items: center; min-height: 340px; } /* homepage hero — led by the drop (centred poster) */ .hero--lead__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-block: clamp(2rem, 5vw, 4rem); } .hero--lead__inner > * { min-width: 0; } .hero__stage { position: relative; width: min(90vw, 540px); display: grid; place-items: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); /* clear the live pill above the drop */ margin-bottom: clamp(3.5rem, 7vw, 5rem); /* clear the blob + label below the drop */ } .drop--xl { width: min(84vw, 460px); } .hero--lead .tag--live { position: relative; z-index: 4; } /* pill stays above the drop */ .hero__closes { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .hero--lead .mega { color: var(--ink); } .hero--lead .mega em { font-style: normal; color: var(--grape); -webkit-text-stroke: 2px var(--ink); } @media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; text-align: left; } .hero__media { order: -1; margin-bottom: 3.5rem; } /* clear the drop's blob + label */ } /* section header block */ .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .sec-head .lead { max-width: 46ch; } /* pull columns */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; } .split > * { min-width: 0; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } /* big statement */ .statement { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.9; font-size: var(--fs-display); } /* utility spacing */ .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .rot-l { transform: rotate(-2deg); } .rot-r { transform: rotate(2deg); } /* reveal on scroll — only hidden when JS is present (progressive enhancement); without JS, content is fully visible by default */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ---------- Responsive nav ------------------------------------------------ */ @media (max-width: 940px) { .menu-toggle { display: grid; } .pillnav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: var(--stroke) solid var(--ink); padding: 14px var(--pad-x); gap: 8px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); } .nav.is-open .pillnav { opacity: 1; transform: none; pointer-events: auto; } .pill { justify-content: center; } .nav__cta { display: none; } .nav.is-open .nav__cta { display: inline-flex; } }