/* ========================================================= THE LOCAL TEMPERATURE — GLOBAL STYLES "Not where to go — but how a place feels." ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@300;400;500;600&display=swap'); /* Anton + Antonio are also loaded via tags in each page's — see FIX 1 */ /* ---------- ROOT VARIABLES ---------- */ :root { --font-display: 'Anton', sans-serif; --font-body: 'Antonio', sans-serif; --font-ui: 'Poppins', sans-serif; /* RU-mode fonts — Anton/Antonio/Poppins above don't cover Cyrillic (or don't cover it well), see the [data-lang="ru"] override block further down for how these get swapped in. */ --font-display-ru: 'Rubik Mono One', sans-serif; --font-body-ru: 'PT Sans', sans-serif; /* nature-tone palette */ --forest: #1E2A14; --olive: #3D4A2A; --olive-m: #4A5A30; --ocean: #2E4A52; --sky: #7A9BA8; --ochre: #C8A050; --wine: #6B1F2A; --terra: #8B4A2A; --sand: #C8A870; --cream-t: rgba(245,237,216,0.12); --black: #0D0D0D; /* legacy aliases kept so older markup patterns still resolve */ --olive-dark: var(--olive); --color-primary: var(--olive); --color-accent: var(--ochre); --color-wine: var(--wine); --color-ocean: var(--ocean); --color-forest: var(--forest); --color-text: var(--forest); --max-width: 1400px; --nav-height: 76px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- RESET ---------- */ * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { /* was var(--forest) (the old dark-olive design) — every page's sections now set their own explicit background, but any vertical margin between sections still exposed this old color as a stripe (found on shop.html: .shop-product's own top/bottom margin, see below). Switching the page-wide default to navy is the one-shot site-wide fix for that class of bug, instead of patching every section's margin individually. */ background: var(--about-navy); color: #EDE7D8; font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: normal; line-height: 1.05; letter-spacing: 0.01em; } em, i { font-style: italic; } ::selection { background: var(--ochre); color: var(--forest); } /* ---------- UTILITIES ---------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 6vw; } .rule { height: 1px; background: var(--ochre); border: none; width: 100%; opacity: 0.6; } .rule-thick { height: 2px; opacity: 1; } .rule-center { width: 80px; margin: 2rem auto; } .rule-animate { width: 0; transition: width 1.2s var(--ease-out); } .rule-animate.in-view { width: 100%; } .rule-animate.rule-center.in-view { width: 80px; } /* color-cycling divider: ochre -> wine -> sky -> olive -> ochre */ .rule-cycle { height: 2px; width: 100%; border: none; background: linear-gradient(90deg, var(--ochre), var(--wine), var(--sky), var(--olive), var(--ochre)); background-size: 300% 100%; animation: cycleShift 14s linear infinite; opacity: 0.85; } .section-label { font-family: var(--font-ui); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.25em; color: var(--ochre); text-transform: uppercase; } .label-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.5rem; } .accent-bar { width: 4px; height: 40px; flex-shrink: 0; display: block; } .accent-bar.ochre { background: var(--ochre); } .accent-bar.wine { background: var(--wine); } .accent-bar.sky { background: var(--sky); } .accent-bar.olive { background: var(--olive-m); } .accent-bar.terra { background: var(--terra); } /* photo containers */ .photo-slot { position: relative; width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; color: rgba(237,231,216,0.55); font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.08em; text-align: center; overflow: hidden; filter: contrast(1.12) saturate(0.9) sepia(0.08); } .photo-slot span { position: relative; z-index: 2; background: rgba(13,13,13,0.35); padding: 0.5em 1em; } .photo-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.12) saturate(0.9) sepia(0.08); } .photo-overlay-dark { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.1) 0%, rgba(13,13,13,0.7) 100%); } .photo-overlay-dark.overlay-soft { background: linear-gradient(180deg, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.45) 100%); } .photo-gradient-1 { background: linear-gradient(160deg, var(--forest) 0%, var(--ocean) 100%); } .photo-gradient-2 { background: linear-gradient(200deg, var(--olive) 0%, var(--terra) 100%); } .photo-gradient-3 { background: linear-gradient(135deg, var(--wine) 0%, var(--forest) 100%); } .photo-gradient-4 { background: linear-gradient(180deg, var(--ocean) 0%, var(--sky) 100%); } .photo-gradient-5 { background: radial-gradient(circle at 30% 20%, var(--terra) 0%, var(--forest) 70%); } .photo-gradient-6 { background: linear-gradient(160deg, var(--wine) 0%, var(--ochre) 120%); } .photo-gradient-ochre { background: linear-gradient(160deg, var(--ochre) 0%, var(--terra) 130%); } /* section background alternation: forest -> olive -> ocean -> wine -> forest */ .bg-forest { background: var(--forest); } .bg-olive { background: var(--olive); } .bg-ocean { background: var(--ocean); } .bg-wine { background: var(--wine); } /* ---------- BUTTONS ---------- */ .btn { display: inline-block; font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1em 1.8em; transition: all 0.3s var(--ease-out); white-space: nowrap; border: 1px solid transparent; } .btn-outline { border-color: var(--ochre); color: var(--ochre); background: transparent; } .btn-outline:hover { background: var(--ochre); color: var(--forest); } .btn-filled { background: var(--wine); color: #EDE7D8; border-color: var(--wine); } .btn-filled:hover { background: var(--ochre); border-color: var(--ochre); color: var(--forest); } /* ---------- NAV ---------- */ /* Always transparent — no bar/container ever, on any page. There used to be a dark olive `.site-nav.scrolled` background here (residue from the very first design iteration, long since gone from the Canva file); removed per explicit instruction. `nav.classList.add ('scrolled')` in js/main.js still runs on scroll (harmless, kept for anything else that might key off it), it just no longer paints anything. */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; } .nav-inner { max-width: var(--max-width); margin: 0 auto; height: var(--nav-height); padding: 0 6vw; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .logo { font-family: var(--font-display); font-size: 1.5rem; color: var(--ochre); letter-spacing: 0.05em; } .nav-right { display: flex; align-items: center; gap: 2.2rem; margin-left: auto; } .nav-links { display: flex; gap: 2.2rem; } .nav-links a { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #EDE7D8; position: relative; padding-bottom: 4px; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ochre); transition: width 0.3s var(--ease-out); } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: var(--ochre); } .nav-shop { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237,231,216,0.4); transition: color 0.3s var(--ease-out); } .nav-shop:hover { color: var(--ochre); } .hamburger { display: none; flex-direction: column; gap: 5px; width: 32px; z-index: 1100; } .hamburger span { display: block; height: 2px; width: 100%; background: var(--ochre); transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; background: var(--forest); display: flex; align-items: center; justify-content: center; transform: translateY(-100%); transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s; z-index: 1050; visibility: hidden; pointer-events: none; } .mobile-menu.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 0.5s var(--ease-out); } .mobile-menu ul { text-align: center; } .mobile-menu li { margin: 1.5rem 0; } .mobile-menu a { font-family: var(--font-display); font-size: 2.5rem; color: #EDE7D8; } .mobile-menu a:hover { color: var(--ochre); } .mobile-menu .menu-secondary { margin-top: 1rem; } .mobile-menu .menu-secondary a { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,231,216,0.4); } .mobile-menu .menu-secondary a:hover { color: var(--ochre); } .mobile-menu .lang-switch-mobile { margin-top: 2rem; justify-content: center; } .mobile-menu .lang-switch-mobile button { font-size: 12px; padding: 5px 12px; } /* ---------- HERO (HOME) — floral dreamscape ---------- */ .hero { position: relative; min-height: 100vh; background: var(--forest); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 0 4vw; } .hero-content { position: relative; z-index: 3; max-width: 100%; } .hero-bloom-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.42) saturate(1.15); z-index: 0; pointer-events: none; } .manifesto-bloom-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.35) saturate(1.1) sepia(0.15); z-index: 0; pointer-events: none; } .smells-bloom-bg { /* full original brightness — no filter — per v5: the bloom photo IS the design. negative z-index so it sits behind the section's content without needing to touch every child element's stacking */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; pointer-events: none; } .floral-layer { position: absolute; inset: -5%; width: 110%; height: 110%; z-index: 0; filter: blur(18px); } .floral-layer .petal { animation: petalDrift 34s ease-in-out infinite; transform-origin: center; } .floral-layer .petal:nth-child(3n) { animation-duration: 40s; } .floral-layer .petal:nth-child(3n+1) { animation-duration: 30s; animation-direction: reverse; } .floral-overlay { display: none; } /* superseded by hero-frosted-card — see v5 fixes */ /* v14/v16 homepage redesign — Canva 1:1: wavy orange-line pattern PNGs (exported as-is, not redrawn) as full-bleed section backgrounds, navy/orange/mustard/cream palette. Navy text directly on the pattern, per the Canva mockup. Three distinct oranges are used across the site on purpose (homepage / about-page / vol.02-input) — kept exact, not unified. */ :root { --home-navy: #0a064c; --home-orange: #f57b2e; --home-orange-2: #fc7712; --home-orange-3: #ff7100; --home-mustard: #ffde59; --home-cream: #f9ffd7; --home-olive: #958b51; } /* index.html-only nav COLOR (navy text over the light hero) — layout order used to be mirrored here (logo top-right via row-reverse) as a one-off for this page; standardized site-wide this round instead (logo always top-left, nav+toggle always top-right, identical on all 4 pages — see the shared .site-nav markup and PROJECT_LOG.md), so the row-reverse/margin overrides that used to live here are gone. */ body.page-home .logo, body.page-home .nav-links a { color: var(--home-navy); } body.page-home .nav-links a::after { background: var(--home-navy); } body.page-home .nav-links a:hover { color: var(--home-orange); } .hero-floral { /* the cover DOES use the wavy pattern (confirmed against the source Canva file this round — it was dropped by mistake last round); actual background-image is set inline in index.html with !important, same convention as every other patterned section on this page */ background-image: url('../images/homepage/main_page.png'); background-size: cover; background-position: center; background-attachment: fixed; background-color: #fff; } .hero-eyebrow { position: relative; font-family: var(--font-ui); font-weight: 700; font-style: normal; color: var(--home-navy); font-size: 16px; margin-bottom: 1.4rem; } .hero-title-main { position: relative; font-family: var(--font-display); font-size: clamp(3.5rem, 11vw, 9rem); color: var(--home-navy); line-height: 0.9; } .hero-tagline-new { position: relative; font-family: var(--font-ui); font-weight: 700; font-style: normal; color: var(--home-navy); font-size: clamp(1rem, 2.5vw, 1.3rem); margin: 1.2rem 0 2.2rem; } .hero-tagline-new em { font-style: normal; } .scroll-cta { position: relative; } /* pill button — navy fill, white text (hero CTA, chapter CTA, form submit share the family) */ .btn-pill-cream { display: inline-block; background: var(--home-navy); border: 1.5px solid var(--home-navy); color: #fff; border-radius: 999px; padding: 1.05em 2.2em; font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.03em; transition: background 0.3s var(--ease-out), transform 0.2s var(--ease-out); } .btn-pill-cream:hover { background: #211a6e; transform: translateY(-2px); } .btn-pill-dark { display: inline-block; background: var(--home-navy); border: 1.5px solid var(--home-navy); color: #fff; border-radius: 999px; padding: 1.05em 2.2em; font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.03em; font-weight: 500; transition: background 0.3s var(--ease-out), transform 0.2s var(--ease-out); } .btn-pill-dark:hover { background: #211a6e; transform: translateY(-2px); } /* ---------- "THIS IS NOT A GUIDE" — solid orange band, not the wavy pattern (per current Canva) ---------- */ .manifesto { background: var(--home-orange); padding: clamp(2.2rem, 5vw, 3.6rem) 6vw; text-align: left; } .manifesto-inner { max-width: 780px; text-align: left; margin: 0; } .manifesto-title { font-size: clamp(2rem, 4.6vw, 3rem); color: var(--home-navy); margin-bottom: 1rem; text-align: left; } .manifesto-body { font-family: var(--font-ui); font-weight: 700; font-style: normal; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.7; color: var(--home-navy); white-space: pre-line; max-width: 680px; margin: 0; text-align: left; } .manifesto-body:first-of-type { margin-top: 0; } .manifesto .rule { margin: 2rem 0 0; background: var(--home-navy); opacity: 0.35; } /* five-petal CSS flowers either side of the manifesto text (see Canva mockup) */ .flower-decoration { display: flex; justify-content: center; align-items: flex-end; gap: 32px; margin-bottom: 1.5rem; position: relative; z-index: 1; } .flower { position: relative; width: 120px; height: 190px; flex-shrink: 0; } .flower .petal { position: absolute; top: 40px; left: 50%; width: 60px; height: 38px; border-radius: 50%; transform-origin: 0% 50%; margin-left: -60px; } .flower .petal:nth-child(1) { transform: rotate(0deg) translateX(60px); } .flower .petal:nth-child(2) { transform: rotate(60deg) translateX(60px); } .flower .petal:nth-child(3) { transform: rotate(120deg) translateX(60px); } .flower .petal:nth-child(4) { transform: rotate(180deg) translateX(60px); } .flower .petal:nth-child(5) { transform: rotate(240deg) translateX(60px); } .flower .petal:nth-child(6) { transform: rotate(300deg) translateX(60px); } .flower .flower-center { position: absolute; top: 26px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; z-index: 2; } .flower .stem { position: absolute; top: 50px; left: 50%; width: 3px; height: 140px; background: #7A8560; transform-origin: top center; } .flower-grey .petal { background: #B0A99A; } .flower-grey .stem { transform: rotate(-3deg); } .flower-red .petal { background: #C03020; } .flower-red .stem { transform: rotate(2deg); } .flower-pink .petal { background: #D4607A; } .flower-pink .stem { transform: rotate(-2deg); } .flower-yellow .petal { background: #F5C218; } .flower-yellow .stem { transform: rotate(4deg); } .flower-red, .flower-pink { margin-top: 40px; } /* slightly taller center flowers, per mockup */ /* ---------- MAP SECTION (base — also reused by about.html's reader map, do not scope colors here) ---------- */ .map-section { background: var(--forest); padding: clamp(3rem, 8vw, 5rem) 6vw; text-align: center; } .map-section .section-label { display: block; margin-bottom: 0.6rem; } .map-headline { font-size: clamp(1.8rem, 4.5vw, 2.4rem); color: #fff; margin-bottom: 0.5rem; } .map-sublabel { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--sand); margin-bottom: 2rem; } /* ---------- CHOOSE YOUR DESTINATION — own white section, two columns: legend left, map right. Real interactive jsVectorMap (see index.html