/* ========================================================================== davlatshermatov.uz Colour tokens live ONLY in the three token blocks below — no raw hex anywhere else in this file or in index.html. ========================================================================== */ /* -------------------------------------------------------------------------- Supplement fonts (built by scripts/make_fonts.py) Bodoni Moda, Archivo and JetBrains Mono have no Uzbek ʻ (U+02BB); Bodoni Moda also lacks ʼ (U+02BC); Google's subset of JetBrains Mono drops → ↗. Each "… Uz" family carries only those glyphs, drawn from the same typeface, and is listed FIRST in its stack below: Google's subset claims U+02BB-02BC without having the glyphs, so a later position would make the browser wait for Google's file before requesting ours. Safe because the Uz unicode-ranges exclude the space, so the main family still sets the line metrics. -------------------------------------------------------------------------- */ @font-face { font-family: "Bodoni Moda Uz"; src: url("assets/fonts/bodoni-uz.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+02BB-02BC; } @font-face { font-family: "Bodoni Moda Uz"; src: url("assets/fonts/bodoni-italic-uz.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+02BB-02BC; } @font-face { font-family: "Archivo Uz"; src: url("assets/fonts/archivo-uz.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+02BB-02BC; } @font-face { font-family: "JetBrains Mono Uz"; src: url("assets/fonts/mono-uz.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+02BB, U+2192, U+2197; } /* -------------------------------------------------------------------------- Tokens — light palette first -------------------------------------------------------------------------- */ :root { --bg: #EEEDE6; --surface: #F8F7F2; --ink: #22241E; --muted: #74786B; --line: #D6D4C8; --brass: #8A6A2A; /* Derived text tokens. In light mode --muted (3.85:1) and --brass (4.28:1) fall short of WCAG AA 4.5:1 for small text on --bg, so small text uses these slightly ink-shifted versions (4.92:1 and 4.79:1). Literal values because color-mix() is missing before Safari 16.2 / Chrome 111; recompute if --muted, --brass or --ink change. */ --muted-text: #64675C; /* = color-mix(in srgb, var(--muted) 80%, var(--ink)) */ --brass-text: #806329; /* = color-mix(in srgb, var(--brass) 90%, var(--ink)) */ --shadow: color-mix(in srgb, var(--ink) 45%, transparent); --font-serif: "Bodoni Moda Uz", "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; --font-sans: "Archivo Uz", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono Uz", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wrap: 1080px; --gutter: clamp(1rem, 4vw, 2.5rem); --section-space: clamp(4.5rem, 10vw, 8rem); --frame-offset: clamp(10px, 1.4vw, 16px); --radius: 2px; --ease: cubic-bezier(.2, .7, .2, 1); color-scheme: light; } /* Dark palette — system preference (unless the page is pinned to light) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15160F; --surface: #1D1F17; --ink: #EDEBE1; --muted: #8E9183; --line: #2E3126; --brass: #C9A961; /* dark tokens already pass AA on --bg (5.7:1 and 8.1:1) */ --muted-text: var(--muted); --brass-text: var(--brass); --shadow: transparent; color-scheme: dark; } } /* Dark palette — explicit */ :root[data-theme="dark"] { --bg: #15160F; --surface: #1D1F17; --ink: #EDEBE1; --muted: #8E9183; --line: #2E3126; --brass: #C9A961; --muted-text: var(--muted); --brass-text: var(--brass); --shadow: transparent; color-scheme: dark; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, p, figure, ol, ul { margin: 0; } ol, ul { padding: 0; list-style: none; } p { text-wrap: pretty; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } ::selection { background: var(--brass-text); color: var(--bg); } .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } .mono { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; } /* handles and domains keep their own case */ .mono--plain { letter-spacing: .02em; text-transform: none; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: .75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 3rem; padding: .75rem 1.375rem; border: 1px solid var(--ink); border-radius: var(--radius); font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn__arrow { font-family: var(--font-mono); font-weight: 400; } .btn--primary { background: var(--ink); color: var(--bg); } .btn--primary:hover { background: var(--brass-text); border-color: var(--brass-text); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { border-color: var(--brass-text); color: var(--brass-text); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding-top: clamp(2.5rem, 7vw, 6rem); } .hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hero__photo { position: relative; max-width: 20rem; margin: 0 var(--frame-offset) var(--frame-offset) 0; } /* thin brass frame, offset down-right, behind the photo */ .hero__photo::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--brass); transform: translate(var(--frame-offset), var(--frame-offset)); pointer-events: none; } .hero__photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); } .hero__eyebrow { color: var(--brass-text); } .hero__name { margin-top: 1.125rem; font-family: var(--font-serif); font-size: clamp(3rem, 1.6rem + 5.2vw, 5.75rem); font-weight: 500; line-height: .95; letter-spacing: -.015em; } .hero__role { margin-top: 1.25rem; font-size: 1rem; font-weight: 500; line-height: 1.5; } .hero__sep { color: var(--brass-text); } .hero__headline { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-style: italic; font-weight: 400; line-height: 1.2; text-wrap: balance; } .hero__intro { margin-top: 1.25rem; max-width: 34em; color: var(--muted-text); } .hero .actions { margin-top: 2rem; } @media (min-width: 760px) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .hero__photo { max-width: none; } } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .section { padding-top: var(--section-space); } .section__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section__index { display: flex; align-items: center; gap: 1rem; color: var(--brass-text); } .section__index::after { content: ""; flex: 1; height: 1px; background: var(--line); } .section__title { max-width: 20ch; font-family: var(--font-serif); font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; } /* ---- 02 · Path --------------------------------------------------------- */ .path { border-top: 1px solid var(--line); } .step { display: grid; gap: .625rem 2rem; padding-block: 1.75rem 2rem; border-bottom: 1px solid var(--line); } .step__label { display: flex; align-items: center; gap: .625rem; color: var(--brass-text); } /* "Bugun" — a small live dot marks where the path is today */ .step--now .step__label::after { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--brass); } .step__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); font-weight: 500; line-height: 1.15; } .step__text { margin-top: .625rem; max-width: 40em; color: var(--muted-text); } @media (min-width: 720px) { .step { grid-template-columns: 11rem minmax(0, 1fr); } .step__label { align-self: start; padding-top: .6rem; } } /* ---- 03 · Numbers ------------------------------------------------------ */ /* the 1px grid gap shows the --line background: hairline dividers */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .stat { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1rem 1.875rem 1.25rem; background: var(--bg); } .stat:nth-child(odd) { padding-left: 0; } .stat__value { font-family: var(--font-serif); font-size: clamp(3rem, 2.2rem + 3.2vw, 4.75rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; } /* Bodoni's "+" is a hairline at display optical sizes and vanished, so the plus is a small mono superscript */ .stat__plus { margin-left: .04em; color: var(--brass); font-family: var(--font-mono); font-size: .6em; font-weight: 400; vertical-align: .55em; } .stat__label { max-width: 16em; color: var(--muted-text); font-size: .9375rem; line-height: 1.45; } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat:nth-child(odd) { padding-left: 1.25rem; } .stat:first-child { padding-left: 0; } } /* ---- 04 · Help cards --------------------------------------------------- */ .cards { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); } .card { display: flex; flex-direction: column; gap: .875rem; height: 100%; padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s var(--ease); } .card__index { color: var(--brass-text); } .card__title { font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 500; line-height: 1.15; text-wrap: balance; } .card__text { color: var(--muted-text); font-size: 1rem; line-height: 1.55; } /* the sixth cell: a direct way to act on any card */ .card--cta { justify-content: space-between; min-height: 12rem; background: transparent; border-color: var(--brass); text-decoration: none; } .card--cta .card__title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-style: italic; font-weight: 400; white-space: nowrap; } .card--cta .btn__arrow { color: var(--brass-text); font-size: 1.25rem; font-style: normal; } .card:hover { border-color: var(--brass); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -24px var(--shadow); } } @media (min-width: 620px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- 05 · Looking for (surface band) ----------------------------------- */ .band { margin-top: var(--section-space); padding-block: var(--section-space); background: var(--surface); border-block: 1px solid var(--line); } .seek { max-width: 54rem; border-top: 1px solid var(--line); } .seek__item { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.45; } .seek__arrow { color: var(--brass); font-family: var(--font-mono); } .seek__who { font-weight: 500; } .seek__why { color: var(--muted-text); } /* ---- 06 · Contact ------------------------------------------------------ */ .section__title--xl { max-width: 14ch; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -.015em; } .contact__text { max-width: 32em; font-size: 1.125rem; } .contact .actions { margin-top: 2rem; } .contact__links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.5rem; } .contact__links a { display: inline-flex; gap: .5em; padding-bottom: .25rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); } .contact__links a:hover { border-color: var(--brass); color: var(--brass-text); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { margin-top: var(--section-space); padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); } .footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; color: var(--muted-text); } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }