/* The redesigned homepage (new.html). Port of redesign/directions/r17.html onto the role tokens in redesign-tokens.css. */
/* The redesign's own faces (DESIGN.md, "Typography"), self-hosted. The heading face covers Hebrew only, so Latin and digits in a
heading come from the body face; the body face is sized so its Hebrew stands as tall as Rubik's at the same font-size. */
@font-face {
font-family: 'Gveret Levin';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/gveret-levin-400-hebrew.8c865542.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 400;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-400-hebrew.9fc64864.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 400;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-400-latin.0fc4b05c.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 500;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-500-hebrew.d416cd88.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 500;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-500-latin.9a7980fa.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 700;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-700-hebrew.d847084a.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 700;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-700-latin.1688f144.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 800;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-800-hebrew.9d38d158.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 800;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-800-latin.69a2ee93.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 900;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-900-hebrew.841e10ec.woff2) format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'M PLUS Rounded 1c';
font-style: normal;
font-weight: 900;
font-display: swap;
size-adjust: 109.8%;
src: url(/assets/fonts/mplus-rounded-900-latin.54972af0.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html,
html * {
font-synthesis: none;
} /* a weight the font does not have is never faked */
h1,
h2,
.flood h3,
.catch .big,
.story-copy .sign {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
}
.tt {
text-shadow: var(--title-offset) var(--title-offset) 0 var(--tsh, var(--title-offset-hero));
}
#h1 {
--tsh: var(--title-offset-hero);
}
#h-designs {
--tsh: var(--title-offset-designs);
}
#h-story {
--tsh: var(--title-offset-story);
}
#h-recs {
--tsh: var(--title-offset-recs);
}
#h-biz {
--tsh: var(--title-offset-biz);
}
#h-faq {
--tsh: var(--title-offset-hero);
}
:root {
--cw: var(--card-w);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html,
body {
margin: 0;
overflow-x: hidden; /* Safari before 16 has no clip */
overflow-x: clip;
}
body {
background: var(--color-ground);
color: var(--color-ink);
font: 400 17px/1.5 var(--font-body);
-webkit-tap-highlight-color: transparent;
}
img {
display: block;
max-width: 100%;
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
a {
color: inherit;
}
:focus-visible {
outline: 3px solid var(--color-ink);
outline-offset: 4px;
}
/* the shared language: outlines, stickers, pills, sparkles */
/* labels: calm, flat, upright; a thin outline and nothing else */
.sticker {
display: inline-block;
background: var(--color-paper);
border: 1.5px solid var(--color-ink);
border-radius: 999px;
padding: 5px 12px 6px;
font: 700 13px/1.1 var(--font-body);
letter-spacing: 0.02em;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--color-ink);
color: var(--color-paper);
text-decoration: none;
border: 0;
border-radius: 999px;
font: var(--weight-strong) 16px/1 var(--font-body);
letter-spacing: 0.02em;
padding: 16px 26px;
cursor: pointer;
transition: transform 0.15s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.pill:active {
transform: scale(0.96);
}
/* the forward arrow: drawn, not a glyph, so it is the same in every font; its line follows the button type's weight (--arr-sw) */
.arr {
width: 1.1em;
height: 1.1em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: var(--stroke-arrow);
stroke-linecap: round;
stroke-linejoin: round;
}
.pill:has(.arr) {
gap: 8px;
}
.tok {
display: inline-block;
background: var(--color-paper);
border: 2px dashed var(--color-ink);
padding: 0 6px;
font-weight: 800;
direction: ltr;
unicode-bidi: isolate;
letter-spacing: 0;
}
.pill .tok {
background: transparent;
border-color: var(--color-paper);
color: var(--color-paper);
}
.spark {
position: absolute;
width: var(--s, 34px);
height: var(--s, 34px);
pointer-events: none;
fill: var(--color-brand-pink);
stroke: var(--color-ink);
stroke-width: 2.4;
stroke-linejoin: round;
overflow: visible;
}
.sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
margin: 0;
}
section {
position: relative;
padding: 44px 16px 52px;
overflow: hidden; /* Safari before 16 has no clip */
overflow: clip;
} /* no rule, no fill: the page just flows */
h1,
h2 {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
margin: 0;
line-height: 1;
letter-spacing: var(--track-heading);
}
h2 {
font-size: var(--text-section);
}
.lede {
font-size: 17px;
margin: 12px 0 0;
max-width: 34ch;
}
/* header */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: max(10px, env(safe-area-inset-top)) 16px 0;
}
header .logo {
width: 86px;
height: auto;
margin: -6px 0 -10px 0;
}
header .pill {
padding: 12px 18px;
font-size: 14px;
}
/* hero: the deck, then her whole "מה זה דוגרי?" text, set the way the printed leaflet sets "על המשחק":
a sky-blue panel with pink lettering, the mustard title with a pink outline and offset, a pink panel with light lettering */
.hero {
padding-top: 4px;
padding-bottom: 40px;
}
.hero-in {
display: grid;
gap: 0;
}
.hero-text {
position: relative;
}
.hero h1 {
margin: 6px 0 0;
font: var(--weight-heading) var(--text-display)/0.98 var(--font-heading);
letter-spacing: -0.02em;
max-width: 12ch;
text-wrap: balance;
}
.pn {
margin: 16px 0 0;
border-radius: 26px;
padding: 20px 24px 22px;
font: 500 17px/1.55 var(--font-body);
max-width: 560px;
}
.pn.sky {
background: var(--color-accent-sky);
}
.pn.sky b {
font-weight: 800;
}
.catch {
margin: 22px 0 0;
}
.catch .q {
display: block;
font: 800 21px/1 var(--font-body);
}
.catch .big {
display: block;
margin-top: 8px;
font: var(--weight-heading) var(--text-catch)/1.05 var(--font-heading);
letter-spacing: -0.01em;
color: var(--color-accent-yellow);
-webkit-text-stroke: 2px var(--color-ink);
paint-order: stroke fill;
text-shadow: 4px 4px 0 var(--color-accent-pink);
}
.pn.pink {
margin-top: 14px;
background: var(--color-accent-pink);
color: var(--color-ink);
font: 800 20px/1.5 var(--font-body);
}
.pn.pink .y,
.pn.pink .b {
-webkit-text-stroke: 1.4px var(--color-ink);
paint-order: stroke fill;
}
.pn.pink .y {
color: var(--color-accent-yellow);
}
.pn.pink .b {
color: var(--color-accent-sky);
}
.hero .cta {
margin-top: 22px;
}
@media (max-width: 899px) {
.catch .big {
text-shadow: 3px 3px 0 var(--color-accent-pink);
}
}
.stage {
position: relative;
width: 100vw;
margin: 0 calc(50% - 50vw) 10px;
height: calc(var(--cw) * 1.41 * 1.22 + 40px);
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.deck {
position: absolute;
width: var(--cw);
height: calc(var(--cw) * 1.41);
aspect-ratio: 400 / 564;
border: 0;
padding: 0;
background: none;
cursor: pointer;
z-index: 5;
}
.deck img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-card);
outline: 1.5px solid var(--color-ink);
outline-offset: -0.5px;
box-shadow: var(--shadow);
}
.deck img:nth-child(1) {
transform: translate(-5px, 5px) rotate(-3deg);
}
.deck img:nth-child(2) {
transform: translate(-2.5px, 2.5px) rotate(1.6deg);
}
.deck:active img:last-child {
transform: translate(-1px, 1px);
box-shadow: var(--shadow-sm);
}
.deck:focus-visible {
outline: 3px solid var(--color-ink);
outline-offset: 10px;
border-radius: 10px;
}
.card {
position: absolute;
top: 0;
left: 0;
width: var(--cw);
height: calc(var(--cw) * 1.41);
aspect-ratio: 400 / 564;
z-index: 10;
cursor: grab;
touch-action: none;
will-change: transform;
--o: 4px;
}
.card .in {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.45, 1);
}
.card.down .in {
transform: rotateY(180deg);
}
.card img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--radius-card);
outline: 1.5px solid var(--color-ink);
outline-offset: -0.5px;
box-shadow: var(--o) var(--o) 0 var(--color-ink);
pointer-events: none;
}
.card img.b {
transform: rotateY(180deg);
box-shadow: calc(var(--o) * -1) var(--o) 0 var(--color-ink);
} /* mirrored by the flip, so the shadow lands the same way */
.card.held {
cursor: grabbing;
}
.flood .nw {
white-space: nowrap;
}
.stage {
isolation: isolate;
} /* the deck, its cards and its hint stay in their own layer, under an open design */
.stage .hint {
position: absolute;
z-index: 3000;
white-space: nowrap;
pointer-events: none;
font: 600 13px/1 var(--font-body);
text-align: center;
transition: opacity 0.3s;
}
.stage.touched .hint {
opacity: 0;
}
/* designs: an endless strip that leans with your swipe and takes on each design's colour, in pastel */
/* designs: the only panel on the page, Pluto's rescue card: inset from the edges, big rounded corners, a soft vertical gradient
in two tints of the centred design's pastel (the layers cross-fade as the strip moves) */
.designs {
margin: 6px 16px 0;
border-radius: 40px;
text-align: center;
padding-right: 0;
padding-left: 0;
padding-top: 48px;
background: linear-gradient(
180deg,
var(--color-panel-default),
var(--color-panel-default-mid) 48%,
var(--color-ground)
);
isolation: isolate;
border-end-start-radius: 0;
border-end-end-radius: 0;
padding-bottom: 88px;
}
.designs > h2,
.designs > .lede {
position: relative;
margin-right: 16px;
margin-left: 16px;
}
.designs > .lede {
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
max-width: 46ch;
text-wrap: balance;
}
.bgs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
z-index: -1;
}
.bgs i {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
will-change: opacity;
}
.strip {
direction: ltr;
position: relative;
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 34px calc(50% - var(--dw) / 2) 22px;
--dw: var(--strip-card-w);
perspective: 900px;
overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar {
display: none;
}
.dz {
direction: rtl;
flex: none;
width: var(--dw);
scroll-snap-align: center;
border: 0;
background: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.dz .tilt {
will-change: transform;
transform-origin: 50% 85%;
}
/* an uploaded design's pictures rendered by the server (/home-art/): a print render is a little taller than the page's
400:564 card (its bleed), so it is cut to fill the card's box, centred, the way the hand-cut print renders were */
img[src^='/home-art/'] {
object-fit: cover;
}
.dz img {
width: 100%;
aspect-ratio: 400 / 564;
border-radius: var(--radius-card);
outline: 1.5px solid var(--color-ink);
outline-offset: -0.5px;
box-shadow: var(--shadow);
}
.dz .nm {
display: block;
margin-top: 32px;
font: 700 15px/1 var(--font-body);
}
/* one arrow at the left end, pointing left: an SVG, since a glyph arrow mirrors in RTL */
.strip-hint {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font: var(--weight-strong) 13px/1 var(--font-body);
letter-spacing: 0.04em;
}
.strip-hint svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.order {
position: relative;
margin-top: 30px;
display: grid;
justify-items: center;
gap: 14px;
padding-right: 16px;
padding-left: 16px;
}
.order .pill {
font-size: 18px;
padding: 19px 30px;
}
.wa-line {
font-size: 15px;
font-weight: 500;
}
/* the flood: a tap fills the screen with that design's pastel and lays out its front, back and real board */
dialog.flood {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--fc);
color: var(--color-ink);
touch-action: none;
display: grid;
grid-template-rows: 1fr auto;
overflow: hidden;
}
dialog.flood:not([open]) {
display: none;
}
dialog.flood::backdrop {
background: transparent;
}
.flood .x {
position: absolute;
top: max(14px, env(safe-area-inset-top));
left: 14px;
z-index: 5;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2.5px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
font:
900 22px/1 system-ui,
sans-serif;
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.spread {
display: grid;
place-items: center;
padding: 70px 16px 0;
min-height: 0;
}
.flood {
grid-template-rows: auto auto;
align-content: center;
} /* the board, the cards and the words sit together, centred on the screen */
.tableau {
position: relative;
width: min(84vw, 600px, 62vh * 1.414);
width: min(84vw, 600px, 62svh * 1.414);
margin-bottom: calc(min(84vw, 600px, 62vh * 1.414) * 0.2);
margin-bottom: calc(min(84vw, 600px, 62svh * 1.414) * 0.2);
}
.tableau .bd {
width: 100%;
aspect-ratio: 2200 / 1556;
object-fit: cover;
border-radius: 8px;
outline: 2.5px solid var(--color-ink);
outline-offset: -1px;
box-shadow: var(--shadow);
transform: rotate(-2.5deg);
}
.tableau .fc {
position: absolute;
bottom: -22%;
width: 31%;
aspect-ratio: 400 / 564;
border-radius: var(--radius-card);
outline: 1.5px solid var(--color-ink);
outline-offset: -0.5px;
box-shadow: var(--shadow);
}
.tableau .fr {
left: 17%;
transform: rotate(-7deg);
z-index: 2;
}
.tableau .bk {
left: 50%;
transform: rotate(6deg);
}
.tableau.solo {
width: min(76vw, 440px, 44vh * 1.45);
width: min(76vw, 440px, 44svh * 1.45);
margin-bottom: 0;
display: flex;
justify-content: center;
gap: 4%;
}
.tableau.solo .fc {
position: relative;
bottom: auto;
left: auto;
width: 48%;
}
.flood .info {
display: grid;
justify-items: center;
gap: 12px;
padding: 18px 16px max(26px, env(safe-area-inset-bottom));
text-align: center;
}
.flood h3 {
margin: 0;
font: var(--weight-heading) clamp(36px, 10vw, 60px)/1 var(--font-heading);
letter-spacing: var(--track-heading);
}
.flood .info p {
margin: 0;
font-size: 16px;
}
.flood .x {
box-shadow: none !important;
}
@media (max-width: 899px) {
.pn.pink .y,
.pn.pink .b {
-webkit-text-stroke-width: 1.6px;
}
}
/* r14: one view: the name, the price, what is in the box, the button and the time, start-aligned in one column like the live product page */
.flood .info {
justify-items: start;
text-align: start;
gap: 10px;
width: min(100%, 452px);
margin-right: auto;
margin-left: auto;
padding-top: 12px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.flood h3 {
font-size: clamp(32px, 8.8vw, 52px);
}
.flood .pr {
margin: -4px 0 0 !important;
font: var(--weight-heavy) clamp(28px, 7.4vw, 38px)/1 var(--font-body) !important;
}
.flood .pr .tok {
padding: 2px 6px;
}
.flood .inbox {
width: min(100%, 420px);
margin-top: 2px;
}
.inbox .hd {
margin: 0 0 4px !important;
font: var(--weight-strong) 15px/1.2 var(--font-body) !important;
}
.inbox ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
font-size: 15px;
line-height: 1.35;
}
.inbox li {
position: relative;
padding-inline-start: 22px;
}
.inbox li::before {
content: '';
position: absolute;
right: 2px;
top: 0.32em;
width: 10px;
height: 6px;
border: solid var(--color-ink);
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
.flood .info > .pill {
width: min(100%, 420px);
margin-top: 6px;
}
.flood .note {
margin: -2px 0 0 !important;
font-size: 14px !important;
opacity: 0.8;
}
/* the window's height sets the pictures' size, up to an 800 px board: on the owner's 3440x1440 screen (1 device pixel per CSS
pixel) a 520 px board drew its cards ~185 px wide and their hairlines soft; more source pixels cannot fix that, size does */
.tableau {
width: min(80vw, 800px, 37vh * 1.414);
width: min(80vw, 800px, 37svh * 1.414);
margin-bottom: calc(min(80vw, 800px, 37vh * 1.414) * 0.2);
margin-bottom: calc(min(80vw, 800px, 37svh * 1.414) * 0.2);
}
.tableau.solo {
width: min(64vw, 460px, 34vh * 1.45);
width: min(64vw, 460px, 34svh * 1.45);
}
.spread {
padding-top: 66px;
}
/* short phones (an SE, or browser bars showing): a smaller board; below 700 px the info packs tighter */
@media (max-height: 760px) {
.tableau {
width: min(76vw, 30vh * 1.414);
width: min(76vw, 30svh * 1.414);
margin-bottom: calc(min(76vw, 30vh * 1.414) * 0.2);
margin-bottom: calc(min(76vw, 30svh * 1.414) * 0.2);
}
.tableau.solo {
width: min(56vw, 26vh * 1.45);
width: min(56vw, 26svh * 1.45);
}
.flood h3 {
font-size: 32px;
}
}
@media (max-height: 700px) {
.flood .info {
gap: 8px;
}
.inbox ul {
font-size: 14px;
gap: 0;
}
}
/* the view's rows hug their content (dialog.flood's own "1fr auto" outranked the plain .flood rule, so the board's row took
every spare pixel and pushed the name, the price and the button to the bottom). On a phone the pictures sit at the top
and the info follows right under them, so it is on screen sooner; on a computer the two stay centred together. */
dialog.flood {
grid-template-rows: auto auto;
align-content: start;
}
/* a tall phone has room to spare: half of it goes above the pictures, so the view is not top-heavy */
@media (max-width: 899px) {
.flood .spread {
padding-top: min(120px, max(66px, calc(66px + (100vh - 760px) / 2)));
padding-top: min(120px, max(66px, calc(66px + (100svh - 760px) / 2)));
}
/* the owner's call: the info halfway between right under the pictures and the foot of the screen. The room left over is
shared evenly above and below it */
dialog.flood {
grid-template-rows: auto 1fr auto 1fr;
}
.flood .spread {
grid-row: 1;
}
.flood .info {
grid-row: 3;
}
}
@media (min-width: 900px) {
dialog.flood {
align-content: center;
}
}
/* the pictures zoom under the fingers (js/home-zoom.js): the zoomed layer rides over the info, under the close button */
.flood .spread {
position: relative;
z-index: 1;
cursor: zoom-in;
}
.flood.zoomed .spread {
z-index: 4;
cursor: grab;
}
/* what the content editor needs in each card, unseen by visitors: a review's caption (shown under its screenshot in the
sheet) and the screenshot itself, a logo's name (its alt text). In edit mode they show in the card to be edited, and a
card the owner emptied stays, faded, so it can be filled again */
#track > [hidden], /* a card the owner emptied: .rc's own display would otherwise keep it on screen */
.rc .cap,
.rc .shot,
.rc .lname {
display: none;
}
html.dugri-editing .rc .cap,
html.dugri-editing .rc .lname {
display: block;
min-width: 6em;
min-height: 1.3em;
margin-top: 6px;
font-size: 13px;
opacity: 0.75;
}
html.dugri-editing .rc .cap:empty::before,
html.dugri-editing .rc .ttl:empty::before,
html.dugri-editing .rc .tag:empty::before,
html.dugri-editing .rc .lname:empty::before {
content: 'שם · תאריך';
opacity: 0.5;
}
html.dugri-editing .rc .ttl:empty::before {
content: 'ציטוט חדש';
}
html.dugri-editing .rc .tag:empty::before {
content: 'אירוע';
}
html.dugri-editing .rc .lname:empty::before {
content: 'שם החברה';
}
html.dugri-editing .rc .ttl:empty,
html.dugri-editing .rc .tag:empty {
min-width: 4em;
min-height: 1.2em;
}
html.dugri-editing .rc .shot {
display: block;
width: 64px;
height: auto;
margin-top: 8px;
border-radius: 6px;
}
html.dugri-editing .rc-empty {
opacity: 0.45;
}
/* recommendations: Pluto's card row (white, 16 px corners, a thin black line and a hard black offset shadow, a small tag at the
reading start), scrolling on its own in an endless loop; a hover or a touch stops it, and it can be swiped */
.recs {
padding-right: 0;
padding-left: 0;
}
.recs-head {
position: relative;
padding-right: 16px;
padding-left: 16px;
}
.row {
direction: ltr;
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
margin-top: 26px;
padding: 4px 0 18px;
}
.row::-webkit-scrollbar {
display: none;
}
.track {
display: flex;
gap: 20px;
width: max-content;
padding-right: 10px;
padding-left: 10px;
}
.row {
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.row.dragging {
cursor: grabbing;
}
.rc {
direction: rtl;
flex: none;
width: var(--review-card-w);
min-height: 176px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--color-paper);
color: var(--color-ink);
border: 1px solid var(--color-ink);
border-radius: 16px;
box-shadow: var(--shadow-review);
padding: 18px;
font: inherit;
text-align: start;
}
button.rc {
cursor: pointer;
transition:
transform 0.15s cubic-bezier(0.3, 1.4, 0.5, 1),
box-shadow 0.15s;
}
@media (hover: hover) {
button.rc:hover {
transform: translate(-2px, -2px);
box-shadow: var(--shadow-review-hover);
}
}
button.rc:active {
transform: translate(3px, 3px);
box-shadow: var(--shadow-review-press);
}
.rc .tag {
background: var(--color-tag);
padding: 3px 10px 4px;
border-radius: 3px;
font: 600 14px/1.4 var(--font-body);
}
.rc.hot {
background: var(--color-card-hot);
}
.rc.hot .tag {
background: var(--color-tag-hot);
color: var(--color-paper);
}
.rc .ttl {
font: 800 18px/1.3 var(--font-body);
quotes: '״' '״';
}
.rc .ttl::before {
content: open-quote;
}
.rc .ttl::after {
content: close-quote;
}
.rc .cap {
margin-top: auto;
font-size: 14px;
color: var(--color-text-muted);
}
.rc.logo {
justify-content: flex-start;
}
.rc.logo img {
margin: auto;
width: auto;
max-width: 70%;
}
/* the review sheet */
.sheet {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
width: min(560px, 100%);
max-width: 100%;
max-height: 88vh;
max-height: 88svh;
border: 3px solid var(--color-ink);
border-bottom: 0;
border-radius: 22px 22px 0 0;
padding: 16px 16px max(22px, env(safe-area-inset-bottom));
background: var(--color-paper);
color: var(--color-ink);
overflow: auto;
}
.sheet::backdrop {
background: rgba(0, 0, 0, 0.38);
}
.sheet .grab {
display: block;
width: 46px;
height: 5px;
border-radius: 9px;
background: var(--color-ink);
opacity: 0.25;
margin: 0 auto 12px;
}
.sheet img {
width: 100%;
border-radius: 14px;
outline: 2.5px solid var(--color-ink);
outline-offset: -1px;
}
.sheet p {
margin: 12px 0 0;
font-size: 15px;
}
.sheet .x {
position: absolute;
top: 10px;
left: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2.5px solid var(--color-ink);
background: var(--color-paper);
font:
900 18px/1 system-ui,
sans-serif;
cursor: pointer;
}
/* our story: two taped prints side by side, a gap between them so neither covers a face; each drifts a little */
.story-in {
display: grid;
gap: 26px;
}
@media (max-width: 899px) {
.story {
padding-bottom: 32px;
}
}
.prints {
position: relative;
height: calc(min(44vw, 220px) * 1.16 + 60px);
--pw: min(44vw, 220px);
}
.print {
position: absolute;
margin: 0;
width: var(--pw);
background: var(--color-paper);
padding: 8px 8px 26px;
outline: 2.5px solid var(--color-ink);
outline-offset: -1px;
box-shadow: var(--shadow);
animation: drift var(--dur) ease-in-out var(--dl) infinite alternate;
}
.print img {
width: 100%;
height: calc(
var(--pw) - 16px
); /* square inside the 8 px frame; aspect-ratio alone needs Safari 15 */
aspect-ratio: 1;
object-fit: cover;
}
.print .tape {
position: absolute;
top: -12px;
left: 50%;
width: 76px;
height: 24px;
margin-left: -38px;
background: rgba(244, 239, 230, 0.82);
border-right: 2px dashed rgba(0, 0, 0, 0.14);
border-left: 2px dashed rgba(0, 0, 0, 0.14);
transform: rotate(var(--tt, -4deg));
}
.print.old {
top: 14px;
right: 3%;
rotate: 4deg;
--dur: 15s;
--dl: -4s;
--dx: 1.5px;
--dy: -2px;
--dr: 0.5deg;
}
.print.now {
top: 40px;
left: 3%;
rotate: -4deg;
--dur: 19s;
--dl: -9s;
--dx: -2px;
--dy: 1.5px;
--dr: -0.4deg;
}
@keyframes drift {
from {
translate: 0 0;
transform: rotate(0deg);
}
to {
translate: var(--dx) var(--dy);
transform: rotate(var(--dr));
}
}
.story-copy,
.faq-col {
position: relative;
}
.story-copy p {
margin: 0 0 14px;
max-width: 40ch;
}
.story-copy .sign {
margin-bottom: 0;
}
.story-copy .sign {
display: block;
margin-top: 16px;
font-size: var(--text-signature);
line-height: 1;
} /* signed by hand, not stuck on */
/* questions */
.faq-in {
display: grid;
gap: 30px;
}
.qa {
margin-top: 20px;
display: grid;
gap: 12px;
}
.qa details {
background: var(--color-paper);
border: 2.5px solid var(--color-ink);
border-radius: 14px;
box-shadow: var(--shadow-sm);
}
.qa summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
font: var(--weight-strong) 17px/1.25 var(--font-body);
display: flex;
justify-content: space-between;
gap: 12px;
}
.qa summary::-webkit-details-marker {
display: none;
}
.qa summary::after {
content: '+';
font:
900 22px/1 system-ui,
sans-serif;
transition: transform 0.2s;
}
.qa details[open] summary::after {
transform: rotate(45deg);
}
.qa details p {
margin: 0;
padding: 0 16px 16px;
font-size: 16px;
white-space: pre-line;
}
/* the site footer: the live homepage's contacts and links, on the ground */
/* site-footer:start (the same rules style the shell's footer on every other page: css/redesign.css, tests/unit/site-footer.test.js) */
.site-ft {
padding: 30px 16px 34px;
border-top: var(--border-thin) solid var(--color-ink);
font-size: var(--text-small);
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 18px 24px;
align-items: start;
}
.ft-contact {
grid-column: 1 / -1;
}
.ft-icons {
display: flex;
}
.ft-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-left: 12px; /* flex gap is Safari 14.1 */
border: var(--border-thin) solid var(--color-ink);
border-radius: 50%;
background: var(--color-paper);
color: var(--color-ink);
box-shadow: var(--shadow-sm);
}
.ft-icon.wa {
background: var(--color-whatsapp);
}
.ft-icon svg {
width: 23px;
height: 23px;
fill: currentColor;
}
.ft-icon:active {
transform: translate(2px, 2px);
box-shadow: none;
}
.ft-lines,
.ft-tag {
margin: 12px 0 0;
line-height: 1.6;
}
.ft-lines > span {
display: block;
}
.ft-lines .lb {
font-weight: var(--weight-strong);
}
.ft-lines a {
font-weight: var(--weight-label);
}
.ft-tag {
color: var(--color-text-muted);
}
.ft-links a {
display: block;
padding-top: 7px;
padding-bottom: 7px;
}
.ft-logo {
width: 64px;
}
/* site-footer:end */
/* ---------- the floating WhatsApp (bottom left: the end side in RTL), the font chooser (bottom right, while testing) ---------- */
.fab {
position: fixed;
z-index: 800;
bottom: calc(max(16px, env(safe-area-inset-bottom) + 10px));
transition:
opacity 0.2s,
visibility 0.2s,
bottom 0.2s;
}
/* the site's one-time cookie chip (js/consent.js, #cookieNotice) sits 12 px from the bottom-left corner, under this button, for its
~6 seconds: the button stands just above it (the chip is ~24 px tall, plus a 10 px gap) and glides back down when it goes */
body:has(#cookieNotice) .wa-fab {
bottom: max(16px, env(safe-area-inset-bottom) + 10px, 46px);
}
.wa-fab {
left: max(16px, env(safe-area-inset-left));
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-whatsapp);
color: var(--color-paper);
display: grid;
place-items: center;
outline: 1.5px solid var(--color-ink);
box-shadow: 3px 3px 0 var(--color-ink);
}
.wa-fab svg {
width: 32px;
height: 32px;
fill: currentColor;
}
.wa-fab:active {
transform: scale(0.94);
}
.wa-fab:focus-visible {
outline-offset: 3px;
}
/* out of the way whenever something sits over the page: an open design, the review sheet, the menu */
body:has(.flood.open) .fab,
body:has(dialog[open]) .fab {
opacity: 0;
visibility: hidden;
}
/* ---------- the menu: a square ≡ at the top, on the RTL side; a sheet from that side ---------- */
.menu-btn {
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
margin-inline-start: -8px;
background: transparent;
border: 0;
color: var(--color-ink);
cursor: pointer;
}
/* the icon: right-aligned lines (the RTL start) of 20, 13 and 8, rounded, ink with a pink middle; drawn by dash length so they can morph */
.mi {
width: 28px;
height: 28px;
overflow: visible;
}
.mi path {
fill: none;
stroke: var(--color-ink);
stroke-width: 2.4;
stroke-linecap: round;
transform-box: view-box;
transform-origin: 14px 14px;
transition:
transform 0.34s cubic-bezier(0.3, 1.35, 0.45, 1),
stroke-dasharray 0.3s ease,
opacity 0.2s;
}
.mi .l1 {
stroke-dasharray: 20 40;
}
.mi .l2 {
stroke: var(--color-accent-pink);
stroke-dasharray: 13 40;
}
.mi .l3 {
stroke-dasharray: 8 40;
}
/* a small hello under the pointer; :focus-visible in its own rules, since Safari before 15.4 drops a whole rule that names it */
.menu-btn:hover .mi .l2 {
stroke-dasharray: 20 40;
}
.menu-btn:focus-visible .mi .l2 {
stroke-dasharray: 20 40;
}
.menu-btn:hover .mi .l3 {
stroke-dasharray: 14 40;
}
.menu-btn:focus-visible .mi .l3 {
stroke-dasharray: 14 40;
}
/* the sheet's ✕ is the same icon: the outer lines grow and cross, the pink one shrinks away */
dialog.menu.xs .x .l1 {
stroke-dasharray: 20 40;
transform: rotate(45deg) translateY(6px);
}
dialog.menu.xs .x .l3 {
stroke-dasharray: 20 40;
transform: rotate(-45deg) translateY(-6px);
}
dialog.menu.xs .x .l2 {
stroke-dasharray: 0 40;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.mi path {
transition: none;
}
}
header .start {
display: flex;
align-items: center;
gap: 10px;
}
dialog.menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
margin: 0;
width: min(86vw, 380px);
height: 100%;
max-height: none;
max-width: none;
border: 0;
border-inline-end: 1.5px solid var(--color-ink);
padding: max(14px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
background: var(--color-ground);
color: var(--color-ink);
display: flex;
flex-direction: column;
translate: 100% 0;
transition:
translate 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
overlay 0.28s allow-discrete,
display 0.28s allow-discrete;
}
dialog.menu:not([open]) {
display: none;
}
dialog.menu[open] {
translate: 0 0;
}
@starting-style {
dialog.menu[open] {
translate: 100% 0;
}
}
html:has(dialog.menu[open]) {
overflow: hidden;
}
dialog.menu::backdrop {
background: rgba(0, 0, 0, 0.32);
}
dialog.menu .x {
position: absolute;
top: var(--mx-t, 14px);
right: var(--mx-r, 16px);
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--color-ink);
cursor: pointer;
} /* on the ≡'s spot */
dialog.menu ul {
list-style: none;
margin: 64px 0 0;
padding: 0;
display: grid;
}
dialog.menu li a {
display: block;
padding: 10px 0;
font: var(--weight-strong) 24px/1.15 var(--font-body);
text-decoration: none;
}
dialog.menu li a:hover {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
dialog.menu .pill {
margin-top: 32px;
align-self: stretch;
}
@media (prefers-reduced-motion: reduce) {
dialog.menu {
transition: none;
}
}
/* ---------- 7. business enquiries ---------- */
.biz-in {
display: grid;
gap: 16px;
justify-items: start;
}
.biz .lede {
max-width: 38ch;
}
.biz .logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
margin: 2px 0 6px;
}
.biz .logos span {
flex-basis: 100%;
}
.biz .logos img {
height: 40px;
width: auto;
}
.biz .logos span {
font-size: 15px;
font-weight: 500;
}
.biz .logos img[src*='starcar'] {
height: 52px;
}
/* the wide wordmarks drawn lower, so the five read at about the same weight */
.biz .logos img[src*='microsoft'] {
height: 30px;
}
.biz .logos img[src*='elbit'] {
height: 40px;
}
.biz .logos img[src*='hapoalim'] {
height: 22px;
}
.biz .pill svg.wa {
width: 22px;
height: 22px;
fill: currentColor;
flex: none;
}
/* "לפניות עסקיות בוואטסאפ" needs ~209px: on a 320 phone the standard side padding left 204 and it wrapped */
@media (max-width: 359px) {
.biz .pill {
padding-right: 18px;
padding-left: 18px;
}
}
.biz-in {
max-width: 560px;
}
/* the form: stacked on a phone, one row on desktop; labels above the fields; an error under its own field */
.lead {
width: 100%;
margin-top: 6px;
}
.lead-hd {
margin: 0 0 14px;
font: var(--weight-strong) 17px/1.3 var(--font-body);
}
/* r16: Pluto's form language in ours: fully rounded fields with a thin ink line, a bold label above each with a pink asterisk on the
required ones; name and company share a row, the phone takes the full width under them; stacked on a phone; the send is our pill CTA */
.lead-row {
display: grid;
gap: 16px;
}
.fld-w {
display: grid;
gap: 7px;
min-width: 0;
}
.fld-w label {
font: 700 15px/1.2 var(--font-body);
}
.fld-w .req {
color: var(--color-brand-pink);
margin-inline-start: 3px;
}
.fld-w input {
width: 100%;
height: 50px;
padding: 0 22px;
border: 1.5px solid var(--color-ink);
border-radius: 999px;
background: var(--color-paper);
color: var(--color-ink);
font: 400 16px/1 var(--font-body);
}
.fld-w input[dir='ltr'] {
text-align: right;
}
.fld-w input:focus-visible {
outline: 3px solid var(--color-ink);
outline-offset: 2px;
}
.fld-w input[aria-invalid='true'] {
border-color: var(--color-error);
border-width: 2px;
}
.fe {
margin: 0;
padding-right: 22px;
padding-left: 22px;
font-size: 13px;
line-height: 1.25;
color: var(--color-error);
}
.fe:empty {
display: none;
}
.lead .pill {
justify-self: start;
margin-top: 4px;
}
.lead-ok {
margin: 6px 0 0;
padding: 14px 18px;
border: 1.5px solid var(--color-ink);
border-radius: 14px;
background: var(--color-paper);
box-shadow: var(--shadow-sm);
font: var(--weight-strong) 17px/1.3 var(--font-body);
}
.lead-ok:focus {
outline: none;
}
@media (min-width: 600px) {
.biz-in {
max-width: 640px;
}
.lead-row {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.fld-w.wide,
.lead .pill {
grid-column: 1 / -1;
}
}
footer {
padding-bottom: calc(34px + 72px + env(safe-area-inset-bottom)) !important;
} /* the last links clear the floating buttons */
/* r14: one wavy line between the story and the reviews, like Pluto's boundary between two fields, but only the line: a single smooth S
across the full width in the palette pink, 2 px at every width (the stroke does not scale with the box) */
.wave {
height: clamp(44px, 8vw, 96px);
margin: 0;
}
.wave svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.wave .ln {
fill: none;
stroke: var(--color-accent-pink);
stroke-width: 2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* r15, #fields=on (the default): each wave is the edge of a soft field, so the reviews between the two waves sit on a light tint of the
palette's sky; the line stays the 2 px pink on that edge. #fields=yellow: the same in a yellow tint. #fields=off: the lines alone (r14) */
.wave .fld {
fill: var(--color-field);
stroke: none;
}
.recs {
background: var(--color-field);
}
/* site-footer-wide:start the three groups as one, centred on the page */
@media (min-width: 900px) {
.ft-contact {
grid-column: auto;
}
.site-ft {
grid-template-columns: auto auto auto;
justify-content: center;
grid-column-gap: 72px;
}
.ft-links {
-webkit-columns: 2;
columns: 2;
-webkit-column-gap: 32px;
column-gap: 32px;
}
}
/* site-footer-wide:end */
@media (min-width: 900px) {
:root {
--cw: min(210px, 19vw);
--strip-card-w: 260px;
--review-card-w: 360px;
}
section,
header,
footer {
padding-right: max(16px, calc(50vw - 520px));
padding-left: max(16px, calc(50vw - 520px));
}
/* the cards beside the words */
.hero-in {
grid-template-columns: 1fr 1.1fr;
align-items: center;
gap: 64px;
}
.stage {
width: 100%;
margin: 0;
height: calc(var(--cw) * 1.41 * 1.35 + 50px);
}
.designs {
padding-right: 0;
padding-left: 0;
margin-right: 20px;
margin-left: 20px;
border-radius: 80px;
padding-top: 64px;
}
.strip-hint {
display: none;
}
.strip {
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 48px,
#000 calc(100% - 48px),
transparent
);
mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.rc .ttl {
font-size: 20px;
}
.story-in {
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 22px 40px;
}
.story-in h2 {
grid-column: 1 / -1;
}
.prints {
height: 400px;
--pw: 230px;
} /* in RTL the photos come first (right), then the text */
.print.old {
top: 40px;
}
.print.now {
top: 90px;
}
.faq-in {
max-width: 760px;
}
/* business enquiries: the column centred on the page like the sections above, its words and logos centred in it; the form
keeps its labels at the reading start */
.biz-in {
margin-right: auto;
margin-left: auto;
justify-items: center;
text-align: center;
}
.biz .logos {
justify-content: center;
}
.biz .lead {
justify-self: stretch;
text-align: right;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.print {
animation: none;
}
/* the flip becomes a crossfade */
.card .in,
.card.down .in {
transition: none;
transform: none;
}
.card img {
transition: opacity 0.25s;
}
.card img.b {
transform: none;
opacity: 0;
}
.card.down img.b {
opacity: 1;
}
.card.down img.f {
opacity: 0;
}
/* a static grid instead of the leaning strip */
.strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px 12px;
overflow: visible;
padding: 26px 16px 0;
--dw: auto;
perspective: none;
}
.dz {
width: auto;
}
.dz .nm {
margin-top: 10px;
font-size: 13px;
}
.strip-hint,
.bgs {
display: none;
}
}
/* illustrations: four from the owner's pick (#13 hourglass, #25 popper, #27 disco ball, #91 sparkles), each with its own gallery motion,
small and in empty margin; reduced motion holds them still */
.illo {
position: absolute;
pointer-events: none;
z-index: 0;
}
.illo .il {
display: block;
width: 100%;
height: auto;
overflow: visible;
fill: none;
stroke: var(--color-ink);
stroke-width: 2.2;
stroke-linejoin: round;
stroke-linecap: round;
direction: ltr;
}
.illo .t {
stroke-width: 1.4;
}
.illo .h {
fill: var(--color-paper);
stroke: none;
}
.illo .n {
stroke: none;
}
.illo .a {
animation-duration: var(--d, 6s);
animation-delay: var(--dl, 0s);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
transform-box: fill-box;
transform-origin: var(--o, 50% 50%);
}
.illo .sway {
animation-name: il-sway;
animation-direction: alternate;
}
@keyframes il-sway {
from {
transform: rotate(calc(-1 * var(--r, 4deg)));
}
to {
transform: rotate(var(--r, 4deg));
}
}
.illo .tw {
animation-name: il-tw;
}
@keyframes il-tw {
0%,
100% {
transform: scale(0.55) rotate(0deg);
opacity: 0.35;
}
50% {
transform: scale(1) rotate(var(--r, 0deg));
opacity: 1;
}
}
.illo .rise {
animation-name: il-rise;
}
@keyframes il-rise {
0% {
transform: translate(0, 0);
opacity: 0;
}
15% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
transform: translate(var(--x, 0px), var(--y, -30px));
opacity: 0;
}
}
@keyframes i13r {
0%,
40% {
transform: rotate(0);
}
48%,
90% {
transform: rotate(180deg);
}
98%,
100% {
transform: rotate(360deg);
}
}
.i13r {
animation-name: i13r;
}
@keyframes i13a {
0% {
opacity: 1;
}
38%,
48% {
opacity: 0;
}
88%,
100% {
opacity: 1;
}
}
.i13a {
animation-name: i13a;
animation-timing-function: linear;
}
@keyframes i13b {
0% {
opacity: 0;
}
38%,
48% {
opacity: 1;
}
88%,
100% {
opacity: 0;
}
}
.i13b {
animation-name: i13b;
animation-timing-function: linear;
}
@keyframes i13s {
0%,
3%,
37%,
51%,
86%,
100% {
opacity: 0;
}
6%,
34%,
54%,
83% {
opacity: 1;
}
}
.i13s {
animation-name: i13s;
animation-timing-function: linear;
}
@media (min-width: 900px) {
.recs-head {
padding-right: max(16px, calc(50vw - 520px));
padding-left: max(16px, calc(50vw - 520px));
}
}
.illo .twk {
animation-name: il-twk;
}
@keyframes il-twk {
0%,
100% {
transform: scale(0.78) rotate(0deg);
opacity: 0.6;
}
50% {
transform: scale(1) rotate(var(--r, 45deg));
opacity: 1;
}
}
/* a placed illustration: a position in its section, in % of the section; a width in px for this layout (phone or desktop); a turn */
/* x is in % of the page's content column (1040 px on desktop, the screen less its 16 px gutters on a phone), so an item keeps its place
beside the content at any width; y is in % of its section */
.pl {
position: absolute;
z-index: 1;
left: calc(var(--cl, 0px) + var(--x) * var(--cw2, 100vw) / 100);
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
pointer-events: none;
}
.pl > .illo {
position: relative;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.illo .a {
animation-play-state: paused !important;
}
}
/* ---------- new.html only ---------- */
/* questions: the live FAQ (/api/faq), static until it answers */
.faq {
padding-bottom: 44px;
}
.faq-in {
margin-right: auto;
margin-left: auto;
}
/* the form: a failed send keeps what was typed and offers WhatsApp */
.lead-err {
margin: 10px 0 0;
padding: 12px 18px;
border: 2px solid var(--color-error);
border-radius: var(--radius-box);
background: var(--color-paper);
font-size: var(--text-label);
}
.lead-err a {
font-weight: var(--weight-strong);
}
.lead .pill[aria-disabled='true'] {
opacity: 0.6;
cursor: progress;
}
.hp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.flood .pr .cur {
font-size: 0.62em;
font-weight: var(--weight-label);
}
.flood .pr s {
margin-inline-start: 20px;
font-size: 0.6em;
font-weight: var(--weight-strong);
opacity: 0.7;
}
/* illustrations: below 1100 px the phone placements are used; a few of them would sit on the two-column layout's text from 900 to
1099 px, so those stay hidden there. From 900 px under reduced motion the designs become a static grid that fills the space the
designs section's marks use, so they are hidden */
@media (min-width: 900px) and (max-width: 1099.98px) {
.pl[data-tab-hide] {
display: none;
}
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
#order .pl {
display: none;
}
}
/* ---------- new-faq.html: the questions on their own page, under the same header, menu and footer ---------- */
header .logo-a {
display: block;
}
.faq-page h1 {
font-size: var(--text-section);
}
.faq-page .faq {
padding-top: 36px;
min-height: 70vh;
}
.faq-more {
margin: 8px 0 0;
}
.faq-more a {
font-weight: var(--weight-strong);
}
.faq-page .faq-in > .pill {
justify-self: start;
}
/* ---------- old Safari (js/home-legacy.js): before 15.4 a