[data-rv]{opacity:0} [data-rv="rise"]{transform:translateY(26px)} [data-rv="card"]{transform:translateY(28px)} [data-rv="band"]{transform:translateY(18px)} [data-rv].rv-in{opacity:1;transform:none;transition:opacity .68s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1)} [data-rv="band"].rv-in{transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)} @media(prefers-reduced-motion:reduce){[data-rv]{opacity:1 !important;transform:none !important;transition:none !important}} .ltn__header-sticky{overflow:visible !important} /* only on the sticky (scrolled) navbar, not the static page header */ .nav-shop-btn{display:none;position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:30;text-decoration:none} .ltn__header-sticky.sticky-active .nav-shop-btn{display:block} .nav-shop-pics{position:relative;display:inline-flex;align-items:flex-end} .nav-shop-pics img{width:42px;height:56px;object-fit:contain;background:#fff;border:2px solid #fff;border-radius:2px;box-shadow:0 10px 20px -7px rgba(0,0,0,.45);margin-left:-15px;transition:transform .32s cubic-bezier(.16,1,.3,1)} .nav-shop-pics img:first-child{margin-left:0;transform:rotate(-9deg) translateY(1px)} .nav-shop-pics img:nth-child(2){transform:rotate(2deg) translateY(-5px);z-index:2;position:relative} .nav-shop-pics img:nth-child(3){transform:rotate(11deg) translateY(1px)} .nav-shop-btn:hover .nav-shop-pics img:first-child{transform:rotate(-14deg) translate(-4px,-3px)} .nav-shop-btn:hover .nav-shop-pics img:nth-child(2){transform:rotate(2deg) translateY(-9px)} .nav-shop-btn:hover .nav-shop-pics img:nth-child(3){transform:rotate(16deg) translate(4px,-3px)} @media(max-width:991px){.nav-shop-btn{display:none}} .ju{max-width:1140px;margin:0 auto;padding:46px 20px;font-family:Poppins,sans-serif;color:#14161c} .ju .figno{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#5c6068;text-transform:uppercase} .ju h2{font-family:Rajdhani,sans-serif;font-size:24px;letter-spacing:3px;text-transform:uppercase;margin:4px 0 0} .ju .rule2{border-top:2px solid #14161c;border-bottom:1px solid #14161c;height:5px;margin:6px 0 26px} .ju-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.ju-cards{grid-template-columns:1fr}} .ju-card{border:1px solid #14161c;background:#fff;position:relative} .ju-card:before{content:"";position:absolute;inset:3px;border:1px solid #e7e6e1;pointer-events:none} .ju-ch{border-bottom:1px solid #14161c;padding:13px 16px;display:flex;justify-content:space-between;align-items:baseline} .ju-ch b{font:700 15px Rajdhani;letter-spacing:2px}.ju-ch span{font:500 10px 'IBM Plex Mono',monospace;color:#5c6068} .ju-cb{padding:14px 16px}.ju-cb svg{display:block;margin:0 auto 10px} .ju-kv{display:flex;justify-content:space-between;font-size:11.5px;padding:4.5px 0;border-bottom:1px dashed #e7e6e1} .ju-kv i{font-style:normal;color:#5c6068}.ju-kv b{font:500 11.5px 'IBM Plex Mono',monospace} .ju-bar{height:5px;background:#e7e6e1;margin-top:10px}.ju-bar i{display:block;height:100%;background:#1e9e5a} .ju-ref{font:400 10px 'IBM Plex Mono',monospace;color:#9b9fa6;margin-top:18px} .ju-tab{width:100%;border-collapse:collapse;border-top:2px solid #14161c;border-bottom:2px solid #14161c;background:#f6f6f3} .ju-tab th{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:#5c6068;border-bottom:1px solid #14161c;padding:10px 8px;text-align:left} .ju-tab td{padding:16px 8px;font:700 34px Rajdhani} .ju-tab td small{display:block;font:400 11px Poppins;color:#5c6068;margin-top:2px} .ju-steps{display:flex;border:1px solid #14161c;flex-wrap:wrap} .ju-step{flex:1;min-width:150px;padding:18px 14px;border-right:1px solid #e7e6e1;position:relative;transition:.2s} .ju-step:hover{background:#f6f6f3}.ju-step:last-child{border-right:0} .ju-step em{font:500 10px 'IBM Plex Mono',monospace;color:#5c6068;font-style:normal} .ju-step b{font:700 13px Rajdhani;letter-spacing:1.5px;display:block;margin:6px 0 4px;text-transform:uppercase} .ju-step small{font-size:10.5px;color:#5c6068} .ju-step .n{position:absolute;top:8px;right:10px;font:600 10px 'IBM Plex Mono',monospace;color:#9b9fa6} .ju-liq{position:relative;overflow:hidden;z-index:1} .ju-liq:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:#14161c;transition:height .35s ease;z-index:-1} .ju-liq:hover{color:#fff!important}.ju-liq:hover:after{height:100%} .ju-search{width:100%;border:1px solid #14161c;padding:13px 16px;font:500 14px 'IBM Plex Mono',monospace;margin-bottom:16px;outline:none} .ju-count{font:500 10px 'IBM Plex Mono',monospace;color:#9b9fa6;margin:-8px 0 14px} .ju-spec{display:grid;grid-template-columns:300px 1fr;gap:26px;border:1px solid #14161c;padding:22px;background:#fff} @media(max-width:800px){.ju-spec{grid-template-columns:1fr}} .ju-spec img{width:100%;background:#f6f6f3} .ju-spec .lbl{font:500 10px 'IBM Plex Mono',monospace;color:#5c6068;letter-spacing:1px} .ju-spec h3{font:700 22px Rajdhani;letter-spacing:2px;text-transform:uppercase;margin:2px 0 10px} .ju-spec .pr{font:700 28px Rajdhani;margin:12px 0} .ju-buy{display:inline-block;border:1px solid #14161c;background:#14161c;color:#fff;padding:14px 34px;font:700 13px Poppins;letter-spacing:2px;cursor:pointer} .ju-shoplink{margin-left:14px;font:600 12px 'IBM Plex Mono',monospace;color:#14161c} /* sitewide journal restyle of EXISTING elements (landing only) */ .home .elementor-heading-title,.home h2.entry-title{font-family:Rajdhani,sans-serif!important;letter-spacing:2.5px!important;text-transform:uppercase} .home .elementor-icon-box-title,.home .elementor-image-box-title{font-family:Rajdhani,sans-serif!important;letter-spacing:2px!important} .home .ltn__blog-title{font-family:Rajdhani,sans-serif!important;letter-spacing:1px} .home .post-meta,.home .ltn__blog-meta,.home .woocommerce-result-count{font-family:'IBM Plex Mono',monospace!important;font-size:11px!important;letter-spacing:1px;text-transform:uppercase} /* Two layers, because the handwriting has to run past the edge. The rail holds more than it can show, so it scrolls — and a scroll container clips BOTH axes. overflow-x:clip does not help: it is coerced to hidden the moment its partner is auto. So the scrolling lives on .lrail-inner and this outer box clips nothing, which lets .lrail-notes lie over the top and spill as far right as it likes. */ .lrail{position:fixed;left:14px;top:86px;z-index:9990;width:186px;overflow:visible;padding:2px 6px 8px;transform:translateX(-118%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s} .lrail-inner{max-height:calc(100vh - 104px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .lrail-inner::-webkit-scrollbar{display:none} /* the layer the notes live on: no box of its own, and never in the way */ .lrail-notes{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:2} .lrail::-webkit-scrollbar{display:none} .lrail.show{transform:none;opacity:1} .lrail-eyebrow{display:flex;align-items:center;gap:9px;margin:6px 4px 12px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#8b877f} .lrail-eyebrow span{flex:1;height:1px;background:rgba(23,24,28,.16)} /* variant B — no per-item boxes: hairline rows inside one soft paper panel (the panel keeps the icons/labels legible where the rail crosses dark bands) */ .lrail-menu{display:flex;flex-direction:column;background:rgba(250,249,246,.72);backdrop-filter:blur(11px) saturate(1.25);-webkit-backdrop-filter:blur(11px) saturate(1.25);border:1px solid rgba(255,255,255,.5);border-radius:10px;box-shadow:0 16px 36px -20px rgba(0,0,0,.34);padding:2px 3px 6px} .lrail-cat{display:flex;align-items:center;gap:13px;padding:12px 11px;text-decoration:none !important;border-top:1px solid rgba(23,24,28,.08);transition:background .18s,box-shadow .18s} .lrail-cat:first-of-type{border-top:none} .lrail-cat:hover{background:rgba(23,24,28,.035);box-shadow:inset 2px 0 0 #17181c} /* current page — matches the filled/bold state the masthead index already uses */ .lrail-cat.is-here{background:rgba(23,24,28,.05);box-shadow:inset 2px 0 0 #17181c} .lrail-cat.is-here .lrail-ico{color:#17181c} .lrail-cat.is-here .lrail-lab{color:#17181c;font-weight:700 !important} .lrail-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;color:#2b2c31;transition:color .18s} .lrail-ico i,.lrail-ico .lf-menuicon{font-size:24px !important;line-height:1 !important} /* the drawn marks carry no size of their own — the masthead sets theirs inline and the rail strips that off, so the size is given here instead */ .lrail-ico .lf-menuicon{width:24px;height:24px} /* The same handwriting the masthead buttons carry, brought down the rail. Placed against the row rather than the label so a long note cannot push the row wider, and tilted the other way from the one above it so the two do not look like the same sticker twice. */ /* The row is icon + label and nothing else. It briefly held a third child — the handwriting — and to get that onto its own line the row was set to align-items:flex-start with flex-wrap:wrap. The notes moved out to their own layer over the rail (a scrolling column clips its children on both axes, so they could never have overhung from in here), and those two declarations stayed behind doing damage: flex-start took the icon off the label’s middle by 6px, and wrap dropped the two labels too long for one line UNDER their icon instead of beside it. Centred again, and the row holds its line — the label wraps inside its own box. */ .lrail-cat{position:relative} .lrail-lab{min-width:0} /* Declared here as well as with the masthead notes. The face was only ever loaded by the component that draws those, so the rail was relying on another piece of the page being mounted to get its own type. */ @font-face{font-family:'True Lies';src:url('/fonts/true-lies.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} /* Under the label, not across it. Beside it there is nowhere to go — the rail is 186px wide and clips (see above) — so the note takes its own line, where the whole of it can be read and it covers nothing. */ /* The face has to be forced onto the descendants too, not just the note. The captured stylesheet sets Bahnschrift with !important on more or less everything, and it loads after this one — so any element inside the note that is not named here loses. The masthead has the same rule, but scoped to ul.lab-items, which is why the copies down here came out in Bahnschrift. */ .lrail-note,.lrail-note *{ font-family:'True Lies','Segoe Script',cursive !important; font-style:normal !important; } /* Placed by hand on .lrail-notes — see LeftRail. One line, always: it is free to run past the rail now, so there is nothing to wrap for. */ .lrail-note{ position:absolute; /* The 39px left offset belonged to the old anchor, which started the writing at the label's LEFT edge and therefore on top of the word. Placement now starts after the label ends, so what is left here is Anja's nudge: 10px to the right and 5px up. The vertical centring is the transform. */ /* 10px to the right, and 5px DOWN to undo the tilt. translateY(-50%) centres the upright box, but the -5deg rotation happens about the left edge, so the far end lifts and the writing as a whole reads about 5px high on a 116px box. Measured at exactly -5px on all three, and the box is the same width for each, so one constant corrects all of them. (The -5px that used to sit here was a nudge for the OLD anchor, where the note hung under the label rather than beside it — against the new anchor it doubled the lift.) */ margin:5px 0 0 10px; transform:translateY(-50%) rotate(-5deg);transform-origin:0 50%; font-family:'True Lies','Segoe Script',cursive !important; font-weight:400 !important;font-style:normal !important; font-size:14px;line-height:1.05;letter-spacing:0;text-transform:none; text-align:left; /* Two rows for the long one — the same rule the drawer uses, at this size. "Obvezne navedbe" measures about 108px here and "Obvezne navedbe na" about 125, so a cap between them breaks the line where the words want to break: obvezne navedbe / na embalaži. The short two stay on one line, Makeup at roughly 48 and White label at 68. An explicit width, not a max-width: these sit on a layer that is 0x0 by design, so a shrink-to-fit box has nothing to size against and collapses to min-content, which breaks every note at every space. */ white-space:normal !important; width:116px; pointer-events:none;-webkit-user-select:none;user-select:none; } /* the long one is the only one on two rows, centred so the shorter second line sits under the middle of the first */ .lrail-note-right{text-align:center} .lrail-note b{font-weight:700 !important;font-style:inherit} /* Every note shows here, including the one for the page you are on. The masthead hides that one because its icon swells and the writing collided with the artwork; nothing in the rail moves, so there is nothing to avoid — and hiding it just made White label vanish while reading /proizvodnja. */ /* A menu mark that is a file rather than a font glyph. Sized in em so it tracks whatever font-size the row or the rail sets, and inked with currentColor so it matches the Font Awesome icons beside it exactly. */ /* 2em tall to match the box a Font Awesome glyph occupies at the same font-size — at 1em the item was half the height of its neighbours and its label rode up out of the row. The artwork is drawn at 1.5em inside it. */ /* A menu mark that is a file rather than a font glyph. It carries no size of its own: em-based guesses were tuned at one font-size and broke at another, and the highlighted item changes size again. The box is measured off a real Font Awesome sibling at runtime and set in px; the drawing just fills it. */ .lf-menuicon{display:inline-block;vertical-align:middle; background-color:currentColor; -webkit-mask:var(--lf-mark) center/var(--lf-mark-size,78%) no-repeat; mask:var(--lf-mark) center/var(--lf-mark-size,78%) no-repeat} /* Hover, which a drawn mark has to be told about. The captured menu animates its icons with .lab-items li:hover i — and PROIZVODNJA and EMBALAŽA are not any more, they are masked s. So the label under them grew and darkened on hover and the drawing above it sat there doing nothing. Anja: "some not proper animated when hoovered (proizvodnja, embalaža)". The colour needs !important for the same reason the captured rule does: the row writes #777777 inline on every icon. The transition is stated here rather than only on hover, so it eases back out as well as in. */ .lab-items .lf-menuicon{transition:transform .25s ease,background-color .25s ease} .lab-items li:hover .lf-menuicon{transform:scale(1.1);color:#000 !important} .lrail-cat:hover .lrail-ico{color:#17181c} .lrail-lab{font-family:'Rajdhani',sans-serif !important;font-weight:600 !important;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:#3a3b40;line-height:1.2} .lrail-blog{display:flex;flex-direction:column;gap:10px;margin-top:26px} .lrail-post{display:block;text-decoration:none !important;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 6px 18px -10px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s} .lrail-post:hover{transform:translateX(4px);box-shadow:0 12px 26px -12px rgba(0,0,0,.4)} .lrail-post-img{display:block;height:84px;background:#e6e0d8 center/cover no-repeat} .lrail-post-b{display:block;padding:10px 11px 12px} .lrail-post-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:'Fraunces',Georgia,serif !important;font-weight:400 !important;font-size:12.5px;line-height:1.28;color:#22242a} .lrail-post-d{display:block;margin-top:7px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:#a49e94} /* ---- fit, so the rail never sits on top of the page ---------------------- The rail is fixed at left:14px and 186px wide, so its right edge is at 200px. Page content is a 1140px container, whose left edge is at (viewport − 1140) / 2. Below ~1564px those overlap and the rail covers the first ~60–140px of every page. Three tiers instead: ≥1580px full rail (there is genuinely room) 1300px+ collapsed to icons only; hover expands it over the page below hidden — a 1140px container leaves no room at all */ .lrail{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s,width .28s ease} @media(max-width:1299px){.lrail{display:none}} /* ── the journal cards, two to a row on a phone ────────────────────────────── Anja: the cards were far too big, and there was no air before them. The air first. The section carries margin:15px 0 40px, and the dark divider above it ends 10px BELOW where the cards begin — they were overlapping it, not merely sitting close to it. Then the width. The theme gives each card col-lg-4 col-sm-6 col-12, so under Bootstrap 576 they go full width and one card fills the screen. Halved here, with the type and the insets brought down to match: a 30px inset inside a 157px card leaves under a hundred pixels for the words. */ /* The journal strip's own margin, settled the same way in both languages. Two captured rules fight over it — .ltn__blog-area{margin-top:0!important} and .ltn__blog-area{margin:90px auto 12px!important} — and which one wins is decided by the order the stylesheets happen to load. On the Slovenian pages the zero comes last; on the English ones the 90px does, so the strip sat 90px further down with a band of white above it that Anja read as stray. Neither is more correct than the other: what matters is that the two pages agree, and the Slovenian one is the page she signed off. One class deeper than either, so load order stops deciding it. */ .body-wrapper .ltn__blog-area{margin-top:0 !important} /* The page counter under the cards. It reads "1", which is the whole of what it has to say — there is one page of them. Anja: "remove the page counter for blogs from both footer grids, no need. Just display last ones". */ .ltn__blog-area .ltn__pagination-area{display:none !important} /* The fourth card, from tools/blog-strip-fourth.mjs. Three cards sit three across on a desktop and that IS the row. It is the phone that lays them two across, where three leave a hole in the grid — so the fourth shows there and nowhere else, rather than wrapping on its own into a second desktop row. */ .ltn__blog-area [data-lf-4th]{display:none} /* The card byline. The Slovenian pages hide it — .ltn__blog-item-3-normal .ltn__blog-meta .ltn__blog-author{display:none!important} — and the English pages do not, because the stylesheet carrying that rule is not among the ones their capture links at all. Same cards, same markup, "BY: ANJA RIJAVEC" over every English one and none of the Slovenian. Stated here so it does not depend on which sheets a capture happened to pick up. */ .ltn__blog-area .ltn__blog-meta .ltn__blog-author, .ltn__blog-area .ltn__tagc{display:none !important} @media(max-width:760px){ .ltn__blog-area [data-lf-4th]{display:block} /* 24, not 56. 56 was set to clear an overlap on the landing page, where the cards began 10px ABOVE the dark divider they follow. On a subpage nothing overlaps and the block above already leaves 38 of its own, so the same 56 stacked into a 94px void before the journal. 24 leaves the subpages at about 62 and the landing page still clear — the two cannot be made equal from here, because what precedes them differs by more than sixty pixels. */ /* The pull, then the space. The section holding the journal carries a captured margin-top:-45px, which is what dragged the cards up over the dark divider on the landing page — and why clearing that needed a 56px margin here, which on a subpage (where nothing pulls and the block above already leaves 38) stacked into a 94px void. The pull is stood down first, so the space below can be a plain number rather than a correction for something else. */ section:has(.ltn__blog-area){margin-top:0 !important} .body-wrapper .ltn__blog-area{margin-top:20px !important} .ltn__blog-area .row{margin-left:-7px !important;margin-right:-7px !important} .ltn__blog-area .row > [class*="col-"]{ flex:0 0 50% !important;max-width:50% !important; padding-left:7px !important;padding-right:7px !important; } .ltn__blog-item{margin-bottom:14px !important} /* the wrapper as well as the picture: it kept its own 200px while the image inside came down to 120, leaving 80px of nothing under every card. One class deeper than it needs to be, because the captured CSS says .ltn__blog-item-3 .ltn__blog-img{height:200px!important} at the same weight as this — so which of the two wins came down to the order the stylesheets happened to load, and that order differs between a Slovenian page and its English twin. On /en/production-lab the 200px won and every card on the phone carried 80px of white under its picture. */ .ltn__blog-area .ltn__blog-item .ltn__blog-img{height:120px !important;overflow:hidden} .ltn__blog-area .ltn__blog-item .ltn__blog-img img{height:120px !important;object-fit:cover;width:100%} .ltn__blog-item .ltn__blog-brief{padding:12px !important} .ltn__blog-item .ltn__blog-title{font-size:12.5px !important;line-height:1.3 !important;margin-bottom:8px} .ltn__blog-item .ltn__blog-meta-btn{padding-top:10px !important;font-size:9px !important} .ltn__blog-item .ltn__blog-meta-btn a, .ltn__blog-item .ltn__blog-meta a{font-size:9px !important;letter-spacing:.4px} } /* THE DATE AND PREBERI VEČ, ON THE SAME LINES. Anja, on every blog card everywhere: the two are not in line. They sit in a flex row centred against each other, and both wrap to two lines — but at different sizes, 11px on 19.8 against 12px on 21.6, so their lines are staggered. Measured: the date's ink starts 5.2px above the button's and ends 3.8px below it. One size and one leading for both, aligned to the top, puts every line of one on the same baseline as the line beside it. */ .ltn__blog-item .ltn__blog-meta-btn{align-items:flex-start} .ltn__blog-item .ltn__blog-meta,.ltn__blog-item .ltn__blog-meta *, .ltn__blog-item .ltn__blog-btn,.ltn__blog-item .ltn__blog-btn *, /* the link itself needs the longer selector: the phone rules set it to 9px with !important two classes deep, and the shorter one above loses to that */ .ltn__blog-item .ltn__blog-meta-btn .ltn__blog-btn a{ font-size:11px !important;line-height:19.8px !important; /* and the same FACE, which is what actually settles it. With the size and the leading matched the two still sat 2px apart, because two faces centre differently in the same line box — the date's ink ran 14px tall against the link's 11. One family, one set of metrics, one baseline. */ font-family:'IBM Plex Mono',monospace !important} /* ── the index as a slide-in, on anything narrower than the rail ──────────── Same element, same contents; it stops being a rail pinned to the side and becomes a panel that comes in from the left when the menu button is pressed. The display:none above has to be undone by something more specific, hence the doubled class. */ .lrail.lrail-as-drawer{ display:block; position:fixed;left:0;top:0;bottom:auto; /* Anja: narrower, now the long note is on two rows. What sets the width is the handwriting — a note starts at its label’s right edge and runs 104px, so the longest reaches about 264. */ width:min(80vw,280px);height:100vh;height:100dvh; transform:translateX(-102%); opacity:1;visibility:visible; transition:transform .38s cubic-bezier(.16,1,.3,1); /* over the masthead, which the theme puts at 9999 — at 9995 the logo, the flag and the cart painted straight through the open panel */ z-index:10050; /* Anja: the milky glass the rail has on a desktop. That glass lives on .lrail-menu — rgba(250,249,246,.72) over a blur — and it was being wasted here, because this panel was painting solid white behind it. The recipe moves out to the panel, which is the thing standing over the page now, and the menu inside stops carrying its own so the two do not frost twice. A little more blur than the desktop's 11: this covers most of the screen rather than a 186px strip. */ /* .78 let only a fifth of the page through, which reads as flat grey rather than as glass. At .6 the page is genuinely visible behind it and the rows still hold their contrast, and a softer blur keeps enough shape in what shows through to be worth seeing. */ background:rgba(250,249,246,.6); backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35); box-shadow:none; border-right:1px solid rgba(23,24,28,.1); } .lrail.lrail-as-drawer.nav-open{transform:none;box-shadow:0 0 40px rgba(23,24,28,.25)} /* the frosting is on the panel now; the menu inside is just rows */ .lrail.lrail-as-drawer .lrail-menu{ background:none;backdrop-filter:none;-webkit-backdrop-filter:none; border:0;border-radius:0;box-shadow:none;padding:0; } /* the column inside it scrolls, the panel itself does not */ .lrail.lrail-as-drawer .lrail-inner{max-height:100%;height:100%;padding-top:14px} /* the wordmark at the head of the panel, beside the close button */ .lrail-brand{display:none} /* Anja: half the air under the wordmark. It measured 22px to the KAZALO line — this padding plus the eyebrow’s own 6px top margin — so 5 here leaves 11. */ .lrail.lrail-as-drawer .lrail-brand{ display:block;padding:4px 6px 5px;line-height:0; } /* Sized by WIDTH, not height. Trimmed to its ink the wordmark is 851x77 — eleven to one — so asking for 26px of height drew it 287px wide, across the close button. The width is what there is room for; the height follows. Anja: the same size as the masthead wears on the landing page — that rule is .ltn__header-area .site-logo a img at 190px, so this is 190 too. Same wordmark, same width, whether you are looking at the top of the page or at the panel over it. */ .lrail.lrail-as-drawer .lrail-brand img{display:block;width:190px;height:auto} /* the notes layer is positioned against the panel and must not eat taps */ .lrail.lrail-as-drawer .lrail-notes{pointer-events:none} /* The margin on .lrail-note is the offset from a label bottom-left, written for the rail. Here the note is anchored beside the label and on the middle of its row, so that offset goes and the centring is done by the transform. */ .lrail.lrail-as-drawer .lrail-note{ margin:0; transform:translateY(-50%) rotate(-5deg); transform-origin:0 50%; font-size:12.5px; /* Anja: two rows for the long one, so the panel need not be as wide. Measured at this size: "Obvezne navedbe" is 96px and "Obvezne navedbe na" is 112, so a cap between them breaks it where the words want to break — obvezne navedbe / na embalaži. The short two sit well under it and stay on one line: Makeup is 43 and White label 61. */ white-space:normal !important; /* an explicit width, not a max-width: these are absolutely positioned on a layer that is 0x0 by design, so a shrink-to-fit box has nothing to size against and collapses to min-content — every note broke at every space, White label onto two rows and this one onto four. */ width:104px; line-height:1.05; } /* One gap for all three — Anja: the same distance from the button text. These carried 10 / 35 / 26, set by eye, which read as three different gaps because the rows they annotate are different lengths. The placement code already anchors every note at its OWN label's right edge, so a single shared margin is a single shared distance from the words, whatever the row says. NONE OF THIS TOUCHES THE PANEL. The notes live on .lrail-notes, a 0x0 layer over the top, so they are out of flow entirely — the drawer, its rows and its background are exactly the width they would be with no writing on them at all. That is the thing that was to stay as it was, and it does. */ .lrail.lrail-as-drawer .lrail-note{margin-left:6px} /* the long one is the only one on two lines, centred so the shorter second line sits under the middle of the first */ .lrail.lrail-as-drawer .lrail-note-right{text-align:center} /* No dim behind the panel. This carried rgba(23,24,28,.45), and the panel sits ABOVE it — so what the backdrop-filter was frosting was the scrim, not the page. Blur a flat dark sheet and you get flat grey, which is exactly what it looked like. The desktop rail has no scrim at all and frosts the page itself; this now does the same. It stays in place, invisible, to catch the tap that closes. */ .lrail-veil{ position:fixed;inset:0;z-index:10040; background:transparent; opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; } .lrail-veil.on{opacity:1;visibility:visible} .lrail-shut{ display:none; position:absolute;right:8px;top:8px;z-index:3; width:34px;height:34px;padding:0;border:0;border-radius:50%; background:rgba(23,24,28,.06);color:#17181c; font-size:15px;line-height:1;cursor:pointer; } .lrail.lrail-as-drawer .lrail-shut{display:block} /* whatever the site menu has that the eight areas do not */ /* Anja: the band around O NAS and VSTOP ZA STRANKE carries air it does not need — measured in the drawer, 30px above the pair and 65px between them and IZ DNEVNIKA. Two short links do not want a 18px skirt, and the journal below already announces itself with its own eyebrow. */ .lrail-more{border-top:1px solid rgba(23,24,28,.08);padding:8px 11px 0;display:flex;flex-direction:column;gap:0} /* Anja: a whole empty row between the last of these links and the journal. Measured in the open drawer: 20px between one link and the next, 41 from the last one to 'IZ DNEVNIKA'. 8 of that was the block's own bottom padding and 12 too much sat here, so both go and the two gaps match. */ .lrail.lrail-as-drawer .lrail-blog{margin-top:2px} /* GLASS ALL THE WAY DOWN — the desktop rail only. The frosting was on .lrail-menu alone, so the two blocks hanging under it stood on nothing: over a dark band of the page their black type was black on black. In drawer mode the whole panel carries the glass and this never showed. Same recipe as the menu card, so the rail reads as a stack of three cards rather than one card and two ghosts. */ .lrail:not(.lrail-as-drawer) .lrail-more, .lrail:not(.lrail-as-drawer) .lrail-blog{ background:rgba(250,249,246,.72); backdrop-filter:blur(11px) saturate(1.25); -webkit-backdrop-filter:blur(11px) saturate(1.25); border:1px solid rgba(255,255,255,.5); border-radius:10px; box-shadow:0 16px 36px -20px rgba(0,0,0,.34); } /* and the empty row between them goes with it: 26px of nothing under the links was the gap Anja kept seeing. 8 is a seam between two cards. */ .lrail:not(.lrail-as-drawer) .lrail-more{margin-top:8px;padding:6px 11px 8px} .lrail:not(.lrail-as-drawer) .lrail-blog{margin-top:8px;padding:9px 10px 11px} .lrail-more-l{ font-family:'Rajdhani',sans-serif !important;font-weight:600 !important; font-size:11.5px;letter-spacing:.8px;text-transform:uppercase; /* Ink, not grey. In the rail these read as a footnote under a column of dark labels; in the drawer, over frosted glass on a phone, Anja could barely see them at all — and they are the only way to O NAS and KONTAKT there. */ color:#17181c;text-decoration:none !important;padding:7px 0; } .lrail-more-l:hover{color:#17181c;text-decoration:underline !important} /* ── nothing wider than the box holding it ─────────────────────────────────── Not in a phone media query, and that is the whole point. When a picture overflows, the browser widens the layout viewport to fit it — /en/about loaded at 859px because a 500px logo was sitting in a 359px column — and a max-width:760px block cannot match a viewport that has just been pushed to 859. The rule that repairs the overflow would be switched off by the overflow. It also has to hold at first paint: once the viewport has widened it does not narrow again on its own, so a correction applied afterwards leaves the page zoomed out for good. Only the logos are capped at every width — a wordmark wider than the column it sits in is never intended, and the captured CSS sets max-width:none on them. The content pictures stay in the phone block below: several of them are meant to run wider than their box on a desktop, and capping those everywhere pulled the banner frames in from 876px to 529px. */ .footer-logo img,.site-logo img{max-width:100% !important;height:auto} /* The masthead wordmark, made to fit the phone. The captured CSS pins it at a flat 286px — .ltn__header-area .site-logo img, width AND max-width, both !important, regardless of how narrow the screen is. On a 375px phone that reaches x301 and runs straight into the language flag at 292 and the cart behind it. Sized to leave both of them room. The selector needs the "a" to outrank that one: two classes and an element beats two classes and an element only by coming later, and the captured sheet is injected into the body, which is later than this. */ @media(max-width:760px){ .ltn__header-area .site-logo a img{ width:190px !important;max-width:190px !important;height:auto !important; } } /* The footer tape is drawn far wider than the footer and cut back with a clip-path, because the cut has to hold three edges and leave the top open. Chrome honours that when it paints and ignores it when it measures the document, so the uncut box still counted as page width — 614px on a 375px screen. On most templates the captured CSS clips .body-wrapper and hid the problem; on the two custom ones it does not, so the page slid sideways there and nowhere else. clip, not hidden: overflow:hidden would make this a scroll container and break the sticky column on the About page. clip trims the same overflow without that. Both axes now, not just x. The footer tape's runs are rotated absolute boxes, and a rotated box's LAYOUT rect is the footprint of the rotation — far taller than the ink. Their clip-path stops them being drawn below the footer, but Chrome measures scrollable overflow from the unclipped boxes, so the page kept 235px of empty white under the footer on the English pages, which have a taller footer to hang from. Clipping the y axis here costs nothing — the wrapper is the whole page, so nothing legitimate reaches its edges — and the page still scrolls, because clip does not make this a scroll container. */ .body-wrapper{overflow:clip} /* ── hover, on something that cannot hover ─────────────────────────────────── The index menu carries li:hover i, li:hover h6 { transform:scale(1.1); color:#000 } — fine with a mouse, wrong on a screen you touch. A tap leaves :hover asserted on whatever was tapped, so the item stays 10% larger and blacker than its neighbours until something else is tapped, which reads as the menu having gone wrong rather than as a hover. hover:none rather than a width query: it is the input that matters, not the size of the window. A touchscreen laptop gets the same treatment, and a narrow desktop window keeps its hover. The current page is still marked — that is a weight of its own and has nothing to do with this. */ @media(hover:none){ .lab-items li:hover i, .lab-items li:hover .lf-menuicon, .lab-items li:hover h6{ transform:none !important; color:inherit !important; transition:none !important; } } /* ── phones ────────────────────────────────────────────────────────────────── What is left breaks outright at 375px, all measured rather than guessed. */ @media(max-width:760px){ /* The splash video's phone treatment moved to INTRO_CSS, where it is stacked above the wordmark rather than laid behind it. Left as a pointer because the rule it replaced was hard-won: the capture's own phone crop (scale 1.5, top -31%, left -46%) frames nothing here. */ /* 1. The index menu is one grid row that never wraps, so its eight buttons ran from -183 to 520 in a 375px window — three of them fully off screen on one side or the other. Four to a row fits, and the last two sit centred underneath. */ /* .rim-top in front because the desktop rule is .rim-top .lab-items with !important — two classes. A single class cannot outrank it however many !importants it carries. */ /* Anja: KAZALO — RAZIŠČITE NAŠA PODROČJA on one line. It was breaking on ten pixels: the words measure 271 at 3px of letter- spacing, and with two 31px rules and two 16px gaps either side that is 365 of the 375 there is. Tighter spacing and shorter rules bring it to 311, with nowrap so it cannot break anyway. */ .rim-eyebrow{ white-space:nowrap !important; letter-spacing:2px !important; /* and pulled in: 22/28 of air around a single line was set for a masthead with room to spare */ margin:12px 0 14px !important; } .rim-eyebrow .rim-line{width:20px !important} .rim-top ul.lab-items{ /* Centred as a block. The captured CSS gives this width:90% !important under 600px and no margin with it, so the row sat flush against the left edge with all 39px of the remainder on the right. Anja: "top menu is not centered as a whole, leans a bit to the left." The 90% stays — it is the measure the icons were spaced for — and the leftover is split. */ margin-left:auto !important; margin-right:auto !important; grid-auto-flow:row !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-auto-columns:auto !important; /* half of 18: this is the space between a rebel note and the icons of the row under it, and it was the loosest thing in the block */ row-gap:9px !important; column-gap:6px !important; padding-top:2px !important; } .rim-top ul.lab-items li{width:auto !important} /* ul in the selector for the same reason as the grid rule above: RIM_CSS is a separate sheet injected after this one and carries .rim-top .lab-items i and h6 at !important, so a rule of equal weight here loses the tie and the icons stayed at their desktop 48px with 14px captions. */ .rim-top ul.lab-items i{font-size:26px !important;line-height:34px !important;height:34px !important} .rim-top ul.lab-items h6{ font-size:8.5px !important;letter-spacing:.5px !important; /* Anja: the caption sits too close to the drawing. It measured 4px between the icon's line-box and the top of the words, which reads as cramped rather than as an icon with a name under it. */ margin-top:9px !important; /* the captured markup sets white-space:nowrap inline on every caption, so the two longest ran side by side into each other — POGOSTA VPRAŠANJA ended at 252 and INOVACIJE began at 236. In a 94px cell they have to wrap. */ white-space:normal !important; } /* the handwriting is already hidden this small — it hangs off the side of a button that no longer has room beside it */ /* 2. Content images keep their desktop cap: one measured 468px wide inside a 375px screen. Phone-only on purpose — see the note above the logo rule. */ .lf img,.ldf-band img,.elementor-widget-container img,.wp-caption img, img.size-full,img.size-large,img.jr-half{max-width:100% !important;height:auto} /* 3. The header drop-menus open to the RIGHT of the button they hang from, which on a 375px screen puts the portal menu at 242-392 — off the edge and, now that the wrapper clips, invisible rather than merely awkward. Hung from the right edge instead, the same menu lands at 205-355. */ .ltn__drop-menu ul,.ltn__drop-menu .sub-menu{left:auto !important;right:0 !important} /* 4. The coordinate strings are set to run the width of a masthead — they reached 396 and 450 against a 375 viewport. They are decoration, and the date and title beside them are not, so these go. */ .rim-mast-r,.foot-mast-coord{display:none !important} /* Anja: the KDO SMO? menu goes, and the footer with it gets shorter. It is a heading and two links — O nas, Naša vizija — and both are in the index panel the menu button opens, so nothing becomes unreachable by dropping them. 84px of the footer back. */ .ltn__footer-area .footer-widget.widget_nav_menu{display:none !important} /* and the block that is left, tightened. 186px for a wordmark and three short lines: the paragraph alone was 117, about 39px a line for type of half that. The social row carries a 20px top margin on top of its own height, and the band opens with 38 above the lot. */ .ltn__footer-area .footer-about-widget p{line-height:1.55 !important;margin-bottom:6px !important} .ltn__footer-area .ltn__social-media{margin-top:8px !important} /* two classes, so it outranks the captured rule that sets 38 here */ .ltn__footer-area .footer-top-area{padding-top:20px !important} /* and the sign-off line, which carried 24 under it */ .ltn__footer-area .foot-mast{margin-bottom:12px !important} /* Anja: more air under the dnevnik line, the same as the pictures get. It measured 6px — the masthead carries a -37px pull to close the gap to whatever follows, and on a page where that is the copy the words start almost on the rule. Put on the copy rather than on the masthead: the pull is also what sets the rolling banner on the landing page, which is balanced at 22 either side, and padding the masthead would push that out by the same amount. */ /* margin, not padding: the row carries a rule along its bottom edge, so padding pushes the words away from that rule and leaves the line sitting high between the two — 9px above and 26 below. Outside the border instead, the words keep their place and the space lands after the rule, which is where it was wanted. */ .rim-mast{margin-bottom:18px !important} /* Anja: centre the headers and the copy in the feature blocks. They are laid out for a wide block where each part has a column of its own — which is why the lead paragraph is set text-align:right, reading back towards the heading beside it. Stacked in a 319px column that lands as a ragged left edge with no heading to lean on. Centred, the whole block reads as one thing. */ .lf .lf-eyebrow, .lf .lf-h, .lf .lf-lead, .lf .lf-glabel, .lf .lf-note, .lf p{text-align:center !important} /* Anja: centre these on a phone. All three are laid out to the left on a wide screen because there is something beside them there — the hero copy, the portal blurb, the second half of the HUD line. Down here each one has the width to itself and a block sitting hard against the left margin reads as unfinished. */ /* display:flex, not the inline-flex it has: auto margins do nothing to an inline-level box, which is why this one alone stayed hard left with 88px going spare beside it. Block-level, sized to its own content, and the margins can then do the centring. */ .hs-cta{ display:flex !important;width:fit-content; margin-left:auto !important;margin-right:auto !important; } /* NOT the portal button. Anja wants that one hard left after all: it heads a row that also carries the registration line, and centring the button while the line beside it stays left reads as two blocks that missed each other. */ .ldf-portal-cta{margin-left:0 !important;margin-right:auto !important} .hs-hud{justify-content:center !important} .hs-hud-r{text-align:center !important;width:100%} /* and the line under the map goes: the drawing is captioned by the figure title above it, and the note repeats what the picture already shows */ .ldf-map + .ldf-note{display:none !important} /* With the coordinates gone and the date already hidden at 720, the one line left in the masthead row was the only thing on the page starting at x2 — hard against the edge, while everything around it is inset 15. The rule above and below it still runs the full width. */ .rim-mast{padding-left:15px !important;padding-right:15px !important} } @media(min-width:1300px) and (max-width:1579px){ .lrail{width:58px} .lrail .lrail-eyebrow{gap:0;margin-left:0;margin-right:0;justify-content:center} .lrail .lrail-eyebrow span{display:none} .lrail .lrail-eyebrow{font-size:0} .lrail .lrail-lab{display:none} .lrail .lrail-blog{display:none} /* THE HOLE UNDER THE INDEX. Anja: O NAS and VPIS leave an unnecessary gap. Collapsed, the rail is 58px wide and gives a link 24px of it, so "Vstop za stranke" wrapped to three lines and the pair stood 162px tall — a column of unreadable text pretending to be a menu. They belong to the open state, exactly like the journal above them. */ .lrail .lrail-more{display:none} .lrail .lrail-cat{justify-content:center;gap:0;padding:12px 4px} .lrail .lrail-ico{width:auto} /* Anja: a bit wider, so only a little of the handwriting hangs off the edge rather than most of it. The rows do not need the room — the notes do, and they sit on a layer of their own. */ .lrail:hover{width:232px} .lrail:hover .lrail-eyebrow{font-size:10px;justify-content:flex-start;gap:9px} .lrail:hover .lrail-eyebrow span{display:block} .lrail:hover .lrail-lab{display:block} .lrail:hover .lrail-blog{display:flex} .lrail:hover .lrail-more{display:flex} /* ONE ENTRY, NOT THREE. Anja: on a desktop only the newest is reachable — the rail does not scroll, so the second and third sit below the fold and can never be clicked. Showing them is a promise the column cannot keep. The phone drawer scrolls and keeps all three. */ .lrail:hover .lrail-blog .lrail-post:nth-of-type(n+2){display:none} .lrail:hover .lrail-cat{justify-content:flex-start;gap:13px;padding:12px 11px} } /* 1170, not 1140: the theme lays the body copy out in a 1170px container, and the feature blocks match it deliberately (see .lf-w). The masthead rule sitting 15px inside that on either side made the copy look wider than the line above it. One measure for everything at the top of a page. */ .rim-top{max-width:1170px;margin:8px auto 0;padding:0} /* Anja: the air under the masthead was too much on every page. It measured 82 — 4 of our own, then 40 of the captured section's padding and 38 of the widget margin below it, neither of which is ours to edit. Halved by pulling the following section up by the difference. */ .rim-bottom{max-width:1170px;margin:0 auto -37px;padding:0} /* molecule→PIF connector: 30% smaller (color left as original — the PNG has an opaque light background, so a darken filter would fill it into a solid block) */ /* The molecule→PIF connector is relocated into .rim-bottom on the landing page, where it lands at 280px wide with no padding — 86px of height for the whole figure. On subpages it is left in its captured Elementor widget, which pads it 50px top AND bottom and lets the image run to 124px: 224px for the same drawing. Match the landing page wherever it sits, in both languages. */ /* A phone-only pull left behind by the relocate. The captured page carries, inside @media(max-width:767px): .elementor-2165 .elementor-element-fbec34d > .elementor-widget-container { margin:-50px 0 } written for whatever that widget held on the WordPress page. The molecule→PIF figure was moved into .rim-bottom afterwards, and inherits it: the widget paints 139px tall but occupies 39px of flow, so the drawing came down over the masthead line under it and left only the "LA" of "Labderma — laboratorijski dnevnik" showing in the 12px before the picture starts. */ @media(max-width:767px){ .rim-bottom .elementor-widget-container{margin-top:0 !important;margin-bottom:0 !important} } .bd-imagelink-61{text-align:center} /* Anja: enlarged from the captured 280 — 13%, then another 10%. */ .bd-imagelink-61 img,.rim-bottom .bd-imagestyles{max-width:348px !important;height:auto} .rim-top .elementor-widget,.rim-top .elementor-widget-container{margin:0 !important;padding:0 !important} /* ROOT CAUSE of the clipped icons: the theme gives ul.lab-items overflow:hidden with zero top padding, and after the relocate its top edge lands exactly on the icons' box top. Any glyph painting even a pixel above its line box is sliced off — worst on tall marks like fa-pump-soap (EMBALAŽA) and fa-flask (SUROVINE), and worst again on the current page's icon, which the captured markup enlarges. Let the row paint, and give it a little headroom. */ .rim-top .lab-items{display:grid !important;grid-auto-flow:column !important;grid-auto-columns:1fr !important;align-items:start !important;justify-items:center !important;gap:14px !important;margin:0 !important;padding:6px 0 0 !important;overflow:visible !important} /* The CURRENT page's entry is built differently: with nowhere to link to it has no , so its and
hang straight off the
  • , and the captured markup gives that
  • its own inline flex (gap:10px) plus negative side margins tuned for the original layout. Any rule written for "li a" therefore skips the one item on every subpage — which is why its label sat higher than the rest and the row drifted off-centre. So: lay out the
  • AND the identically. A linked
  • holds a single child, so its gap is inert and only the 's spacing counts; the anchor-less one gets that same spacing from the
  • itself. */ /* On the page you are CURRENTLY on, that entry has no — and it computed grid-column:1/-1, spanning the whole row, so it jumped to the far left and squeezed the other six into what was left. Every entry occupies exactly one auto column, whether it links anywhere or not. */ .rim-top .lab-items li{padding:0 !important;margin:0 !important;grid-column:auto !important;grid-row:auto !important} .rim-top .lab-items li, .rim-top .lab-items li a{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:4px !important;text-decoration:none !important;transform:none !important} /* Fixed 48px box for every icon so the labels below stay on one baseline regardless of the glyph. */ .rim-top .lab-items i{font-size:36px !important;line-height:48px !important;height:48px;display:block} /* A rule the English pages are missing. The Slovenian captured CSS carries .lab-items .fas{margin-bottom:15px} inside a min-width:600px block; the English ones do not, so the EN row sat 15px tighter — captions at 52 instead of 67 — and the current page drawing came down on top of its own caption. Restated here so both languages get the same row. Same 600px floor as the original, so the phone grid below is untouched. */ @media(min-width:600px){ .rim-top .lab-items i{margin-bottom:15px} } /* The captured markup flags the CURRENT page with an inline transform:scale(1.9) — sized against the original 24px icons. Against our 36px that renders ~68px: the glyph overflows its box, the top gets clipped and the label is shoved down. Neutralise the transform and express "current" as a controlled size bump instead (colour:#000 is already inline, so it stays emphasised). */ .rim-top .lab-items i[style*="scale"]{transform:none !important;font-size:44px !important} /* the drawings take the same cancellation; their emphasis is a bigger box, set by measurement in IndexMenuRelocate, not a scale */ .rim-top .lab-items [data-lf-mark][style*="scale"]{transform:none !important} .rim-top .lab-items h6{font-family:'Rajdhani',sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:1px !important;color:#22242a !important;line-height:1.15 !important;margin:0 !important;text-align:center;min-height:2.3em} .rim-rule{height:1px;background:#17181c;opacity:.85} .rim-eyebrow{display:flex;align-items:center;gap:16px;justify-content:center;margin:22px auto 28px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8b877f} .rim-eyebrow .rim-line{height:1px;width:64px;background:rgba(23,24,28,.2)} .rim-eyebrow b{color:#17181c;font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important} .rim-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:2px solid #17181c;border-bottom:1px solid rgba(23,24,28,.16);padding:9px 2px 8px;margin-top:2px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#8b877f} .rim-mast-l{color:#17181c;font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important} .rim-mast-c{font-family:'Fraunces',Georgia,serif !important;font-style:italic;font-weight:400 !important;font-size:15px;letter-spacing:-.2px;text-transform:none;color:#17181c} .rim-mast-r{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;white-space:nowrap} @media(max-width:720px){.rim-mast-c{display:none}.rim-mast{font-size:9px;letter-spacing:1px}.rim-eyebrow .rim-line{width:32px}} /* ── the figure block, halved for a phone ───────────────────────────── It measured 191px: a 348x105 drawing, 34px of pure air above it from the image own 32px top margin, and 20 under. Anja: half the size and tighter with it — then a quarter back on, half having been too far. 218 is 174 plus 25%, against the 348 it started at. */ @media(max-width:760px){ .bd-imagelink-61 img,.rim-bottom .bd-imagestyles{max-width:218px !important} .rim-bottom .bd-imagestyles{margin-top:8px !important} .rim-bottom > .elementor-element{margin-bottom:10px !important} /* Anja: the dnevnik line is missing its date. .rim-mast-c is switched off at 720 by the rule above — written when three things shared this row and the middle one had nowhere to go. Two is fine: the row is space-between, so the name takes the left and the date the right. */ .rim-mast-c{ display:block !important; /* Anja: the same size as the name beside it. The row is 9px mono and the date was set at 15px Fraunces — a third bigger than the thing it sits next to, and the tallest thing in the row at 27px against 16. Matched, it also gives the row its height back. */ font-size:9px !important; } } #n2-ss-2.hero-skinned .n2-ss-layer{opacity:0 !important;pointer-events:none !important} /* The slider positions its photograph at 57% 90% — near the bottom edge, which in a short hero band shows the floor of the shot rather than its subject. Centred, like the picture spacers (see artFocus in lib/section-art.ts). */ #n2-ss-2 img.skip-lazy,#n2-ss-2 .n2-ss-slide img{object-position:50% 50% !important} .hero-skin{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;padding:0 7% 0 46%} .hero-skin .hs-inner{pointer-events:none;max-width:540px;text-align:left} .hs-ey{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:14px;margin-bottom:22px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .hs-ln{width:52px;height:1px;background:#fff} /* NOTE: the captured theme forces div,h1..h6,span,a { font-family:'Bahnschrift Light'!important; font-weight:100!important } so every font-family/weight in this skin MUST be !important to win the cascade. */ .hs-h,.hs-h span{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important} .hs-h{font-optical-sizing:auto;font-variation-settings:'opsz' 144,'wght' 300,'SOFT' 0,'WONK' 0;line-height:.95;letter-spacing:-1.5px;margin:0;color:#fff;font-size:clamp(36px,5vw,74px);text-transform:none;text-shadow:0 2px 28px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4)} .hs-h span{display:block} .hs-h .hs-under{display:inline-block;position:relative;padding-bottom:4px} .hs-h .hs-under::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;animation:hs-underline .9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:.55s} @keyframes hs-underline{to{transform:scaleX(1)}} .hs-h .hs-it{font-style:italic;font-weight:560 !important;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 0,'WONK' 0 !important} .hs-side{position:absolute;left:6.5%;bottom:23%;max-width:380px;z-index:26;pointer-events:none;font-family:'Libre Franklin','Arial',sans-serif !important;font-weight:400 !important;font-size:clamp(15px,1.45vw,21px);line-height:1.5;color:#fff !important;text-transform:none;letter-spacing:normal;text-shadow:0 0 22px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.9)} .hs-side p,.hs-side b{color:#fff !important;font-family:'Libre Franklin','Arial',sans-serif !important} .hs-side::before{content:"";position:absolute;inset:-18px -26px;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 72%);filter:blur(8px);z-index:-1} .hs-side b{font-weight:700} .hs-side p{margin:0;position:relative} .hs-cta{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.65);padding:16px 30px;text-decoration:none;background:transparent;transition:background .3s,color .3s,border-color .3s;backdrop-filter:blur(1px)} .hs-cta:hover{background:#fff;color:#17181c;border-color:#fff} .hs-cta .hs-ar{transition:transform .3s} .hs-cta:hover .hs-ar{transform:translateX(6px)} /* instrument HUD across the top of the hero */ .hs-hud{position:absolute;top:20px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 6%;font-family:'IBM Plex Mono',monospace !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.82);z-index:27;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.55)} .hs-hud span{font-family:'IBM Plex Mono',monospace !important} .hs-hud b{color:#fff;font-weight:500 !important} .hs-hud-l{display:inline-flex;align-items:center} .hs-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:9px;box-shadow:0 0 9px rgba(255,255,255,.9);animation:hs-pulse 1.7s infinite} @keyframes hs-pulse{50%{opacity:.3}} /* rotating seal + white logo */ .hs-seal{position:absolute;left:6.5%;top:22%;width:132px;height:132px;z-index:26;pointer-events:none} .hs-seal svg{width:100%;height:100%;animation:hs-spin 26s linear infinite;transform-origin:center} .hs-seal svg text{font-family:'IBM Plex Mono',monospace;font-size:6.6px;letter-spacing:2.4px;fill:rgba(255,255,255,.82);text-transform:uppercase} .hs-seal-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0,0,0,.5))} @keyframes hs-spin{to{transform:rotate(360deg)}} @media(max-width:900px){ .hero-skin{padding:0 6%;justify-content:flex-start} .hs-h{font-size:clamp(30px,8vw,44px)} /* Anja: level with the word "formulirana", and horizontally exactly where it already is. At 14% the seal's middle sat at 201 against the line's 259 — 58px high. 31.5% puts the two on one line. Kept as a percentage of the hero rather than a pixel nudge so it holds as the hero changes height, and only top is touched, so right:6% leaves it where it was across. */ .hs-seal{left:auto;right:6%;top:31.5%;width:88px;height:88px} .hs-seal-mark{width:40px;height:40px} .hs-hud-l{display:none} .hs-hud{font-size:9px;justify-content:flex-end} .hs-side{display:none} } /* Picture spacer for the SECTION pages — the landing page's .ldf-gloves device, rebuilt around an so the three derived widths in public/art/ can be chosen with srcset. The measurements are deliberately the landing page's: 214px tall, 40/44 padding, the same eyebrow and the same Fraunces headline, so a reader moving from the landing page into a section meets the same object. .ldf-gloves stays where it is and keeps its background-image — it has one fixed picture and nothing to choose between. */ /* On the measure, not full bleed — the landing page's spacer exactly: same 214px, same 2px radius, same hairline inset and the same drop shadow, so the band reads as one object sitting ON the page rather than a strip cut through it. It used to touch both edges, which put it half under the sticky left rail and gave it a different silhouette from the one it is derived from. The measure is on the BAND, not inherited from its host: PageFeatures drops its hosts wherever the page offers an anchor, and on /nasa-vizija that is a full-width section while on /razvoj it is the 1170 container — so the same band came out 1920px wide on one page and 1170 on the other. The band hugs the top of its host and separates from the block beneath it — the host carries the air above and below the pair (journal.css). */ .ldf-band{position:relative;overflow:hidden;margin:0 auto 38px;min-height:214px;max-width:1170px;border-radius:2px;display:flex;flex-direction:column;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 16px 34px -18px rgba(0,0,0,.34)} /* object-position comes from lib/section-art.ts, per picture — see artfocus.mjs */ /* height needs !important: the captured theme sets img{height:auto} on every image, which beat height:100% here — so the picture stood 778px tall inside a 214px band anchored at the top, and object-position:50% 50% had nothing to centre. The band was showing the TOP of every photograph, not the middle. */ .ldf-band-img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;z-index:0;margin:0;max-width:none} /* the scrim rides ON TOP of the picture and under the words, fading out to the right so the half of the frame with the subject in it stays visible */ .ldf-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(21,22,27,.88) 0%,rgba(21,22,27,.55) 44%,rgba(21,22,27,.12) 100%)} /* the band is already on the measure, so the inner only insets the words from its own edge — the landing page's 40/44 */ .ldf-band-inner{position:relative;z-index:2;width:100%;margin:0 auto;padding:40px 44px} .ldf-band-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.72)} .ldf-band-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-optical-sizing:auto;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-1px;color:#fff !important;margin:14px 0 0;max-width:620px;text-transform:none} /* the face has to be repeated: the captured theme claims a bare span with !important, so inheriting Fraunces from the h2 is not enough — the italic half of the line came out in a slanted Bahnschrift */ .ldf-band-h .it{font-family:'Fraunces',Georgia,serif !important;font-style:italic;font-weight:420 !important;font-variation-settings:'opsz' 144,'wght' 420} /* pale picture — paper scrim, ink type, or a bright flat-lay goes grey */ .ldf-band-light::after{background:linear-gradient(90deg,rgba(249,247,243,.94) 0%,rgba(249,247,243,.62) 40%,rgba(249,247,243,.08) 76%,rgba(249,247,243,0) 100%)} .ldf-band-light{box-shadow:inset 0 0 0 1px rgba(23,24,28,.1),0 16px 34px -18px rgba(0,0,0,.22)} .ldf-band-light .ldf-band-eyebrow{color:#8b877f} .ldf-band-light .ldf-band-h{color:#1a1b20 !important} /* The lift the picture spacers have, given to everything else that sits ON the page rather than being part of it: the boxed lists, the framed print spec, and the photographs inside the copy. Deliberately the same offset, blur and spread as .ldf-band above — one shadow on the site, not several that nearly match. */ .fit-col, .et-printframe, .elementor-widget-text-editor .elementor-widget-container img{ box-shadow:0 16px 34px -18px rgba(0,0,0,.34); } @media(max-width:720px){.ldf-band{min-height:170px;margin:0 0 24px}.ldf-band-inner{padding:26px 24px}} /* The boot curtain — see components/BootCurtain.tsx. Paper coloured, so the page appears to arrive rather than to be uncovered. The delayed animation is the fallback: with no JS at all it still lifts, 1.15s in. */ .lf-boot{position:fixed;inset:0;z-index:99998;background:#faf9f6;pointer-events:none} @keyframes lf-boot-out{from{opacity:1}to{opacity:0;visibility:hidden}} /* The timed lift is the NO-SCRIPT fallback only. It used to apply always, and that is what Anja kept seeing: the fade fires 1.15s after paint whether or not the page has hydrated, and hydration takes longer than that on a cold dev compile or a slow phone. The curtain came up on the WordPress template, which is precisely the moment it exists to hide. The class lf-js is set by an inline script in the document head, so where scripts run at all the curtain waits to be lifted instead — and that in turn has its own hard cap in the same inline script, so a page whose JavaScript dies is uncovered rather than lost. */ html:not(.lf-js) .lf-boot{animation:lf-boot-out .62s cubic-bezier(.33,0,.2,1) 1.15s both} /* Anja: "please have the page load 'fade from white' style. All subpages everywhere." It already lifted — in 0.32s of linear-ish ease, which reads as a cut rather than a fade. Nearly twice as long now, on a curve that holds the paper a moment and then clears quickly, so the page arrives instead of appearing. The colour stays the site's own paper rather than pure white: a flash of #fff against a #faf9f6 page is a flash of the wrong white. */ html.lf-ready .lf-boot{animation:none;opacity:0;visibility:hidden;transition:opacity .62s cubic-bezier(.33,0,.2,1),visibility 0s linear .62s} @media(prefers-reduced-motion:reduce){.lf-boot{animation-duration:.01s}html.lf-ready .lf-boot{transition-duration:.01s}} /* THE FOOTER WORDMARK LINES UP WITH THE COLUMN UNDER IT. logo-white.webp carries 25px of transparent padding down its left edge out of 500 — 5% of itself — and the captured stylesheet answers that with a flat left:-12px. On a wide screen the mark is drawn big enough that 5% of it is about 12px and the two cancel; on a phone it is only 126px wide, so its padding is 6.3px against a 12px pull and the L lands 6px LEFT of every other line in the footer. Measured at 375px: the ink at x24, everything else at x30. The flat pull comes off and the correction becomes the percentage it always was, so the L sits on the column at any size. */ /* The solar array, once it is in the flow on a phone rather than filling the foot of a column — see PhotoSwaps. No inline height is set there, so it takes its own shape; the !important is only in case one ever is. */ @media(max-width:760px){ .jr-colfill{display:block;width:100%;height:auto !important;margin:18px 0 22px;border-radius:2px} } .footer-widget .footer-logo{left:0 !important} .footer-logo .site-logo img{transform:translateX(-5%)} /* And if a handset detects an address anyway, it does not get to draw on it. The switch in app/layout (formatDetection) is what stops the detection; this is what stops iOS styling anything that slips past it. */ a[x-apple-data-detectors]{color:inherit !important;text-decoration:none !important} /* pre-footer gap: theme left .ltn__blog-area a 100px bottom margin + 50px on the last blog row = 150px of empty space above the footer — halve both */ .ltn__blog-area.mb-100{margin-bottom:40px !important} .ltn__blog-area .ltn__blog-item{margin-bottom:22px !important} .ltn__footer-area{position:relative;overflow:hidden;background:#15161b !important;padding-top:20px !important;padding-bottom:0 !important} /* the inner .footer-top-area carried its own 92px top padding (untouched by the outer override) — that was the tall empty band at the top of the footer */ .ltn__footer-area .footer-top-area{padding-top:38px !important} .ltn__footer-area::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.55;pointer-events:none} .ltn__footer-area > *{position:relative;z-index:2} .ltn__footer-area .container,.ltn__footer-area .row{position:relative;z-index:2} /* compact */ .ltn__footer-area [class*='pt-'],.ltn__footer-area [class*='pb-'],.ltn__footer-area [class*='mt-'],.ltn__footer-area [class*='mb-']{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important} .ltn__footer-area .footer-widget{margin-bottom:0 !important;padding-bottom:0 !important} .ltn__footer-area p{margin-bottom:10px !important} .ltn__footer-area .menu li,.ltn__footer-area ul li{margin-bottom:2px !important} .ltn__copyright-area{padding-top:13px !important;padding-bottom:13px !important;margin-top:34px} .foot-mast{padding:2px 0 20px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)} .foot-mast-row{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px} .foot-mast-eyebrow{color:#fff;font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important} .foot-mast-coord{white-space:nowrap} .foot-mast-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-optical-sizing:auto;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(28px,4vw,50px);line-height:1;letter-spacing:-1px;color:#fff !important;margin:0} .foot-mast-h .it{font-style:italic;font-variation-settings:'opsz' 144,'wght' 420} .ltn__footer-area .widget-title h3,.ltn__footer-area .footer-title{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px !important;letter-spacing:3px !important;text-transform:uppercase !important;color:rgba(255,255,255,.55) !important;margin-bottom:22px !important} .ltn__footer-area p,.ltn__footer-area .footer-address,.ltn__footer-area li{font-family:'Libre Franklin',sans-serif !important;color:rgba(255,255,255,.62) !important;line-height:1.65} .ltn__footer-area .menu a,.ltn__footer-area ul a{font-family:'Libre Franklin',sans-serif !important;color:rgba(255,255,255,.74) !important;transition:color .2s,padding .2s} .ltn__footer-area .menu a:hover,.ltn__footer-area ul a:hover{color:#fff !important;padding-left:4px} .ltn__footer-area a[href^='mailto']{color:#fff !important} .ltn__footer-area .footer-newsletter input[type='email'],.ltn__footer-area input[name='EMAIL']{background:transparent !important;border:1px solid rgba(255,255,255,.22) !important;border-radius:2px !important;color:#fff !important;font-family:'IBM Plex Mono',monospace !important;font-size:13px !important} .ltn__footer-area .footer-newsletter input::placeholder{color:rgba(255,255,255,.4) !important} .ltn__footer-area .footer-newsletter button,.ltn__footer-area .footer-newsletter input[type='submit']{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;letter-spacing:2px !important;text-transform:uppercase !important;background:#fff !important;color:#15161b !important;border:1px solid #fff !important;transition:.2s} .ltn__footer-area .footer-newsletter button:hover{background:transparent !important;color:#fff !important} .ltn__footer-area .ltn__social-media a,.ltn__footer-area .ltn__social-media-2 a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:rgba(255,255,255,.72) !important;background:transparent !important;transition:.2s} .ltn__footer-area .ltn__social-media a:hover{background:#fff !important;color:#15161b !important;border-color:#fff} .ltn__copyright-area{background:#101116 !important;border-top:1px solid rgba(255,255,255,.08)} .ltn__copyright-area p,.ltn__copyright-area a,.ltn__copyright-area span{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px !important;letter-spacing:1.5px !important;text-transform:uppercase;color:rgba(255,255,255,.45) !important} /* ── the customer menu behind the person icon ──────────────────────────────── Two things were wrong with it and only one of them was visible. It was CLIPPED on English. The English stylesheets carry .ltn__header-options{overflow:hidden} and the Slovenian ones carry nothing at all — identical markup, different load order, the divergence this project keeps meeting. The panel was cut off at the header's edge, so all that came out of a hover was a white sliver and the bottom of a shadow with no words in it. Anja: "slo has a drop edit at the mans icon, eng doesnt + has a weird shadow". Fixed one class deeper than the rule that broke it, so weight decides rather than order. And it looked like the theme's, not ours: 150px wide, cramped, with a blue drop shadow. It is now built the way the slide-out side menu is — white, a hairline instead of a shadow, uppercase letterspaced items with room to breathe, and the "Za stranke:" line demoted to a label rather than pretending to be a fourth destination. */ .ltn__header-area .ltn__header-options{overflow:visible !important} .ltn__drop-menu.user-menu > ul > li > ul{ width:252px !important; left:-104px !important; top:56px !important; background:#fff !important; border:1px solid rgba(23,24,28,.14) !important; border-radius:2px !important; box-shadow:0 18px 44px rgba(23,24,28,.10) !important; padding:0 !important; z-index:1002 !important; } .ltn__drop-menu.user-menu > ul > li > ul > li{ border:0 !important;padding:0 !important;margin:0 !important;list-style:none !important; } .ltn__drop-menu.user-menu > ul > li > ul > li + li{ border-top:1px solid rgba(23,24,28,.10) !important; } .ltn__drop-menu.user-menu > ul > li > ul > li > a{ display:block !important; padding:14px 20px !important; font-family:'IBM Plex Mono',monospace !important; font-weight:400 !important; /* Anja: the label and the destinations had their sizes the wrong way round — ZA STRANKE was the smaller of the two. They change places: 11 -> 9.5 here and 9.5 -> 11 on the label below. Weights are untouched. */ font-size:9.5px !important; letter-spacing:2.2px !important; text-transform:uppercase !important; line-height:1.4 !important; color:#17181c !important; background:transparent !important; transition:background .18s ease !important; } .ltn__drop-menu.user-menu > ul > li > ul > li > a:hover{ background:rgba(23,24,28,.05) !important; color:#17181c !important; } /* the theme hangs a decorative marker off every menu item; not here */ .ltn__drop-menu.user-menu > ul > li > ul > li > a::before, .ltn__drop-menu.user-menu > ul > li > ul > li > a::after{content:none !important;display:none !important} /* "Za stranke:" is a label. It links nowhere, so it should not look like the three things under it that do. */ .ltn__drop-menu.user-menu > ul > li > ul > li:first-child{ border-bottom:1px solid rgba(23,24,28,.14) !important; } .ltn__drop-menu.user-menu > ul > li > ul > li:first-child > a{ /* Anja: set the label bold. Darkened with it — at 9.5px, weight alone on a light grey reads as a rendering artefact rather than as emphasis. */ font-weight:700 !important; font-size:11px !important; letter-spacing:3.4px !important; color:#5f5b54 !important; padding:13px 20px 11px !important; cursor:default !important; } .ltn__drop-menu.user-menu > ul > li > ul > li:first-child > a:hover{ background:transparent !important;color:#5f5b54 !important; } /* On a phone the header options collapse and the panel would hang off the screen; it is anchored to the icon instead of centred under it. */ @media(max-width:760px){ .ltn__drop-menu.user-menu > ul > li > ul{ width:220px !important;left:auto !important;right:0 !important; } } /* .ask-inline is the same chat sitting in the flow of a page rather than pinned to its foot — /razvoj ends on one. Only the variables were ever scoped; every rule below is on the bare .ldf-* classes and applies to both. */ .ask-dock,.ask-inline{--ldf-ink:#17181c;--ldf-paper:#faf9f6;--ldf-dim:#8b877f;--ldf-faint:#b9b4ab;--ldf-line:rgba(23,24,28,.14);--ldf-line2:rgba(23,24,28,.28);--ldf-ok:#3f7d5f;--ldf-warn:#b08128;--ldf-bad:#c0492f} .ldf-fill .ldf-body{flex:1;display:flex;flex-direction:column} .ldf-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--ldf-line);background:rgba(23,24,28,.015);font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ldf-dim)} .ldf-cap b,.ldf-cap .ldf-tag{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important} .ldf-body{padding:24px 22px} /* one short line now rather than three clauses — it needs less room above it */ .ldf-note{margin:8px 2px 0;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:.4px;color:var(--ldf-faint)} .ldf-note-foot{margin-top:auto !important;padding-top:12px} .ldf-btn{margin-top:12px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--ldf-ink);color:var(--ldf-paper);border:1px solid var(--ldf-ink);padding:11px 22px;cursor:pointer;border-radius:2px;transition:.18s} .ldf-btn:hover{opacity:.85} .ldf-btn.ghost{background:transparent;color:var(--ldf-ink)} /* ask */ .ldf-chat{border:1px solid var(--ldf-line);border-radius:2px;background:#fff;padding:14px;flex:1;min-height:180px;max-height:240px;overflow-y:auto;font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;font-size:13px;line-height:1.5} /* The lines of the conversation themselves. These were left out when this sheet was split off from the landing page, so on every page but the home page the chat rendered as undifferentiated paragraphs — no rule beside the answers, and the visitor's own question indistinguishable from them. */ .ldf-msg{margin:7px 0;border-left:2px solid var(--ldf-ink);padding-left:9px;color:#3a3a3a} .ldf-msg b{font-family:'IBM Plex Mono',ui-monospace,monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:.5px} .ldf-msg.me{border-left:none;text-align:right;color:var(--ldf-dim)} .ldf-chatrow{display:flex;gap:8px;margin-top:10px} /* The same field as every other search box in the widgets: what somebody types is 14px, the hint under it is 11px in the faint grey. It was one 12.5px size for both, so the prompt read as heavy as an answer. */ .ldf-chatrow input{flex:1;border:1px solid var(--ldf-line2);border-radius:2px;padding:11px 12px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:14px;letter-spacing:.5px;outline:none;color:var(--ldf-ink)} .ldf-chatrow input::placeholder{color:var(--ldf-faint);font-size:11px;letter-spacing:.5px} .ldf-chatrow .ldf-btn{margin-top:0;padding:11px 18px} .cert-wrap,.cert-paper>.ldf-note{position:relative;z-index:1} /* FN-16 — the formulator, pinned to the foot of the window. Off-screen by default and slid up by .in; the transcript is collapsed to nothing until .open, so at rest this is one line of chrome. transform rather than bottom so the slide is composited and does not relayout the page under it on every scroll event. */ .ask-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(101%);transition:transform .34s cubic-bezier(.22,.61,.36,1);background:var(--ldf-paper,#f6f2ec);border-top:2px solid #17181c;box-shadow:0 -14px 34px -18px rgba(23,24,28,.5)} .ask-dock.in{transform:translateY(0)} /* The title in the middle of the bar, not at its left edge. The chevron keeps the right end, so the words are centred against the bar itself rather than against whatever is left over beside it. */ /* The promise, under the empty field. Shown while nobody has typed anything and gone the moment they do — so the fact that a question can end up in Anja's inbox is said before it happens, not after. */ /* The questions we already have answers to, offered until the visitor asks one of their own. Dashed rather than solid so they read as prompts, not as the controls of the panel. Wrapping is the point — they are whole sentences. */ .ldf-chatsugg{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .ldf-chatsugg button{font-family:'IBM Plex Mono',ui-monospace,monospace !important;font-weight:400 !important;font-size:10.5px;line-height:1.45;letter-spacing:.5px;color:var(--ldf-dim,#7a7b80);background:transparent;border:1px dashed var(--ldf-line2,rgba(23,24,28,.28));padding:8px 11px;cursor:pointer;text-align:left;border-radius:2px;transition:.15s} .ldf-chatsugg button:hover{color:var(--ldf-ink,#17181c);border-color:var(--ldf-ink,#17181c)} /* Pinned to the foot of the screen there is no room for four of them under the field, and the panel is already the height of a small sheet. */ .ask-dock .ldf-chatsugg{display:none} /* In the flow of a page the chat is a block, not a strip: give it the measure the rest of the section has and let it breathe. */ .ask-inline{max-width:680px;margin:0 auto;text-align:left} /* It opens on one line of greeting, so a tall box opens mostly empty. Let it start short and grow with the conversation until it scrolls. */ .ask-inline .ldf-chat{min-height:120px;max-height:300px} .ask-inline .ldf-body{padding:0} /* the lead above the block already makes the promise, word for word */ .ask-inline .ldf-chathint{display:none} .ldf-chathint{margin-top:7px; font-family:'IBM Plex Mono',ui-monospace,monospace !important; font-size:10px;line-height:1.5;letter-spacing:.4px; color:var(--ldf-dim,#7a7b80); max-width:62ch;} .ldf-chatrow input:disabled{opacity:.6} .ldf-btn:disabled{opacity:.45;cursor:default} .ask-dock-handle{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:9px 46px;background:none;border:0;cursor:pointer;text-align:center;position:relative} .ask-dock-handle .ask-dock-chev{position:absolute;right:20px;top:50%;transform:translateY(-50%)} .ask-dock-tag{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ldf-ink,#17181c)} .ask-dock-sub{flex:1;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ldf-dim,#7a7b80);text-align:right} .ask-dock-chev{font-size:12px;line-height:1;color:var(--ldf-dim,#7a7b80)} .ask-dock-handle:hover .ask-dock-chev{color:var(--ldf-ink,#17181c)} /* grid-template-rows 0fr -> 1fr collapses the transcript without a fixed height, so the panel is exactly as tall as the conversation in it */ .ask-dock-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1)} .ask-dock.open .ask-dock-body{grid-template-rows:1fr} .ask-dock-body>*{min-height:0;overflow:hidden} /* block, not the flex the figure normally is: as a flex item the body sized to its content and sat in the middle of the bar at 448px wide, with the auto margins it was given piling on top of that */ .ask-dock .ask-docked{display:block;width:100%;max-width:none;margin:0;border:0;background:none;box-shadow:none} .ask-dock .ask-docked .ldf-body{display:block;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:0 46px 16px;border:0;background:none} .ask-dock .ask-docked .ldf-chat{height:min(34vh,260px)} @media(max-width:820px){ .ask-dock-handle{padding:8px 20px} .ask-dock .ask-docked .ldf-body{padding:0 20px 12px} .ask-dock-sub{display:none} /* Opening it on a phone. Three things used to fight each other here. The chat was sized in vh, which does not shrink when the keyboard comes up, so the field ended up behind it. The panel had no ceiling, so it could grow taller than what was left of the screen. And the browser's own scroll-to-reveal moved a position:fixed panel, which on iOS is the jump you can never quite catch. dvh is the fix for the first two: it IS the visible viewport, keyboard included, so the sheet and the chat inside it both shrink to fit as the keyboard opens instead of being pushed off the bottom. */ .ask-dock{max-height:86vh; max-height:86dvh; display:flex;flex-direction:column;} .ask-dock-body{flex:1 1 auto;min-height:0} .ask-dock-body>*{overflow-y:auto;-webkit-overflow-scrolling:touch} .ask-dock .ask-docked .ldf-chat{height:min(38vh,240px); height:min(38dvh,240px);} /* a tap target that does not need aiming, and type that iOS will not zoom into — anything under 16px makes Safari scale the whole page */ .ask-dock .ask-docked input{font-size:16px;padding:12px 14px} .ask-dock .ask-docked .ldf-btn{min-width:46px;min-height:44px} }