/* ============================================================================
QET — main.css · "Bento Studio" design system
Ported from the approved demo (demo-3-bento-studio) and extended for the
trilingual (en/fr/ar) WordPress theme. Fully RTL-safe: CSS logical
properties everywhere, fonts switch via html[dir=rtl] custom properties.
DEMO CLASS VOCABULARY (kept as-is, templates reuse it verbatim):
.container .grad-text .btn .btn-ink .btn-violet .btn-light .btn-sm .btn-lg
.site-header .header-inner .logo .logo-dot .site-nav .nav-link .lang-pills
.lang .nav-toggle .bar .menu-open .bg-decor .bento .tile .grid-6 .span-2
.span-3 .span-4 .fill-lav .fill-peach .fill-rose .fill-ice .hero
.hero-bento .tile-main .label-pill .hero-title .hero-sub .hero-actions
.chip-text .chip-icon .chip-indigo .chip-pink .chip-amber
.chip-cyan .tile-lav .tile-peach .tile-pink .tile-cyan .kpi-row .kpi-num
.kpi-delta .kpi-label .sparkline .dots-map .glyphs .glyph-ink .glyph-amber
.site-dots .sd .sd-1..5 .sd-more .tile-grad .mini-label .grad-teaser
.stats .stats-tile .stat .stat-num .stat-label .section .section-head
.label-pill .mini-pills .link-chip .is-static .careers-tile .role-chips
.tile-remote .spark-big .remote-big .remote-sub .tz-pills .cta-tile
.site-footer .footer-grid .footer-brand .footer-col .socials .footer-bottom
[data-reveal] [data-reveal-group] .revealed
NEW PATTERN INVENTORY (expected markup shapes for the template agent)
---------------------------------------------------------------------------
.q-skip-link first child of :
Skip to content
.q-grad alias of .grad-text — output of qet_grad():
word
.q-hero-media home hero video stage (sits in .hero-bento beside
.tile-main; spans cols 3/-1 rows 1/3, stacks on mobile):
JS boots the video (adds .is-playing); no JS = poster only.
.q-page-hero inner-page hero bento pair (text tile + image tile):
.q-avatar-float mascot cutout accent (bob animation, gated):
sizes: .q-avatar-sm 120px · .q-avatar-md 200px ·
.q-avatar-lg 300px (width; height stays auto)
.q-form forms (contact / apply):
error state: add .has-error to the .q-field
success tile:
.q-roles careers roles list:
empty state: …
.q-topics contact topics grid with response-time chips:
.q-legal legal page typography:
…
.q-langs language switcher (3 pills; also used inside .site-nav —
.lang-pills/.lang from the demo still work identically):
.q-404 404 page:
.q-decor/.q-blob decorative blobs — ALWAYS inside the overflow:hidden
wrapper (RTL scrollWidth rule):
…
(.q-decor is absolutely positioned inset:0 inside any
position:relative parent, e.g. a .tile)
========================================================================== */
/* ----------------------------------------------------------------------------
1) TOKENS
--------------------------------------------------------------------------*/
:root {
--bg: #F7F8FB;
--surface: #fff;
--ink: #111827;
--muted: #6B7280;
--line: #E9EAF2;
--indigo: #6366F1;
--pink: #EC4899;
--amber: #F59E0B;
--cyan: #06B6D4;
--lav: #EEF2FF;
--peach: #FFF7ED;
--rose: #FDF2F8;
--ice: #ECFEFF;
--grad: linear-gradient(90deg, var(--indigo), var(--pink), var(--amber));
--radius: 22px;
--gap: 24px;
--shadow-soft: 0 20px 60px rgba(17, 24, 39, .08);
--shadow-lift: 0 28px 72px rgba(17, 24, 39, .13);
--sp-1: 8px;
--sp-2: 12px;
--sp-3: 16px;
--sp-4: 24px;
--sp-5: 40px;
--sp-6: 64px;
--sp-7: 104px;
/* Language-aware font pair — flipped by html[dir=rtl] below. */
--q-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--q-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Demo aliases so ported rules keep working. */
--font-display: var(--q-font-display);
--font-body: var(--q-font-body);
/* Negative tracking looks broken in Arabic — zeroed under [dir=rtl]. */
--q-track-tight: -0.03em;
--q-track-wide: .14em;
}
html[dir="rtl"] {
--q-font-display: "Alexandria", "Readex Pro", system-ui, sans-serif;
--q-font-body: "Readex Pro", system-ui, sans-serif;
--q-track-tight: 0em;
--q-track-wide: 0em;
}
/* ----------------------------------------------------------------------------
2) BASE
--------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--q-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Defensive belt for RTL: `clip` (not `hidden`) so position:sticky keeps
working. Primary protection is still the .q-decor overflow wrappers. */
overflow-x: clip;
}
/* Arabic script needs more vertical air. */
html[dir="rtl"] body { line-height: 1.8; }
h1, h2, h3, h4 {
font-family: var(--q-font-display);
line-height: 1.12;
letter-spacing: var(--q-track-tight);
margin: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 { line-height: 1.35; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
.container {
max-width: 1180px;
margin-inline: auto;
padding-inline: 24px;
}
section[id] { scroll-margin-block-start: 96px; }
:focus-visible {
outline: 3px solid rgba(99, 102, 241, .55);
outline-offset: 3px;
border-radius: 8px;
}
::selection { background: rgba(99, 102, 241, .18); }
/* Skip link — visually offscreen until keyboard-focused. */
.q-skip-link {
position: absolute;
inset-block-start: -80px;
inset-inline-start: 14px;
z-index: 200;
background: var(--ink);
color: #fff;
font-weight: 600;
font-size: .9rem;
padding: .7rem 1.2rem;
border-radius: 12px;
transition: inset-block-start .2s ease;
}
.q-skip-link:focus-visible { inset-block-start: 14px; }
/* ----------------------------------------------------------------------------
3) GRADIENT TEXT (.grad-text = demo, .q-grad = qet_grad() output)
--------------------------------------------------------------------------*/
.grad-text,
.q-grad {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ----------------------------------------------------------------------------
4) BUTTONS
--------------------------------------------------------------------------*/
.btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .9rem 1.65rem;
border-radius: 999px;
font-family: var(--q-font-body);
font-size: .95rem;
font-weight: 600;
line-height: 1;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-violet { background: var(--indigo); color: #fff; }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 6px 22px rgba(17, 24, 39, .10); }
.btn-sm { padding: .68rem 1.25rem; font-size: .88rem; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
@media (hover: hover) {
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(17, 24, 39, .18); }
.btn-violet:hover { background: #575af0; }
}
/* Directional glyphs (→ / ↗) inside buttons, chips, role rows mirror in RTL. */
html[dir="rtl"] .btn [aria-hidden="true"],
html[dir="rtl"] .link-chip [aria-hidden="true"],
html[dir="rtl"] .q-role-arrow {
display: inline-block;
transform: scaleX(-1);
}
/* ----------------------------------------------------------------------------
5) HEADER + NAV + LANGUAGE PILLS
--------------------------------------------------------------------------*/
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(247, 248, 251, .82);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled {
background: rgba(255, 255, 255, .88);
box-shadow: 0 10px 34px rgba(17, 24, 39, .08);
}
.header-inner {
display: flex;
align-items: center;
gap: var(--sp-4);
height: 72px;
}
.logo {
font-family: var(--q-font-display);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: var(--q-track-tight);
display: inline-flex;
align-items: baseline;
color: var(--ink);
}
.logo-mark {
align-self: center;
inline-size: 28px;
block-size: 28px;
margin-inline-end: 8px;
}
.logo-dot {
width: 9px;
height: 9px;
margin-inline-start: 4px;
border-radius: 50%;
background: var(--grad);
transform: translateY(-1px);
}
.site-nav {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--sp-4);
}
.nav-link {
font-size: .93rem;
font-weight: 500;
color: var(--muted);
padding: .35rem .15rem;
transition: color .2s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Language switcher — .q-langs/.q-lang (new) and .lang-pills/.lang (demo)
share one style. Latin-only pills keep Inter even on Arabic pages. */
.lang-pills,
.q-langs {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
}
.lang,
.q-lang,
.q-langs a {
font-size: .74rem;
font-weight: 600;
letter-spacing: .04em;
padding: .3rem .6rem;
border-radius: 999px;
color: var(--muted);
white-space: nowrap;
transition: color .2s ease, background-color .2s ease;
}
.lang:hover, .q-lang:hover, .q-langs a:hover { color: var(--ink); }
.lang.is-active, .q-lang.is-active, .q-langs a.is-active { background: var(--ink); color: #fff; }
/* Hamburger */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
margin-inline-start: auto;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
}
.nav-toggle .bar {
display: block;
height: 2px;
border-radius: 2px;
background: var(--ink);
transition: transform .3s ease, opacity .3s ease;
}
.menu-open .nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ----------------------------------------------------------------------------
6) BACKGROUND + TILE DECOR (all overflow-safe for RTL)
--------------------------------------------------------------------------*/
main { position: relative; }
/* Page-top radial washes — inset:0 so nothing extends scrollWidth. */
.bg-decor {
position: absolute;
inset: 0 0 auto 0;
height: 860px;
pointer-events: none;
z-index: 0;
overflow: hidden;
background:
radial-gradient(440px 340px at 6% 2%, rgba(99, 102, 241, .10), transparent 70%),
radial-gradient(440px 340px at 94% 8%, rgba(236, 72, 153, .09), transparent 70%),
radial-gradient(380px 320px at 68% 42%, rgba(245, 158, 11, .07), transparent 70%);
}
.bg-decor::after {
content: "";
position: absolute;
inset-block-start: 96px;
inset-inline-end: 4%;
width: 250px;
height: 170px;
opacity: .5;
background-image: radial-gradient(rgba(17, 24, 39, .12) 1.5px, transparent 1.5px);
background-size: 16px 16px;
}
/* Inner pages: let whitespace and type carry the section — decor stays
home-only at full strength, elsewhere it fades to a whisper. */
body:not(.home) .bg-decor { opacity: .45; height: 520px; }
body:not(.home) .bg-decor::after { display: none; }
/* Blob nest — REQUIRED wrapper for any decorative shape with negative
offsets (Chromium extends scrollWidth on the inline-end side in RTL). */
.q-decor {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.q-blob {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(60px);
opacity: .5;
}
.q-blob-indigo { background: rgba(99, 102, 241, .35); inset-block-start: -120px; inset-inline-end: -100px; }
.q-blob-pink { background: rgba(236, 72, 153, .30); inset-block-end: -140px; inset-inline-start: -110px; }
.q-blob-amber { background: rgba(245, 158, 11, .28); inset-block-end: -120px; inset-inline-end: -90px; }
.q-blob-cyan { background: rgba(6, 182, 212, .28); inset-block-start: -110px; inset-inline-start: -90px; }
.hero, .stats, .section { position: relative; z-index: 1; }
/* ----------------------------------------------------------------------------
7) BENTO BASE
--------------------------------------------------------------------------*/
.bento { display: grid; gap: var(--gap); }
.tile {
position: relative;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-soft);
transition: transform .32s ease, box-shadow .32s ease;
}
/* Spotlight overlay — --mx / --my driven by main.js (pointer-fine only). */
.tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, .12), transparent 65%);
}
.tile-grad::after,
.tile-remote::after,
.cta-tile::after {
background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 65%);
}
@media (hover: hover) and (pointer: fine) {
.tile:hover::after { opacity: 1; }
.bento .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
/* Pastel fills */
.fill-lav { background: var(--lav); border-color: #E2E8FA; }
.fill-peach { background: var(--peach); border-color: #F8ECDB; }
.fill-rose { background: var(--rose); border-color: #F9E3EF; }
.fill-ice { background: var(--ice); border-color: #D9F3F7; }
/* Column spans (6-col sections) */
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
/* ----------------------------------------------------------------------------
8) HOME HERO BENTO (+ .q-hero-media video stage)
--------------------------------------------------------------------------*/
.hero { padding-block-start: var(--sp-5); }
.hero-bento {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(178px, auto);
}
.tile-main {
grid-column: 1 / 3;
grid-row: 1 / 3;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-3);
}
.hero-title {
font-size: clamp(2.15rem, 1.05rem + 2.45vw, 2.95rem);
font-weight: 800;
}
.hero-sub {
color: var(--muted);
font-size: 1.02rem;
max-width: 46ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-block-start: var(--sp-1);
}
.chip-text { display: flex; flex-direction: column; line-height: 1.3; }
.chip-text strong { font-size: .84rem; font-weight: 700; }
.chip-text small { font-size: .76rem; color: var(--muted); }
.chip-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
}
.chip-icon svg { width: 20px; height: 20px; }
.chip-indigo { background: var(--lav); color: var(--indigo); }
.chip-pink { background: var(--rose); color: var(--pink); }
.chip-amber { background: var(--peach); color: var(--amber); }
.chip-cyan { background: var(--ice); color: var(--cyan); }
/* --- Hero video stage --------------------------------------------------- */
/* Rounded tile; poster ![]()
renders always (and is all non-JS/saveData/
reduced-motion users get); 
