/* ============================================================ Resonans website — site chrome & marketing pages. Composes ONLY design-system tokens (--rz-*) per the DS lock; component values mirror design-system/components (Button, NavBar, Footer, Card, Eyebrow, StatBlock). Logical properties are used throughout so /fa (RTL) mirrors automatically. ============================================================ */ /* ---- Persian typography (Peyda) ---- The DS switches to Peyda via `[dir="rtl"] { font-family: var(--rz-font-fa) }`, but base.html carries dir="rtl" on while the DS also pins `body { font-family: var(--rz-font-sans) }` (base.css) and gives headings `--rz-font-display` (= --rz-font-sans = Manrope). Because body/headings RE-DECLARE the family, the [dir=rtl] switch — which only lands on — never cascades into them, so Persian rendered in Manrope (→ system fallback). Re-point the family tokens under RTL so every element reading --rz-font-sans / --rz-font-display inherits Peyda. Pure token composition — no DS files touched. */ html[dir="rtl"] { --rz-font-sans: var(--rz-font-fa); --rz-font-display: var(--rz-font-fa); } /* Nothing on a Resonans page may scroll sideways. `clip`, not `hidden`: `overflow: hidden` on an ancestor silently turns `.site-nav`'s `position: sticky` into static scrolling. */ html, body { overflow-x: clip; } /* Long single words (Persian compounds, "Partnerships", URLs) must break rather than push the viewport wide. `min-width: 0` lets a heading inside a grid or flex track actually shrink to its container. */ h1, h2, h3, .hero__title, .page-hero__title, .section-title { overflow-wrap: anywhere; min-width: 0; } /* ---- Buttons (mirror of components/buttons/Button.jsx) ---- 8px rounded, bold, red primary that brightens to hot red on hover — matched 1:1 to the legacy resonans.academy CTA (owner-approved). */ .rz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.75rem; font-family: inherit; font-size: var(--rz-text-btn); font-weight: var(--rz-w-bold); line-height: 1; border-radius: var(--rz-radius-btn); cursor: pointer; text-decoration: none; white-space: nowrap; /* Purpose: feedback. The press is the only motion here; colour follows at hover speed. Nothing exceeds the DS ladder (see readme "MOTION DOCTRINE"). */ transition: transform var(--rz-dur-press) var(--rz-ease), background-color var(--rz-dur-fast) var(--rz-ease), border-color var(--rz-dur-fast) var(--rz-ease), color var(--rz-dur-fast) var(--rz-ease); } .rz-btn:active { transform: scale(var(--rz-press-scale)); } .rz-btn--sm { padding: 0.5rem 1rem; font-size: var(--rz-text-sm); } .rz-btn--lg { padding: 1.25rem 2rem; font-size: var(--rz-text-btn); } .rz-btn--primary { background: var(--rz-accent); color: var(--rz-on-accent); border: 1px solid var(--rz-accent); } .rz-btn--primary:hover { background: var(--rz-btn-hover); border-color: var(--rz-btn-hover); color: var(--rz-on-accent); } .rz-btn--secondary { background: transparent; color: var(--rz-text); border: 1px solid var(--rz-border-strong); } .rz-btn--secondary:hover { color: var(--rz-text); border-color: var(--rz-text); } .rz-btn--ghost { background: transparent; color: var(--rz-text); border: 1px solid transparent; padding-inline: 0; } .rz-btn--band { background: var(--rz-white); color: var(--rz-red); border: 1px solid var(--rz-white); padding: 1rem 2rem; font-size: var(--rz-text-btn); } .rz-btn--band:hover { background: var(--rz-white); color: var(--rz-red-hot); } /* ---- Eyebrow (mirror of components/brand/Eyebrow.jsx) ---- */ .rz-eyebrow { display: inline-flex; align-items: center; gap: var(--rz-space-2); font-size: var(--rz-text-label); font-weight: var(--rz-w-semibold); letter-spacing: var(--rz-tracking-label); text-transform: uppercase; color: var(--rz-text-muted); } .rz-eyebrow__tick { width: 14px; height: 7px; background: var(--rz-red); border-radius: 999px 999px 0 0; transform: rotate(90deg); flex-shrink: 0; } [dir="rtl"] .rz-eyebrow { letter-spacing: 0; } /* Persian doesn't letter-space */ /* ---- Navbar (mirror of components/navigation/NavBar.jsx) ---- */ .site-nav { position: sticky; top: 0; z-index: 50; padding: 1rem var(--rz-page-pad); background: var(--rz-bg); border-bottom: 1px solid var(--rz-border); } /* The bar and its rule run edge to edge; the content sits on the same --rz-container grid as every page section, so the logo is flush with the h1 below it instead of 340px to its outside at 1920px. */ .site-nav__inner { width: 100%; max-width: var(--rz-container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--rz-space-6); } .site-nav__brand { display: inline-flex; align-items: center; } /* Slogan-free lockups, so the wordmark can run larger without the logo growing wider than the old slogan version (5.1:1 EN / 3.7:1 FA). */ .site-nav__logo { height: 36px; width: auto; } .site-nav__logo--fa { height: 42px; } .site-nav__links { display: flex; align-items: center; gap: var(--rz-space-6); } .site-nav__links a { font-size: var(--rz-text-sm); font-weight: var(--rz-w-medium); color: var(--rz-text); text-decoration: none; opacity: 0.85; /* Nav links are hit tens of times a day — colour only, at hover speed. Anything with travel would read as lag on a link this frequent. */ transition: color var(--rz-dur-fast) var(--rz-ease), opacity var(--rz-dur-fast) var(--rz-ease); } .site-nav__links a:hover { color: var(--rz-accent); opacity: 1; } .site-nav__actions { display: flex; align-items: center; gap: var(--rz-space-4); } /* ---- Hero (home) — dark, centered composition ---- */ .hero { position: relative; background: var(--rz-black); color: var(--rz-white); overflow: hidden; } .hero__glow { position: absolute; inset: 0; background: var(--rz-glow-radial); opacity: 0.9; } .hero__half-circle { position: absolute; background: var(--rz-neutral-900); inset-inline-end: -160px; top: -120px; width: 320px; height: 640px; border-radius: 640px 0 0 640px; } [dir="rtl"] .hero__half-circle { border-radius: 0 640px 640px 0; } .hero__half-circle--sm { background: var(--rz-neutral-850); inset-inline-start: -140px; /* opposite side, for a balanced centered frame */ inset-inline-end: auto; top: auto; bottom: -220px; width: 220px; height: 440px; border-radius: 0 440px 440px 0; } [dir="rtl"] .hero__half-circle--sm { border-radius: 440px 0 0 440px; } .hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(4.5rem, 11vw, 9rem); padding-bottom: clamp(4.5rem, 11vw, 9rem); } /* Framed faded vertical hairlines (fade in from the top) */ .hero__frame { position: absolute; inset: 0; pointer-events: none; } .hero__frame-line { position: absolute; top: 0; bottom: 0; width: 1px; } .hero__frame-line--start { inset-inline-start: var(--rz-space-2); } .hero__frame-line--end { inset-inline-end: var(--rz-space-2); } .hero__frame-line--inner.hero__frame-line--start { inset-inline-start: var(--rz-space-6); } .hero__frame-line--inner.hero__frame-line--end { inset-inline-end: var(--rz-space-6); } .hero__frame-line--outer { background: linear-gradient(to bottom, transparent, var(--rz-neutral-700)); } .hero__frame-line--inner { background: linear-gradient(to bottom, transparent, var(--rz-neutral-800)); } @media (max-width: 900px) { .hero__frame { display: none; } } .hero__title { font-size: var(--rz-h-hero); /* 72px — legacy hero */ font-weight: var(--rz-w-bold); line-height: var(--rz-h-hero-lh); letter-spacing: var(--rz-tracking-tight); max-width: 18ch; text-wrap: balance; } @media (max-width: 760px) { .hero__title { font-size: var(--rz-h1); line-height: var(--rz-h1-lh); } } [dir="rtl"] .hero__title { letter-spacing: 0; line-height: 1.15; } .hero__title em { font-style: normal; color: var(--rz-red); } .hero__title-lead { display: block; } .hero__sub { margin-top: var(--rz-space-5); max-width: 48ch; font-size: var(--rz-text-lg); color: var(--rz-text-muted); } .hero__cta { margin-top: var(--rz-space-7); display: flex; gap: var(--rz-space-3); flex-wrap: wrap; justify-content: center; } /* ---- Trust strip (home) — placeholder client logos ---- */ .trust { border-top: 1px solid var(--rz-border); padding-top: var(--rz-space-8); padding-bottom: var(--rz-space-8); } .trust__heading { text-align: center; font-size: var(--rz-text-lg); font-weight: var(--rz-w-medium); letter-spacing: var(--rz-tracking-tight); color: var(--rz-text-muted); } [dir="rtl"] .trust__heading { letter-spacing: 0; } .trust__logos { margin-top: var(--rz-space-7); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rz-space-5) var(--rz-space-9); -webkit-mask-image: linear-gradient(to right, transparent, var(--rz-black) 12%, var(--rz-black) 88%, transparent); mask-image: linear-gradient(to right, transparent, var(--rz-black) 12%, var(--rz-black) 88%, transparent); } /* Client logos are foreign artwork: force them monochrome so no colour but the brand red ever appears, and let each one settle inside the same optical box. The entrance reveal rides the wrapper so the keeps `opacity` free for the hover — animating `filter` instead would repaint the logo every frame. */ .trust__logo-wrap { display: inline-flex; } .trust__logo { max-height: 34px; max-width: 132px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.5; transition: opacity var(--rz-dur-fast) var(--rz-ease); } @media (hover: hover) and (pointer: fine) { .trust__logo-wrap:hover .trust__logo { opacity: 1; } } @media (max-width: 760px) { .trust__logos { gap: var(--rz-space-5) var(--rz-space-7); } .trust__logo { max-height: 28px; max-width: 104px; } } /* ---- Stats (mirror of components/core/StatBlock.jsx) ---- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--rz-space-6); padding-top: var(--rz-space-9); padding-bottom: var(--rz-space-9); } .stat__value { font-weight: var(--rz-w-bold); font-size: var(--rz-text-4xl); line-height: 1; letter-spacing: var(--rz-tracking-tight); color: var(--rz-text); /* Fixed-width digits: the count-up in motion.js rewrites this text every frame — proportional figures would make the number jitter and shift the grid. */ font-variant-numeric: tabular-nums; } .stat__value--accent { color: var(--rz-red); } .stat__label { margin-top: var(--rz-space-2); font-size: var(--rz-text-label); font-weight: var(--rz-w-medium); color: var(--rz-text-muted); } /* ---- Services — Start / Grow / Scale (taxonomy modeled on siegemedia.com) ---- */ .services { background: var(--rz-surface); } .services__inner { padding-top: var(--rz-space-10); padding-bottom: var(--rz-space-10); } .services__title { margin-top: var(--rz-space-4); font-size: var(--rz-h2); font-weight: var(--rz-w-bold); letter-spacing: var(--rz-h2-track); max-width: 30ch; } [dir="rtl"] .services__title { letter-spacing: normal; } .services__grid { margin-top: var(--rz-space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--rz-space-5); align-items: stretch; } .service-group { position: relative; background: var(--rz-bg); color: var(--rz-text); border: 1px solid var(--rz-border); border-radius: var(--rz-radius-md); padding: var(--rz-space-7); transition: transform var(--rz-dur) var(--rz-ease); } .service-group--dark { background: var(--rz-neutral-950); color: var(--rz-white); border-color: var(--rz-neutral-800); } .service-group--dark .service-group__label { color: var(--rz-red-bright); } .service-group__label { color: var(--rz-red); } .service-group__blurb { margin-top: var(--rz-space-2); color: var(--rz-text-muted); font-size: var(--rz-text-sm); } .service-group__list { list-style: none; margin: var(--rz-space-5) 0 0; padding: 0; } .service-group__list li { padding: var(--rz-space-3) 0; border-top: 1px solid var(--rz-border); } .service-group--dark .service-group__list li { border-top-color: var(--rz-neutral-800); } .service-group__item-title { display: block; font-weight: var(--rz-w-bold); font-size: var(--rz-text-sm); } .service-group__item-desc { display: block; margin-top: 0.15rem; color: var(--rz-text-muted); font-size: var(--rz-text-sm); } /* ---- Results (home) — dark proof band, one card per case study (layout modeled on siegemedia.com) ---- */ .results { position: relative; background: var(--rz-black); color: var(--rz-white); overflow: hidden; } .results__glow { position: absolute; inset: 0; background: var(--rz-glow-radial); opacity: 0.7; } .results__inner { position: relative; padding-top: var(--rz-space-10); padding-bottom: var(--rz-space-10); } .results__title { margin-top: var(--rz-space-4); font-size: var(--rz-h2); font-weight: var(--rz-w-bold); letter-spacing: var(--rz-h2-track); max-width: 24ch; } [dir="rtl"] .results__title { letter-spacing: normal; } .results__sub { margin-top: var(--rz-space-4); max-width: 60ch; font-size: var(--rz-text-lg); color: var(--rz-text-muted); } .results__grid { margin-top: var(--rz-space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--rz-space-5); align-items: stretch; } .result-card { position: relative; display: flex; flex-direction: column; gap: var(--rz-space-5); padding: var(--rz-space-7); background: var(--rz-neutral-950); border: 1px solid var(--rz-neutral-800); border-radius: var(--rz-radius-md); color: var(--rz-text); text-decoration: none; transition: transform var(--rz-dur) var(--rz-ease), border-color var(--rz-dur) var(--rz-ease); } .result-card:hover { border-color: var(--rz-neutral-700); } .result-card:active { transform: scale(var(--rz-press-scale-lg)); } .result-card__client { font-size: var(--rz-text-sm); font-weight: var(--rz-w-bold); color: var(--rz-red-bright); } .result-card__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rz-space-5); } .result-stat__value { display: block; font-size: var(--rz-text-4xl); font-weight: var(--rz-w-bold); line-height: 1; letter-spacing: var(--rz-tracking-tight); font-variant-numeric: tabular-nums; } [dir="rtl"] .result-stat__value { letter-spacing: 0; } /* Red carries the lead metric only — the rest stay white, so the accent still reads as an accent (DS: red used sparingly). */ .result-stat:first-child .result-stat__value { color: var(--rz-red-bright); } .result-stat__label { display: block; margin-top: var(--rz-space-2); font-size: var(--rz-text-sm); color: var(--rz-text-muted); } .result-card__note { margin-top: auto; padding-top: var(--rz-space-5); border-top: 1px solid var(--rz-neutral-800); font-size: var(--rz-text-sm); color: var(--rz-text-muted); } .result-card__read { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--rz-text-sm); font-weight: var(--rz-w-semibold); color: var(--rz-red-bright); } .result-card__read svg { width: 16px; height: 16px; transition: transform var(--rz-dur) var(--rz-ease); } [dir="rtl"] .result-card__read svg { transform: scaleX(-1); } .results__cta { margin-top: var(--rz-space-8); } /* ---- Red CTA band ---- */ .band { background: var(--rz-red); color: var(--rz-white); } .band__inner { padding-top: var(--rz-space-9); padding-bottom: var(--rz-space-9); display: flex; align-items: center; justify-content: space-between; gap: var(--rz-space-6); flex-wrap: wrap; } .band__lockup { display: flex; align-items: center; gap: var(--rz-space-5); } .band__mark { display: inline-block; width: 56px; height: 56px; background: var(--rz-white); border-radius: var(--rz-radius-md); overflow: hidden; flex-shrink: 0; line-height: 0; } .band__mark svg { width: 56px; height: 56px; } .band h2 { font-size: var(--rz-h1); font-weight: var(--rz-w-bold); letter-spacing: var(--rz-h1-track); max-width: 18ch; color: var(--rz-white); } [dir="rtl"] .band h2 { letter-spacing: 0; } /* ---- Footer (mirror of components/navigation/Footer.jsx) ---- */ .site-footer { background: var(--rz-black); color: var(--rz-white); padding: var(--rz-space-9) var(--rz-page-pad) var(--rz-space-6); } /* Same grid alignment as .site-nav__inner — the footer content lines up with the page content above it. */ .site-footer__hairline, .site-footer__inner, .site-footer__bottom { width: 100%; max-width: var(--rz-container); margin-inline: auto; } .site-footer__hairline { height: 3px; background: var(--rz-red); margin-bottom: var(--rz-space-8); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--rz-space-8); justify-content: space-between; } /* Wide enough that the Tehran address wraps to two lines, not three */ .site-footer__brand { max-width: 360px; } .site-footer__logo { height: 32px; width: auto; } .site-footer__logo--fa { height: 38px; } .site-footer__tagline { margin-top: var(--rz-space-3); color: var(--rz-text-muted); font-size: var(--rz-text-sm); } .site-footer__offices { display: flex; flex-direction: column; gap: var(--rz-space-3); margin-top: var(--rz-space-6); } .site-footer__office-city { display: block; font-size: var(--rz-text-sm); font-weight: var(--rz-w-semibold); color: var(--rz-white); } .site-footer__office-address { margin-top: var(--rz-space-1); font-style: normal; font-size: var(--rz-text-sm); line-height: 1.6; color: var(--rz-text-muted); } .site-footer__columns { display: flex; flex-wrap: wrap; gap: var(--rz-space-8); } .site-footer__column { display: flex; flex-direction: column; gap: var(--rz-space-3); } .site-footer__column-title { color: var(--rz-text-muted); } [dir="rtl"] .site-footer__column-title { letter-spacing: 0; } .site-footer__column a { color: var(--rz-white); font-size: var(--rz-text-sm); text-decoration: none; opacity: 0.85; } .site-footer__column a:hover { color: var(--rz-accent); opacity: 1; } .site-footer__bottom { margin-top: var(--rz-space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-4); } .site-footer__copyright { color: var(--rz-text-muted); font-size: var(--rz-text-micro); letter-spacing: var(--rz-tracking-label); text-transform: uppercase; } [dir="rtl"] .site-footer__copyright { letter-spacing: 0; } /* Language switch — flag + the name of the language you land on */ .site-footer__lang { display: inline-flex; align-items: center; gap: var(--rz-space-2); padding: 0.35rem 0.7rem; border: 1px solid var(--rz-neutral-800); border-radius: var(--rz-radius-pill); color: var(--rz-text-muted); font-size: var(--rz-text-sm); font-weight: var(--rz-w-semibold); text-decoration: none; transition: border-color var(--rz-dur-fast) var(--rz-ease), color var(--rz-dur-fast) var(--rz-ease), transform var(--rz-dur-press) var(--rz-ease); } .site-footer__lang:hover { border-color: var(--rz-neutral-700); color: var(--rz-white); } .site-footer__lang:active { transform: scale(var(--rz-press-scale)); } /* Left square: the smallest DS radius (6px) would eat a 20px-wide flag. */ .site-footer__lang-flag { width: 20px; height: auto; flex-shrink: 0; } /* ============================================================ MOBILE NAVIGATION DRAWER Below 760px the inline nav can't fit, so it moves into a drawer. Motion per the DS MOTION DOCTRINE: · Purpose — spatial consistency: the panel comes from, and returns to, the inline-end edge the toggle sits on, so the swipe/tap direction and the motion agree. · Enters on --rz-ease-drawer / --rz-dur-drawer (the iOS sheet curve); leaves on --rz-dur (240ms), because a menu you're done with should clear out faster than it arrived. · CSS transitions, not keyframes, so a fast open→close→open retargets from wherever the panel currently is instead of snapping to 0. · Only transform + opacity animate. ============================================================ */ /* Hamburger — two bars that cross into an X while the drawer is open. */ .site-nav__toggle { display: none; /* shown at <=760px */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; /* comfortable touch target */ height: 44px; margin-inline-end: calc(-1 * var(--rz-space-2)); padding: 0; background: none; border: 0; border-radius: var(--rz-radius-btn); color: var(--rz-text); cursor: pointer; transition: transform var(--rz-dur-press) var(--rz-ease); } .site-nav__toggle:active { transform: scale(var(--rz-press-scale)); } .site-nav__toggle-bar { display: block; width: 22px; height: 2px; border-radius: var(--rz-radius-pill); background: currentColor; transition: transform var(--rz-dur-menu) var(--rz-ease); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); } .site-drawer { position: fixed; inset: 0; z-index: 90; } .site-drawer[hidden] { display: none; } .site-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity var(--rz-dur) var(--rz-ease); } .site-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(360px, 86vw); display: flex; flex-direction: column; gap: var(--rz-space-5); padding: var(--rz-space-5) var(--rz-space-5) var(--rz-space-8); background: var(--rz-black); color: var(--rz-white); border-inline-start: 1px solid var(--rz-neutral-800); overflow-y: auto; overscroll-behavior: contain; /* Off-screen by its own width, so the panel can be resized without re-tuning the number. */ transform: translateX(100%); transition: transform var(--rz-dur) var(--rz-ease); } [dir="rtl"] .site-drawer__panel { transform: translateX(-100%); } /* `is-open` is set one frame after [hidden] is removed, so the closed state is committed first and the entrance actually plays. */ .site-drawer.is-open .site-drawer__scrim { opacity: 1; } .site-drawer.is-open .site-drawer__panel { transform: translateX(0); transition: transform var(--rz-dur-drawer) var(--rz-ease-drawer); } .site-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rz-space-4); padding-bottom: var(--rz-space-4); border-bottom: 1px solid var(--rz-neutral-800); } .site-drawer__logo { height: 30px; width: auto; } .site-drawer__logo--fa { height: 34px; } .site-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-inline-end: calc(-1 * var(--rz-space-2)); padding: 0; background: none; border: 0; border-radius: var(--rz-radius-btn); color: var(--rz-white); cursor: pointer; transition: transform var(--rz-dur-press) var(--rz-ease), color var(--rz-dur-fast) var(--rz-ease); } .site-drawer__close:hover { color: var(--rz-red-bright); } .site-drawer__close:active { transform: scale(var(--rz-press-scale)); } .site-drawer__primary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .site-drawer__primary a { display: block; padding: var(--rz-space-3) 0; font-size: var(--rz-text-lg); font-weight: var(--rz-w-bold); color: var(--rz-white); text-decoration: none; transition: color var(--rz-dur-fast) var(--rz-ease); } .site-drawer__primary a:hover { color: var(--rz-red-bright); } .site-drawer__group { display: flex; flex-direction: column; gap: var(--rz-space-2); } .site-drawer__group-title { color: var(--rz-text-muted); } [dir="rtl"] .site-drawer__group-title { letter-spacing: 0; } .site-drawer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rz-space-1); } .site-drawer__group a { display: block; padding: var(--rz-space-2) 0; font-size: var(--rz-text-sm); font-weight: var(--rz-w-medium); color: var(--rz-text-muted); text-decoration: none; transition: color var(--rz-dur-fast) var(--rz-ease); } .site-drawer__group a:hover { color: var(--rz-white); } .site-drawer__cta { margin-top: auto; justify-content: center; } /* Reduced motion: the drawer still arrives and leaves, it just doesn't travel. */ @media (prefers-reduced-motion: reduce) { .site-drawer__panel { transform: none; opacity: 0; transition: opacity var(--rz-dur-fast) var(--rz-ease); } [dir="rtl"] .site-drawer__panel { transform: none; } .site-drawer.is-open .site-drawer__panel { transform: none; opacity: 1; transition: opacity var(--rz-dur-fast) var(--rz-ease); } .site-nav__toggle:active, .site-drawer__close:active { transform: none; } .site-nav__toggle-bar { transition: none; } } /* ---- Small screens ---- */ @media (max-width: 760px) { /* The DS ships the owner-approved mobile ramp on the ELEMENTS (design-system/tokens/base.css: h1 → --rz-h2, h2 → --rz-h3). Every heading that re-declares its size on a CLASS outranks that ramp and never stepped down — so 48px headlines were landing in a 280px-wide box. Each such class has to repeat the step explicitly. */ .services__title, .results__title { font-size: var(--rz-h3); line-height: var(--rz-h3-lh); letter-spacing: var(--rz-h3-track); } .band h2 { font-size: var(--rz-h2); line-height: var(--rz-h2-lh); letter-spacing: var(--rz-h2-track); } .site-nav__links { display: none; } .site-nav__toggle { display: inline-flex; } /* The drawer carries its own CTA; two "Start a project" buttons on a 375px bar would push the logo off. */ .site-nav__cta { display: none; } } @media (min-width: 761px) { .site-drawer { display: none; } }