/* ==========================================================================
FemboyProxies — beta landing page
A darker, glossier take on the site. Nothing here is wired to the
application; it is a look, not a build.
========================================================================== */
:root {
--bg: #08080a;
--card: #101013;
--card-2: #0c0c10;
--line: #1e1e24;
--line-2: #2a2a32;
--text: #f2f2f5;
--muted: #9a9aa6;
--dim: #6b6b78;
--pink: #ff2d8a;
--pink-2: #ff6fb0;
--pink-dk: #c4185f;
--ff: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ff-script: "Dancing Script", cursive;
--col: 980px;
--r: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--ff);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* The two soft lights behind everything. Fixed, so they do not scroll away
and leave the lower half of the page flat. */
.glow {
position: fixed;
z-index: -1;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.glow-a {
top: -160px; left: 50%; transform: translateX(-50%);
width: 760px; height: 420px;
background: rgba(255, 45, 138, .16);
}
.glow-b {
bottom: 8%; right: -180px;
width: 520px; height: 520px;
background: rgba(120, 60, 200, .10);
}
a { color: inherit; text-decoration: none; }
/* ----------------------------------------------------------------- notice */
/* The announcement strip. Thin by intent: it runs above the wordmark, so any
height it takes is height the hero loses. */
.notice {
background: linear-gradient(90deg, var(--pink-dk), var(--pink));
color: #16000b;
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
text-align: center;
}
.notice-in {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 18px;
line-height: 1.4;
}
.notice-icon { width: 14px; height: 14px; flex: 0 0 auto; }
@media (max-width: 560px) {
.notice { font-size: 11px; }
.notice-in { gap: 6px; padding: 5px 12px; }
}
/* ------------------------------------------------------------------- nav */
.topnav {
position: sticky;
top: 0;
z-index: 10;
/* Three columns rather than a flex row: the outer two take equal space, so
the middle one is centred on the bar itself and does not drift when the
wordmark or the button changes width. */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
max-width: var(--col);
margin: 0 auto;
padding: 14px 24px;
/* Sticky over a dark page needs its own ground, or the cards show through
as they pass under it. */
background: rgba(8, 8, 10, .78);
backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
}
.topnav-mark { justify-self: start; display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.topnav-mark .script {
font-family: var(--ff-script);
font-size: 26px;
font-weight: 700;
color: var(--pink);
margin-right: -.1em;
padding-right: .1em;
}
.topnav-mark .solid { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.topnav-links { justify-self: center; display: flex; align-items: center; gap: 26px; font-size: 14px; }
.topnav-links a { color: var(--muted); }
.topnav-links a:hover { color: var(--text); }
.topnav-cta {
justify-self: end;
background: var(--pink);
border-radius: 999px;
color: #12000a !important;
font-weight: 700;
padding: 7px 16px;
}
.topnav-cta:hover { background: var(--pink-2); }
/* ------------------------------------------------------------------ hero */
.hero {
max-width: var(--col);
margin: 0 auto;
padding: 92px 24px 0;
text-align: center;
}
.wordmark {
margin: 0;
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
line-height: 1;
}
.wordmark .script {
font-family: var(--ff-script);
font-size: clamp(52px, 9vw, 104px);
font-weight: 700;
color: var(--pink);
/* The tail of the y runs under the next word, as a signature would. */
margin-right: -.12em;
padding-right: .12em;
}
.wordmark .solid {
font-size: clamp(34px, 6.2vw, 74px);
font-weight: 900;
letter-spacing: -.02em;
}
.tagline {
margin: 26px 0 0;
font-size: clamp(20px, 3vw, 30px);
font-weight: 600;
letter-spacing: -.01em;
}
.lede {
max-width: 560px;
margin: 14px auto 0;
color: var(--muted);
font-size: 15px;
}
/* ------------------------------------------------------------- built on */
/* Between the hero and the features: what this actually runs on.
Set as wordmarks, not logos. Drawing another company's mark from memory
produces something that is nearly their logo, which is worse than no logo at
all. A list item takes an ![]()
without any other change when the real files
turn up, which is what .stack-list img is for. */
.stack {
max-width: var(--col);
margin: 0 auto;
padding: 64px 24px 0;
text-align: center;
}
.stack-label {
margin: 0 0 18px;
color: var(--dim);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.stack-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 44px;
margin: 0;
padding: 0;
list-style: none;
}
.stack-list li {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--dim);
font-size: 17px;
font-weight: 600;
letter-spacing: -.01em;
white-space: nowrap;
transition: color .25s ease;
}
/* Grey at rest, pink under the pointer. The mark takes the colour with the
word because it is painted in currentColor through a mask. */
.stack-list li:hover { color: var(--pink); }
/* The mark is a silhouette: the image is the mask, the colour is the element's
own. It is what lets a png and three svgs behave as one set, and what lets
the hover recolour a png at all. */
.stack-mark {
flex: 0 0 auto;
height: 22px;
background: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* --- vendor marks, written by tools/stack_marks.py --- */
.stack-mark-gcp {
width: 22px;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.stack-mark-datapacket {
width: 18px;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.stack-mark-path {
width: 23px;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.stack-mark-gsl {
width: 19px;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.stack-mark-pletx {
width: 18px;
-webkit-mask-image: url("data:image/png;base64,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");
mask-image: url("data:image/png;base64,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");
}
/* --- end vendor marks --- */
@media (max-width: 560px) {
.stack { padding-top: 48px; }
.stack-list { gap: 12px 24px; }
.stack-list li { font-size: 14px; }
}
/* -------------------------------------------------------------- sections */
.section {
max-width: var(--col);
margin: 0 auto;
padding: 96px 24px 0;
}
.section-title {
margin: 0 0 28px;
font-size: clamp(26px, 4vw, 40px);
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* --------------------------------------------------------------- features */
/* Two rows: a wide feature beside a stacked pair, then three across. */
.bento {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, 1fr);
}
.card {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r);
background:
radial-gradient(120% 100% at 0% 0%, rgba(255, 45, 138, .10), transparent 60%),
var(--card);
padding: 22px;
}
.card-hero {
grid-column: span 2;
grid-row: span 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 300px;
}
/* Sat on the bottom edge of the card and flush to its right, so the whole
illustration is in frame: bled off the right it lost the servers, and hung
from the top it was cut off along the bottom. The words sit over it. */
.card-art {
position: absolute;
inset: auto 0 0 auto;
/* Sized so the illustration fills the card's height rather than leaving a
band of empty above it. The card cannot be shorter: the two cards beside
it need every one of those pixels, so the picture grows instead. */
width: 73%;
padding: 0;
}
/* The illustration reaches down into the words. Rather than shrink it until
it does not, the text sits on a scrim: dark at the bottom left where the
words are, clear where the picture should show through. */
.card-hero::after {
content: "";
position: absolute;
inset: 0;
/* Angled into the bottom left corner, where the words are, rather than a
band across the whole width: a full width scrim dimmed the character as
much as the empty space beside it. */
background: linear-gradient(to top right,
rgba(16, 16, 19, .97) 4%,
rgba(16, 16, 19, .82) 24%,
rgba(16, 16, 19, .35) 44%,
transparent 62%);
pointer-events: none;
}
.card-hero .eyebrow,
.card-hero .headline { position: relative; z-index: 1; }
.card-art svg,
.card-art img { width: 100%; height: auto; display: block; }
.card-art picture { display: block; }
.eyebrow {
margin: 0;
color: var(--pink);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.headline {
margin: 6px 0 0;
font-size: clamp(22px, 3.2vw, 32px);
font-weight: 800;
letter-spacing: -.01em;
text-transform: uppercase;
}
.headline.small {
font-size: 15px;
line-height: 1.35;
letter-spacing: .01em;
}
.card-stats { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stat-pair { display: flex; gap: 26px; }
.stat { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stat-label {
margin: 2px 0 0;
color: var(--dim);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.badge-art { width: 42px; flex: 0 0 auto; }
.card-geo { display: flex; align-items: center; gap: 16px; }
.pin-art { width: 38px; flex: 0 0 auto; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-lit {
background:
radial-gradient(120% 120% at 50% 0%, rgba(255, 45, 138, .22), transparent 62%),
var(--card);
border-color: #3a1830;
}
.mini-art { width: 54px; flex: 0 0 auto; }
/* ---------------------------------------------------------------- network */
/* The figures, along the foot of the map rather than in cards above it. Laid
over the picture, so it needs its own ground to be read against: the scrim
fades the map out under the words and stops at the words, which keeps the
bottom of the card from looking like a band of nothing. */
.map-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 26px;
padding: 40px 14px 10px;
background: linear-gradient(to top, rgba(16, 16, 19, .97) 46%, transparent);
color: var(--muted);
font-size: 13px;
line-height: 1.3;
}
.map-line b { color: var(--text); font-weight: 800; }
/* The divider is drawn, not typed. A middot written as a css escape put a NUL
through the stylesheet, and one written as a literal would depend on the
file being served as utf-8, which is a lot to ask of a full stop. */
.map-line span:not(:first-child)::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--line-2);
vertical-align: middle;
margin-right: 26px;
}
@media (max-width: 720px) {
.map-line { font-size: 12px; gap: 4px 18px; padding: 34px 10px 8px; }
.map-line span:not(:first-child)::before { margin-right: 18px; }
}
/* Below this the map is only a hundred pixels tall and three phrases laid over
it would cover most of it, so the line comes out of the picture and sits
under it instead, one item per row. The separators go with the flow: wrapped
onto their own lines they would lead rather than divide. */
@media (max-width: 560px) {
.map-line {
position: static;
background: none;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 12px 0 0;
}
.map-line span:not(:first-child)::before { content: none; }
}
.map {
border: 1px solid var(--line);
border-radius: var(--r);
background:
radial-gradient(120% 100% at 0% 0%, rgba(255, 45, 138, .08), transparent 60%),
var(--card);
padding: 18px;
}
/* The pins are placed as percentages of the map, so they have to be positioned
against the image itself and not against the padded card around it. */
.map-frame { position: relative; }
.map-dots { display: block; width: 100%; height: auto; }
/* The dot is the gateway. It marks the coordinate exactly, so it stays small
and nothing is allowed to move it; everything else hangs off it. */
.map-pin {
position: absolute;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 0 4px rgba(255, 45, 138, .2),
0 0 16px 4px rgba(255, 45, 138, .5);
}
.map-pin-lv { left: 18.02%; top: 31.22%; } /* Las Vegas */
.map-pin-ord { left: 25.66%; top: 26.96%; } /* Chicago */
.map-pin-lhr { left: 49.96%; top: 19.77%; } /* London */
.map-pin-hkg { left: 81.71%; top: 41.55%; } /* Hong Kong */
/* The pole, growing up out of the dot. */
.map-pin::before {
content: "";
position: absolute;
left: 50%;
bottom: 50%;
width: 1px;
height: 30px;
margin-left: -.5px;
background: linear-gradient(to top, rgba(255, 45, 138, .35), var(--pink));
}
/* The banner. Hinged at the pole and cut with a swallowtail at the loose end,
which is the whole reason it reads as a flag rather than as a label. */
.map-flag {
position: absolute;
left: 50%;
bottom: calc(50% + 24px);
padding: 3px 10px 3px 8px;
background: var(--pink);
color: #16000b;
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;
clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
transform-origin: left bottom;
animation: flag-wave 4.2s ease-in-out infinite;
}
/* Two of them fly west instead of east.
Las Vegas and Chicago are seven degrees of longitude apart, which on this map
is about the width of one banner, so flying Las Vegas the other way is what
keeps it off Chicago's pole. It also puts it out over the Pacific, where
there is nothing to cover.
Hong Kong is at 114 east, far enough over that an eastward banner reaches the
edge of the card: on a 375px screen it cleared it by half a pixel, and on
anything narrower it would not have. */
.map-pin-lv .map-flag,
.map-pin-hkg .map-flag {
left: auto;
right: 50%;
padding: 3px 8px 3px 10px;
clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
transform-origin: right bottom;
}
/* Cloth, not a signboard: the far end travels further than the hinge, which is
what the skew does. Small numbers on purpose, because the thing it is doing
this to is a word somebody has to read. */
@keyframes flag-wave {
0%, 100% { transform: rotate(0deg) skewY(0deg); }
30% { transform: rotate(-.7deg) skewY(1.1deg); }
65% { transform: rotate(.5deg) skewY(-.9deg); }
}
/* The three do not fly in unison; that would read as one thing blinking. */
.map-pin-ord .map-flag { animation-delay: .5s; }
.map-pin-lhr .map-flag { animation-delay: 1.1s; }
.map-pin-hkg .map-flag { animation-delay: 1.7s; }
@media (prefers-reduced-motion: reduce) {
.map-flag { animation: none; }
}
/* The flags keep their own size while the map shrinks with the page, so on a
narrow screen they grow relative to it and the highest one, London, climbs
out of the top. Everything comes down a size, and the card keeps enough room
above the map for a banner to sit in. */
@media (max-width: 720px) {
.map { padding-top: 26px; }
.map-pin::before { height: 20px; }
.map-flag {
bottom: calc(50% + 15px);
font-size: 10px;
padding: 2px 8px 2px 7px;
}
.map-pin-lv .map-flag,
.map-pin-hkg .map-flag { padding: 2px 7px 2px 8px; }
}
@media (max-width: 560px) {
.map { padding: 26px 12px 14px; }
.map-pin { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.map-pin::before { height: 13px; }
.map-flag {
bottom: calc(50% + 9px);
font-size: 8.5px;
letter-spacing: .04em;
padding: 2px 6px 2px 5px;
}
.map-pin-lv .map-flag,
.map-pin-hkg .map-flag { padding: 2px 5px 2px 6px; }
}
/* ---------------------------------------------------------------- pricing */
.tiers {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, 1fr);
}
.tier {
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card-2);
padding: 16px 16px 18px;
}
.tier-best {
border-color: #3a1830;
background:
radial-gradient(120% 120% at 50% 0%, rgba(255, 45, 138, .14), transparent 60%),
var(--card-2);
}
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip {
background: var(--pink);
border-radius: 999px;
color: #12000a;
font-size: 11px;
font-weight: 800;
padding: 3px 12px;
}
.save { color: var(--dim); font-size: 11px; }
.price {
margin: 22px 0 18px;
font-size: 34px;
font-weight: 800;
letter-spacing: -.03em;
}
.price .dollar { font-size: 20px; vertical-align: super; margin-right: 1px; }
.price .per { color: var(--dim); font-size: 12px; font-weight: 600; margin-left: 6px; }
.buy {
display: block;
border: 1px solid var(--line-2);
border-radius: 8px;
color: var(--text);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
padding: 9px 0;
text-align: center;
text-transform: uppercase;
}
.buy:hover { border-color: var(--pink); color: var(--pink-2); }
.buy-solid { background: var(--pink); border-color: var(--pink); color: #12000a; }
.buy-solid:hover { background: var(--pink-2); border-color: var(--pink-2); color: #12000a; }
/* ------------------------------------------------------------ plan tabs */
/* Which pool the prices belong to. No script: the radios hold the choice and
the panel belonging to the checked one is the one shown. */
.plans { position: relative; }
/* Offscreen rather than display:none, so the radios keep their place in the
tab order and can still be reached and operated from the keyboard. */
.plan-pick {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
/* The section heading and the pool picker on one line, the picker to the
right. They wrap onto two lines on a narrow screen rather than shrinking the
tabs into something hard to hit. */
.pricing-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 24px;
margin-bottom: 28px;
}
.pricing-head .section-title { margin: 0; }
.plan-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.plan-tab {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 18px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.plan-tab:hover { border-color: var(--line-2); color: var(--text); }
/* Not a label and not selectable: there is nothing behind it yet, so it does
not get a pointer or a hover that implies there is. */
.plan-tab-soon,
.plan-tab-soon:hover {
cursor: default;
color: var(--dim);
border-color: var(--line);
}
.soon {
border-radius: 999px;
background: var(--line);
color: var(--muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
padding: 2px 8px;
text-transform: uppercase;
}
.plan-panel { display: none; }
#plan-premium:checked ~ #panel-premium,
#plan-budget:checked ~ #panel-budget { display: block; }
#plan-premium:checked ~ .pricing-head [for="plan-premium"],
#plan-budget:checked ~ .pricing-head [for="plan-budget"] {
border-color: var(--pink);
background: rgba(255, 45, 138, .1);
color: var(--pink-2);
}
/* The radio is invisible, so its focus ring has to land on the label that
stands in for it, or the tabs cannot be seen while being tabbed through. */
#plan-premium:focus-visible ~ .pricing-head [for="plan-premium"],
#plan-budget:focus-visible ~ .pricing-head [for="plan-budget"] {
outline: 2px solid var(--pink);
outline-offset: 2px;
}
/* What the pool is, above what it costs. The name and the entry rate on one
line, the facts under it, then the ladder. */
.pool-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
border-bottom: 1px solid var(--line);
padding-bottom: 16px;
margin-bottom: 14px;
}
.pool-head-say h3 {
margin: 0;
font-size: 21px;
font-weight: 800;
letter-spacing: -.02em;
}
.pool-head-say p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.pool-head-from {
margin: 0;
color: var(--dim);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.pool-head-from b {
color: var(--pink-2);
font-size: 30px;
font-weight: 800;
letter-spacing: -.03em;
margin: 0 4px 0 6px;
}
.pool-head-from .dollar { font-size: 18px; vertical-align: super; margin-right: 1px; }
/* The total under the rate. Same size as the chip so it reads as a caption to
the price rather than competing with it. */
.tier-total {
margin: -10px 0 16px;
color: var(--dim);
font-size: 12px;
min-height: 16px;
}
.tier-total b { color: var(--text); font-weight: 700; }
/* A tab that has no prices yet. Shaped like a tier so the section does not
jump about when it is picked. */
.plan-empty {
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card-2);
padding: 26px 22px;
max-width: 520px;
}
.plan-empty-head { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.plan-empty-note { margin: 8px 0 18px; color: var(--muted); font-size: 14px; }
.plan-empty .buy { display: inline-block; padding: 9px 22px; }
/* ---------------------------------------------------------------- contact */
.contact { max-width: var(--col); padding-bottom: 96px; }
.banner {
display: flex;
align-items: center;
gap: 20px;
border: 1px solid #3a1830;
border-radius: var(--r);
background:
radial-gradient(120% 160% at 0% 50%, rgba(255, 45, 138, .22), transparent 62%),
var(--card);
padding: 26px 28px;
}
.banner:hover { border-color: var(--pink); }
.banner-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--pink);
color: #12000a;
}
.banner-icon svg { width: 24px; height: 24px; }
.banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.banner-label { color: var(--muted); font-size: 13px; }
.banner-handle {
font-size: clamp(20px, 3vw, 26px);
font-weight: 800;
letter-spacing: -.01em;
}
.banner-go {
margin-left: auto;
flex: 0 0 auto;
color: var(--pink);
}
.banner-go svg { width: 26px; height: 26px; display: block; }
.banner:hover .banner-go { transform: translateX(3px); }
/* ---------------------------------------------------------------- footer */
/* Pink, as it was, but carrying something. Dark ink on it rather than white:
white on this pink is below any readable contrast. */
.footer {
background: var(--pink);
color: #16000b;
margin-top: 40px;
padding: 40px 24px 18px;
}
.footer a { color: #16000b; opacity: .82; }
.footer a:hover { opacity: 1; text-decoration: underline; }
.footer-inner {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: space-between;
max-width: var(--col);
margin: 0 auto;
}
.footer-brand { max-width: 300px; }
.footer-mark { display: flex; align-items: baseline; gap: 3px; line-height: 1; margin: 0; }
.footer-mark .script {
font-family: var(--ff-script);
font-size: 30px;
font-weight: 700;
color: #16000b;
margin-right: -.1em;
padding-right: .1em;
}
.footer-mark .solid { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.footer-line { margin: 10px 0 0; font-size: 13px; opacity: .78; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 44px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.footer-head {
margin: 0 0 3px;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .6;
}
/* ------------------------------------------------------------- narrower */
@media (max-width: 860px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.card-hero { grid-column: span 2; grid-row: auto; min-height: 260px; }
.card-art { width: 54%; }
.tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.hero { padding-top: 56px; }
/* The in page links go; the wordmark scrolls to the top and the button is
the only thing anyone taps up here anyway.
Two columns, not three. Hiding the middle one left the grid with three
tracks and two items, so the button sat in the middle track instead of
the right hand one. */
.topnav {
grid-template-columns: 1fr auto;
padding: 12px 18px;
}
.topnav-links { display: none; }
.banner { gap: 14px; padding: 20px; }
.banner-icon { width: 42px; height: 42px; }
.footer-cols { gap: 28px; }
.section { padding-top: 68px; }
.bento, .tiers { grid-template-columns: minmax(0, 1fr); }
/* Without this the wide card still asks for two columns, and a one column
grid grows an implicit second one to give it: cards land in a column that
is not there, and two of the six disappear off the side. */
.card-hero { grid-column: auto; grid-row: auto; min-height: 230px; }
/* The illustration stops competing with the words at this width. */
.card-art { position: static; width: 70%; margin: 0 auto 8px; padding: 0; }
.card-hero { justify-content: flex-start; }
.card-row { flex-direction: row; }
.stat-pair { gap: 18px; }
}
/* --------------------------------------------------------- inner pages ---- */
/* Pages that are not the landing but wear its clothes: the same card, the same
pink, the same column width. They get a heading block instead of a hero,
because a second full-height hero on every page is a tax on the reader. */
.page-head {
max-width: var(--col);
margin: 0 auto;
padding: 64px 24px 0;
text-align: center;
}
.page-eyebrow {
margin: 0 0 10px;
color: var(--pink);
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.page-title {
margin: 0;
font-size: clamp(34px, 6vw, 56px);
font-weight: 900;
letter-spacing: -.03em;
line-height: 1.05;
}
.page-lede {
max-width: 560px;
margin: 14px auto 0;
color: var(--muted);
font-size: 15px;
line-height: 1.6;
}
.pink { color: var(--pink); }
.center { text-align: center; }
/* A card's own heading, with its mark. The icon is drawn rather than an image
so it takes the card's colour and needs no second request. */
.card-head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
font-size: 17px;
font-weight: 800;
letter-spacing: -.01em;
}
.card-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 10px;
background: rgba(255, 45, 138, .12);
color: var(--pink);
}
.card-icon svg { width: 18px; height: 18px; }
.card-foot {
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--dim);
font-size: 12px;
line-height: 1.6;
}
.card-foot a { color: var(--pink-2); }
/* ------------------------------------------------------------- abuse ---- */
/* The form beside what to expect from sending it. Two columns while there is
room for two, one underneath when there is not: the form is the point, so
it leads on a narrow screen rather than sitting under three explanations. */
.abuse-grid {
display: grid;
gap: 16px;
grid-template-columns: 1.25fr 1fr;
align-items: start;
}
.abuse-side { display: grid; gap: 16px; }
@media (max-width: 860px) {
.abuse-grid { grid-template-columns: 1fr; }
}
.abuse-form { display: grid; gap: 14px; }
.row-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) {
.row-2 { grid-template-columns: 1fr; }
}
.field { display: grid; gap: 6px; }
.field label {
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.field input,
.field select,
.field textarea {
width: 100%;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--bg);
color: var(--text);
font-family: inherit;
font-size: 14px;
padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(255, 45, 138, .15);
}
/* The focus ring is a colour change, so it needs to survive a high contrast
setting where colours are replaced. */
@media (forced-colors: active) {
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid Highlight; }
}
/* What the server said about one field, under that field. */
.field-bad { color: var(--pink-2); font-size: 12px; }
.btn-pink {
border: 0;
border-radius: 10px;
background: var(--pink);
color: #12000a;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 800;
padding: 13px 0;
width: 100%;
}
.btn-pink:hover { background: var(--pink-2); }
/* What the server said about the whole submission. */
.note {
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
}
.note p { margin: 0; }
.note p + p { margin-top: 8px; }
.note a { color: var(--pink-2); }
.note-ok { border-color: rgba(45, 200, 120, .45); background: rgba(45, 200, 120, .07); }
.note-bad { border-color: var(--pink-dk); background: rgba(255, 45, 138, .08); }
.ticks, .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.45;
}
/* A drawn tick rather than a character, so it lines up and cannot be picked up
by a selection or read out as punctuation. */
.ticks li::before {
content: "";
width: 15px;
height: 15px;
margin-top: 2px;
flex: none;
border-radius: 50%;
background: var(--pink);
clip-path: polygon(
18% 48%, 42% 70%, 82% 28%, 88% 36%, 42% 84%, 12% 56%);
}
.steps li {
display: flex;
align-items: center;
gap: 12px;
color: var(--text);
font-size: 13.5px;
}
.step-n {
display: grid;
place-items: center;
width: 24px;
height: 24px;
flex: none;
border-radius: 50%;
background: var(--pink);
color: #12000a;
font-size: 12px;
font-weight: 800;
}
.step-what { font-weight: 600; }
.step-when { margin-left: auto; color: var(--dim); font-size: 12px; }
/* The urgent card. One line of text beside its mark, no heading: it is a
warning, and a heading would make it read as another section. */
.card-warn {
display: flex;
align-items: flex-start;
gap: 12px;
border-color: var(--pink-dk);
}
.card-warn p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.card-warn a { color: var(--pink-2); }
.card-icon-warn {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 10px;
background: rgba(255, 45, 138, .12);
color: var(--pink);
}
.card-icon-warn svg { width: 18px; height: 18px; }
/* Allowed against prohibited, side by side so the pair reads as one rule. */
.aup-title {
margin: 0 0 18px;
font-size: 18px;
font-weight: 800;
letter-spacing: -.01em;
text-align: center;
}
.aup-cols {
display: grid;
gap: 22px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
.aup-cols { grid-template-columns: 1fr; }
}
.aup-cols .aup-col + .aup-col { border-left: 1px solid var(--line); padding-left: 22px; }
@media (max-width: 700px) {
.aup-cols .aup-col + .aup-col {
border-left: 0;
border-top: 1px solid var(--line);
padding: 22px 0 0;
}
}
.aup-head {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 8px;
font-size: 14px;
font-weight: 800;
}
.aup-mark svg { width: 20px; height: 20px; display: block; }
.aup-ok { color: #2dc878; }
.aup-no { color: var(--pink); }
.aup-col p:last-child {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.6;
}
/* ---------------------------------------------------------- prose pages ---- */
/* The terms, the policy, the FAQ and the referral page: a rail of section
links beside a column of prose. Everything here is scoped under .doc-body or
.doc-rail, because these pages carry short utility class names of their own
(.q, .a, .r, .row) that would otherwise be a collision waiting to happen
with anything the landing adds later. */
.doc-layout {
display: grid;
gap: 40px;
grid-template-columns: 200px 1fr;
align-items: start;
}
@media (max-width: 820px) {
.doc-layout { grid-template-columns: 1fr; gap: 28px; }
}
.doc-rail { position: sticky; top: 24px; }
@media (max-width: 820px) {
/* Sticky in a single column pins the links over the prose being read. */
.doc-rail { position: static; }
}
.doc-rail-label {
margin: 0 0 12px;
color: var(--dim);
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.doc-rail nav { display: grid; gap: 2px; }
.doc-rail nav a {
border-left: 2px solid var(--line);
color: var(--muted);
font-size: 13px;
padding: 6px 0 6px 12px;
}
.doc-rail nav a:hover { border-left-color: var(--pink); color: var(--text); }
.doc-facts {
display: grid;
gap: 10px;
margin-top: 22px;
border-top: 1px solid var(--line);
padding-top: 18px;
}
.doc-facts div { display: grid; gap: 2px; }
.doc-facts span {
color: var(--dim);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
.doc-facts b { font-size: 14px; font-weight: 700; }
/* --------------------------------------------------------------- prose ---- */
.doc-body { min-width: 0; color: var(--text); font-size: 14.5px; line-height: 1.7; }
.doc-body h2 {
margin: 0 0 14px;
font-size: 20px;
font-weight: 800;
letter-spacing: -.02em;
}
.doc-body h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 700; }
.doc-body p { margin: 0 0 14px; color: var(--muted); }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body b { color: var(--text); font-weight: 700; }
.doc-body a { color: var(--pink-2); }
.doc-body a:hover { text-decoration: underline; }
.doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
.doc-body li { margin-bottom: 8px; }
.doc-body li:last-child { margin-bottom: 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* Each numbered section as its own card, which is what makes a wall of terms
scannable and matches the way the landing groups anything. */
.doc-body section {
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card-2);
padding: 22px 24px;
margin-top: 16px;
/* The rail links jump here, and a sticky header would otherwise cover the
heading that was jumped to. */
scroll-margin-top: 24px;
}
.doc-body .muted { color: var(--muted); }
.doc-body .small { font-size: 12.5px; }
.doc-body .r { text-align: right; }
.doc-body .ok { color: #2dc878; }
.doc-body .pink { color: var(--pink); }
.doc-body .mt-48 { margin-top: 0; }
.doc-body .mt-16 { margin-top: 16px; }
.doc-body .stack-8 > * + * { margin-top: 8px; }
.doc-body .stack-16 > * + * { margin-top: 16px; }
.doc-body .stack-24 > * + * { margin-top: 18px; }
.doc-body .w-620 { max-width: 620px; }
.doc-body .row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-body .box {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg);
padding: 18px;
}
/* Term and definition, one per row, so a list of what a field means lines up
instead of reading as a paragraph. */
.doc-body .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.doc-body .kv dt { color: var(--dim); font-size: 13px; }
.doc-body .kv dd { margin: 0; color: var(--muted); font-size: 13.5px; }
@media (max-width: 520px) {
.doc-body .kv { grid-template-columns: 1fr; gap: 2px 0; }
.doc-body .kv dd { margin-bottom: 10px; }
}
.doc-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc-body th {
border-bottom: 1px solid var(--line-2);
color: var(--dim);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
padding: 0 10px 8px 0;
text-align: left;
text-transform: uppercase;
}
.doc-body td {
border-bottom: 1px solid var(--line);
color: var(--muted);
padding: 9px 10px 9px 0;
}
.doc-body tr:last-child td { border-bottom: 0; }
/* A question that opens. does this without a line of script, which
is why the FAQ has never needed any. */
.doc-body .q {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg);
padding: 13px 16px;
}
.doc-body .q + .q { margin-top: 8px; }
.doc-body .q summary {
cursor: pointer;
font-size: 14px;
font-weight: 700;
list-style: none;
padding-right: 26px;
position: relative;
}
.doc-body .q summary::-webkit-details-marker { display: none; }
/* A drawn chevron that turns, rather than the browser's triangle, which no two
of them draw the same way. */
.doc-body .q summary::after {
content: "";
position: absolute;
right: 4px;
top: 6px;
width: 7px;
height: 7px;
border-right: 2px solid var(--pink);
border-bottom: 2px solid var(--pink);
transform: rotate(45deg);
transition: transform .18s ease;
}
.doc-body .q[open] summary::after { transform: rotate(-135deg); top: 9px; }
.doc-body .q summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.doc-body .q .a { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.doc-body .q .a p:last-child { margin-bottom: 0; }
.doc-body .btn,
.doc-rail .btn {
display: inline-block;
border: 1px solid var(--pink);
border-radius: 999px;
background: var(--pink);
color: #12000a;
font-size: 13px;
font-weight: 800;
padding: 10px 22px;
text-align: center;
}
.doc-body .btn:hover,
.doc-rail .btn:hover { background: var(--pink-2); border-color: var(--pink-2); text-decoration: none; }
.doc-body .btn-ghost,
.doc-rail .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.doc-body .btn-ghost:hover,
.doc-rail .btn-ghost:hover { background: transparent; border-color: var(--pink); color: var(--pink-2); }
.doc-body .btn-block,
.doc-rail .btn-block { display: block; width: 100%; }
.doc-rail .mt-16 { margin-top: 16px; }