/* ============================================================================= SIMAH × Saudi National Day 96 — "What's your shopping personality?" Design system + screens. No build step: plain CSS, logical properties so the entire layout mirrors cleanly between Arabic (RTL) and English (LTR). ============================================================================= */ /* ── 1. Brand tokens ──────────────────────────────────────────────────── */ :root { /* Saudi National Day 96 palette (sampled from SND-GUIDELINE.pdf §3.1) */ --snd-deep: #002628; --snd-deep-2: #00343A; --snd-ink: #02242A; /* checkerboard dark */ --snd-green: #00894A; /* primary green */ --snd-green-dk: #015335; --snd-green-bright:#0BB81C; --snd-lime: #5ABA1C; --snd-lime-t: #8BDC46; --snd-blue: #0050AF; --snd-blue-t: #277BD7; --snd-magenta: #971A4D; --snd-magenta-t: #CB3777; --snd-violet: #6565E0; --snd-violet-t: #A3A0EC; --snd-gold: #7C5D21; --snd-gold-t: #B29155; --snd-olive: #607C4F; --snd-sand: #E4E0C4; /* SIMAH brand (Brand Identity Guideline v3 §Color palette) */ --simah-navy: #01426A; --simah-blue: #256BA2; --simah-cyan: #5FC6D2; --simah-neon: #00FFC2; --simah-black: #111821; /* Semantic */ --bg: var(--snd-deep); --surface: rgba(0, 52, 58, .55); --surface-2: rgba(2, 36, 42, .78); --line: rgba(95, 198, 210, .18); --line-strong: rgba(95, 198, 210, .40); --text: #EAF4F2; --text-dim: rgba(234, 244, 242, .68); --text-faint: rgba(234, 244, 242, .42); --accent: var(--simah-cyan); --accent-ink: #00242B; /* Type */ --font-ar: 'Saudi Font', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --font-en: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font: var(--font-ar); /* Rhythm */ --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --gutter: clamp(16px, 4vw, 40px); --maxw: 1120px; --ease: cubic-bezier(.22, .68, .28, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Live persona accent — overwritten by JS on the result screen */ --p-base: var(--snd-green); --p-tint: var(--snd-lime-t); --p-glow: rgba(139, 220, 70, .4); } html[lang="en"] { --font: var(--font-en); } /* Drop-in hooks for the official typefaces (see assets/fonts/README.txt). Until the files are supplied, IBM Plex — the SND secondary typeface — is used, which is the sanctioned fallback. */ @font-face { font-family: 'Saudi Font'; src: url('../fonts/SaudiFont-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Saudi Font'; src: url('../fonts/SaudiFont-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ── 2. Reset / base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x on alone propagates to the viewport and stops clipping, so the question-card slide animation could expose a sideways scroll. `clip` contains it without creating a scroll container (sticky still works); `hidden` is the fallback for older Safari. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { margin: 0; min-height: 100svh; font-family: var(--font); font-size: clamp(15px, .55vw + 13.6px, 17px); line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; overflow-x: clip; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Deep-green ground with a soft top-light, echoing the guideline covers. */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: radial-gradient(120% 80% at 50% -10%, rgba(0, 137, 74, .22), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(1, 66, 106, .28), transparent 65%), linear-gradient(180deg, #002B2E 0%, var(--snd-deep) 45%, #001C1F 100%); } /* The SND checkerboard, dialled all the way down to a texture. */ body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(45deg, rgba(0,137,74,.05) 25%, transparent 25%, transparent 75%, rgba(0,137,74,.05) 75%), linear-gradient(45deg, rgba(0,137,74,.05) 25%, transparent 25%, transparent 75%, rgba(0,137,74,.05) 75%); background-size: 56px 56px; background-position: 0 0, 28px 28px; opacity: .55; mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%); } img, svg, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; } h1, h2, h3, p, figure, blockquote, ul { margin: 0; } ul { padding: 0; list-style: none; } ::selection { background: var(--snd-lime); color: #05201A; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .skip-link { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--snd-green); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 0; } /* ── 3. Ambient layers ────────────────────────────────────────────────── */ #stars { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .9; } .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ambient__rosette { position: absolute; inset-inline-end: clamp(-360px, -22vw, -120px); top: 50%; width: clamp(360px, 62vw, 880px); aspect-ratio: 1; transform: translateY(-50%); background: url('../img/rosette.png') center / contain no-repeat; opacity: .05; filter: saturate(.35); /* soften the hard circular edge so it reads as texture, not a disc */ mask-image: radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,.35) 60%, transparent 76%); animation: spin 190s linear infinite; } .ambient__sadu { position: absolute; top: 0; bottom: 0; width: clamp(48px, 7vw, 110px); background: url('../img/pattern-sadu-dark.png') top center / 100% auto repeat-y; opacity: .30; } .ambient__sadu--start { inset-inline-start: 0; mask-image: linear-gradient(90deg, #000 0%, transparent 100%); } .ambient__sadu--end { inset-inline-end: 0; mask-image: linear-gradient(270deg, #000 0%, transparent 100%); } [dir="rtl"] .ambient__sadu--start { mask-image: linear-gradient(270deg, #000 0%, transparent 100%); } [dir="rtl"] .ambient__sadu--end { mask-image: linear-gradient(90deg, #000 0%, transparent 100%); } .ambient__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; transition: background 1.2s var(--ease); } .ambient__glow--a { width: 44vmax; height: 44vmax; top: -16vmax; inset-inline-start: -10vmax; background: radial-gradient(circle, var(--p-base), transparent 66%); animation: drift 26s ease-in-out infinite alternate; } .ambient__glow--b { width: 38vmax; height: 38vmax; bottom: -16vmax; inset-inline-end: -8vmax; background: radial-gradient(circle, var(--simah-blue), transparent 66%); animation: drift 34s ease-in-out infinite alternate-reverse; } #confetti { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } @keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vmax,3vmax,0) scale(1.14); } } /* Woven Sadu ribbon — the guideline uses these bands as edge decoration. */ .ribbon { height: 7px; background: url('../img/ribbon-sadu.png') center / auto 100% repeat-x; image-rendering: pixelated; } .ribbon--top { position: sticky; top: 0; z-index: 61; box-shadow: 0 2px 14px rgba(0, 0, 0, .5); } .ribbon--foot { opacity: .8; } /* ── 4. Header ────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 7px; z-index: 60; padding: clamp(10px, 1.6vw, 18px) var(--gutter); background: linear-gradient(180deg, rgba(0,26,29,.92), rgba(0,26,29,.55) 70%, transparent); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); } .topbar__inner { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 2vw, 24px); /* Logos stay physically placed (SND left / SIMAH right) in both languages. */ direction: ltr; } .topbar__hairline { max-width: var(--maxw); margin: clamp(8px,1.4vw,14px) auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; } .lockup--snd { justify-self: start; } .lockup--simah { justify-self: end; } .lockup__wordmark { width: auto; height: clamp(26px, 3.1vw, 38px); opacity: .96; } .lockup__rule { width: 1px; height: clamp(26px, 3.1vw, 38px); background: rgba(255,255,255,.34); } .lockup__badge { width: auto; height: clamp(30px, 3.6vw, 44px); border-radius: 3px; } .lockup__simah { width: auto; height: clamp(28px, 3.3vw, 40px); } .lang-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; background: rgba(95,198,210,.10); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); cursor: pointer; font-size: .82rem; font-weight: 600; letter-spacing: .02em; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); white-space: nowrap; } .lang-toggle:hover { background: rgba(95,198,210,.2); border-color: var(--accent); transform: translateY(-1px); } .lang-toggle__globe { width: 17px; height: 17px; color: var(--accent); } .lang-toggle__globe svg { width: 100%; height: 100%; } /* ── 5. Stage & screens ───────────────────────────────────────────────── */ .stage { flex: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(18px, 4vw, 48px) var(--gutter) clamp(32px, 6vw, 72px); display: grid; } .screen { grid-area: 1 / 1; } .screen[hidden] { display: none; } .screen--intro.is-active .reveal, .screen--result.is-active .rv { animation: rise .8s var(--ease-out) both; } .reveal[data-reveal="1"] { animation-delay: .05s; } .reveal[data-reveal="2"] { animation-delay: .13s; } .reveal[data-reveal="3"] { animation-delay: .21s; } .reveal[data-reveal="4"] { animation-delay: .29s; } .reveal[data-reveal="5"] { animation-delay: .37s; } .reveal[data-reveal="6"] { animation-delay: .45s; } .reveal[data-reveal="7"] { animation-delay: .55s; } .reveal[data-reveal="8"] { animation-delay: .63s; } @keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } /* ── 6. Intro ─────────────────────────────────────────────────────────── */ .intro { max-width: 800px; margin-inline: auto; text-align: center; padding-block: clamp(8px, 3vw, 40px); } .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--snd-lime-t); background: rgba(90,186,28,.10); border: 1px solid rgba(139,220,70,.28); border-radius: 999px; } .kicker__dot { width: 7px; height: 7px; border-radius: 2px; background: var(--snd-lime); box-shadow: 0 0 12px var(--snd-lime); animation: blink 2.6s var(--ease) infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .intro__title { margin-block: clamp(16px, 2.6vw, 26px) 0; font-size: clamp(2.1rem, 6.4vw, 4.1rem); font-weight: 700; line-height: 1.16; letter-spacing: -.01em; background: linear-gradient(170deg, #FFFFFF 12%, #CFEFE6 52%, var(--snd-lime-t) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; } html[lang="en"] .intro__title { letter-spacing: -.02em; } .intro__subtitle { margin-top: 14px; font-size: clamp(1rem, 2.2vw, 1.22rem); color: var(--text-dim); text-wrap: balance; } .intro__chips { margin-top: clamp(20px, 3vw, 30px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; font-size: .85rem; font-weight: 500; border-radius: 999px; border: 1px solid; background: rgba(255,255,255,.03); transition: transform .3s var(--ease), background .3s var(--ease); } .chip:hover { transform: translateY(-2px); } .chip i { width: 9px; height: 9px; border-radius: 2px; display: block; } .chip--opp { border-color: rgba(203,55,119,.4); color: #F0AFC9; } .chip--opp i { background: var(--snd-magenta-t); box-shadow: 0 0 10px var(--snd-magenta-t); } .chip--ent { border-color: rgba(163,160,236,.4); color: #C9C7F5; } .chip--ent i { background: var(--snd-violet-t); box-shadow: 0 0 10px var(--snd-violet-t); } .chip--hun { border-color: rgba(139,220,70,.4); color: #C6EFA1; } .chip--hun i { background: var(--snd-lime-t); box-shadow: 0 0 10px var(--snd-lime-t); } .intro__blurb { margin-top: clamp(18px, 2.6vw, 26px); font-size: 1.02rem; color: var(--text-dim); } /* name capture */ .namebox { margin-top: clamp(24px, 3.6vw, 38px); text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 2.6vw, 28px); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); position: relative; overflow: hidden; } /* pixel-checker flourish, straight from the SND logo frame */ .namebox::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 120px; height: 44px; opacity: .5; background-image: linear-gradient(45deg, var(--snd-green) 25%, transparent 25%, transparent 75%, var(--snd-green) 75%), linear-gradient(45deg, var(--snd-green) 25%, transparent 25%, transparent 75%, var(--snd-green) 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; mask-image: linear-gradient(225deg, #000, transparent 72%); pointer-events: none; } [dir="rtl"] .namebox::before { mask-image: linear-gradient(135deg, #000, transparent 72%); } .namebox__label { display: block; margin-bottom: 9px; font-size: .82rem; font-weight: 600; letter-spacing: .05em; color: var(--accent); text-transform: uppercase; } html[lang="ar"] .namebox__label { text-transform: none; letter-spacing: .01em; font-size: .9rem; } .namebox__row { display: flex; gap: 10px; flex-wrap: wrap; } .namebox__input { flex: 1 1 220px; min-width: 0; padding: 15px 18px; font: inherit; font-size: 1.05rem; color: var(--text); background: rgba(0,20,23,.6); border: 1px solid var(--line-strong); border-radius: 14px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .namebox__input::placeholder { color: var(--text-faint); } .namebox__input:focus { outline: none; border-color: var(--accent); background: rgba(0,26,30,.85); box-shadow: 0 0 0 4px rgba(95,198,210,.14); } .namebox__input.is-invalid { border-color: var(--snd-magenta-t); box-shadow: 0 0 0 4px rgba(203,55,119,.16); } .namebox__go { flex: 0 0 auto; } .namebox__hint { margin-top: 12px; font-size: .84rem; color: var(--text-faint); } .namebox__error { margin-top: 10px; font-size: .88rem; color: #F2A0BE; font-weight: 500; } .intro__tease { margin-top: clamp(22px, 3vw, 30px); font-size: clamp(1.02rem, 2.3vw, 1.3rem); font-weight: 600; font-style: italic; color: var(--snd-lime-t); text-wrap: balance; } html[lang="ar"] .intro__tease { font-style: normal; } .intro__meta { margin-top: 10px; font-size: .82rem; color: var(--text-faint); letter-spacing: .03em; } /* ── 7. Buttons ───────────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border: 1px solid transparent; border-radius: 14px; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), opacity .2s; overflow: hidden; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px) scale(.99); } .btn[disabled] { opacity: .42; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn__arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); flex: none; } [dir="rtl"] .btn__arrow { transform: scaleX(-1); } .btn:not([disabled]):hover .btn__arrow { transform: translateX(3px); } [dir="rtl"] .btn:not([disabled]):hover .btn__arrow { transform: scaleX(-1) translateX(3px); } .btn--primary { color: #01201B; background: linear-gradient(135deg, var(--snd-lime-t), var(--snd-green) 78%); box-shadow: 0 14px 34px -14px rgba(90,186,28,.7), inset 0 1px 0 rgba(255,255,255,.35); } .btn--primary:not([disabled]):hover { box-shadow: 0 20px 44px -14px rgba(90,186,28,.85), inset 0 1px 0 rgba(255,255,255,.45); transform: translateY(-2px); } .btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 48%, transparent 66%); transform: translateX(-130%); transition: transform .75s var(--ease); } .btn--primary:not([disabled]):hover::after { transform: translateX(130%); } .btn--outline { background: rgba(95,198,210,.08); border-color: var(--line-strong); color: var(--text); } .btn--outline:hover { background: rgba(95,198,210,.18); border-color: var(--accent); transform: translateY(-2px); } .btn--ghost { background: transparent; border-color: rgba(255,255,255,.14); color: var(--text-dim); } .btn--ghost:hover { color: var(--text); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04); } /* ── 8. Quiz ──────────────────────────────────────────────────────────── */ .quiz { max-width: 860px; margin-inline: auto; width: 100%; } .quiz__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 3vw, 30px); } .quiz__counter { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; flex: none; } .quiz__counter-num { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--snd-lime-t); line-height: 1; } .quiz__counter-sep { color: var(--text-faint); font-size: 1.1rem; } .quiz__counter-total { color: var(--text-faint); font-size: 1.05rem; } .segbar { display: flex; gap: 5px; flex: 1; height: 8px; } .seg { flex: 1; border-radius: 3px; background: rgba(255,255,255,.09); transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); } .seg.is-done { background: var(--snd-green); } .seg.is-current { background: var(--snd-lime-t); box-shadow: 0 0 14px rgba(139,220,70,.7); transform: scaleY(1.7); } .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.4vw, 40px); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05); position: relative; overflow: hidden; } .qcard::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--snd-green), var(--snd-lime-t), transparent); opacity: .8; } .qcard.is-leaving { animation: slideOut .28s var(--ease) forwards; } .qcard.is-entering { animation: slideIn .42s var(--ease-out) both; } .qcard.is-leaving-back { animation: slideOutBack .28s var(--ease) forwards; } .qcard.is-entering-back { animation: slideInBack .42s var(--ease-out) both; } @keyframes slideOut { to { opacity: 0; transform: translateX(-28px) scale(.98); } } @keyframes slideIn { from { opacity: 0; transform: translateX(34px) scale(.98); } } @keyframes slideOutBack { to { opacity: 0; transform: translateX(28px) scale(.98); } } @keyframes slideInBack { from { opacity: 0; transform: translateX(-34px) scale(.98); } } [dir="rtl"] .qcard.is-leaving { animation-name: slideOutBack; } [dir="rtl"] .qcard.is-entering { animation-name: slideInBack; } [dir="rtl"] .qcard.is-leaving-back { animation-name: slideOut; } [dir="rtl"] .qcard.is-entering-back { animation-name: slideIn; } .qcard__index { font-size: .8rem; font-weight: 600; letter-spacing: .07em; color: var(--accent); margin-bottom: 12px; } .qcard__text { font-size: clamp(1.22rem, 3.1vw, 1.72rem); font-weight: 600; line-height: 1.5; text-wrap: pretty; } .qcard__options { margin-top: clamp(20px, 3vw, 30px); display: grid; gap: 11px; } .qcard__hint { margin-top: 18px; font-size: .82rem; color: var(--text-faint); } .opt { --opt-accent: var(--snd-lime-t); position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: start; padding: 16px 18px; background: rgba(0, 24, 27, .5); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); cursor: pointer; transition: transform .22s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); animation: optIn .42s var(--ease-out) both; -webkit-tap-highlight-color: transparent; } .opt:nth-child(1) { animation-delay: .06s; } .opt:nth-child(2) { animation-delay: .12s; } .opt:nth-child(3) { animation-delay: .18s; } @keyframes optIn { from { opacity: 0; transform: translateY(14px); } } .opt:hover { border-color: rgba(95,198,210,.5); background: rgba(0, 38, 44, .72); transform: translateY(-2px); } .opt.is-selected { border-color: var(--opt-accent); background: linear-gradient(120deg, rgba(139,220,70,.14), rgba(0,137,74,.10)); box-shadow: 0 0 0 1px var(--opt-accent), 0 16px 40px -22px var(--opt-accent); } .opt__key { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-weight: 700; font-size: .9rem; color: var(--text-dim); transition: all .25s var(--ease); font-variant-numeric: tabular-nums; } .opt.is-selected .opt__key { background: var(--opt-accent); border-color: var(--opt-accent); color: #05200E; box-shadow: 0 0 16px var(--opt-accent); } .opt__text { flex: 1; font-size: 1rem; line-height: 1.55; padding-top: 4px; } .opt__tick { flex: none; width: 20px; height: 20px; margin-top: 8px; opacity: 0; transform: scale(.5); transition: all .3s var(--ease-out); color: var(--opt-accent); } .opt.is-selected .opt__tick { opacity: 1; transform: scale(1); } .quiz__nav { margin-top: clamp(18px, 2.6vw, 26px); display: flex; justify-content: space-between; gap: 12px; } .quiz__nav .btn--ghost[hidden] { visibility: hidden; display: inline-flex; } /* ── 9. Computing screen ──────────────────────────────────────────────── */ .loadwrap { min-height: 46svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; } .loader { position: relative; width: 116px; height: 116px; margin-bottom: 26px; } .loader__ring { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--snd-lime-t); border-inline-end-color: var(--snd-green); border-radius: 50%; animation: spin2 1.15s linear infinite; } .loader__ring--2 { inset: 16px; border-top-color: var(--simah-cyan); border-inline-end-color: transparent; border-inline-start-color: rgba(95,198,210,.35); animation: spin2 1.7s linear infinite reverse; } .loader__core { position: absolute; inset: 40px; border-radius: 6px; background: linear-gradient(45deg, var(--snd-green) 25%, transparent 25%, transparent 75%, var(--snd-green) 75%), linear-gradient(45deg, var(--snd-green) 25%, transparent 25%, transparent 75%, var(--snd-green) 75%), var(--snd-ink); background-size: 12px 12px; background-position: 0 0, 6px 6px; animation: pulse 1.5s var(--ease) infinite; } @keyframes spin2 { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } } .loadwrap__title { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 600; } .loadwrap__sub { color: var(--text-dim); font-size: .95rem; } .loadwrap__shuffle { margin-top: 16px; height: 30px; font-size: 1.05rem; font-weight: 700; color: var(--snd-lime-t); letter-spacing: .02em; } /* ── 10. Result ───────────────────────────────────────────────────────── */ .result { max-width: 780px; margin-inline: auto; width: 100%; text-align: center; } .result .rv { animation: rise .7s var(--ease-out) both; } .result .rv:nth-child(1) { animation-delay: .00s; } .result .rv:nth-child(2) { animation-delay: .08s; } .result .rv:nth-child(3) { animation-delay: .16s; } .result .rv:nth-child(4) { animation-delay: .30s; } .result .rv:nth-child(5) { animation-delay: .42s; } .result .rv:nth-child(6) { animation-delay: .52s; } .result .rv:nth-child(7) { animation-delay: .62s; } .result .rv:nth-child(8) { animation-delay: .72s; } .result .rv:nth-child(9) { animation-delay: .82s; } .result .rv:nth-child(10) { animation-delay: .92s; } .result .rv:nth-child(11) { animation-delay: 1.02s; } .result .rv:nth-child(12) { animation-delay: 1.12s; } .result__greeting { font-size: 1.02rem; color: var(--text-dim); } .result__youare { margin-top: 2px; font-size: .95rem; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; } html[lang="ar"] .result__youare { text-transform: none; letter-spacing: .04em; } .result__name { margin-top: 6px; font-size: clamp(2.3rem, 8vw, 4.4rem); font-weight: 700; line-height: 1.1; background: linear-gradient(165deg, #FFFFFF 5%, var(--p-tint) 65%, var(--p-base) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 34px var(--p-glow)); text-wrap: balance; } .result__quote { margin-top: clamp(20px, 3vw, 28px); padding: clamp(18px, 2.6vw, 26px); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); border-inline-start: 3px solid var(--p-tint); border-radius: var(--radius); text-align: start; } .result__quote-label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .1em; color: var(--p-tint); margin-bottom: 8px; text-transform: uppercase; } html[lang="ar"] .result__quote-label { text-transform: none; letter-spacing: .03em; font-size: .85rem; } .result__quote blockquote { font-size: clamp(1.14rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.5; } .result__desc { margin-top: clamp(20px, 3vw, 28px); font-size: clamp(1rem, 2.2vw, 1.1rem); color: var(--text-dim); text-align: start; line-height: 1.85; } .factgrid { margin-top: clamp(20px, 3vw, 26px); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .fact { text-align: start; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .fact__label { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-bottom: 6px; } html[lang="ar"] .fact__label { letter-spacing: .02em; font-size: .84rem; } .fact__value { font-size: .96rem; color: var(--text-dim); line-height: 1.6; } .warn { margin-top: 14px; text-align: start; padding: clamp(16px, 2.4vw, 22px); background: linear-gradient(135deg, rgba(151,26,77,.20), rgba(151,26,77,.06)); border: 1px solid rgba(203,55,119,.32); border-radius: var(--radius); } .warn__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #F4B4CD; font-size: .95rem; margin-bottom: 8px; } .warn__title::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--snd-magenta-t); box-shadow: 0 0 10px var(--snd-magenta-t); } .warn__body { color: var(--text-dim); line-height: 1.8; } .tips { margin-top: clamp(22px, 3vw, 30px); text-align: start; } .tips__title, .breakdown__title, .sharewrap__title { font-size: 1.06rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .tips__title::before, .breakdown__title::before, .sharewrap__title::before { content: ''; width: 18px; height: 10px; border-radius: 2px; flex: none; background-image: linear-gradient(45deg, var(--p-tint) 25%, transparent 25%, transparent 75%, var(--p-tint) 75%), linear-gradient(45deg, var(--p-tint) 25%, transparent 25%, transparent 75%, var(--p-tint) 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; } .tips__list { display: grid; gap: 10px; } .tips__list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-dim); line-height: 1.7; transition: border-color .25s var(--ease), transform .25s var(--ease); } .tips__list li:hover { border-color: var(--line-strong); transform: translateX(2px); } [dir="rtl"] .tips__list li:hover { transform: translateX(-2px); } .tips__list li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 10px; border-radius: 2px; background: var(--p-tint); box-shadow: 0 0 9px var(--p-glow); } .breakdown { margin-top: clamp(24px, 3.4vw, 34px); text-align: start; } .bars { display: grid; gap: 14px; } .bar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: .92rem; } .bar__name { font-weight: 600; } .bar__val { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: .85rem; } .bar__track { height: 11px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; } .bar__fill { display: block; /* it is a : width/height need a block box */ height: 100%; width: 0; border-radius: 6px; transition: width 1.05s var(--ease-out); box-shadow: 0 0 18px -2px currentColor; } .bar.is-top .bar__name { color: var(--p-tint); } .breakdown__hint { margin-top: 12px; font-size: .82rem; color: var(--text-faint); } .community { margin-top: clamp(20px, 3vw, 26px); padding: 16px 20px; text-align: start; background: linear-gradient(135deg, rgba(37,107,162,.22), rgba(1,66,106,.10)); border: 1px solid rgba(95,198,210,.26); border-radius: var(--radius); } .community__label { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .09em; color: var(--accent); margin-bottom: 5px; } html[lang="ar"] .community__label { letter-spacing: .02em; font-size: .84rem; } .community__line { font-size: 1rem; color: var(--text); } .sharewrap { margin-top: clamp(28px, 4vw, 40px); text-align: start; } .sharewrap__text { color: var(--text-dim); line-height: 1.8; margin-bottom: 18px; font-size: .98rem; } .sharecard-frame { position: relative; max-width: 340px; margin-inline: auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); background: var(--snd-deep-2); transition: transform .5s var(--ease); } .sharecard-frame:hover { transform: translateY(-4px) rotate(-.4deg); } .sharecard-frame canvas { width: 100%; height: auto; } .sharewrap__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .savestate { margin-top: 14px; font-size: .82rem; color: var(--text-faint); text-align: center; min-height: 1.2em; } .result__foot { margin-top: clamp(26px, 4vw, 40px); display: flex; justify-content: center; } /* ── 11. Footer / toast ───────────────────────────────────────────────── */ .footer { padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); background: rgba(0,20,23,.5); } .footer__inner { max-width: var(--maxw); margin-inline: auto; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--text-faint); } .footer__sep { opacity: .5; } .toast { position: fixed; inset-inline: 0; bottom: 26px; z-index: 120; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); padding: 12px 22px; background: rgba(2,36,42,.96); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: .9rem; font-weight: 500; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease-out); } .toast.is-on { opacity: 1; transform: none; } /* ── 12. Responsive ───────────────────────────────────────────────────── */ @media (max-width: 720px) { .topbar__inner { grid-template-columns: auto auto; grid-template-areas: 'snd simah' 'lang lang'; row-gap: 10px; } .lockup--snd { grid-area: snd; } .lockup--simah { grid-area: simah; } .lang-toggle { grid-area: lang; justify-self: center; } .lockup__wordmark, .lockup__rule { display: none; } .lockup__badge { height: 30px; } .lockup__simah { height: 26px; } .ambient__sadu { display: none; } .namebox__go { width: 100%; } .quiz__nav .btn { flex: 1; } .sharewrap__actions .btn { flex: 1 1 140px; } } @media (max-width: 400px) { .opt { padding: 14px; gap: 11px; } .opt__key { width: 30px; height: 30px; } .qcard__options { gap: 9px; } } @media (min-width: 1000px) { .result__quote { text-align: start; } } /* ── 13. Motion & print ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ambient__rosette, .ambient__glow { animation: none; } #stars, #confetti { display: none; } } @media print { .topbar, .footer, #stars, #confetti, .ambient, .sharewrap__actions, .result__foot { display: none !important; } body { background: #fff; color: #111; } }