:root{ --bg: #FFFFFF; /* Flowwow Pink by default */ --bg-rgb: 255,255,255; --text: #222725; /* темный графит */ --muted: rgba(34,39,37,.66); --muted2: rgba(34,39,37,.52); --line: rgba(34,39,37,.10); --card: rgba(255,255,255,.78); --card2: rgba(255,255,255,.62); --mint: rgba(255, 231, 242, .55); /* мягкий розовый оттенок */ --accent: #D92C74; /* яркий Flowwow-розовый */ --accent-rgb: 217,44,116; --accent-hover: #C32667; --accent-active: #AA1F59; --accent2: rgba(var(--accent-rgb), .12); --shadow: 0 18px 44px rgba(27,39,35,.08); --shadow2: 0 10px 28px rgba(27,39,35,.06); --radius-lg: 18px; --radius-md: 14px; --radius-sm: 12px; --container-max: 1280px; } /* ===== THEMES (switch with: ) ===== */ html[data-theme="rose"]{ --bg: #FFFFFF; --bg-rgb: 255,255,255; --accent: #D92C74; --accent-rgb: 217,44,116; --accent-hover: #C32667; --accent-active: #AA1F59; --mint: rgba(255, 231, 242, .55); } html[data-theme="emerald"]{ --bg: #FBF7F2; --bg-rgb: 251,247,242; --accent: #0B6B53; --accent-rgb: 11,107,83; --accent-hover: #085B47; --accent-active: #074D3D; --mint: rgba(220, 240, 232, .55); } /* Пудровая роза: очень мягкий фон + спокойный rose */ html[data-theme="blush"]{ --bg: #FFF6F3; --bg-rgb: 255,246,243; --accent: #B85C77; --accent-rgb: 184,92,119; --accent-hover: #A65069; --accent-active: #91485D; --mint: rgba(255, 228, 232, .55); } /* Шампань/золото: теплый крем + благородный gold */ html[data-theme="champagne"]{ --bg: #FBF8F2; --bg-rgb: 251,248,242; --accent: #9A6B2F; --accent-rgb: 154,107,47; --accent-hover: #865D29; --accent-active: #725024; --mint: rgba(240, 232, 214, .62); } /* Слива: прохладный молочный фон + глубокий plum */ html[data-theme="plum"]{ --bg: #FBF7FF; --bg-rgb: 251,247,255; --accent: #5A2C6E; --accent-rgb: 90,44,110; --accent-hover: #4C255C; --accent-active: #3F1E4B; --mint: rgba(233, 227, 255, .62); } /* Коралл: нежный крем + тёплый коралл */ html[data-theme="coral"]{ --bg: #FFF8F0; --bg-rgb: 255,248,240; --accent: #E05A4F; --accent-rgb: 224,90,79; --accent-hover: #C94F46; --accent-active: #AF433B; --mint: rgba(255, 232, 215, .62); } /* Сапфир: чистый белый + холодный синий (современно) */ html[data-theme="sapphire"]{ --bg: #FFFFFF; --bg-rgb: 255,255,255; --accent: #1E5BD7; --accent-rgb: 30,91,215; --accent-hover: #184DBA; --accent-active: #14419D; --mint: rgba(221, 236, 255, .62); } /* Бордо/вино: мягкий крем + глубокий винный */ html[data-theme="wine"]{ --bg: #FFF7F2; --bg-rgb: 255,247,242; --accent: #7A1E3A; --accent-rgb: 122,30,58; --accent-hover: #65192F; --accent-active: #531427; --mint: rgba(255, 224, 232, .55); } /* Шалфей: очень светлый зеленоватый фон + спокойный sage */ html[data-theme="sage"]{ --bg: #F7FAF6; --bg-rgb: 247,250,246; --accent: #3F6D5B; --accent-rgb: 63,109,91; --accent-hover: #345A4B; --accent-active: #2B4A3D; --mint: rgba(218, 236, 228, .62); } /* Монохром: чистый белый + графит/черный (максимально строгий) */ html[data-theme="mono"]{ --bg: #FFFFFF; --bg-rgb: 255,255,255; --accent: #111111; --accent-rgb: 17,17,17; --accent-hover: #000000; --accent-active: #000000; --mint: rgba(240, 240, 240, .62); } /* ===== THEMES (switch with: ) ===== */ html[data-theme="emerald"]{ --bg: #FBF7F2; --accent: #0B6B53; --accent-rgb: 11,107,83; --accent-hover: #085B47; --accent-active: #074D3D; --mint: rgba(220, 240, 232, .55); } /* В духе Flowwow: белый + яркий розовый */ html[data-theme="rose"]{ --bg: #FFFFFF; --accent: #D92C74; --accent-rgb: 217,44,116; --accent-hover: #C32667; --accent-active: #AA1F59; --mint: rgba(255, 231, 242, .55); } /* Пудровая роза: очень мягкий фон + спокойный rose */ html[data-theme="blush"]{ --bg: #FFF6F3; --accent: #B85C77; --accent-rgb: 184,92,119; --accent-hover: #A65069; --accent-active: #91485D; --mint: rgba(255, 228, 232, .55); } /* Шампань/золото: теплый крем + благородный gold */ html[data-theme="champagne"]{ --bg: #FBF8F2; --accent: #9A6B2F; --accent-rgb: 154,107,47; --accent-hover: #865D29; --accent-active: #725024; --mint: rgba(240, 232, 214, .62); } /* Слива: прохладный молочный фон + глубокий plum */ html[data-theme="plum"]{ --bg: #FBF7FF; --accent: #5A2C6E; --accent-rgb: 90,44,110; --accent-hover: #4C255C; --accent-active: #3F1E4B; --mint: rgba(233, 227, 255, .62); } /* Коралл: нежный крем + тёплый коралл */ html[data-theme="coral"]{ --bg: #FFF8F0; --accent: #E05A4F; --accent-rgb: 224,90,79; --accent-hover: #C94F46; --accent-active: #AF433B; --mint: rgba(255, 232, 215, .62); } /* Сапфир: чистый белый + холодный синий (современно) */ html[data-theme="sapphire"]{ --bg: #FFFFFF; --accent: #1E5BD7; --accent-rgb: 30,91,215; --accent-hover: #184DBA; --accent-active: #14419D; --mint: rgba(221, 236, 255, .62); } /* Бордо/вино: мягкий крем + глубокий винный */ html[data-theme="wine"]{ --bg: #FFF7F2; --accent: #7A1E3A; --accent-rgb: 122,30,58; --accent-hover: #65192F; --accent-active: #531427; --mint: rgba(255, 224, 232, .55); } /* Шалфей: очень светлый зеленоватый фон + спокойный sage */ html[data-theme="sage"]{ --bg: #F7FAF6; --accent: #3F6D5B; --accent-rgb: 63,109,91; --accent-hover: #345A4B; --accent-active: #2B4A3D; --mint: rgba(218, 236, 228, .62); } /* Монохром: чистый белый + графит/черный (максимально строгий) */ html[data-theme="mono"]{ --bg: #FFFFFF; --accent: #111111; --accent-rgb: 17,17,17; --accent-hover: #000000; --accent-active: #000000; --mint: rgba(240, 240, 240, .62); } html,body{ height: 100%; } body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } a{ color: var(--accent); text-decoration: none; } a:hover{ color: var(--accent-hover); } .hfont{ font-family: Fraunces, Georgia, serif; letter-spacing: -0.02em; } .smallcaps{ letter-spacing: .10em; text-transform: uppercase; font-size: .72rem; } .skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left: 16px; top: 16px; width:auto; height:auto; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius: 10px; z-index: 9999; box-shadow: var(--shadow2); } .container-xxl{ max-width: var(--container-max); } /* Subtle dew micro-droplets pattern (VERY low contrast) */ .dew-bg{ position: relative; overflow: clip; } .dew-bg::before{ content:""; position:absolute; inset:-120px; background-image: radial-gradient(circle at 18px 18px, rgba(var(--accent-rgb),.08) 1px, transparent 2px), radial-gradient(circle at 44px 52px, rgba(34,39,37,.06) 1px, transparent 2px), radial-gradient(circle at 72px 24px, rgba(var(--accent-rgb),.07) 1px, transparent 2px), radial-gradient(circle at 96px 66px, rgba(34,39,37,.05) 1px, transparent 2px), radial-gradient(circle at 124px 32px, rgba(var(--accent-rgb),.06) 1px, transparent 2px); background-size: 140px 96px; opacity: .18; /* very subtle */ filter: blur(.2px); pointer-events:none; z-index: 0; } .dew-bg > *{ position: relative; z-index: 1; } /* Header */ .site-header{ background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(34,39,37,.08); } .topbar{ font-size: .86rem; color: var(--muted); border-bottom: 1px solid rgba(34,39,37,.06); } .topbar .dot{ display:inline-block; width:4px; height:4px; border-radius:50%; background: rgba(34,39,37,.35); margin: 0 .55rem; transform: translateY(-1px); } .brandmark{ display:flex; align-items:center; gap:.55rem; } .brandmark__logo{ width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.05)); border: 1px solid rgba(var(--accent-rgb),.18); position: relative; box-shadow: 0 10px 22px rgba(var(--accent-rgb),.10); } .brandmark__logo::after{ content:""; position:absolute; inset: 9px 11px 11px 9px; border-radius: 10px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 62%); opacity:.65; } .brandmark__name{ font-weight: 700; letter-spacing: -0.02em; } .brandmark__tag{ color: var(--muted2); font-size: .82rem; margin-top: -2px; } .search-wrap{ position: relative; } .search-input{ border-radius: 999px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.65); padding-left: 44px; box-shadow: 0 10px 26px rgba(27,39,35,.05); font-size: 0.85rem; } .search-icon{ position:absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(34,39,37,.55); } .search-dropdown{ position:absolute; left:0; right:0; top: calc(100% + 8px); background: rgba(255,255,255,.96); border: 1px solid rgba(34,39,37,.10); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display:none; z-index: 2000; } .search-item{ padding: 12px 14px; display:flex; gap: 10px; align-items: center; border-bottom: 1px solid rgba(34,39,37,.06); cursor:pointer; } .search-item:last-child{ border-bottom: 0; } .search-item:hover{ background: rgba(var(--accent-rgb),.06); } .search-thumb{ width: 38px; height: 38px; border-radius: 12px; background-size: cover; background-position: center; border: 1px solid rgba(34,39,37,.08); flex: 0 0 auto; } .search-meta{ min-width: 0; flex: 1 1 auto; } .search-title{ font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-sub{ color: var(--muted2); font-size: .86rem; } .icon-btn{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.58); display: inline-flex; align-items:center; justify-content:center; box-shadow: 0 10px 26px rgba(27,39,35,.05); position: relative; } .icon-btn:hover{ border-color: rgba(var(--accent-rgb),.26); background: rgba(255,255,255,.78); } .badge-dot{ position:absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 6px; background: var(--accent); color:#fff; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size: .72rem; line-height: 1; box-shadow: 0 10px 22px rgba(var(--accent-rgb),.18); border: 2px solid rgba(var(--bg-rgb), .95); } .btn-emerald{ --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); border-radius: 999px; box-shadow: 0 14px 30px rgba(var(--accent-rgb),.18); } .btn-ghost{ border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.24); background: rgba(255,255,255,.55); color: var(--accent); } .btn-ghost:hover{ background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.30); color: var(--accent-hover); } .nav-pill{ border-radius: 999px; border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.52); padding: .55rem .95rem; color: rgba(34,39,37,.78); font-weight: 600; } .nav-pills .nav-link.active{ background: rgba(var(--accent-rgb),.10); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.22); } /* Hero */ .hero{ position: relative; border-bottom: 1px solid rgba(34,39,37,.06); } .hero::before{ content:""; position:absolute; inset: -80px -40px -40px -40px; background: radial-gradient(1200px 600px at 18% 10%, rgba(var(--accent-rgb),.06), transparent 65%), radial-gradient(800px 500px at 75% 20%, rgba(34,39,37,.05), transparent 70%), radial-gradient(500px 260px at 58% 60%, rgba(var(--accent-rgb),.05), transparent 72%); pointer-events:none; z-index: 0; } /* Dew bokeh: soft circles */ .hero::after{ content:""; position:absolute; inset: -120px -60px -60px -60px; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.50) 0 40px, transparent 70px), radial-gradient(circle at 22% 58%, rgba(255,255,255,.40) 0 28px, transparent 62px), radial-gradient(circle at 78% 22%, rgba(255,255,255,.36) 0 34px, transparent 66px), radial-gradient(circle at 86% 62%, rgba(255,255,255,.30) 0 22px, transparent 52px); filter: blur(8px); opacity: .55; pointer-events:none; z-index: 0; } .hero .container-xxl{ position: relative; z-index: 1; } .hero-card{ border-radius: var(--radius-lg); background: rgba(255,255,255,.60); border: 1px solid rgba(34,39,37,.10); box-shadow: var(--shadow); overflow: hidden; position: relative; } .hero-card::before{ /* subtle micro-droplets only in empty background, not on product image */ content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 18px 18px, rgba(var(--accent-rgb),.08) 1px, transparent 2px), radial-gradient(circle at 64px 52px, rgba(34,39,37,.06) 1px, transparent 2px), radial-gradient(circle at 112px 24px, rgba(var(--accent-rgb),.07) 1px, transparent 2px); background-size: 150px 100px; opacity: .16; pointer-events:none; } .hero-image{ border-radius: calc(var(--radius-lg) - 2px); overflow: hidden; border: 1px solid rgba(34,39,37,.08); background: rgba(255,255,255,.62); box-shadow: var(--shadow2); position: relative; } .hero-image img{ width:100%; height: 520px; object-fit: cover; display:block; } @media (max-width: 991.98px){ .hero-image img{ height: 360px; } } .mini-ico{ width: 34px; height: 34px; border-radius: 12px; background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.14); display:flex; align-items:center; justify-content:center; flex: 0 0 auto; } .mini-ico svg{ width: 18px; height: 18px; } .mini-text{ font-size: .95rem; color: rgba(34,39,37,.74); line-height: 1.25; } /* Sections */ .section{ padding: 74px 0; } @media (max-width: 991.98px){ .section{ padding: 56px 0; } } .section-title{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 26px; } .section-title h2{ margin:0; font-size: clamp(1.35rem, 1.1rem + 1.0vw, 2.05rem); } .section-title .sub{ margin:0; color: var(--muted2); font-size: 1rem; max-width: 54ch; } /* Category tiles */ .tile{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.64); box-shadow: var(--shadow2); overflow:hidden; position: relative; min-height: 120px; display:flex; align-items:flex-end; padding: 16px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .tile::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,.00) 60%); opacity: .32; pointer-events:none; } .tile::after{ /* very soft "morning light" highlight on hover */ content:""; position:absolute; inset:-20px; background: radial-gradient(420px 200px at 30% 20%, rgba(255,255,255,.55), transparent 62%); opacity: 0; transition: opacity .18s ease; pointer-events:none; mix-blend-mode: screen; } .tile:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.18); box-shadow: var(--shadow); } .tile:hover::after{ opacity: .35; } .tile-bg{ position:absolute; inset:0; background-size: cover; background-position: center; filter: saturate(1.02) contrast(1.02); transform: scale(1.02); box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.2) inset; } .tile-label{ position: relative; z-index: 2; color: rgba(255,255,255,.95); font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 8px 22px rgba(0,0,0,.22); } /* Product cards */ .pcard{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.66); box-shadow: var(--shadow2); overflow:hidden; height: 100%; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .pmedia{ position: relative; border-bottom: 1px solid rgba(34,39,37,.06); background: rgba(255,255,255,.50); overflow:hidden; } .pmedia img{ width: 100%; height: 240px; object-fit: cover; display:block; transform: scale(1.01); } @media (max-width: 575.98px){ .pmedia img{ height: 200px; } } .pbadge{ position:absolute; top: 12px; left: 12px; display:flex; gap: 8px; flex-wrap: wrap; } .pill{ padding: 6px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.72); color: rgba(34,39,37,.78); backdrop-filter: blur(8px); } .pill--accent{ background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.20); color: var(--accent); } .pill--sale{ background: rgba(34,39,37,.10); border-color: rgba(34,39,37,.14); color: rgba(34,39,37,.80); } /* Dew reflection hover on cards */ .pcard::after{ content:""; position:absolute; inset:0; background: radial-gradient(520px 240px at 35% 10%, rgba(255,255,255,.55), transparent 62%); opacity: 0; transition: opacity .18s ease; pointer-events:none; mix-blend-mode: screen; } .pcard:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.18); box-shadow: var(--shadow); } .pcard:hover::after{ opacity: .24; } .pbody{ padding: 16px 16px 14px 16px; } .pname{ font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmeta{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; color: var(--muted2); font-size: .90rem; margin-bottom: 10px; } .pmeta .sep{ width: 4px; height: 4px; border-radius: 99px; background: rgba(34,39,37,.30); display:inline-block; } .price-row{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; margin: 10px 0 12px 0; } .price{ font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; } .oldprice{ font-size: .92rem; color: rgba(34,39,37,.45); text-decoration: line-through; margin-left: 8px; font-weight: 600; } .pactions{ display:flex; gap: 10px; align-items:center; } .btn-cart{ border-radius: 999px; font-weight: 700; } .link-quiet{ color: rgba(34,39,37,.62); font-weight: 700; font-size: .92rem; padding: 0; } .link-quiet:hover{ color: var(--accent); } /* Author cards */ .acard{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.64); box-shadow: var(--shadow2); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height: 100%; position: relative; } .acard:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.18); box-shadow: var(--shadow); } .acard img{ width: 100%; height: 180px; object-fit: cover; display:block; } .acard .abody{ padding: 14px; } .atitle{ font-weight: 800; margin: 0 0 6px 0; } .asub{ color: var(--muted2); margin:0; font-size: .92rem; } /* Constructor */ .formcard{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.68); box-shadow: var(--shadow); overflow:hidden; position: relative; } .formcard .head{ padding: 18px 18px 0 18px; } .formcard .body{ padding: 14px 18px 18px 18px; } .chipset-label{ font-weight: 800; margin: 16px 0 10px 0; } .chip{ border-radius: 999px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.62); padding: 10px 12px; font-weight: 700; color: rgba(34,39,37,.70); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; white-space: nowrap; } .chip:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.20); background: rgba(var(--accent-rgb),.06); color: rgba(34,39,37,.82); } .chip.active{ border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.10); color: var(--accent); box-shadow: 0 14px 28px rgba(var(--accent-rgb),.10); } .textarea-clean{ border-radius: 16px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.62); padding: 12px 12px; min-height: 100px; resize: vertical; } /* Trust */ .trust{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.62); box-shadow: var(--shadow2); padding: 18px; height: 100%; } .trust .ico{ width: 44px; height: 44px; border-radius: 16px; background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.16); display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 28px rgba(var(--accent-rgb),.08); margin-bottom: 12px; } .trust h3{ font-size: 1.05rem; margin: 0 0 8px 0; font-weight: 900; } .trust p{ margin:0; color: var(--muted2); line-height: 1.45; } /* Promo strip */ .promo{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: radial-gradient(900px 240px at 18% 20%, rgba(var(--accent-rgb),.10), transparent 64%), radial-gradient(600px 240px at 80% 35%, rgba(34,39,37,.06), transparent 70%), rgba(255,255,255,.62); box-shadow: var(--shadow); padding: 22px; position: relative; overflow:hidden; } .promo::after{ content:""; position:absolute; inset:-40px; background-image: radial-gradient(circle at 18px 18px, rgba(var(--accent-rgb),.08) 1px, transparent 2px), radial-gradient(circle at 72px 44px, rgba(34,39,37,.06) 1px, transparent 2px); background-size: 150px 100px; opacity: .10; pointer-events:none; } .promo > *{ position: relative; z-index: 1; } /* Formats tiles */ .format{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); box-shadow: var(--shadow2); overflow:hidden; background: rgba(255,255,255,.58); position: relative; min-height: 220px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .format:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.18); box-shadow: var(--shadow); } .format img{ width:100%; height: 260px; object-fit: cover; display:block; filter: saturate(1.02); } .format .label{ position:absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(34,39,37,.12); font-weight: 900; box-shadow: 0 14px 28px rgba(27,39,35,.08); } /* Reviews */ .rating-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.62); box-shadow: var(--shadow2); font-weight: 900; } .stars{ display:inline-flex; gap: 2px; transform: translateY(-1px); } .stars svg{ width: 16px; height: 16px; } .review{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.64); box-shadow: var(--shadow2); padding: 16px; height: 100%; } .review .top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; } .review .name{ font-weight: 900; margin:0; } .review .date{ color: rgba(34,39,37,.50); font-size: .86rem; } .review .text{ color: rgba(34,39,37,.72); margin: 10px 0 0 0; line-height: 1.50; } .review .thumb{ width: 56px; height: 56px; border-radius: 16px; border: 1px solid rgba(34,39,37,.10); background-size: cover; background-position:center; flex: 0 0 auto; box-shadow: 0 10px 22px rgba(27,39,35,.08); } /* Mini guide cards */ .gcard{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.64); box-shadow: var(--shadow2); padding: 16px; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; overflow:hidden; } .gcard:hover{ transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.18); box-shadow: var(--shadow); } .gcard .kicker{ color: rgba(34,39,37,.55); margin-bottom: 10px; } .gcard h3{ font-size: 1.12rem; margin: 0 0 8px 0; font-weight: 950; } .gcard p{ margin: 0; color: rgba(34,39,37,.70); line-height: 1.45; } /* Footer */ footer{ border-top: 1px solid rgba(34,39,37,.08); background: rgba(255,255,255,.30); } .footbox{ border-radius: var(--radius-lg); border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.56); box-shadow: var(--shadow2); padding: 22px; } .foot-title{ font-weight: 950; margin-bottom: 12px; } .footlink{ display:block; padding: 6px 0; color: rgba(34,39,37,.72); font-weight: 650; } .footlink:hover{ color: var(--accent); } .paychips{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .paychip{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.55); font-weight: 800; color: rgba(34,39,37,.68); font-size: .86rem; } /* Focus ring */ :focus-visible{ outline: 3px solid rgba(var(--accent-rgb),.22); outline-offset: 3px; border-radius: 12px; } /* Mobile dock */ .mobile-dock{ position: fixed; left: 0; right: 0; bottom: 0; background: rgba(var(--bg-rgb), .86); backdrop-filter: blur(10px); border-top: 1px solid rgba(34,39,37,.10); z-index: 1050; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .dock-btn{ border-radius: 16px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.62); box-shadow: 0 12px 26px rgba(27,39,35,.06); padding: 12px 10px; display:flex; align-items:center; justify-content:center; gap: 8px; font-weight: 900; color: rgba(34,39,37,.80); width: 100%; } .dock-btn--accent{ background: rgba(var(--accent-rgb),.10); border-color: rgba(var(--accent-rgb),.18); color: var(--accent); } .dock-btn svg{ width: 18px; height: 18px; } /* Ensure content not hidden behind dock on mobile */ @media (max-width: 991.98px){ main{ padding-bottom: 96px; } } /* Offcanvas look */ .offcanvas{ background: rgba(var(--bg-rgb), .94); backdrop-filter: blur(10px); } .cart-line{ border-radius: 16px; border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.66); box-shadow: var(--shadow2); padding: 12px; display:flex; gap: 12px; align-items: center; } .cart-thumb{ width: 58px; height: 58px; border-radius: 16px; border: 1px solid rgba(34,39,37,.10); background-size: cover; background-position: center; flex: 0 0 auto; } .cart-title{ font-weight: 900; line-height: 1.2; margin: 0 0 4px 0; } .cart-sub{ color: rgba(34,39,37,.62); font-size: .90rem; margin:0; } .qty-btn{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(34,39,37,.12); background: rgba(255,255,255,.64); display:flex; align-items:center; justify-content:center; font-weight: 900; color: rgba(34,39,37,.75); } .qty-btn:hover{ border-color: rgba(var(--accent-rgb),.22); color: var(--accent); background: rgba(var(--accent-rgb),.06); } .qty-num{ min-width: 34px; text-align:center; font-weight: 900; color: rgba(34,39,37,.80); } /* Toast */ .toast{ border-radius: 16px !important; border: 1px solid rgba(34,39,37,.10) !important; background: rgba(255,255,255,.86) !important; box-shadow: var(--shadow) !important; color: rgba(34,39,37,.86) !important; overflow:hidden; } /* ===== Dew drops (more visible, still premium) ===== */ .dew-drops{ position:absolute; inset:0; pointer-events:none; z-index:0; } .dew-drop{ position:absolute; border-radius: 999px; background: radial-gradient(circle at 28% 28%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 26%, rgba(255,255,255,.20) 48%, rgba(var(--accent-rgb),.10) 62%, rgba(255,255,255,0) 72%); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 22px 46px rgba(27,39,35,.10); backdrop-filter: blur(6px); opacity: .55; } .dew-drop--1{ width: 64px; height: 64px; top: -18px; left: -14px; transform: rotate(-10deg); } .dew-drop--2{ width: 52px; height: 52px; top: 18%; right: -22px; opacity: .46; } .dew-drop--3{ width: 78px; height: 78px; bottom: -30px; left: 16%; opacity: .34; } .hero-card > .position-relative{ z-index: 1; } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; scroll-behavior: auto !important; } } /* Theme dropdown */ .dropdown-menu{ border-radius: 16px; border: 1px solid rgba(34,39,37,.10); background: rgba(255,255,255,.96); box-shadow: var(--shadow); } .dropdown-menu .dropdown-item{ font-weight: 700; color: rgba(34,39,37,.80); } .dropdown-menu .dropdown-item:hover{ background: rgba(var(--accent-rgb), .06); } .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active{ background: rgba(var(--accent-rgb), .10); color: var(--accent); } /* ===== Floating theme switcher (top-left) ===== */ .theme-floater{ position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-left, 0px)); z-index: 4000; /* ниже skip-link (9999), чтобы не мешать доступности */ } .theme-btn{ display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .78rem; border-radius: 999px; border: 1px solid rgba(34,39,37,.12); background: rgba(var(--bg-rgb), .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow2); color: rgba(34,39,37,.86); font-weight: 800; letter-spacing: -0.01em; line-height: 1; } .theme-btn::before{ /* subtle dew micro-droplets */ content:""; position:absolute; inset:-6px; border-radius: 999px; pointer-events:none; background-image: radial-gradient(circle at 18px 18px, rgba(var(--accent-rgb),.10) 1px, transparent 2px), radial-gradient(circle at 46px 30px, rgba(34,39,37,.06) 1px, transparent 2px), radial-gradient(circle at 72px 18px, rgba(var(--accent-rgb),.08) 1px, transparent 2px); background-size: 120px 72px; opacity: .22; filter: blur(.15px); } .theme-btn{ position: relative; overflow: hidden; } .theme-btn:hover{ border-color: rgba(var(--accent-rgb), .26); box-shadow: var(--shadow); } .theme-btn:focus{ outline: none; } .theme-btn:focus-visible{ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), var(--shadow); border-color: rgba(var(--accent-rgb), .32); } .theme-btn__dot{ width: 12px; height: 12px; border-radius: 999px; background: var(--accent); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .22); border: 2px solid rgba(var(--bg-rgb), .92); flex: 0 0 auto; } .theme-btn__text{ font-size: .92rem; } .theme-btn__chev{ opacity: .70; transform: translateY(1px); } .theme-menu{ min-width: 220px; padding: .45rem; border-radius: 16px; border: 1px solid rgba(34,39,37,.10); background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); } .theme-menu .dropdown-item{ display:flex; align-items:center; gap: .65rem; border-radius: 12px; padding: .55rem .65rem; font-weight: 800; color: rgba(34,39,37,.80); } .theme-swatch{ width: 14px; height: 14px; border-radius: 999px; background: var(--sw); box-shadow: 0 12px 22px rgba(27,39,35,.10); border: 2px solid rgba(255,255,255,.85); flex: 0 0 auto; } .theme-menu .dropdown-item:hover{ background: rgba(var(--accent-rgb), .06); } .theme-menu .dropdown-item.active, .theme-menu .dropdown-item:active{ background: rgba(var(--accent-rgb), .10); color: var(--accent); } .theme-menu .dropdown-item.active .theme-swatch{ border-color: rgba(var(--accent-rgb), .22); } /*compact header*/ @media (max-width: 991.98px){ /* 1. Верхнюю сервисную полоску убираем: на мобильном она съедает место, а ключевые преимущества можно оставить в контенте страницы */ .topbar{ display: none; } /* 2. Ужимаем основной контейнер шапки */ .site-header > .py-3{ padding-top: .65rem !important; padding-bottom: .55rem !important; } .site-header .container-xxl > .row{ --bs-gutter-y: .55rem; --bs-gutter-x: .75rem; } /* 3. Логотип делаем компактнее */ .brandmark{ gap: .45rem; min-width: 0; } .brandmark__logo{ width: 28px; height: 28px; border-radius: 10px; box-shadow: 0 6px 14px rgba(var(--accent-rgb),.10); } .brandmark__logo::after{ inset: 7px 9px 9px 7px; border-radius: 8px; } .brandmark__name{ font-size: .96rem; line-height: 1.05; } .brandmark__tag{ display: none; } /* 4. Иконки справа уменьшаем */ .icon-btn{ width: 40px; height: 40px; box-shadow: 0 6px 16px rgba(27,39,35,.05); } .icon-btn svg{ width: 18px; height: 18px; } .badge-dot{ top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: .65rem; padding: 0 4px; } /* 5. Поиск делаем ниже по высоте */ .search-input{ min-height: 44px; font-size: .82rem; padding-left: 40px; padding-right: 14px; box-shadow: 0 6px 16px rgba(27,39,35,.04); } .search-icon{ left: 14px; } .search-icon svg{ width: 16px; height: 16px; } /* 6. Убираем отдельную WhatsApp-плашку под поиском, потому что снизу уже есть mobile dock с WhatsApp */ .site-header .d-lg-none.mt-2{ display: none !important; } /* 7. Чуть аккуратнее распределяем ширину логотип / действия */ .site-header .col-7.col-lg-3{ width: 58.33333333%; } .site-header .col-5.col-lg-5{ width: 41.66666667%; } .site-header .col-5.col-lg-5 .d-flex{ gap: .4rem !important; } } @media (max-width: 575.98px){ /* Ещё плотнее для совсем узких экранов */ .site-header > .py-3{ padding-top: .55rem !important; padding-bottom: .45rem !important; } .brandmark__name{ font-size: .9rem; } .icon-btn{ width: 38px; height: 38px; } .search-input{ min-height: 42px; font-size: .8rem; } }