/* ========================================================================== Lavood — public landing page Tokens, typography and visual language transcribed from the Lavood Design System (Warm Dark + Electric Lime). Persian / RTL only. The only script on the page is the theme toggle; everything else here is static. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts — self-hosted, no third-party runtime dependency. Google Fonts is render-blocking against a host that is unreliable for this audience, so the files ship with the site. -------------------------------------------------------------------------- */ @font-face { font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Tokens Light is the default, and it sits on :root rather than behind a media query or a script — so the stylesheet alone paints the page correctly and there is nothing to flash. Dark is opted into: the header toggle writes data-theme="dark" on and this block swaps underneath it. The Light Mode accent is deliberately darker than the Dark Mode one, to hold contrast on a pale surface. --accent is a BACKGROUND, never a text colour: as text on --surface it measures 1.46:1, while --accent-ink on top of it is 12.37:1. -------------------------------------------------------------------------- */ :root { --bg: #f7f7f2; --surface: #ffffff; --surface-2: #f0f0ea; --border: #e2e2da; --border-strong: #cfcfc4; --text: #161616; --text-2: #5e5e58; --text-3: #6e6e66; --accent: #b8e600; --accent-ink: #161616; --accent-soft: rgb(184 230 0 / 16%); --accent-line: rgb(184 230 0 / 50%); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --font-fa: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; --leading-tight: 1.35; --leading-normal: 1.7; --leading-relaxed: 1.95; --duration: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --wrap: 1160px; color-scheme: light; } [data-theme='dark'] { --bg: #0d0d0d; --surface: #151515; --surface-2: #1d1d1d; --border: #2a2a2a; --border-strong: #3a3a38; --text: #f5f5f0; --text-2: #a3a39a; /* Corrected from the design file's #707068, which measures 3.89:1. */ --text-3: #8a8a80; --accent: #d8ff3e; --accent-ink: #0d0d0d; --accent-soft: rgb(216 255 62 / 12%); --accent-line: rgb(216 255 62 / 32%); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. Reset and base Logical properties throughout — the layout is RTL and must not assume left-to-right physical sides. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, ul, ol, dl, dd { margin-block: 0; margin-inline: 0; } ul, ol { padding-inline-start: 0; list-style: none; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-fa); font-size: 16px; font-weight: 400; line-height: var(--leading-normal); margin: 0; min-block-size: 100vh; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3 { font-weight: 600; line-height: var(--leading-tight); letter-spacing: 0; /* Persian never takes negative tracking. */ } a { color: inherit; text-decoration: none; } :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); border-radius: var(--radius-sm); } /* Latin fragments inside Persian text — domains, product name. */ .latin { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--space-6); } .skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 4. Brand mark The symbol is a knockout: the L is cut out of a lime plate. The two paths are the design system's "regular" and "small" optical cuts, not one asset scaled — at small sizes the margin closes and the strokes thicken. -------------------------------------------------------------------------- */ /* Lockup ratios from the brand guide: the symbol leads from the right in Persian, plate height = 2.05 x alef height, gap = 0.25 x plate width. */ .brand { display: inline-flex; align-items: center; gap: var(--space-2); } .brand-mark { inline-size: 32px; block-size: 32px; flex: none; display: block; } .brand-mark.small { inline-size: 28px; block-size: 28px; } .brand-mark .plate { fill: var(--accent); } .brand-mark .ink { fill: var(--accent-ink); } /* 22px box = a 15.6px alef, which is the 32px plate divided by 2.05. The box also contains the vav and lam descenders, which hang below the baseline and take no part in alignment — hence the nudge. */ .brand-word { block-size: 22px; inline-size: auto; display: block; fill: var(--text); transform: translateY(3px); } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 20; background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-block-end: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: var(--space-6); min-block-size: 68px; padding-block: var(--space-3); } .site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font-size: 14px; font-weight: 500; color: var(--text-2); transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .site-nav a:hover { color: var(--text); background: var(--surface-2); } /* The theme toggle — an icon button, per the design system's bordered variant. The icon shows the theme it switches TO, and the accessible label says so in words: the icon is never the only carrier of the meaning. */ .theme-toggle { display: flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; flex: none; padding: 0; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle[hidden] { display: none; } .theme-toggle svg { inline-size: 18px; block-size: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } [data-theme='dark'] .theme-toggle .icon-moon { display: none; } [data-theme='dark'] .theme-toggle .icon-sun { display: block; } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { padding-block: var(--space-24) var(--space-20); border-block-end: 1px solid var(--border); } .kicker { display: inline-block; padding: var(--space-1) var(--space-3); margin-block-end: var(--space-6); border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius-full); font-size: 13px; font-weight: 500; color: var(--text); } .hero h1 { font-size: clamp(30px, 5.2vw, 52px); max-inline-size: 18ch; margin-block-end: var(--space-6); } .lede { font-size: clamp(16px, 1.7vw, 19px); line-height: var(--leading-relaxed); color: var(--text-2); max-inline-size: 62ch; } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-8); } .chips li { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-full); font-size: 14px; font-weight: 500; color: var(--text-2); } /* -------------------------------------------------------------------------- 7. Sections Elevation comes from surface and border contrast, not shadow. -------------------------------------------------------------------------- */ .section { padding-block: var(--space-20); border-block-end: 1px solid var(--border); /* Clears the sticky header when a nav anchor jumps here. */ scroll-margin-block-start: 76px; } .section-alt { background: var(--surface); } .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--text-3); margin-block-end: var(--space-3); } .section h2 { font-size: clamp(24px, 3vw, 32px); margin-block-end: var(--space-4); } .section-lede { font-size: 17px; color: var(--text-2); max-inline-size: 60ch; margin-block-end: var(--space-12); } .section h2 + .cols, .section h2 + .cards, .section h2 + .about, .section h2 + .steps { margin-block-start: var(--space-10); } /* --- What is Lavood --- */ .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); } .col p { color: var(--text-2); font-size: 16px; line-height: var(--leading-relaxed); } .col p + p { margin-block-start: var(--space-4); } /* --- How it works: a three-stop stepper --- No card frames. The three steps sit on one continuous line so the section reads as a sequence rather than as three unrelated boxes — the numbered badges cut through the line with a ring in the section's own background. */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); position: relative; } .steps::before { content: ''; position: absolute; inset-inline: 22px; inset-block-start: 21px; /* half the 44px badge */ block-size: 2px; border-radius: var(--radius-full); background: var(--border-strong); z-index: 0; } .step { position: relative; z-index: 1; } .step-num { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-full); background: var(--accent); color: var(--accent-ink); font-size: 19px; font-weight: 600; line-height: 1; margin-block-end: var(--space-5); /* The cut: the badge carries the section background outwards so the connector stops cleanly at its edge instead of running underneath. */ box-shadow: 0 0 0 7px var(--bg); } .section-alt .step-num { box-shadow: 0 0 0 7px var(--surface); } .step h3 { font-size: 19px; margin-block-end: var(--space-3); } .step p { font-size: 15px; color: var(--text-2); line-height: var(--leading-relaxed); } /* --- Capabilities --- */ .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .card { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--duration) var(--ease); } .section-alt .card { background: var(--surface-2); } .card:hover { border-color: var(--border-strong); } .card h3 { font-size: 17px; margin-block-end: var(--space-3); } /* A short lime rule under each card title — the accent as a quiet marker, never as the only carrier of meaning. */ .card h3::after { content: ''; display: block; inline-size: 24px; block-size: 2px; border-radius: var(--radius-full); background: var(--accent); margin-block-start: var(--space-3); } .card p { font-size: 15px; color: var(--text-2); line-height: var(--leading-relaxed); } /* --- About --- */ .about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; } .about-text p { color: var(--text-2); font-size: 16px; line-height: var(--leading-relaxed); } .about-text p + p { margin-block-start: var(--space-4); } .facts { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-2); overflow: hidden; } .facts > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); } .facts > div + div { border-block-start: 1px solid var(--border); } .facts dt { font-size: 14px; color: var(--text-3); } .facts dd { font-size: 15px; font-weight: 500; color: var(--text); text-align: end; } /* -------------------------------------------------------------------------- 8. Footer -------------------------------------------------------------------------- */ .site-footer { padding-block: var(--space-10); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); } .footer-brand { display: flex; align-items: center; gap: var(--space-3); } .footer-name { font-size: 15px; font-weight: 600; } .footer-meta, .footer-copy { font-size: 13px; color: var(--text-3); } /* -------------------------------------------------------------------------- 9. Responsive Breakpoints: sm 640 · md 768 · lg 1024. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } } @media (max-width: 768px) { .hero { padding-block: var(--space-16) var(--space-12); } .section { padding-block: var(--space-16); } .cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } /* One column: the stepper turns vertical. Each step draws the segment down to the next badge, so the line ends at the last badge rather than running on past it. */ .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .steps::before { display: none; } .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; } .step-num { grid-row: 1 / span 2; grid-column: 1; margin-block-end: 0; box-shadow: none; } .section-alt .step-num { box-shadow: none; } .step h3, .step p { grid-column: 2; } .step:not(:last-child)::after { content: ''; position: absolute; inset-block-start: 44px; inset-block-end: calc(var(--space-8) * -1); inset-inline-start: 21px; inline-size: 2px; border-radius: var(--radius-full); background: var(--border-strong); } .section-lede { margin-block-end: var(--space-8); } } @media (max-width: 640px) { .wrap { padding-inline: var(--space-5); } /* Two rows of header pinned to the top of a phone costs more screen than it is worth on a page this short. */ .site-header { position: static; backdrop-filter: none; } .section { scroll-margin-block-start: var(--space-4); } /* Brand and toggle share the top row, nav wraps onto its own line below. */ .header-inner { flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); } .brand { order: 1; } .theme-toggle { order: 2; margin-inline-start: auto; /* Touch target, not decoration: 44px is the floor on a phone. */ inline-size: 44px; block-size: 44px; } .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; gap: var(--space-1); } .site-nav a { padding: var(--space-2); font-size: 13px; } .cards { grid-template-columns: minmax(0, 1fr); } .footer-inner { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- 10. Print -------------------------------------------------------------------------- */ @media print { .site-header, .skip-link { display: none; } body { background: #fff; color: #000; } }