/* Arkadia Apartments — blog / local guide. Loaded after site.css; reuses its tokens (--ink --muted --navy --green --green2 --paper --line --soft --shadow --r --wrap). */ /* The typeface of measured figures (--f-data below), only on the blog: IBM Plex Mono 600 from @fontsource/ibm-plex-mono 5.3.0 (OFL, licence beside the files), in its latin and latin-ext subsets. Names carry a content hash, like the photos. The text stays in the system font (site.css): served Inter measured 97 -> 81-83 in Lighthouse mobile on this page, all of it layout time, while these files cost nothing. One weight (2026-10-09): the small labels, 500 until then, are 600 like the figures, and the index loads one 15 KB file where it loaded two. */ @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-ext-600-normal.32057cf5.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.0d1f0b8d.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* The blog's own tokens: the light green of the footer's "Rezervă direct" band (--ft-accent there), and the typeface of measured figures. */ .blog-page{--mint:#9bd6bd;--f-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} /* main: the footer's eyebrow sits on navy and keeps the site's light green. */ .blog-page main .eyebrow{color:var(--green)} .blog-page .navlinks a[aria-current="page"]{color:var(--green)} .wrap.narrow{width:min(760px,calc(100% - 36px))} /* ---- Index (PublicBlogRenderer::index()): hero, distance ruler, guides ---- */ .blog-sprite{position:absolute;width:0;height:0;overflow:hidden} .blog-icon{flex:none} /* site.css makes display:contents, which would leave a thumbnail's in the ruler's grid and the chips' flex as an empty box taking a cell or a gap of its own. It only ever chooses the file the shows. */ .blog-page picture>source{display:none} /* Measured figures only, never running text: one typeface, digits of equal width. */ .blog-ruler-value,.blog-ruler-num,.blog-ruler-tick,.blog-card-fact-value,.blog-card-read,.blog-chip-count,.blog-card-avatars-more{font-family:var(--f-data);font-variant-numeric:tabular-nums} /* Hero: the title, and beside it how many guides there are and who writes them. */ .blog-hero{padding:56px 0 72px} .blog-hero-grid{display:grid;gap:28px 64px;align-items:end} /* A line height of 1.03 keeps the Î and ș of one line clear of the next. */ .blog-hero h1{margin:0;font-size:clamp(2.5rem,1.3rem + 4vw,4.4rem);font-weight:600;line-height:1.03;letter-spacing:-.035em;text-wrap:balance} .blog-hero-lead{margin:20px 0 0;max-width:56ch;color:var(--muted);font-size:1.125rem;line-height:1.6} .blog-hero-aside{padding:4px 0 4px 22px;border-left:2px solid var(--line);color:var(--muted);font-size:.95rem} .blog-hero-aside p{margin:0 0 14px} .blog-hero-meta{color:var(--ink);font-weight:600} .blog-hero-meta strong{font-weight:inherit;color:var(--green)} .blog-hero-jump{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:600} .blog-hero-jump:hover{text-decoration:underline;text-underline-offset:4px} /* Destination and filter buttons. A pressed one is navy, with a mint icon. */ .blog-chips{display:flex;gap:8px} .blog-chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.92rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;scroll-snap-align:start;transition:background .2s,border-color .2s,color .2s} .blog-chip .blog-icon{width:18px;height:18px;color:var(--muted);transition:color .2s} .blog-chip:hover{border-color:#b7c7bf} .blog-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .blog-chip[aria-pressed="true"] .blog-icon{color:var(--mint)} .blog-chip-count{color:var(--muted);font-size:.78rem;font-weight:600;line-height:1} .blog-chip[aria-pressed="true"] .blog-chip-count{color:rgba(255,255,255,.65)} /* The distance ruler. --cols is shared by the axis and every row, so the tracks start and end at the same x as the scale above them. */ .blog-ruler{--cols:56px minmax(190px,270px) minmax(0,1fr) 96px;margin-top:44px;padding:34px 40px 30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .blog-ruler-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px} .blog-ruler-title{margin:0;font-size:1.55rem;font-weight:600;line-height:1.1;letter-spacing:-.025em} .blog-ruler-hint{margin:0;color:var(--muted);font-size:.95rem} .blog-ruler-dests{flex-wrap:wrap;margin-top:20px;padding:4px 0} /* Room kept for the longest summary, so the page does not jump when it changes. */ .blog-ruler-summary{min-height:1.6em;margin:26px 0 0;font-size:1.06rem;line-height:1.5} .blog-ruler-num{color:var(--green);font-weight:600} .blog-ruler-axis,.blog-ruler-link{display:grid;grid-template-columns:var(--cols);column-gap:22px;align-items:center} .blog-ruler-axis{height:38px;margin-top:14px;padding:0 14px;color:var(--muted)} .blog-ruler-axis-caption{grid-column:1/3;font-size:.7rem;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase} .blog-ruler-scale{grid-column:3;position:relative;height:100%;font-size:.74rem;font-weight:600;line-height:1;container:blog-scale/inline-size} .blog-ruler-dest{position:absolute;left:0;bottom:4px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 6px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600} .blog-ruler-dest .blog-icon{width:14px;height:14px;color:var(--mint)} /* Three marks at thirds of the scale (5, 10 and 15 km); the last one ends flush. */ .blog-ruler-tick{position:absolute;bottom:8px;transform:translateX(-50%);white-space:nowrap} .blog-ruler-tick:nth-last-child(3){left:33.333%} .blog-ruler-tick:nth-last-child(2){left:66.667%} .blog-ruler-tick:last-child{left:100%;transform:translateX(-100%)} /* The destination's pill is up to 107px wide ("Gara de Nord"). Where the scale is too short for it and every mark (tablets: 186px at 820px wide), the marks it would cover go, nearest first. */ @container blog-scale (max-width:410px){.blog-ruler-tick:nth-last-child(3){display:none}} @container blog-scale (max-width:210px){.blog-ruler-tick:nth-last-child(2){display:none}} @container blog-scale (max-width:155px){.blog-ruler-tick:last-child{display:none}} .blog-ruler-rows{display:grid;gap:4px;margin:0;padding:0;list-style:none} .blog-ruler-row[hidden]{display:none} .blog-ruler-link{padding:10px 14px;border-radius:18px;transition:background .2s} .blog-ruler-link:hover{background:var(--paper)} .blog-ruler-row.is-nearest .blog-ruler-link{background:var(--soft)} .blog-ruler-photo{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--soft)} .blog-ruler-name{display:block;font-size:1rem;font-weight:600;line-height:1.25} .blog-ruler-sub{display:block;margin-top:2px;color:var(--muted);font-size:.85rem;line-height:1.35} /* --muted on the nearest row's --soft is 4.47:1, just under AA; a tenth of --ink makes it 5.0:1. */ .blog-ruler-row.is-nearest .blog-ruler-sub{color:color-mix(in srgb,var(--muted) 90%,var(--ink))} /* The markup puts a space before the tag, hence 4px rather than 8px. */ .blog-ruler-near{display:none;margin-left:4px;padding:3px 8px;border-radius:999px;background:var(--green);color:#fff;font-size:.62rem;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px} .blog-ruler-row.is-nearest .blog-ruler-near{display:inline-block} /* The track: a 2px line marked at every kilometre of the 15 km scale (scaleKm in content/blog/distances.json; change both together), filled up to --d, the distance over the scale, which the renderer and blog.js set on each track. */ .blog-ruler-track{--d:0;position:relative;height:26px} /* The renderer prints the share as data-d and a 1 % class, never as a style attribute (B10, so the CSP can drop unsafe-inline): each class sets --d, and blog.js then sets the exact value. */ .blog-ruler-track.q-0{--d:0} .blog-ruler-track.q-1{--d:.01} .blog-ruler-track.q-2{--d:.02} .blog-ruler-track.q-3{--d:.03} .blog-ruler-track.q-4{--d:.04} .blog-ruler-track.q-5{--d:.05} .blog-ruler-track.q-6{--d:.06} .blog-ruler-track.q-7{--d:.07} .blog-ruler-track.q-8{--d:.08} .blog-ruler-track.q-9{--d:.09} .blog-ruler-track.q-10{--d:.1} .blog-ruler-track.q-11{--d:.11} .blog-ruler-track.q-12{--d:.12} .blog-ruler-track.q-13{--d:.13} .blog-ruler-track.q-14{--d:.14} .blog-ruler-track.q-15{--d:.15} .blog-ruler-track.q-16{--d:.16} .blog-ruler-track.q-17{--d:.17} .blog-ruler-track.q-18{--d:.18} .blog-ruler-track.q-19{--d:.19} .blog-ruler-track.q-20{--d:.2} .blog-ruler-track.q-21{--d:.21} .blog-ruler-track.q-22{--d:.22} .blog-ruler-track.q-23{--d:.23} .blog-ruler-track.q-24{--d:.24} .blog-ruler-track.q-25{--d:.25} .blog-ruler-track.q-26{--d:.26} .blog-ruler-track.q-27{--d:.27} .blog-ruler-track.q-28{--d:.28} .blog-ruler-track.q-29{--d:.29} .blog-ruler-track.q-30{--d:.3} .blog-ruler-track.q-31{--d:.31} .blog-ruler-track.q-32{--d:.32} .blog-ruler-track.q-33{--d:.33} .blog-ruler-track.q-34{--d:.34} .blog-ruler-track.q-35{--d:.35} .blog-ruler-track.q-36{--d:.36} .blog-ruler-track.q-37{--d:.37} .blog-ruler-track.q-38{--d:.38} .blog-ruler-track.q-39{--d:.39} .blog-ruler-track.q-40{--d:.4} .blog-ruler-track.q-41{--d:.41} .blog-ruler-track.q-42{--d:.42} .blog-ruler-track.q-43{--d:.43} .blog-ruler-track.q-44{--d:.44} .blog-ruler-track.q-45{--d:.45} .blog-ruler-track.q-46{--d:.46} .blog-ruler-track.q-47{--d:.47} .blog-ruler-track.q-48{--d:.48} .blog-ruler-track.q-49{--d:.49} .blog-ruler-track.q-50{--d:.5} .blog-ruler-track.q-51{--d:.51} .blog-ruler-track.q-52{--d:.52} .blog-ruler-track.q-53{--d:.53} .blog-ruler-track.q-54{--d:.54} .blog-ruler-track.q-55{--d:.55} .blog-ruler-track.q-56{--d:.56} .blog-ruler-track.q-57{--d:.57} .blog-ruler-track.q-58{--d:.58} .blog-ruler-track.q-59{--d:.59} .blog-ruler-track.q-60{--d:.6} .blog-ruler-track.q-61{--d:.61} .blog-ruler-track.q-62{--d:.62} .blog-ruler-track.q-63{--d:.63} .blog-ruler-track.q-64{--d:.64} .blog-ruler-track.q-65{--d:.65} .blog-ruler-track.q-66{--d:.66} .blog-ruler-track.q-67{--d:.67} .blog-ruler-track.q-68{--d:.68} .blog-ruler-track.q-69{--d:.69} .blog-ruler-track.q-70{--d:.7} .blog-ruler-track.q-71{--d:.71} .blog-ruler-track.q-72{--d:.72} .blog-ruler-track.q-73{--d:.73} .blog-ruler-track.q-74{--d:.74} .blog-ruler-track.q-75{--d:.75} .blog-ruler-track.q-76{--d:.76} .blog-ruler-track.q-77{--d:.77} .blog-ruler-track.q-78{--d:.78} .blog-ruler-track.q-79{--d:.79} .blog-ruler-track.q-80{--d:.8} .blog-ruler-track.q-81{--d:.81} .blog-ruler-track.q-82{--d:.82} .blog-ruler-track.q-83{--d:.83} .blog-ruler-track.q-84{--d:.84} .blog-ruler-track.q-85{--d:.85} .blog-ruler-track.q-86{--d:.86} .blog-ruler-track.q-87{--d:.87} .blog-ruler-track.q-88{--d:.88} .blog-ruler-track.q-89{--d:.89} .blog-ruler-track.q-90{--d:.9} .blog-ruler-track.q-91{--d:.91} .blog-ruler-track.q-92{--d:.92} .blog-ruler-track.q-93{--d:.93} .blog-ruler-track.q-94{--d:.94} .blog-ruler-track.q-95{--d:.95} .blog-ruler-track.q-96{--d:.96} .blog-ruler-track.q-97{--d:.97} .blog-ruler-track.q-98{--d:.98} .blog-ruler-track.q-99{--d:.99} .blog-ruler-track.q-100{--d:1} .blog-ruler-track::before{content:"";position:absolute;inset:50% 0 auto;height:2px;margin-top:-1px;background:var(--line)} .blog-ruler-track::after{content:"";position:absolute;inset:50% 0 auto;height:9px;margin-top:-4.5px;border-right:1px solid var(--line);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / 15) 100%} .blog-ruler-fill{position:absolute;top:50%;left:0;z-index:1;width:calc(var(--d) * 100%);height:6px;margin-top:-3px;border-radius:3px;background:linear-gradient(90deg,rgba(94,120,168,.15),var(--blue));transition:width .7s cubic-bezier(.2,.8,.2,1)} .blog-ruler-pin{position:absolute;top:50%;left:calc(var(--d) * 100%);z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff,0 2px 8px rgba(15,29,41,.28);transition:left .7s cubic-bezier(.2,.8,.2,1),background .3s} .blog-ruler-row.is-nearest .blog-ruler-fill{background:linear-gradient(90deg,rgba(24,123,88,.18),var(--green))} .blog-ruler-row.is-nearest .blog-ruler-pin{background:var(--green)} .blog-ruler-value{font-size:1.12rem;font-weight:600;line-height:1;text-align:right;white-space:nowrap} .blog-ruler-row.is-nearest .blog-ruler-value{color:var(--green)} .blog-ruler-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:18px;padding-top:20px;border-top:1px dashed var(--line)} .blog-ruler-note{display:flex;gap:10px;max-width:66ch;margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} .blog-ruler-note .blog-icon{margin-top:1px;color:var(--blue)} .blog-ruler-guide{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid var(--green);border-radius:999px;color:var(--green);font-size:.93rem;font-weight:600;line-height:1.2;transition:background .2s,color .2s} .blog-ruler-guide[hidden]{display:none} .blog-ruler-guide:hover{background:var(--green);color:#fff} /* Guides. The hero's link lands here, clear of the sticky header. */ .blog-list{padding:24px 0 96px;scroll-margin-top:90px} .blog-list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:28px} .blog-list-head h2{margin:0;font-size:clamp(1.9rem,1.2rem + 2vw,2.8rem);font-weight:600;line-height:1.05;letter-spacing:-.02em} .blog-list-head p{margin:8px 0 0;color:var(--muted)} .blog-filters{flex-wrap:wrap} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px} .blog-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1)} .blog-card[hidden]{display:none} .blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} /* The title's link covers the whole card (h3 a::after), so the ring goes round the card, in the site's green like every other focus ring. Only where :has() works does the title lose its own ring. */ .blog-card:has(h3 a:focus-visible){outline:3px solid var(--green);outline-offset:3px} @supports selector(:has(a)){.blog-card h3 a:focus-visible{outline:none}} .blog-card-media{position:relative;aspect-ratio:16/10;margin:10px 10px 0;border-radius:20px;overflow:hidden;isolation:isolate;background:var(--soft)} .blog-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .blog-card:hover .blog-card-media img{transform:scale(1.04)} /* A drawn cover carries its title at the top: one taller than the 16:10 slot (the sectors guide's 4:3) loses its bottom, not its title. A wider one only loses its sides. */ .blog-card-media img[src*="/assets/blog/"]:not([src*="-foto."]){object-position:50% 0} .blog-card-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#1d3a4f);color:rgba(255,255,255,.18);font-size:5rem;font-weight:600;letter-spacing:-.06em} /* The key figure on the cover, under a small ruler of its own. */ .blog-card-fact{position:absolute;left:12px;bottom:12px;z-index:1;display:grid;gap:3px;max-width:calc(100% - 24px);margin:0;padding:10px 14px 11px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(13,29,41,.2)} .blog-card-fact::before{content:"";width:30px;height:8px;margin-bottom:5px;border-inline:2px solid var(--green);background:linear-gradient(var(--green),var(--green)) center/100% 2px no-repeat} .blog-card-fact-value{color:var(--ink);font-size:1.3rem;font-weight:600;line-height:1;letter-spacing:-.01em} .blog-card-fact-label{color:var(--muted);font-size:.78rem;font-weight:400;line-height:1.3} .blog-card-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 22px} .blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px} .blog-card-meta .kicker{margin:0} .blog-card-read{color:var(--muted);font-size:.74rem;font-weight:600;line-height:1;white-space:nowrap} .blog-card h3{margin:0;font-size:1.28rem;font-weight:600;line-height:1.2;letter-spacing:-.02em;text-wrap:balance} .blog-card h3 a::after{content:"";position:absolute;inset:0;z-index:3} .blog-card-dek{display:-webkit-box;margin:10px 0 0;overflow:hidden;color:var(--muted);font-size:.95rem;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3} .blog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px} .blog-card-apts{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.84rem} .blog-card-avatars{display:flex;padding-left:8px} .blog-card-avatars img,.blog-card-avatars-more{width:30px;height:30px;margin-left:-8px;border:2px solid #fff;border-radius:50%} .blog-card-avatars img{object-fit:cover;background:var(--soft)} .blog-card-avatars-more{display:grid;place-items:center;background:var(--soft);color:var(--green2);font-size:.68rem;font-weight:600;line-height:1} .blog-card-go{display:grid;place-items:center;flex:none;width:42px;height:42px;margin-left:auto;border-radius:50%;background:var(--soft);color:var(--green);transition:background .25s,color .25s} .blog-card-go .blog-icon{transition:transform .25s cubic-bezier(.2,.8,.2,1)} .blog-card:hover .blog-card-go{background:var(--green);color:#fff} .blog-card:hover .blog-card-go .blog-icon{transform:translateX(2px)} .empty-public{grid-column:1/-1;padding:48px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:20px;color:var(--muted)} /* The featured guide, across the grid; photo and text side by side from 981px. */ .blog-card--featured{grid-column:1/-1} .blog-card-flag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--green2);font-size:.7rem;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase} .blog-card--featured .blog-card-fact-value{font-size:1.6rem} .blog-card--featured .blog-card-foot{flex-wrap:wrap;gap:18px} .blog-card-apts-label{display:block;color:var(--muted);font-size:.7rem;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase} .blog-card-apt-list{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none} .blog-card-apt{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 4px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:.85rem;font-weight:600;line-height:1} .blog-card-apt img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--soft)} /* The card's "Citește ghidul" is the site's primary button, drawn only: the title's link above it takes the click, so it follows the card's hover, not its own. */ .blog-card:hover .btn-primary{background:var(--green2)} @media(min-width:901px){.blog-hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}} /* From 981px the featured guide's image is a band across the card, 2:1 like its card cover (the Enayati scene: in a near-square slot beside the text its labels were cut at both edges, owner 2026-10-18), and the text runs in two columns under it: kicker, title and summary on the left, the apartments and the button on the right. */ @media(min-width:981px){ .blog-card--featured .blog-card-media{aspect-ratio:2/1;margin:12px 12px 0} .blog-card--featured .blog-card-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:56px;align-items:end;padding:32px 40px 36px} .blog-card--featured .blog-card-body>*{grid-column:1} .blog-card--featured .blog-card-body>.blog-card-foot{grid-column:2;align-self:end;padding-top:0} /* Two feet: the apartments beside the kicker and the title, the button and the date beside the summary. */ .blog-card--featured .blog-card-body>.blog-card-foot:not(:last-child){grid-row:1/span 2} .blog-card--featured .blog-card-body>.blog-card-foot:last-child{grid-row:3} .blog-card--featured h3{font-size:clamp(1.8rem,1rem + 1.3vw,2.35rem);line-height:1.1;letter-spacing:-.03em} .blog-card--featured .blog-card-dek{margin-top:16px;font-size:1.02rem;-webkit-line-clamp:6} .blog-card--featured .blog-card-fact{left:20px;bottom:20px;padding:14px 18px 15px} } /* Up to 900px the ruler's rows stack: photo, name and distance on one line, the track under them across the row. With the desktop columns the name takes its 270px first and leaves the track 47-266px there (the owner's choice, 27 September 2026). */ @media(max-width:900px){ .blog-ruler{--cols:48px minmax(0,1fr) auto} .blog-ruler-axis{grid-template-columns:1fr;padding:0 12px} .blog-ruler-axis-caption{display:none} .blog-ruler-scale{grid-column:1} .blog-ruler-link{row-gap:8px;column-gap:14px;padding:12px} .blog-ruler-photo{width:48px;height:48px;border-radius:12px} .blog-ruler-track{grid-column:1/-1;grid-row:2} .blog-ruler-value{grid-column:3;grid-row:1;font-size:1rem} } /* Phones: each set of buttons becomes one row that scrolls sideways under a fade, never the page itself, and the scale keeps its last mark only. The buttons' 44px height is the site's floor for a target on a phone. */ @media(max-width:680px){ .blog-chip{height:44px} .blog-ruler{padding:26px 18px 22px} .blog-ruler-head{padding:0 4px} .blog-ruler-dests{flex-wrap:nowrap;margin:18px -18px 0;padding:4px 18px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} .blog-ruler-dests::-webkit-scrollbar{display:none} .blog-ruler-summary{min-height:3em;margin:24px 4px 0} .blog-ruler-tick:not(:last-child){display:none} .blog-ruler-foot{padding:20px 4px 0} .blog-list-head>div:first-child{width:100%} .blog-filters{flex-wrap:nowrap;width:calc(100% + 12px);margin-right:-12px;padding:4px 12px 4px 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} .blog-filters::-webkit-scrollbar{display:none} } /* Without JavaScript the ruler stays on its default destination and every guide shows, so the buttons that would change them are hidden. */ @media(scripting:none){.blog-ruler-dests,.blog-filters{display:none}} /* site.css already stops every transition; this stops the lift and the zoom too. */ @media(prefers-reduced-motion:reduce){.blog-card:hover,.blog-card:hover .blog-card-media img,.blog-card:hover .blog-card-go .blog-icon{transform:none}} /* High contrast: the system colours would erase the track, the pin and the pressed button's fill, so they are drawn in system colours of their own. */ @media(forced-colors:active){ .blog-page main svg{color:inherit} .blog-chip[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText} .blog-chip[aria-pressed="true"] .blog-icon,.blog-chip[aria-pressed="true"] .blog-chip-count{color:HighlightText} .blog-ruler-track{forced-color-adjust:none} .blog-ruler-track::before{background:CanvasText} .blog-ruler-track::after{border-color:CanvasText;background-image:linear-gradient(to right,CanvasText 1px,transparent 1px)} .blog-ruler-fill,.blog-ruler-row.is-nearest .blog-ruler-fill{background:Highlight} .blog-ruler-pin,.blog-ruler-row.is-nearest .blog-ruler-pin{background:Highlight;box-shadow:0 0 0 4px Canvas} .blog-ruler-near,.blog-card-flag{border:1px solid CanvasText} } /* Article */ .article-head{background:#fff;padding:56px 0 40px} /* Acasă › Ghid local › the article, as the flats' pages draw theirs (site.css .breadcrumbs). */ .article-crumbs{margin-bottom:26px;font-size:.86rem;font-weight:600;color:var(--muted)} .article-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .article-crumbs li:not(:last-child)::after{content:"\203A";margin-left:6px;color:#9aa8b2} .article-crumbs li[aria-current]{font-weight:500} .article-crumbs a{color:var(--green)} .article-crumbs a:hover{color:var(--green2)} .article-head h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance} .article-lead{font-size:1.15rem;color:var(--muted);margin:20px 0 0} .article-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--muted)} .article-meta time::before{content:"·";margin-right:14px} /* "Actualizat la