/* ========================================================================== base.css — font faces, reset, defaults ========================================================================== */ /* IQOS — bespoke Monotype typeface, licensed to Philip Morris Products S.A. Declared as ONE family with correct weights. Note that iqos.com's own CSS registers three separate families and mislabels the weights (Bold at 300, Light at 700); we do not replicate that error. */ @font-face { font-family: "IQOS"; src: url("../assets/fonts/IQOS-Light.woff2") format("woff2"), url("../assets/fonts/IQOS-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("../assets/fonts/IQOS-Regular.woff2") format("woff2"), url("../assets/fonts/IQOS-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("../assets/fonts/IQOS-Bold.woff2") format("woff2"), url("../assets/fonts/IQOS-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* --- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* --- Document defaults ------------------------------------------------ */ /* Giving its own background stops 's background from propagating to the canvas. Without this, `background-size: 100% 100%` below would size against the viewport instead of the document, and the gradient would not span the page. */ html { background-color: var(--color-bg); } body { font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--color-text); background-color: var(--color-bg); /* One continuous gradient for the whole page. Verified against the snapshots: every section boundary matches to within 0-2/255, so this must not be split into per-section backgrounds. */ background-image: url("../assets/images/bg_gradient.webp"); background-size: 100% 100%; background-repeat: no-repeat; line-height: 1.5; /* Prevents any single section's overflow from producing a page-wide horizontal scrollbar. Overflow is still a bug — this stops one mistake from breaking the whole page while it is being found. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: 1.2; } /* --- Layout ----------------------------------------------------------- */ .container { width: 100%; /* The design is specified at 393px. Letting the column grow past that re-wraps the copy differently from the design, so cap and centre it. */ max-width: calc(393 * var(--u)); margin-inline: auto; padding-inline: var(--gutter); } /* --- Focus ------------------------------------------------------------ */ :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* --- Utilities -------------------------------------------------------- */ .visually-hidden:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Scroll reveal ---------------------------------------------------- */ /* Scoped to html.js so that without JavaScript, content is simply visible. The .js class is set by an inline script before first paint. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }