/* ========================================================================== WISHtoGo -- one stylesheet, no build step. Written logical-first (inline-start/end, padding-inline) so the Hebrew RTL pages need no overrides: switching dir="rtl" on flips the whole site. ========================================================================== */ /* Brand palette is deliberately just three colours -- WISHtoGo purple #854bb3, white and black. Everything else here is a tint or shade of those, so nothing introduces a fourth hue. The capsule family colours further down are the only exception: those are the real printed label colours on the products. */ :root { /* ground -- black, not a tinted near-black */ --ink: #0b0b0d; --ink-soft: #17171a; --plum: #100c14; --plum-2: #1d1424; --paper: #ffffff; --mist: #f5f4f7; --mist-2: #e7e4ec; /* brand */ --violet: #854bb3; --violet-lit: #9a67c4; --violet-deep: #4a2a64; --violet-haze: #cbaee4; /* capsule families -- the actual label colours on the capsules */ --fam-pink: #e79cba; --fam-blue: #8f9bd6; --fam-green: #8fb98a; --fam-yellow: #e2be48; /* text on light */ --fg: #0b0b0d; --fg-2: #5b5b6280; --fg-mid: #4a4a52; --rule: #0b0b0d14; /* type -- Montserrat for Latin, Rubik for Hebrew. Two weights carry the design: Black (900) for display, Light (300) for reading copy. */ --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --sans-he: 'Rubik', 'Montserrat', system-ui, 'Segoe UI', sans-serif; --font: var(--sans); /* rhythm */ --gut: clamp(20px, 5vw, 56px); --sec-y: clamp(72px, 11vw, 160px); --max: 1240px; --r: 18px; --r-lg: 28px; /* MIT diagram */ --mit-epi: #f1e9f8; --mit-derm: #dccbec; --mit-line: #ffffff90; --mit-cap: #b98fd8; --mit-head: #4a2a64; --mit-handle: #0b0b0d; --mit-glow: #854bb3; --mit-text: #5b5b62; --ease: cubic-bezier(.22, .61, .36, 1); } html[lang='he'] { --font: var(--sans-he); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); font-size: clamp(16px, 1.05vw, 17px); font-weight: 300; line-height: 1.68; color: var(--fg); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } b, strong { font-weight: 700; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--violet-lit); outline-offset: 3px; border-radius: 4px; } .sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip:focus { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 200; width: auto; height: auto; clip-path: none; margin: 0; padding: 10px 18px; background: var(--paper); color: var(--fg); border-radius: 999px; box-shadow: 0 8px 30px #0003; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } /* ------------------------------------------------------------ typography */ /* Display type is Black (900) -- the heavy pole of the two-weight system. */ .display { margin: 0 0 .5em; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 900; text-wrap: balance; } html[lang='he'] .display { letter-spacing: -.01em; line-height: 1.18; } .display-xl { font-size: clamp(2.3rem, 5.6vw, 4.4rem); } .display-hero { font-size: clamp(2.6rem, 8vw, 6rem); letter-spacing: -.035em; } html[lang='he'] .display-hero { letter-spacing: -.015em; } /* the \n line breaks in headlines only apply once there is room for them */ @media (max-width: 620px) { .display br { display: none; } } .kicker { margin: 0 0 1em; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--violet); } html[lang='he'] .kicker { letter-spacing: .1em; } /* Reading copy is Light (300) -- the thin pole. */ .lede { font-size: clamp(1.06rem, 1.5vw, 1.3rem); font-weight: 300; line-height: 1.54; color: var(--fg-mid); max-width: 56ch; text-wrap: pretty; } .body { max-width: 62ch; color: var(--fg-mid); font-weight: 300; } .mini-h { margin: 0 0 .7em; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mid); } html[lang='he'] .mini-h { letter-spacing: .05em; } .mono { font-variant-numeric: tabular-nums; font-size: .86rem; color: var(--fg-mid); } .note { font-size: .88rem; color: var(--fg-mid); } .center { text-align: center; } /* footnote asterisk on the MicroCurrent and Blue heads (not yet sold in the US) -- see usPending in catalog.mjs and headName() in pages.mjs. Explained by an inline chip in the two places the asterisk is the reader's FIRST sight of it: under each head's own name on the Technology Heads page, and under the heads strip on the home page. Elsewhere the asterisk travels alone, which was also true of the home page until 2026-09-16 -- it showed a starred name with nothing anywhere on the page to say what the star meant. */ .us-star { color: var(--violet); font-weight: 900; } .tone-ink .us-star, .tone-plum .us-star { color: var(--violet-haze); } .us-note-inline { display: inline-block; margin: .4em 0 1.1em; padding: 7px 14px; max-width: none; background: #854bb31a; border: 1px solid #854bb340; border-radius: 999px; color: var(--violet); font-size: .84rem; font-weight: 700; } .tone-mist .us-note-inline { background: #854bb314; } /* the brochure's pull-line: brand purple, Black weight, no quote marks */ .pull { margin: 1.8em 0 0; max-width: 34ch; font-size: clamp(1.16rem, 1.9vw, 1.6rem); font-weight: 900; line-height: 1.22; letter-spacing: -.02em; color: var(--violet); } html[lang='he'] .pull { letter-spacing: -.005em; line-height: 1.3; } /* "Skincare Simplified" — the brand slogan, set apart from the descriptive line */ .foot-slogan { margin: 0 0 1em; font-size: .82rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-haze); } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; background: var(--violet); color: #fff; font-size: .95rem; font-weight: 900; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; /* --mx/--my are set by the magnetic-button script (site.js) on pointer move, so hover/press states below can layer a scale on top without a second transform stomping the pull-toward-cursor offset. */ transform: translate(var(--mx, 0), var(--my, 0)); transition: background .25s var(--ease), transform .18s var(--ease), color .25s var(--ease); } .btn:hover { background: var(--violet-lit); } .btn:active { transform: translate(var(--mx, 0), var(--my, 0)) scale(.96); } .btn-ghost { background: transparent; color: var(--violet); border-color: #854bb355; } .btn-ghost:hover { background: #854bb314; border-color: var(--violet); } .btn-sm { min-height: 38px; padding: 0 18px; font-size: .86rem; } .row-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; } /* ----------------------------------------------------------------- header */ /* Fixed, not sticky: the bar has to float OVER the hero. Sticky keeps it in flow, which pushed the plum hero down and left the white logo on white. Every first-section has enough block-start padding to clear it. */ .hdr { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background: #0b0b0d00; transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease); border-block-end: 1px solid transparent; } .hdr.is-stuck { background: #0b0b0dd9; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-block-end-color: #ffffff14; } /* pages that open on a light hero need the bar legible from the first pixel */ body:not(.p-index) .hdr { background: #0b0b0dd9; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .hdr-in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); max-width: var(--max); margin-inline: auto; padding: 12px var(--gut); } .hdr-logo img { width: clamp(140px, 14vw, 190px); height: auto; } .hdr-nav { display: flex; gap: clamp(10px, 1.7vw, 26px); margin-inline-start: auto; } .hdr-link { font-size: .88rem; font-weight: 500; color: #ffffffb8; white-space: nowrap; padding: 6px 2px; transition: color .2s var(--ease); } .hdr-link:hover, .hdr-link.is-current { color: #fff; } .hdr-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } .hdr-nav + .hdr-end { margin-inline-start: 0; } /* Language control: a button reading "Change language" that opens a chooser. */ .langbox { position: relative; } /* Filled, not a faint outline. As a transparent pill with a thin white border it did not read as a control at all, especially inside the mobile menu. */ .lang { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 15px; background: #ffffff1f; border: 1px solid #ffffff4d; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .lang:hover, .lang[aria-expanded='true'] { background: var(--violet); border-color: var(--violet); } .lang svg { flex: 0 0 auto; opacity: .95; } /* Header only: a small round globe button, no label. The sheet and footer variants keep their visible "Change language" text -- there the button isn't competing for space beside a logo and nav links. */ .hdr-end .lang { gap: 0; width: 34px; min-height: 34px; padding: 0; justify-content: center; } .hdr-end .lang span { display: none; } /* In the mobile sheet it is a full-width purple button, unmistakably tappable. */ .sheet .lang { min-height: 48px; padding: 0 22px; font-size: .95rem; background: var(--violet); border-color: var(--violet); } .sheet .lang:hover { background: var(--violet-lit); border-color: var(--violet-lit); } .langmenu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 10; min-width: 150px; padding: 6px; background: #17171aef; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid #ffffff1f; border-radius: 14px; box-shadow: 0 20px 50px #0b0b0d80; } .langmenu[hidden] { display: none; } .langmenu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: #ffffffc0; } .langmenu a:hover { background: #ffffff14; color: #fff; } .langmenu a[aria-current='true'] { color: #fff; font-weight: 700; } .langmenu a[aria-current='true']::after { content: ' ✓'; color: var(--violet-haze); } /* in the mobile sheet the chooser opens upward and sits inline */ .sheet .langbox { align-self: start; margin-block-start: 26px; } .sheet .langmenu { inset-block-start: auto; inset-block-end: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; } .burger { display: none; width: 42px; height: 42px; padding: 0; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; } .burger-lines { display: block; width: 20px; height: 12px; position: relative; } .burger-lines i { position: absolute; inset-inline: 0; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); } .burger-lines i:first-child { top: 0; } .burger-lines i:last-child { bottom: 0; } .burger[aria-expanded='true'] .burger-lines i:first-child { transform: translateY(5.2px) rotate(45deg); } .burger[aria-expanded='true'] .burger-lines i:last-child { transform: translateY(-5.2px) rotate(-45deg); } @media (max-width: 1080px) { .hdr-nav, .hdr-cta { display: none; } .burger { display: inline-flex; } } .sheet { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 88px var(--gut) 40px; background: #0b0b0df2; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); overflow-y: auto; } .sheet[hidden] { display: none; } .sheet-nav { display: flex; flex-direction: column; } .sheet-link { padding: 14px 0; border-block-end: 1px solid #ffffff14; font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; color: #fff; } .sheet-link.is-current { color: var(--violet-haze); } /* Layout only. The look comes from .lang, which this button also carries. */ .sheet-lang { align-self: start; margin-block-start: 26px; } body.nav-open { overflow: hidden; } /* --------------------------------------------------------------- sections */ .sec { padding-block: var(--sec-y); position: relative; } .tone-plum { background: var(--plum); color: #fff; } .tone-ink { background: var(--ink); color: #fff; } .tone-mist { background: var(--mist); } .tone-plum .lede, .tone-ink .lede, .tone-plum .body, .tone-ink .body { color: #ffffffb0; } .tone-plum .kicker, .tone-ink .kicker { color: var(--violet-haze); } .tone-plum .mini-h, .tone-ink .mini-h { color: #ffffff8c; } .tone-ink .btn-ghost, .tone-plum .btn-ghost { color: #fff; border-color: #ffffff44; } .tone-ink .btn-ghost:hover, .tone-plum .btn-ghost:hover { background: #ffffff14; border-color: #fff; } .sec-h { margin-block-end: clamp(36px, 5vw, 68px); max-width: 46ch; } .sec-h.is-center { margin-inline: auto; text-align: center; } .sec-h.is-center .lede { margin-inline: auto; } /* reveal on scroll */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* Photos/video settle from a slight zoom as they reveal -- covers every figure sitewide (split-media, phero-media, anatomy, protocols, the award and quotes portraits...) without touching the spinner, which is a
, not a
, so it's naturally excluded. */ figure[data-reveal] img, figure[data-reveal] video, [data-reveal] figure img, [data-reveal] figure video { transform: scale(1.06); transition: transform 1s var(--ease) var(--d, 0ms); } figure[data-reveal].in img, figure[data-reveal].in video, [data-reveal].in figure img, [data-reveal].in figure video { transform: scale(1); } @media (prefers-reduced-motion: reduce) { figure[data-reveal] img, figure[data-reveal] video, [data-reveal] figure img, [data-reveal] figure video { transform: none; transition: none; } } /* ------------------------------------------------------------------- hero */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: stretch; padding-block: 92px 44px; background: var(--plum); color: #fff; overflow: hidden; } .hero-glow { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; background: radial-gradient(58% 46% at 50% 34%, #854bb359 0%, #854bb300 68%), radial-gradient(40% 34% at 78% 68%, #854bb324 0%, #854bb300 70%), radial-gradient(46% 40% at 16% 74%, #cbaee41f 0%, #cbaee400 72%); filter: blur(6px); } /* Everything in the hero is sized against viewport HEIGHT as well as width, so the whole thing lands inside one screen at 1440x900 -- the most common desktop window there is. A `1fr` grid row cannot do this job: the device is an , so its intrinsic aspect sets the row's min-content height and the row grows past the fold instead of shrinking. Only an explicit svh cap constrains it. */ .hero-in { display: grid; justify-items: center; align-content: center; text-align: center; gap: clamp(6px, 1.2vw, 16px); width: 100%; } .hero-kicker { color: var(--violet-haze); } .hero .display-hero { margin: 0; max-width: 18ch; font-size: clamp(2.1rem, min(8vw, 10.5svh), 6rem); } .hero-stage { width: 100%; display: grid; place-items: center; } /* The stage is sized explicitly, and the sprite layer fills it, so both the still frame and the sprite occupy exactly the same box. */ .hero-stage .spin { height: min(34svh, 560px); aspect-ratio: var(--spin-aspect); width: auto; max-width: min(100%, 620px); } .hero-stage .spin-img { height: 100%; width: 100%; object-fit: contain; margin-inline: auto; } @supports not (height: 1svh) { .hero .display-hero { font-size: clamp(2.1rem, min(8vw, 10.5vh), 6rem); } .hero-stage .spin { height: min(34vh, 560px); } } .hero-foot { display: grid; justify-items: center; gap: 4px; } .hero-foot .lede { color: #ffffffb5; max-width: 52ch; margin: 0; } .hero-foot .row-btns { justify-content: center; } .award-flag { position: absolute; inset-block-end: 22px; inset-inline-start: 50%; transform: translateX(-50%); margin: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #ffffff70; } .award-flag span { display: inline-flex; align-items: center; gap: 8px; } .award-flag span::before, .award-flag span::after { content: ''; width: 26px; height: 1px; background: #ffffff40; } @media (max-width: 700px) { .award-flag { display: none; } } /* ------------------------------------------------------- the 360 spinner */ .spin { position: relative; width: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .spin:active { cursor: grabbing; } .spin-img { width: 100%; height: auto; filter: drop-shadow(0 34px 46px #0b0b0dbb); pointer-events: none; transition: opacity .3s var(--ease); } /* The sprite sheet layer. It sits on top of the still first frame and fades in once the single sprite request has loaded, so nothing is ever half-drawn. */ .spin-sheet { position: absolute; inset: 0; background-repeat: no-repeat; background-size: calc(var(--spin-cols) * 100%) calc(var(--spin-rows) * 100%); filter: drop-shadow(0 34px 46px #0b0b0dbb); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .spin.is-ready .spin-sheet { opacity: 1; } .spin.is-ready .spin-img { opacity: 0; } .spin-hint { position: absolute; inset-block-end: -6px; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ffffff85; pointer-events: none; transition: opacity .4s var(--ease); } .spin.is-touched .spin-hint { opacity: 0; } /* Sprite failed to decode: the still frame is all there is, so stop inviting a drag that will not do anything. */ .spin.is-static { cursor: default; } .spin.is-static .spin-hint { opacity: 0; } /* ----------------------------------------------- scrubbable product film -- * The exploded view on /device. It plays on its own and can be dragged through, * so it is grabbable like the spinners -- but unlike them it is a