/* ========================================================================== Nexvora Technologies — Design System Premium Moroccan technology-services identity. Dark canvas · restrained teal/gold accents · khatam (8-point star) geometry. RTL is handled with CSS logical properties so Arabic mirrors automatically. ========================================================================== */ /* ---------- Design tokens (locked) -------------------------------------- */ :root { /* Canvas */ --ink: #0a1d3a; --ink-2: #07172f; --panel: #122a4e; /* Text / lines */ --fg: #f2f4f7; --muted: #97a6c4; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); /* Accents — used for hairlines, edges, small glows, icons. Never neon fills. */ --teal: #1652b5; --teal-dim: #103d86; --gold: #b87333; --gold-soft:#d1894a; /* Derived accent tints (low-alpha, for glows/edges only) */ --teal-08: rgba(22,82,181,.08); --teal-16: rgba(22,82,181,.16); --teal-28: rgba(22,82,181,.28); --gold-16: rgba(184,115,51,.16); --gold-28: rgba(184,115,51,.28); /* Type */ --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif; /* Shape */ --r: 14px; --r-sm: 9px; --r-pill: 999px; /* Spacing scale — 4/8/12/16/24/32/48/64/96 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* Soft, low-contrast shadows */ --shadow-1: 0 1px 2px rgba(0,0,0,.30); --shadow-2: 0 12px 32px -12px rgba(0,0,0,.55); --shadow-glow: 0 8px 30px -10px rgba(22,82,181,.28); --container: 1160px; --nav-h: 68px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--ink); color: var(--fg); line-height: 1.65; font-size: 16px; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Arabic typography (body carries the .rtl class; dir lives on ) */ body.rtl { font-family: var(--font-ar); line-height: 1.85; } body.rtl h1, body.rtl h2, body.rtl h3, body.rtl .eyebrow { font-family: var(--font-ar); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } /* ---------- Base type --------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--fg); } h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.8rem); } h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: -.01em; } p { color: var(--muted); } strong { color: var(--fg); font-weight: 600; } .muted { color: var(--muted); } ::selection { background: var(--teal-28); color: #fff; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; } /* ---------- Layout primitives ------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s5); } .section { padding-block: clamp(var(--s8), 6vw, var(--s9)); position: relative; } .section > .container > .eyebrow { margin-block-end: var(--s3); } .section-head { max-width: 62ch; margin-block-end: var(--s7); } .section-head p { margin-block-start: var(--s3); font-size: 1.05rem; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); } .eyebrow::before { content: ""; inline-size: 22px; block-size: 1px; background: linear-gradient(90deg, var(--teal), transparent); } body.rtl .eyebrow::before { background: linear-gradient(-90deg, var(--teal), transparent); } .grid { display: grid; gap: var(--s5); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; } /* ---------- Zellige texture utility ------------------------------------ */ .zellige-bg { position: relative; isolation: isolate; } .zellige-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/assets/img/zellige.svg"); background-size: 90px 90px; background-position: center; opacity: .05; pointer-events: none; -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%); } /* ---------- Navigation (sticky glass) ---------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s5); min-height: var(--nav-h); padding-inline: var(--s5); padding-block: var(--s2); background: color-mix(in srgb, var(--ink) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-block-end: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand img { height: 26px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--s2); margin-inline-start: var(--s4); margin-inline-end: auto; /* pushes CTA cluster to the far edge */ flex-wrap: wrap; } .nav-links a { padding: var(--s2) var(--s3); font-size: .92rem; color: var(--muted); border-radius: var(--r-sm); transition: color .2s var(--ease), background .2s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); background: var(--line); } .nav-cta { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; } .nav-burger { display: none; inline-size: 42px; block-size: 42px; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .2s var(--ease), background .2s var(--ease); } .nav-burger:hover { border-color: var(--teal-28); background: var(--teal-08); } /* ---------- Buttons ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3) var(--s5); font-family: var(--font-display); font-weight: 600; font-size: .94rem; line-height: 1; white-space: nowrap; border-radius: var(--r-pill); border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { color: #04120f; background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dim) 100%); box-shadow: var(--shadow-glow); } .btn-primary:hover { box-shadow: 0 10px 34px -8px rgba(22,82,181,.45); transform: translateY(-1px); } .btn-ghost { color: var(--fg); background: transparent; border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--teal-28); background: var(--teal-08); color: #fff; } .btn-gold { color: #1a1405; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); } .btn-block { display: flex; inline-size: 100%; } .btn-lg { padding: var(--s4) var(--s6); font-size: 1rem; } /* ---------- Language switch -------------------------------------------- */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; } .lang-switch a { padding: 4px 10px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); border-radius: var(--r-pill); transition: color .2s var(--ease), background .2s var(--ease); } .lang-switch a:hover { color: var(--fg); } .lang-switch a.on { color: #04120f; background: var(--teal); } /* ---------- Cards ------------------------------------------------------- */ .card { position: relative; padding: var(--s6); background: linear-gradient(180deg, var(--ink-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } /* restrained accent: a teal hairline glows in on hover, nothing loud */ .card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, transparent, var(--teal-28), transparent); opacity: 0; transition: opacity .3s var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-2); } .card:hover::before { opacity: 1; } .card h3 { margin-block-end: var(--s2); } .card p { font-size: .96rem; } .card .card-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; margin-block-end: var(--s4); border-radius: var(--r-sm); color: var(--teal); background: var(--teal-08); border: 1px solid var(--teal-16); } .card-link { margin-block-start: var(--s4); color: var(--teal); font-weight: 600; font-size: .9rem; display: inline-flex; gap: 6px; } .card-link::after { content: "→"; transition: transform .2s var(--ease); } body.rtl .card-link::after { content: "←"; } .card:hover .card-link::after { transform: translateX(3px); } body.rtl .card:hover .card-link::after { transform: translateX(-3px); } /* ---------- Badge ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .04em; border-radius: var(--r-pill); color: var(--gold-soft); background: var(--gold-16); border: 1px solid var(--gold-28); } .badge.teal { color: var(--teal); background: var(--teal-08); border-color: var(--teal-16); } .badge::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; } /* ---------- Hero -------------------------------------------------------- */ .hero { position: relative; isolation: isolate; padding-block: clamp(var(--s8), 9vw, 140px); overflow: hidden; /* static fallback: sits behind the canvas, always visible */ background: radial-gradient(70% 60% at 78% 0%, rgba(22,82,181,.10), transparent 60%), radial-gradient(50% 50% at 12% 30%, rgba(184,115,51,.06), transparent 55%), var(--ink); border-block-end: 1px solid var(--line); } #hero-mesh { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; pointer-events: none; } .hero .container { position: relative; } .hero h1 { max-width: 16ch; } .hero .lead { margin-block-start: var(--s5); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s7); } /* ---------- CTA band ---------------------------------------------------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; margin-block: 0; padding-block: clamp(var(--s8), 6vw, var(--s9)); padding-inline: var(--s5); text-align: center; background: radial-gradient(60% 120% at 50% 0%, rgba(22,82,181,.12), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); border-block: 1px solid var(--line); } .cta-band h2 { max-width: 22ch; margin-inline: auto; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-block-start: var(--s6); } /* ---------- Footer ------------------------------------------------------ */ .footer { background: var(--ink-2); border-block-start: 1px solid var(--line); padding-block: var(--s8) var(--s6); padding-inline: var(--s5); } .foot-cols { max-width: var(--container); margin-inline: auto; display: grid; gap: var(--s6); grid-template-columns: 1.4fr 1fr 1.2fr; align-items: start; } .foot-cols strong { font-family: var(--font-display); letter-spacing: .02em; } .foot-cols nav { display: flex; flex-direction: column; gap: var(--s2); } .foot-cols nav a { color: var(--muted); font-size: .94rem; width: fit-content; transition: color .2s var(--ease); } .foot-cols nav a:hover { color: var(--fg); } .foot-ids { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--s3); font-size: .82rem; line-height: 1.5; } .foot-addr { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.5; } .foot-addr a { color: var(--muted); transition: color .2s var(--ease); } .foot-addr a:hover { color: var(--fg); } .foot-legal { max-width: var(--container); margin-inline: auto; margin-block-start: var(--s7); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); font-size: .84rem; color: var(--muted); } .foot-legal a { color: var(--muted); transition: color .2s var(--ease); } .foot-legal a:hover { color: var(--fg); } /* ---------- Flash messages --------------------------------------------- */ .flash { max-width: var(--container); margin-inline: auto; margin-block: var(--s4); padding: var(--s3) var(--s5); border-radius: var(--r-sm); font-size: .94rem; font-weight: 500; border: 1px solid var(--line-2); border-inline-start-width: 3px; } .flash-success { color: #cdeee6; background: var(--teal-08); border-inline-start-color: var(--teal); } .flash-error { color: #f3d3d3; background: rgba(217,86,86,.10); border-inline-start-color: #d95656; } /* ---------- Form controls ---------------------------------------------- */ .field { display: block; margin-block-end: var(--s5); } .field > label, .label { display: block; margin-block-end: var(--s2); font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--fg); } .field .hint { display: block; margin-block-start: 6px; font-size: .8rem; color: var(--muted); } .field-required { color: var(--gold); margin-inline-start: 3px; } .input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], textarea, select { display: block; inline-size: 100%; padding: var(--s3) var(--s4); background: var(--ink-2); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } textarea { min-block-size: 130px; resize: vertical; line-height: 1.6; } select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-size: 6px 6px, 6px 6px; background-position: right calc(var(--s4)) center, right calc(var(--s4) - 6px) center; background-repeat: no-repeat; padding-inline-end: var(--s7); } body.rtl select { background-position: left calc(var(--s4)) center, left calc(var(--s4) - 6px) center; padding-inline-end: var(--s4); padding-inline-start: var(--s7); } ::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); } .input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-16); background: var(--ink); } input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"], .field.has-error .input, .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #d95656; box-shadow: 0 0 0 3px rgba(217,86,86,.14); } .field-error { display: block; margin-block-start: 6px; font-size: .82rem; color: #e58c8c; } /* Honeypot — must stay invisible & unfocusable */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Selectable choice chips (service pillars / industries in the devis flow) */ .choice-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .choice { position: relative; display: block; cursor: pointer; } .choice input { position: absolute; opacity: 0; inset-block-start: 0; inset-inline-start: 0; } .choice-body { display: flex; flex-direction: column; gap: 4px; padding: var(--s4); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } .choice-body strong { font-family: var(--font-display); font-size: .95rem; } .choice-body span { font-size: .82rem; color: var(--muted); } .choice input:focus-visible + .choice-body { outline: 2px solid var(--teal); outline-offset: 2px; } .choice input:checked + .choice-body { border-color: var(--teal); background: var(--teal-08); box-shadow: inset 0 0 0 1px var(--teal-28); } /* ---------- Stepper (Demander un devis) -------------------------------- Expected markup (built in a later task):
  1. …
    2. …
…
(repeat; first is shown by default)
---------------------------------------------------------------------- */ .stepper { display: block; } .stepper-steps { display: flex; gap: var(--s2); margin-block-end: var(--s7); counter-reset: step; } .stepper-steps li { display: flex; align-items: center; gap: var(--s2); flex: 1 1 0; min-inline-size: 0; font-size: .82rem; color: var(--muted); } .stepper-steps li::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; flex: 0 0 auto; font-family: var(--font-display); font-size: .82rem; font-weight: 600; border-radius: 50%; color: var(--muted); background: var(--ink-2); border: 1px solid var(--line-2); transition: all .25s var(--ease); } .stepper-steps li .step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stepper-steps li.is-active { color: var(--fg); } .stepper-steps li.is-active::before { color: #04120f; background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-08); } .stepper-steps li.is-done { color: var(--fg); } .stepper-steps li.is-done::before { content: "✓"; color: var(--teal); background: var(--teal-08); border-color: var(--teal-28); } .step { border: 0; padding: 0; margin: 0; min-inline-size: 0; animation: step-in .35s var(--ease); } .step[hidden] { display: none; } .step legend, .step > h3 { margin-block-end: var(--s5); padding: 0; } @keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .step-actions { display: flex; gap: var(--s3); margin-block-start: var(--s7); align-items: center; } .step-actions .step-prev { margin-inline-end: auto; } .step-actions [hidden] { display: none; } /* ---------- Reveal-on-scroll (progressively enhanced) ------------------ */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; } /* If JS never runs, content must still be visible */ .no-js [data-reveal] { opacity: 1; transform: none; } /* ---------- Utilities --------------------------------------------------- */ .text-center { text-align: center; } .divider { block-size: 1px; background: var(--line); border: 0; margin-block: var(--s6); } .hairline-gold { block-size: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--gold-28), transparent); } .stack > * + * { margin-block-start: var(--s4); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 960px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .foot-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav { flex-wrap: wrap; gap: var(--s3); } /* Keep brand + burger on the top row; links/CTA wrap beneath when open. */ .brand { order: 0; } .nav-burger { display: inline-flex; order: 1; margin-inline-start: auto; } .nav-links { order: 2; } .nav-cta { order: 3; } .nav-links, .nav-cta { flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: var(--s2); margin-inline: 0; } .nav-links { margin-block-start: var(--s2); } .nav-cta { padding-block-end: var(--s2); } .nav.open .nav-links, .nav.open .nav-cta { display: flex; } .nav-links a { padding-block: var(--s3); } .nav-cta .btn { width: 100%; } .lang-switch { align-self: flex-start; } .stepper-steps li .step-label { display: none; } /* keep numbers only on small screens */ } @media (max-width: 620px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr; } .container { padding-inline: var(--s4); } .card { padding: var(--s5); } .hero-actions .btn, .cta-row .btn { flex: 1 1 auto; } .step-actions { flex-wrap: wrap; } .step-actions .step-prev { margin-inline-end: 0; order: 2; } .step-actions .step-next, .step-actions .step-submit { order: 1; flex: 1 1 100%; } } /* ========================================================================== Reduced motion — disable reveals, hero animation, and micro-interactions ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .step { animation: none; } } /* ========================================================================== Cookie consent banner (GDPR/RGPD) — informational only. The site sets ONLY strictly-necessary cookies (PHPSESSID session + CSRF token); no analytics/advertising/tracking, so a single acknowledge action is enough. Hidden by default via [hidden] — nexvora.js reveals it when the `nx_cookie_ok` localStorage flag is absent, so returning visitors never see a flash. Progressive: with no JS the banner simply stays hidden and never blocks page content. ========================================================================== */ .cookie-banner { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60; padding: var(--s4); background: var(--ink-2); border-block-start: 1px solid var(--line-2); box-shadow: var(--shadow-2); } .cookie-banner[hidden] { display: none; } .cookie-banner-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); justify-content: space-between; } .cookie-banner-text { color: var(--muted); font-size: .88rem; flex: 1 1 420px; } .cookie-banner-text strong { color: var(--fg); display: block; margin-block-end: 4px; font-family: var(--font-display); } .cookie-banner-text a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner-accept { flex: 0 0 auto; } @media (max-width: 620px) { .cookie-banner-inner { flex-direction: column; align-items: stretch; } .cookie-banner-accept { inline-size: 100%; } } /* Consent checkbox row (devis + contact forms) */ .consent-field { display: flex; align-items: flex-start; gap: var(--s3); margin-block-end: var(--s5); } .consent-field input[type="checkbox"] { margin-block-start: 4px; inline-size: 18px; block-size: 18px; accent-color: var(--teal); flex: 0 0 auto; } .consent-field label { font-size: .88rem; color: var(--muted); } .consent-field a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; } /* --- Brand lockup (monogram + wordmark, Montserrat) --- */ .brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none} .brand-mark{height:34px;width:auto;display:block} .brand-wm{display:inline-flex;flex-direction:column;line-height:1;gap:.15em} .brand-wm strong{font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:.02em;color:var(--fg)} .brand-wm em{font-style:normal;font-weight:500;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)} @media (max-width:560px){.brand-wm em{display:none}}