/* ========================================================================== Bazmand — bilingual static site One stylesheet serves both EN (LTR) and FA (RTL); all directional values use logical properties, so the only thing that changes is . ========================================================================== */ /* --- Tokens --------------------------------------------------------------- */ :root { /* Brand — sampled from the app icon and store screenshots */ --brand: #8f26ab; --brand-deep: #5b0079; --brand-bright: #a32bc1; --brand-dark: #4a0064; --brand-darkest: #3d0052; /* Waste categories */ --cat-mixed: #8f26ab; --cat-paper: #f15a29; --cat-plastic: #ee5251; --cat-glass: #35c8ff; --cat-electronic: #f4d12d; --cat-bread: #026e74; /* Ink on the glass accents needs to be dark, not white */ --cat-mixed-ink: #ffffff; --cat-paper-ink: #ffffff; --cat-plastic-ink: #ffffff; --cat-glass-ink: #0b3d52; --cat-electronic-ink: #4a3d00; --cat-bread-ink: #ffffff; /* Surfaces and text */ --ink: #1a0b20; --ink-2: #5a4462; --ink-3: #7a6a83; --surface: #ffffff; --surface-2: #faf7fb; --surface-3: #f4f0f6; --line: #eaddef; --tint: #f3e7f7; --on-dark: #ffffff; --on-dark-2: rgba(255, 255, 255, 0.82); --on-dark-3: rgba(255, 255, 255, 0.62); /* Scale */ --container: 1160px; --gutter: 16px; --radius-sm: 14px; --radius: 20px; --radius-lg: 24px; --radius-pill: 999px; --step-1: clamp(0.82rem, 0.79rem + 0.13vw, 0.88rem); --step0: clamp(0.94rem, 0.9rem + 0.19vw, 1.06rem); --step1: clamp(1.06rem, 1rem + 0.31vw, 1.25rem); --step2: clamp(1.25rem, 1.13rem + 0.63vw, 1.63rem); --step3: clamp(1.63rem, 1.31rem + 1.56vw, 2.63rem); --step4: clamp(2rem, 1.38rem + 3.13vw, 3.63rem); --shadow-sm: 0 2px 8px rgba(26, 11, 32, 0.06); --shadow: 0 18px 40px rgba(26, 11, 32, 0.1); --shadow-lg: 0 32px 72px rgba(20, 0, 32, 0.34); --ease: cubic-bezier(0.22, 0.68, 0.36, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f4ecf7; --ink-2: #c6b3d0; --ink-3: #9d8aa8; --surface: #17081d; --surface-2: #1f0c27; --surface-3: #2a1134; --line: #3a1c46; --tint: #34143f; /* the flat brand purple is too dark to read as text on a dark surface */ --brand: #c471d8; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #f4ecf7; --ink-2: #c6b3d0; --ink-3: #9d8aa8; --surface: #17081d; --surface-2: #1f0c27; --surface-3: #2a1134; --line: #3a1c46; --tint: #34143f; --brand: #c471d8; color-scheme: dark; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: Vazirmatn, Tahoma, "Segoe UI", system-ui, sans-serif; font-size: var(--step0); line-height: 1.75; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-deep); } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } :focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Layout helpers ------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 7vw, 96px); } .section--tint { background: var(--surface-2); } .section__eyebrow { font-size: var(--step-1); font-weight: 700; letter-spacing: 0.1em; color: var(--brand); text-transform: uppercase; } :root[lang="fa"] .section__eyebrow { letter-spacing: normal; text-transform: none; } .section__title { margin-block-start: 12px; font-size: var(--step3); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; } .section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; } .section__head--center { flex-direction: column; align-items: center; text-align: center; } .section__lede { max-width: 48ch; color: var(--ink-2); } .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: 16px; z-index: 100; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--brand-deep); color: #fff; font-weight: 700; } .skip-link:focus { inset-block-start: 0; color: #fff; } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: 28px; border-radius: var(--radius-pill); font-size: var(--step0); font-weight: 700; transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: #fff; color: var(--brand-deep); box-shadow: 0 12px 30px rgba(30, 0, 45, 0.26); } .btn--primary:hover { color: var(--brand-deep); box-shadow: 0 16px 38px rgba(30, 0, 45, 0.32); } .btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff; } .btn--ghost:hover { border-color: #fff; color: #fff; } .btn--solid { background: var(--brand); color: #fff; } .btn--solid:hover { background: var(--brand-deep); color: #fff; } .btn--outline { border: 1.5px solid var(--line); color: var(--brand-deep); } .btn--outline:hover { border-color: var(--brand); color: var(--brand-deep); } .btn__icon { flex-shrink: 0; width: 20px; height: 20px; } /* Back arrow / chevron points along the reading direction */ :root[dir="rtl"] .icon-flip { transform: scaleX(-1); } /* --- Header --------------------------------------------------------------- */ .header { position: sticky; inset-block-start: 0; z-index: 50; background: transparent; transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); } .header.is-stuck { background: rgba(74, 0, 100, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 28px rgba(20, 0, 32, 0.28); } .header__inner { display: flex; align-items: center; gap: 32px; min-height: 80px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; flex-shrink: 0; } .brand:hover { color: #fff; } .brand__mark { width: 38px; height: 38px; } .brand__name { font-size: var(--step2); font-weight: 800; letter-spacing: -0.01em; line-height: 1; } .nav { flex-grow: 1; } .nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); } .nav__link { color: var(--on-dark-2); font-weight: 500; white-space: nowrap; } .nav__link:hover, .nav__link[aria-current="page"] { color: #fff; } .nav__link[aria-current="page"] { font-weight: 600; } .header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: var(--on-dark-2); font-weight: 500; } .lang-switch:hover { color: #fff; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.14); color: #fff; transition: background 0.16s var(--ease); } .icon-btn:hover { background: rgba(255, 255, 255, 0.24); } .header__toggle { display: none; } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient( 212deg, var(--brand-bright) 0%, var(--brand) 38%, var(--brand-deep) 100% ); color: #fff; } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .hero::before { inset-block-start: -280px; inset-inline-end: -180px; width: 760px; height: 760px; background: radial-gradient( circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 68% ); } .hero::after { inset-block-end: -340px; inset-inline-start: -140px; width: 620px; height: 620px; background: radial-gradient( circle, rgba(163, 43, 193, 0.5) 0%, rgba(163, 43, 193, 0) 70% ); } .hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 4vw, 56px); padding-block: clamp(48px, 6vw, 80px) clamp(64px, 7vw, 96px); } .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .tagline { display: inline-flex; align-items: center; min-height: 34px; padding-inline: 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14); font-size: var(--step-1); font-weight: 600; } .hero__title { font-size: var(--step4); font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; text-wrap: balance; } .hero__lede { max-width: 52ch; font-size: var(--step1); line-height: 1.95; color: var(--on-dark-2); text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__note { display: flex; align-items: center; gap: 10px; color: var(--on-dark-3); font-size: var(--step-1); } .hero__note svg { flex-shrink: 0; } .hero__device { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; } .hero__ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; pointer-events: none; } .hero__ring--sm { width: 540px; height: 540px; } .hero__ring--lg { width: 680px; height: 680px; border-color: rgba(255, 255, 255, 0.09); } /* Wallet card floating over the phone */ .wallet { position: absolute; inset-block-end: 48px; inset-inline-start: 0; display: flex; flex-direction: column; gap: 10px; width: 232px; padding: 18px; border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: 0 24px 50px rgba(20, 0, 32, 0.34); } .wallet__label { font-size: var(--step-1); font-weight: 700; color: var(--brand); } .wallet__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; } /* Fixed, not fluid: this card has a fixed width, so a clamp() that grows with the viewport pushes the currency label out of the box. */ .wallet__amount b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #1a0b20; } .wallet__amount span { font-size: var(--step-1); color: #5a4462; } .wallet__bars { display: flex; gap: 6px; } .wallet__bars i { flex-grow: 1; height: 6px; border-radius: var(--radius-pill); } /* --- Galaxy S5 device frame ---------------------------------------------- Real proportions: body 72.5 x 142 mm, screen 63.5 x 112.9 mm. Screen is 87.6% of body width; top bezel 12.5 mm, bottom bezel 16.6 mm. Screenshots are cropped to 1080x1812 (the Android nav bar is removed, because this device has a physical home button). Everything below derives from --screen-w. ------------------------------------------------------------------------- */ .phone { --screen-w: 260px; --screen-h: calc(var(--screen-w) * 1812 / 1080); --body-w: calc(var(--screen-w) / 0.876); --side: calc((var(--body-w) - var(--screen-w)) / 2); --ppm: calc(var(--screen-h) / 106.58); --bezel-top: calc(12.5 * var(--ppm)); --bezel-bottom: calc(16.6 * var(--ppm)); --u: calc(var(--screen-w) / 260); position: relative; flex-shrink: 0; width: var(--body-w); height: calc(var(--bezel-top) + var(--screen-h) + var(--bezel-bottom)); border-radius: calc(6 * var(--ppm)); background: linear-gradient(165deg, #34343a 0%, #17171b 48%, #2a2a30 100%); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.1); } .phone--sm { --screen-w: 188px; } .phone__screen { position: absolute; inset-block-start: var(--bezel-top); inset-inline-start: var(--side); width: var(--screen-w); height: var(--screen-h); object-fit: cover; object-position: top; } /* Hardware never mirrors with the reading direction */ .phone__top, .phone__bottom { position: absolute; inset-inline: 0; direction: ltr; display: flex; align-items: center; justify-content: center; } .phone__top { inset-block-start: 0; height: var(--bezel-top); flex-direction: column; gap: calc(6 * var(--u)); } .phone__sensors { display: flex; align-items: center; gap: calc(9 * var(--u)); } .phone__sensors i { display: block; background: #2b2b31; } .phone__sensor { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; } .phone__speaker { width: calc(58 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); } .phone__camera { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #202027 !important; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #35353e; } .phone__wordmark { font-size: calc(7 * var(--u)); font-weight: 700; letter-spacing: calc(1.7 * var(--u)); color: #64646d; } .phone__bottom { inset-block-end: 0; height: var(--bezel-bottom); gap: calc(32 * var(--u)); } .phone__key { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #3b3b44; } .phone__home { width: calc(56 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, #2b2b32 0%, #141418 100%); box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.13), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.6); } /* --- Steps ---------------------------------------------------------------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-block-start: 56px; } .steps__line { position: absolute; inset-block-start: 44px; inset-inline: 12%; height: 2px; background: var(--line); overflow: hidden; } .steps__line::after { content: ""; display: block; height: 100%; width: 100%; background: linear-gradient( to var(--flow, left), var(--line) 0%, var(--brand-bright) 50%, var(--line) 100% ); transform: scaleX(0); transform-origin: var(--origin, right); transition: transform 1.2s var(--ease); } .steps.is-visible .steps__line::after { transform: scaleX(1); } :root[dir="ltr"] .steps__line::after { --origin: left; } .step-item { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .step-item__badge { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 10px var(--surface), 0 0 0 11px var(--line); } .step-item__index { font-size: var(--step-1); font-weight: 700; color: var(--brand-bright); } .step-item__title { font-size: var(--step2); font-weight: 700; } .step-item__text { color: var(--ink-2); text-wrap: pretty; } /* --- Waste cards ---------------------------------------------------------- */ .waste-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 40px; } .waste-card { --accent: var(--brand); --accent-ink: #fff; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface-3); transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .waste-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .waste-card.is-active { border-color: var(--accent); background: var(--surface); } .waste-card__head { display: flex; align-items: center; gap: 14px; } .waste-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 16px; background: var(--line); color: var(--ink-3); transition: background 0.2s var(--ease), color 0.2s var(--ease); } .waste-card.is-active .waste-card__icon { background: var(--accent); color: var(--accent-ink); } .waste-card__name { font-size: var(--step1); font-weight: 700; } .waste-card__rate { font-size: var(--step-1); color: var(--ink-2); } .waste-card__stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid var(--line); } .stepper-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--line); color: var(--ink-3); transition: transform 0.12s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .stepper-btn:hover { transform: scale(1.08); } .stepper-btn:active { transform: scale(0.94); } .stepper-btn--inc { background: var(--accent); color: var(--accent-ink); } .waste-card.is-active .stepper-btn--dec { background: var(--tint); color: var(--brand-deep); } .waste-card__qty { display: flex; align-items: baseline; gap: 5px; } .waste-card__qty b { font-size: var(--step2); font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color 0.2s var(--ease); } .waste-card.is-active .waste-card__qty b { color: var(--ink); } .waste-card__qty span { font-size: var(--step-1); color: var(--ink-2); } .waste-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 28px; padding: 22px 30px; border-radius: 22px; background: var(--brand-deep); color: #fff; } .waste-total__figures { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); } .waste-total__block { display: flex; flex-direction: column; gap: 4px; } .waste-total__label { font-size: var(--step-1); color: var(--on-dark-3); } .waste-total__value { display: flex; align-items: center; gap: 8px; font-size: var(--step2); font-weight: 800; font-variant-numeric: tabular-nums; } .waste-total__value--points { color: var(--cat-electronic); } .waste-total__rule { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.2); } /* --- App showcase --------------------------------------------------------- */ .showcase { position: relative; overflow: hidden; background: var(--brand-dark); color: #fff; } .showcase::before { content: ""; position: absolute; inset-block-start: -200px; inset-inline-end: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient( circle, rgba(163, 43, 193, 0.42) 0%, rgba(163, 43, 193, 0) 70% ); pointer-events: none; } .showcase .section__eyebrow { color: #d9b8e4; } .showcase__list { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; } .showcase__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-dark-2); } .showcase__list svg { flex-shrink: 0; margin-block-start: 5px; color: var(--cat-electronic); } .showcase__rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-block-start: 52px; } .showcase__item { display: flex; flex-direction: column; align-items: center; gap: 18px; } .showcase__item:nth-child(even) { margin-block-start: 30px; } .showcase__caption { font-size: var(--step-1); font-weight: 600; color: var(--on-dark-2); text-align: center; } /* --- Impact --------------------------------------------------------------- */ .impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); } .impact__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; } .impact__item + .impact__item { border-inline-start: 1px solid var(--line); } .impact__figure { font-size: var(--step4); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--brand); font-variant-numeric: tabular-nums; } .impact__figure--empty { color: #9e7fae; } .impact__label { font-size: var(--step1); font-weight: 600; } .impact__note { font-size: var(--step-1); color: var(--ink-2); } /* --- Newsroom ------------------------------------------------------------- */ .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-block-start: 40px; } .post { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .post:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .post__rule { height: 6px; background: var(--accent, var(--brand)); } .post__body { display: flex; flex-direction: column; gap: 14px; padding: 26px; } .post__tag { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--tag-bg, var(--tint)); color: var(--tag-ink, var(--brand)); font-size: var(--step-1); font-weight: 700; } .post__title { font-size: var(--step1); font-weight: 700; line-height: 1.55; color: var(--ink); } .post__excerpt { color: var(--ink-2); font-size: var(--step-1); line-height: 1.95; } .post__meta { display: flex; align-items: center; gap: 8px; margin-block-start: 2px; color: var(--ink-3); font-size: var(--step-1); } /* --- Download CTA --------------------------------------------------------- */ .cta { position: relative; overflow: hidden; background: linear-gradient( 248deg, var(--brand-bright) 0%, var(--brand) 42%, var(--brand-deep) 100% ); color: #fff; } .cta::before { content: ""; position: absolute; inset-block-start: -180px; inset-inline-start: -100px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 68% ); pointer-events: none; } .cta__grid { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 48px; } .cta__copy { display: flex; flex-direction: column; gap: 20px; } .cta__title { font-size: var(--step3); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; } .cta__lede { max-width: 46ch; color: var(--on-dark-2); } .store-links { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 6px; } .store-link { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding-inline: 24px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(30, 0, 45, 0.24); transition: transform 0.16s var(--ease); } .store-link:hover { transform: translateY(-2px); color: var(--ink); } .store-link--ghost { border: 1.5px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.13); color: #fff; box-shadow: none; } .store-link--ghost:hover { color: #fff; } .store-link small { display: block; font-size: var(--step-1); opacity: 0.75; line-height: 1.3; } .store-link b { font-size: var(--step1); font-weight: 700; line-height: 1.3; } .qr { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.1); } .qr__slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 164px; height: 164px; border: 2px dashed #c9b3d2; border-radius: var(--radius); background: #fff; color: #7a6a83; font-size: var(--step-1); font-weight: 600; } .qr__caption { color: var(--on-dark-2); font-size: var(--step-1); } /* --- Footer --------------------------------------------------------------- */ .footer { background: var(--brand-darkest); color: var(--on-dark-2); padding-block: 60px 24px; } .footer a { color: var(--on-dark-2); } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; } .footer__brand { display: flex; flex-direction: column; gap: 18px; } .footer__lockup { display: flex; align-items: center; gap: 12px; } .footer__lockup img { width: 40px; height: 40px; } .footer__names { display: flex; flex-direction: column; line-height: 1.25; } .footer__names b { font-size: var(--step2); font-weight: 800; color: #fff; } .footer__names span { font-size: var(--step-1); color: var(--on-dark-3); letter-spacing: 0.12em; } .footer__blurb { max-width: 34ch; color: var(--on-dark-3); font-size: var(--step-1); line-height: 1.95; } .socials { display: flex; gap: 10px; } .social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: #fff; transition: background 0.16s var(--ease); } .social:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } .footer__col h2 { margin-block-end: 14px; font-size: var(--step1); font-weight: 700; color: #fff; } .footer__col li + li { margin-block-start: 12px; } .footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step-1); } .footer__contact svg { flex-shrink: 0; margin-block-start: 4px; color: var(--on-dark-3); } .footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, 0.13); color: var(--on-dark-3); font-size: var(--step-1); line-height: 1.85; } /* --- Reveal on scroll ----------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 1024px) { .hero__grid, .cta__grid { grid-template-columns: 1fr; } /* The headline leads on narrow screens — a visitor should read the offer before they see a device shot of an app they don't know yet. */ .hero__device { min-height: auto; margin-block-start: 8px; } .hero__ring, .wallet { display: none; } .waste-grid, .posts, .showcase__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase__item:nth-child(even) { margin-block-start: 0; } .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-end: 0; } .impact__item:nth-child(odd) { border-inline-start: 0; } .impact__item:nth-child(n + 3) { border-block-start: 1px solid var(--line); } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta__qr { display: none; } } @media (max-width: 860px) { .header__toggle { display: inline-flex; } .nav { position: absolute; inset-block-start: 100%; inset-inline: var(--gutter); display: none; padding: 12px; border-radius: var(--radius); background: var(--brand-deep); box-shadow: var(--shadow-lg); } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { display: block; padding: 14px 16px; border-radius: var(--radius-sm); } .nav__link:hover { background: rgba(255, 255, 255, 0.1); } .header__inner { position: relative; } .header__cta { display: none; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } .steps__line { display: none; } } @media (max-width: 640px) { .waste-grid, .posts, .showcase__rail, .footer__grid { grid-template-columns: 1fr; } .impact { grid-template-columns: 1fr; } .impact__item { border-inline-start: 0 !important; } .impact__item + .impact__item { border-block-start: 1px solid var(--line); } .steps { grid-template-columns: 1fr; } .waste-total { flex-direction: column; align-items: stretch; } .waste-total__figures { justify-content: space-between; } .phone { --screen-w: min(228px, 56vw); } .phone--sm { --screen-w: min(204px, 56vw); } .btn { width: 100%; } .hero__actions { width: 100%; } } /* --- Print ---------------------------------------------------------------- */ @media print { .header, .qr, .socials { display: none; } body { color: #000; background: #fff; } }