wehub-resource-sync
85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
1348 lines
38 KiB
HTML
1348 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>BlockFrame</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--black: #000000;
|
||
--white: #ffffff;
|
||
--offwhite: #fffdf5;
|
||
--pink: #fe90e8;
|
||
--blue: #c0f7fe;
|
||
--green: #99e885;
|
||
--yellow: #f7cb46;
|
||
--cream: #ffdc8b;
|
||
--disp: "Inter", sans-serif;
|
||
--mono: "Space Grotesk", monospace;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #111;
|
||
}
|
||
body {
|
||
background: var(--offwhite);
|
||
color: var(--black);
|
||
font-family: var(--disp);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.disp {
|
||
font-family: var(--disp);
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
line-height: 0.95;
|
||
font-weight: 900;
|
||
}
|
||
.pill {
|
||
display: inline-block;
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 6px 16px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 13px;
|
||
}
|
||
.dotgrid {
|
||
background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
|
||
background-size: 24px 24px;
|
||
}
|
||
|
||
section {
|
||
padding: 90px 60px;
|
||
position: relative;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 46px;
|
||
line-height: 1;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
height: 4px;
|
||
background: var(--black);
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
background: var(--offwhite);
|
||
padding: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cover .dg {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.4;
|
||
background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
|
||
background-size: 24px 24px;
|
||
pointer-events: none;
|
||
}
|
||
.cover .inner {
|
||
position: relative;
|
||
z-index: 3;
|
||
max-width: 72%;
|
||
}
|
||
.cover .pill {
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.04em;
|
||
line-height: 0.9;
|
||
font-size: clamp(64px, 9vw, 150px);
|
||
}
|
||
.cover .sub {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 1.5;
|
||
color: var(--black);
|
||
margin-top: 24px;
|
||
max-width: 540px;
|
||
}
|
||
.cover .deco-rect {
|
||
position: absolute;
|
||
top: 18%;
|
||
right: 8%;
|
||
width: 200px;
|
||
height: 130px;
|
||
background: var(--pink);
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
transform: rotate(8deg);
|
||
z-index: 2;
|
||
}
|
||
.cover .deco-rect2 {
|
||
position: absolute;
|
||
bottom: 16%;
|
||
right: 18%;
|
||
width: 120px;
|
||
height: 120px;
|
||
background: var(--blue);
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
transform: rotate(-6deg);
|
||
z-index: 1;
|
||
}
|
||
.cover .star {
|
||
position: absolute;
|
||
top: 30%;
|
||
right: 30%;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: var(--yellow);
|
||
border: 3px solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
z-index: 4;
|
||
}
|
||
.cover .counter {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 60px;
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 10px 18px;
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.sw {
|
||
border: 4px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
}
|
||
.sw .chip {
|
||
height: 120px;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.sw .meta {
|
||
padding: 16px 18px;
|
||
}
|
||
.sw .name {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.01em;
|
||
font-size: 18px;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
letter-spacing: 0.04em;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
align-items: center;
|
||
padding: 24px 0;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
color: #444;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.s3 {
|
||
grid-column: span 3;
|
||
}
|
||
.s4 {
|
||
grid-column: span 4;
|
||
}
|
||
.s6 {
|
||
grid-column: span 6;
|
||
}
|
||
.s8 {
|
||
grid-column: span 8;
|
||
}
|
||
.fcard {
|
||
border: 4px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
padding: 32px;
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
.fcard .notch {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: 24px;
|
||
width: 44px;
|
||
height: 44px;
|
||
background: var(--yellow);
|
||
border: 3px solid var(--black);
|
||
}
|
||
.fcard .ic {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 3px solid var(--black);
|
||
background: var(--blue);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.fcard .t {
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 21px;
|
||
line-height: 1.2;
|
||
}
|
||
.fcard .bd {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #222;
|
||
margin-top: 10px;
|
||
}
|
||
.statcard {
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 24px;
|
||
position: relative;
|
||
}
|
||
.statcard .dot {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--black);
|
||
}
|
||
.statcard .n {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
font-size: 48px;
|
||
line-height: 1;
|
||
}
|
||
.statcard .l {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 14px 32px;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
.stripe {
|
||
height: 80px;
|
||
border: 3px solid var(--black);
|
||
background: repeating-linear-gradient(
|
||
45deg,
|
||
var(--black),
|
||
var(--black) 4px,
|
||
var(--green) 4px,
|
||
var(--green) 12px
|
||
);
|
||
}
|
||
.listnum {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* COMPOSITIONS */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
}
|
||
.fw .flabel {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: baseline;
|
||
margin-bottom: 16px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
color: #555;
|
||
}
|
||
.fw .flabel b {
|
||
color: var(--black);
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--offwhite);
|
||
border: 4px solid var(--black);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* f1 cover */
|
||
.bf1 {
|
||
background: var(--cream);
|
||
}
|
||
.bf1 .dg {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.35;
|
||
background-image: radial-gradient(circle, var(--black) 0.15cqw, transparent 0.15cqw);
|
||
background-size: 3cqw 3cqw;
|
||
z-index: 1;
|
||
}
|
||
.bf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.bf1 .pill {
|
||
display: inline-block;
|
||
border: 0.25cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.4cqw 0.4cqw 0 var(--black);
|
||
padding: 0.5cqw 1.2cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 1cqw;
|
||
margin-bottom: 2cqw;
|
||
align-self: flex-start;
|
||
}
|
||
.bf1 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.04em;
|
||
line-height: 0.9;
|
||
font-size: 9.5cqw;
|
||
max-width: 60cqw;
|
||
}
|
||
.bf1 .star {
|
||
position: absolute;
|
||
top: 18%;
|
||
right: 8%;
|
||
width: 14cqw;
|
||
height: 14cqw;
|
||
background: var(--pink);
|
||
border: 0.3cqw solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
z-index: 2;
|
||
}
|
||
.bf1 .rect {
|
||
position: absolute;
|
||
bottom: 16%;
|
||
right: 16%;
|
||
width: 16cqw;
|
||
height: 9cqw;
|
||
background: var(--blue);
|
||
border: 0.3cqw solid var(--black);
|
||
box-shadow: 0.6cqw 0.6cqw 0 var(--black);
|
||
transform: rotate(-6deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* f2 feature cards */
|
||
.bf2 {
|
||
background: var(--blue);
|
||
}
|
||
.bf2 .body {
|
||
padding: 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bf2 .pill {
|
||
align-self: flex-start;
|
||
border: 0.2cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.3cqw 0.3cqw 0 var(--black);
|
||
padding: 0.4cqw 1cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-bottom: 1.4cqw;
|
||
}
|
||
.bf2 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 3.6cqw;
|
||
margin-bottom: 2cqw;
|
||
}
|
||
.bf2 .row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.6cqw;
|
||
flex: 1;
|
||
}
|
||
.bf2 .c {
|
||
border: 0.3cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.6cqw 0.6cqw 0 var(--black);
|
||
padding: 1.8cqw;
|
||
}
|
||
.bf2 .c .ic {
|
||
width: 4cqw;
|
||
height: 4cqw;
|
||
border: 0.2cqw solid var(--black);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 1.8cqw;
|
||
margin-bottom: 1.2cqw;
|
||
}
|
||
.bf2 .c .t {
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 1.5cqw;
|
||
line-height: 1.15;
|
||
}
|
||
.bf2 .c .bd {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 0.95cqw;
|
||
line-height: 1.5;
|
||
color: #222;
|
||
margin-top: 0.6cqw;
|
||
}
|
||
|
||
/* f3 stat grid (tilted) */
|
||
.bf3 {
|
||
background: var(--green);
|
||
}
|
||
.bf3 .body {
|
||
padding: 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bf3 .pill {
|
||
align-self: flex-start;
|
||
border: 0.2cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.3cqw 0.3cqw 0 var(--black);
|
||
padding: 0.4cqw 1cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-bottom: 1.4cqw;
|
||
}
|
||
.bf3 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 3.6cqw;
|
||
margin-bottom: 2.4cqw;
|
||
}
|
||
.bf3 .row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2cqw;
|
||
}
|
||
.bf3 .sc {
|
||
border: 0.25cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.4cqw 0.4cqw 0 var(--black);
|
||
padding: 1.8cqw;
|
||
position: relative;
|
||
}
|
||
.bf3 .sc:nth-child(odd) {
|
||
transform: rotate(-2deg);
|
||
}
|
||
.bf3 .sc:nth-child(even) {
|
||
transform: rotate(2deg);
|
||
}
|
||
.bf3 .sc .dot {
|
||
position: absolute;
|
||
top: 1cqw;
|
||
right: 1cqw;
|
||
width: 1cqw;
|
||
height: 1cqw;
|
||
border-radius: 50%;
|
||
border: 0.15cqw solid var(--black);
|
||
}
|
||
.bf3 .sc .n {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
font-size: 4.6cqw;
|
||
line-height: 1;
|
||
}
|
||
.bf3 .sc .l {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-top: 0.6cqw;
|
||
}
|
||
|
||
/* f4 close (black) */
|
||
.bf4 {
|
||
background: var(--black);
|
||
}
|
||
.bf4 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.bf4 .cardf {
|
||
border: 0.3cqw solid var(--white);
|
||
box-shadow: 1.2cqw 1.2cqw 0 var(--yellow);
|
||
padding: 4cqw 6cqw;
|
||
position: relative;
|
||
}
|
||
.bf4 .pill {
|
||
border: 0.25cqw solid var(--white);
|
||
background: var(--black);
|
||
color: var(--white);
|
||
box-shadow: 0.5cqw 0.5cqw 0 var(--white);
|
||
padding: 0.5cqw 1.2cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 1cqw;
|
||
margin-bottom: 1.6cqw;
|
||
display: inline-block;
|
||
}
|
||
.bf4 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 7cqw;
|
||
line-height: 0.95;
|
||
color: var(--white);
|
||
}
|
||
.bf4 .star {
|
||
position: absolute;
|
||
top: -3cqw;
|
||
right: -3cqw;
|
||
width: 9cqw;
|
||
height: 9cqw;
|
||
background: var(--pink);
|
||
border: 0.3cqw solid var(--white);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32px;
|
||
}
|
||
.do-card {
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
padding: 36px;
|
||
}
|
||
.do-card.do {
|
||
background: var(--green);
|
||
}
|
||
.do-card.dont {
|
||
background: var(--white);
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 30px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
padding-left: 26px;
|
||
position: relative;
|
||
margin-bottom: 13px;
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
}
|
||
.do-card.do li::before {
|
||
content: "+";
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
}
|
||
|
||
.foot {
|
||
padding: 48px 60px;
|
||
background: var(--black);
|
||
color: var(--white);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 28px;
|
||
}
|
||
.foot .r {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.swatches {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #fffdf5 !important;
|
||
--secondary: #000000 !important;
|
||
--tertiary: #ffdc8b !important;
|
||
--accent: #fe90e8 !important;
|
||
--f-disp: "Inter", sans-serif !important;
|
||
--f-body: "Space Grotesk", sans-serif !important;
|
||
--black: #000000 !important;
|
||
--offwhite: #fffdf5 !important;
|
||
--pink: #fe90e8 !important;
|
||
--cream: #ffdc8b !important;
|
||
--disp: "Inter", sans-serif !important;
|
||
--mono: "Space Grotesk", sans-serif !important;
|
||
--white: #ffffff !important;
|
||
--blue: #c0f7fe !important;
|
||
--green: #99e885 !important;
|
||
--yellow: #f7cb46 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="dg"></div>
|
||
<div class="star"></div>
|
||
<div class="deco-rect"></div>
|
||
<div class="deco-rect2"></div>
|
||
<div class="inner">
|
||
<span class="pill">Frame System · Vol. 01</span>
|
||
<h1>Loud,<br />bordered,<br />a little crooked.</h1>
|
||
<div class="sub">
|
||
A maximalist neobrutalist frame system — 4px ink borders, 8px hard shadows, five candy
|
||
pastels, and tilted decorations that puncture the grid.
|
||
</div>
|
||
</div>
|
||
<div class="counter">01 / 06</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill">Palette</span>
|
||
<h2>Five Candy Pastels</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--pink)"></div>
|
||
<div class="meta">
|
||
<div class="name">Pink</div>
|
||
<div class="hex">#FE90E8</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--blue)"></div>
|
||
<div class="meta">
|
||
<div class="name">Blue</div>
|
||
<div class="hex">#C0F7FE</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--green)"></div>
|
||
<div class="meta">
|
||
<div class="name">Green</div>
|
||
<div class="hex">#99E885</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--yellow)"></div>
|
||
<div class="meta">
|
||
<div class="name">Yellow</div>
|
||
<div class="hex">#F7CB46 · CTA</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--cream)"></div>
|
||
<div class="meta">
|
||
<div class="name">Cream</div>
|
||
<div class="hex">#FFDC8B</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="background: var(--offwhite); border-bottom: 4px solid var(--black)"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">Off-White</div>
|
||
<div class="hex">#FFFDF5 · canvas</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="background: var(--white); border-bottom: 4px solid var(--black)"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">White</div>
|
||
<div class="hex">#FFFFFF · cards</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--black)"></div>
|
||
<div class="meta">
|
||
<div class="name">Black</div>
|
||
<div class="hex">#000000 · all borders</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--pink)">Type</span>
|
||
<h2>Inter × Space Grotesk</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">heading-xl</div>
|
||
<div class="m">Inter 900 · uppercase · −0.03em</div>
|
||
</div>
|
||
<div class="spec"><span class="disp" style="font-size: 80px">Maximal.</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">heading-lg</div>
|
||
<div class="m">Inter 800 · uppercase · −0.02em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-weight: 800; font-size: 50px">Bordered & Bold</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">stat-number</div>
|
||
<div class="m">Inter 900 · line 1</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-size: 64px; letter-spacing: -0.02em">240</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Inter 500 · sentence case · line 1.6</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-weight: 500; font-size: 18px; line-height: 1.6; max-width: 640px">
|
||
Body runs Inter at weight 500, sentence case — the calm against the heavy uppercase
|
||
display.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">label</div>
|
||
<div class="m">Space Grotesk 600 · uppercase · 0.08em</div>
|
||
</div>
|
||
<div class="spec"><span class="pill">Section Eyebrow</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--blue)">Components</span>
|
||
<h2>Borders & Hard Shadows</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s4">
|
||
<div class="cnote">Feature card + notch + icon</div>
|
||
<div class="fcard">
|
||
<div class="notch"></div>
|
||
<div class="ic" style="background: var(--pink)">A</div>
|
||
<div class="t">Bordered Block</div>
|
||
<div class="bd">4px ink border + 8px hard offset shadow, square corners.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">Stat cards (tilted) + deco dot</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
|
||
<div class="statcard" style="transform: rotate(-2deg)">
|
||
<div class="dot" style="background: var(--pink)"></div>
|
||
<div class="n">240</div>
|
||
<div class="l">Output</div>
|
||
</div>
|
||
<div class="statcard" style="transform: rotate(2deg)">
|
||
<div class="dot" style="background: var(--blue)"></div>
|
||
<div class="n">3.4×</div>
|
||
<div class="l">Faster</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">CTA · list number · stripe</div>
|
||
<span class="btn">Click Here →</span>
|
||
<div style="display: flex; align-items: center; gap: 14px; margin-top: 24px">
|
||
<span class="listnum">01</span
|
||
><span style="font-family: var(--disp); font-weight: 500; font-size: 15px"
|
||
>Numbered list bullet</span
|
||
>
|
||
</div>
|
||
<div class="stripe" style="margin-top: 24px"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s6">
|
||
<div class="cnote">Label pills — pastel variants</div>
|
||
<div style="display: flex; gap: 16px; flex-wrap: wrap">
|
||
<span class="pill" style="background: var(--pink)">Pink</span
|
||
><span class="pill" style="background: var(--blue)">Blue</span
|
||
><span class="pill" style="background: var(--green)">Green</span
|
||
><span class="pill" style="background: var(--yellow)">Yellow</span
|
||
><span class="pill" style="background: var(--cream)">Cream</span>
|
||
</div>
|
||
</div>
|
||
<div class="s6">
|
||
<div class="cnote">Icon squares + star burst</div>
|
||
<div style="display: flex; align-items: center; gap: 20px">
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
border: 3px solid var(--black);
|
||
background: var(--green);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
"
|
||
>B</span
|
||
>
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
"
|
||
>C</span
|
||
>
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
background: var(--pink);
|
||
border: 3px solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--yellow)">Frames</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Cover</b><span>· identity · cream · decorations · left</span></div>
|
||
<div class="frame bf1">
|
||
<div class="dg"></div>
|
||
<div class="star"></div>
|
||
<div class="rect"></div>
|
||
<div class="body">
|
||
<span class="pill">Frame System</span>
|
||
<h3>Loud, bordered, crooked.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Feature Cards</b><span>· catalog · blue ground · 3-up</span></div>
|
||
<div class="frame bf2">
|
||
<div class="body">
|
||
<span class="pill">Three Laws</span>
|
||
<h3>Cards on Grounds</h3>
|
||
<div class="row">
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--pink)">A</div>
|
||
<div class="t">Border</div>
|
||
<div class="bd">4px ink on all.</div>
|
||
</div>
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--green)">B</div>
|
||
<div class="t">Shadow</div>
|
||
<div class="bd">8px hard offset.</div>
|
||
</div>
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--yellow)">C</div>
|
||
<div class="t">Tilt</div>
|
||
<div class="bd">A little crooked.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Stat Grid</b><span>· data · green ground · tilted · the dense frame</span>
|
||
</div>
|
||
<div class="frame bf3">
|
||
<div class="body">
|
||
<span class="pill">By The Numbers</span>
|
||
<h3>The Tally</h3>
|
||
<div class="row">
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--pink)"></div>
|
||
<div class="n">240</div>
|
||
<div class="l">Output</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--blue)"></div>
|
||
<div class="n">3.4×</div>
|
||
<div class="l">Faster</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--yellow)"></div>
|
||
<div class="n">12K</div>
|
||
<div class="l">Shipped</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Closing Plate</b><span>· closer · black ground · yellow shadow</span>
|
||
</div>
|
||
<div class="frame bf4">
|
||
<div class="body">
|
||
<div class="cardf">
|
||
<div class="star"></div>
|
||
<span class="pill">The End</span>
|
||
<h3>Stay loud.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section style="border-bottom: none">
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--green)">Rules</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<ul>
|
||
<li>4px borders + 8px shadows on primary cards; 3px + 4px on chrome.</li>
|
||
<li>Cycle pastel grounds across frames; keep the rhythm.</li>
|
||
<li>Inter 800–900 uppercase, negative tracking, for all display.</li>
|
||
<li>Open every region with a label-pill eyebrow.</li>
|
||
<li>Tilt decorations ±2°–12°; add one to every frame.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<ul>
|
||
<li>No rounded corners (save the stat-deco dot); no blurred shadows.</li>
|
||
<li>No colored borders (black only, save the close-frame white).</li>
|
||
<li>No sentence-case Inter display; no sixth pastel.</li>
|
||
<li>No label rendered as plain text — pill or nothing.</li>
|
||
<li>Don't blow a headline edge-to-edge — fit to measure.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
|
||
<style>
|
||
/* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
|
||
.capdemo {
|
||
--cap-ink: var(--black);
|
||
--cap-canvas: var(--white);
|
||
--cap-accent: var(--yellow);
|
||
--cap-accent-2: var(--cream);
|
||
}
|
||
.capdemo .stage {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 16.67cqh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 4;
|
||
}
|
||
.capdemo .pill {
|
||
max-width: 80cqw;
|
||
padding: 1.4cqw 3cqw 1.7cqw;
|
||
background: var(--cap-canvas);
|
||
border: 0.4cqw solid var(--cap-ink);
|
||
border-radius: 0;
|
||
box-shadow: 0.8cqw 0.8cqw 0 var(--cap-ink);
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.12em 0.32em;
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
font-size: 3.2cqw;
|
||
line-height: 1.12;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.capdemo .w {
|
||
display: inline-block;
|
||
padding: 0 0.1em;
|
||
color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
|
||
}
|
||
.capdemo .w.spoken {
|
||
color: var(--cap-ink);
|
||
}
|
||
.capdemo .w.active {
|
||
color: var(--cap-ink);
|
||
background: var(--cap-accent);
|
||
box-shadow: 0 0 0 0.08em var(--cap-accent);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 0.15cqw dashed rgba(0, 0, 0, 0.4);
|
||
z-index: 3;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: calc(16.67cqh + 0.7cqw);
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
font-size: 0.9cqw;
|
||
letter-spacing: 0.08em;
|
||
color: var(--black);
|
||
opacity: 0.55;
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--yellow)">Captions</span>
|
||
<h2>Lower-Third Karaoke</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
|
||
<div class="frame capdemo" style="background: var(--cream)">
|
||
<div
|
||
class="dg"
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.3;
|
||
background-image: radial-gradient(
|
||
circle,
|
||
var(--black) 0.15cqw,
|
||
transparent 0.15cqw
|
||
);
|
||
background-size: 3cqw 3cqw;
|
||
z-index: 1;
|
||
"
|
||
></div>
|
||
<div class="bandline"></div>
|
||
<div class="bandtag">caption band · 16.7%</div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Built</span>
|
||
<span class="w spoken">for</span>
|
||
<span class="w active">teams</span>
|
||
<span class="w">who</span>
|
||
<span class="w">ship.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Settled line</b><span>· all spoken · stamp cleared</span></div>
|
||
<div class="frame capdemo" style="background: var(--blue)">
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Ship</span>
|
||
<span class="w spoken">faster</span>
|
||
<span class="w spoken">today.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">BlockFrame</span>
|
||
<span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
|
||
</div>
|
||
|
||
<template id="__bundler_thumbnail">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="100" height="100" fill="#FFFDF5" />
|
||
<rect x="16" y="34" width="46" height="32" fill="#FE90E8" stroke="#000" stroke-width="4" />
|
||
<rect x="22" y="40" width="46" height="32" fill="#C0F7FE" stroke="#000" stroke-width="4" />
|
||
<path
|
||
d="M74 16l4 11h12l-9 7 3 11-10-6-10 6 3-11-9-7h12z"
|
||
fill="#F7CB46"
|
||
stroke="#000"
|
||
stroke-width="2"
|
||
/>
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|