/* zhurnal.css — СЕВАС journal «Как выбрать» (019, build P6, agent zhurnal 28.09): the list and one article on one page. Language of the home (index.html, css/home.css): .jcard photo cards, Dela Gothic One for short big words, Jost for the rest, blue world P10 (blue ground → lighter blue panels, products on plates). References: R06 «Наш блог» (blog cards), S01 moze «Hookah Knowledge» (Beginner Guide in 4 chapters, chapters move right 3 px on hover; the reading column, key facts panel, a product row inside the text). Motion: transform and opacity only; hover 0.2 s (--t-h, --ease-h). */ /* ---------- views: zhurnal.html = the list, zhurnal.html?a= = one article (the script sets html[data-za]) ---------- */ .za, .zv-art { display: none; } html[data-za] .zv-list { display: none; } html[data-za] .zv-art { display: block; } html[data-za="pervyy-kalyan"] .za[data-art="pervyy-kalyan"], html[data-za="kakoy-kalyan"] .za[data-art="kakoy-kalyan"], html[data-za="krepost"] .za[data-art="krepost"], html[data-za="ugol"] .za[data-art="ugol"], html[data-za="aksessuary"] .za[data-art="aksessuary"], html[data-za="darkside"] .za[data-art="darkside"] { display: block; } /* ---------- journal card — the same card as the home block «Журнал: как выбрать» (css/home.css .jcard) ---------- */ .jcard { position: relative; display: grid; align-content: end; gap: 8px; min-height: clamp(360px, 26vw, 640px); padding: clamp(18px, 1.6vw, 34px); border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; } .jcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); } .jcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 16, 24, .05) 28%, rgba(10, 16, 24, .8)); } .jcard:hover img { transform: scale(1.04); } .jcard__cap { font: 600 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; opacity: .9; } .jcard__t { font: 600 clamp(20px, 1.45vw, 34px)/1.15 var(--f-text); letter-spacing: -.005em; max-width: 22ch; } .jcard--big .jcard__t { font: 400 clamp(30px, 2.5vw, 64px)/1.04 var(--f-display); max-width: 15ch; } .jcard__d { font-size: var(--fs-1); line-height: 1.4; opacity: .88; max-width: 40ch; } .jcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 var(--fs-0)/1 var(--f-text); letter-spacing: .02em; } .jcard__go svg { width: 16px; height: 16px; transition: transform var(--t-h) var(--ease-h); } .jcard:hover .jcard__go svg { transform: translate(3px, -3px); } /* ---------- LIST: head ---------- */ .zl-head { padding-block: clamp(24px, 2.2vw, 44px) clamp(26px, 2.4vw, 52px); } .zl-head__row { display: grid; gap: clamp(12px, 1vw, 20px); margin-top: clamp(22px, 2.2vw, 44px); } .zl-head__t { font: 400 clamp(44px, 4vw, 112px)/.98 var(--f-display); letter-spacing: -.02em; } .zl-head__lead { font: 500 var(--fs-3)/1.35 var(--f-text); color: var(--ink-2); max-width: 56ch; } /* B1 guide: the big card + the chapters panel (S01 moze Beginner Guide) */ .zg__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; } .zg__grid .zg__card { grid-column: 1 / span 7; min-height: clamp(440px, 34vw, 860px); } .zg__go { justify-self: start; margin-top: clamp(10px, 1vw, 20px); color: var(--ink); } .zg__go svg { width: 20px; height: 20px; transition: transform var(--t-h) var(--ease-h); } .zg__card:hover .zg__go svg { transform: translateX(4px); } .zg__ch { grid-column: 8 / span 5; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(12px, 1.2vw, 24px); padding: clamp(20px, 1.8vw, 40px); border-radius: var(--r-xl); background: var(--mist); } .zg__list { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; } .zchl { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(12px, 1.2vw, 26px); height: 100%; padding: 8px clamp(14px, 1.2vw, 26px) 8px clamp(16px, 1.4vw, 30px); border-radius: var(--r-l); background: var(--card); transition: transform var(--t-h) var(--ease-h); } .zchl:hover { transform: translateX(3px); } .zchl__n { font: 400 clamp(22px, 1.7vw, 44px)/1 var(--f-display); color: var(--steel); } .zchl__t { font: 600 var(--fs-3)/1.1 var(--f-text); } .zchl__img { width: clamp(60px, 5vw, 124px); height: clamp(60px, 5vw, 124px); object-fit: contain; filter: drop-shadow(0 8px 10px rgba(22, 32, 43, .14)); } .zchl__go { width: 22px; height: 22px; color: var(--link); } .zg__kit { justify-self: start; } /* B2 articles: pills + cards; 3 in a row, a short last row stretches (the count follows the pills) */ .zl-arts .sec__head { align-items: center; flex-wrap: wrap; } .zl-filter .chip { min-height: 44px; padding: 0 20px; font-size: 15px; } .zgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); } .zgrid > .jcard { grid-column: span 2; min-height: clamp(380px, 27vw, 700px); } .zgrid > .jcard:nth-child(3n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])) { grid-column: span 3; } .zgrid > .jcard:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: span 3; } .zgrid > .jcard:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: span 6; } /* ---------- ARTICLE: head — text on the left, a real photo of the hall on the right (as the store and opt pages) ---------- */ .zh { padding-block: clamp(24px, 2.2vw, 44px) clamp(34px, 3.4vw, 80px); } .zh__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; } .zh__txt { grid-column: 1 / span 6; display: grid; align-content: start; gap: clamp(14px, 1.2vw, 24px); } .zh__cap { margin-top: clamp(18px, 2vw, 40px); } .zh__t { font: 400 clamp(38px, 3.3vw, 92px)/1.02 var(--f-display); letter-spacing: -.015em; max-width: 16ch; } .zh__lead { font: 500 var(--fs-3)/1.4 var(--f-text); max-width: 46ch; } .zh__lead--big { font: 400 clamp(26px, 2.2vw, 58px)/1.1 var(--f-display); color: var(--ink); max-width: 20ch; } .zh__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; } .zh__jump { min-height: 44px; padding: 0 18px; background: var(--card); box-shadow: none; font-weight: 600; font-size: 15px; } .zh__jump svg { width: 16px; height: 16px; transition: transform var(--t-h) var(--ease-h); } .zh__jump:hover svg { transform: translateY(3px); } .zh__fig { grid-column: 7 / span 6; position: relative; min-height: clamp(380px, 32vw, 860px); margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--panel); } .zh__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* body: sticky contents + the section card on the left, the reading column (≤ 68ch, big type) */ .zb { padding-bottom: clamp(30px, 3vw, 70px); } .zb__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; } .zb__aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: var(--gutter); } .toc { display: grid; } .toc__cap { margin-bottom: 8px; } .toc a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: var(--fs-1); line-height: 1.35; color: var(--ink-2); } .toc a::before, .toc a::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--line); } .toc a::after { background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform var(--t-h) var(--ease-h); } .toc a:hover { color: var(--ink); } .toc a.is-on { color: var(--ink); font-weight: 600; } .toc a.is-on::after { transform: scaleY(1); } .zsec { display: grid; gap: 10px; justify-items: start; padding: clamp(18px, 1.6vw, 30px); border-radius: var(--r-xl); background: var(--panel); } .zsec__t { font: 400 clamp(22px, 1.5vw, 38px)/1.05 var(--f-display); } .zsec__n { font-weight: 600; font-size: var(--fs-0); color: var(--ink-2); } .zt { grid-column: 4 / span 8; max-width: 68ch; font: 400 clamp(18px, .55vw + 10.5px, 25px)/1.65 var(--f-text); color: var(--ink); } .zt > p + p { margin-top: .85em; } .zt h2 { margin: clamp(40px, 3.2vw, 84px) 0 clamp(12px, 1vw, 22px); font: 400 clamp(26px, 1.9vw, 50px)/1.1 var(--f-display); letter-spacing: -.01em; scroll-margin-top: calc(var(--hdr) + 24px); } .zt > :first-child { margin-top: 0; } .zem { font-weight: 700; color: var(--link); font-size: 1.12em; } .zt__more { margin-top: 1.4em; font-size: .9em; } [id^="iz-stati"], .zch { scroll-margin-top: var(--hdr); } /* data under a paragraph: counts of the catalog as chips (not text of ours — the numbers of data/) */ .zdata { display: grid; gap: 12px; margin-top: 1.1em; padding: clamp(14px, 1.2vw, 22px) clamp(16px, 1.4vw, 26px); border-radius: var(--r-l); background: var(--panel); line-height: 1.3; } .zdata .cap { font-size: 13px; } .zdata .chip { min-height: 36px; font-size: 14px; } .zdata .chip:hover { box-shadow: inset 0 0 0 1px var(--ink-2); } .zdata--ask { background: var(--mist); box-shadow: none; } .zdata__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .zdata__tel { font-weight: 600; font-size: 15px; } .zchips--big { margin-top: .6em; } .zchips--big .chip { min-height: 44px; padding: 0 18px; font-size: 15px; background: var(--card); } /* S01 moze: a product row inside the text — photo on the grey tile, brand, name, the three fields, price and the button */ .zprod { display: grid; grid-template-columns: clamp(88px, 7vw, 150px) 1fr auto; gap: clamp(14px, 1.4vw, 28px); align-items: center; margin: .9em 0 1.1em; padding: 12px clamp(14px, 1.4vw, 26px) 12px 12px; border-radius: var(--r-l); background: var(--panel); line-height: 1.3; } .zprod__ph { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; } .zprod__ph:not(.pl) { background: var(--tile); } .zprod__ph img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform var(--t-h) var(--ease-h); } .zprod:hover .zprod__ph img { transform: scale(.972); } .zprod__body { display: grid; gap: 4px; min-width: 0; } .zprod__b { font: 600 13px/1.2 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .zprod__n { font-weight: 600; font-size: .92em; } .zprod__ch { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: 14px; } .zprod__ch div { display: flex; gap: 6px; } .zprod__ch dt { color: var(--ink-2); } .zprod__ch dt::after { content: ":"; } .zprod__ch dd { margin: 0; font-weight: 600; } .zprod__buy { display: grid; justify-items: end; gap: 10px; } /* the three fields counted: value · bar · how many flavours in stock (a value opens the catalog with that filter) */ .zbars { display: grid; gap: 4px; line-height: 1.3; } .zbar { display: grid; grid-template-columns: minmax(120px, 10.5em) 1fr minmax(92px, auto); gap: clamp(12px, 1vw, 20px); align-items: center; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r-m); font-size: .82em; } .zbar:hover { background: var(--card); } .zbar__l { font-weight: 600; color: var(--link); } .zbar__b { position: relative; height: 12px; border-radius: 6px; background: rgba(244, 239, 232, .12); overflow: hidden; } .zbar__b i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: left; } .zbar__n { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums lining-nums; } .zbars__sum { margin-top: 8px; } /* DARKSIDE: key facts with checks (S01 moze «The key facts»), packs, lines, SHOT list */ .zfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; margin-top: 1.1em; padding: clamp(18px, 1.6vw, 30px); border-radius: var(--r-l); background: var(--panel); font-weight: 500; line-height: 1.35; } .zfacts li { display: flex; gap: 10px; align-items: flex-start; } .zfacts svg { width: 20px; height: 20px; flex: none; margin-top: .1em; color: var(--ok); } .zpack { display: flex; flex-wrap: wrap; gap: 8px; } .zpack li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 600 15px/1 var(--f-text); } .zlines { display: grid; gap: 10px; } .zline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .zline:first-child { border-top: 0; padding-top: 0; } .zline__t { font-weight: 600; font-size: 16px; } .zline__t:hover { color: var(--link); } .zline__n { font-size: 14px; color: var(--ink-2); } .zline .chips { grid-column: 1 / -1; } .zlist { display: grid; gap: 10px; margin-top: .8em; } .zlist li { position: relative; padding-left: 22px; } .zlist li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--steel); } /* «Из статьи»: tiles with price and «Забронировать» (NEW_MAP_4 §11 B3) on the ribbon of the home */ .zfrom { padding-block: clamp(34px, 3.4vw, 90px) clamp(20px, 2vw, 50px); } .zfrom__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px var(--gutter); margin-bottom: clamp(20px, 2vw, 44px); } .zfrom__note { margin-top: 8px; } .zfrom__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; } .zfrom__tools .tabs button { min-height: 40px; font-size: 16px; } .zfrom__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: clamp(24px, 2.4vw, 52px); padding: clamp(18px, 1.8vw, 32px); border-radius: var(--r-xl); background: var(--mist); } /* ---------- GUIDE: chapter pills in the head, four chapters, the set at the end ---------- */ .zh__chs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .zhc { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 6px; border-radius: var(--r-pill); background: var(--card); font-weight: 600; transition: transform var(--t-h) var(--ease-h); } .zhc:hover { transform: translateY(-2px); } .zhc img { width: 40px; height: 40px; border-radius: 50%; background: var(--tile); object-fit: contain; padding: 3px; } .zhc .num { font: 400 15px/1 var(--f-display); color: var(--ink-2); } .zch { padding-block: clamp(28px, 2.6vw, 64px); } .zch + .zch { border-top: 1px solid var(--line); } .zch__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; } .zch__card { grid-column: 1 / span 5; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); grid-template-rows: auto auto 1fr auto; grid-template-areas: "n img" "t img" "q q" "more more"; column-gap: 16px; padding: clamp(22px, 2vw, 44px); border-radius: var(--r-xl); background: var(--bgc, var(--panel)); isolation: isolate; color: var(--navy); } .zch--kalyan { --bgc: linear-gradient(165deg, #ffc9a6 0%, #f2745a 100%); } /* the vivid tiles of the home sections */ .zch--chasha { --bgc: linear-gradient(165deg, #ffd0ea 0%, #b983ee 100%); } .zch--ugol { --bgc: linear-gradient(165deg, #c2f4e2 0%, #38b99d 100%); } .zch--smes { --bgc: linear-gradient(165deg, #fff3a3 0%, #f3b53a 100%); } .zch__n { grid-area: n; font: 400 clamp(56px, 5vw, 140px)/.85 var(--f-display); color: rgba(22, 32, 43, .9); } .zch__t { grid-area: t; margin-top: 10px; font: 400 clamp(32px, 2.6vw, 72px)/1 var(--f-display); letter-spacing: -.01em; } .zch__img { grid-area: img; justify-self: end; width: 100%; height: clamp(150px, 13vw, 340px); object-fit: contain; object-position: right top; filter: drop-shadow(0 18px 22px rgba(22, 32, 43, .2)); transition: transform var(--t-h) var(--ease-h); } .zch__card:hover .zch__img { transform: translateY(-6px) rotate(-2deg); } .zq { grid-area: q; align-self: end; display: grid; gap: 8px; margin: clamp(18px, 1.6vw, 34px) 0 0; padding-left: 16px; border-left: 3px solid rgba(22, 32, 43, .75); font: 500 var(--fs-2)/1.4 var(--f-text); max-width: 40ch; } .zch__more { grid-area: more; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(14px, 1.2vw, 24px); font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .zch__more svg { width: 18px; height: 18px; transition: transform var(--t-h) var(--ease-h); } .zch__more:hover svg { transform: translateX(4px); } .zch__tiles { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-content: start; } .zkt { display: grid; gap: 10px; align-content: start; min-width: 0; } .zkt__lvl { justify-self: start; padding: 7px 12px; border-radius: var(--r-pill); background: var(--panel); font: 600 13px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } .zkit { padding-block: clamp(28px, 2.6vw, 64px) clamp(20px, 2vw, 50px); } .zkit__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; padding: clamp(28px, 3vw, 72px); border-radius: var(--r-xl); background: var(--panel); } .zkit__head { grid-column: 1 / span 4; display: grid; gap: 14px; justify-items: start; } .zkit__head .lead { font-size: var(--fs-2); } .zkit__cta { margin-top: 8px; } .zkit__tg { font-weight: 500; } .zkit__lv { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } .zlv { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 1.6vw, 30px); border-radius: var(--r-xl); background: var(--card); } .zlv.is-main { box-shadow: inset 0 0 0 2px var(--ink); } .zlv__t { font: 400 clamp(22px, 1.6vw, 40px)/1 var(--f-display); } .zlv__imgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .zlv__imgs a { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; } .zlv__imgs img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform var(--t-h) var(--ease-h); } .zlv__imgs a:hover img { transform: scale(.94); } .zlv__list { display: grid; gap: 6px; font-size: 14px; line-height: 1.3; } .zlv__list li { display: grid; grid-template-columns: 5.6em 1fr; gap: 8px; } .zlv__list small { color: var(--ink-3); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; padding-top: 1px; } .zlv__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zlv__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; } .zlv__sum .price { font-size: clamp(22px, 1.6vw, 38px); } .zlv .btn { width: 100%; } /* ---------- tail: more articles · advice in the client's words ---------- */ .zmore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } .zmore__grid .jcard { min-height: clamp(340px, 24vw, 600px); } .zmore__grid .jcard--big .jcard__t { font: 600 clamp(20px, 1.45vw, 34px)/1.15 var(--f-text); max-width: 22ch; } .zask { padding-top: 0; } .zask__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; padding: clamp(24px, 2.6vw, 60px); border-radius: var(--r-xl); background: var(--mist); } .zask__txt { grid-column: 1 / span 7; display: grid; gap: 12px; } .zask__t { font: 400 clamp(26px, 2.1vw, 56px)/1.08 var(--f-display); max-width: 20ch; } .zask__d { font-size: var(--fs-2); line-height: 1.45; color: var(--ink-2); max-width: 60ch; } .zask__cta { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } /* the header item «Журнал» is underlined on this page (layout.css .is-cur) */