/* WEBLAUNCHER v2 base layer (loaded before a category's skeleton.css and its variant). * * Three layers of custom properties: * --wl-* the BRAND palette, painted by site-v2.js from config.js (with contrast-safe * derivatives: --wl-accent-on-dark, --wl-accent-on-light, --wl-on-accent ...) * --v-* the VARIANT's vocabulary: every component below paints only from these, * so a variant restyles the whole page by redefining them * --wl-label-* section kicker words (a variant's voice: "README", "THE RECORD") * * Every selector here is one class deep, so a variant overrides without a fight. * Motion lives under .wl-motion-* on ; reduced motion turns ALL of it off. */ :root { --wl-bg: #f2eadb; --wl-fg: #181510; --wl-accent: #ff6b35; --wl-secondary: #ffd15c; --wl-muted: #8a8175; --wl-surface: #e8dfcf; --wl-on-accent: #0c0c0e; --wl-on-secondary: #0c0c0e; --wl-accent-on-bg: #c24a1c; --wl-accent-on-dark: #ff6b35; --wl-accent-on-light: #b8420f; --wl-secondary-on-dark: #ffd15c; --wl-secondary-on-light: #8a6500; --wl-muted-on-bg: #6b6358; --v-bg: var(--wl-bg); --v-fg: var(--wl-fg); --v-soft: color-mix(in srgb, var(--v-fg) 74%, var(--v-bg)); --v-faint: color-mix(in srgb, var(--v-fg) 50%, var(--v-bg)); --v-line: color-mix(in srgb, var(--v-fg) 15%, transparent); --v-line-strong: color-mix(in srgb, var(--v-fg) 32%, transparent); --v-surface: color-mix(in srgb, var(--v-fg) 4%, var(--v-bg)); --v-surface-2: color-mix(in srgb, var(--v-fg) 9%, var(--v-bg)); --v-accent: var(--wl-accent); --v-accent-text: var(--wl-accent-on-bg); --v-on-accent: var(--wl-on-accent); --v-secondary: var(--wl-secondary); --v-seg-1: var(--v-accent); --v-seg-2: var(--v-secondary); --v-seg-3: color-mix(in srgb, var(--v-accent) 55%, var(--v-fg)); --v-seg-4: color-mix(in srgb, var(--v-secondary) 55%, var(--v-bg)); --v-seg-5: color-mix(in srgb, var(--v-accent) 45%, var(--v-bg)); --v-seg-6: var(--v-faint); --v-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --v-font-display: var(--v-font-body); --v-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; --v-display-weight: 800; --v-display-tracking: -0.035em; --v-display-case: none; --v-display-lh: 0.94; --v-title-size: clamp(2.1rem, 5.4vw, 4.4rem); --v-body-size: clamp(1rem, 0.35vw + 0.93rem, 1.14rem); --v-radius: 18px; --v-radius-sm: 10px; --v-radius-lg: 30px; --v-border: 1px solid var(--v-line); --v-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 18px 40px -22px rgb(0 0 0 / 0.35); --v-card-bg: var(--v-surface); --v-card-pad: clamp(22px, 2.6vw, 34px); --v-maxw: 1180px; --v-pad-x: clamp(20px, 5vw, 64px); --v-sec-gap: clamp(84px, 11vw, 156px); --v-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --v-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --wl-label-lore: "The story"; --wl-label-features: "Features"; --wl-label-supply: "Tokenomics"; --wl-label-flow: "Mechanics"; --wl-label-timeline: "Roadmap"; --wl-label-comparison: "Compared"; --wl-label-stats: "Figures"; --wl-label-tweet: "The source"; --wl-label-gallery: "Gallery"; --wl-label-facts: "Verified"; --wl-label-quotes: "Word on the street"; --wl-label-faq: "FAQ"; --wl-label-access: "Access"; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--v-bg); color: var(--v-fg); font-family: var(--v-font-body); font-size: var(--v-body-size); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; color: inherit; } .wl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wl-glyph { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } .wl-num { font-variant-numeric: tabular-nums; } .wl-unit { margin-left: 0.08em; font-size: 0.6em; font-weight: 600; opacity: 0.8; } /* ----------------------------------------------------------- buttons */ .wl-btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.85em 1.2em; border: 1.5px solid var(--v-line-strong); border-radius: 999px; background: transparent; color: var(--v-fg); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--v-spring), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .wl-btn:hover { transform: translateY(-2px); border-color: var(--v-fg); } .wl-btn:focus-visible, .wl-link:focus-visible, .wl-copy:focus-visible { outline: 3px solid var(--v-accent); outline-offset: 3px; } .wl-btn--primary { background: var(--v-accent); border-color: var(--v-accent); color: var(--v-on-accent); } .wl-btn--primary:hover { box-shadow: 0 14px 30px -12px var(--v-accent); border-color: var(--v-accent); } .wl-btn__ca { font-family: var(--v-font-mono); font-size: 0.8em; font-weight: 500; opacity: 0.75; } .wl-copied .wl-btn__ca { opacity: 0.3; } /* ----------------------------------------------------------- marquee */ .wl-marquee { overflow: hidden; white-space: nowrap; user-select: none; } .wl-marquee__track { display: flex; width: max-content; animation: wl-marquee var(--wl-marquee-s, 40s) linear infinite; } .wl-marquee__item { padding: 0 1.6em; } @keyframes wl-marquee { to { transform: translateX(-50%); } } /* ----------------------------------------------------------- sections */ .wl-flow { position: relative; } .wl-sec { position: relative; padding: var(--v-sec-gap) var(--v-pad-x) 0; } .wl-sec__inner { max-width: var(--v-maxw); margin: 0 auto; } .wl-sec__head { margin-bottom: clamp(28px, 4vw, 56px); max-width: 52rem; } .wl-kicker { display: flex; align-items: center; gap: 0.9em; margin: 0 0 1.1em; font-family: var(--v-font-mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v-accent-text); } .wl-kicker .wl-ord { opacity: 0.7; } .wl-kicker__label::before { content: var(--wl-label-lore); } .wl-sec--features .wl-kicker__label::before { content: var(--wl-label-features); } .wl-sec--infographic[data-graphic="supply"] .wl-kicker__label::before { content: var(--wl-label-supply); } .wl-sec--infographic[data-graphic="flow"] .wl-kicker__label::before { content: var(--wl-label-flow); } .wl-sec--infographic[data-graphic="timeline"] .wl-kicker__label::before { content: var(--wl-label-timeline); } .wl-sec--infographic[data-graphic="comparison"] .wl-kicker__label::before { content: var(--wl-label-comparison); } .wl-sec--infographic[data-graphic="stats"] .wl-kicker__label::before { content: var(--wl-label-stats); } .wl-sec--tweet .wl-kicker__label::before { content: var(--wl-label-tweet); } .wl-sec--timeline .wl-kicker__label::before { content: var(--wl-label-timeline); } .wl-sec--gallery .wl-kicker__label::before { content: var(--wl-label-gallery); } .wl-sec--facts .wl-kicker__label::before { content: var(--wl-label-facts); } .wl-sec--quotes .wl-kicker__label::before { content: var(--wl-label-quotes); } .wl-sec--faq .wl-kicker__label::before { content: var(--wl-label-faq); } .wl-sec--access .wl-kicker__label::before { content: var(--wl-label-access); } .wl-sec__title { margin: 0; font-family: var(--v-font-display); font-weight: var(--v-display-weight); font-size: var(--v-title-size); line-height: var(--v-display-lh); letter-spacing: var(--v-display-tracking); text-transform: var(--v-display-case); text-wrap: balance; } /* lore */ .wl-lore { max-width: 46rem; } .wl-lore__lead { margin: 0 0 1em; font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.4; font-weight: 500; text-wrap: pretty; } .wl-lore__p { margin: 0 0 1em; color: var(--v-soft); max-width: 40rem; text-wrap: pretty; } /* features */ .wl-features { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } .wl-feature { position: relative; padding: var(--v-card-pad); background: var(--v-card-bg); border: var(--v-border); border-radius: var(--v-radius); transition: transform 0.35s var(--v-spring), border-color 0.25s; } .wl-feature:hover { transform: translateY(-4px); border-color: var(--v-line-strong); } .wl-feature .wl-ord { position: absolute; top: var(--v-card-pad); right: var(--v-card-pad); font-family: var(--v-font-mono); font-size: 0.75rem; color: var(--v-faint); } .wl-feature__icon { width: 60px; height: 60px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--v-accent) 16%, transparent); color: var(--v-accent-text); overflow: hidden; } .wl-feature__icon .wl-glyph { width: 30px; height: 30px; } .wl-feature__icon--img { background: var(--v-surface-2); } .wl-feature__icon img { width: 100%; height: 100%; object-fit: cover; } .wl-feature__title { margin: 0 0 0.45em; font-family: var(--v-font-display); font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; } .wl-feature__text { margin: 0; color: var(--v-soft); font-size: 0.98rem; line-height: 1.55; } /* ----------------------------------------------------------- infographics */ .wl-infographic { display: grid; gap: clamp(28px, 4vw, 56px); } .wl-caption { margin: 0; color: var(--v-faint); font-size: 0.9rem; } .wl-graphic--supply { display: grid; align-items: center; gap: clamp(28px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .wl-donut { margin: 0; display: grid; gap: 26px; justify-items: center; } .wl-donut__chart { position: relative; width: min(100%, 420px); aspect-ratio: 1; } .wl-donut__svg { width: 100%; height: 100%; overflow: visible; } .wl-donut__ticks line { stroke: var(--v-line-strong); stroke-width: 1.2; } .wl-donut__track { fill: none; stroke: var(--v-surface-2); stroke-width: 26; } .wl-donut__seg { fill: none; stroke-width: 26; stroke-linecap: butt; } .wl-seg-1 { stroke: var(--v-seg-1); background: var(--v-seg-1); fill: var(--v-seg-1); } .wl-seg-2 { stroke: var(--v-seg-2); background: var(--v-seg-2); fill: var(--v-seg-2); } .wl-seg-3 { stroke: var(--v-seg-3); background: var(--v-seg-3); fill: var(--v-seg-3); } .wl-seg-4 { stroke: var(--v-seg-4); background: var(--v-seg-4); fill: var(--v-seg-4); } .wl-seg-5 { stroke: var(--v-seg-5); background: var(--v-seg-5); fill: var(--v-seg-5); } .wl-seg-6 { stroke: var(--v-seg-6); background: var(--v-seg-6); fill: var(--v-seg-6); } .wl-donut .wl-donut__seg { fill: none; } .wl-donut__center { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; } .wl-donut__value { font-family: var(--v-font-display); font-weight: var(--v-display-weight); font-size: clamp(1.1rem, 3.1vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; } .wl-donut__label { margin-top: 0.4em; font-family: var(--v-font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v-faint); } .wl-legend { list-style: none; margin: 0; padding: 0; width: min(100%, 420px); display: grid; gap: 10px; } .wl-legend__item { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: var(--v-border); } .wl-legend__swatch { width: 14px; height: 14px; border-radius: 4px; } .wl-legend__value { font-family: var(--v-font-display); font-weight: 700; } .wl-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 22px; } .wl-ring { position: relative; aspect-ratio: 1; max-width: 230px; width: 100%; justify-self: center; } .wl-ring__svg { width: 100%; height: 100%; } .wl-ring__track { fill: none; stroke: var(--v-surface-2); stroke-width: 9; } .wl-ring__fill { fill: none; stroke: var(--v-accent); stroke-width: 9; stroke-linecap: round; } .wl-ring:nth-child(2) .wl-ring__fill { stroke: var(--v-secondary); } .wl-ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .wl-ring__value { font-family: var(--v-font-display); font-weight: var(--v-display-weight); font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1; letter-spacing: -0.03em; } .wl-ring__label { margin-top: 0.35em; font-family: var(--v-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-faint); } .wl-stats { margin: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); background: var(--v-line); border: var(--v-border); border-radius: var(--v-radius); overflow: hidden; } .wl-stat { margin: 0; padding: 26px 24px; background: var(--v-bg); display: flex; flex-direction: column-reverse; gap: 8px; } .wl-stat__label { font-family: var(--v-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-faint); } .wl-stat__value { margin: 0; font-family: var(--v-font-display); font-weight: var(--v-display-weight); font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; } .wl-stat--word .wl-stat__value { font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.01em; } /* flow */ .wl-flowchart { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } .wl-flowchart[data-count="2"] { --n: 2; } .wl-flowchart[data-count="3"] { --n: 3; } .wl-flowchart[data-count="4"] { --n: 4; } .wl-flowchart[data-count="5"] { --n: 5; } .wl-flowchart[data-count="6"], .wl-flowchart[data-count="7"], .wl-flowchart[data-count="8"] { --n: 3; row-gap: 40px; } /* Wrapped into rows of three, a row's last arrow would point at nothing. (A phone stacks the steps in one column, where every arrow points at the next step.) */ @media (min-width: 761px) { .wl-flowchart[data-count="6"] .wl-node:nth-child(3n) .wl-node__edge, .wl-flowchart[data-count="7"] .wl-node:nth-child(3n) .wl-node__edge, .wl-flowchart[data-count="8"] .wl-node:nth-child(3n) .wl-node__edge { visibility: hidden; } } .wl-node { position: relative; display: flex; align-items: stretch; } .wl-node__card { flex: 1; position: relative; padding: var(--v-card-pad); background: var(--v-card-bg); border: var(--v-border); border-radius: var(--v-radius); } .wl-node__card .wl-ord { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--v-accent); color: var(--v-on-accent); font-family: var(--v-font-mono); font-size: 0.8rem; font-weight: 700; } .wl-node__title { margin: 0 0 0.35em; font-family: var(--v-font-display); font-size: 1.35rem; line-height: 1.1; } .wl-node__text { margin: 0; color: var(--v-soft); font-size: 0.96rem; } .wl-node__edge { flex: none; width: clamp(28px, 4vw, 56px); height: 24px; align-self: center; overflow: visible; } .wl-edge__line { fill: none; stroke: var(--v-accent-text); stroke-width: 2; stroke-dasharray: 5 6; animation: wl-dash 1.1s linear infinite; } .wl-edge__head { fill: none; stroke: var(--v-accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes wl-dash { to { stroke-dashoffset: -22; } } /* milestones (infographic timeline + timeline sections) */ .wl-milestones { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 30px; max-width: 48rem; } .wl-milestones::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--v-line-strong); } .wl-ms { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 22px; align-items: start; } .wl-ms__dot { width: 28px; height: 28px; position: relative; z-index: 1; background: var(--v-bg); border-radius: 50%; } .wl-ms__ring { fill: var(--v-bg); stroke: var(--v-accent); stroke-width: 2.2; } .wl-ms__core { fill: var(--v-accent); } .wl-ms--done .wl-ms__ring { fill: var(--v-accent); } .wl-ms__tick { fill: none; stroke: var(--v-on-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .wl-ms__when { display: block; margin-bottom: 4px; font-family: var(--v-font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-accent-text); } .wl-ms__title { margin: 0 0 0.25em; font-family: var(--v-font-display); font-size: 1.35rem; line-height: 1.15; } .wl-ms__text { margin: 0; color: var(--v-soft); } /* comparison */ .wl-graphic--comparison { display: grid; gap: 40px; } .wl-bars { display: grid; gap: 18px; } .wl-bar { display: grid; grid-template-columns: minmax(90px, 180px) 1fr auto; gap: 18px; align-items: center; } .wl-bar__label { font-weight: 600; } .wl-bar__track { width: 100%; height: 18px; border-radius: 999px; overflow: hidden; } .wl-bar__bg { fill: var(--v-surface-2); width: 100%; } .wl-bar__fill { transform-box: fill-box; transform-origin: 0 50%; stroke: none; } .wl-bar__value { font-family: var(--v-font-display); font-weight: 800; font-size: 1.35rem; min-width: 4ch; text-align: right; } .wl-table-wrap { overflow-x: auto; border: var(--v-border); border-radius: var(--v-radius); } .wl-table { width: 100%; border-collapse: collapse; } .wl-table th, .wl-table td { padding: 16px 20px; text-align: left; border-bottom: var(--v-border); } .wl-table thead th { font-family: var(--v-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-faint); } .wl-table tbody tr:last-child th, .wl-table tbody tr:last-child td { border-bottom: 0; } .wl-cell-bool .wl-glyph { width: 22px; height: 22px; stroke-width: 2.6; } .wl-cell-yes { color: var(--v-accent-text); } .wl-cell-no { color: var(--v-faint); } /* ----------------------------------------------------------- post card */ .wl-post { position: relative; max-width: 640px; padding: clamp(20px, 2.6vw, 30px); background: var(--v-card-bg); border: var(--v-border); border-radius: 22px; box-shadow: var(--v-shadow); } .wl-post__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 16px; } .wl-post__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--v-surface-2); } .wl-post__avatar--initial { display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: var(--v-accent); color: var(--v-on-accent); } .wl-post__who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .wl-post__author { font-weight: 800; } .wl-post__handle { color: var(--v-faint); font-size: 0.92rem; } .wl-post__brand { color: var(--v-fg); display: inline-flex; } .wl-post__brand .wl-glyph { width: 22px; height: 22px; } .wl-post__text { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.42; white-space: pre-line; overflow-wrap: anywhere; } .wl-post__media { display: grid; gap: 4px; margin-top: 16px; border-radius: 16px; overflow: hidden; grid-template-columns: repeat(2, 1fr); } .wl-post__media[data-count="1"] { grid-template-columns: 1fr; } .wl-post__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; } .wl-post__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: var(--v-border); font-size: 0.9rem; color: var(--v-faint); } .wl-post__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--v-accent-text); font-weight: 700; text-decoration: none; } .wl-post__link:hover { text-decoration: underline; } .wl-post--giant { max-width: none; } .wl-post--giant .wl-post__text { font-size: clamp(1.9rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; } .wl-post--giant .wl-post__avatar { width: 64px; height: 64px; } /* ----------------------------------------------------------- gallery */ .wl-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .wl-gallery[data-count="1"] { grid-template-columns: 1fr; } .wl-gallery[data-count="3"] .wl-shot:first-child { grid-column: span 2; } .wl-shot { margin: 0; position: relative; overflow: hidden; border-radius: var(--v-radius); background: var(--v-surface-2); } .wl-shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.8s var(--v-ease); } .wl-shot:hover img { transform: scale(1.04); } .wl-shot__caption { position: absolute; left: 14px; bottom: 14px; right: 14px; padding: 8px 12px; border-radius: 10px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.86rem; backdrop-filter: blur(8px); } /* ----------------------------------------------------------- facts / quotes / faq */ .wl-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 52rem; } .wl-fact { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: var(--v-border); border-radius: var(--v-radius-sm); background: var(--v-card-bg); font-size: 1.08rem; } .wl-fact__mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--v-accent); color: var(--v-on-accent); } .wl-fact__mark .wl-glyph { width: 18px; height: 18px; stroke-width: 2.6; } .wl-fact__text { align-self: center; } .wl-quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .wl-quote { margin: 0; position: relative; padding: calc(var(--v-card-pad) + 18px) var(--v-card-pad) var(--v-card-pad); background: var(--v-card-bg); border: var(--v-border); border-radius: var(--v-radius); } .wl-quote::before { content: "\201C"; position: absolute; top: 4px; left: 18px; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; color: var(--v-accent); } .wl-quote__text { margin: 0 0 1em; font-size: 1.2rem; line-height: 1.45; font-weight: 500; } .wl-quote__who { font-family: var(--v-font-mono); font-size: 0.85rem; color: var(--v-faint); } .wl-quote__who a { text-decoration: none; color: var(--v-accent-text); } .wl-faq { display: grid; gap: 10px; max-width: 52rem; } .wl-qa { border: var(--v-border); border-radius: var(--v-radius-sm); background: var(--v-card-bg); } .wl-qa__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 22px; font-weight: 700; font-size: 1.1rem; } .wl-qa__q::-webkit-details-marker { display: none; } .wl-qa__sign { position: relative; flex: none; width: 18px; height: 18px; } .wl-qa__sign::before, .wl-qa__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 0.3s var(--v-ease); } .wl-qa__sign::after { transform: rotate(90deg); } .wl-qa[open] .wl-qa__sign::after { transform: rotate(0deg); } .wl-qa__a { margin: 0; padding: 0 22px 22px; color: var(--v-soft); } /* ----------------------------------------------------------- access */ .wl-access { display: grid; gap: 22px; max-width: 56rem; } .wl-access__net { margin: 0; font-family: var(--v-font-mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-faint); } .wl-ca { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 12px 12px 20px; border: 1.5px solid var(--v-line-strong); border-radius: var(--v-radius); background: var(--v-card-bg); } .wl-ca__label { font-family: var(--v-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-faint); } .wl-ca__value { font-family: var(--v-font-mono); font-size: clamp(0.78rem, 1.5vw, 1rem); overflow-wrap: anywhere; } .wl-copy { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: calc(var(--v-radius) - 6px); background: var(--v-accent); color: var(--v-on-accent); font-weight: 800; cursor: pointer; } .wl-copy.wl-btn { background: var(--v-accent); } .wl-links { display: flex; flex-wrap: wrap; gap: 10px; } .wl-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: var(--v-border); border-radius: 999px; background: var(--v-card-bg); text-decoration: none; font-weight: 700; transition: transform 0.25s var(--v-spring), border-color 0.2s; } .wl-link:hover { transform: translateY(-2px); border-color: var(--v-fg); } /* ----------------------------------------------------------- footer */ .wl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .wl-foot__name { font-family: var(--v-font-display); font-size: 1.1rem; } .wl-foot__net, .wl-foot__nfa { color: var(--v-faint); font-size: 0.86rem; } .wl-foot .wl-links { margin-left: auto; } .wl-foot .wl-link { padding: 8px 14px; font-size: 0.86rem; } /* ----------------------------------------------------------- hero helpers */ [data-wl="hero-media"] { position: relative; } .wl-hero-img { width: 100%; height: 100%; object-fit: cover; } .wl-media--none { display: none; } [data-wl-split] .wl-w, [data-wl-split] .wl-ch { display: inline-block; } [data-wl-split] .wl-ch--space { width: 0.28em; } [data-wl-fit] { white-space: nowrap; } /* ----------------------------------------------------------- motion */ [data-wl-reveal="on"] .wl-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--v-ease), transform 0.9s var(--v-ease); } [data-wl-reveal="on"] .wl-reveal.wl-in { opacity: 1; transform: none; } .wl-motion-wild[data-wl-reveal="on"] .wl-reveal { transform: translateY(46px) rotate(-1.2deg) scale(0.97); transition-timing-function: var(--v-spring); transition-duration: 0.8s; } .wl-motion-wild[data-wl-reveal="on"] .wl-reveal.wl-in { transform: none; } /* On a phone a tilted full-width section would poke past the screen edge while it waits to be revealed: it only rises there. */ @media (max-width: 760px) { .wl-motion-wild[data-wl-reveal="on"] .wl-reveal:not(.wl-in) { transform: translateY(46px) scale(0.97); } } .wl-motion-glitch[data-wl-reveal="on"] .wl-reveal { transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.7s steps(7, end), opacity 0.3s; } .wl-motion-glitch[data-wl-reveal="on"] .wl-reveal.wl-in { clip-path: inset(0 0 -10% 0); } .wl-motion-float[data-wl-reveal="on"] .wl-reveal { transform: translateY(18px) scale(0.99); transition-duration: 1.3s; } .wl-in .wl-feature, .wl-in .wl-fact, .wl-in .wl-quote, .wl-in .wl-node, .wl-in .wl-ms, .wl-in .wl-shot, .wl-in .wl-bar { animation: wl-rise 0.75s var(--v-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); } .wl-motion-wild .wl-in .wl-feature, .wl-motion-wild .wl-in .wl-quote, .wl-motion-wild .wl-in .wl-shot { animation-name: wl-pop; animation-timing-function: var(--v-spring); } @keyframes wl-rise { from { opacity: 0; transform: translateY(22px); } } @keyframes wl-pop { from { opacity: 0; transform: translateY(26px) scale(0.9) rotate(-2deg); } } .wl-in .wl-donut__seg, .wl-in .wl-ring__fill { animation: wl-draw 1.6s var(--v-ease) both; animation-delay: 0.2s; } @keyframes wl-draw { from { stroke-dasharray: 0 var(--c); } } .wl-in .wl-bar__fill { animation: wl-grow 1.2s var(--v-ease) both; animation-delay: calc(var(--i, 0) * 120ms + 200ms); } @keyframes wl-grow { from { transform: scaleX(0); } } .wl-motion-float .wl-hero-img { animation: wl-bob 6s ease-in-out infinite; } @keyframes wl-bob { 50% { transform: translateY(-12px); } } .wl-hero-wobble [data-wl="hero-media"] { animation: wl-wobble 3.2s ease-in-out infinite; transform-origin: 50% 80%; } @keyframes wl-wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg) scale(1.02); } } /* The image drifts inside its own frame; the 14% scale is the slack it drifts into. */ .wl-hero-parallax [data-wl="hero-media"] { overflow: hidden; } .wl-hero-parallax .wl-hero-img { transform: translate3d(0, calc(var(--wl-scroll, 0) * 0.05px), 0) scale(1.14); will-change: transform; } /* Anyone who asked for less motion gets none: every animation and transition off, every reveal resolved to visible. motion.preset "none" does the same (.wl-still). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-wl-reveal] .wl-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; } } .wl-still *, .wl-still *::before, .wl-still *::after { animation: none !important; transition: none !important; } .wl-still [data-wl="hero-media"] { transform: none !important; } /* ----------------------------------------------------------- small screens */ @media (max-width: 760px) { .wl-flowchart { grid-template-columns: 1fr !important; row-gap: 0; } .wl-node { flex-direction: column; } .wl-node__edge { width: 24px; height: 40px; transform: rotate(90deg); margin: 6px auto; } .wl-bar { grid-template-columns: 1fr auto; } .wl-bar__track { grid-column: 1 / -1; grid-row: 2; } .wl-gallery[data-count="3"] .wl-shot:first-child { grid-column: auto; } .wl-ca { grid-template-columns: 1fr auto; } .wl-ca__label { grid-column: 1 / -1; } .wl-post__link { margin-left: 0; } }