/* * site.css: the only stylesheet for this site (Vapemau5, one-page site). * * Sections, in order: * 1. Tokens colours, fonts, spacing (custom properties) * 2. Fonts @font-face for self-hosted fonts * 3. Base reset and element defaults * 4. Layout shared section/container rules * 5. Components one block per component: "=== Component: ===" * 6. Pages rare page-specific rules: "=== Page: ===" * 7. Utilities a handful of helpers * * Breakpoints (Elementor defaults used by the original; media queries can't use custom properties): * mobile <= 767px tablet 768px-1024px desktop >= 1025px * * Values come from the original's Elementor CSS (discovery/live-css/post-7.css, post-39.css) and * computed styles measured on the live page (design-system/live-measure.json). * Display font: the original's "sherman" (Sherman Display, a paid font) is replaced by League Gothic * (manifest d1). Sherman is caps-only, so every display-font element is uppercased. */ /* ============ 1. Tokens ============ */ :root { /* Colours */ --color-black: #000000; /* page background, hero button */ --color-footer: #020202; /* footer (#contact) background */ --color-white: #ffffff; /* product band, tabs, dividers, arrow icon */ --color-light: #efefef; /* headings, header links, footer text, social icon frames */ --color-nav: #ededed; /* off-screen nav links */ --color-nav-active: #787878; /* off-screen nav hover / current section */ --color-text: #d5d5d5; /* "Who are we?" paragraph */ --color-button: #ececec; /* about button group background */ --color-burger: #c1c1c1; /* burger lines */ --color-overlay: rgb(17 17 17 / 0.6); /* off-screen nav backdrop (#11111199) */ /* Typography */ --font-display: "League Gothic", "Arial Narrow", Impact, sans-serif; /* replaces "sherman" (d1) */ --display-stretch: 95%; /* League Gothic narrowed (wdth axis) to Sherman's width */ --font-text: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --heading-xl: 70px; /* "Who are we?" (all widths), "Follow us" (48px <= 1024px) */ --tab-size: 51px; /* "OUR PRODUCTS" / "VIEW FULL MENU" tabs */ /* Spacing and shape */ --container: 1280px; /* Elementor boxed width */ --container-wide: 1600px; /* product band */ --side-pad: 30px; /* section left/right padding */ --column-pad: 10px; /* Elementor default column gap */ --header-h: 70px; /* height of the header row block over the hero: 140px tablet, 179px mobile */ --radius-button: 3px; /* Elementor button default */ /* Motion */ --duration: 0.3s; --duration-panel: 1.5s; /* popup 39: slideInRight, 1.5s */ } @media (max-width: 1024px) { :root { --header-h: 140px; } } @media (max-width: 767px) { :root { --header-h: 179px; } } /* ============ 2. Fonts ============ */ /* Google Fonts (SIL OFL), self-hosted, latin subset, variable files (League Gothic with its wdth axis, Roboto Condensed with wght). */ @font-face { font-family: "League Gothic"; src: url("/assets/fonts/league-gothic-latin-variable.woff2") format("woff2"); font-weight: 400; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("/assets/fonts/roboto-condensed-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============ 3. Base ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* Group-22.png (floating vapes) is the page background, as the original's body (repeats, centred); "contain" on tablet, hidden on mobile. */ body { margin: 0; font-family: var(--font-text); font-size: 16px; color: var(--color-light); background-color: var(--color-black); background-image: url("/wp-content/uploads/2023/05/Group-22.png"); background-position: center center; overflow-x: clip; } img, svg, video { max-width: 100%; } img { height: auto; border: 0; } h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-light); outline-offset: 3px; } @media (max-width: 1024px) { body { background-size: contain; } } @media (max-width: 767px) { body { background-size: 0 auto; } } /* ============ 4. Layout ============ */ /* .section: a full-width band with 30px side padding; .container: the 1280px Elementor box with a 10px column gap. */ .section { position: relative; padding-inline: var(--side-pad); } .container { max-width: var(--container); margin-inline: auto; padding: var(--column-pad); } /* ============ 5. Components ============ */ /* === Component: skip-link === */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 8px 16px; background: var(--color-white); color: var(--color-black); } .skip-link:focus { left: 16px; } /* === Component: site-header (burger | small logo | ORDER NOW, laid over the hero; not sticky) === Columns 17.5/62/19.8% (25/50/25% tablet); stacked on mobile, where the small logo is hidden. */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-inline: calc(var(--side-pad) + var(--column-pad)); } .site-header__inner { display: flex; align-items: center; max-width: calc(var(--container) - 2 * var(--column-pad)); margin: var(--column-pad) auto 0; min-height: 60px; } .site-header__col { display: flex; justify-content: center; align-items: center; } .site-header__col--menu { flex: 0 0 17.538%; } .site-header__col--logo { flex: 0 0 61.969%; } .site-header__col--order { flex: 0 0 19.8%; } .site-header__logo { display: block; width: 223px; } @media (max-width: 1024px) { .site-header__inner { padding: 25px 30px 45px; } .site-header__col--menu, .site-header__col--order { flex-basis: 25%; } .site-header__col--logo { flex-basis: 50%; } } @media (max-width: 767px) { .site-header__inner { flex-direction: column; align-items: stretch; } .site-header__col { flex-basis: auto; } .site-header__col--logo { display: none; } } /* === Component: menu-trigger (the original's burger SVG as a real button) === */ .menu-trigger { display: block; width: 50px; } .menu-trigger svg { display: block; width: 50px; height: 50px; margin-bottom: 5px; } /* the original icon sits in a 55px line box */ /* === Component: menu-panel (off-screen nav: native