/* =========================================================== Alenarizm — shared styles Direction: Bauhaus / Kandinsky-inspired minimalism — bold black type, geometric accents (circle / line / triangle), flat primary-ish colors on a warm cream ground. No external icon dependencies; one Google Font for the geometric sans. =========================================================== */ :root { --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg: #FFFFFF; --bg-alt: #F7F3EA; --card: #FFFFFF; --text: #16140F; --text-soft: #5B564C; --black: #16140F; --yellow: #FFDE7A; --yellow-rgb: 255, 222, 122; --green: #2C5234; --green-rgb: 44, 82, 52; --rust: #B6502E; --rust-rgb: 182, 80, 46; --accent: #16140F; /* primary ink / buttons */ --accent-dark: #000000; --border: #E5E0D4; --border-strong: var(--black); --shadow: 0 2px 18px rgba(22, 20, 15, 0.08); --max-width: 1160px; --max-width-prose: 720px; --radius: 2px; --radius-btn: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: var(--text); margin: 0 0 0.6em; } h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; margin-top: 1.32rem; } h3 { font-size: 1.05rem; margin-top: 1.6em; text-transform: none; } p { margin: 0 0 1em; } a { color: var(--text); } ul, ol { padding-left: 1.3em; } li { margin-bottom: 0.5em; } /* Language toggle: show/hide by data-lang on */ html[data-lang="ru"] .lang-en { display: none; } html[data-lang="en"] .lang-ru { display: none; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---------- Decorative background shapes ---------- A full-viewport fixed layer of bold, solid geometric shapes — Kandinsky/Bauhaus style, high contrast, not washed out. Content sits above it in opaque "island" cards, so shapes never fight with running text for legibility. */ .bg-shapes { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bgshape { position: absolute; opacity: 0.38; } /* Accent shapes tucked around a .card can sit a little bolder since they're the intentional focal accent for that block. */ .card-accents .bgshape { opacity: 0.55; } .bgshape--circle { border-radius: 50%; } .bgshape--square { border-radius: 4px; } .bgshape--diamond { border-radius: 4px; transform: rotate(45deg); } .bgshape--tri { border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .bgshape--line { height: 3px; background: var(--black); opacity: 0.14; } .bgshape.c-yellow { background: var(--yellow); } .bgshape.c-green { background: var(--green); } .bgshape.c-rust { background: var(--rust); } .bgshape.c-black { background: var(--black); } /* Everything with real content sits above the shape layer */ header.site-header, main, footer.site-footer { position: relative; z-index: 1; } /* Reusable "island" card — opaque surface so shapes never run under text. Local accent shapes may be attached (see .card-accents) and are allowed to bleed past the card edge since the section around it has overflow: visible. */ .card { position: relative; background: var(--card); border: 2.5px solid var(--black); border-radius: 0; padding: 32px 28px; max-width: var(--max-width-prose); margin-left: auto; margin-right: auto; } /* Cards that live inside a wider grid (e.g. the trust-section quote box) should just fill their column, not re-center at prose width. */ .trust-grid .card { max-width: none; margin: 0; } .card > * { position: relative; z-index: 1; } .card-accents { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; } /* Lighter-weight version of .card: gives a section the same "accents behind, content above" stacking without an opaque card surface — for spots where the content is already made of its own cards (e.g. the work-category grid). */ .shape-host { position: relative; } .shape-host > *:not(.card-accents) { position: relative; z-index: 1; } /* ---------- Header ---------- */ header.site-header { border-bottom: 2px solid var(--black); background: var(--bg); position: sticky; top: 0; z-index: 20; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 12px 24px 12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-family: var(--font-heading); font-weight: 700; font-size: 2.2rem; text-decoration: none; color: var(--text); white-space: nowrap; line-height: 1.05; } .brand small { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); } nav.main-nav { display: flex; align-items: center; gap: 22px; } nav.main-nav a { text-decoration: none; color: var(--text-soft); font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 2px; border-bottom: 2px solid transparent; } nav.main-nav a:hover, nav.main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--yellow); } .header-actions { display: flex; align-items: center; gap: 14px; } .btn-header { display: inline-block; background: var(--yellow); color: var(--black); border: 2px solid var(--black); text-decoration: none; padding: 7px 18px; border-radius: var(--radius-btn); font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .btn-header:hover { background: var(--black); color: #fff; } @media (max-width: 560px) { .btn-header { display: none; } } .lang-switch { display: flex; border: 2px solid var(--black); border-radius: var(--radius); overflow: hidden; font-size: 0.8rem; } .lang-switch button { border: none; background: transparent; padding: 6px 12px; cursor: pointer; color: var(--text); font: inherit; font-weight: 600; } .lang-switch button.active { background: var(--black); color: #fff; } .menu-toggle { display: none; border: 2px solid var(--black); background: var(--card); border-radius: var(--radius); width: 40px; height: 36px; cursor: pointer; font-size: 1.1rem; color: var(--text); } @media (max-width: 680px) { nav.main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 2px solid var(--black); flex-direction: column; align-items: flex-start; padding: 12px 24px 18px; gap: 12px; display: none; } nav.main-nav.open { display: flex; } .menu-toggle { display: inline-block; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; background: var(--yellow); color: var(--black); text-decoration: none; padding: 13px 28px; border-radius: var(--radius-btn); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; border: 2px solid var(--black); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn:hover { background: var(--black); color: #fff; } .btn-outline { background: transparent; color: var(--text); border: 2px solid var(--black); border-radius: var(--radius-btn); } .btn-outline:hover { background: var(--black); color: #fff; } /* ---------- Sections ---------- */ main { /* Top gap matches the black-line-to-heading rhythm (1.32rem) used on every other page's main.compact-page — the homepage's hero should open at the same distance from the header, not further down. Bottom padding stays generous since this is the one page without a fill-viewport treatment. */ padding: 1.32rem 0 80px; } /* Scoped override for pages that need to be seen without scrolling (currently just FAQ — all questions plus the CTA on one screen). */ main.compact-page { /* Top gap matches the h1-to-content gap (1.32rem) used everywhere else, so the rhythm reads: black line — gap — heading — same gap — content. */ padding: 1.32rem 0 36px; } section { margin-bottom: 1.6rem; } /* Pages with lighter content (Prices, FAQ, Contact) get a floor height matching the viewport, the same way About's longer content naturally reaches: this keeps the black footer out of view without scrolling, without forcing an oversized gap above the CTA button — that gap stays a small, fixed 1.2rem everywhere (see the inline margin-bottom on each page's last content block), same as About. */ main.fill-viewport { min-height: calc(100vh - 94px); } main.fill-viewport > .wrap > section:last-child { margin-bottom: 0; } /* Homepage hero — photo on the left (the single biggest photo on the site, since this is the front door), name/role/location/ mantra/button as one flowing column on the right. This and Contact stay the site's two center-accented pages, but here "centered" means the whole two-part block sits as one balanced unit, not that every line of text is centered. */ .hero { padding: 0; margin-bottom: 2.4rem; } /* Rebuilt from a draft that was reviewed by an art-director pass and a UX pass before going live. Photo is a fixed-width column (doesn't stretch, so its height stays predictable next to the text); the text column is one flex stack — name, role, location, mantra, button — all sharing a single left edge with one uniform gap between them, instead of several different hand-tuned margins. That single change (one shared edge, one shared gap) is what the "disharmonious" complaints kept coming back to. */ .hero-grid { /* This was stretching edge-to-edge across the full 1160px wrap, while .link-pills below sits centered as a compact row — two different widths/positions on the same page reads as unaligned even though the text inside the hero is internally consistent. Capping and centering the whole block here makes the hero and the pills agree on the same "centered unit" logic. */ display: grid; grid-template-columns: 480px 1fr; gap: 56px; /* Top-align, not center — the name should start at the same height as the photo's top edge, not float centered against it. */ align-items: start; max-width: 1040px; margin: 0 auto; } .hero-photo { width: 100%; } .hero-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 5%; border: 3px solid var(--black); box-shadow: var(--shadow); } .hero-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; } .hero-text h1 { /* Optical nudge: a heading's line-box top sits a few px above the actual visible top of the capital letters (line-height leading). A small pull-up brings the letters closer to the photo's top edge without overshooting past it. */ margin-top: -3px; } .hero-text > * { margin: 0; } .hero-text .mantra { /* Russian text runs longer than the English translation, so it wraps to more lines and can push the box past the photo's bottom edge — giving it the full column width (rather than a 92% cap) lets the longer language wrap to fewer, shorter lines. */ max-width: 100%; } @media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; justify-items: center; } .hero-photo { width: 100%; max-width: 320px; } .hero-text { align-items: center; text-align: center; } .hero .eyebrow { justify-content: center; } .hero-text .mantra { max-width: 100%; } } /* The name uses the site's one heading style (Space Grotesk, uppercase) instead of a one-off plain-face treatment, so it reads as part of the same system as every other h1, and sits first so its gap to the header line matches every other page's heading. The role label sits just below the name. */ .hero .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em; text-transform: uppercase; } .hero .eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--yellow); border-radius: 50%; flex-shrink: 0; } .hero .location { color: var(--text-soft); font-size: 0.92rem; } .mantra { border: 4px dashed var(--rust); font-family: inherit; font-weight: 500; font-size: 1.05rem; line-height: 1.6; width: fit-content; max-width: 100%; /* Box itself can sit centered as a block (mobile), but the quote text inside always reads left-aligned, as authored. */ text-align: left; } .mantra p { margin-bottom: 0.9em; } /* Russian sentences run longer than their English translations, so at the same font-size the RU version wraps to more lines and the box pushes past the photo's bottom edge — the EN version already fits perfectly, so only the RU text is nudged down slightly in size (not the border, not the EN text) to bring it back in line. */ .mantra .lang-ru { font-size: 0.95rem; } /* ---------- Trust section (About page) ---------- The most important content on the site: who I am as a practitioner, paired with the "permission" quote — laid out as an asymmetric two-column block (list + boxed quote) so it reads as the clear visual anchor of the page, the way it did on the original site. Everything else on the page is quieter than this by design. */ .trust-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px 56px; align-items: start; } @media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr; gap: 32px; } } .trust-underline { display: block; width: 64px; height: 3px; background: var(--rust); margin: 4px 0 1.5em; } .highlight-list { list-style: none; padding: 0; margin: 0; font-size: 1.05rem; font-weight: 500; } .highlight-list li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; } .highlight-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--text-soft); font-weight: 400; } /* Same dashed-box treatment as the homepage mantra — just in the site's deep green instead of rust, so it echoes that pattern without being a literal duplicate. Text stays plain black. */ .trust-grid .permission-quote { font-family: inherit; font-weight: 400; font-size: 0.95rem; line-height: 1.6; color: var(--text); border: 4px dashed rgba(var(--green-rgb), 0.55); /* Centered on the row's full height (which the taller list column determines) rather than a fixed guessed offset — this way it stays vertically centered no matter how long either column's text ends up being. */ align-self: center; /* Narrower than its grid column — about 20% smaller — so it doesn't feel like it's claiming the whole column width. */ max-width: 80%; margin-left: auto; margin-right: auto; } @media (max-width: 780px) { .trust-grid .permission-quote { max-width: 100%; } } @media (max-width: 780px) { .trust-grid .permission-quote { align-self: stretch; } } .permission-quote p { margin-bottom: 0.9em; } .permission-quote p:last-child { margin-bottom: 0; } /* Homepage's set of links to the rest of the site — plain oval pill buttons, not description cards. The homepage's job is to point somewhere, not repeat the content of the page it links to. */ .link-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 2rem; } .pill-link { display: inline-block; padding: 13px 26px; border: 2px solid var(--black); border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: var(--text); transition: background 0.15s ease, color 0.15s ease; } .pill-link:hover { background: var(--black); color: #fff; } @media (max-width: 560px) { .link-pills { flex-direction: column; } .pill-link { text-align: center; } } /* ---------- Consistent type scale ---------- Only a few sizes are allowed to appear across the whole site: page titles (h1, 2.2rem), this "sub-heading" tier (1.5rem — same as h2, used for section labels like "Образование и опыт", the approach chips-line, and price-card labels), and regular body text (1em / 17px, the default). Nothing should sit between these and nothing should quietly drift off them. */ .sub-heading { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: var(--text); margin: 1.32rem 0 0.6em; } section > .sub-heading:first-child, .card > .sub-heading:first-child { margin-top: 0; } /* Translucent "highlighter marker" treatment — used sparingly (the Approach page's section labels, the price amounts) to draw the eye, the way a marker would on a printed page. Soft/see-through on purpose, not a solid block of color. Not applied everywhere (e.g. the About page's trust section stays unhighlighted). */ .marker-highlight { display: inline-block; background: rgba(var(--yellow-rgb), 0.45); padding: 0.06em 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Approach line — plain bold text, pipe-separated (no chip badges) */ .chips-line { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; letter-spacing: 0; text-transform: uppercase; margin-bottom: 0.25em; color: var(--text); } /* Work-with categories */ .work-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 640px) { .work-categories { grid-template-columns: 1fr; } } /* Quieter treatment on purpose — this content ("Запрос") is useful but secondary, not a trust-builder, so it doesn't compete with the About page's highlight section for attention. */ .work-category { background: var(--card); border: 1.5px solid var(--border); border-radius: 0; padding: 22px 24px; } .work-category h3 { margin-top: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--text); } .work-category ul { list-style: none; margin: 0; padding: 0; color: var(--text); font-size: 0.95rem; } .work-category ul li { padding-left: 1.2em; position: relative; } .work-category ul li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); position: absolute; left: 0; top: 0.55em; } .closing-note { font-style: italic; color: var(--text); margin-top: 1.6em; } /* Pricing cards */ .price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 2em; max-width: 560px; } .price-card { background: var(--card); border: 4px dashed var(--yellow); border-radius: 0; padding: 14px 14px; position: relative; } .price-card::before { content: ""; position: absolute; top: -7px; right: 14px; width: 11px; height: 11px; border-radius: 50%; } .price-card:nth-child(1)::before { background: var(--yellow); } .price-card:nth-child(2)::before { background: var(--green); } .price-card .amount { font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; color: var(--text); margin-bottom: 0.1em; } .price-card h3 { margin: 0 0 0.3em; } .price-card p { color: var(--text-soft); font-size: 0.85rem; margin: 0; } .price-meta { color: var(--text-soft); font-size: 0.95rem; } @media (max-width: 680px) { .price-cards { grid-template-columns: 1fr; } } /* Education list */ .edu-list { list-style: none; padding: 0; margin: 0; } .edu-list li { padding-left: 1.2em; position: relative; } .edu-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); position: absolute; left: 0; top: 0.55em; } /* FAQ accordion (native details/summary — no JS needed) */ .faq-item { border-left: 3px solid var(--black); padding: 2px 0 2px 14px; margin-bottom: 4px; } .faq-item:nth-child(3n+1) { border-left-color: var(--yellow); } .faq-item:nth-child(3n+2) { border-left-color: var(--green); } .faq-item:nth-child(3n+3) { border-left-color: var(--rust); } .faq-item summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; line-height: 1.3; padding: 7px 4px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--rust); flex-shrink: 0; transition: transform 0.15s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 4px 14px; color: var(--text-soft); font-size: 0.92rem; } /* Contact — photo + circular icon badges, like the old site */ .contact-section { text-align: center; } .contact-section .location, .contact-section p:not(.location) { max-width: 46em; margin-left: auto; margin-right: auto; } .photo-placeholder { width: 260px; height: 260px; border-radius: 50%; border: 3px solid var(--black); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-align: center; padding: 12px; margin: 0 auto 22px; overflow: hidden; } .photo-placeholder:has(img) { padding: 0; } .photo-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; border-radius: 50%; } .icon-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 16px 0 20px; } .icon-badge { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .icon-badge .circle { width: 60px; height: 60px; border-radius: 50%; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .icon-badge .circle svg { width: 24px; height: 24px; } .icon-badge:hover .circle { background: var(--rust); } .icon-badge .name { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; } /* ---------- Footer ---------- */ footer.site-footer { background: var(--black); padding: 36px 0 44px; text-align: center; color: #C9C4BA; font-size: 0.9rem; } .footer-social { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 14px; } .footer-social a { color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .footer-social a:hover { color: var(--yellow); } .footer-social svg { width: 22px; height: 22px; } .footer-tagline { font-family: var(--font-heading); font-weight: 700; font-style: normal; text-transform: uppercase; color: #fff; margin-bottom: 10px; } /* ---------- Mobile scale-down ---------- The layout already reflows correctly below 760px, but everything read too large on an actual phone screen — text, photos, buttons. This block takes font-size/dimensions down roughly 28% total (20% + another 10% requested after) across the site; it never touches colors or border weights, so the .btn / .mantra / .card visual identity stays exactly as designed, just smaller. */ @media (max-width: 760px) { body { font-size: 12.6px; } h1 { font-size: 1.58rem; } h2 { font-size: 1.08rem; } h3 { font-size: 0.77rem; } .brand { font-size: 1.58rem; } .brand small { font-size: 0.58rem; } nav.main-nav a { font-size: 0.59rem; } .btn-header { font-size: 0.58rem; padding: 5px 13px; } .btn, .btn-outline { font-size: 0.72rem; padding: 9px 20px; } .pill-link { font-size: 0.68rem; padding: 9px 19px; } .card { padding: 23px 20px; } .hero-photo { max-width: 230px; } .hero .eyebrow { font-size: 0.94rem; } .hero .location { font-size: 0.67rem; } .mantra { font-size: 0.76rem; } .mantra .lang-ru { font-size: 0.68rem; } .sub-heading, .chips-line { font-size: 1.08rem; } .highlight-list { font-size: 0.76rem; } .trust-grid .permission-quote { font-size: 0.68rem; } .price-card .amount { font-size: 1.15rem; } .price-card p { font-size: 0.61rem; } .price-meta { font-size: 0.68rem; } .work-category h3 { font-size: 0.72rem; } .work-category ul { font-size: 0.68rem; } .faq-item summary { font-size: 0.63rem; } .faq-item .faq-answer { font-size: 0.67rem; } .photo-placeholder { width: 187px; height: 187px; font-size: 0.68rem; } .icon-badge .circle { width: 43px; height: 43px; } .icon-badge .circle svg { width: 17px; height: 17px; } .icon-badge .name { font-size: 0.61rem; } footer.site-footer { font-size: 0.65rem; } .footer-social svg { width: 16px; height: 16px; } }