/* ========================================================================== حسبة (Hasba) · site.css Design system: «ميزان» (Mizan). Calm, warm-neutral, liquid-glass cards. Sections: fonts · tokens · base · layout · header · buttons & badges · hero · about · features · steps · compare · faq · cta · footer · download page · 404 · legal · food · calculator ========================================================================== */ /* ---------- Fonts: IBM Plex Sans Arabic (OFL), self-hosted woff2 subsets ---------- */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/plex-arabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/plex-arabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/plex-arabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/plex-arabic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/plex-arabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/plex-arabic-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/plex-arabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/plex-arabic-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ /* Dark only, matching the app. Values come from the app's Mizan tokens (calorie-flutter-app/lib/core/design_system/tokens.dart, MizanColors.dark). */ :root { color-scheme: dark; --bg: #0F0F0E; --card: #1A1A18; /* paneTint */ --inset: #24241F; /* insetFill */ --text: #F5F3EE; --muted: rgb(245 243 238 / .45); /* Mizan muted: large or decorative text only */ --text-2: rgb(245 243 238 / .64); /* secondary body copy, keeps 4.5:1 contrast at small sizes */ --hairline: rgb(245 243 238 / .08); --hairline-strong: rgb(245 243 238 / .12); --ink: #F5F3EE; /* reserved for the download call to action */ --on-ink: #0F0F0E; --protein: #EF4444; --carbs: #9FB37E; --fat: #F59E0B; --water: #7FB3BF; --premium: #5CC98A; /* Glass "regular" tier: tint .84, border .085, lift .7 */ --glass: rgb(26 26 24 / .84); --glass-border: rgb(245 243 238 / .085); --glass-edge: rgb(245 243 238 / .06); --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 32px -14px rgb(0 0 0 / .55); /* Environment: two warm lights and a soft vignette, so the black never goes flat */ --light-a: rgb(90 80 64 / .20); /* #5A5040, high on the start edge */ --light-b: rgb(69 74 68 / .16); /* #454A44, low on the end edge */ --font: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; --radius-lg: 28px; --radius: 20px; --radius-sm: 12px; --wrap: 1120px; --gutter: 16px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; /* A warm grey thumb on the page colour, so desktop scrollbars match the brand. */ scrollbar-color: rgb(245 243 238 / .2) var(--bg); } /* Thumb brightens while the pointer is over the page, like the app's quiet hover states. */ html:hover { scrollbar-color: rgb(245 243 238 / .32) var(--bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); position: relative; isolation: isolate; color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70% 55% at 92% 4%, var(--light-a), transparent 72%), radial-gradient(65% 55% at 6% 92%, var(--light-b), transparent 72%), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgb(0 0 0 / .14)); } h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 600; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--card); color: var(--text); border: 1px solid var(--hairline-strong); } .skip-link:focus { top: 12px; } /* Latin words (iOS, Android, App Store) inside Arabic text */ .ltr { direction: ltr; unicode-bidi: isolate; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { :root { --gutter: 32px; } } .section { padding-block: 80px; } @media (min-width: 900px) { .section { padding-block: 128px; } } .section-head { max-width: 640px; margin-block-end: 36px; } .section-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); letter-spacing: -.01em; } .section-head p { margin-block-start: 12px; color: var(--text-2); } .card { background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow); } .glass { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); } .pill-premium { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--premium) 40%, transparent); background: color-mix(in srgb, var(--premium) 8%, transparent); font-size: .8125rem; font-weight: 500; line-height: 1.8; color: var(--text); } .pill-premium::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--premium); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-block-end: 1px solid var(--hairline); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.125rem; text-decoration: none; } .brand img { border-radius: 8px; } .site-nav { display: flex; gap: 4px; } .site-nav a { padding: 8px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: .9375rem; transition: color .15s, background-color .15s; } .site-nav a:hover { color: var(--text); background: var(--hairline); } .site-nav a[aria-current="page"] { color: var(--text); } @media (max-width: 860px) { .site-nav { display: none; } } /* ---------- Buttons & store badges ---------- */ /* The one ink-filled element on the page: the download call to action. */ .btn-ink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 500; font-size: .9375rem; text-decoration: none; transition: opacity .15s ease; } .btn-ink:hover { opacity: .88; } .btn-ink:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .badge { display: block; border-radius: 9px; line-height: 0; } .badge img { height: 48px; width: auto; } .badge:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } /* Visitors on Android see Google Play first (set by the tiny inline script). */ [data-platform="android"] .badge-play { order: -1; } /* ---------- Hero: promise and download on one side, the product on the other ---------- */ .hero { position: relative; overflow: clip; padding-block: 40px 72px; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; background: radial-gradient(40% 45% at 22% 40%, rgb(159 179 126 / .10), transparent 70%), radial-gradient(35% 40% at 30% 70%, rgb(245 158 11 / .07), transparent 70%); } .hero-grid { display: grid; gap: 48px; align-items: center; } @media (min-width: 960px) { .hero { padding-block: 72px 112px; } .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; } } .hero-copy { display: grid; justify-items: start; gap: 20px; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline-strong); font-size: .875rem; font-weight: 500; color: var(--text-2); } .hero-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--premium); } .hero h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1.2; letter-spacing: -.02em; } .hero .lead { max-width: 30em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.8; color: var(--text-2); } .hero .badges { margin-block-start: 8px; } .hero-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--text-2); } .hero-proof li { display: inline-flex; align-items: center; gap: 8px; } .hero-proof li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--premium); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* The phone: a frame around the real home-screen screenshot */ .hero-visual { position: relative; display: grid; place-items: center; padding-block: 8px 40px; } /* A thin black bezel with a metal rim and side buttons, sized like a modern phone. */ .phone { position: relative; width: min(66vw, 280px); padding: 7px; border-radius: 46px; background: #050505; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 2px #2b2b28, 0 0 0 3px #11110f, 0 50px 90px -30px rgb(0 0 0 / .85), 0 0 140px -40px rgb(159 179 126 / .28); } .phone::before, .phone::after { content: ""; position: absolute; inset-inline-end: -5px; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1c1c1a, #3a3a36); } .phone::before { top: 18%; height: 9%; } /* power */ .phone::after { top: 31%; height: 15%; } /* volume */ .phone-shot { width: 100%; height: auto; border-radius: 39px; background: #151513; } /* The photo-scan card that floats over the phone */ .scan-card { position: absolute; inset-block-end: 0; inset-inline-end: max(0px, calc(50% - 250px)); width: min(52vw, 220px); padding: 8px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 48px -20px rgb(0 0 0 / .8); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); } .scan-photo { position: relative; overflow: hidden; border-radius: 15px; aspect-ratio: 4 / 3; } .scan-photo img, .art-frame img { width: 100%; height: 100%; object-fit: cover; } .scan-line { position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--carbs), transparent); box-shadow: 0 0 18px 4px rgb(159 179 126 / .45); opacity: 0; } .scan-result { display: grid; grid-template-columns: 1fr auto; padding: 10px 8px 4px; line-height: 1.4; } .scan-result span { grid-column: 1 / -1; font-size: .6875rem; color: var(--premium); } .scan-result b { font-weight: 600; } .scan-result em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } .scan-result small { font-weight: 400; font-size: .6875rem; color: var(--text-2); } /* ---------- About (quotable facts) ---------- */ .about-text { max-width: 760px; } .about-text h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin-block-end: 20px; } .about-text p { color: var(--text-2); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.9; } .about-text p:first-of-type { color: var(--text); } .about-text p + p { margin-block-start: 16px; } /* ---------- Features: three spotlights, then the rest as a quiet list ---------- */ .spotlights { display: grid; gap: 72px; } .spotlight { display: grid; gap: 28px; align-items: center; } @media (min-width: 860px) { .spotlights { gap: 96px; } .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .spotlight:nth-child(even) .spot-copy { order: 2; } } .spot-copy { display: grid; justify-items: start; gap: 12px; max-width: 30em; } .spot-copy h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); letter-spacing: -.01em; } .spot-copy p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.85; } .spot-art { position: relative; display: grid; place-items: center; align-content: center; gap: 16px; min-height: 300px; padding: 32px 24px; border-radius: var(--radius-lg); background: radial-gradient(80% 70% at 50% 40%, rgb(245 243 238 / .045), transparent 70%), var(--card); border: 1px solid var(--glass-border); overflow: hidden; } .art-frame { position: relative; width: min(100%, 240px); aspect-ratio: 1; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px var(--hairline-strong); } .art-frame::before, .art-frame::after { content: ""; position: absolute; z-index: 1; width: 28px; height: 28px; border: 2px solid var(--text); } .art-frame::before { top: 12px; right: 12px; border-inline-start: 0; border-block-end: 0; border-radius: 0 8px 0 0; } .art-frame::after { bottom: 12px; left: 12px; border-inline-end: 0; border-block-start: 0; border-radius: 0 0 0 8px; } .art-tag { display: flex; gap: 14px; align-items: baseline; padding: 8px 16px; margin-block-start: -36px; z-index: 2; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .art-tag b { font-weight: 600; } .art-tag em { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; } .wave { display: flex; align-items: center; gap: 5px; height: 56px; } .wave i { width: 5px; height: 30%; border-radius: 3px; background: var(--text); opacity: .85; } .wave i:nth-child(3n+1) { height: 55%; } .wave i:nth-child(4n+2) { height: 85%; } .wave i:nth-child(5n) { height: 40%; } .wave i:nth-child(7n+3) { height: 100%; } .bubble { padding: 10px 18px; border-radius: 18px 18px 4px 18px; background: var(--inset); font-weight: 500; } .heard { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; } .heard li { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline-strong); } .heard em { font-style: normal; color: var(--text-2); margin-inline-start: 4px; } .art-search { justify-items: stretch; } .art-search > * { width: min(100%, 320px); margin-inline: auto; } .search-field { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--inset); font-weight: 500; } .search-field svg { width: 18px; height: 18px; color: var(--text-2); } .search-field span::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -.2em; background: var(--text); } .results { margin: 0; padding: 0; list-style: none; } .results li { padding: 10px 4px; border-block-end: 1px solid var(--hairline); } .units { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--inset); font-size: .875rem; } .units span { flex: 1; text-align: center; padding: 6px; border-radius: 999px; color: var(--text-2); } .units .on { background: var(--text); color: var(--on-ink); font-weight: 500; } .more-features { display: grid; gap: 0 48px; margin: 96px 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { .more-features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .more-features { grid-template-columns: repeat(3, 1fr); } } .more-features li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 14px; padding-block: 24px; border-block-start: 1px solid var(--hairline-strong); } .more-features svg { width: 22px; height: 22px; margin-block-start: 4px; } .more-features h3 { font-size: 1.0625rem; } .more-features p { grid-column: 2; color: var(--text-2); font-size: .9688rem; } /* ---------- How it works: three numbered steps on one line ---------- */ .steps { position: relative; display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } .steps::before { content: ""; position: absolute; top: 22px; inset-inline: 22px calc(33.33% - 22px); height: 1px; background: var(--hairline-strong); } } .step { position: relative; counter-increment: step; } .step::before { content: counter(step); position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: 18px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hairline-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .step h3 { font-size: 1.1875rem; margin-block-end: 8px; } .step p { color: var(--text-2); } /* ---------- Calorie answers strip (filled by the food page generator) ---------- */ .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--hairline-strong); } @media (min-width: 900px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .strip li { border-block-end: 1px solid var(--hairline); } .strip a { display: grid; gap: 2px; height: 100%; padding: 22px 4px; text-decoration: none; transition: background-color .2s; } .strip a:hover { background: linear-gradient(var(--hairline), transparent); } .strip-name { font-size: .9375rem; color: var(--text-2); } .strip-kcal { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .strip-kcal small { font-size: .9375rem; font-weight: 400; color: var(--text-2); letter-spacing: 0; } .strip-per { font-size: .875rem; color: var(--text-2); } .strip-more { margin-block-start: 24px; } .strip-more a { color: var(--text); text-underline-offset: 5px; text-decoration-color: var(--hairline-strong); } .strip-more a:hover { text-decoration-color: currentColor; } /* ---------- Free vs premium ---------- */ .compare-card { padding: 8px; border-radius: var(--radius-lg); overflow: hidden; } .compare { width: 100%; border-collapse: collapse; font-size: .9688rem; } .compare caption { text-align: start; } .compare th, .compare td { padding: 14px 12px; border-block-end: 1px solid var(--hairline); text-align: start; vertical-align: middle; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-block-end: 0; } .compare thead th { font-size: .875rem; font-weight: 600; } .compare thead th:not(:first-child), .compare td { text-align: center; width: 4.25rem; padding-inline: 6px; } @media (min-width: 640px) { .compare thead th:not(:first-child), .compare td { width: 6rem; } } .compare tbody th { font-weight: 400; } .compare .yes, .compare .no { display: inline-block; width: 20px; height: 20px; vertical-align: middle; } .compare .yes { color: var(--text); } .compare .yes.premium { color: var(--premium); } .compare .no { color: var(--muted); } .compare-note { margin-block-start: 20px; color: var(--text-2); max-width: 46em; font-size: .9688rem; } /* ---------- FAQ ---------- */ .faq-list { margin: 0; padding: 0; border-block-start: 1px solid var(--hairline-strong); } .faq-item { padding-block: 22px; border-block-end: 1px solid var(--hairline-strong); } .faq-item h3 { font-size: 1.125rem; margin-block-end: 8px; } .faq-item p { color: var(--text-2); max-width: 48em; } @media (min-width: 900px) { .faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .faq-layout .section-head { position: sticky; top: 96px; } } /* ---------- Closing call to action ---------- */ .cta-card { display: grid; justify-items: center; gap: 16px; padding: 44px 22px; border-radius: var(--radius-lg); text-align: center; } .cta-card img.app-icon { border-radius: 18px; } .cta-card h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); } .cta-card p { color: var(--text-2); max-width: 32em; } .cta-card .badges { justify-content: center; margin-block-start: 8px; } /* Homepage closing: no card, just the ask, on a pool of light */ .closing { position: relative; isolation: isolate; } .closing::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 60% at 50% 55%, rgb(245 243 238 / .06), transparent 70%); } .closing-inner { display: grid; justify-items: center; gap: 18px; max-width: 640px; margin-inline: auto; text-align: center; } .closing-inner .app-icon { border-radius: 20px; box-shadow: 0 0 0 1px var(--hairline-strong), var(--shadow); } .closing-inner h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -.02em; } .closing-inner p { color: var(--text-2); font-size: 1.0625rem; } .closing-inner .badges { justify-content: center; margin-block-start: 8px; } /* ---------- Motion ---------- Decoration only. Every word is in the HTML and visible without it; motion is skipped for reduced-motion users, and the scroll reveals only run where the browser supports scroll-driven animations (no JavaScript involved). Nothing animates the hero headline, so it never delays the first paint. */ @media (prefers-reduced-motion: no-preference) { .phone { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both, float 7s ease-in-out 1s infinite; } .scan-card { animation: slide-in 1s cubic-bezier(.2, .7, .2, 1) .35s both, float 7s ease-in-out 1.6s infinite reverse; } .scan-line { animation: scan 3.2s ease-in-out 1.2s infinite; } .wave i { animation: talk 1.1s ease-in-out infinite alternate; transform-origin: center; } .wave i:nth-child(2n) { animation-delay: -.3s; } .wave i:nth-child(3n) { animation-delay: -.6s; } .wave i:nth-child(5n) { animation-delay: -.9s; } .search-field span::after { animation: caret 1.1s steps(1) infinite; } @keyframes rise { from { transform: translateY(32px); } } @keyframes slide-in { from { transform: translate(-24px, 24px); } } @keyframes float { 50% { translate: 0 -8px; } } @keyframes scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes talk { from { transform: scaleY(.35); } } @keyframes caret { 50% { opacity: 0; } } @supports (animation-timeline: view()) { .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; } @keyframes reveal { from { opacity: 0; transform: translateY(32px); } } } } /* ---------- Footer ---------- */ .site-footer { padding-block: 40px 48px; border-block-start: 1px solid var(--hairline); font-size: .9375rem; color: var(--text-2); } .footer-grid { display: grid; gap: 28px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-grid h2 { font-size: .9375rem; color: var(--text); margin-block-end: 10px; } .footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .footer-grid a { text-decoration: none; } .footer-grid a:hover { color: var(--text); text-decoration: underline; } .footer-about p { max-width: 30em; margin-block-start: 10px; } .copyright { margin-block-start: 32px; padding-block-start: 20px; border-block-start: 1px solid var(--hairline); font-size: .875rem; } /* ---------- Download page & 404 (shared minimal layout) ---------- */ .simple-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px var(--gutter); } .simple-card { display: grid; justify-items: center; gap: 14px; width: min(100%, 460px); padding: 40px 24px; border-radius: var(--radius-lg); text-align: center; } .simple-card img.app-icon { border-radius: 18px; } .simple-card h1 { font-size: 1.6rem; } .simple-card p { color: var(--text-2); } .simple-card .badges { justify-content: center; margin-block-start: 6px; } .simple-card .home-link { margin-block-start: 8px; font-size: .9375rem; } /* ---------- Legal pages (privacy, terms) ---------- */ .legal { padding-block: 56px 88px; } .legal-body { max-width: 760px; } .legal-head { padding-block-end: 28px; margin-block-end: 32px; border-block-end: 1px solid var(--hairline-strong); } .legal-head h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -.01em; } .legal-date { margin-block-start: 10px; color: var(--text-2); font-size: .9375rem; } .legal-body h2 { font-size: 1.375rem; margin-block: 44px 14px; } .legal-body h3 { font-size: 1.0625rem; margin-block: 24px 6px; } .legal-body p, .legal-body li { color: var(--text-2); line-height: 1.9; } .legal-body p + p { margin-block-start: 12px; } .legal-body strong { color: var(--text); font-weight: 600; } .legal-body ul { margin: 12px 0 0; padding-inline-start: 1.25em; } .legal-body li + li { margin-block-start: 8px; } .legal-body li::marker { color: var(--muted); } .legal-body a { color: var(--text); text-decoration-color: var(--hairline-strong); text-underline-offset: 4px; } .legal-body a:hover { text-decoration-color: currentColor; } /* ---------- Food calorie pages (generated by scripts/food-pages) ---------- */ .food { padding-block: 24px 88px; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto; padding: 0; list-style: none; font-size: .875rem; color: var(--text-2); } .crumbs li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--muted); } .crumbs a { color: var(--text-2); text-decoration: none; } .crumbs a:hover { color: var(--text); } /* Hub (/food/) */ .dish-head { padding-block: 36px 28px; max-width: 46em; } .dish-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.01em; } .dish-head .lead { margin-block-start: 14px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.85; } .food-group > h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin-block-end: 16px; } .dish-cta { margin-block-start: 56px; } .tile-img { width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: contain; margin-block-end: 4px; } .dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .dish-tile { display: grid; gap: 6px; height: 100%; padding: 18px 20px; text-decoration: none; transition: border-color .15s, transform .15s; } .dish-tile:hover { border-color: var(--hairline-strong); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .dish-tile:hover { transform: none; } } .tile-name { font-weight: 600; font-size: 1.0625rem; } .tile-kcal { color: var(--text); font-weight: 500; } .tile-kcal span { color: var(--text-2); font-weight: 400; font-size: .875rem; } .group-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 8px; } .group-nav a { padding: 8px 16px; border: 1px solid var(--hairline-strong); border-radius: 999px; text-decoration: none; color: var(--text-2); font-size: .9375rem; } .group-nav a:hover { color: var(--text); border-color: var(--text-2); } .food-group { margin-block-start: 48px; } /* «الوجبات السريعة»: one brand per sub-section */ .brand-group + .brand-group { margin-block-start: 32px; } .brand-group h3 { font-size: 1.0625rem; color: var(--text-2); margin-block-end: 12px; } /* Dish page: one figure leads, the rest is set quieter on hairlines. Desktop is two equal columns whose gutter runs the length of the page. */ .dish { max-width: 1040px; --col-gap: clamp(48px, 7vw, 96px); } .dish .unit { font-weight: 400; font-size: .8125rem; color: var(--text-2); } .dish-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "photo" "answer"; padding-block: 28px 48px; } @media (min-width: 900px) { .dish-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "answer answer"; column-gap: var(--col-gap); align-items: start; padding-block: 44px 88px; } .dish-hero.has-photo { grid-template-areas: "title photo" "answer answer"; } } .dish-title { grid-area: title; max-width: 34em; } .dish-title h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); letter-spacing: -.01em; } .dish-title .lead { margin-block-start: 10px; color: var(--text-2); line-height: 1.85; } /* Product photos are transparent cut-outs: a faint pool of light grounds them. */ .dish-photo { grid-area: photo; position: relative; isolation: isolate; margin: 20px 0 0; } .dish-photo::before { content: ""; position: absolute; inset: 18% 6% -6%; z-index: -1; background: radial-gradient(closest-side, rgb(245 243 238 / .07), transparent); } .dish-photo img { width: 100%; max-width: 440px; height: auto; margin-inline: auto; } @media (min-width: 900px) { .dish-photo { margin: 0; align-self: center; } .dish-photo img { max-width: 100%; } } /* The answer */ /* On desktop the figure and its macros share a row, split on the page gutter, and settle on a common bottom line. */ .answer { grid-area: answer; margin-block-start: 28px; } @media (min-width: 900px) { .answer { display: grid; grid-template-columns: subgrid; align-items: end; margin-block-start: 48px; } .has-photo .answer { margin-block-start: 32px; } } .kcal { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; line-height: 1; } .kcal-num { font-size: clamp(4.75rem, 3.6rem + 4.6vw, 7rem); font-weight: 600; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; } .kcal-unit { font-size: 1.125rem; font-weight: 500; color: var(--text-2); } .kcal-per { margin-block-start: 16px; font-size: 1.0625rem; font-weight: 500; } .kcal-g { margin-inline-start: 6px; padding-inline-start: 10px; border-inline-start: 1px solid var(--hairline-strong); color: var(--text-2); font-weight: 400; } /* Macros: label · grams · bar · share, on a shared grid so every row aligns */ .macros-label { margin-block-start: 36px; padding-block-end: 8px; border-block-end: 1px solid var(--hairline-strong); font-size: .875rem; font-weight: 500; color: var(--text-2); line-height: 1.6; } @media (min-width: 900px) { .macros-label { margin-block-start: 0; } } .macros { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 16px; margin: 0; } .macro { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding-block: 10px; border-block-end: 1px solid var(--hairline); } .macro dd { margin: 0; } .macro dt { line-height: 0; } .macro-icon { width: 20px; height: 20px; } .macro.p .macro-icon { color: var(--protein); } .macro.c .macro-icon { color: var(--carbs); } .macro.f .macro-icon { color: var(--fat); } .macro-g { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .macro-bar svg { width: 100%; height: 4px; border-radius: 2px; } .macro-bar .track { fill: var(--hairline); } .macro.p .fill { fill: var(--protein); } .macro.c .fill { fill: var(--carbs); } .macro.f .fill { fill: var(--fat); } .macro-pct { min-width: 2.6em; text-align: end; font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums; } /* Nutrition facts: heading and tip beside the table on desktop. The top margin leaves open space after the logging prompt so the table sits below the fold and the page opens on the answer alone. */ .facts { margin-block-start: clamp(160px, 45svh, 480px); padding-block: 48px 56px; border-block-start: 1px solid var(--hairline-strong); } .facts h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); } .facts .tip { margin-block-start: 12px; color: var(--text-2); line-height: 1.9; max-width: 32em; } .facts-body { margin-block-start: 28px; } @media (min-width: 900px) { .facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; padding-block: 64px 72px; } .facts-aside { position: sticky; top: 96px; } .facts-body { margin: 0; } } /* Numbers are set flush to the column start (right), so digits line up by place; units trail to the left in a smaller, lighter cut. */ .nutrition { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .nutrition th, .nutrition td { padding: 11px 0; text-align: start; vertical-align: baseline; border-block-end: 1px solid var(--hairline); } .nutrition thead th { padding-block: 0 10px; font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--text-2); border-block-end-color: var(--hairline-strong); vertical-align: bottom; } .nutrition thead th:last-child:not(:nth-child(2)) { color: var(--text); } .nutrition .th-sub { display: block; font-weight: 400; color: var(--text-2); } .nutrition td { padding-inline-start: 16px; width: 28%; font-weight: 600; white-space: nowrap; } .nutrition thead th + th { padding-inline-start: 16px; } .nutrition tbody th { font-weight: 400; white-space: nowrap; } .nutrition .total th { font-weight: 600; } .nutrition .total td { font-size: 1.125rem; } .nutrition .sub th { padding-inline-start: 16px; color: var(--text-2); font-size: .9375rem; } .nutrition .sub td { font-weight: 500; } .facts .source { margin-block-start: 16px; font-size: .875rem; line-height: 1.8; color: var(--text-2); } /* Logging prompt: a quiet band, not a banner */ .log-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 16px; margin-block-start: 24px; padding-block: 28px; border-block-start: 1px solid var(--hairline-strong); } .log-cta .app-icon { border-radius: 14px; box-shadow: 0 0 0 1px var(--hairline-strong); } .log-cta h2 { font-size: 1.125rem; } .log-cta p { margin-block-start: 2px; color: var(--text-2); font-size: .9375rem; line-height: 1.7; } .log-cta .badges { grid-column: 1 / -1; } @media (min-width: 900px) { .log-cta { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; margin-block-start: 48px; } .log-cta .badges { grid-column: auto; flex-wrap: nowrap; } } /* Related dishes: one quiet line of links, set like a footnote */ .related { padding-block: 0 28px; font-size: .9375rem; line-height: 2; color: var(--text-2); } .related-label { margin-inline-end: 12px; } .related ul { display: inline; margin: 0; padding: 0; list-style: none; } .related li { display: inline; white-space: nowrap; } /* The dot ends the line it sits on, so a wrapped line never starts with one. */ .related li:not(:last-child)::after { content: "·"; margin-inline: 8px; color: var(--muted); } .related a { color: var(--text); text-decoration-color: var(--hairline-strong); text-underline-offset: 5px; } .related a:hover { text-decoration-color: currentColor; } .related .related-all a { color: var(--text-2); } /* Link to the calculator from the food pages: one quiet card */ .calc-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-block: 40px; padding: 18px 20px; text-decoration: none; transition: border-color .15s; } .calc-link:hover { border-color: var(--hairline-strong); } .calc-link-title { display: block; font-weight: 600; } .calc-link-sub { display: block; margin-block-start: 2px; color: var(--text-2); font-size: .9375rem; line-height: 1.7; } .calc-link svg { width: 20px; height: 20px; color: var(--text-2); } .calc-link-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--inset); } .calc-link .calc-link-icon svg { width: 34px; height: 34px; color: var(--text); stroke-width: 1.5; } .dish .calc-link { margin-block: 0 32px; } /* ---------- Daily calorie calculator (/calculator/) ---------- One screen: inputs on the right and the answer on the left on desktop; inputs first on mobile, with the answer pinned to the bottom edge while they scroll. Every state change is a class or an attribute set by calculator.js (the CSP allows no inline styles). */ .calc-page { padding-block: 24px 88px; } .calc-head { padding-block-end: 32px; } .calc-noscript { margin-block-end: 32px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--inset); } /* Without its script the tool is hidden by noscript.css, linked from a