/* ==========================================================================
QOQ Design Ltd. One stylesheet, no scripts.
The whole site stands on the light field of the logo artwork: a navy-black
base, a plum glow on the left, periwinkle in the bottom-left corner, violet
in the top-right corner, an indigo wash right of centre, and a lavender beam
rising at 33 degrees with a soft upper edge and a sharp lower edge.
The field is painted once, on two viewport-fixed pseudo-elements of ,
so it stays put while the pages scroll over it. Everything below a page's
opening sits on .veil (a translucent navy) so text keeps its contrast
wherever the glows and the beam happen to fall behind it.
Contents
1. Font
2. Tokens
3. The field
4. Base
5. Masthead and navigation
6. Hero (home)
7. Ring linework
8. Company particulars
9. Veil and sections
10. Two jobs
11. Stance panel
12. Apps
13. Contact
14. Footer
15. Sub-pages: page head and prose sheet
16. Wider screens
17. Smaller screens
18. Fallbacks: no backdrop-filter, reduced motion, forced colours
19. Print
========================================================================== */
/* 1. Font ----------------------------------------------------------------- */
@font-face {
font-family: "Sora";
src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
/* 2. Tokens --------------------------------------------------------------- */
:root {
/* colour */
--navy: #04061f; /* the artwork's base; also theme-color */
--white: #fff;
--text: #e9e6f8; /* running text */
--quiet: #cdc7ec; /* secondary text: a light lavender, never grey */
--link: #d6cdff;
--lavender: #a996f2; /* dashed slot, list markers */
--violet: #7a48d8;
--line: rgba(208, 200, 255, .2);
--line-strong: rgba(226, 220, 255, .38);
--veil: rgba(3, 5, 28, .5);
--veil-clear: rgba(3, 5, 28, 0);
--glass: rgba(5, 7, 36, .66);
--glass-solid: rgba(5, 7, 36, .93); /* used when backdrop-filter is missing */
/* type */
--font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--t-body: 1.0625rem;
--t-lede: clamp(1.125rem, 1.4vw, 1.3125rem);
--t-h1: clamp(2.75rem, 7.4vw, 7.25rem);
--t-h1-page: clamp(2.75rem, 6vw, 5.5rem);
--t-h2: clamp(1.875rem, 3.3vw, 2.875rem);
--t-word: clamp(1.75rem, 4.4vw, 4rem); /* "Publish" and "Host" */
--t-mail: clamp(1.5rem, 7.2vw, 5.5rem);
/* layout */
--gutter: clamp(1.25rem, 5vw, 4.5rem);
--max: 75rem;
--section: clamp(4.5rem, 9vw, 8rem);
--radius: clamp(1.25rem, 2.4vw, 2rem);
color-scheme: dark;
}
/* 3. The field -------------------------------------------------------------
Declared on so that the two pseudo-elements below inherit it.
--beam is where the beam's bright core sits along the 147deg gradient line.
48.5% reproduces the artwork exactly; the pages push it towards the lower
right so that a page's opening lines stand in the dark and the light passes
beside them. --beam-x / --beam-y carry the glows that belong to the beam
along with it. */
body {
--beam: 65%;
--beam-x: 9%;
--beam-y: 22%;
/* Glows and shade, top layer first. */
--field-glows:
/* true black, top centre, and the black that closes the lower right */
radial-gradient(ellipse 34% 60% at 32% 0%, rgba(0, 3, 23, 1), rgba(0, 3, 23, .7) 45%, rgba(0, 3, 23, 0) 100%),
radial-gradient(ellipse 46% 52% at 76% 108%, rgba(1, 4, 30, 1), rgba(1, 4, 32, .8) 50%, rgba(1, 4, 40, 0) 100%),
/* bright violet, top-right corner */
radial-gradient(ellipse 42% 70% at 100% 0%, #7a48d8 0%, rgba(118, 72, 214, .85) 28%, rgba(90, 64, 200, .4) 60%, rgba(60, 50, 170, 0) 100%),
/* royal-indigo wash right of centre */
radial-gradient(ellipse 28% 30% at 79% 26%, rgba(40, 40, 150, .85), rgba(32, 34, 136, .4) 55%, rgba(20, 22, 100, 0) 100%),
/* the shade: just past the beam's lower-right edge everything drops to navy; this is what makes that edge hard */
linear-gradient(147deg,
rgba(2, 5, 44, 0) calc(var(--beam) + 2.5%),
rgba(2, 5, 46, .8) calc(var(--beam) + 7.5%),
rgba(1, 4, 34, .72) calc(var(--beam) + 16%),
rgba(1, 4, 30, 0) calc(var(--beam) + 38%)),
/* periwinkle, bottom-left corner; held a shade under the artwork's brightest pixel (#596dd5)
so that white text keeps 4.5:1 even if it lands on the bare corner */
radial-gradient(ellipse 40% 62% at 0% 100%, #5368d0 0%, rgba(84, 104, 208, .78) 30%, rgba(80, 80, 180, .3) 62%, rgba(70, 70, 170, 0) 100%),
/* plum-black top-left corner, then the warm plum glow on the left */
radial-gradient(ellipse 30% 50% at 0% 0%, rgba(14, 1, 30, 1), rgba(14, 1, 30, 0) 100%),
radial-gradient(ellipse 40% 62% at 4% 54%, rgba(64, 12, 86, 1), rgba(52, 16, 92, .6) 50%, rgba(40, 16, 90, 0) 100%),
/* the broad lavender body the beam melts into at its lower-left end; the shade cuts it off on the far side */
radial-gradient(ellipse 34% 52% at calc(30% + var(--beam-x)) calc(92% + var(--beam-y)), rgba(112, 100, 188, .95), rgba(104, 88, 180, .55) 50%, rgba(90, 70, 166, 0) 100%);
/* The beam: a long soft rise on its upper-left side, a short drop on its lower-right side. */
--field-beam:
/* the top-centre black eats the beam's soft side near the top edge */
radial-gradient(ellipse 30% 58% at 39% -6%, rgba(0, 3, 23, .9), rgba(0, 3, 23, .55) 55%, rgba(0, 3, 23, 0) 100%),
linear-gradient(147deg,
rgba(104, 76, 176, 0) calc(var(--beam) - 15%),
rgba(104, 76, 176, .2) calc(var(--beam) - 9%),
rgba(104, 76, 176, .55) calc(var(--beam) - 4%),
rgba(108, 84, 180, .9) calc(var(--beam) - .8%),
rgba(108, 84, 180, .92) calc(var(--beam) + 1.4%),
rgba(88, 64, 166, .7) calc(var(--beam) + 3%),
rgba(60, 42, 144, .4) calc(var(--beam) + 4.8%),
rgba(36, 26, 118, .14) calc(var(--beam) + 6.6%),
rgba(20, 18, 100, 0) calc(var(--beam) + 8.5%)),
/* the beam's top-right end is dimmer, before the violet corner swallows it */
radial-gradient(ellipse 16% 40% at calc(69% + var(--beam-x)) calc(-4% + var(--beam-y)), rgba(8, 6, 46, .55), rgba(8, 6, 46, 0) 100%),
/* the beam dims and turns purple through the middle of its length */
radial-gradient(ellipse 20% 38% at calc(50% + var(--beam-x)) calc(44% + var(--beam-y)), rgba(70, 20, 130, .5), rgba(70, 20, 130, 0) 100%);
}
body::before,
body::after {
content: "";
position: fixed;
z-index: -1;
inset: 0;
height: 100vh;
height: 100lvh; /* the tall viewport, so mobile toolbars never uncover an edge */
pointer-events: none;
background-repeat: no-repeat;
}
body::before {
background-color: #0a0c4c;
background-image: var(--field-glows);
}
body::after {
background-image: url("../img/grain.svg"), var(--field-beam);
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 240px 240px, auto, auto, auto, auto;
}
/* The one ambient motion on the site: the beam breathes, opacity only. */
@media (prefers-reduced-motion: no-preference) {
body::after {
animation: breathe 14s ease-in-out infinite alternate;
}
}
@keyframes breathe {
from { opacity: 1; }
to { opacity: .8; }
}
/* 4. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background-color: var(--navy);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 3rem;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
color: var(--text);
font-family: var(--font);
font-size: var(--t-body);
font-weight: 400;
line-height: 1.65;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
main {
flex: 1 0 auto;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
margin: 0;
}
ul[role="list"] {
padding: 0;
list-style: none;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: var(--link);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
}
a:hover {
color: var(--white);
}
:focus-visible {
outline: 2px solid var(--white);
outline-offset: 4px;
border-radius: 6px;
box-shadow: 0 0 0 8px rgba(122, 72, 216, .6);
}
::selection {
background: var(--violet);
color: var(--white);
}
.nowrap {
white-space: nowrap;
}
/* holds the logo symbol and the stroke gradients; takes up no room */
.defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.wrap {
width: 100%;
max-width: calc(var(--max) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip {
position: absolute;
z-index: 10;
left: var(--gutter);
top: -6rem;
padding: .7rem 1.2rem;
border-radius: 999px;
background: var(--white);
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
.skip:hover {
color: var(--navy);
}
.skip:focus {
top: .75rem;
}
/* 5. Masthead and navigation ---------------------------------------------- */
/* In the flow, not overlaid: if the nav wraps (narrow screens, enlarged text)
it pushes the page down instead of running into the headline. */
.masthead {
position: relative;
z-index: 3;
}
.masthead__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 1.5rem;
padding-top: 1.1rem;
}
.logo {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--white);
}
.logo svg {
width: 4.75rem;
height: auto;
fill: currentColor;
}
.nav ul {
display: flex;
flex-wrap: wrap;
gap: 0 clamp(1.1rem, 2.4vw, 2.25rem);
}
.nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--white);
font-size: 1rem;
text-decoration: none;
}
.nav a:hover,
.nav a[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .45em;
}
/* 6. Hero (home) ------------------------------------------------------------
The stage holds the headline and the ring linework and clips the linework,
so nothing of it can reach the particulars strip underneath. */
.hero {
display: flex;
flex-direction: column;
min-height: calc(min(100svh, 60rem) - 4rem); /* less the masthead, so the particulars land on the fold */
padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__stage {
position: relative;
flex: 1 0 auto;
overflow: hidden;
padding-top: clamp(2.5rem, 8vh, 5.25rem);
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.hero__copy {
position: relative;
}
.hero__title {
max-width: 12.5ch;
color: var(--white);
font-size: var(--t-h1);
font-weight: 500;
line-height: 1;
letter-spacing: -.045em;
text-wrap: balance;
}
.hero__lede {
max-width: 36rem;
margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
color: var(--white);
font-size: var(--t-lede);
line-height: 1.58;
}
.cta {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: .5rem 1.6rem;
border: 1px solid var(--white);
border-radius: 999px;
background: var(--white);
color: var(--navy);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
text-align: center;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover {
background: var(--link);
border-color: var(--link);
color: var(--navy);
}
.button:focus-visible {
border-radius: 999px;
}
.button--ghost {
border-color: rgba(255, 255, 255, .62);
background: rgba(4, 6, 31, .22);
color: var(--white);
font-weight: 500;
}
.button--ghost:hover {
border-color: var(--white);
background: rgba(255, 255, 255, .12);
color: var(--white);
}
/* 7. Ring linework ----------------------------------------------------------
The construction of the mark (rings, band, 45-degree tails) as 1px lines,
cropped off the right edge. Decorative. It must read as fine technical
drawing, never as a large logo. */
.lines {
position: absolute;
top: 2rem;
right: 0;
width: auto;
max-width: none;
height: calc(100% - 5rem);
transform: translateX(47%);
fill: none;
stroke-width: 1.5;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 34%);
mask-image: linear-gradient(90deg, transparent 3%, #000 34%);
}
.lines__guide {
stroke-width: 1;
stroke-dasharray: 3 9;
opacity: .5;
}
.lines__tick {
stroke-width: 1;
opacity: .8;
}
/* 8. Company particulars ------------------------------------------------------
Dark glass, so the text is safe wherever the beam falls behind it.
Glass 1 of 3. Cells carry a left and a top hairline; the strip clips the
ones that land on its own edge, so the dividers survive every reflow. */
.facts {
display: grid;
grid-template-columns: 1fr 1.2fr 1.1fr 1.95fr 1.25fr;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 1.25rem;
background: var(--glass);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(22px) saturate(1.25);
backdrop-filter: blur(22px) saturate(1.25);
}
.facts__item {
margin: -1px 0 0 -1px;
padding: 1.15rem clamp(1.1rem, 1.8vw, 1.6rem) 1.25rem;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.facts dt {
color: var(--quiet);
font-size: .9375rem;
line-height: 1.4;
}
.facts dd {
margin-top: .2rem;
color: var(--white);
font-size: 1.0625rem;
font-weight: 450;
line-height: 1.4;
}
/* 9. Veil and sections ------------------------------------------------------
Everything after a page's opening sits in .veil. It fades in over --veil-fade,
which is exactly the empty padding above its first line of text, so there is
no line under the hero and no text on a half-strength veil. Then it holds one
flat tint, so there are no seams between sections. The footer carries the same flat tint.
The field stays recognisable through it; the tint is what guarantees the
text contrast. */
.veil {
--veil-fade: calc(var(--section) + 2rem);
padding-top: var(--veil-fade);
background-image: linear-gradient(var(--veil-clear), var(--veil) var(--veil-fade));
}
.section {
padding-block: var(--section);
}
.veil > .section:first-child {
padding-top: 0;
}
.section__title {
color: var(--white);
font-size: var(--t-h2);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.04em;
text-wrap: balance;
}
.section__intro {
max-width: 24rem;
margin-top: 1.25rem;
}
.split {
display: grid;
gap: 2.5rem clamp(2rem, 5vw, 5rem);
}
/* 10. Two jobs ----------------------------------------------------------------
Two interlocked outline rings. Each word sits in its own ring at display
size; the captions run underneath at body size. Each .job is dissolved into
the grid (display: contents) so the words share row one and the captions
can sit side by side or stack. */
.jobs {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
}
.jobs__rings {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
fill: none;
}
.jobs__rings .faint {
opacity: .45;
}
.job {
display: contents;
}
.job__word {
position: relative;
display: grid;
place-items: center;
grid-row: 1;
aspect-ratio: 382.5 / 420; /* half of the rings drawing */
color: var(--white);
font-size: var(--t-word);
font-weight: 500;
line-height: 1;
letter-spacing: -.045em;
}
/* nudge each word to the middle of the part of its ring that the other ring leaves free */
.job:first-of-type .job__word {
padding-right: 10%;
}
.job:last-of-type .job__word {
padding-left: 10%;
}
.job__text {
grid-column: 1 / -1;
padding-block: 1.25rem;
border-top: 1px solid var(--line);
}
.job:first-of-type .job__text {
margin-top: 1.75rem;
}
/* 11. Stance panel --------------------------------------------------------------
The one violet panel on the home page. Glass 2 of 3. Its border is a
gradient that brightens where the beam crosses; it is drawn by ::before,
masked down to a 1px frame. */
.stance {
position: relative;
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 3.6vw, 3.25rem);
border-radius: var(--radius);
background-image: linear-gradient(147deg, rgba(150, 118, 242, .44) 0%, rgba(122, 72, 216, .46) 40%, rgba(140, 116, 232, .44) 59%, rgba(80, 64, 192, .42) 70%, rgba(92, 112, 216, .4) 100%);
box-shadow: 0 2.5rem 5rem -2.5rem rgba(4, 2, 40, .85);
-webkit-backdrop-filter: blur(28px) saturate(1.35);
backdrop-filter: blur(28px) saturate(1.35);
}
.stance::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background-image: linear-gradient(147deg, rgba(235, 228, 255, .3) 0%, rgba(235, 228, 255, .24) 44%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 61%, rgba(235, 228, 255, .26) 72%, rgba(235, 228, 255, .16) 100%);
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.stance__title {
color: var(--white);
font-size: clamp(1.875rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1.06;
letter-spacing: -.045em;
text-wrap: balance;
}
/* one sentence per line */
.stance__title span {
display: block;
}
.stance__text {
display: grid;
gap: 1.1rem clamp(2rem, 4vw, 4rem);
color: var(--white);
}
/* 12. Apps ------------------------------------------------------------------ */
.applist {
border-top: 1px solid var(--line);
}
.app {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem 1.75rem;
align-items: start;
padding-block: 2rem;
border-bottom: 1px solid var(--line);
}
/* iOS icon shape. An ![]()
for a released app, a dashed for the empty slot. */
.app__icon {
width: 5.5rem;
height: 5.5rem;
border-radius: 22.5%;
}
.app__icon--slot {
border: 2px dashed var(--lavender);
background: rgba(169, 150, 242, .1);
}
.app__text {
min-width: 0;
}
.app__name {
color: var(--white);
font-size: 1.375rem;
font-weight: 500;
line-height: 1.25;
letter-spacing: -.025em;
}
.app__desc {
max-width: 35rem;
margin-top: .5rem;
}
.app__links {
display: flex;
flex-wrap: wrap;
gap: 0 1.75rem;
grid-column: 2;
}
.app__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* 13. Contact --------------------------------------------------------------- */
.contact__mail {
display: inline-block;
max-width: 100%;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
color: var(--white);
font-size: var(--t-mail);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.05em;
text-decoration-thickness: 1px;
text-decoration-color: var(--line-strong);
text-underline-offset: .14em;
overflow-wrap: anywhere;
}
.contact__mail:hover {
text-decoration-color: var(--white);
}
.contact__phone {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: .75rem;
color: var(--white);
font-size: clamp(1.375rem, 2.6vw, 2rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.03em;
text-decoration-thickness: 1px;
text-decoration-color: var(--line-strong);
text-underline-offset: .18em;
}
.contact__phone:hover {
text-decoration-color: var(--white);
}
.contact__note {
max-width: 34rem;
margin-top: 1.5rem;
}
.routes {
display: grid;
gap: 0 clamp(2rem, 4vw, 4rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.route {
padding-block: 1.1rem 1.5rem;
border-top: 1px solid var(--line);
}
.route__title {
font-size: 1.1875rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: -.02em;
}
.route__title a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--white);
}
.route p {
color: var(--quiet);
}
/* 14. Footer ----------------------------------------------------------------
No glass: the footer stands on the veiled field, so its logo sits on the
logo's own background. */
.footer {
padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
border-top: 1px solid var(--line);
background-color: var(--veil);
}
.footer__inner {
display: grid;
gap: 1.5rem clamp(2rem, 5vw, 5rem);
}
.footer .logo {
justify-self: start;
}
.footer__legal {
display: grid;
gap: .6rem;
max-width: 42rem;
color: var(--quiet);
font-size: 1rem;
line-height: 1.6;
}
/* 15. Sub-pages: page head and prose sheet -------------------------------------
A compact opening on the bare field, then the long-form text on one sheet of
dark glass. Glass 3 of 3. */
.pagehead {
position: relative;
overflow: hidden;
padding-top: clamp(3rem, 10vh, 6rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pagehead__title {
position: relative;
max-width: 14ch;
color: var(--white);
font-size: var(--t-h1-page);
font-weight: 500;
line-height: 1;
letter-spacing: -.045em;
text-wrap: balance;
}
/* a quieter, smaller crop of the linework */
.pagehead .lines {
top: 0;
height: 34rem;
transform: translateX(50%);
opacity: .7;
-webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 34%), linear-gradient(#000 18%, transparent 50%);
mask-image: linear-gradient(90deg, transparent 3%, #000 34%), linear-gradient(#000 18%, transparent 50%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* On sub-pages the sheet follows the page head directly. The veil fades in
behind the top of the sheet, whose own glass keeps the text safe there. */
.veil--page {
--veil-fade: 18rem;
padding-top: 0;
padding-bottom: var(--section);
}
.sheet {
max-width: calc(41rem + 2 * clamp(1.35rem, 4.5vw, 3.75rem));
padding: clamp(1.75rem, 4.5vw, 3.75rem) clamp(1.35rem, 4.5vw, 3.75rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--glass);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2.5rem 5rem -2.5rem rgba(2, 2, 24, .9);
-webkit-backdrop-filter: blur(26px) saturate(1.2);
backdrop-filter: blur(26px) saturate(1.2);
}
.prose {
color: var(--text);
font-size: clamp(1.125rem, 1.3vw, 1.1875rem);
line-height: 1.68;
}
.prose > * + * {
margin-top: 1.15em;
}
.prose .lede {
color: var(--white);
font-size: clamp(1.25rem, 1.7vw, 1.4375rem);
line-height: 1.5;
letter-spacing: -.012em;
}
.prose .meta {
color: var(--quiet);
font-size: 1rem;
}
.prose h2 {
margin-top: 2.6rem;
padding-top: 2.4rem;
border-top: 1px solid var(--line);
color: var(--white);
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
font-weight: 500;
line-height: 1.18;
letter-spacing: -.035em;
text-wrap: balance;
}
.prose a {
color: var(--link);
text-decoration-thickness: 1.5px;
text-decoration-color: var(--lavender);
overflow-wrap: anywhere;
}
.prose a:hover {
color: var(--white);
text-decoration-color: var(--white);
}
/* the email line on the support page */
.prose .mail {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .15rem 1rem;
padding: .5rem 1.25rem;
border: 1px solid var(--line-strong);
border-radius: 1rem;
background: rgba(169, 150, 242, .1);
}
.prose .mail span {
min-width: 3.25rem; /* "Email" and "Phone" share a column, so the values line up */
color: var(--quiet);
font-size: 1rem;
}
.prose .mail a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--white);
font-size: clamp(1.25rem, 2.2vw, 1.625rem);
font-weight: 500;
letter-spacing: -.03em;
}
/* the designated agent's address on the copyright page */
.prose .agent {
display: grid;
gap: .15rem;
padding: 1.25rem 1.5rem;
border: 1px solid var(--line-strong);
border-radius: 1rem;
background: rgba(169, 150, 242, .1);
font-style: normal;
}
.prose .agent__name {
color: var(--white);
font-weight: 500;
}
.prose .agent__line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .75rem;
}
.prose .agent span:not(.agent__line) + .agent__line {
margin-top: .75rem;
}
.prose .agent__line > span {
min-width: 3.25rem;
color: var(--quiet);
font-size: 1rem;
}
.prose .agent__line a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--white);
}
/* two cards in a row (email, phone) sit closer together */
.prose .mail + .mail {
margin-top: .75rem;
}
/* plain lists: a short lavender dash in place of the bullet */
.prose ul:not([class]) li {
position: relative;
padding-left: 1.6rem;
}
.prose ul:not([class]) li + li {
margin-top: .55em;
}
.prose ul:not([class]) li::before {
content: "";
position: absolute;
left: 0;
top: .82em;
width: .8rem;
height: 2px;
border-radius: 2px;
background: var(--lavender);
}
/* the list of app privacy policies */
.policies li {
padding: .95rem 1.25rem;
border: 1px solid var(--line-strong);
border-radius: .9rem;
}
.policies li + li {
margin-top: .6rem;
}
.policies .policies__empty {
border: 2px dashed var(--lavender);
background: rgba(169, 150, 242, .08);
color: var(--text);
}
/* 16. Wider screens ----------------------------------------------------------- */
@media (min-width: 40rem) {
/* captions side by side, each under its own ring */
.job__text {
grid-column: auto;
grid-row: 2;
margin-top: 1.75rem;
padding-right: clamp(1.5rem, 3vw, 3rem);
}
.job__text p {
max-width: 24rem;
}
}
@media (min-width: 48rem) {
.routes {
grid-template-columns: repeat(2, 1fr);
}
.footer__inner {
grid-template-columns: auto 1fr;
align-items: center;
}
.footer .nav {
justify-self: end;
}
.footer__legal {
grid-column: 1 / -1;
}
}
@media (min-width: 72rem) {
.routes {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 62rem) {
.split {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.split--jobs {
align-items: center;
}
.stance__text {
grid-template-columns: 1fr 1fr;
}
}
/* 17. Smaller screens --------------------------------------------------------- */
@media (max-width: 68rem) {
/* particulars: three, then two */
.facts {
grid-template-columns: repeat(6, 1fr);
}
.facts__item {
grid-column: span 2;
}
.facts__item:nth-child(n + 4) {
grid-column: span 3;
}
}
@media (max-width: 61.99rem) {
body {
--beam: 62%;
--beam-x: 6%;
--beam-y: 16%;
}
.lines {
top: 0;
height: 30rem;
transform: translateX(58%);
opacity: .85;
}
/* single column: the rings span the full measure, so the words scale with them */
.jobs {
--t-word: clamp(1.75rem, 7vw, 4rem);
}
}
@media (max-width: 40rem) {
body {
--beam: 66%;
}
.masthead__inner {
padding-top: .6rem;
}
.nav ul {
gap: 0 clamp(.7rem, 4.4vw, 1.15rem);
}
.hero__stage {
padding-top: 2rem;
}
.lines {
height: 15rem;
transform: translateX(74%);
stroke-width: 2.2;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
.pagehead .lines {
height: 24rem;
transform: translateX(60%);
}
.button {
flex: 1 1 auto;
}
/* particulars: two columns, the address on a row of its own */
.facts {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.facts__item {
padding-inline: 1rem;
}
.facts__item,
.facts__item:nth-child(n + 4) {
grid-column: auto;
}
.facts__item:nth-child(4) {
grid-column: 1 / -1;
grid-row: 3;
}
.app {
gap: 1rem 1.25rem;
}
.app__icon {
width: 4.25rem;
height: 4.25rem;
}
/* label over value, so the email and phone rows always match */
.prose .mail,
.prose .agent__line {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.prose .agent__line + .agent__line {
margin-top: .35rem;
}
}
/* five footer links: wrap 3 + 2 instead of 4 + 1 until they fit on one row */
@media (max-width: 27rem) {
.footer .nav ul {
max-width: 17rem;
}
}
@media (max-width: 22.5rem) {
.facts {
grid-template-columns: 1fr;
}
.facts__item:nth-child(4) {
grid-column: auto;
grid-row: auto;
}
.app {
grid-template-columns: minmax(0, 1fr);
}
.app__links {
grid-column: 1;
}
/* keep the support address on one line on the narrowest phones */
.prose .mail {
padding-inline: 1rem;
}
.prose .mail a {
font-size: 1.0625rem;
}
.prose .agent {
padding-inline: 1rem;
}
.prose .agent__line a {
font-size: 1rem;
letter-spacing: -.01em;
}
}
/* 18. Fallbacks ------------------------------------------------------------- */
/* without backdrop-filter the three glass panels become nearly solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.facts,
.sheet {
background: var(--glass-solid);
}
.stance {
background-image: linear-gradient(147deg, rgba(86, 62, 170, .96) 0%, rgba(72, 44, 150, .96) 40%, rgba(44, 38, 124, .96) 74%, rgba(52, 62, 140, .96) 100%);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.button {
transition: none;
}
}
@media (forced-colors: active) {
body::before,
body::after,
.lines {
display: none;
}
.veil,
.footer {
background: none;
}
.facts,
.stance,
.sheet,
.button {
border: 1px solid CanvasText;
}
.stance::before {
display: none;
}
.app__icon--slot,
.policies .policies__empty {
border-color: CanvasText;
}
/* the dash marker is a background box, which forced colours would drop */
.prose ul:not([class]) li::before {
background: CanvasText;
}
}
/* 19. Print: black on white, no field, no linework, no glass ------------------- */
@media print {
html,
body {
background: #fff;
}
body {
display: block;
min-height: 0;
font-size: 11pt;
}
body::before,
body::after,
.lines,
.jobs__rings,
.stance::before,
.nav,
.skip,
.cta,
.app__icon--slot {
display: none;
}
* {
color: #000 !important;
background: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
text-shadow: none !important;
}
.logo svg {
fill: #000;
}
.hero {
min-height: 0;
}
.hero__stage,
.pagehead {
padding-block: 1rem;
}
.hero__title,
.pagehead__title {
font-size: 26pt;
}
.veil,
.section,
.veil--page {
padding-block: 1.25rem;
}
.facts,
.stance,
.sheet {
padding: 0;
border: 0;
border-radius: 0;
}
.facts {
display: block;
}
.facts__item {
margin: 0;
padding: .25rem 0;
border: 0;
}
.job__word {
aspect-ratio: auto;
place-items: start;
font-size: 16pt;
}
.sheet {
max-width: none;
}
.prose {
font-size: 11pt;
}
.prose h2 {
border-top: 1px solid #999;
break-after: avoid;
}
.prose p,
.prose li {
orphans: 3;
widows: 3;
}
.prose a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
}
.policies li,
.policies .policies__empty,
.prose .agent,
.prose .mail {
padding: 0;
border: 0;
}
.footer {
border-top: 1px solid #999;
}
}