` elements on the * legacy inner pages keep their own spacing and font. `:where()` is used * so the scoping adds NO specificity and the original cascade is intact. * 4. Admin bar offset for the fixed nav appended at the very end. */ /* Every colour token now lives in css/palette.css, which loads before this file and ships two palettes behind one `data-palette` attribute. Only the non-colour token is left here. */ :root{ --ease:cubic-bezier(.22,.7,.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* [scoped] source rule was a bare `body{}`; typography/background are limited to the redesigned home page so the legacy inner pages keep Montserrat and their own backgrounds. The chrome selectors below re-apply Manrope to the new header/menu/footer, which do render on every page. */ /* `clip` instead of the source's `hidden`: overflow-x:hidden turns into a scroll container, which silently breaks every position:sticky descendant (the pinned process track). `clip` suppresses overflow without doing that. */ body{-webkit-font-smoothing:antialiased;overflow-x:clip} /* Client: no orphaned single word wrapping onto its own line when there was room to fit it above - "как книга, строчка к строчке". Progressive enhancement (Chrome/Edge 114+, Firefox 121+); browsers without support just keep the plain wrap they already had. */ h1,h2,h3,h4,.wsplit .ln,.eyebrow,.hero-lede,.hero-pill{text-wrap:balance} p{text-wrap:pretty} /* Instrument Serif shipped a single weight, so these headings never declared font-weight and simply inherited it. Manrope carries 300-700, so without a declaration they drop to the browser's BOLD default - the "излишняя жирность текста" from the client's review. Display sizes read expensive light; small card headings need 500 to keep their presence. Anything with its own font-weight (.svc-card h3, .phero h1, ...) outranks this. */ h1,h2,h3,h4,h5,h6{font-weight:500} .hero h1,.sec-head h2,.charity h2,.tg-banner h3{font-weight:400} body.pr-home,body.pr-page{font-family:'Manrope',sans-serif;color:var(--ink);background:var(--paper)} nav.top,.mmenu,.bbar,.loader,footer{font-family:'Manrope',sans-serif} body.locked{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .serif{font-family:'Manrope',sans-serif;font-weight:400} .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums} .wrap{max-width:1220px;margin:0 auto;padding:0 34px} /* --gold-ink, not --gold: this label is 11px, and plain --gold scores 2.74:1 on paper - it fails AA at any size. See css/palette.css. */ .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)} /* ...and to the inverted accent wherever the label sits on a DARK band: the light-surface accent measures 2.18:1 there. Found by scanning with the reveal state forced on - these sections are opacity:0 until they scroll in, so an ordinary visibility check walks straight past them. .charity and .tg-banner are handled at their own definitions further down, where they redeclare these and would win the tie on source order. */ .brands .eyebrow,.price-note .eyebrow{color:var(--accent-on-dark)} .brands .sec-head h2 .it{color:var(--accent-on-dark)} /* ================= PRELOADER ================= */ .loader{position:fixed;inset:0;z-index:999;background:var(--cream);display:grid;place-items:center;transition:transform .85s var(--ease);will-change:transform} .loader.done{transform:translateY(-101%)} /* The wordmark is clipped so the letters can rise out of nothing. The bottom padding is for the descender of "р" - without it the tails are shaved. */ /* text-align:center is load-bearing. The block is as wide as the widest thing in the loader - the tracked-out tagline, 225px - while the wordmark at the 34px floor is only ~150px, so left-aligned text sat 37px off centre on a phone. On desktop the mark grows to fill the box and the fault is hidden. */ .loader-logo{font-family:'Manrope',sans-serif;font-size:clamp(34px,5vw,54px);letter-spacing:.04em; overflow:hidden;padding:0 .06em .16em;line-height:1.06;text-align:center} .loader-logo .lg{color:var(--gold)} .loader-bar{width:180px;height:1px;background:var(--line);margin:22px auto 0;overflow:hidden;position:relative} .loader-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear} .loader-sub{margin-top:14px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-ink)} /* ---------- preloader animation ---------- CSS-only, and the letters are split server-side by fast_vid_loader_wordmark(). Nothing waits on JavaScript: the deferred bundle can start a second or more into a cold load, and hiding a mark the visitor is already looking at reads as a flicker. `both` fill is what makes this safe - the resting state of every rule below is the visible one, so a stalled animation cannot leave the mark blank. Timing is bounded by the existing progress loop (550-1000ms): the last letter lands at 8 x 34 + 620 = 890ms, so the intro costs no extra wait. */ .loader-logo .ll{display:inline-block;white-space:pre; animation:ldr-rise .62s var(--ease) both;animation-delay:calc(var(--i) * 34ms)} @keyframes ldr-rise{from{transform:translateY(112%);opacity:0}to{transform:none;opacity:1}} /* A gold sheen crossing the progress track - the same struck-metal idea as the coin faces, at 1px tall. */ .loader-bar::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.65),transparent); transform:translateX(-100%);animation:ldr-sheen 1.15s linear .2s infinite} @keyframes ldr-sheen{to{transform:translateX(100%)}} .loader-sub{animation:ldr-fade .5s var(--ease) .52s both} @keyframes ldr-fade{from{opacity:0}to{opacity:1}} /* The whole mark settles a hair, like a stamp coming to rest. */ .loader-in{animation:ldr-settle .9s var(--ease) both} @keyframes ldr-settle{from{transform:scale(.965)}to{transform:none}} @media (prefers-reduced-motion:reduce){ .loader .ll,.loader-sub,.loader-in{animation:none!important;opacity:1!important;transform:none!important} .loader-bar::before{display:none} } /* ================= CURSOR / PROGRESS / INDICATOR ================= */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:300} .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;border-radius:50%;transform:translate(-50%,-50%)} .cursor-dot{width:6px;height:6px;background:var(--gold)} /* The ring is the assay punch, not a circle - the pointer is the mark. */ .cursor-ring{width:34px;height:34px;border-radius:0;transition:width .25s,height .25s,opacity .25s} .cursor-ring svg{width:100%;height:100%;display:block;fill:none; stroke:rgba(var(--gold-rgb),.55);stroke-width:1.4;stroke-linejoin:round;transition:stroke .25s} .cursor-ring.hovered{width:54px;height:54px} .cursor-ring.hovered svg{stroke:var(--gold)} /* Struck on click: the punch is pressed into the page and lifts away. */ .stamp{position:fixed;top:0;left:0;z-index:390;width:38px;height:38px;pointer-events:none; transform:translate(-50%,-50%);animation:stamp-strike .62s var(--ease) forwards} .stamp svg{width:100%;height:100%;display:block;fill:none;stroke:var(--gold); stroke-width:1.6;stroke-linejoin:round} @keyframes stamp-strike{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-12deg)} 22%{opacity:.95;transform:translate(-50%,-50%) scale(.86) rotate(0)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(6deg)} } @media (hover:none){.cursor-dot,.cursor-ring{display:none}} @media (prefers-reduced-motion:reduce){.stamp{display:none}} /* Fixed, so it floats over whatever scrolls beneath - including the dark bands, where bare --ink-soft text was 2.2:1. The paper pill makes it readable over any section instead of only the light ones. */ .sec-ind{position:fixed;left:28px;bottom:26px;z-index:120;display:flex;align-items:center;gap:12px; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft); background:rgba(var(--paper-rgb),.9);backdrop-filter:blur(8px);border:1px solid var(--line); border-radius:100px;padding:9px 16px 9px 13px;transition:opacity .3s} .sec-ind .num{color:var(--gold-ink)} .sec-ind::before{content:"";width:26px;height:1px;background:var(--gold)} /* Idle by default. Giving it a solid pill made it legible over the dark bands but turned it into furniture that sits on top of whatever is at the bottom left - measured across the page it covered a FAQ question, a rail of brand chips and the "как это считается" link. It is a wayfinding cue, so it is worth exactly the moment the section changes: js/home-redesign.js wakes it then and lets it fade. */ .sec-ind{opacity:0;pointer-events:none;transition:opacity .45s var(--ease)} .sec-ind.awake{opacity:1} .sec-ind.flip{opacity:0} /* set by the footer observer in js/home-redesign.js */ .sec-ind.hide-ind{opacity:0;pointer-events:none} @media(max-width:920px){.sec-ind{display:none}} /* ================= NAV ================= */ nav.top{position:fixed;inset:0 0 auto 0;z-index:200;display:flex;align-items:center;justify-content:space-between; padding:15px 34px;transition:transform .45s var(--ease),background .45s,padding .45s,border-color .45s;border-bottom:1px solid transparent} /* Scrolled state in the brand colour. The header is the one surface a visitor sees on every page and every scroll, so this is where the colour has to live if it is going to read as the brand rather than as "the dark section". Over the hero it stays transparent - the entrance should not open on a solid bar. */ nav.top.scrolled{background:rgba(var(--espresso-rgb),.94);backdrop-filter:blur(16px); border-color:rgba(var(--cream-rgb),.14);padding:10px 34px} nav.top.scrolled .logo{color:var(--cream)} /* the scrolled bar is the same espresso as the footer - so is the problem */ nav.top.scrolled .logo span{color:var(--accent-on-dark)} nav.top.scrolled .nav-links{color:rgba(var(--cream-rgb),.75)} nav.top.scrolled .nav-links a:hover,nav.top.scrolled .mega-trigger{color:var(--cream)} nav.top.scrolled .call{color:var(--cream);border-color:rgba(var(--cream-rgb),.4)} nav.top.scrolled .call:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)} nav.top.scrolled .burger span{background:var(--cream)} nav.top.hide{transform:translateY(-110%)} /* Client: "полосу-приоритет тоже можно уменьшить, чуть-чуть сделать потоньше". The bar loses 14px of height and the wordmark 5px; header.hero's top padding follows it down, otherwise the space the bar used to occupy stays behind. */ nav.top .logo{font-family:'Manrope',sans-serif;font-weight:400;font-size:19px;letter-spacing:.04em;padding:4px 0} nav.top .logo span{color:var(--gold)} nav.top .nav-links{display:flex;gap:32px;font-size:13px;color:var(--ink-soft)} nav.top .nav-links a{position:relative;transition:.2s} /* The hover underline has to take the whole box back from the legacy sheen in css/style.css, which styles every `a::after` as a sliding highlight: inset:0 -> pinned the line to the TOP of the link transform:translateX() -> pushed it 120% of its width to the right opacity:0 -> kept it invisible until hover z-index:-1 -> painted it behind the link Overriding only background/width/height left all of those in force, so the line appeared beside the next item instead of growing under the hovered one. */ nav.top .nav-links a::after{content:"";position:absolute;inset:auto auto -4px 0;width:0;height:1px; background:var(--gold);border-radius:0;transform:none;opacity:1;z-index:auto; transition:width .3s var(--ease)} nav.top .nav-links a:hover{color:var(--ink)} /* also outranks the legacy `a:hover::after{transform:translateX(120%);opacity:1}` */ nav.top .nav-links a:hover::after{width:100%;transform:none;opacity:1} nav.top .call{font-family:'JetBrains Mono',monospace;font-size:13px;border:1px solid var(--gold);padding:9px 16px;border-radius:100px;transition:.25s} nav.top .call:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)} @media(max-width:1180px){nav.top .nav-links{gap:22px;font-size:12.5px}} @media(max-width:1040px){nav.top .nav-links,nav.top .call{display:none}} /* ---------- mega panel ---------- */ /* `static`, deliberately: the panel is 940px wide and the trigger sits at x~455, so centring on the trigger pushed the panel 15px off the left edge. With the item static the containing block becomes nav.top, which spans the viewport, and translateX(-50%) centres the panel on screen at every width. The panel stays a DOM child of the item, so mouseleave still fires only once the pointer has left both the trigger and the panel. */ /* The vertical padding is the fix for a dead zone, not decoration: the item's own box is only as tall as the trigger text (18px), while the panel opens below the nav (29px lower). Travelling down from the trigger left the item after 7px and mouseleave closed the panel before the pointer could reach it. The padding stretches the hit area to the nav's bottom edge; the negative margin keeps the row's layout identical. */ .nav-item{position:static;padding:24px 0;margin:-24px 0} .mega-trigger{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit; display:inline-flex;align-items:center;gap:6px;position:relative;transition:.2s} .mega-trigger i{font-style:normal;font-size:9px;transition:transform .3s var(--ease);opacity:.6} .has-mega.open .mega-trigger{color:var(--ink)} .has-mega.open .mega-trigger i{transform:rotate(180deg)} /* same underline the plain nav links get - see the note on a::after above */ .mega-trigger::after{content:"";position:absolute;inset:auto auto -4px 0;width:0;height:1px; background:var(--gold);border-radius:0;transform:none;opacity:1;z-index:auto;transition:width .3s var(--ease)} .has-mega.open .mega-trigger::after,.mega-trigger:hover::after{width:100%} .mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-8px); width:min(940px,calc(100vw - 48px));background:var(--paper);border:1px solid var(--line);border-radius:20px; box-shadow:0 40px 90px rgba(var(--ink-rgb),.16);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s .26s;z-index:10} .has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s} /* bridges whatever gap the padding above does not cover */ .mega::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px} .mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:28px 28px 22px} .mega-col h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--bronze-ink);font-weight:400;margin-bottom:14px;padding:0 10px} .mega-col a{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-soft); padding:9px 10px;border-radius:9px;transition:background .2s,color .2s} .mega-col a:hover{background:var(--cream-2);color:var(--ink)} .mega-col .mega-more{margin-top:6px;color:var(--gold-ink);font-weight:600;font-size:12.5px} .mega-col .mega-more i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)} .mega-col .mega-more:hover{background:none} .mega-col .mega-more:hover i{transform:translateX(4px)} .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line);background:var(--cream-2);border-radius:0 0 19px 19px; padding:16px 28px;font-size:13px;color:var(--ink-soft)} .mega-foot a{color:var(--gold-ink);font-weight:600;white-space:nowrap} .mega-foot a i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)} .mega-foot a:hover i{transform:translateX(4px)} /* ================= HERO ================= */ header.hero{position:relative;background:var(--cream);overflow:hidden;padding:152px 0 0} .orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform} /* The second orb, a gold haze 640px across, used to sit directly on top of the dial and turn it into fog - most of the client's "чуть-чуть мусорит". Gone; only the far bottom-left one remains, where it touches nothing. */ .o2{bottom:-220px;left:-180px;width:560px;height:560px;background:radial-gradient(circle,rgba(var(--bronze-rgb),.14),transparent 60%)} @keyframes spin{to{transform:rotate(360deg)}} /* ---- hero dial ---- A real watch has a still dial and a moving hand. This one had both rings spinning and a 2px bar with a gemstone stuck on the end sweeping between them, which is why it read as an arrow of unclear purpose rather than as a watch. Now the dial is fixed, and the only thing that moves is a dauphine hand making one turn a minute, like a seconds hand. */ .dial{position:absolute;top:var(--dial-top);right:var(--dial-right); /* Back to the original placement: a large dial running off the right edge, pivot at (right 110, top 340) exactly as .bz1/.bz2 had it. What changed is what is drawn inside it, not where it sits. */ --dial-r:240px;--dial-top:100px;--dial-right:-130px; width:calc(var(--dial-r)*2);height:calc(var(--dial-r)*2); pointer-events:none;z-index:1;opacity:.62} .dial>*{position:absolute;inset:0} /* Minute ticks, with the hour ticks reaching further inwards. That difference in length is what makes a ring of dashes read as a dial and not a texture. */ /* The ticks turn, the inner ring and the hand do not - that is a rotating bezel, which is a real watch part, so the movement the client liked is back without the dial as a whole spinning. The 12 o'clock marker belongs to the bezel and carries the same animation so the two stay locked together. */ .dial-ticks,.dial-mark{animation:spin 150s linear infinite;transform-origin:50% 50%} .dial-ticks{background:repeating-conic-gradient(rgba(var(--gold-rgb),.5) 0deg .5deg,transparent .5deg 6deg); -webkit-mask:radial-gradient(circle,transparent 87%,#000 87.5%,#000 94%,transparent 94.5%); mask:radial-gradient(circle,transparent 87%,#000 87.5%,#000 94%,transparent 94.5%)} .dial-ticks::after{content:"";position:absolute;inset:0; background:repeating-conic-gradient(rgba(var(--gold-rgb),.85) 0deg 1deg,transparent 1deg 30deg); -webkit-mask:radial-gradient(circle,transparent 79%,#000 79.5%,#000 94%,transparent 94.5%); mask:radial-gradient(circle,transparent 79%,#000 79.5%,#000 94%,transparent 94.5%)} /* the inner ring turns the other way, slower - two speeds read as mechanism */ .dial-ring{border:1px solid rgba(var(--gold-rgb),.22);border-radius:50%; animation:spin 210s linear infinite reverse} .dial-ring::before{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px; transform:translateX(-50%);border-radius:50%;background:rgba(var(--gold-rgb),.5)} /* the brilliant moves off the hand and becomes the 12 o'clock marker - the one piece of jewellery on an otherwise plain dial */ .dial-mark::before{content:"";position:absolute;left:50%;top:13%; width:calc(var(--dial-r)*.075);height:calc(var(--dial-r)*.065);transform:translate(-50%,-50%); clip-path:polygon(20% 0,80% 0,100% 34%,50% 100%,0 34%); background:linear-gradient(150deg,#FFFFFF,#D9CDC6 42%,var(--gold) 88%); filter:drop-shadow(0 2px 6px rgba(var(--gold-rgb),.3))} /* The hand waits for the loader, then sweeps up from the bottom into the LEFT half of the dial. Left, because the dial runs off the right edge - that is the side actually on screen, so the movement is the first thing a visitor sees rather than something happening past the crop. Two animations on one property: `hand-in` fills forwards and holds 270deg, and `hand-run` sits later in the list, so it takes over the moment its delay expires and picks up at exactly the angle the entrance left. Without that shared angle the hand would snap back to 0 when the loop started. */ @keyframes hand-in{ from{transform:rotate(162deg);opacity:0} 30%{opacity:1} to{transform:rotate(270deg);opacity:1}} @keyframes hand-run{from{transform:rotate(270deg)}to{transform:rotate(630deg)}} .dial-hand{transform-origin:50% 50%;will-change:transform} /* The delay is not decoration: the class lands 200ms into the loader's 850ms slide, so starting at 0 ran the first third of the sweep behind the overlay and the hand was already near 200deg by the time anyone saw it. .72s clears the slide (200 + 720 > 850), so the whole sweep is on screen. */ .dial.in .dial-hand{animation:hand-in 1.5s var(--ease) .72s both, hand-run 60s linear 2.22s infinite} /* dauphine blade: widest just short of the pivot, tapering to a point, split down the middle so the two halves catch light differently */ /* Every part is a fraction of --dial-r, so the hand keeps its proportions at any breakpoint instead of turning into a needle on the large dial and a stub on the small one. One variable moves the whole object. */ .dial-hand i{position:absolute;left:50%;bottom:50%;width:calc(var(--dial-r)*.065); height:calc(var(--dial-r)*.78);transform:translateX(-50%); clip-path:polygon(50% 0,100% 88%,68% 100%,32% 100%,0 88%); background:linear-gradient(90deg,var(--gold) 0 50%,var(--gold-dark) 50% 100%)} /* counterweight tail past the pivot, and the pinion cap over both */ .dial-hand::before{content:"";position:absolute;left:50%;top:50%; width:calc(var(--dial-r)*.028);height:calc(var(--dial-r)*.17);transform:translateX(-50%); background:var(--gold-dark);border-radius:0 0 3px 3px} .dial-hand::after{content:"";position:absolute;left:50%;top:50%; width:calc(var(--dial-r)*.072);height:calc(var(--dial-r)*.072); transform:translate(-50%,-50%);border-radius:50%; background:var(--cream);border:1.5px solid var(--gold-dark)} .hero-in{position:relative;z-index:2} .hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:32px} .hero-eyebrow .rule{width:52px;height:1px;background:var(--gold);opacity:.7;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .2s} .hero-eyebrow.in .rule{transform:none} .hero h1{font-family:'Manrope',sans-serif;font-size:clamp(48px,8vw,112px);line-height:1.02;letter-spacing:-.01em} /* char split */ .split .cw{display:inline-block;white-space:nowrap} .split .char{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);transition:opacity .5s ease,transform .7s var(--ease)} .split.in .char{opacity:1;transform:none} /* rotating word */ .rot-wrap{display:inline-block;vertical-align:top} .rot{position:relative;display:inline-block;height:1.12em;overflow:hidden;vertical-align:top;transition:width .55s var(--ease);white-space:nowrap} /* The resting state has to be transparent. The rotator parks the word that just left by removing .off, which sends it from -110% back to +110% - a transition, not a reset, so it travelled straight back down THROUGH the visible box. With opacity in the resting state as well, .off and no-class are both invisible and that return trip cannot be seen. */ .rot i{position:absolute;left:0;top:0;font-style:normal;color:var(--gold);white-space:nowrap; transform:translateY(110%);opacity:0;transition:transform .65s var(--ease),opacity .4s} .rot i.on{transform:none;opacity:1} .rot i.off{transform:translateY(-110%);opacity:0} .hero-lower{display:grid;grid-template-columns:1fr auto;column-gap:44px;row-gap:24px;align-items:end;margin-top:46px;padding-bottom:64px} .hero-lede{color:var(--ink-soft);font-size:17px;line-height:1.65;max-width:430px} .hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .hero-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper); border-radius:100px;padding:10px 18px;font-size:13px;color:var(--ink-soft)} .hero-pill b{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold-ink)} .hero-pill-link{transition:border-color .25s,color .25s} .hero-pill-link i{font-style:normal;transition:transform .3s var(--ease)} .hero-pill-link:hover{border-color:var(--gold);color:var(--gold-ink)} .hero-pill-link:hover i{transform:translateX(4px)} /* The telephone is a link, not a chip. No border, and it has to read as tappable standing still rather than only under a cursor - which is why it keeps an underline at rest and carries a handset. A bare number in body colour is just a number; people do not try tapping it. */ .hero-tel{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600; color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:5px;text-decoration-color:rgba(var(--gold-rgb),.45); transition:text-decoration-color .25s} .hero-tel:hover{text-decoration-color:var(--gold-ink)} .hero-tel svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Address and opening hours share one centred column under both hero columns. They are wrapped rather than made two grid rows because only the address is framed - the hours sit outside the frame, and a shared wrapper spaces the two by 9px instead of the grid's 24px row-gap. */ .hero-place{grid-column:1/-1;justify-self:center;display:flex;flex-direction:column; align-items:center;gap:9px} .hero-where{display:flex;flex-direction:column;align-items:center;text-align:center; gap:3px;line-height:1.3;border:1px solid var(--line);background:var(--paper); border-radius:100px;padding:9px 22px;transition:border-color .25s} .hero-where:hover{border-color:var(--gold)} .hero-where b{font-weight:500;font-size:14px;color:var(--ink);transition:color .25s} .hero-where i{font-style:normal;font-size:12.5px;color:var(--ink-soft)} .hero-where:hover b{color:var(--gold-ink)} .hero-hours{font-size:12.5px;color:var(--ink-soft);text-align:center} @media(max-width:479px){ .hero-tel{font-size:14px} .hero-where{padding:8px 18px} .hero-where b{font-size:13px} .hero-where i{font-size:12px} .hero-hours{font-size:12px} } /* "Как пройти от метро". A link, not a button, and styled like the telephone link above it: it is an action, so it keeps an underline at rest. The 40px minimum height is the tap target - the text alone is 17px tall. */ .hero-route{display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:13px; font-weight:600;color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:4px;text-decoration-color:rgba(var(--gold-rgb),.45); transition:text-decoration-color .25s} .hero-route:hover{text-decoration-color:var(--gold-ink)} .hero-route svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* The route diagram in a native