/* The Shopify Health Check — brand tokens. * For now this file holds CSS variables only. The quiz UI styles come later. * * Source of truth: Haya's consultation call-card. The brand colors and fonts * below are copied exactly from that card's :root. Do not drift from these. */ :root { /* ---- Brand colors (exact, from the call-card) ---- */ --ink: #1F2430; /* primary text / dark navy-charcoal */ --ink-soft: #5A6072; /* muted/secondary text */ --gold: #C0A062; /* gold accent */ --gold-deep: #A8884A; /* deeper gold — hovers, emphasis */ --paper: #FCFBF7; /* cream / paper background */ --line: #D8D2C4; /* borders */ --rule: #E7E2D6; /* lighter hairline / dividers */ /* ---- Semantic roles (mapped to the brand tokens above) ---- */ --bg: var(--paper); /* page background — cream */ --surface: var(--paper); /* panels sit on the same paper */ --text: var(--ink); /* primary text */ --text-muted: var(--ink-soft); --accent: var(--gold); --accent-hover: var(--gold-deep); --accent-ink: var(--paper); /* text sitting on a gold fill */ --border: var(--line); --hairline: var(--rule); /* ---- Typography (Google Fonts: Fraunces, Outfit, Tajawal) ---- */ --font-heading: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "Tajawal", system-ui, sans-serif; /* used by the RTL build */ /* ---- Spacing scale (mobile-first) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- Radii & shadows ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow: 0 10px 30px rgba(31, 36, 48, 0.10); /* soft, tinted with --ink */ /* ---- Layout ---- */ --content-max: 640px; /* narrow, mobile-first reading column */ } /* ========================================================================== Quiz UI — mobile-first. Everything below styles the screens rendered by quiz.js into #app. Brand tokens above are the single source of truth. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* RTL build sets ; swap body font to the Arabic face. */ html[dir="rtl"] body { font-family: var(--font-arabic); } #app { max-width: var(--content-max); margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: var(--space-5) var(--space-4) var(--space-7); display: flex; flex-direction: column; } /* Each screen fills the column and centers its content vertically. */ .screen { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); animation: fade 0.25s ease both; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .screen { animation: none; } } /* ---- Typography ---- */ .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; color: var(--gold-deep); margin: 0; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; line-height: 1.15; } h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); } h2 { font-size: clamp(1.5rem, 6vw, 2rem); } .lead { font-size: 1.1rem; color: var(--text); margin: 0; } .muted { color: var(--text-muted); } .fineprint { font-size: 0.85rem; color: var(--text-muted); } /* ---- Buttons ---- */ .btn { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn:active { transform: translateY(1px); } .btn--block { display: block; width: 100%; } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn--ghost:hover { background: transparent; border-color: var(--ink-soft); color: var(--ink); } /* Visible focus for keyboard users everywhere. */ :focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: var(--radius-sm); } /* Headings receive programmatic focus on screen change; hide the ring there. */ [tabindex="-1"]:focus { outline: none; } /* ---- Progress ---- */ .progress { display: flex; flex-direction: column; gap: var(--space-2); } .progress__meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); } .progress__bar { height: 6px; background: var(--hairline); border-radius: 999px; overflow: hidden; } .progress__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; } /* ---- Question screen ---- */ .q-pillar { color: var(--gold-deep); } .q-text { font-size: clamp(1.3rem, 5.5vw, 1.7rem); } .options { display: flex; flex-direction: column; gap: var(--space-3); } .option { font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; text-align: start; background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); cursor: pointer; min-height: 60px; /* large tap target */ display: flex; align-items: center; gap: var(--space-3); transition: border-color 0.12s ease, background 0.12s ease; } .option:hover { border-color: var(--gold); } .option__key { font-size: 0.8rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 7px; margin-inline-start: auto; } .option[aria-pressed="true"] { border-color: var(--accent); background: rgba(192, 160, 98, 0.12); } .option[aria-pressed="true"] .option__key { border-color: var(--gold); color: var(--gold-deep); } .nav-row { display: flex; align-items: center; gap: var(--space-3); } /* ---- Email gate ---- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-weight: 600; } .input { font-family: var(--font-body); font-size: 1.05rem; padding: var(--space-4); border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--ink); width: 100%; } .input:focus { border-color: var(--gold); } .input[aria-invalid="true"] { border-color: #b00020; } .error { color: #b00020; font-size: 0.9rem; min-height: 1.2em; } /* ---- Result screen ---- */ .score-hero { text-align: center; } .score-hero .num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.2rem, 18vw, 5rem); line-height: 1; color: var(--ink); } .score-hero .num span { color: var(--gold-deep); } .score-hero .of { color: var(--text-muted); font-size: 1rem; } .tier-headline { font-size: clamp(1.5rem, 6vw, 2rem); } .pillar-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); } .pillar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); } .pillar-row__name { font-weight: 500; } .pillar-row__score { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; } .pillar-row--weak .pillar-row__name { color: var(--gold-deep); font-weight: 600; } .pillar-row__bars { display: inline-flex; gap: 3px; margin-inline-start: var(--space-3); vertical-align: middle; } .pip { width: 10px; height: 10px; border-radius: 2px; background: var(--hairline); } .pip--on { background: var(--accent); } .weak-callout { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } .weak-callout .eyebrow { margin-bottom: var(--space-2); } .weak-callout h3 { font-size: 1.25rem; margin-bottom: var(--space-2); } .cta-wrap { margin-top: var(--space-3); } .author-line { text-align: center; color: var(--text-muted); font-size: 0.9rem; } /* ---- Shopify Partner attribution (intro + result screens) ---------------- A small, subordinate trust mark: Shopify logo + "Shopify Partner". Flexbox + logical spacing mirror it automatically under . The logo is the untouched monochrome PNG — never tinted, filtered, rotated, stacked, or stretched. */ .attribution { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); font-size: 0.85rem; color: var(--text-muted); } .sp-lockup { display: inline-flex; align-items: center; gap: var(--space-2); /* clear space around the logo, ~= the height of the bag */ padding: 6px var(--space-2); } .sp-logo { width: 84px; /* >= 80px minimum */ height: auto; display: block; flex-shrink: 0; } .sp-lockup__text { /* Pin LTR so "Shopify" stays left of the partner word in both languages (EN "Shopify Partner", AR "شريك Shopify" → Shopify left, شريك right). */ direction: ltr; font-family: var(--font-body); /* Outfit */ font-weight: 500; font-size: 0.9rem; line-height: 1; white-space: nowrap; color: var(--ink); }