/* * Zain — landing site stylesheet. * * One file, one page, no build step. Open index.html in a browser and what you see * is what deploys. * * The palette is the theme's own, not a second one invented for the web. `--zn-violet` * is `accent-3` from the theme's default palette in theme.json, `--zn-yellow` is * `accent-1`, `--zn-paper` is `accent-5`, and the body text colour is `contrast`. A page * whose subject is a colour system should not be painted in a different colour system. * * The dark palette is Twilight — `#131313` base, `#252525` surface — which is one of the * eight variations the theme actually ships, so the site in dark mode is a real Zain * palette rather than an approximation of one. * * Theme: `data-zn-theme` on is the resolved theme ("light" or "dark"). * `data-zn-theme-choice` records what the person picked, which may be "auto". script.js * owns both; nothing here reads prefers-color-scheme directly, so the toggle wins in * every direction — including the direction where somebody wants a light page on a * dark-set phone. * * SPECIFICITY: every reset below is wrapped in :where(), which scores (0,0,0). A reset * written as `.zn-page a` scores (0,1,1) and silently beats any component rule written * as a single class, whatever the order in this file. If a component rule here ever * appears not to apply, that is the first thing to check. */ /* ------------------------------------------------------------------- tokens */ :root { --zn-bg: #fbfaf3; /* theme.json accent-5 */ --zn-surface: #ffffff; /* theme.json base */ --zn-surface-2: #f4f2e9; --zn-text: #333333; /* theme.json contrast */ --zn-heading: #14121f; --zn-muted: #686868; /* theme.json accent-4 */ --zn-border: rgba(47, 12, 189, 0.16); --zn-border-soft: rgba(20, 18, 31, 0.1); --zn-violet: #2f0cbd; /* theme.json accent-3 — 11.0:1 on white */ --zn-violet-deep: #24099a; --zn-violet-soft: #ece8fd; --zn-yellow: #f0df4b; /* theme.json accent-1 — graphic only, never text */ --zn-pink: #f6cff4; /* theme.json accent-2 — graphic only, never text */ --zn-on-violet: #ffffff; --zn-link: #2f0cbd; --zn-link-hover: #24099a; --zn-shadow: 0 24px 70px rgba(28, 20, 74, 0.12); --zn-shadow-soft: 0 14px 38px rgba(28, 20, 74, 0.08); --zn-shadow-inset: inset 0 0 0 1px var(--zn-border-soft); --zn-radius: 18px; --zn-radius-sm: 11px; --zn-radius-pill: 999px; --zn-container: 1160px; /* theme.json layout.contentSize */ --zn-header-h: 76px; --zn-gutter: 48px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchors must not land under the sticky header. */ scroll-padding-top: calc(var(--zn-header-h) + 18px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .zn-page { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 14% 2%, rgba(47, 12, 189, 0.09), transparent 26rem), radial-gradient(circle at 84% 5%, rgba(240, 223, 75, 0.22), transparent 22rem), linear-gradient(180deg, #fbfaf3 0%, #ffffff 36%, #fbfaf3 100%); background-attachment: fixed; color: var(--zn-text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* Twilight — one of the theme's own eight. */ .zn-page[data-zn-theme='dark'] { --zn-bg: #131313; --zn-surface: #1c1c1e; --zn-surface-2: #252525; --zn-text: #e6e5ec; --zn-heading: #ffffff; --zn-muted: #a3a2ad; --zn-border: rgba(171, 156, 255, 0.22); --zn-border-soft: rgba(255, 255, 255, 0.12); --zn-violet: #ab9cff; /* 8.0:1 on #131313 */ --zn-violet-deep: #c6bbff; --zn-violet-soft: #221b3c; --zn-on-violet: #100a26; --zn-link: #b6a9ff; --zn-link-hover: #d2caff; --zn-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --zn-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.36); background: radial-gradient(circle at 14% 2%, rgba(75, 82, 255, 0.2), transparent 26rem), radial-gradient(circle at 84% 5%, rgba(240, 223, 75, 0.08), transparent 22rem), linear-gradient(180deg, #131313 0%, #1a1a1d 40%, #131313 100%); } /* -------------------------------------------------------------------- reset */ :where(.zn-page a) { color: inherit; text-decoration: none; } :where(.zn-page p, .zn-page ul, .zn-page ol, .zn-page dl, .zn-page dd, .zn-page figure) { margin: 0; } :where(.zn-page ul, .zn-page ol) { padding: 0; list-style: none; } :where(.zn-page h1, .zn-page h2, .zn-page h3, .zn-page h4) { margin: 0; color: var(--zn-heading); line-height: 1.16; letter-spacing: -0.021em; font-weight: 800; } :where(.zn-page img, .zn-page svg) { display: block; max-width: 100%; } :where(.zn-page button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :where(.zn-page code) { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88em; padding: 0.14em 0.42em; border-radius: 6px; background: var(--zn-violet-soft); color: var(--zn-link); word-break: break-word; } .zn-page :focus-visible { outline: 3px solid var(--zn-violet); outline-offset: 3px; border-radius: 6px; } .zn-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .zn-container { width: min(calc(100% - var(--zn-gutter)), var(--zn-container)); margin-inline: auto; } /* Reachable by keyboard, invisible until it has focus. */ .zn-skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 20px; border-radius: 10px; color: #ffffff; background: #2f0cbd; font-weight: 700; transition: top 0.2s ease; } .zn-skip:focus { top: 16px; } /* ------------------------------------------------------------------ header */ .zn-header { position: sticky; top: 0; z-index: 40; width: 100%; background: color-mix(in srgb, var(--zn-bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--zn-border-soft); } .zn-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--zn-header-h); } .zn-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; /* The mark is 38px, which is a 38px tap target. WCAG 2.5.8 wants 24, a thumb wants 44. */ min-height: 44px; } .zn-brand-mark { width: 38px; height: 38px; flex: 0 0 auto; color: var(--zn-violet); border-radius: 9px; } /* * The lockup is the mark and the word "Zain", and nothing else. A logo carrying its * own strapline reads as a placeholder, and the strapline was the first thing being * hidden below 620px anyway — which is a fair sign it was not load-bearing. */ .zn-brand-name { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: var(--zn-heading); } .zn-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; } .zn-nav a { position: relative; padding: 9px 13px; border-radius: var(--zn-radius-pill); font-size: 0.95rem; font-weight: 600; color: var(--zn-muted); transition: color 0.18s ease, background 0.18s ease; } .zn-nav a:hover, .zn-nav a.is-active { color: var(--zn-link); background: var(--zn-violet-soft); } .zn-header-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .zn-icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--zn-text); background: var(--zn-surface); box-shadow: var(--zn-shadow-inset); transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .zn-icon-button svg { width: 21px; height: 21px; } .zn-icon-button:hover { color: var(--zn-link); background: var(--zn-violet-soft); } .zn-menu-toggle { display: none; } /* ----------------------------------------------------------------- buttons */ .zn-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 21px; border-radius: var(--zn-radius-pill); font-size: 0.97rem; font-weight: 700; letter-spacing: 0.005em; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; } .zn-button svg { width: 19px; height: 19px; flex: 0 0 auto; } /* * `color` is declared here rather than inherited: every button on this page is an , * and an inherited colour on a violet fill is the bug that ships. */ .zn-button-primary { color: var(--zn-on-violet); background: var(--zn-violet); box-shadow: 0 12px 26px rgba(47, 12, 189, 0.26); } .zn-button-primary:hover { background: var(--zn-violet-deep); transform: translateY(-2px); } .zn-button-secondary { color: var(--zn-heading); background: var(--zn-surface); box-shadow: var(--zn-shadow-inset); } .zn-button-secondary:hover { color: var(--zn-link); background: var(--zn-violet-soft); transform: translateY(-2px); } /* -------------------------------------------------------------- mobile nav */ .zn-mobile-nav { display: none; padding: 10px 0 20px; border-top: 1px solid var(--zn-border-soft); background: var(--zn-bg); /* * The sheet lives inside a *sticky* header, so scrolling the page does not bring its * overflow back — the header travels with it. Eleven rows is taller than an iPhone SE * viewport, which put the last items permanently out of reach. It scrolls itself now. */ max-height: calc(100dvh - var(--zn-header-h)); overflow-y: auto; overscroll-behavior: contain; } .zn-mobile-nav[hidden] { display: none; } .zn-mobile-nav ul { display: grid; gap: 4px; } .zn-mobile-nav a { display: flex; align-items: center; min-height: 46px; padding: 11px 14px; border-radius: 12px; font-size: 1rem; font-weight: 600; color: var(--zn-text); } .zn-mobile-nav a:hover { color: var(--zn-link); background: var(--zn-violet-soft); } .zn-mobile-nav .zn-button { margin-top: 8px; width: 100%; color: var(--zn-on-violet); } .zn-mobile-nav .zn-button:hover { color: var(--zn-on-violet); background: var(--zn-violet-deep); } /* -------------------------------------------------------------- shared bits */ /* * A pill that wraps to two lines stops being a pill — it becomes a lozenge with a * ragged second row. Every eyebrow is one line at every width; the only one long * enough to be a problem drops its first clause below 620px (see .zn-eyebrow-wide). */ .zn-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: var(--zn-radius-pill); background: var(--zn-violet-soft); color: var(--zn-link); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .zn-eyebrow svg { width: 17px; height: 17px; flex: 0 0 auto; } .zn-lede { margin-top: 16px; max-width: 62ch; font-size: 1.1rem; color: var(--zn-muted); } .zn-note { margin-top: 26px; max-width: 72ch; font-size: 0.95rem; color: var(--zn-muted); } .zn-section { padding: 96px 0; } .zn-section-alt { background: color-mix(in srgb, var(--zn-surface) 62%, transparent); border-block: 1px solid var(--zn-border-soft); } .zn-section-head { max-width: 68ch; margin-bottom: 48px; } .zn-section-head h2 { margin-top: 18px; font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.7rem); } /* Fades in on first sight; fully visible from the start without JavaScript. */ [data-zn-reveal] { opacity: 1; } .zn-page.js [data-zn-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .zn-page.js [data-zn-reveal].is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------- hero */ .zn-hero { position: relative; /* * The bottom padding is small because the count strip now closes the hero and * carries its own margin above. What separates the strip from the next section is * that section's own 96px top padding — one gap, declared once, instead of three * paddings stacking into a 141px void. */ padding: 78px 0 40px; overflow: hidden; } /* * The two radial gradients are wider than the hero is tall, so `overflow: hidden` on * the hero was slicing them off at its bottom edge — a hard horizontal line across the * full width, eight pixels above the count strip, which read as a misaligned section * divider. The mask fades the decoration out before the edge at every width, so there * is nothing left to clip. */ .zn-hero-bg { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 94%); mask-image: linear-gradient(180deg, #000 52%, transparent 94%); background: radial-gradient(circle at 78% 28%, rgba(246, 207, 244, 0.42), transparent 20rem), radial-gradient(circle at 8% 78%, rgba(47, 12, 189, 0.07), transparent 22rem); } .zn-page[data-zn-theme='dark'] .zn-hero-bg { background: radial-gradient(circle at 78% 28%, rgba(255, 122, 92, 0.12), transparent 20rem), radial-gradient(circle at 8% 78%, rgba(75, 82, 255, 0.16), transparent 22rem); } .zn-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 60px; } .zn-hero-copy h1 { margin-top: 22px; font-size: clamp(2.3rem, 1.35rem + 3.4vw, 3.9rem); line-height: 1.05; letter-spacing: -0.03em; } .zn-hero-copy h1 span { display: block; color: var(--zn-link); } .zn-hero-text { margin-top: 22px; max-width: 56ch; font-size: 1.14rem; color: var(--zn-muted); } .zn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .zn-trust-list { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; } .zn-trust-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.93rem; font-weight: 600; color: var(--zn-text); } .zn-trust-list svg { width: 19px; height: 19px; color: var(--zn-link); flex: 0 0 auto; } /* -------------------------------------------------- the variation palettes */ /* * Every value below is copied out of the theme's own styles/colors/*.json. check.py * re-reads those eight files and fails if any hex here has drifted from the theme. * * Inside a preview only `--v-contrast` on `--v-base` ever carries words: that is the * pair the theme guarantees for every variation. The other six are shown as swatches, * because several of them would fail AA the moment a letter was set in them. */ [data-zn-variation='evening'] { --v-base: #1b1b1b; --v-contrast: #f0f0f0; --v-a1: #786d0a; --v-a2: #442369; --v-a3: #d1d0ea; --v-a4: #cbcbcb; --v-a5: #353535; } [data-zn-variation='noon'] { --v-base: #f8f7f5; --v-contrast: #191919; --v-a1: #ffffff; --v-a2: #f5b684; --v-a3: #191919; --v-a4: #5f5f5f; --v-a5: #f1eee9; } [data-zn-variation='dusk'] { --v-base: #e2e2e2; --v-contrast: #3b3b3b; --v-a1: #f5edff; --v-a2: #650dd4; --v-a3: #191919; --v-a4: #5f5f5f; --v-a5: #dbdbdb; } [data-zn-variation='afternoon'] { --v-base: #dae7bd; --v-contrast: #516028; --v-a1: #c7f642; --v-a2: #ebf6d3; --v-a3: #303d10; --v-a4: #516028; --v-a5: #ebf6d3; } [data-zn-variation='twilight'] { --v-base: #131313; --v-contrast: #ffffff; --v-a1: #4b52ff; --v-a2: #ff7a5c; --v-a3: #252525; --v-a4: #ffffff; --v-a5: #252525; } [data-zn-variation='morning'] { --v-base: #dfdcd7; --v-contrast: #191919; --v-a1: #7a9bdb; --v-a2: #f7e6ff; --v-a3: #182949; --v-a4: #5f5f5f; --v-a5: #d7d3cc; } [data-zn-variation='sunrise'] { --v-base: #330616; --v-contrast: #ffffff; --v-a1: #f0fda6; --v-a2: #db9ab1; --v-a3: #c1e4e7; --v-a4: #db9ab1; --v-a5: #4a1628; } [data-zn-variation='midnight'] { --v-base: #4433a6; --v-contrast: #79f3b1; --v-a1: #5644bc; --v-a2: #372696; --v-a3: #251d51; --v-a4: #79f3b1; --v-a5: #e8b7ff; } /* ---------------------------------------------------------- the switcher */ .zn-switcher { padding: 18px; border-radius: calc(var(--zn-radius) + 6px); background: var(--zn-surface); box-shadow: var(--zn-shadow); border: 1px solid var(--zn-border-soft); } .zn-switcher-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 14px; } .zn-switcher-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.93rem; font-weight: 700; color: var(--zn-heading); } .zn-switcher-title svg { width: 19px; height: 19px; color: var(--zn-link); } .zn-switcher-count { padding: 4px 11px; border-radius: var(--zn-radius-pill); background: var(--zn-violet-soft); color: var(--zn-link); font-size: 0.78rem; font-weight: 700; } .zn-preview { border-radius: var(--zn-radius); overflow: hidden; background: var(--v-base); color: var(--v-contrast); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); transition: background 0.45s ease, color 0.45s ease; } .zn-preview-bar { display: flex; gap: 6px; padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); } .zn-preview-bar span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.28; } .zn-preview-body { padding: 26px 26px 24px; } /* * No opacity on either of these, and that is the whole reason they look the way they do. * The theme guarantees `contrast` on `base` and nothing more: Afternoon's pair is 5.29:1 * to begin with, so dimming the kicker to 0.68 took it to 2.83 and the body copy to 3.98. * Dusk and Midnight failed the same way. The hierarchy here is size, weight, tracking and * case — none of which costs a ratio. */ .zn-preview-kicker { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .zn-preview-title { margin-top: 10px; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.72rem); line-height: 1.14; color: inherit; } .zn-preview-text { margin-top: 12px; font-size: 0.97rem; line-height: 1.58; } .zn-preview-text code { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; } /* * The button repeats the theme's own convention — `contrast` as the fill, `base` as the * label — which is the one pairing every variation is built to guarantee, in both * directions. */ .zn-preview-button { margin-top: 20px; } .zn-preview-button span { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 20px; border-radius: var(--zn-radius-pill); background: var(--v-contrast); color: var(--v-base); font-size: 0.9rem; font-weight: 700; transition: background 0.45s ease, color 0.45s ease; } .zn-preview-swatches { display: flex; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); } .zn-preview-swatches i { display: block; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); transition: background 0.45s ease; } .zn-switcher-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; } .zn-switcher-picks button { min-height: 40px; padding: 8px 6px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; color: var(--zn-muted); background: var(--zn-surface-2); transition: color 0.18s ease, background 0.18s ease; } .zn-switcher-picks button:hover { color: var(--zn-link); background: var(--zn-violet-soft); } .zn-switcher-picks button[data-zn-state='active'] { color: var(--zn-on-violet); background: var(--zn-violet); } .zn-switcher-note { margin-top: 14px; padding: 0 4px; font-size: 0.85rem; color: var(--zn-muted); } .zn-switcher-note strong { color: var(--zn-text); } /* ------------------------------------------------------------------ counts */ /* Inside the hero now, so it sits above .zn-hero-bg rather than behind it. */ .zn-counts { position: relative; margin-top: 64px; } .zn-count-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); } .zn-count-strip li { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; } .zn-count-strip strong { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--zn-link); } .zn-count-strip span { font-size: 0.88rem; color: var(--zn-muted); } /* -------------------------------------------------------- variation cards */ .zn-variations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 56px; } .zn-variation { padding: 16px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; } .zn-variation:hover { transform: translateY(-3px); box-shadow: var(--zn-shadow); } .zn-variation-chip { display: flex; height: 62px; border-radius: var(--zn-radius-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--zn-border-soft); } .zn-variation-chip i { flex: 1; } .zn-variation h3 { margin-top: 14px; font-size: 1.02rem; } /* The hex is set in the page's own text colour, never in the colour it names. */ .zn-variation p { margin-top: 5px; font-size: 0.78rem; color: var(--zn-muted); } .zn-variation code { padding: 0.1em 0.34em; font-size: 0.95em; background: var(--zn-surface-2); color: var(--zn-text); } /* ------------------------------------------------------------------- cards */ .zn-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .zn-card, .zn-feature { padding: 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); } .zn-card-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 13px; background: var(--zn-violet-soft); color: var(--zn-link); } .zn-card-icon svg { width: 23px; height: 23px; } .zn-card h3, .zn-feature h3 { font-size: 1.14rem; } .zn-card p, .zn-feature p { margin-top: 10px; font-size: 0.96rem; color: var(--zn-muted); } .zn-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* ---------------------------------------------------------------- patterns */ .zn-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .zn-pattern-card { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: stretch; border-radius: var(--zn-radius); overflow: hidden; background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); } .zn-pattern-card img { width: 100%; height: 100%; min-height: 168px; object-fit: cover; } .zn-pattern-card > div { padding: 22px 24px; } .zn-pattern-card h3 { font-size: 1.1rem; } .zn-pattern-card p { margin-top: 9px; font-size: 0.93rem; color: var(--zn-muted); } .zn-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding: 20px 24px; border-radius: var(--zn-radius); background: var(--zn-violet-soft); } .zn-tag-label { font-size: 0.86rem; font-weight: 700; color: var(--zn-link); } .zn-tags { display: flex; flex-wrap: wrap; gap: 8px; } .zn-tags li { padding: 6px 13px; border-radius: var(--zn-radius-pill); background: var(--zn-surface); font-size: 0.82rem; font-weight: 600; color: var(--zn-text); box-shadow: var(--zn-shadow-inset); } /* -------------------------------------------------------------- typography */ .zn-font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .zn-font-card { padding: 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); } .zn-font-sample { font-size: 3.4rem; line-height: 1; font-weight: 700; color: var(--zn-link); letter-spacing: -0.03em; } .zn-font-card h3 { margin-top: 18px; font-size: 1.12rem; } .zn-font-meta { margin-top: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zn-link); } .zn-font-card > p:last-child { margin-top: 12px; font-size: 0.94rem; color: var(--zn-muted); } /* ---------------------------------------------------------------- refuses */ .zn-refuse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .zn-refuse { padding: 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); } .zn-refuse-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px; border-radius: 13px; background: color-mix(in srgb, var(--zn-muted) 14%, transparent); color: var(--zn-heading); } .zn-refuse-icon svg { width: 21px; height: 21px; } .zn-refuse h3 { font-size: 1.1rem; } .zn-refuse p { margin-top: 10px; font-size: 0.95rem; color: var(--zn-muted); } /* -------------------------------------------------------------------- faq */ .zn-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .zn-faq-item { border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); overflow: hidden; } .zn-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 16px 22px; font-size: 1rem; font-weight: 700; color: var(--zn-heading); cursor: pointer; list-style: none; } .zn-faq-item summary::-webkit-details-marker { display: none; } /* A drawn caret, so the control reads the same in every browser. */ .zn-faq-item summary::after { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2.2px solid var(--zn-link); border-bottom: 2.2px solid var(--zn-link); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.22s ease; } .zn-faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .zn-faq-body { padding: 0 22px 20px; } .zn-faq-body p { font-size: 0.96rem; color: var(--zn-muted); } /* ---------------------------------------------------------------- install */ .zn-install-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .zn-install-card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); box-shadow: var(--zn-shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; } .zn-install-card:hover { transform: translateY(-3px); box-shadow: var(--zn-shadow); } .zn-install-card h3 { font-size: 1.08rem; } .zn-install-card p { margin-top: 9px; font-size: 0.93rem; color: var(--zn-muted); } .zn-install-link { margin-top: auto; padding-top: 16px; font-size: 0.86rem; font-weight: 700; color: var(--zn-link); word-break: break-word; } .zn-install-card-primary { background: var(--zn-violet); border-color: transparent; color: var(--zn-on-violet); } .zn-install-card-primary h3, .zn-install-card-primary p, .zn-install-card-primary .zn-install-link { color: var(--zn-on-violet); } .zn-install-card-primary p { opacity: 0.86; } .zn-install-card-primary .zn-card-icon { background: color-mix(in srgb, var(--zn-on-violet) 18%, transparent); color: var(--zn-on-violet); } .zn-spec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 26px; padding: 22px 26px; border-radius: var(--zn-radius); background: var(--zn-surface); border: 1px solid var(--zn-border-soft); } .zn-spec div { display: flex; flex-direction: column; gap: 3px; } .zn-spec dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zn-muted); } .zn-spec dd { font-size: 1.02rem; font-weight: 700; color: var(--zn-heading); } /* ----------------------------------------------------------------- footer */ .zn-footer { padding: 66px 0 40px; background: var(--zn-surface); border-top: 1px solid var(--zn-border-soft); } .zn-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; } .zn-footer-brand p { margin-top: 16px; max-width: 40ch; font-size: 0.93rem; color: var(--zn-muted); } .zn-footer-col h2 { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zn-muted); } .zn-footer-col ul { display: grid; gap: 9px; margin-top: 16px; } /* * An 18px line of text is an 18px target, which fails WCAG 2.5.8's 24px floor even on a * mouse. 24 here, and 44 from the 900px breakpoint down, where a thumb is doing it. */ .zn-footer-col a { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.95rem; color: var(--zn-text); } .zn-footer-col a:hover { color: var(--zn-link); text-decoration: underline; text-underline-offset: 3px; } .zn-footer-note { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--zn-border-soft); font-size: 0.85rem; color: var(--zn-muted); } .zn-footer-note a { color: var(--zn-link); text-decoration: underline; text-underline-offset: 3px; } .zn-footer-legal { margin-top: 10px; font-size: 0.85rem; color: var(--zn-muted); } /* ------------------------------------------------------------ scroll to top */ .zn-scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 35; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--zn-on-violet); background: var(--zn-violet); box-shadow: 0 14px 30px rgba(47, 12, 189, 0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .zn-scroll-top svg { width: 21px; height: 21px; } .zn-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* ========================================================================== Responsive -------------------------------------------------------------------------- Checked on emulated devices rather than a narrow desktop window — iPhone SE, iPhone 13, Pixel 7, Galaxy S9+ and a raw 320px viewport — because the two things that break on a phone and not in a resized window are the sticky header's menu sheet and the 44px tap target. | Width | What changes | | ------- | --------------------------------------------------------------- | | 1080px | Hero stacks; the install grid goes 4 -> 2 | | 980px | Desktop nav -> hamburger sheet | | 900px | Every 3-up and the variations go to 2; patterns and footer to 2 | | 760px | The FAQ goes to one column; the count strip goes two-by-two | | 700px | The spec row goes 3 -> 2 | | 620px | One column throughout; 18px gutter; header CTA hidden | | 400px | Tighter padding; the variation picker goes two-by-two | ========================================================================== */ @media (max-width: 1080px) { .zn-hero { padding: 56px 0 32px; } .zn-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .zn-switcher { max-width: 620px; } .zn-install-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zn-nav a { padding: 9px 10px; font-size: 0.91rem; } } @media (max-width: 980px) { .zn-nav { display: none; } .zn-menu-toggle { display: inline-grid; } .zn-mobile-nav:not([hidden]) { display: block; } } @media (max-width: 900px) { :root { --zn-gutter: 36px; } .zn-section { padding: 80px 0; } .zn-section-head { margin-bottom: 38px; } .zn-variations, .zn-split, .zn-feature-grid, .zn-refuse-grid, .zn-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zn-pattern-grid { grid-template-columns: minmax(0, 1fr); } .zn-counts { margin-top: 48px; } .zn-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .zn-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Every control reaches 44px from here down. */ .zn-nav a, .zn-footer-col a, .zn-switcher-picks button { min-height: 44px; display: flex; align-items: center; } .zn-switcher-picks button { justify-content: center; } } @media (max-width: 760px) { .zn-faq { grid-template-columns: minmax(0, 1fr); } /* * Four numbers across a phone leaves each one about 60px wide, which turns the * label under it into three stacked words. Two-by-two instead. */ .zn-count-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .zn-font-sample { font-size: 2.9rem; } } @media (max-width: 700px) { .zn-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; } .zn-tag-row { padding: 18px; } } @media (max-width: 620px) { :root { --zn-gutter: 36px; /* 18px a side */ --zn-header-h: 68px; } .zn-page { font-size: 16px; } .zn-section { padding: 62px 0; } .zn-hero { padding: 40px 0 28px; } .zn-counts { margin-top: 40px; } /* * "WordPress block theme · Free on WordPress.org" is 45 characters, which is about * 315px of uppercase at this size — wider than the whole pill can be at 320px. The * first clause goes, because the h1 and the sub-copy both say "block theme" within * the next two lines and "Free on WordPress.org" is the half doing the selling. */ .zn-eyebrow-wide { display: none; } .zn-hero-copy h1 { margin-top: 18px; } /* Full-width and stacked, so the primary action lands above the fold at 320px. */ .zn-actions { flex-direction: column; align-items: stretch; gap: 10px; } .zn-actions .zn-button { width: 100%; } .zn-trust-list { gap: 8px 16px; margin-top: 22px; } /* * Hiding only the label left a 44px violet square with a WordPress glyph and no * word — an unlabelled control in the one place somebody looks for the main action. * It goes entirely; the sheet carries the same destination as a labelled button. */ .zn-header-cta { display: none; } .zn-switcher { padding: 12px; } .zn-preview-body { padding: 22px 20px; } .zn-variations, .zn-split, .zn-feature-grid, .zn-refuse-grid, .zn-font-grid, .zn-install-grid, .zn-footer-grid { grid-template-columns: minmax(0, 1fr); } .zn-variations { gap: 12px; margin-bottom: 40px; } /* The image goes on top; 148px of photo beside 18px-wide words is neither. */ .zn-pattern-card { grid-template-columns: minmax(0, 1fr); } .zn-pattern-card img { height: 186px; min-height: 0; } .zn-pattern-card > div { padding: 20px; } .zn-card, .zn-feature, .zn-refuse, .zn-font-card, .zn-install-card { padding: 22px; } .zn-count-strip { padding: 22px 18px; } .zn-faq-item summary { padding: 14px 18px; } .zn-faq-body { padding: 0 18px 18px; } .zn-footer { padding: 52px 0 32px; } .zn-scroll-top { right: 14px; bottom: 14px; } } @media (max-width: 400px) { .zn-switcher-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zn-count-strip strong { font-size: 2rem; } .zn-eyebrow { font-size: 0.76rem; padding: 6px 12px 6px 9px; } .zn-header-inner { gap: 10px; } } /* Long words in a narrow column must not push the page sideways. */ @media (max-width: 480px) { .zn-page h1, .zn-page h2, .zn-page h3 { overflow-wrap: break-word; } } /* --------------------------------------------------------------- printing */ @media print { .zn-header, .zn-scroll-top, .zn-hero-bg, .zn-skip { display: none !important; } .zn-page { background: #ffffff; color: #000000; } }