/* Vesica — the palette and the type, in one place. Every value here was sampled out of screenshots of the reference, pixel by pixel, rather than guessed: the ground is #E9E9E9 and cards sit one step lighter at #EEEEEE with a #D6D6D6 hairline — they are not white. The dark navy #3D3B4F does double duty as the band and as the ink. Three accents, each with its own ground: The accent is a pastel yellow. It cannot be text on a light ground, so it works as a fill and a darker relative carries the type: --accent-fill #F2EAA0 pills, buttons, tiles, badges — navy ink on top --accent-soft #FBF7DA the tinted card and the quieter badges --accent-lift #F2EAA0 the same pastel, where it sits on the navy band --accent #6E5D0D accent type on the light ground --accent-ink #5C4E08 type on a tinted fill --pink #FFCFFE the second accent, dark grounds only The tokens are named for their job now, not for a colour. They have been green and blue already, and each rename through a colour name cost a bug. Light only, like the reference. */ :root { --bg: #E9E9E9; --card: #EEEEEE; --card-2: #E4E4E4; --line: #D6D6D6; --line-2: #DFDFDF; --band: #3D3B4F; --band-2: #514F61; --band-hi: #4A4860; --ink: #3D3B4F; --muted: #82828D; --dim: #A9A8AF; --faint: #C3C3C7; --accent: #6E5D0D; --accent-ink: #5C4E08; --accent-fill: #F2EAA0; --accent-soft: #FBF7DA; --accent-line: #E6DC94; --accent-lift: #F2EAA0; --accent-glow: #EFD95E; /* the pastel, pushed up where it has to read against grey */ --pink: #FFCFFE; --on-accent: #3D3B4F; /* the fill is pale, so its ink is the navy */ --yellow: #F2EAA0; /* the closing headline: the same pastel, not a second one */ --on-band: #E9E9E9; --on-band-2: #A9A8AF; --band-line: rgba(233, 233, 233, .16); --dash: #D6D6D6; --edge: #23222F; /* the drawn edge: the ink, one step darker */ --grid: #DEDEDE; /* the graph paper the page sits on */ --grid-step: 32px; --warn: #B4802A; --down: #C24B45; --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1020px; --wrap-head: 1460px; --nav: 66px; --r: 10px; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* The ground is graph paper, as it is there: a fine grid on both axes, put on rather than a fixed pseudo-element so that anything with a background of its own — a card, the navy band, the footer — simply covers it, which is exactly where the reference stops drawing it too. */ html { background-color: var(--bg); background-image: linear-gradient(to right, var(--grid) 0 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px); background-size: var(--grid-step) var(--grid-step); color-scheme: light; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { display: block; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } } /* selecting text picks up the accent instead of the browser's blue */ ::selection { background: var(--accent-fill); color: var(--band); } ::-moz-selection { background: var(--accent-fill); color: var(--band); } /* ---------- primitives ---------- */ .cs-label, .tr-k, .k { display: block; font-size: 11.8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .cs-btn, .tr-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, opacity .15s; } .cs-btn-fill, .tr-btn-dark, .btn-dark { background: var(--band); color: #FFFFFF; } .cs-btn-fill:hover, .tr-btn-dark:hover, .btn-dark:hover { background: var(--band-hi); } .btn-pink { background: var(--pink); color: var(--band); } /* on the navy band a solid accent disappears, so it lightens instead */ .hm-cta .btn-mint, .cs-close .cs-btn-fill, .cs-head .cs-btn-fill { background: var(--accent-lift); color: var(--band); } .hm-cta .btn-mint:hover, .cs-close .cs-btn-fill:hover, .cs-head .cs-btn-fill:hover { background: #F7F2BC; } .btn-pink:hover { background: #FFDCFE; } .btn-mint { background: var(--accent-fill); color: var(--on-accent); } .btn-mint:hover { background: #24518F; } .cs-btn-line, .btn-line { background: transparent; color: var(--ink); border-color: var(--line); } .cs-btn-line:hover, .btn-line:hover { border-color: #BEBEBE; } .cs-btn:disabled, .tr-btn:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; } .cs-btn-wide, .tr-btn-wide { width: 100%; height: 44px; font-size: 16.1px; } .tr-btn-sm { height: 32px; padding: 0 13px; font-size: 14.4px; } /* the dashed grid that runs behind the dark bands */ .dashed { position: relative; overflow: hidden; } .dashed::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--band-line) 0 1px, transparent 1px 120px); -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px); mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px); } .dashed > * { position: relative; } .hatch { height: 30px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 7px), var(--card); } /* a hairline rule between sections, the way the reference closes each one */ .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- toasts ---------- */ .cs-toasts, .tr-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); } .cs-toast, .tr-toast { font-family: var(--font); font-size: 15px; color: var(--on-band); border-radius: 10px; background: var(--band); padding: 11px 15px; box-shadow: 0 14px 30px rgba(61, 59, 79, .24); animation: toast-in .2s ease both; } .cs-toast.out, .tr-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- the footer, at the bottom of every page ---------- */ .ft { border-top: 1px dashed var(--line); background: transparent; } /* the chain figures used to sit above the nav; they belong next to the View status link that points at them */ .ft-bar { border-bottom: 1px dashed var(--line); overflow-x: auto; scrollbar-width: none; } .ft-bar::-webkit-scrollbar { display: none; } .ft-bar-in { max-width: var(--wrap-head); margin: 0 auto; padding: 0 24px; height: 38px; display: flex; align-items: center; gap: 26px; font-size: 12.8px; color: var(--dim); white-space: nowrap; } .ft-bar-in b { color: var(--muted); font-weight: 600; } .ft-dot { width: 6px; height: 6px; border-radius: 50%; background: #1FA971; display: inline-block; margin-right: 8px; vertical-align: 1px; } @media (max-width: 560px) { .ft-bar-in { padding-left: 16px; padding-right: 16px; } } .ft-cols { max-width: var(--wrap-head); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ft-col { padding: 26px 22px 36px; border-left: 1px dashed var(--line); } .ft-col:last-child { border-right: 1px dashed var(--line); } /* the four column headings carry the accent — weight 700 rather than 600, because a pastel on this grey needs the extra stroke to hold at 11.8px */ .ft-col .k { margin-bottom: 15px; color: var(--accent-glow); font-weight: 700; } .ft-col a { display: block; padding: 5px 0; font-size: 13.4px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); transition: color .15s; } .ft-col a:hover { color: var(--ink); } .ft-status { display: flex !important; align-items: center; gap: 8px; margin-top: 12px; text-decoration: underline; text-underline-offset: 3px; } /* green because it means operational, not because it is an accent */ .ft-status i { width: 8px; height: 8px; flex: none; background: #1FA971; } .ft-cubes { border-top: 1px dashed var(--line); overflow: hidden; line-height: 0; } .ft-cubes svg { width: 100%; height: 300px; display: block; } /* Each cube carries three faces, its edges and one motif, and the motif cycles: the mark on every other cube, a circle, a square, a ring, a diamond, a frame between them. The mark used to be knocked out in the card colour, which on this grey left it all but invisible — it is the navy ink at low opacity now, so the logo is what you read first and the geometry is the rhythm around it. */ .ft-cubes .cube { color: #CFCFD6; transition: color .16s, filter .16s; } /* an opaque silhouette under the faces, so the cubes behind do not bleed through the translucent shading and muddle the motifs */ .ft-cubes .sil { fill: var(--bg); } .ft-cubes .fc { fill: currentColor; } .ft-cubes .ft { opacity: .42; } .ft-cubes .fl { opacity: .88; } .ft-cubes .fr { opacity: .66; } .ft-cubes .ed { fill: none; stroke: var(--card); stroke-width: .8; } .ft-cubes .mo { transition: opacity .16s; } .ft-cubes .mo-f { fill: var(--ink); opacity: .46; } .ft-cubes .mo-s { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .24; } /* lit: a stronger pastel than the flat fill, with a short glow so the cube lifts off the wall, and the motif brought right up in contrast */ .ft-cubes .cube.on { color: var(--accent-glow); filter: drop-shadow(0 0 7px rgba(239, 217, 94, .75)); } .ft-cubes .cube.on .ft { opacity: .92; } .ft-cubes .cube.on .fl { opacity: 1; } .ft-cubes .cube.on .fr { opacity: .97; } .ft-cubes .cube.on .mo-f { opacity: .78; } .ft-cubes .cube.on .mo-s { opacity: .66; stroke-width: 1.8; } @media (max-width: 860px) { .ft-cols { grid-template-columns: 1fr 1fr; } .ft-col:nth-child(2n) { border-right: 1px dashed var(--line); } .ft-col:nth-child(-n+2) { border-bottom: 1px dashed var(--line); } .ft-cubes svg { height: 190px; } } @media (max-width: 560px) { .ft-cols { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; } .ft-col { border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } } /* ---------- the mark ---------- */ /* The mark is one 9 KB path, so it lives in mark.svg and is masked rather than inlined fourteen times across the site. currentColor still paints it. */ .brand-mk, .ft-mk { display: block; flex: none; background: currentColor; -webkit-mask: url(mark.svg) center / contain no-repeat; mask: url(mark.svg) center / contain no-repeat; } .brand-mk { width: 46px; height: 46px; color: var(--band); } .ft-mk { width: 96px; height: 96px; color: var(--band); } .ft-sign { display: grid; place-items: center; padding: 30px 24px 26px; border-top: 1px dashed var(--line); } /* ---------- the bar floats and follows ---------- Four pages grew four navs; this is the one treatment they share. The outer element stays in flow so the page still starts below the bar, and sticky keeps it in view from there on. */ .hm-nav, .tr-nav, .dx-nav { position: sticky; top: 0; z-index: 50; background: transparent; border: 0; padding: 12px 16px 0; } .hm-nav-in, .tr-nav-in, .dx-nav-in, .cs-nav { max-width: var(--wrap-head); margin: 0 auto; height: 56px; padding: 0 10px 0 18px; display: flex; align-items: center; gap: 20px; border: 1px solid var(--edge); border-radius: 999px; /* translucent, so the page reads through it as it passes under */ background: color-mix(in srgb, var(--card) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 6px 22px rgba(61, 59, 79, .07); } /* the vaults and legal pages have no inner wrapper, so the header is the pill */ .cs-nav { position: sticky; top: 12px; z-index: 50; width: calc(100% - 32px); margin: 12px auto 0; } .cs-nav::after { content: none; } .nav-x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--muted); cursor: default; transition: color .15s, background .15s; } .nav-x:hover { color: var(--ink); background: var(--accent-soft); } .nav-x svg { width: 14px; height: 14px; } /* what used to sit under a 66px bar now clears a floating one */ .cs-toolbar { top: 80px !important; } .cs-band-label { top: 92px !important; } .dx-toc, .cs-legal-toc { top: 92px !important; } /* the pill has a fixed height, so on a phone the row has to give */ @media (max-width: 760px) { .hm-nav-in, .tr-nav-in, .dx-nav-in, .cs-nav { gap: 10px; padding: 0 8px 0 14px; } .cs-nav .cs-btn-line, .dx-nav-right .btn-line, .tr-nav-right .btn-line { display: none; } .nav-x { width: 28px; height: 28px; } } /* ---------- nav dropdowns ---------- */ .mnu { position: relative; } .mnu-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-size: 14.4px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .15s; } .mnu-btn:hover, .mnu.on .mnu-btn { color: var(--ink); } .mnu-chev { transition: transform .18s; } .mnu.on .mnu-chev { transform: rotate(180deg); } .mnu-pop { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; transform: translateX(-50%) translateY(-4px); min-width: 196px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 16px 34px rgba(61, 59, 79, .13); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s; } .mnu.on .mnu-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mnu-pop a { display: block; padding: 8px 11px; border-radius: 9px; font-size: 13.9px; color: var(--muted); } .mnu-pop a:hover { background: var(--accent-soft); color: var(--ink); } .nav-lang { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; color: var(--muted); font-size: 13.4px; font-weight: 600; cursor: default; } .nav-lang:hover { color: var(--ink); } @media (max-width: 860px) { .nav-lang { display: none; } } /* ---------- protected by default ---------- Shared, because the band runs on the home page and the vault list both; it lived in styles.css while only one page carried it. */ .pr { max-width: var(--wrap-head); margin: 0 auto; padding: 62px 24px 54px; scroll-margin-top: 92px; } .pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 30px; } .pr-head h2 { margin: 0 0 12px; font-size: 40.7px; line-height: 1.1; font-weight: 600; letter-spacing: -.032em; } .pr-head p { margin: 0; font-size: 17.1px; line-height: 1.55; color: var(--muted); max-width: 52ch; } .pr-more { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14.4px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .pr-more:hover { color: var(--accent); } /* the ticked rule the reference runs above its cards */ .pr-tick { height: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 9px); background-size: 100% 6px; background-repeat: repeat-x; background-position: 0 0; } .pr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 26px 0 30px; } .pr-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 22px 22px 24px; } .pr-card h3 { margin: 0 0 9px; font-size: 21.4px; font-weight: 600; letter-spacing: -.02em; } .pr-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .pr-partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 4px 0 30px; } .pr-p { display: flex; gap: 11px; align-items: flex-start; } .pr-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; } .pr-ic svg { width: 28px; height: 28px; border-radius: 50%; } .pr-p b { display: block; font-size: 14.4px; font-weight: 600; margin-bottom: 4px; } .pr-p span span { display: block; font-size: 13.4px; line-height: 1.55; color: var(--dim); } .pr-dotted { position: relative; height: 1px; background: repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 8px); margin: 6px 0 26px; } .pr-dotted span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); padding: 0 14px; font-size: 10.7px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .pr-strat { text-align: center; padding-bottom: 8px; } .pr-strat p { margin: 0 auto 14px; max-width: 54ch; font-size: 16.1px; line-height: 1.6; color: var(--muted); } @media (max-width: 980px) { .pr-cards { grid-template-columns: 1fr; gap: 14px; } .pr-partners { grid-template-columns: 1fr 1fr; } .pr-head { flex-direction: column; gap: 14px; } .pr-head h2 { font-size: 32.1px; } } @media (max-width: 620px) { .pr { padding-left: 16px; padding-right: 16px; } .pr-partners { grid-template-columns: 1fr; } } /* ---------- the way a page arrives ---------- Every rule here is behind .rv, which reveal.js adds and nothing else does. Without that script the page is untouched, so a broken animation can never cost anyone the content. The reduced-motion rule at the top of this file kills the transitions outright, and reveal.js declines to run at all. */ .rv [data-rv] { opacity: 0; transform: translateY(15px); will-change: opacity, transform; } .rv [data-rv].rv-in { opacity: 1; transform: none; transition: opacity .66s cubic-bezier(.22, .61, .36, 1), transform .66s cubic-bezier(.22, .61, .36, 1); } /* the mark is the one thing that arrives by growing rather than rising */ .rv .hm-form[data-rv] { transform: translateY(0) scale(.92); } .rv .hm-form[data-rv].rv-in { transform: none; } /* the curtain: the ground colour, the mark, and then it lifts */ .rv-curtain { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); } .rv-curtain i { display: block; width: 116px; height: 116px; background: var(--band); -webkit-mask: url(mark.svg) center / contain no-repeat; mask: url(mark.svg) center / contain no-repeat; animation: rv-mark 620ms cubic-bezier(.22, .61, .36, 1) both; } @keyframes rv-mark { from { opacity: 0; transform: scale(.74) rotate(-16deg); } to { opacity: 1; transform: none; } } .rv-curtain.rv-out { opacity: 0; transform: scale(1.06); transition: opacity .48s ease, transform .48s cubic-bezier(.22, .61, .36, 1); pointer-events: none; } /* the page settles the last per cent as the curtain goes, so the two move together rather than one replacing the other */ .rv .hd, .rv body > main, .rv body > header { transition: none; } .rv-open .rv-curtain i { opacity: 0; transition: opacity .3s ease; } /* ---------- the contract address, held open ---------- */ .nav-ca { display: inline-flex; align-items: center; flex: none; height: 28px; padding: 0 4px 0 4px; border: 1px solid var(--edge); border-radius: 999px; background: var(--bg); } .nav-ca b { display: block; padding: 3px 8px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; } @media (max-width: 1020px) { .nav-ca { display: none; } } .hm-ca { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; max-width: 62ch; margin-top: 22px; padding: 11px 14px; border: 1px solid var(--edge); border-radius: 999px; background: var(--card); } .hm-ca b { flex: none; padding: 4px 11px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-family: var(--mono); font-size: 12.8px; font-weight: 700; letter-spacing: .1em; } /* the address will sit here; until then the slot is a ruled line, the same construction language the footer plate speaks */ .hm-ca-slot { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(to right, var(--edge) 0 6px, transparent 6px 12px); } /* ---------- the nav's quick trade ---------- */ .qt-pop { width: 274px; padding: 14px; cursor: default; } .qt-h { margin: 0 0 10px; font-family: var(--mono); font-size: 9.9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .qt-row { border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: 9px 11px; } .qt-lab { display: block; font-size: 11.8px; color: var(--muted); margin-bottom: 3px; } .qt-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .qt-field input, .qt-out { min-width: 0; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 19.3px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qt-field input:focus { outline: 0; } .qt-field input::-webkit-outer-spin-button, .qt-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qt-field input[type=number] { -moz-appearance: textfield; } .qt-field select { flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 4px 8px; font-family: inherit; font-size: 12.8px; font-weight: 600; color: var(--ink); cursor: pointer; } .qt-flip { display: grid; place-items: center; width: 26px; height: 26px; margin: -9px auto; position: relative; z-index: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); cursor: pointer; transition: color .15s, background .15s; } .qt-flip:hover { color: var(--accent-ink); background: var(--accent-soft); } .qt-route { margin: 10px 0 0; font-size: 12.3px; color: var(--muted); } .qt-route.on { color: var(--accent-ink); } .qt-route b { font-weight: 600; } .qt-go { display: block; margin-top: 11px; padding: 9px 12px; border-radius: 999px; background: var(--band); color: var(--on-band); font-size: 13.9px; font-weight: 600; text-align: center; } .qt-go:hover { background: var(--band-2); } /* ---------- a nav link, pressed ---------- Four navs grew separately on four pages, so the ring is declared once here for all of them. :focus-visible covers the keyboard, :active the pointer — the ring shows while the mouse is down, which is the moment the reader is asking "did that register?". */ .hm-links a, .dx-links a, .tr-links a, .cs-tabs a, .mnu-btn, .nav-lang, .mnu-pop a { outline: 0; transition: color .15s, background .15s, box-shadow .12s; } .hm-links a:focus-visible, .dx-links a:focus-visible, .tr-links a:focus-visible, .cs-tabs a:focus-visible, .mnu-btn:focus-visible, .nav-lang:focus-visible, .mnu-pop a:focus-visible, .hm-links a:active, .dx-links a:active, .tr-links a:active, .cs-tabs a:active, .mnu-btn:active, .nav-lang:active, .mnu-pop a:active { box-shadow: 0 0 0 2px var(--accent-fill), 0 0 0 3px var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); } /* the open menu keeps the ring, so the button and its panel read as one thing */ .mnu.on > .mnu-btn { box-shadow: 0 0 0 2px var(--accent-fill), 0 0 0 3px var(--accent-line); background: var(--accent-soft); } /* ---------- the footer's brand plate ---------- A construction drawing: the mark pixelated on a grid, inside dashed guides with corner ticks, the way a spec sheet shows a logo. */ .ft-cols { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); } .ft-brand { padding: 30px 24px 42px; border-left: 1px dashed var(--line); } .ft-plate { position: relative; aspect-ratio: 1; max-width: 258px; margin: 0 auto 16px; display: grid; place-items: center; } /* the construction, drawn rather than faked with pseudo-elements: there is more of it now than a border and a circle can carry */ .ft-guide { position: absolute; inset: 0; width: 100%; height: 100%; } .ft-guide .gd { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; } .ft-guide .gs { fill: none; stroke: var(--line-2); stroke-width: 1; } .ft-guide .gl { fill: none; stroke: var(--line-2); stroke-width: .7; } .ft-guide .gt { fill: none; stroke: var(--line); stroke-width: 1; } .ft-guide .gp { fill: var(--line); } .ft-px { position: relative; z-index: 1; width: 68%; aspect-ratio: 30 / 23; color: var(--accent-glow); background: currentColor; -webkit-mask: url(mark-pixel.svg) center / contain no-repeat; mask: url(mark-pixel.svg) center / contain no-repeat; } .ft-word { display: block; text-align: center; font-size: 33.2px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); } .ft-cap { display: block; text-align: center; margin-top: 8px; font-family: var(--mono); font-size: 11.2px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } @media (max-width: 860px) { .ft-cols { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } .ft-plate { max-width: 210px; } } @media (max-width: 560px) { .ft-cols { grid-template-columns: 1fr; } }