/* Sport Fishing D.O. - the one stylesheet of sportfishingdo/web: the BASE part. * * Design 3 "Plavi bedz" (docs/HANDOFFS/sportfishingdo/DIZAJN-3.md, 2026-11-02; design 2.0 is archived in * _archive/sportfishingdo-v2-2026-11-02/). One system after Apple's Human Interface Guidelines - one face (Inter), * Apple's text styles, 44 px targets, capsule buttons, glass only on the frame and the controls, motion that is * brief, precise and switched off by "Reduce Motion" - and three worlds: * the sea (body.sf-svijet-d) the home page and Dejan - the gradient from the surface to the seabed, white text, * a white capsule with seabed letters as the primary action * the house (body.sf-svijet-k) Servis, M&D, enquiry, contact, legal, 404 - white and cloud with the badge's * cobalt as the accent; .sf-tamno turns a band navy (mornar), never black * Minn Kota (body.sf-svijet-m) Minn Kota (Oprema), categories, products, the helper - their yellow on the one * action, their rich black for text and small surfaces; headlines in Saira capitals * * NO COLOUR LITERAL lives here. The palette (--sf-crna, --sf-mk-zuta, ...) is written into :root by the builder * from SF_BOJE, and every ROLE by svijet.ts, which checks each one's contrast on every ground of its world: * --sf-bg --sf-bg2 --sf-bg3 the ground, a raised panel, a tile on the panel * --sf-tx --sf-tx2 --sf-ln text, secondary text, a hairline * --sf-ak --sf-ak-tx the ONE prominent button and its label; --sf-ak-h --sf-ak-h-tx its hover * --sf-oznaka --sf-oznaka-tx a section's letter chip * --sf-fk the focus ring * --sf-okvir --sf-podnozje the frame's glass and the footer's ground * THE FRAME FOLLOWS THE PAGE (IZ-20): .sf-vrh, .sf-podnozje, .sf-fab and .sf-app take the page's world roles; the * light plate (.sf-ploca) always Minn Kota's day roles on white (--sf-ploca, --sf-r-ploca), the gallery viewer (.sf-lb) * the house's night. * * The builder concatenates the parts of SF_CSS (src/lib/sportfishingdo/ctx.ts: this file, css/okvir.css, * css/pocetna.css, css/katalog.css, css/odabir.css, css/obrasci.css, css/odjeli.css, css/dejan.css, * css/zajednicko.css) into the ONE shipped assets/site.css. This part holds what every lane builds on. * * Layers: * 1. tokens 5. the seabed line (the page's scroll indicator) * 2. base 6. page heads, section heads, photographs and frames * 3. type 7. the footer, the floating contact button, the install card, #provjera * 4. links, buttons 8. the gallery viewer * 4b. the worlds' grounds and bands * 9. motion: arrivals, the reveal (.sf-pojava), the calm cross-fade between pages 10. reduced motion, forced * colours, print * * The first design of 2.0 (the sea under every page) is archived in _archive/sportfishingdo-dizajn-1-2026-10-20/. * * (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 1. tokens */ :root { /* type: Apple's text styles, scaled for the web (body 17 px, never below 12 px, no thin weights) */ --sf-ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sf-ff-mk: "Saira", var(--sf-ff); --sf-f-hero: clamp(2.75rem, 1.55rem + 5.4vw, 6.5rem); --sf-f-h1: clamp(2.375rem, 1.45rem + 3.6vw, 4.5rem); --sf-f-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); --sf-f-h3: clamp(1.3125rem, 1.15rem + .7vw, 1.75rem); --sf-f-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); --sf-f-broj: clamp(2.75rem, 2rem + 3vw, 4.5rem); /* geometry: an 8-point grid, concentric radii (an inner corner = the outer one minus the padding) */ --sf-max: 1200px; --sf-g: 16px; --sf-py: clamp(72px, 9vw, 136px); --sf-r: 12px; --sf-r-kartica: 20px; --sf-r-plocica: 28px; --sf-r-okvir: calc(var(--sf-r-plocica) - 12px); /* motion: the iOS sheet curve; brief and precise (Apple HIG: Motion) */ --sf-ease: cubic-bezier(.32, .72, 0, 1); --sf-ease-out: cubic-bezier(.22, .8, .24, 1); --sf-t-micro: 160ms; --sf-t-ui: 280ms; --sf-sjena: color-mix(in srgb, var(--sf-crna) 22%, transparent); --sf-sjena-jaka: color-mix(in srgb, var(--sf-crna) 40%, transparent); /* the world's light: the seabed line's fill (the frame reads it) - the badge's cobalt in the house, Minn Kota's yellow, the sea's light blue */ --sf-svjetlo: var(--sf-polje); /* the floating contact button (section 7): its size, its distance from the screen's edges, and THE ROOM IT NEEDS at the bottom-right corner - the footer's last line, the home page's last row and the install card keep clear of it, so it never covers content for good */ --sf-fab: 56px; --sf-fab-rub: 16px; --sf-fab-mjesto: calc(var(--sf-fab) + var(--sf-fab-rub) + 12px); } html[data-sf-svijet="m"] { --sf-svjetlo: var(--sf-mk-zuta); } html[data-sf-svijet="d"] { --sf-svjetlo: color-mix(in srgb, var(--sf-povrsina) 45%, var(--sf-bijela)); } @media (min-width: 734px) { :root { --sf-g: 24px; --sf-r-plocica: 32px; } } @media (min-width: 1068px) { :root { --sf-g: 40px; --sf-fab-rub: 28px; } } /* ===================================================================== 2. base */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* what shows when the page is pulled past its top or past the footer: the footer's ground of the page's world */ html[data-sf-svijet="d"] { background: var(--sf-dno); } html { background: var(--sf-oblak); scroll-padding-top: calc(var(--sf-bar) + var(--sf-hdr) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--sf-bg); color: var(--sf-tx); font: 400 17px/1.47059 var(--sf-ff); letter-spacing: -.012em; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } img, svg { display: block; max-width: 100%; height: auto; } picture { display: block; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, pre { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; letter-spacing: inherit; } main:focus { outline: none; } /* the outline follows each control's own corners (a capsule stays a capsule): no radius is set here */ :focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 3px; } ::selection { background: var(--sf-tx); color: var(--sf-bg); } .sf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sf-preskok { position: absolute; left: 8px; top: -80px; z-index: 60; background: var(--sf-grafit); color: var(--sf-bijela); padding: 12px 18px; border-radius: 980px; font-weight: 600; text-decoration: none; } .sf-preskok:focus { top: calc(var(--sf-bar) + 8px); } /* Inter's subset draws no left/right arrows: the system face does, the words around them carry the meaning */ .sf-strelica { font-family: system-ui, "Segoe UI Symbol", sans-serif; font-weight: 400; font-variant-emoji: text; } .sf-nb { white-space: nowrap; } /* A band's top and bottom padding are named (--sf-pt / --sf-pb): the heroes and the page heads set their own, print sets all of them. */ .sf-pojas { --sf-pt: var(--sf-py); --sf-pb: var(--sf-py); padding-block: var(--sf-pt) var(--sf-pb); } .sf-wrap { position: relative; max-width: calc(var(--sf-max) + 2 * var(--sf-g)); margin-inline: auto; padding-inline: var(--sf-g); } /* ===================================================================== 3. type */ /* the eyebrow takes the M&D mark's subline: small capitals, widely spaced */ .sf-eyebrow { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; color: var(--sf-tx2); } .sf-h1 { font: 700 var(--sf-f-h1)/1.04 var(--sf-ff); letter-spacing: -.034em; text-wrap: balance; max-width: 18ch; } .sf-h2 { font: 700 var(--sf-f-h2)/1.06 var(--sf-ff); letter-spacing: -.03em; text-wrap: balance; } .sf-h3 { font: 650 var(--sf-f-h3)/1.18 var(--sf-ff); letter-spacing: -.02em; text-wrap: balance; } /* Apple's grey sentence: the lede in the secondary colour, its strong words in the text colour */ .sf-lead { font: 600 var(--sf-f-lead)/1.36 var(--sf-ff); letter-spacing: -.018em; color: var(--sf-tx2); max-width: 40ch; text-wrap: pretty; } .sf-lead :is(b, strong) { color: var(--sf-tx); font-weight: 600; } .sf-tekst { max-width: 66ch; text-wrap: pretty; } .sf-tekst > * + * { margin-top: 16px; } /* the legal pages' column: its own block INSIDE the wrap, so it starts at the H1 / breadcrumb edge */ .sf-tekst--pravno { max-width: 72ch; } .sf-meta { font: 500 14px/1.4 var(--sf-ff); letter-spacing: -.005em; font-variant-numeric: tabular-nums; color: var(--sf-tx2); } .sf-caption { font-size: 14px; line-height: 1.45; letter-spacing: -.006em; } .sf-koncept { font: 500 13px/1.45 var(--sf-ff); letter-spacing: 0; color: var(--sf-tx2); } /* Minn Kota's voice: on their pages the headlines are heavy squared capitals (Saira for their Industry, DIZAJN-2 3); every other word stays Inter */ .sf-svijet-m :is(.sf-h1, .sf-h2) { font-family: var(--sf-ff-mk); font-weight: 800; font-stretch: 100%; text-transform: uppercase; letter-spacing: -.012em; line-height: .96; } /* ===================================================================== 4. links, buttons */ /* A text link inside running text: underlined, the underline thin. */ .sf-tekst a:not(.sf-gumb):not(.sf-link):not(.sf-veza), .sf-pravno a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } /* Apple's link: the words and a chevron, no underline until hovered; 44 px tall */ .sf-veza, .sf-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 17px/1.3 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); text-decoration: none; } .sf-veza:hover, .sf-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; } .sf-veza__chevron { flex: none; width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--sf-t-ui) var(--sf-ease-out); } .sf-veza:hover .sf-veza__chevron, .sf-link:hover .sf-veza__chevron { transform: translateX(3px); } .sf-dalje { margin-top: 28px; } .sf-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; } .sf-gumbi--sredina { justify-content: center; } /* buttons: Apple's capsule, 44 px at least; two kinds - the ONE prominent action (the world's accent fill) and an outline. The hover is MOTION, never a black fill (OP-20): the capsule lifts a hair and its arrow or chevron slides; a press scales it a hair. */ .sf-gumb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px; font: 600 17px/1.15 var(--sf-ff); letter-spacing: -.012em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--sf-t-ui) var(--sf-ease-out), color var(--sf-t-ui) var(--sf-ease-out), box-shadow var(--sf-t-ui) var(--sf-ease-out), transform var(--sf-t-micro) var(--sf-ease-out); } .sf-gumb:active { transform: scale(.97); } .sf-gumb--polje { background: var(--sf-ak); color: var(--sf-ak-tx); } .sf-gumb--polje:hover { background: var(--sf-ak-h); color: var(--sf-ak-h-tx); } .sf-gumb--obrub { background: transparent; color: var(--sf-tx); box-shadow: inset 0 0 0 1.5px var(--sf-tx); } .sf-gumb--obrub:hover { background: color-mix(in srgb, var(--sf-tx) 8%, transparent); } .sf-gumb .sf-strelica, .sf-gumb .sf-veza__chevron { display: inline-block; transition: transform var(--sf-t-ui) var(--sf-ease-out); } @media (hover: hover) { .sf-gumb:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px var(--sf-sjena-jaka); } .sf-gumb--obrub:hover { box-shadow: inset 0 0 0 1.5px var(--sf-tx), 0 10px 22px -14px var(--sf-sjena-jaka); } .sf-gumb:hover .sf-strelica, .sf-gumb:hover .sf-veza__chevron { transform: translateX(3px); } .sf-gumb:active { transform: scale(.97); } } .sf-gumb--velik { min-height: 52px; padding: 0 28px; font-size: 18px; } .sf-gumb--mali { position: relative; min-height: 36px; padding: 0 16px; font-size: 15px; } .sf-gumb--mali::after { content: ""; position: absolute; inset: -4px 0; } .sf-svijet-m .sf-gumb--polje, .sf-ploca .sf-gumb--polje { font-weight: 700; } /* a long label wraps rather than overflowing a narrow screen */ @media (max-width: 379px) { .sf-gumb { white-space: normal; } } /* ===================================================================== 4b. the worlds' grounds and bands */ /*
is the world's ground; a band may be Apple's grouped grey (--2) or dark (.sf-tamno, roles from svijet.ts) */ .sf-main { background: var(--sf-bg); color: var(--sf-tx); } .sf-pojas { background: var(--sf-bg); color: var(--sf-tx); } .sf-pojas--2 { background: var(--sf-bg2); } /* the sea (Dejan's world): ONE gradient over the whole of
, from the surface to the seabed, mixed in OKLab where the browser can, plain sRGB elsewhere (a var() cannot fall back by itself, hence the feature query). Its bands are transparent on it; voda.ts proves it darkens monotonically, svijet.ts that every role holds at the top. */ .sf-svijet-d .sf-main, .sf-svijet-d.sf-pojas { background-color: var(--sf-dno); background-image: var(--sf-voda-srgb); } @supports (background-image: linear-gradient(in oklab, currentColor, currentColor)) { .sf-svijet-d .sf-main, .sf-svijet-d.sf-pojas { background-image: var(--sf-voda-oklab); } } .sf-svijet-d .sf-main .sf-pojas { background: transparent; } .sf-svijet-d .sf-main .sf-pojas--2 { background: var(--sf-bg2); } /* ===================================================================== 5. the seabed line */ /* The REAL EMODnet seabed Trogir -> Jabuka -> Palagruza as a silhouette, full width, the sticky top's upper edge (okvir.css sizes it). aria-hidden, no numbers, no words. It is the page's scroll indicator: it fills in the world's own light (Minn Kota's yellow, the sea's blue, the house's white) as the page scrolls, and the native scrollbar is hidden ONLY where the line works (a scroll timeline, or inline.js's fallback has started). The position --sf-p (0..1) is registered so it interpolates; nothing ever moves the page. */ @property --sf-p { syntax: ""; inherits: true; initial-value: 0; } @keyframes sf-p { from { --sf-p: 0; } to { --sf-p: 1; } } @media screen { /* the line follows the position even with reduced motion (it is a position, not an animation) */ @supports (animation-timeline: scroll()) { :root { animation: sf-p linear both; animation-timeline: scroll(root block); } } } .sf-dubina { position: relative; overflow: hidden; pointer-events: none; } .sf-dubina__profil { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; } .sf-dubina__voda { fill: color-mix(in srgb, var(--sf-tx) 10%, transparent); } .sf-dubina__dno { fill: color-mix(in srgb, var(--sf-tx) 26%, transparent); } .sf-dubina__voda--zaron { fill: var(--sf-svjetlo); } /* the part already dived: the same water in the world's light, clipped at the scroll position */ .sf-dubina__ispuna { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--sf-p) * 100%) 0 0); } .sf-dubina__rub { display: none; position: absolute; top: 0; bottom: 0; left: calc(var(--sf-p) * (100% - 2px)); width: 2px; background: var(--sf-tx); } @media screen { @supports (animation-timeline: scroll()) { html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } .sf-dubina__rub { display: block; } } @supports not (animation-timeline: scroll()) { html[data-sf-p] { scrollbar-width: none; } html[data-sf-p]::-webkit-scrollbar { display: none; } html[data-sf-p] .sf-dubina__rub { display: block; } } } /* ===================================================================== 6. heads, photographs, frames */ /* a subpage's head: Apple's product-page opening - the crumbs small, the eyebrow, the H1 large, the grey lede */ .sf-glava { --sf-pt: clamp(28px, 4vw, 56px); --sf-pb: clamp(48px, 6vw, 88px); } .sf-glava .sf-h1 { margin-top: 2px; } .sf-glava .sf-lead { margin-top: 20px; } .sf-putanja { margin-bottom: clamp(24px, 3vw, 40px); } .sf-putanja ol { display: flex; flex-wrap: wrap; align-items: center; font: 500 13px/1.3 var(--sf-ff); letter-spacing: -.003em; color: var(--sf-tx2); } .sf-putanja li { display: flex; align-items: center; } /* the separator: a drawn chevron (no glyph, no colour of its own) */ .sf-putanja li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 10px 0 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; } .sf-putanja a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-tx2); text-decoration: none; } .sf-putanja a:hover { color: var(--sf-tx); text-decoration: underline; text-underline-offset: .25em; } .sf-putanja [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-tx); } /* a section's head */ .sf-kop { margin-bottom: clamp(32px, 4vw, 56px); } .sf-kop .sf-lead, .sf-kop .sf-caption { margin-top: 16px; } .sf-kop .sf-lead + .sf-caption { margin-top: 12px; } .sf-kop--sredina { text-align: center; } .sf-kop--sredina .sf-h1, .sf-kop--sredina .sf-h2, .sf-kop--sredina .sf-lead { margin-inline: auto; } .sf-izvor { max-width: 66ch; color: var(--sf-tx2); } .sf-izvor a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } /* photographs: their own ratio, never cropped, never tinted (PRODUCT-STANDARD 8b) */ .sf-foto { display: block; } .sf-foto img { display: block; width: 100%; height: auto; } .sf-gal { cursor: zoom-in; } /* a FRAME: a photograph or loop whole at its own ratio inside a rounded frame (in a tile its radius is the tile's minus the 12 px it stands in) - never darkened, never zoomed past its frame, never written on. What a different ratio leaves at its sides is the world's raised ground, never black. */ .sf-okvir { position: relative; overflow: clip; aspect-ratio: 16 / 9; border-radius: var(--sf-r-plocica); background: var(--sf-bg2); } .sf-okvir > picture, .sf-okvir > .sf-petlja, .sf-okvir > picture > img { width: 100%; height: 100%; } .sf-okvir img, .sf-okvir video { display: block; width: 100%; height: 100%; object-fit: contain; } /* a client photograph (mediji.ts fotoSlika: picture.sf-foto[data-sf-omjer]) is never letterboxed (IZ-15): its frame takes the photograph's OWN ratio from the img's width and height, so nothing is left at its sides and nothing is cut. A portrait never spreads across a wide column: it (or its frame) stands at most 420 px wide - a lane may put two portraits side by side in .sf-par, where each keeps its ratio and the pair shares one height. The :where() keeps these caps overridable by a lane's own layout. */ .sf-okvir:has(> .sf-foto) { aspect-ratio: auto; } .sf-okvir > picture.sf-foto { height: auto; } .sf-okvir > .sf-foto img { height: auto; } :where(.sf-foto[data-sf-omjer="uspravna"]), :where(.sf-okvir:has(> .sf-foto[data-sf-omjer="uspravna"])) { max-width: min(100%, 420px); } :where(.sf-okvir:has(> .sf-foto[data-sf-omjer="uspravna"])) > .sf-foto { max-width: none; } .sf-par { display: flex; gap: 12px; align-items: flex-start; } .sf-par > * { flex: var(--ar, 1) 1 0%; min-width: 0; max-width: none; } @media (min-width: 734px) { .sf-par { gap: 24px; } } /* a justified row: each photograph's own ratio (--ar) shares the width, so the heights are equal and none is cut */ .sf-red { display: flex; flex-direction: column; gap: 40px; } .sf-red > * { min-width: 0; } @media (min-width: 734px) { .sf-red { flex-direction: row; gap: 24px; } .sf-red > .sf-zapis { flex: var(--ar) 1 0%; } } /* ===================================================================== 7. footer, floating contact, install card, #provjera */ /* the footer FOLLOWS THE PAGE (IZ-20): its world's footer ground (cloud in the house and Minn Kota, the seabed on the sea), Apple's small grey type */ .sf-podnozje { /* the last line ends above the floating button's corner (--sf-fab-mjesto), never under it */ padding-block: 56px calc(max(40px, var(--sf-fab-mjesto)) + env(safe-area-inset-bottom, 0px)); background: var(--sf-podnozje); color: var(--sf-tx2); font-size: 14px; line-height: 1.5; } .sf-podnozje__mreza { display: grid; gap: 32px; } .sf-podnozje h2 { font: 600 13px/1.3 var(--sf-ff); letter-spacing: 0; margin-bottom: 8px; color: var(--sf-tx); } /* the footer's plain text links (the pages); the round bubbles and the channel capsules keep their own shape and colours (okvir.css) - the primary WhatsApp capsule must keep its accent label */ .sf-podnozje ul li a:not(.sf-mjehur):not(.sf-kanal-veza) { display: inline-flex; align-items: center; min-height: 40px; font: 400 14px/1.3 var(--sf-ff); color: var(--sf-tx2); text-decoration: none; } .sf-podnozje ul li a:not(.sf-mjehur):not(.sf-kanal-veza):hover { color: var(--sf-tx); text-decoration: underline; text-underline-offset: .25em; } .sf-podnozje__stranice ul { display: grid; grid-template-columns: minmax(0, 1fr); } .sf-podnozje__kontakt { overflow-wrap: break-word; } .sf-podnozje__pravno { font-size: 13px; line-height: 1.5; color: var(--sf-tx2); display: grid; gap: 8px; align-content: start; } .sf-podnozje__pravno a { color: var(--sf-tx); padding-block: 10px; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-podnozje__potpis { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--sf-ln); font-size: 13px; color: var(--sf-tx2); } .sf-podnozje__potpis a { color: var(--sf-tx); font-weight: 600; display: inline-block; padding-block: 10px; } @media (min-width: 734px) { .sf-podnozje__mreza { grid-template-columns: 1fr 1fr; column-gap: 32px; } } @media (min-width: 1068px) { .sf-podnozje__mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .sf-podnozje__pravno { grid-column: 1 / -1; } .sf-podnozje__pravno > p { max-width: 96ch; } } /* The floating contact: a small round button in the world's accent (the primary action's colours), contact actions only, never a bar - WhatsApp first in its list (UK-09). ALWAYS on screen, bottom-right, on every page from the first paint (Ante, 2. 11. 2026.: "uvijek na svim stranicama vidljiv"): nothing hides it or moves it; the footer and the home page's last row keep its corner free (--sf-fab-mjesto), and only a modal (the gallery viewer) stands above it. Its list is the frame's glass; while open it stands above the install card. */ .sf-fab { position: fixed; z-index: 30; right: calc(var(--sf-fab-rub) + env(safe-area-inset-right, 0px)); bottom: calc(var(--sf-fab-rub) + env(safe-area-inset-bottom, 0px)); } .sf-fab[open] { z-index: 45; } .sf-fab > summary { list-style: none; display: grid; place-items: center; width: var(--sf-fab); height: var(--sf-fab); border-radius: 50%; cursor: pointer; color: var(--sf-ak-tx); background: var(--sf-ak); box-shadow: 0 10px 30px -8px var(--sf-sjena-jaka); transition: transform var(--sf-t-ui) var(--sf-ease-out), background-color var(--sf-t-ui) var(--sf-ease-out); } .sf-fab > summary::-webkit-details-marker { display: none; } .sf-fab > summary:hover { transform: translateY(-2px); background: var(--sf-ak-h); color: var(--sf-ak-h-tx); } .sf-fab > summary .sf-ikona { width: 24px; height: 24px; } .sf-fab__lista { position: absolute; right: 0; bottom: calc(var(--sf-fab) + 12px); width: max-content; min-width: 232px; max-width: calc(100vw - 32px); display: grid; gap: 4px; padding: 8px; background: color-mix(in srgb, var(--sf-okvir) 94%, transparent); color: var(--sf-tx); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--sf-ln), 0 18px 44px -12px var(--sf-sjena-jaka); transform-origin: 100% 100%; } .sf-fab[open] .sf-fab__lista { animation: sf-iskoci .3s var(--sf-ease) both; } .sf-fab__lista > li { display: grid; } .sf-fab__lista a { min-height: 48px; font-size: 16px; text-decoration: none; } .sf-fab__lista .sf-kanal-veza { justify-content: flex-start; box-shadow: none; } .sf-fab__lista .sf-kanal-veza--glavni { box-shadow: none; } .sf-fab__popis a { display: flex; align-items: center; padding: 0 16px; border-radius: 980px; font-weight: 600; } .sf-fab__popis a:hover { background: color-mix(in srgb, var(--sf-tx) 8%, transparent); } /* the install card (Paidos markup, sf- names; PO-26 as before): a sheet of the frame's glass, in the page's world. It stands ABOVE the floating button's corner (--sf-fab-mjesto), so the two never overlap. */ .sf-app { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(var(--sf-fab-mjesto) + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 16px; border-radius: 24px; background: color-mix(in srgb, var(--sf-okvir) 94%, transparent); color: var(--sf-tx); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: inset 0 0 0 1px var(--sf-ln), 0 20px 48px -12px var(--sf-sjena-jaka); } .sf-app__ikona { width: 48px; height: 48px; border-radius: 11px; } .sf-app__t { font: 650 17px/1.25 var(--sf-ff); } .sf-app__x, .sf-app__koraci { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--sf-tx2); } .sf-app__koraci { font-weight: 600; color: var(--sf-tx); } .sf-app__gumbi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .sf-app__gumbi .sf-gumb { min-height: 44px; padding: 0 18px; font-size: 16px; } @media (min-width: 734px) { .sf-app { left: auto; right: calc(var(--sf-fab-rub) + env(safe-area-inset-right, 0px)); width: 420px; } } /* the #provjera walk-through layer: hidden unless has .sf-provjera (Studio Mario's pattern); its strip keeps the studio's catch colour so it never reads as part of the design */ html:not(.sf-provjera) .sf-pv { display: none !important; } .sf-pv-traka { background: var(--sf-ulov-tinta); color: var(--sf-bijela); padding-block: 10px; font-size: 14px; line-height: 1.4; } .sf-pv-traka p + p { margin-top: 4px; } .sf-pv-traka .sf-caption { opacity: .92; } .sf-pv-traka .sf-link { min-height: 32px; font-size: 14px; color: var(--sf-bijela); text-decoration: underline; } .sf-pv-izvor { margin-top: 8px; color: var(--sf-tx2); max-width: 66ch; } .sf-pv-izvor > span:first-child { font-weight: 700; color: var(--sf-tx); } p.sf-pv .sf-koncept { font-size: inherit; } /* ===================================================================== 8. the gallery viewer */ /* PRODUCT-STANDARD 8, ported from Vukman J. (galerija.js builds it at body level): Apple's photo viewer - the seabed's near-black, the controls glass. Two fingers zoom the PHOTOGRAPH (the stage owns the gesture), never the page; the cue bar fades after 2 s. */ .sf-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--sf-dno); color: var(--sf-bijela); } .sf-lb::backdrop { background: var(--sf-dno); } .sf-lb__stage { position: absolute; inset: 0; touch-action: none; overflow: hidden; } .sf-lb__subj { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; } .sf-lb__subj[data-anim] { transition: transform 240ms var(--sf-ease); } .sf-lb__img, .sf-lb__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; user-select: none; -webkit-user-drag: none; } .sf-lb__x { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 980px; color: var(--sf-bijela); cursor: pointer; background: color-mix(in srgb, var(--sf-grafit) 70%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-bijela) 16%, transparent); font: 600 15px/1 var(--sf-ff); } .sf-lb__ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sf-lb__meta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; justify-items: center; pointer-events: none; } .sf-lb__cap { max-width: 52ch; text-align: center; font-size: 14px; line-height: 1.5; color: var(--sf-siva-noc); } .sf-lb__bar { pointer-events: auto; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; width: 100%; max-width: 520px; min-height: 56px; padding: 0 8px; border-radius: 980px; background: color-mix(in srgb, var(--sf-grafit) 70%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-bijela) 14%, transparent); transition: opacity 240ms ease; } .sf-lb[data-cue="off"] .sf-lb__bar:not(:focus-within) { opacity: 0; } .sf-lb__nav { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sf-bijela); cursor: pointer; } .sf-lb__mid { display: grid; justify-items: center; text-align: center; grid-column: 2; } .sf-lb__hint { font-size: 13px; color: var(--sf-siva-noc); } .sf-lb__count { font: 600 14px/1.3 var(--sf-ff); font-variant-numeric: tabular-nums; } @media (hover: hover) and (pointer: fine) { .sf-lb__hint { display: none; } .sf-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: color-mix(in srgb, var(--sf-grafit) 70%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-bijela) 16%, transparent); } .sf-lb__prev { left: 20px; } .sf-lb__next { right: 20px; } } /* ===================================================================== 9. motion */ /* Purposeful, brief, precise and optional (Apple HIG: Motion). Everything below runs only when the visitor has not asked to reduce motion; without support (or JS) the page simply stands, complete. Nothing captures the wheel, touch or keys: what moves with the scroll follows the native scroll. Livelier INSIDE a page (IZ-16), calm BETWEEN pages (IZ-10). */ @keyframes sf-dizanje { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* THE REVEAL (DIZAJN-3 section 6, for every page lane): a block rises and grows a hair into place as it enters the screen - transform and opacity only, never layout. Put .sf-pojava on a block; put .sf-pojava-niz on a list and its children arrive one after another; put .sf-pojava-foto on a picture INSIDE its frame (.sf-okvir) and it grows into the frame (never past it). Where the browser runs scroll-driven animations the scroll itself draws it; elsewhere inline.js marks html.sf-pojava-js and adds .is-pojavljeno once a block is on screen; without JS everything simply stands. */ @keyframes sf-pojava { from { opacity: 0; transform: translateY(32px) scale(.965); } to { opacity: 1; transform: none; } } @keyframes sf-pojava-foto { from { opacity: .4; transform: scale(.92); } to { opacity: 1; transform: none; } } @keyframes sf-iskoci { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes sf-crtanje { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: no-preference) { /* arrival: the lines of an opening rise one after another, 90 ms apart, once */ .sf-ulaz > * { animation: sf-dizanje .9s var(--sf-ease) both; } .sf-ulaz > :nth-child(2) { animation-delay: 90ms; } .sf-ulaz > :nth-child(3) { animation-delay: 180ms; } .sf-ulaz > :nth-child(4) { animation-delay: 270ms; } .sf-ulaz > :nth-child(5) { animation-delay: 360ms; } .sf-ulaz > :nth-child(n+6) { animation-delay: 450ms; } /* the scroll: a block arrives as it enters the screen; a frame grows to its place (the photograph inside is never scaled past its frame - 8b) */ @supports (animation-timeline: view()) { .sf-otkrij { animation: sf-dizanje linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } .sf-pojava, .sf-pojava-niz > * { animation: sf-pojava linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } .sf-pojava-niz > :nth-child(3n + 2) { animation-range: entry 6% entry 76%; } .sf-pojava-niz > :nth-child(3n + 3) { animation-range: entry 12% entry 82%; } .sf-pojava-foto { animation: sf-pojava-foto linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } } @supports not (animation-timeline: view()) { html.sf-pojava-js :is(.sf-pojava, .sf-pojava-niz > *, .sf-pojava-foto) { transition: opacity .7s var(--sf-ease), transform .8s var(--sf-ease); } html.sf-pojava-js :is(.sf-pojava, .sf-pojava-niz > *):not(.is-pojavljeno) { opacity: 0; transform: translateY(32px) scale(.965); } html.sf-pojava-js .sf-pojava-foto:not(.is-pojavljeno) { opacity: .4; transform: scale(.92); } html.sf-pojava-js .sf-pojava-niz > :nth-child(3n + 2) { transition-delay: 70ms; } html.sf-pojava-js .sf-pojava-niz > :nth-child(3n + 3) { transition-delay: 140ms; } } /* a card that IS a link lifts a hair under the pointer (.sf-podigni; never a photograph's own zoom) */ .sf-podigni { transition: transform var(--sf-t-ui) var(--sf-ease-out), box-shadow var(--sf-t-ui) var(--sf-ease-out); } @media (hover: hover) { .sf-podigni:hover, .sf-podigni:focus-within { transform: translateY(-4px); box-shadow: 0 22px 44px -26px var(--sf-sjena-jaka); } } } /* BETWEEN PAGES: a calm cross-fade of about 0.25 s (IZ-10 "Mirnije", DIZAJN-3 section 6) - the roof is gone everywhere. Browsers without cross-document view transitions simply navigate; Reduce Motion switches it off (section 10). */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } ::view-transition-old(root) { animation: sf-vt-van .25s ease both; } ::view-transition-new(root) { animation: sf-vt-u .25s ease both; } @keyframes sf-vt-van { to { opacity: 0; } } @keyframes sf-vt-u { from { opacity: 0; } } /* ===================================================================== 10. reduced motion, forced colours, print */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .sf-fab > summary, .sf-lb__subj[data-anim], .sf-lb__bar { transition: none; transform: none; } .sf-fab[open] .sf-fab__lista { animation: none; } .sf-gumb, .sf-veza__chevron, .sf-gumb .sf-strelica, .sf-podigni { transition: none; } .sf-gumb:active, .sf-gumb:hover, .sf-gumb:hover .sf-strelica, .sf-gumb:hover .sf-veza__chevron, .sf-podigni:hover { transform: none; } } @media (forced-colors: active) { .sf-dubina { background: Canvas; } .sf-dubina__voda { fill: GrayText; } .sf-dubina__voda--zaron { fill: CanvasText; } .sf-dubina__dno { fill: Canvas; } .sf-dubina__rub { background: Highlight; } .sf-gumb { border: 2px solid ButtonText; } } /* LIGHT paper (decided 2026-10-18): white ground, ink text, no bars, no controls, no motion; svijet.ts writes the house's day roles for every world and the frame under print. */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; } .sf-dubina, .sf-fab, .sf-app, .sf-meni, .sf-pv, .sf-preskok, .sf-kanali, .sf-lb, .sf-podnozje__znak, .sf-podnozje__md, .sf-upit__privatnost { display: none !important; } .sf-pojava, .sf-pojava-niz > *, .sf-pojava-foto { opacity: 1 !important; transform: none !important; } html, body, .sf-main, .sf-pojas, .sf-podnozje { background: var(--sf-bijela) !important; color: var(--sf-grafit); } .sf-pojas + .sf-pojas, .sf-podnozje { border-top: 1px solid var(--sf-crta-dan); } .sf-pojas, .sf-glava { --sf-pt: 24px; --sf-pb: 24px; } .sf-gumb { background: var(--sf-bijela) !important; color: var(--sf-grafit) !important; box-shadow: inset 0 0 0 1px var(--sf-grafit) !important; } .sf-okvir { background: none; } } /* Sport Fishing D.O. - okvir.css (lane T), design 3 "Plavi bedz" (DIZAJN-3.md, 2026-11-02): the sticky top (.sf-vrh: the seabed line, the four tiles M S D MD, the top bar), the menu, the social bubbles, the contacts and the glyphs, the language switch, the muted loops, the footer's frame and the floating button's count. v2's sheet is archived in _archive/sportfishingdo-v2-2026-11-02/src/components/sportfishingdo/assets/css/okvir.css; its hub section moved verbatim to css/pocetna.css. The builder concatenates the parts of SF_CSS (src/lib/sportfishingdo/ctx.ts) into the ONE shipped assets/site.css. No colour literal: colours come only from :root (the SF_BOJE palette and the svijet.ts roles). THE FRAME FOLLOWS THE PAGE (IZ-20): it reads the page's world roles - light glass with graphite on the house and Minn Kota, navy glass with white on the sea (--sf-okvir is the glass, --sf-podnozje the footer's ground). No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). Markup: src/lib/sportfishingdo/chrome.ts. Layers: 1. tokens: the sticky top's three heights 2. the sticky top: glass, the seabed line, the four tiles, the top bar, the badge 3. the menu: a sheet of glass, the helper first 4. glyphs, social bubbles, contacts per channel, the language switch 6. the muted loops (mediji.ts petlja) 7. the footer's top row and columns, the floating button's count, the enquiry list's hooks 8. motion, reduced motion, forced colours, print (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 1. tokens */ /* The sticky top is ONE unit of three fixed heights: the seabed line, the tiles, the top bar. Every offset below it is var(--sf-bar) + var(--sf-hdr) (scroll-padding, the menu sheet, scroll margins, sticky rows); --sf-vrh is the whole unit - a lane's own sticky row (Minn Kota's filter) sits at top: var(--sf-vrh). */ :root { --sf-dubina-h: 4px; --sf-slova: 48px; --sf-hdr: 52px; --sf-bar: calc(var(--sf-dubina-h) + var(--sf-slova)); --sf-vrh: calc(var(--sf-bar) + var(--sf-hdr)); } /* ===================================================================== 2. the sticky top */ /* The wrapper is what sticks (RSSDZ's .rs-top): the line, the tiles and the top bar move as one. Its glass (Apple's regular material: blur and luminosity over the content scrolling beneath) is a LAYER of its own, so the menu's fixed sheet inside the header is never trapped by a backdrop-filter. NOTHING above it - html, body - may set overflow: hidden or a backdrop-filter, or sticky stops working. */ .sf-vrh { position: sticky; top: 0; z-index: 50; isolation: isolate; color: var(--sf-tx); } .sf-vrh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sf-okvir) 84%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--sf-ln); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sf-vrh::before { background: var(--sf-okvir); } } /* the seabed line: the unit's top edge, 4 px, filling in the world's light (site.css draws it) */ .sf-vrh > .sf-dubina { height: var(--sf-dubina-h); } /* THE FOUR TILES (PO-04, PO-05, DIZAJN-3 section 5): separate tiles in one centred row, M S D MD, each its mark and its word - also on a phone. Minn Kota's mark and the Servis wordmark ARE their words (chrome.ts SAM_ZNAK): those two tiles show the mark alone, the wordmark always 0.633 of Minn Kota's width, so its letters stand a hair taller than Minn Kota's (servis-rijec.mjs: the cap 1.15 x theirs) and the two read as one family. All four fit one row at 320 px: the tiles shrink their padding, gap and type there, never the Minn Kota mark below its 96 px. The current tile wears its section's colour (Minn Kota's yellow, the badge's cobalt, white on the sea) as a tint and an edge, and the badge's small ring under its word. */ .sf-kucice { border-bottom: 1px solid var(--sf-ln); } /* On a phone the row is FLUID (the tiles' padding, gaps, type and monograms grow with the screen between 360 and 733 px), so the four always fit one row: measured (English, the longer) 302 px of 320, 326 of 360, 344 of 390. */ .sf-kucice__red { display: flex; justify-content: center; align-items: center; gap: clamp(3px, calc(1.6vw - 2px), 8px); height: calc(var(--sf-slova) - 1px); max-width: calc(var(--sf-max) + 2 * var(--sf-g)); margin-inline: auto; padding-inline: clamp(4px, calc(2vw - 2px), 12px); } .sf-kucice__red > li { display: flex; flex: none; min-width: 0; } .sf-kucica { --sf-kucica: var(--sf-polje); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: clamp(4px, 1.4vw, 8px); height: 38px; padding: 0 clamp(5px, calc(2.4vw - 3px), 14px); border-radius: 11px; color: var(--sf-tx); text-decoration: none; white-space: nowrap; background: color-mix(in srgb, var(--sf-tx) 5%, transparent); box-shadow: inset 0 0 0 1px var(--sf-ln); font: 650 clamp(11px, calc(2.2vw + 4px), 14px)/1 var(--sf-ff); letter-spacing: -.004em; transition: background-color var(--sf-t-ui) var(--sf-ease-out), box-shadow var(--sf-t-ui) var(--sf-ease-out), transform var(--sf-t-micro) var(--sf-ease-out); } .sf-kucica[data-sf-svijet-odjela="m"] { --sf-kucica: var(--sf-mk-zuta); } .sf-kucica[data-sf-svijet-odjela="d"] { --sf-kucica: var(--sf-povrsina); } .sf-svijet-d .sf-kucica[data-sf-svijet-odjela="d"] { --sf-kucica: var(--sf-bijela); } .sf-kucica__znak { display: block; flex: none; width: auto; height: clamp(16px, calc(2vw + 9.6px), 22px); max-width: none; } .sf-kucica--oprema .sf-kucica__znak { width: clamp(96px, calc(6vw + 77px), 112px); height: auto; } .sf-kucica--servis .sf-kucica__znak { width: clamp(61px, calc(3.8vw + 48.7px), 71px); height: auto; } .sf-kucica--elektro .sf-kucica__znak { height: clamp(15px, calc(2vw + 8px), 20px); } .sf-kucica__rijec { display: block; } /* a mark whose file is not there yet: its name as text in the same place (mediji.ts) */ .sf-kucica .sf-logo--tekst { font: 800 13px/1 var(--sf-ff); letter-spacing: .02em; } .sf-kucica__prsten { position: absolute; left: 50%; bottom: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sf-kucica); opacity: 0; } .sf-kucica[aria-current] { background: color-mix(in srgb, var(--sf-kucica) 16%, transparent); box-shadow: inset 0 0 0 2px var(--sf-kucica); } .sf-kucica[aria-current] .sf-kucica__prsten { opacity: 1; } @media (hover: hover) { .sf-kucica:hover { background: color-mix(in srgb, var(--sf-kucica) 12%, transparent); } } /* 320 to 359 px: the four still fit one row - tighter padding and gap, the type a step down, the monograms 16 px; Minn Kota's mark stays at its 96 px minimum */ @media (max-width: 359px) { .sf-kucice__red { gap: 3px; padding-inline: 4px; } .sf-kucica { gap: 4px; padding: 0 5px; font-size: 11px; border-radius: 9px; } .sf-kucica__znak { height: 16px; } .sf-kucica--elektro .sf-kucica__znak { height: 14px; } .sf-kucica--oprema .sf-kucica__znak { width: 96px; } .sf-kucica--servis .sf-kucica__znak { width: 61px; } } @media (min-width: 734px) { .sf-kucice__red { gap: 10px; } .sf-kucica { gap: 9px; padding: 0 16px; font-size: 14px; } .sf-kucica__znak { height: 22px; } .sf-kucica--elektro .sf-kucica__znak { height: 20px; } .sf-kucica--oprema .sf-kucica__znak { width: 112px; } .sf-kucica--servis .sf-kucica__znak { width: 71px; } } /* The top bar: the badge and the name, the menu - nothing else, at every width. Its OWN wrap only (the child combinator): the menu's sheet inside it has a wrap of its own, which must never become this row. */ .sf-hdr { height: var(--sf-hdr); } .sf-hdr > .sf-wrap { display: flex; align-items: center; gap: 16px; height: 100%; } .sf-hdr__dom { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--sf-tx); } .sf-hdr__ime { font: 700 15px/1 var(--sf-ff); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The badge: the client's two variants in one cell - the cobalt disc on light grounds (the house, Minn Kota, paper), the white ring on the sea's navy. Never recoloured. znak-bijeli's viewBox is cropped to the ring (1221.32 of plavi's 1604.52, the same centre), so it is drawn at that ratio inside plavi's cell. */ .sf-znakovi { display: grid; place-items: center; flex: none; width: var(--sf-zv); height: var(--sf-zv); } .sf-znakovi > .sf-znak { grid-area: 1 / 1; width: var(--sf-zv); height: var(--sf-zv); max-width: none; } .sf-znakovi > .sf-znak--bijeli { width: calc(var(--sf-zv) * 1221.32 / 1604.52); height: calc(var(--sf-zv) * 1221.32 / 1604.52); } .sf-znak--bijeli { display: none; } .sf-svijet-d .sf-znak--plavi, .sf-tamno .sf-znak--plavi { display: none; } .sf-svijet-d .sf-znak--bijeli, .sf-tamno .sf-znak--bijeli { display: block; } .sf-svjetlo-k .sf-znak--plavi { display: block; } .sf-svjetlo-k .sf-znak--bijeli { display: none; } /* the top bar's badge is the REAL lettered badge, the hero's drawing (chrome.ts znakVrh: white on the sea, graphite on light worlds, no ground), 32 px - Ante, 4. 11.: every logo the same as the big one */ .sf-hdr__znak { display: block; flex: none; width: 32px; height: 32px; max-width: none; } /* ===================================================================== 3. the menu */ /*
, works without JS. The summary is Apple's two-line button (the lines cross into an X); the sheet is thick glass under the sticky top, in the page's world. MOBILE FIRST: the helper "Koji motor mi treba?" first, as a highlighted row (PO-14); then ONE column - each section a row of its own (its mark, its name, its line, its rows as an inset group, iOS Settings) - then the two actions full width, HR / EN, the bubbles and the contacts; from 734 px two columns; from 1068 px four columns, the mark above each name. Its columns rise one after another. */ .sf-meni { flex: none; } .sf-meni > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 12px; color: var(--sf-tx); transition: background-color var(--sf-t-micro) var(--sf-ease-out); } .sf-meni > summary::-webkit-details-marker { display: none; } .sf-meni > summary:hover { background: color-mix(in srgb, var(--sf-tx) 8%, transparent); } .sf-meni__crte { display: grid; gap: 6px; } .sf-meni__crte i { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--sf-t-ui) var(--sf-ease); } .sf-meni__crte i:nth-child(2) { display: none; } .sf-meni[open] .sf-meni__crte i:nth-child(1) { transform: translateY(3.75px) rotate(45deg); } .sf-meni[open] .sf-meni__crte i:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); } .sf-meni__panel { position: fixed; inset: var(--sf-vrh) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--sf-tx); background: color-mix(in srgb, var(--sf-okvir) 95%, transparent); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-top: 1px solid var(--sf-ln); } /* the sheet's own wrap is a column: the helper, the sections, then the bottom */ .sf-meni__unutra { display: grid; gap: 24px; } /* the helper, highlighted: a card in the world's accent (the primary action's colours) */ .sf-meni__pomocnik { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; padding: 16px 20px; border-radius: 18px; text-decoration: none; background: var(--sf-ak); color: var(--sf-ak-tx); transition: transform var(--sf-t-ui) var(--sf-ease-out), background-color var(--sf-t-ui) var(--sf-ease-out); } .sf-meni__pomocnik-ime { grid-column: 1; font: 700 clamp(1.25rem, 1rem + 1vw, 1.5rem)/1.15 var(--sf-ff); letter-spacing: -.022em; } .sf-meni__pomocnik-opis { grid-column: 1; font: 500 15px/1.35 var(--sf-ff); } .sf-meni__pomocnik > .sf-veza__chevron { grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 15px; } .sf-meni__pomocnik:hover { background: var(--sf-ak-h); color: var(--sf-ak-h-tx); } .sf-meni__pomocnik:hover > .sf-veza__chevron { transform: translateX(3px); } .sf-meni__odjeli { display: grid; min-width: 0; } .sf-meni__odjel { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 0 16px; border-bottom: 1px solid var(--sf-ln); } .sf-meni__naslov { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 0; font: 700 clamp(1.375rem, 1rem + 2vw, 1.625rem)/1.12 var(--sf-ff); letter-spacing: -.024em; text-decoration: none; } .sf-meni__znak { display: block; flex: none; width: auto; height: 22px; max-width: none; } .sf-meni__odjel--oprema .sf-meni__znak { width: 132px; height: auto; } .sf-meni__odjel--servis .sf-meni__znak { width: 84px; height: auto; } /* the Minn Kota mark and the Servis wordmark ARE their names (as in the strip and the footer): the word beside them stays for the screen reader */ :is(.sf-meni__odjel--oprema, .sf-meni__odjel--servis) .sf-meni__ime { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sf-meni__ime { min-width: 0; overflow-wrap: break-word; } .sf-meni__naslov:hover .sf-meni__ime, .sf-meni__naslov[aria-current="page"] .sf-meni__ime { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; } .sf-meni__opis { font-size: 15px; line-height: 1.4; color: var(--sf-tx2); } /* a section's rows: an inset group, each 48 px, a hairline between, a drawn chevron at the end (iOS Settings) */ .sf-meni__djeca { display: grid; margin-top: 10px; overflow: clip; border-radius: 14px; background: color-mix(in srgb, var(--sf-tx) 5%, transparent); } .sf-meni__djeca > li + li { border-top: 1px solid var(--sf-ln); } .sf-meni__djeca a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; font: 500 17px/1.3 var(--sf-ff); letter-spacing: -.012em; text-decoration: none; color: var(--sf-tx); } .sf-meni__djeca a::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg); opacity: .45; transition: transform var(--sf-t-ui) var(--sf-ease-out); } .sf-meni__djeca a:hover { background: color-mix(in srgb, var(--sf-tx) 5%, transparent); } .sf-meni__djeca a:hover::after { transform: translateX(3px) rotate(45deg); } .sf-meni__djeca a[aria-current="page"] { font-weight: 650; } /* the bottom: the two actions full width on a phone, then HR / EN, the bubbles and the contacts */ .sf-meni__dno { display: grid; gap: 22px; min-width: 0; } .sf-meni__gumbi { display: grid; gap: 10px; } .sf-meni__gumbi .sf-gumb { width: 100%; } .sf-meni__kontakti { font-size: 15px; min-width: 0; } @media (min-width: 734px) { .sf-meni__panel { padding-top: 20px; } .sf-meni__pomocnik { padding: 18px 24px; } /* two columns: Minn Kota with its rows, the other three stacked beside it */ .sf-meni__odjeli { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; } .sf-meni__odjel:first-child { grid-row: span 3; border-bottom: 0; } .sf-meni__naslov { font-size: 24px; } .sf-meni__dno { grid-template-columns: auto auto auto; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--sf-ln); } .sf-meni__gumbi { display: flex; flex-wrap: wrap; } .sf-meni__gumbi .sf-gumb { width: auto; } .sf-meni__kontakti { grid-column: 1 / -1; } } @media (min-width: 1068px) { .sf-meni__panel { bottom: auto; max-height: calc(100vh - var(--sf-vrh)); max-height: calc(100dvh - var(--sf-vrh)); padding: 32px 0 40px; box-shadow: 0 30px 60px -20px var(--sf-sjena-jaka); } .sf-meni__pomocnik { justify-self: start; min-width: 480px; } /* four columns, the mark ABOVE each name, so a long name (M&D Elektroinstalacije) has the column's whole width */ .sf-meni__odjeli { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } .sf-meni__odjel, .sf-meni__odjel:first-child { grid-row: auto; padding: 0; border-bottom: 0; } .sf-meni__naslov { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; font-size: 22px; } /* Minn Kota's and Servis' heads are their marks alone: they sit on the other columns' name line, so the four lines below align */ :is(.sf-meni__odjel--oprema, .sf-meni__odjel--servis) .sf-meni__naslov { justify-content: flex-end; min-height: 58px; } .sf-meni__opis { margin: 4px 0 0; } .sf-meni__djeca { margin-top: 12px; overflow: visible; border-radius: 0; background: none; } .sf-meni__djeca > li + li { border-top: 0; } .sf-meni__djeca a { justify-content: flex-start; min-height: 34px; padding: 0; font-size: 15px; color: var(--sf-tx2); } .sf-meni__djeca a::after { content: none; } .sf-meni__djeca a:hover { background: none; } .sf-meni__djeca a:hover, .sf-meni__djeca a[aria-current="page"] { color: var(--sf-tx); } .sf-meni__dno { grid-template-columns: auto auto auto minmax(0, 1fr); column-gap: 40px; } .sf-meni__kontakti { grid-column: auto; justify-self: end; } } /* ===================================================================== 4. glyphs, bubbles, contacts, the language switch */ /* a drawn glyph (chrome.ts ikona): strokes at the text's weight, in the text's colour */ .sf-ikona { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sf-ikona .sf-ikona__puno { fill: currentColor; stroke: none; } /* THE SOCIAL BUBBLES (PO-02, DIZAJN-3 section 5): round buttons of at least 44 px - the circle of the badge's rings. A network's bubble (.sf-mjehur--app; Dejan, 3. 11. 2026.: "staviti prave logoe aplikacija") is a WHITE round tile with the network's own full-colour app icon (chrome.ts APP_IKONA, assets/brand/app-*.svg): the same tile on every ground - the sea, the navy footer and the light worlds - as app icons sit on a phone; its hairline edge shows where the ground is light. Each icon is a share of its tile, so a larger bubble (Kontakt 52 px, Dejan 56 px) grows it too: the shares balance the four by eye and keep each brand's clear space inside the tile (YouTube: the size of its triangle; Facebook: a quarter of the logo; Instagram: half the glyph on its sides). An icon is never recoloured, outlined, shadowed, rotated or cropped, and in forced colours the tile stays white so each icon still reads. M&D's bubble keeps the world's text colour on a whisper of it (its mark is white on the sea); without an address it is the #provjera layer's. Under the pointer a bubble lifts a hair. */ .sf-mjehurici { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sf-mjehurici > li { display: flex; align-items: center; gap: 8px; } .sf-mjehur { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--sf-tx); text-decoration: none; background: color-mix(in srgb, var(--sf-tx) 7%, transparent); box-shadow: inset 0 0 0 1px var(--sf-ln); transition: transform var(--sf-t-ui) var(--sf-ease-out), background-color var(--sf-t-ui) var(--sf-ease-out); } .sf-mjehur__md { display: block; width: auto; height: 16px; max-width: 30px; } a.sf-mjehur:hover { transform: translateY(-2px); } a.sf-mjehur--md:hover { background: color-mix(in srgb, var(--sf-tx) 12%, transparent); } .sf-mjehur--bez { opacity: .7; } .sf-mjehur--app { display: inline-flex; align-items: center; justify-content: center; background: var(--sf-bijela); forced-color-adjust: none; } .sf-mjehur__app { display: block; flex: none; height: auto; max-width: none; } .sf-mjehur--app[data-sf-mreza="youtube"] .sf-mjehur__app { width: 56%; } .sf-mjehur--app[data-sf-mreza="instagram"] .sf-mjehur__app { width: 50%; } .sf-mjehur--app[data-sf-mreza="facebook"] .sf-mjehur__app { width: 52%; } .sf-mjehur--app[data-sf-mreza="tiktok"] .sf-mjehur__app { width: 47.7%; } @media (forced-colors: active) { .sf-mjehur--app:focus-visible { outline-color: Highlight; } } /* Contacts: one block per distinct line (chrome.ts kontaktGrupe), the channels in the order WhatsApp, Viber, call, SMS, e-mail; WhatsApp is the primary - a filled capsule in the world's accent (UK-09, IZ-23). The e-mail address may break only before its @. */ .sf-kontakti { display: grid; gap: 16px; align-content: start; } .sf-kontakt__odjel { margin-bottom: 2px; font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-kontakt__veze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .sf-kontakt__veze > li { display: flex; min-width: 0; } .sf-kanal-veza { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 980px; font: 600 15px/1.2 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx); text-decoration: none; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px var(--sf-ln); transition: transform var(--sf-t-ui) var(--sf-ease-out), background-color var(--sf-t-ui) var(--sf-ease-out); } .sf-kanal-veza__ikona { width: 20px; height: 20px; } .sf-kanal-veza__vrijednost { display: block; font: 400 14px/1.35 var(--sf-ff); color: var(--sf-tx2); font-variant-numeric: tabular-nums; } .sf-kanal-veza--tel .sf-kanal-veza__sto { font-variant-numeric: tabular-nums; white-space: nowrap; } .sf-kanal-veza--glavni { background: var(--sf-ak); color: var(--sf-ak-tx); box-shadow: none; } .sf-kanal-veza--glavni .sf-kanal-veza__vrijednost { color: inherit; } @media (hover: hover) { .sf-kanal-veza:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sf-tx) 6%, transparent); } .sf-kanal-veza--glavni:hover { background: var(--sf-ak-h); color: var(--sf-ak-h-tx); } } .sf-kontakti > .sf-pv { margin-top: -8px; } /* the large tiles (the contact page): a glyph, what it does, the number or the address */ .sf-kontakti--veliki .sf-kontakt__veze { display: grid; gap: 12px; } @media (min-width: 640px) { .sf-kontakti--veliki .sf-kontakt__veze { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1068px) { .sf-kontakti--veliki .sf-kontakt__veze { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sf-kontakti--veliki .sf-kontakt__veze > li { display: grid; } .sf-kontakti--veliki .sf-kanal-veza { display: grid; justify-items: start; gap: 6px; align-content: start; min-height: 0; padding: 24px; border-radius: var(--sf-r-kartica); background: var(--sf-bg3); white-space: normal; } .sf-kontakti--veliki .sf-kanal-veza__ikona { width: 28px; height: 28px; margin-bottom: 6px; } .sf-kontakti--veliki .sf-kanal-veza__sto { font: 650 21px/1.2 var(--sf-ff); letter-spacing: -.018em; } .sf-kontakti--veliki .sf-kanal-veza--glavni { background: var(--sf-ak); } /* HR / EN: this language as a plain mark, the other a link */ .sf-jezici { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sf-ff); letter-spacing: .06em; } .sf-jezici__crta { color: var(--sf-tx2); } .sf-jezici__drugi { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--sf-tx); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; } /* ===================================================================== 6. the muted loops */ /* figure[data-sf-petlja] (mediji.ts petlja): the poster is frame 0, so without JS nothing moves. inline.js plays a loop while it is on screen and motion is allowed, and shows this button - a capsule of glass over the loop (a control: glass belongs to controls, Apple HIG: Materials); its label says what a press does next. */ .sf-petlja { position: relative; } .sf-petlja__video { display: block; width: 100%; height: auto; background: var(--sf-dno); } .sf-okvir > .sf-petlja > .sf-petlja__video { height: 100%; object-fit: contain; } .sf-petlja__gumb { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 980px; color: var(--sf-bijela); cursor: pointer; background: color-mix(in srgb, var(--sf-dno) 34%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-bijela) 22%, transparent); font: 600 14px/1 var(--sf-ff); } .sf-petlja__gumb::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .sf-petlja__gumb[data-sf-pauza]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; } .sf-petlja__gumb:hover { background: color-mix(in srgb, var(--sf-dno) 54%, transparent); } /* ===================================================================== 7. the footer's top, the floating button's count */ /* the badge and the name lead, M&D small beside them (BK-08, PO-10), the primary action across from them */ .sf-podnozje__vrh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--sf-ln); } .sf-podnozje__znakovi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .sf-podnozje__dom { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--sf-tx); } .sf-podnozje__ime { font: 700 15px/1 var(--sf-ff); letter-spacing: .06em; } .sf-podnozje__znak { --sf-zv: 56px; } .sf-podnozje__md { display: inline-flex; align-items: center; min-height: 44px; } .sf-podnozje__md-znak { width: auto; height: 28px; max-width: none; } .sf-podnozje .sf-podnozje__stranice a { gap: 10px; } .sf-podnozje__odjel-znak { display: block; flex: none; width: auto; height: 18px; max-width: none; } .sf-podnozje__odjel--oprema .sf-podnozje__odjel-znak { width: 96px; height: auto; } .sf-podnozje__odjel--servis .sf-podnozje__odjel-znak { width: 61px; height: auto; } /* the Minn Kota mark and the Servis wordmark ARE their names in the footer's list as well: the word beside them stays for the screen reader only */ :is(.sf-podnozje__odjel--oprema, .sf-podnozje__odjel--servis) .sf-podnozje__naziv { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sf-podnozje__kontakti .sf-kontakt__veze { flex-direction: column; align-items: flex-start; } .sf-podnozje__mjehurici { margin-top: 4px; } .sf-podnozje__pravno { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sf-ln); } .sf-podnozje__veze a { display: inline-block; } .sf-podnozje__jezici { margin-top: 4px; } .sf-fab > summary { position: relative; } /* the number of products on the enquiry list, on the button itself while the list is not empty */ .sf-fab__broj { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 980px; background: var(--sf-tx); color: var(--sf-okvir); box-shadow: 0 0 0 2px var(--sf-okvir); font: 700 12px/1 var(--sf-ff); font-variant-numeric: tabular-nums; } .sf-fab__popis { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sf-ln); } /* a no-JS fallback (the link to upit/?proizvod=) steps aside once inline.js has the list working */ html.sf-kosarica [data-sf-bezjs] { display: none !important; } /* ===================================================================== 8. motion, reduced motion, forced colours, print */ @media (prefers-reduced-motion: no-preference) { /* the menu's helper and columns rise one after another as it opens */ .sf-meni[open] .sf-meni__pomocnik, .sf-meni[open] .sf-meni__odjel, .sf-meni[open] .sf-meni__dno { animation: sf-dizanje .5s var(--sf-ease) both; } .sf-meni[open] .sf-meni__odjel:nth-child(1) { animation-delay: 30ms; } .sf-meni[open] .sf-meni__odjel:nth-child(2) { animation-delay: 60ms; } .sf-meni[open] .sf-meni__odjel:nth-child(3) { animation-delay: 90ms; } .sf-meni[open] .sf-meni__odjel:nth-child(4) { animation-delay: 120ms; } .sf-meni[open] .sf-meni__dno { animation-delay: 150ms; } /* the current tile's ring draws in once: the badge's echo (DIZAJN-3 section 6) */ .sf-kucica[aria-current] .sf-kucica__prsten { animation: sf-prsten .6s var(--sf-ease) .15s both; } } @keyframes sf-prsten { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sf-kucica, .sf-meni > summary, .sf-meni__crte i, .sf-meni__pomocnik, .sf-meni__djeca a::after, .sf-mjehur, .sf-kanal-veza { transition: none; } a.sf-mjehur:hover, .sf-kanal-veza:hover, .sf-meni__pomocnik:hover > .sf-veza__chevron { transform: none; } .sf-meni__djeca a:hover::after { transform: rotate(45deg); } } @media (forced-colors: active) { .sf-kucica { border: 1px solid CanvasText; } .sf-kucica[aria-current] { outline: 3px solid Highlight; } .sf-mjehur, .sf-kanal-veza { border: 1px solid CanvasText; } } @media print { .sf-vrh { position: static; } .sf-vrh::before, .sf-kucice, .sf-petlja__gumb, .sf-fab__broj, .sf-mjehurici { display: none !important; } /* the white marks would vanish on paper (a client's mark is never recoloured): the badge shows its cobalt disc */ .sf-znak--plavi { display: block !important; } .sf-znak--bijeli { display: none !important; } .sf-kanal-veza { box-shadow: none; padding: 0; min-height: 0; } } /* Sport Fishing D.O. - pocetna.css (lane P): the home page, v3 "Plavi bedz" (IZGRADNJA-3 section 5.2, DIZAJN-3 section 6, 2026-11-02). ONE SCREEN with no scroll from 320 x 568 to 2560 x 1440, in both languages: the model is Soric Solutions' home (src/components/soric-solutions/css.ts), whose sizes follow BOTH axes - what does not fit shrinks, it is never cut and never hidden behind overflow. The look is the client's own mock-up without the yacht: the sea world's ground (site.css:
's gradient from the surface to the seabed), a soft sun-path of light on the water, the SF badge large in the middle with the signature "Sidro", the H1 in two tones, her three sentences, the capsule buttons, a short list of links, then two rows after soricsolutions.com's footer: the legal links, the social bubbles with M&D small, HR / EN; and the bottom row - the phone left, the credits centred, the e-mail right (stacked on a narrow screen, the credits last, beside the floating button and clear of it). 2026-11-02 (Ante): the badge 10 % smaller, everything evenly spaced, the bubbles apart from the credits, the floating button on this page too (its corner is kept free: --sf-fab-mjesto, site.css). The previous sheet is archived in _archive/sportfishingdo-v3-izmjene-2026-11-02/. v2's sheet (the roof, the doors, the shelf, the Na moru band, the bottom) is archived in _archive/sportfishingdo-v2-2026-11-02/src/components/sportfishingdo/assets/css/pocetna.css. Registered in SF_CSS (src/lib/sportfishingdo/ctx.ts) right after css/okvir.css. No colour literal: only the world's roles and the palette (SF_BOJE as --sf-). No class name may match an EasyList word. Markup: src/lib/sportfishingdo/stranice/hub.ts. Layers: 1. the screen: one viewport under the sticky top, the footer left out on this page 2. the badge's place and the sea's light (the glow, the sun-path) 3. the H1, the sentences, the buttons 4. the list of links 5. the last two rows: the legal links, the bubbles, M&D, HR / EN; the phone, the credits, the e-mail 6. the signature "Sidro" and the arrival, reduced motion, forced colours, print (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 1. the screen */ /* The section fills exactly the viewport left under the sticky top (--sf-vrh, okvir.css) - the SMALL viewport, so a phone's toolbar never pushes it into a scroll. Sizes follow --sf-ph (one hundredth of that height) and the width together, min() of the two; the badge takes whatever height the rest leaves (section 2). min-height, never height + overflow: should a screen ever be shorter than the content (a phone on its side), the page scrolls rather than cutting anything off. */ .sf-pocetna { --sf-ph: calc((100vh - var(--sf-vrh)) / 100); position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; min-height: calc(100vh - var(--sf-vrh)); color: var(--sf-tx); text-align: center; } @supports (height: 100svh) { .sf-pocetna { --sf-ph: calc((100svh - var(--sf-vrh)) / 100); min-height: calc(100svh - var(--sf-vrh)); } } /* the footer is not part of the one screen: everything it carries is in this section, the menu, the floating button and on every other page */ html[data-sf-page="home"] .sf-podnozje { display: none; } .sf-pocetna__unutra { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: clamp(6px, min(3.4 * var(--sf-ph), 4vw), 44px); width: 100%; padding-block: clamp(8px, 2.4 * var(--sf-ph), 48px) calc(var(--sf-fab-rub) + env(safe-area-inset-bottom, 0px)); } /* from a tablet: the bottom row is one line, clear of the floating button by its padding (section 5) */ @media (min-width: 734px) { .sf-pocetna__unutra { padding-bottom: calc(clamp(16px, 2.6 * var(--sf-ph), 40px) + env(safe-area-inset-bottom, 0px)); } } .sf-pocetna__glava { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.5 * var(--sf-ph), 22px); min-height: 0; width: 100%; } /* ===================================================================== 2. the badge's place, the sea's light */ /* THE BADGE TAKES THE ROOM THE REST LEAVES: its place grows into the height nothing else needs (a size container), up to its largest size - 10 % under the old one (Ante, 2. 11.: "smanji za 10% logo": min(55.8vw, 468px), was min(62vw, 520px)) - and the badge is the largest circle that fits it, so the one screen never scrolls. A phone that now carries the phone, the e-mail and the credits as well gives it less (measured in the part's report). Without container queries it falls back to a size by both axes, 10 % under the old one. */ .sf-pocetna__znak { position: relative; flex: none; display: grid; place-items: center; width: 100%; } .sf-sidro { position: relative; display: block; flex: none; overflow: visible; width: clamp(58px, min(18.9 * var(--sf-ph), 34.2vw), 396px); height: auto; aspect-ratio: 1; color: var(--sf-bijela); } @supports (container-type: size) { .sf-pocetna__znak { flex: 1 1 0; min-height: 52px; max-height: min(55.8vw, 468px); container-type: size; } .sf-sidro { width: min(100cqh, 100cqw); } } .sf-sidro :is(.sf-sidro__prsteni, .sf-sidro__natpis, .sf-sidro__sidro, .sf-sidro__pola) { transform-box: view-box; transform-origin: 0 0; } .sf-sidro__val { opacity: 0; stroke-width: 7; transform-box: fill-box; transform-origin: center; } /* The sea's light (the mock-up's light, without its yacht): a broad glow from the surface that breathes, and a sun-path - glints on the water - that rises out of the badge's place, twinkling in two sets. Transform and opacity only; it fades out before the H1, so the words keep the contrast svijet.ts proved at the top of the sea. Still, but present, under Reduce Motion. */ .sf-pocetna__more { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sf-pocetna__sjaj { position: absolute; display: block; left: 50%; top: -10%; width: min(130vw, 1600px); height: 72%; margin-left: max(-65vw, -800px); background: radial-gradient(50% 50% at 50% 34%, color-mix(in srgb, var(--sf-bijela) 12%, transparent), transparent 74%); transform-origin: 50% 0; } .sf-pocetna__staza { position: absolute; z-index: 0; left: 50%; top: -24%; bottom: -4%; width: clamp(150px, 150cqh, 640px); margin-left: clamp(-320px, -75cqh, -75px); -webkit-mask-image: radial-gradient(48% 50% at 50% 50%, var(--sf-bijela) 35%, transparent); mask-image: radial-gradient(48% 50% at 50% 50%, var(--sf-bijela) 35%, transparent); pointer-events: none; } .sf-pocetna__staza::before, .sf-pocetna__staza::after { content: ""; position: absolute; inset: 0; } .sf-pocetna__staza::before { background: radial-gradient(7px 1.3px at 51.8% 47.2%, color-mix(in srgb, var(--sf-bijela) 50%, transparent), transparent), radial-gradient(21px 1.7px at 37.2% 48.6%, color-mix(in srgb, var(--sf-bijela) 48%, transparent), transparent), radial-gradient(14px 1.1px at 56.2% 29%, color-mix(in srgb, var(--sf-bijela) 52%, transparent), transparent), radial-gradient(7px 1.7px at 53.5% 24.7%, color-mix(in srgb, var(--sf-bijela) 52%, transparent), transparent), radial-gradient(16px 2.2px at 41.8% 19.5%, color-mix(in srgb, var(--sf-bijela) 35%, transparent), transparent), radial-gradient(8px 1.5px at 62.8% 43.1%, color-mix(in srgb, var(--sf-bijela) 55%, transparent), transparent), radial-gradient(9px 2.2px at 42% 63.1%, color-mix(in srgb, var(--sf-bijela) 50%, transparent), transparent), radial-gradient(9px 1.2px at 51% 24.5%, color-mix(in srgb, var(--sf-bijela) 65%, transparent), transparent), radial-gradient(6px 2.1px at 46.3% 34.9%, color-mix(in srgb, var(--sf-bijela) 41%, transparent), transparent), radial-gradient(11px 1.7px at 48.7% 81.8%, color-mix(in srgb, var(--sf-bijela) 48%, transparent), transparent), radial-gradient(8px 1.3px at 56.1% 70.8%, color-mix(in srgb, var(--sf-bijela) 50%, transparent), transparent), radial-gradient(9px 1.8px at 43.2% 11.9%, color-mix(in srgb, var(--sf-bijela) 59%, transparent), transparent), radial-gradient(16px 1.6px at 41.8% 88.1%, color-mix(in srgb, var(--sf-bijela) 50%, transparent), transparent), radial-gradient(15px 1.3px at 47.9% 77.8%, color-mix(in srgb, var(--sf-bijela) 41%, transparent), transparent), radial-gradient(11px 1.9px at 35.6% 69.4%, color-mix(in srgb, var(--sf-bijela) 69%, transparent), transparent), radial-gradient(27px 1.9px at 70.3% 89.2%, color-mix(in srgb, var(--sf-bijela) 59%, transparent), transparent); } .sf-pocetna__staza::after { opacity: .3; background: radial-gradient(11px 1.4px at 34.7% 52.8%, color-mix(in srgb, var(--sf-bijela) 40%, transparent), transparent), radial-gradient(17px 1.3px at 54.9% 38.6%, color-mix(in srgb, var(--sf-bijela) 73%, transparent), transparent), radial-gradient(10px 1.5px at 48.3% 4.6%, color-mix(in srgb, var(--sf-bijela) 34%, transparent), transparent), radial-gradient(28px 1.7px at 47.9% 91.2%, color-mix(in srgb, var(--sf-bijela) 51%, transparent), transparent), radial-gradient(15px 1.3px at 54.8% 15%, color-mix(in srgb, var(--sf-bijela) 31%, transparent), transparent), radial-gradient(13px 1.8px at 53.6% 17.6%, color-mix(in srgb, var(--sf-bijela) 69%, transparent), transparent), radial-gradient(7px 1px at 56.7% 24.2%, color-mix(in srgb, var(--sf-bijela) 34%, transparent), transparent), radial-gradient(13px 2px at 50.5% 5.8%, color-mix(in srgb, var(--sf-bijela) 37%, transparent), transparent), radial-gradient(10px 1.6px at 36.6% 47.5%, color-mix(in srgb, var(--sf-bijela) 33%, transparent), transparent), radial-gradient(9px 1.9px at 43.3% 35.3%, color-mix(in srgb, var(--sf-bijela) 36%, transparent), transparent), radial-gradient(12px 1.1px at 41.1% 18.5%, color-mix(in srgb, var(--sf-bijela) 48%, transparent), transparent), radial-gradient(9px 1px at 49.7% 13.6%, color-mix(in srgb, var(--sf-bijela) 64%, transparent), transparent), radial-gradient(11px 2.1px at 56.8% 43.7%, color-mix(in srgb, var(--sf-bijela) 62%, transparent), transparent), radial-gradient(12px 1.1px at 41.8% 60.2%, color-mix(in srgb, var(--sf-bijela) 70%, transparent), transparent), radial-gradient(7px 1.4px at 43.6% 11.3%, color-mix(in srgb, var(--sf-bijela) 31%, transparent), transparent), radial-gradient(12px 1.6px at 48% 56.8%, color-mix(in srgb, var(--sf-bijela) 71%, transparent), transparent); } @supports not (container-type: size) { .sf-pocetna__staza { top: -40%; bottom: -10%; width: 60vw; max-width: 640px; margin-left: min(-30vw, -320px); } } /* ===================================================================== 3. the H1, the sentences, the buttons */ /* the H1 in two tones (PO-11): the second, after the dash, on its own line */ .sf-pocetna__h1 { max-width: 24ch; margin-inline: auto; font: 700 clamp(20px, min(6.2 * var(--sf-ph), 7.4vw), 92px)/1.04 var(--sf-ff); letter-spacing: -.035em; text-wrap: balance; } .sf-pocetna__h1-2 { display: block; color: var(--sf-tx2); } /* her three sentences: each a phrase that never breaks inside, "Vise" in the second tone */ .sf-pocetna__lede { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; font: 600 clamp(13px, min(2.6 * var(--sf-ph), 4.2vw), 30px)/1.3 var(--sf-ff); letter-spacing: -.016em; } .sf-pocetna__lede > span { white-space: nowrap; } .sf-pocetna__vise { color: var(--sf-tx2); } /* the two actions: "Zatrazite ponudu" (the sea's white capsule) and the helper, highlighted beside it (PO-14) - a capsule of the sea's glass with a white edge */ .sf-pocetna__gumbi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: clamp(0px, .6 * var(--sf-ph), 12px); } .sf-pocetna__gumbi .sf-gumb { white-space: nowrap; } .sf-pocetna__pomocnik { background: color-mix(in srgb, var(--sf-bijela) 10%, transparent); } @media (min-width: 734px) and (min-height: 700px) { .sf-pocetna__gumbi .sf-gumb { min-height: 52px; padding: 0 28px; font-size: 18px; } } /* ===================================================================== 4. the list of links */ /* On a phone the words in a row (the strip above already shows the marks); where the screen has room, each section a tile of the sea's glass with its line (PO-13), Kontakt last. */ .sf-pocetna__odjeli { width: 100%; } .sf-pocetna__popis { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; } .sf-pocetna__popis > li { display: flex; } .sf-pocetna__odjel { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 9px; border-radius: 980px; color: var(--sf-tx); text-decoration: none; font: 600 15px/1.2 var(--sf-ff); letter-spacing: -.01em; transition: background-color var(--sf-t-ui) var(--sf-ease-out), transform var(--sf-t-ui) var(--sf-ease-out); } .sf-pocetna__odjel:hover { background: color-mix(in srgb, var(--sf-bijela) 10%, transparent); } .sf-pocetna__crta { display: none; } /* the five still fit one row on a phone (measured, English the longer: 302 px of 328 at 360, 283 of 288 at 320) */ @media (max-width: 389px) { .sf-pocetna__popis { gap: 0; } .sf-pocetna__odjel { padding: 0 6px; font-size: 14px; } } @media (max-width: 359px) { .sf-pocetna__odjel { min-height: 32px; padding: 0 5px; font-size: 13px; } } @media (min-width: 734px) and (min-height: 860px) { /* a tablet: three tiles a row; from 1068 px the five in one row */ .sf-pocetna__popis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1200px; margin-inline: auto; } .sf-pocetna__odjel { display: grid; align-content: start; justify-items: start; gap: 6px; width: 100%; padding: 16px 18px 18px; border-radius: var(--sf-r-kartica); text-align: left; background: color-mix(in srgb, var(--sf-bijela) 6%, transparent); box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-pocetna__odjel:hover { background: color-mix(in srgb, var(--sf-bijela) 11%, transparent); transform: translateY(-3px); } .sf-pocetna__ime { font: 650 17px/1.2 var(--sf-ff); letter-spacing: -.016em; } .sf-pocetna__crta { display: block; font: 400 14px/1.4 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } } @media (min-width: 1068px) and (min-height: 860px) { .sf-pocetna__popis { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* a large screen (2560 x 1440): the list, the buttons and the last lines grow with it */ @media (min-width: 1800px) and (min-height: 1200px) { .sf-pocetna__popis { max-width: 1480px; gap: 14px; } .sf-pocetna__odjel { padding: 22px 24px 24px; } .sf-pocetna__ime { font-size: 21px; } .sf-pocetna__crta { font-size: 17px; } .sf-pocetna__gumbi .sf-gumb { min-height: 60px; padding: 0 34px; font-size: 21px; } .sf-pocetna__md-znak { height: 32px; } } /* ===================================================================== 5. the last two rows */ /* After soricsolutions.com's footer (its CLAUDE.md, "The footer, and the legal pair (fifth pass)"). NARROW (under 1000 px): the bubbles and M&D centred; one line Impresum - Privatnost - HR / EN; then the bottom row STACKED - the phone, the e-mail, and the credits LAST, in a band as high as the floating button and level with it, its sides kept clear of the button's corner, so nothing sits under the button. WIDE: two grids that NAME their columns (1fr auto 1fr), so the centre stays centred whatever the sides hold - the legal links left, the bubbles centred, HR / EN right; the phone left, the credits centred, the e-mail right - with air between the two rows (Ante: the bubbles were too close to the credits). Every target reaches 24 px by an invisible edge, so a line stays a line. */ .sf-pocetna__dno { display: grid; justify-items: center; gap: clamp(4px, 1.1 * var(--sf-ph), 12px); width: 100%; } .sf-pocetna__gore { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(2px, .7 * var(--sf-ph), 8px) 6px; } .sf-pocetna__mreze { order: -1; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; } .sf-pocetna__mjehurici { justify-content: center; } /* M&D: the real mark, white on the sea, small and quiet (PO-10) */ .sf-pocetna__md { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; opacity: .8; transition: opacity var(--sf-t-ui) var(--sf-ease-out); } .sf-pocetna__md:hover { opacity: 1; } .sf-pocetna__md-znak { display: block; width: auto; height: 26px; max-width: none; } /* the small lines: the smallest type on the page, quiet by size and place, never by contrast (they keep the secondary text colour) */ .sf-pocetna__pravno, .sf-pocetna__jezici, .sf-pocetna__zasluge { font: 500 12px/20px var(--sf-ff); letter-spacing: 0; color: var(--sf-tx2); } .sf-pocetna__pravno { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; } .sf-pocetna__dno a { position: relative; color: var(--sf-tx2); text-decoration: none; } .sf-pocetna__dno a:not(.sf-mjehur):not(.sf-pocetna__md)::after { content: ""; position: absolute; inset: -2px -3px; } .sf-pocetna__dno a:not(.sf-mjehur):not(.sf-pocetna__md):hover { color: var(--sf-tx); text-decoration: underline; text-underline-offset: .2em; } .sf-pocetna__jezici { gap: 4px; letter-spacing: .04em; } .sf-pocetna__jezici::before { content: "\00B7"; margin-right: 2px; letter-spacing: 0; } .sf-pocetna__jezici .sf-jezici__ovaj { color: var(--sf-tx); font-weight: 650; } .sf-pocetna__jezici .sf-jezici__drugi { display: inline; min-width: 0; min-height: 0; color: var(--sf-tx2); text-decoration: none; } .sf-pocetna__dno .sf-jezici__drugi::after { inset: -2px -8px; } /* the bottom row, narrow: phone, e-mail, credits */ .sf-pocetna__traka { display: grid; justify-items: center; gap: 0; width: 100%; } .sf-pocetna__tel, .sf-pocetna__mail { display: inline-block; font: 600 14px/22px var(--sf-ff); letter-spacing: -.006em; } .sf-pocetna__dno .sf-pocetna__tel, .sf-pocetna__dno .sf-pocetna__mail { color: var(--sf-tx); } .sf-pocetna__tel { order: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .sf-pocetna__mail { order: 2; max-width: 100%; text-align: center; } .sf-pocetna__zasluge { order: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--sf-fab); padding-inline: calc(var(--sf-fab-mjesto) - var(--sf-g)); text-align: center; } .sf-pocetna__zasluge > span { white-space: nowrap; } .sf-pocetna__zasluge > .sf-pocetna__tocka { display: none; } @media (max-width: 359px) { .sf-pocetna__pravno, .sf-pocetna__jezici, .sf-pocetna__zasluge { font-size: 11px; line-height: 18px; } .sf-pocetna__tel, .sf-pocetna__mail { font-size: 13px; line-height: 20px; } } @media (min-width: 734px) { /* two grids that name their columns; both keep the floating button's corner free (their sides stop --sf-fab-mjesto from the screen's edge, never closer than the page's own column) */ .sf-pocetna__dno { justify-items: stretch; gap: clamp(12px, 2.4 * var(--sf-ph), 32px); padding-inline: max(0px, calc(var(--sf-fab-mjesto) - (100vw - 100%) / 2)); } .sf-pocetna__gore, .sf-pocetna__traka { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-content: stretch; column-gap: clamp(24px, 2.4vw, 40px); } .sf-pocetna__pravno { justify-self: start; justify-content: flex-start; } .sf-pocetna__mreze { order: 0; justify-self: center; } .sf-pocetna__jezici { justify-self: end; } .sf-pocetna__jezici::before { content: none; } .sf-pocetna__tel, .sf-pocetna__mail { order: 0; font-size: 14px; } .sf-pocetna__tel { justify-self: start; } /* the address breaks only before its @, and only where its column is narrower than it */ .sf-pocetna__mail { justify-self: end; text-align: right; } /* the credits in the middle: two short lines until the row has room for one */ .sf-pocetna__zasluge { order: 0; min-height: 0; padding-inline: 0; } } @media (min-width: 1068px) { .sf-pocetna__pravno, .sf-pocetna__jezici, .sf-pocetna__zasluge { font-size: 13px; } .sf-pocetna__tel, .sf-pocetna__mail { font-size: 15px; } } @media (min-width: 1240px) { .sf-pocetna__zasluge { flex-direction: row; gap: 0 6px; } .sf-pocetna__zasluge > .sf-pocetna__tocka { display: inline; } } /* a tablet (734 to 1067 px): the two rows a little closer, so the badge keeps more of its place */ @media (min-width: 734px) and (max-width: 1067px) { .sf-pocetna__unutra { padding-bottom: calc(clamp(12px, 1.4 * var(--sf-ph), 24px) + env(safe-area-inset-bottom, 0px)); } .sf-pocetna__dno { gap: clamp(10px, 1.4 * var(--sf-ph), 20px); } } /* a short phone (320 x 568, 360 x 640): the same rows, closer - the gaps and the buttons give a little, so the badge keeps what it can; nothing is cut and no target drops under 40 px */ @media (max-width: 733px) and (max-height: 700px) { .sf-pocetna__unutra { gap: clamp(6px, 1.7 * var(--sf-ph), 12px); padding-top: clamp(6px, 1.4 * var(--sf-ph), 12px); } .sf-pocetna__glava { gap: clamp(4px, 1.1 * var(--sf-ph), 10px); } .sf-pocetna__gumbi { gap: 6px 10px; margin-top: 0; } .sf-pocetna__gumbi .sf-gumb { min-height: 40px; } .sf-pocetna__dno { gap: clamp(2px, .8 * var(--sf-ph), 8px); } } /* a large screen (2560 x 1440): the last rows grow with it */ @media (min-width: 1800px) and (min-height: 1200px) { .sf-pocetna__dno :is(.sf-pocetna__pravno, .sf-pocetna__jezici, .sf-pocetna__zasluge) { font-size: 15px; line-height: 24px; } .sf-pocetna__dno :is(.sf-pocetna__tel, .sf-pocetna__mail) { font-size: 17px; line-height: 26px; } } /* ===================================================================== 6. motion, reduced motion, forced colours, print */ @keyframes sf-sjaj { from { opacity: .7; transform: scale(.94, .96); } to { opacity: 1; transform: scale(1.05, 1.03); } } @keyframes sf-staza-a { from { opacity: 1; transform: translateY(0); } to { opacity: .25; transform: translateY(-5px); } } @keyframes sf-staza-b { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: translateY(-3px); } } /* the signature "Sidro" (DIZAJN-3 section 6): the rings draw as one clockwise stroke from the top (the mask's two halves turn into place), the lettering settles on its arc, the anchor lowers into place, one calm ripple spreads from it and fades - about 1.2 s, transform and opacity only, once per visit */ @keyframes sf-sidro-pola { from { transform: rotate(-180deg); } to { transform: none; } } @keyframes sf-sidro-natpis { from { opacity: 0; transform: rotate(-14deg) scale(.96); } to { opacity: 1; transform: none; } } @keyframes sf-sidro-sidro { from { opacity: 0; transform: translateY(-120px); } to { opacity: 1; transform: none; } } @keyframes sf-sidro-val { 0% { opacity: 0; transform: scale(.3); } 14% { opacity: .7; } 100% { opacity: 0; transform: scale(1.68); } } @media (prefers-reduced-motion: no-preference) { .sf-pocetna__sjaj { animation: sf-sjaj 9s ease-in-out infinite alternate; } .sf-pocetna__staza::before { animation: sf-staza-a 3.4s ease-in-out infinite alternate; } .sf-pocetna__staza::after { animation: sf-staza-b 4.2s ease-in-out infinite alternate; } html:not(.sf-sidro-vidjeno) .sf-sidro__pola--1 { animation: sf-sidro-pola .3s cubic-bezier(.45, 0, 1, 1) both; } html:not(.sf-sidro-vidjeno) .sf-sidro__pola--2 { animation: sf-sidro-pola .3s cubic-bezier(0, 0, .55, 1) .3s both; } html:not(.sf-sidro-vidjeno) .sf-sidro__natpis { animation: sf-sidro-natpis .6s var(--sf-ease) .24s both; } html:not(.sf-sidro-vidjeno) .sf-sidro__sidro { animation: sf-sidro-sidro .6s var(--sf-ease) .46s both; } html:not(.sf-sidro-vidjeno) .sf-sidro__val { animation: sf-sidro-val 1s cubic-bezier(.2, .6, .3, 1) .92s both; } /* the words arrive while the badge finds its place, on the first view only */ html:not(.sf-sidro-vidjeno) :is(.sf-pocetna__h1, .sf-pocetna__lede, .sf-pocetna__gumbi, .sf-pocetna__odjeli, .sf-pocetna__dno) { animation: sf-dizanje .8s var(--sf-ease) both; } html:not(.sf-sidro-vidjeno) .sf-pocetna__h1 { animation-delay: .5s; } html:not(.sf-sidro-vidjeno) .sf-pocetna__lede { animation-delay: .6s; } html:not(.sf-sidro-vidjeno) .sf-pocetna__gumbi { animation-delay: .7s; } html:not(.sf-sidro-vidjeno) .sf-pocetna__odjeli { animation-delay: .8s; } html:not(.sf-sidro-vidjeno) .sf-pocetna__dno { animation-delay: .9s; } } @media (prefers-reduced-motion: reduce) { .sf-pocetna__odjel, .sf-pocetna__md { transition: none; } .sf-pocetna__odjel:hover { transform: none; } } @media (forced-colors: active) { .sf-sidro { color: CanvasText; } .sf-pocetna__more, .sf-pocetna__staza { display: none; } .sf-pocetna__odjel { border: 1px solid CanvasText; } } @media print { /* paper: the white badge would vanish on white (the header prints the cobalt one); the light, the buttons and the bubbles go; the footer comes back */ html[data-sf-page="home"] .sf-podnozje { display: block; } .sf-pocetna__znak, .sf-pocetna__more, .sf-pocetna__mreze, .sf-pocetna__gumbi { display: none !important; } .sf-pocetna { min-height: 0; } .sf-pocetna__crta { display: block; } } /* Sport Fishing D.O. - katalog.css (lane O2), design 3 "Plavi bedz" (DIZAJN-3.md section 4, IZGRADNJA-3 section 5.3, 2026-11-02; v2's black sheet is archived in _archive/sportfishingdo-v2-2026-11-02/): the MINN KOTA WORLD BY DAY - Minn Kota (Oprema), its categories, its products. White and cloud grounds, their yellow on the ONE action of a view, their rich black for text and small marks only (OP-03: less black); headlines in Saira's heavy capitals (OP-04). Apple's layout: capsules, tiles, shelves, hairline tables, a grey sentence, one prominent action per view. The builder concatenates the sheets of SF_CSS (ctx.ts) into the ONE shipped assets/site.css. No colour literal: colours come only from :root (the SF_BOJE palette) and the svijet.ts roles - body.sf-svijet-m, .sf-ploca for the white plate. No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). No decorative line anywhere (no rule before a heading, no accent underline, no coloured edge): hairlines only where they part rows of a table or a list. No button or tile turns black on hover (OP-20): it lifts and its chevron slides (site.css .sf-gumb, .sf-podigni). Motion only under prefers-reduced-motion: no-preference, transform and opacity, following the native scroll (site.css .sf-pojava*); nothing captures the wheel, touch or keys. Photographs whole: the client's own at their own ratio (site.css .sf-foto), product photographs contained on white. Markup: src/lib/sportfishingdo/katalog-ui.ts and stranice/oprema.ts. A category's filter RULES are not here: they are generated at bake for its own values (katalog-ui.ts, filtriCss) and travel in the page. Layers: 1. the white plate, a picture's stand-in, the enquiry list's tick, Airmar's word 2. the section's own row: Apple's local navigation on the frame's light glass 3. Oprema's light top: the marks, the H1 in two tones, the offer and authorisation lines, the photograph 4. search and the list of every product 5. "Sto koristim", the packages 6. the category tiles, the shelves 7. the helper's yellow tile and the manufacturer's rule; the closing band; availability and delivery 8. a card 9. a category: the light head, the tools, the sticky filter bar, the grid, the messages, the summary, the compare bar 10. tables (table.sf-spec - the only place a degree sign may stand) 11. the comparison 12. a product page: the stage and its thumbnails, the words, the big figures, the enquiry panel, the bands below 13. reduced motion, forced colours, print (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 1. the white plate */ /* The ground product photographs and cards stand on: white, as the makers' photographs are, so a photograph needs no box, no crop and no tint. Its text roles are Minn Kota's by day (svijet.ts writes them on .sf-ploca). */ .sf-ploca { background: var(--sf-ploca); color: var(--sf-tx); border-radius: var(--sf-r-ploca); } /* the maker's mark where a photograph is not processed - never an empty frame */ .sf-bez-slike { display: grid; place-items: center; width: 100%; height: 100%; min-height: 96px; } .sf-bez-slike img { width: auto; max-width: 100%; height: auto; } /* Airmar is named in words, never by a mark (IZGRADNJA-3 section 4): its name stands where a mark would, at the mark's height, in the page's sans, never in a colour of its own */ .sf-logo--airmar.sf-logo--tekst { display: inline-flex; align-items: center; height: var(--sf-rijec-h, 16px); font: 800 calc(var(--sf-rijec-h, 16px) * .92)/1 var(--sf-ff); letter-spacing: -.01em; color: var(--sf-tx); white-space: nowrap; } /* "Na popisu za upit": a drawn tick and the words beside "Dodaj u upit" while inline.js (or katalog.js, for a package) marks the button [data-sf-na-popisu] */ .sf-na-popisu { display: none; align-items: center; gap: 8px; font: 600 13px/1.3 var(--sf-ff); letter-spacing: -.005em; color: var(--sf-tx); } .sf-na-popisu::before { content: ""; flex: none; width: 5px; height: 10px; margin: -3px 3px 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } :is(.sf-proizvod__radnje, .sf-pr__radnje, .sf-izvedbe__radnje, .sf-paket__dno):has(button[data-sf-na-popisu]) .sf-na-popisu { display: inline-flex; min-height: 24px; } /* a click: the yellow capsule answers for a moment with its words (inline.js / katalog.js set [data-sf-dodano]) and a soft ring - never black */ :is(.sf-dodaj, .sf-paket__gumb)[data-sf-dodano] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-mk-zuta) 45%, transparent); } .sf-dodaj-bezjs { font-size: 15px; } /* ===================================================================== 2. the section's own row */ /* Apple's local navigation right under the frame's sticky top (okvir.css: --sf-vrh is the whole unit), on the frame's LIGHT glass - a layer of its own, so nothing inside is trapped: the categories by system, the helper, and the row's one capsule, the yellow "Popis za upit (n)". One line; on a narrow screen it scrolls sideways and the current category stands first. The current one is a soft yellow capsule (no underline). On a category page it scrolls away (.sf-oprema-nav--stoji): there the sticky slot belongs to the filters (OP-01). */ :root { --sf-red-oprema: 48px; } @media (min-width: 1068px) { :root { --sf-red-oprema: 52px; } } html:has(.sf-oprema-nav:not(.sf-oprema-nav--stoji)) { scroll-padding-top: calc(var(--sf-vrh) + var(--sf-red-oprema) + 12px); } .sf-oprema-nav { position: sticky; top: var(--sf-vrh); z-index: 15; isolation: isolate; color: var(--sf-tx); box-shadow: 0 1px 0 var(--sf-ln); } .sf-oprema-nav--stoji { position: relative; top: auto; } .sf-oprema-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sf-okvir) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sf-oprema-nav::before { background: var(--sf-okvir); } } .sf-oprema-nav__red { display: flex; align-items: center; gap: 4px; height: var(--sf-red-oprema); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap; } .sf-oprema-nav__red::-webkit-scrollbar { display: none; } .sf-oprema-nav__popis { display: flex; flex: none; align-items: center; gap: 2px; } .sf-oprema-nav__popis + .sf-oprema-nav__popis { margin-left: 14px; } .sf-oprema-nav__alati { margin-left: auto; gap: 6px; } .sf-oprema-nav__veza { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 980px; font: 500 14px/1 var(--sf-ff); letter-spacing: -.005em; text-decoration: none; color: var(--sf-tx2); } .sf-oprema-nav__veza::after { content: ""; position: absolute; inset: -4px 0; } .sf-oprema-nav__veza:hover { color: var(--sf-tx); } .sf-oprema-nav__veza[aria-current] { color: var(--sf-tx); font-weight: 650; background: color-mix(in srgb, var(--sf-mk-zuta) 30%, transparent); } .sf-oprema-nav__upit { padding: 0 14px; font-size: 14px; white-space: nowrap; } .sf-oprema-nav__upit [data-sf-kosarica-broj] { font-variant-numeric: tabular-nums; } html:not(.sf-js) .sf-oprema-nav .sf-samo-js, html.sf-js .sf-oprema-nav .sf-bez-js { display: none; } @media (max-width: 733px) { .sf-oprema-nav__red { padding-inline: 8px; } .sf-oprema-nav__veza { padding: 0 10px; } .sf-oprema-nav__popis:has([aria-current]) { order: -1; } .sf-oprema-nav__popis > li:has([aria-current]) { order: -1; } } /* ===================================================================== 3. Oprema's light top */ /* White ground, graphite words: the three makers' marks in colour, the H1 in two tones, Dejan's line, the offer line, the authorisation line with its drawn tick, the yellow "Koji motor mi treba?", the search. From 1068 px the photograph oprema-hero stands whole on the right (7 of 12 columns), the words on the left; below it on a phone. */ .sf-mk-hero { --sf-pb: clamp(36px, 5vw, 72px); } .sf-mk-hero__mreza { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; margin-top: 8px; } @media (min-width: 1068px) { .sf-mk-hero__mreza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 4vw, 64px); } } .sf-mk-hero__tekst { min-width: 0; } .sf-mk-hero__marke { margin-bottom: clamp(18px, 2.4vw, 28px); } .sf-mk-hero__h1 { max-width: 16ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); } /* the H1 in two tones: "Minn Kota" in the secondary tone, the rest on its own line */ .sf-mk-hero__h1-1 { color: var(--sf-tx2); } .sf-mk-hero__h1-2 { display: block; } .sf-mk-hero .sf-lead { max-width: 40ch; margin-top: 18px; } .sf-mk-hero__ponuda { margin-top: 18px; font: 650 17px/1.35 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } .sf-mk-hero__status { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; font: 500 15px/1.4 var(--sf-ff); color: var(--sf-tx2); } .sf-mk-hero__kvacica { flex: none; width: 20px; height: 20px; margin-top: 0; fill: var(--sf-mk-zuta); stroke: none; } .sf-mk-hero__kvacica path { fill: none; stroke: var(--sf-crna); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sf-mk-hero__gumbi { margin-top: 26px; } .sf-mk-hero .sf-trazilica { margin-top: 26px; } /* the photograph: whole at its own ratio, a rounded frame and nothing on it (DIZAJN-3 section 7) */ .sf-mk-hero__foto { min-width: 0; overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-bg2); } .sf-mk-hero__foto .sf-foto img { width: 100%; height: auto; } .sf-mk-hero > .sf-wrap > .sf-pv { margin-top: 16px; } /* The makers' marks side by side as their guidelines pair them (assets/brand/IZVOR.md): the same visual scale, one baseline, each never narrower than its minimum (Minn Kota 96 px, Humminbird 144 px). */ .sf-mk-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; line-height: 0; } .sf-mk-marke__znak { width: auto; max-width: none; } .sf-mk-hero__marke .sf-logo--minn-kota { height: 22px; } .sf-mk-hero__marke .sf-logo--humminbird { height: 20px; } .sf-mk-hero__marke .sf-logo--roypow { height: 24px; } @media (min-width: 734px) and (max-width: 1067px) { .sf-mk-hero__marke { gap: 14px 32px; } .sf-mk-hero__marke .sf-logo--minn-kota { height: 24px; } .sf-mk-hero__marke .sf-logo--humminbird { height: 22px; } .sf-mk-hero__marke .sf-logo--roypow { height: 26px; } } /* ===================================================================== 4. search and the list of every product */ /* Apple's search field: grey, rounded, the magnifier drawn inside, 52 px, the words at 17 px (no phone zooms). */ .sf-trazilica { display: grid; gap: 10px; max-width: 520px; } .sf-trazilica__oznaka { font: 600 15px/1.3 var(--sf-ff); letter-spacing: -.01em; } .sf-trazilica__polje { position: relative; } .sf-trazilica__ikona { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; fill: none; stroke: var(--sf-tx2); stroke-width: 2; stroke-linecap: round; } .sf-trazilica__unos { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 52px; margin: 0; padding: 0 16px 0 46px; border: 0; border-radius: var(--sf-r); background: var(--sf-bg2); color: var(--sf-tx); font: 400 17px/1.3 var(--sf-ff); letter-spacing: -.012em; } .sf-trazilica__unos::placeholder { color: var(--sf-tx2); opacity: 1; } .sf-trazilica__unos::-webkit-search-decoration { -webkit-appearance: none; } .sf-trazilica__unos:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sf-tx), 0 0 0 4px color-mix(in srgb, var(--sf-mk-zuta) 40%, transparent); } .sf-trazilica__stanje { min-height: 20px; font-size: 14px; line-height: 20px; color: var(--sf-tx2); } /* every product in a disclosure (open while a query stands) */ .sf-indeks { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--sf-ln); border-bottom: 1px solid var(--sf-ln); } .sf-indeks__sazetak, .sf-sazetak__naslov { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font: 600 17px/1.3 var(--sf-ff); letter-spacing: -.012em; } .sf-indeks__sazetak::-webkit-details-marker, .sf-sazetak__naslov::-webkit-details-marker { display: none; } /* a drawn chevron (no icon font): down while closed, up while open */ .sf-indeks__sazetak::after, .sf-sazetak__naslov::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 6px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } details[open] > .sf-indeks__sazetak::after, details[open] > .sf-sazetak__naslov::after { transform: translateY(4px) rotate(-135deg); } .sf-indeks__mreza { display: grid; gap: 32px; padding: 8px 0 32px; } @media (min-width: 734px) { .sf-indeks__mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } @media (min-width: 1068px) { .sf-indeks__mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sf-indeks__naslov { margin-bottom: 4px; font: 800 17px/1.2 var(--sf-ff-mk); font-stretch: 100%; text-transform: uppercase; letter-spacing: .01em; } .sf-indeks__naslov a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .sf-indeks__popis > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; border-top: 1px solid var(--sf-ln); } .sf-indeks__popis a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; } .sf-indeks__popis a:hover, .sf-indeks__naslov a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-indeks__sifra { font-size: 13px; color: var(--sf-tx2); font-variant-numeric: tabular-nums; } /* the messages: nothing found (katalog.js), nothing left after the capsules (the page's own rules) */ .sf-indeks__nema, .sf-kat__nema, .sf-kat__prazno { max-width: 62ch; padding: 16px 20px; border-radius: var(--sf-r); background: var(--sf-bg2); font-weight: 600; } .sf-indeks__nema { margin-bottom: 24px; } /* ===================================================================== 5. "Sto koristim", the packages */ /* Dejan's own set: three cards on the grey band (a shelf on a phone, section 6) */ @media (min-width: 734px) { .sf-mk-izbor__popis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sf-mk-izbor > .sf-wrap > .sf-pv { margin-top: 16px; } /* The two packages side by side from 900 px: the plate, its name in Saira, its line, its lines as rows (a small photograph, the name as a link, the version and the part number), the word-only lines with an empty round stand-in, then the large yellow "Dodaj paket u upit" at the foot. */ .sf-paketi { display: grid; gap: 16px; align-items: start; } @media (min-width: 900px) { .sf-paketi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } .sf-paket { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-paket__naslov { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1 var(--sf-ff-mk); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.005em; } .sf-paket__opis { margin-top: 10px; max-width: 46ch; font-size: 16px; line-height: 1.45; color: var(--sf-tx2); } .sf-paket__stavke { display: grid; } .sf-paket__stavka { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--sf-ln); } .sf-paket__stavka:last-child { border-bottom: 1px solid var(--sf-ln); } .sf-paket__slika { flex: none; display: grid; place-items: center; width: 52px; height: 52px; } .sf-paket__slika picture { display: block; width: 100%; height: 100%; } .sf-paket__slika img { width: 100%; height: 100%; object-fit: contain; } .sf-paket__slika .sf-logo { width: 100%; height: auto; } .sf-paket__slika--prazna { border-radius: 50%; background: var(--sf-bg2); } .sf-paket__tekst { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; } .sf-paket__veza, .sf-paket__naziv { font: 600 16px/1.3 var(--sf-ff); letter-spacing: -.01em; overflow-wrap: anywhere; } .sf-paket__veza { color: inherit; text-decoration: none; } .sf-paket__veza:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-paket__izvedba { font: 500 13px/1.35 var(--sf-ff); color: var(--sf-tx2); font-variant-numeric: tabular-nums; } .sf-paket__kom { flex: none; font: 600 14px/1 var(--sf-ff); color: var(--sf-tx2); font-variant-numeric: tabular-nums; } .sf-paket__dno { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; } .sf-paket__gumb { flex: 1 1 260px; } .sf-paket > .sf-pv { margin-top: -6px; } /* ===================================================================== 6. the category tiles, the shelves */ /* A shelf on a phone (Apple's horizontal gallery): native scroll and snap, the next item shows its edge, the shelf runs to the screen's edges (the band's gutter is its padding); from 734 px a grid. */ .sf-kat-vrata__popis, .sf-izdvojeno__popis, .sf-pr-uz__popis, .sf-mk-izbor__popis { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sf-g); scrollbar-width: none; margin-inline: calc(-1 * var(--sf-g)); padding: 4px var(--sf-g) 28px; } .sf-kat-vrata__popis::-webkit-scrollbar, .sf-izdvojeno__popis::-webkit-scrollbar, .sf-pr-uz__popis::-webkit-scrollbar, .sf-mk-izbor__popis::-webkit-scrollbar { display: none; } .sf-kat-vrata__popis > li, .sf-izdvojeno__popis > li, .sf-pr-uz__popis > li, .sf-mk-izbor__popis > li { display: grid; min-width: 0; scroll-snap-align: start; } .sf-pr-uz__popis { grid-auto-columns: min(66vw, 248px); } /* the six categories: two per row on a phone (a grid, every tile in view), three from 1068 px */ .sf-kat-vrata__popis { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; } @media (min-width: 734px) { .sf-izdvojeno__popis, .sf-pr-uz__popis, .sf-mk-izbor__popis { grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; overflow: visible; margin-inline: 0; padding: 0; } .sf-kat-vrata__popis { gap: 16px; } .sf-izdvojeno__popis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-pr-uz__popis { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (min-width: 1068px) { .sf-kat-vrata__popis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sf-izdvojeno__popis, .sf-mk-izbor__popis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .sf-mk-najtrazenije .sf-izdvojeno__popis + .sf-pv { margin-top: 12px; } /* A category tile: the product photograph whole on white at the top, the brands' marks small, the name in Saira (sized from the tile's own width, so the longest name stays on its line), the count, its line, and the round yellow chevron that slides on hover; ONE link, the name, stretched over the tile. The tile lifts (.sf-podigni). */ .sf-kat-vrata { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px var(--sf-ln); container-type: inline-size; } .sf-kat-vrata__slika { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(12px, 5cqi, 28px) clamp(12px, 8cqi, 40px) 0; } .sf-kat-vrata__slika picture { display: block; width: 100%; height: 100%; } .sf-kat-vrata__slika img { width: 100%; height: 100%; object-fit: contain; } .sf-kat-vrata__tijelo { display: grid; gap: 6px; align-content: start; padding: 14px clamp(14px, 7cqi, 24px) 64px; } .sf-kat-vrata__marke { gap: 6px 12px; margin-bottom: 4px; } /* each at its minimum width (Minn Kota 96 px, Humminbird 144 px): a second mark wraps rather than shrinks */ .sf-kat-vrata__marke .sf-logo--minn-kota { height: 16px; } .sf-kat-vrata__marke .sf-logo--humminbird { height: 19px; } .sf-kat-vrata__marke .sf-logo--roypow { height: 19px; } .sf-kat-vrata__marke .sf-logo--airmar { height: 16px; font-size: 15px; } .sf-kat-vrata__naziv { font: 800 18px/1.05 var(--sf-ff-mk); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; } @supports (width: 1cqi) { .sf-kat-vrata__naziv { font-size: min(1.625rem, max(.9375rem, 9.4cqi)); overflow-wrap: normal; hyphens: auto; } } .sf-kat-vrata__veza { color: inherit; text-decoration: none; } .sf-kat-vrata__veza::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sf-r-ploca); } .sf-kat-vrata__broj { font: 500 13px/1.4 var(--sf-ff); color: var(--sf-tx2); } .sf-kat-vrata__opis { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--sf-tx2); } @media (max-width: 733px) { .sf-kat-vrata__opis { display: none; } } .sf-kat-vrata__strelica { position: absolute; left: clamp(14px, 7cqi, 24px); bottom: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sf-mk-zuta); color: var(--sf-crna); } .sf-kat-vrata__strelica .sf-veza__chevron { width: 8px; height: 13px; margin-left: 2px; } @supports selector(:has(*)) { .sf-kat-vrata__veza:focus-visible { outline: none; } .sf-kat-vrata:has(.sf-kat-vrata__veza:focus-visible) { outline: 2px solid var(--sf-fk); outline-offset: 3px; } } /* ===================================================================== 7. the helper's yellow tile, the closing band */ /* "Koji motor mi treba?" as Minn Kota's big yellow tile: their yellow is the ground, so the tile's roles turn to their black text and a white capsule (the hover lifts, never black). The rule stands large on the other side. */ .sf-oprema-odabir { --sf-pt: clamp(56px, 7vw, 104px); --sf-pb: clamp(56px, 7vw, 104px); } .sf-mk-savjetnik { --sf-tx: var(--sf-crna); --sf-tx2: var(--sf-mk-crna); --sf-ln: color-mix(in srgb, var(--sf-crna) 18%, transparent); --sf-fk: var(--sf-crna); --sf-ak: var(--sf-bijela); --sf-ak-tx: var(--sf-crna); --sf-ak-h: var(--sf-bijela); --sf-ak-h-tx: var(--sf-crna); display: grid; gap: 36px; padding: clamp(32px, 5vw, 72px); overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-mk-zuta); color: var(--sf-tx); } @media (min-width: 1068px) { .sf-mk-savjetnik { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 64px; } } .sf-mk-savjetnik .sf-eyebrow { color: var(--sf-tx2); } .sf-mk-savjetnik .sf-h2 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); } .sf-mk-savjetnik__lede { max-width: 40ch; margin-top: 18px; font: 500 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.45 var(--sf-ff); letter-spacing: -.012em; } .sf-mk-savjetnik .sf-gumbi { margin-top: 28px; } .sf-mk-pravilo { display: grid; justify-items: start; gap: 8px; } @media (min-width: 1068px) { .sf-mk-pravilo { justify-items: end; text-align: right; } } .sf-mk-pravilo__prije { font: 600 17px/1.2 var(--sf-ff); letter-spacing: -.012em; } .sf-mk-pravilo__broj { display: block; font: 900 clamp(5.5rem, 2.5rem + 10vw, 10.5rem)/.82 var(--sf-ff-mk); font-stretch: 100%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .sf-mk-pravilo__broj small { font-size: .32em; font-weight: 800; letter-spacing: -.01em; } .sf-mk-pravilo__si { font: 700 19px/1.2 var(--sf-ff); font-variant-numeric: tabular-nums; } .sf-mk-pravilo__poslije { max-width: 26ch; font: 600 17px/1.35 var(--sf-ff); letter-spacing: -.012em; } /* the closing band, centred: advice before buying, the yellow "Zatrazite ponudu", the service as a link, then availability and delivery */ .sf-oprema-pomoc { --sf-pt: clamp(64px, 8vw, 120px); --sf-pb: clamp(64px, 8vw, 120px); } .sf-oprema-pomoc .sf-kop { margin-bottom: 0; } .sf-oprema-pomoc .sf-lead { max-width: 46ch; } /* availability and delivery (OP-18, OP-19): two labelled lines */ .sf-dostava { display: grid; gap: 10px; margin-top: 20px; font-size: 15px; line-height: 1.4; } .sf-dostava > div { display: grid; gap: 2px; } .sf-dostava dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-tx2); } .sf-dostava dd { margin: 0; color: var(--sf-tx); } .sf-dostava--sredina { max-width: 560px; margin: 40px auto 0; text-align: center; } @media (min-width: 734px) { .sf-dostava--sredina { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } /* ===================================================================== 8. a card */ /* A product on the white plate: its photograph whole on white in its padding (OP-20: every card has one); the maker's mark in colour at its minimum width; the name at 19 px; a chosen version's label; 2-3 key values as hairline rows, or the short text; the part number; then "Cijena na upit" small and grey beside the yellow capsule "Dodaj u upit". The name's link covers the card; the actions stand above it. The card lifts (.sf-podigni); nothing turns black. */ .sf-proizvod { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-proizvod__slika { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 20px; } .sf-proizvod__slika picture { display: block; width: 100%; height: 100%; } .sf-proizvod__slika img { width: 100%; height: 100%; object-fit: contain; } .sf-proizvod__tijelo { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; padding: 4px 20px 20px; } .sf-proizvod__marka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; line-height: 0; } .sf-proizvod__logo { width: auto; max-width: none; } .sf-proizvod__logo.sf-logo--minn-kota { height: 16px; } .sf-proizvod__logo.sf-logo--humminbird { height: 19px; } .sf-proizvod__logo.sf-logo--roypow { height: 21px; } /* "Najtrazenije": a small yellow chip beside the mark (a state, so it is a fill, not a line) */ .sf-proizvod__cip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 980px; background: var(--sf-oznaka); color: var(--sf-oznaka-tx); font: 700 12px/1 var(--sf-ff); letter-spacing: .01em; } .sf-proizvod__naziv { font: 650 19px/1.2 var(--sf-ff); letter-spacing: -.018em; overflow-wrap: anywhere; } .sf-proizvod__veza { color: inherit; text-decoration: none; } .sf-proizvod__veza::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sf-r-ploca); } .sf-proizvod__izvedba { font: 600 15px/1.35 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx); font-variant-numeric: tabular-nums; } .sf-proizvod__spec { display: grid; font-size: 14px; line-height: 1.35; } .sf-proizvod__spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 7px; border-top: 1px solid var(--sf-ln); } .sf-proizvod__spec dt { color: var(--sf-tx2); } .sf-proizvod__spec dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .sf-proizvod__kratko { font-size: 14px; line-height: 1.45; color: var(--sf-tx2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .sf-proizvod__sifra { font: 500 13px/1.35 var(--sf-ff); color: var(--sf-tx2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .sf-proizvod__dno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 6px; } .sf-proizvod__cijena { font: 500 14px/1.3 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } .sf-proizvod__radnje { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; } .sf-proizvod__radnje .sf-gumb { position: relative; min-height: 36px; padding: 0 16px; font-size: 15px; } .sf-proizvod__radnje .sf-gumb::after { content: ""; position: absolute; inset: -4px 0; } .sf-proizvod__radnje .sf-dodaj-bezjs { font-size: 15px; } .sf-proizvod__usp { position: relative; z-index: 2; display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; font: 500 14px/1.3 var(--sf-ff); color: var(--sf-tx2); cursor: pointer; } .sf-proizvod__usp input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--sf-mk-zuta); cursor: pointer; } .sf-proizvod__usp:has(input:checked) { color: var(--sf-tx); font-weight: 600; } .sf-proizvod__usp:has(input:disabled) { opacity: .5; cursor: not-allowed; } @supports selector(:has(*)) { .sf-proizvod__veza:focus-visible { outline: none; } .sf-proizvod:has(.sf-proizvod__veza:focus-visible) { outline: 2px solid var(--sf-fk); outline-offset: 3px; } } /* the short card of the recommendations: a wider photograph, the name and the part number, an outline capsule (the page's own "Dodaj u upit" is the prominent one) */ .sf-proizvod--kompaktna .sf-proizvod__slika { aspect-ratio: 4 / 3; padding: 16px; } .sf-proizvod--kompaktna .sf-proizvod__tijelo { gap: 8px; padding: 2px 16px 16px; } .sf-proizvod--kompaktna .sf-proizvod__naziv { font-size: 17px; } /* ===================================================================== 9. a category */ /* the light head: the category's marks, the H1 in Saira (its size lets "ELEKTROMOTORI" stand on one line at 320 px), the grey sentence, the count */ .sf-kat-glava { --sf-pb: clamp(24px, 3vw, 40px); } .sf-kat-glava__marke { margin-bottom: 16px; } .sf-kat-glava__marke .sf-logo--minn-kota { height: 20px; } .sf-kat-glava__marke .sf-logo--humminbird { height: 19px; } .sf-kat-glava__marke .sf-logo--roypow { height: 22px; } .sf-kat-glava__marke .sf-logo--airmar { height: 18px; font-size: 17px; } .sf-kat-glava .sf-h1 { max-width: 18ch; font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); } .sf-kat-glava .sf-lead { max-width: 52ch; } .sf-kat__meta { margin-top: 18px; } .sf-kat-glava .sf-ulaz > .sf-pv { margin-top: 12px; } /* the products band: search, then the sticky filter bar, then the count, the grid, the messages, the compare bar */ .sf-kat { --sf-pt: clamp(20px, 3vw, 40px); } .sf-kat__alati { margin-bottom: 16px; } .sf-kat__alati > .sf-trazilica { max-width: 440px; } /* THE STICKY FILTER BAR (OP-01: "dobar filter na vrhu koji je sticky ispod top bara"): right under the frame's top while the cards are on screen, on the frame's light glass; its capsules in ONE row that scrolls sideways on a phone - every axis its small legend, then its chips. A layer of its own (::before), so nothing inside is trapped. */ html:has(.sf-kat__traka) { scroll-padding-top: calc(var(--sf-vrh) + 72px); } .sf-kat__traka { position: sticky; top: var(--sf-vrh); z-index: 14; isolation: isolate; margin: 0 calc(-1 * var(--sf-g)) 20px; padding: 10px var(--sf-g); } .sf-kat__traka::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sf-okvir) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--sf-ln); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sf-kat__traka::before { background: var(--sf-okvir); } } @media (min-width: 1068px) { .sf-kat__traka { margin-inline: 0; padding-inline: 0; } .sf-kat__traka::before { left: calc(-1 * var(--sf-g)); right: calc(-1 * var(--sf-g)); } } /* the capsules: radio inputs in Apple's grey chips; the chosen one turns Minn Kota's yellow with black words; CSS alone filters (the rules come with the page). Where :has() is missing they do nothing, so they are not shown and every card is. */ .sf-filtri { display: flex; align-items: center; gap: 8px 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .sf-filtri::-webkit-scrollbar { display: none; } .sf-filtar { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } /* floated, the legend is a plain flex item (no fieldset border to sit in) */ .sf-filtar__legenda { float: left; flex: none; padding: 0; font: 600 11px/1.2 var(--sf-ff); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-tx2); } .sf-filtar__cipovi { display: flex; flex: none; gap: 6px; } .sf-cip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; white-space: nowrap; border-radius: 980px; background: var(--sf-bg2); color: var(--sf-tx); cursor: pointer; font: 500 14px/1.2 var(--sf-ff); letter-spacing: -.008em; } .sf-cip::after { content: ""; position: absolute; inset: -4px 0; } .sf-cip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sf-cip:has(input:checked) { background: var(--sf-ak); color: var(--sf-ak-tx); font-weight: 650; } .sf-cip:has(input:focus-visible) { outline: 2px solid var(--sf-fk); outline-offset: 2px; } @media (hover: hover) { .sf-cip:hover { background: color-mix(in srgb, var(--sf-mk-zuta) 22%, var(--sf-bg2)); } .sf-cip:has(input:checked):hover { background: var(--sf-ak); } } @supports not selector(:has(*)) { .sf-kat__traka, .sf-kat__broj { display: none; } } /* the grid: as many columns of at least 260 px as fit (one on a phone, four from 1068 px). The count line comes after the list in the page (a CSS counter of the cards that are shown) and is drawn above it. */ .sf-kat__rezultat { display: flex; flex-direction: column; } .sf-kat__popis { order: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: sf-prikazano; } .sf-kat__popis > li { display: grid; min-width: 0; counter-increment: sf-prikazano; } @media (min-width: 1068px) { .sf-kat__popis { gap: 20px; } } .sf-kat__broj { order: 1; margin-bottom: 16px; font-size: 14px; color: var(--sf-tx2); } .sf-kat__broj-n::after { content: counter(sf-prikazano); font-weight: 700; color: var(--sf-tx); font-variant-numeric: tabular-nums; } /* an empty combination of capsules (the page's own rules show it) and an empty search (katalog.js) */ .sf-kat__prazno { order: 3; display: none; } .sf-kat__nema { order: 3; } .sf-kat__ponisti { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sf-tx); font: 600 15px/1.3 var(--sf-ff); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } /* the summary table, collapsed: the category without JavaScript */ .sf-sazetak { margin-top: 56px; border-top: 1px solid var(--sf-ln); border-bottom: 1px solid var(--sf-ln); } .sf-sazetak .sf-tablica { margin-bottom: 24px; } .sf-sazetak__tablica { min-width: 640px; } /* a product's name in the table: its target is the row's height (44 px and more), the layout unchanged */ .sf-sazetak__tablica tbody th a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* the compare bar: a capsule of the frame's light glass (a control floats, so glass is allowed - Apple HIG: Materials), sticky at the foot of the screen while the cards are on it, clear of the floating contact button */ .sf-usp-traka { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 600px; margin: 24px 72px 0 0; padding: 10px 10px 10px 20px; border-radius: 28px; color: var(--sf-tx); background: color-mix(in srgb, var(--sf-okvir) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px var(--sf-ln), 0 14px 36px -12px var(--sf-sjena-jaka); } @media (min-width: 734px) { .sf-usp-traka { margin-inline: auto; } } .sf-usp-traka__tekst { flex: 1 1 160px; font: 600 15px/1.35 var(--sf-ff); } .sf-usp-traka__gumbi { display: flex; flex-wrap: wrap; gap: 8px; } .sf-usp-traka .sf-gumb { min-height: 44px; padding: 0 18px; font-size: 15px; } .sf-usp-traka .sf-gumb:disabled { opacity: .45; cursor: not-allowed; } /* ===================================================================== 10. tables */ /* table.sf-spec: specifications, versions, the summary, the comparison - Apple's tables: no boxes, hairlines between the rows, the column heads small and grey, the figures tabular. Degrees are written only inside one of these. */ .sf-tablica { overflow-x: auto; overscroll-behavior-x: contain; } .sf-tablica:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 2px; } .sf-spec { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; } .sf-spec th, .sf-spec td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--sf-ln); } .sf-spec tr:last-child > * { border-bottom: 1px solid var(--sf-ln); } .sf-spec thead th { padding-top: 0; padding-bottom: 12px; border-top: 0; white-space: nowrap; font: 500 13px/1.3 var(--sf-ff); color: var(--sf-tx2); } .sf-spec thead tr:last-child > * { border-bottom: 0; } .sf-spec tbody th { font-weight: 600; } .sf-spec a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-spec a:hover { text-decoration-thickness: 2px; } .sf-spec--proizvod tbody th { width: 42%; font-weight: 400; color: var(--sf-tx2); } .sf-spec--proizvod td { font-weight: 600; overflow-wrap: anywhere; } @media (min-width: 1068px) { .sf-spec--proizvod { font-size: 17px; } } /* ===================================================================== 11. the comparison */ /* katalog.js builds it at body level: Apple's white sheet over the dimmed page, the chosen products as columns, the keys as rows (the first column stays while the table scrolls sideways), a row whose values differ in weight and a wash of Minn Kota's yellow. */ .sf-usp { width: min(1040px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; overflow: hidden; border-radius: var(--sf-r-plocica); box-shadow: 0 30px 80px -20px var(--sf-sjena-jaka); } .sf-usp::backdrop { background: color-mix(in srgb, var(--sf-crna) 40%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sf-usp__unutra { display: flex; flex-direction: column; max-height: inherit; } .sf-usp__glava { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--sf-ln); } .sf-usp__naslov { font: 800 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1 var(--sf-ff-mk); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.005em; } .sf-usp__x { min-height: 44px; padding: 0 18px; font-size: 15px; } .sf-usp__okvir { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px 24px; } .sf-usp__okvir:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: -2px; } .sf-usp .sf-spec { min-width: 560px; } .sf-usp .sf-spec tbody th, .sf-usp .sf-spec thead td { position: sticky; left: 0; z-index: 1; width: 26%; min-width: 136px; background: var(--sf-ploca); } .sf-usp .sf-spec tbody th { font-weight: 400; color: var(--sf-tx2); } .sf-usp__proizvod { padding-top: 16px; vertical-align: top; white-space: normal; } .sf-usp .sf-spec thead th { font: 600 15px/1.3 var(--sf-ff); color: var(--sf-tx); white-space: normal; } .sf-usp__slika { display: grid; place-items: center; aspect-ratio: 4 / 3; max-width: 180px; margin-bottom: 10px; } .sf-usp__slika picture { display: block; width: 100%; height: 100%; } .sf-usp__slika img { width: 100%; height: 100%; object-fit: contain; } .sf-usp__naziv { display: block; margin-bottom: 10px; font: 650 17px/1.25 var(--sf-ff); letter-spacing: -.012em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-usp .sf-gumb { min-height: 44px; margin: 0 8px 8px 0; padding: 0 16px; font-size: 15px; } .sf-usp__ukloni { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sf-tx2); font: 500 14px/1.3 var(--sf-ff); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-usp__razlika td { font-weight: 700; background: color-mix(in srgb, var(--sf-mk-zuta) 16%, transparent); } .sf-usp__nema { color: var(--sf-tx2); } /* ===================================================================== 12. a product page */ /* The head: the white stage with its thumbnails on the left - sticky beside the words on a wider screen -, the words on the right: the mark in colour, the name in Saira, the grey sentence, the big figures between hairlines, the grey panel with "Cijena na upit", the large yellow "Dodaj u upit", the enquiry link, availability and delivery. */ .sf-pr-glava { --sf-pb: clamp(56px, 7vw, 104px); } .sf-pr { display: grid; gap: 32px; } @media (min-width: 734px) { .sf-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; } .sf-pr__galerija { position: sticky; top: calc(var(--sf-vrh) + var(--sf-red-oprema) + 24px); } } @media (min-width: 1068px) { .sf-pr { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } } /* the stage and the thumbnails: every photograph whole on white; each opens in the viewer */ .sf-pr__glavna { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 8%; border-radius: var(--sf-r-plocica); box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-pr__glavna picture, .sf-pr__slicica picture { display: block; width: 100%; height: 100%; } .sf-pr__glavna img, .sf-pr__slicica img { width: 100%; height: 100%; object-fit: contain; } .sf-pr__slicice { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .sf-pr__slicica { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 10%; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-pr__galerija .sf-gal:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 3px; } @media (max-width: 733px) { .sf-pr__slicice { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 22%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; } .sf-pr__slicice::-webkit-scrollbar { display: none; } .sf-pr__slicice > li { scroll-snap-align: start; } } /* the words. The column is a container: the name's size follows its width, so the longest word of any product's name stays on its line from 320 px up */ .sf-pr__naslov { min-width: 0; container-type: inline-size; } .sf-pr__marka { margin-bottom: 18px; line-height: 0; } .sf-pr__marka img { width: auto; max-width: none; } .sf-pr__marka .sf-logo--minn-kota { height: 22px; } .sf-pr__marka .sf-logo--humminbird { height: 20px; } .sf-pr__marka .sf-logo--roypow { height: 24px; } .sf-pr__marka .sf-logo--airmar { height: 20px; font-size: 19px; } .sf-pr__h1 { max-width: none; font-size: 1.75rem; overflow-wrap: anywhere; } @supports (width: 1cqi) { /* the widest word of any name is 8,1 em in Saira 800 ("REINFORCEMENT"): 9 % of the column keeps it whole */ .sf-pr__h1 { font-size: clamp(1.75rem, 9cqi, 3.5rem); overflow-wrap: break-word; } } .sf-pr__kratko { max-width: 44ch; margin-top: 18px; font: 600 var(--sf-f-lead)/1.36 var(--sf-ff); letter-spacing: -.018em; color: var(--sf-tx2); text-wrap: pretty; } /* The big figures (up to three, katalog-ui.ts brojkeProizvoda): Saira 800, tabular, between hairlines, the metric figure small beneath (OP-24). Sized from the widest figure of the product (--sf-bz, in em) and how many there are (--sf-bn): side by side where the column is wide enough, otherwise one per row with its label beside it. */ .sf-pr__brojke { margin-top: 28px; container: sf-brojke / inline-size; } .sf-brojke { --sf-bn: 3; --sf-bz: 6; display: grid; border-top: 1px solid var(--sf-ln); border-bottom: 1px solid var(--sf-ln); } .sf-brojke > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; column-gap: 16px; padding: 14px 0; } .sf-brojke > div + div { border-top: 1px solid var(--sf-ln); } .sf-brojke dd { grid-column: 1; grid-row: 1; margin: 0; } .sf-brojke dt { grid-column: 2; grid-row: 1; font: 500 14px/1.35 var(--sf-ff); color: var(--sf-tx2); } .sf-brojke b { display: block; font: 800 26px/1 var(--sf-ff-mk); font-stretch: 100%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sf-tx); } .sf-brojke small { font-size: .42em; font-weight: 700; letter-spacing: 0; } .sf-brojke__si { display: block; margin-top: 6px; font: 600 14px/1.2 var(--sf-ff); color: var(--sf-tx2); font-variant-numeric: tabular-nums; white-space: nowrap; } @supports (width: 1cqi) { .sf-brojke b { font-size: min(36px, calc((50cqi - 8px) / var(--sf-bz))); white-space: nowrap; } } @container sf-brojke (min-width: 440px) { .sf-brojke { grid-template-columns: repeat(var(--sf-bn), minmax(0, 1fr)); } .sf-brojke > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 18px 0; } .sf-brojke > div + div { padding-left: 16px; border-top: 0; border-left: 1px solid var(--sf-ln); } .sf-brojke dd { order: -1; } .sf-brojke dt { font-size: 13px; } .sf-brojke b { font-size: min(44px, calc((100cqi / var(--sf-bn) - 18px) / var(--sf-bz))); } } /* the enquiry panel (Apple's grouped grey): the part number and the price line, the large yellow "Dodaj u upit" across the panel (with JavaScript), the note when it is on the list, the enquiry link, availability and delivery */ .sf-pr__upit { display: grid; gap: 16px; margin-top: 28px; padding: 24px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); } .sf-pr__upit-red { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; } .sf-pr__sifra { font: 500 15px/1.35 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); font-variant-numeric: tabular-nums; } .sf-pr__cijena { font: 650 17px/1.3 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } .sf-pr__radnje { display: grid; gap: 10px; justify-items: start; } .sf-pr__radnje .sf-dodaj { justify-self: stretch; min-height: 52px; padding: 0 28px; font-size: 18px; } .sf-pr__upit .sf-dostava { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--sf-ln); } /* the bands under the head: white and Apple's grey, parted by their grounds and their space (no rule) */ .sf-pr-dio, .sf-pr-ukratko, .sf-pr-uz, .sf-pr-savjet { --sf-pt: clamp(56px, 7vw, 104px); --sf-pb: clamp(56px, 7vw, 104px); } .sf-pr-dio + .sf-pr-dio { --sf-pt: clamp(16px, 2vw, 32px); } .sf-pr-uz { background: var(--sf-bg2); } /* "Moj savjet" (OP-40): Dejan's words, large, on grey - only when the catalogue holds them */ .sf-pr-savjet__okvir { max-width: 760px; margin: 0; } .sf-pr-savjet__tekst { margin: 12px 0 0; font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.4 var(--sf-ff); letter-spacing: -.016em; text-wrap: pretty; } /* "Ukratko": white tiles on grey */ .sf-pr-ukratko__popis { display: grid; gap: 12px; } @media (min-width: 734px) { .sf-pr-ukratko__popis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1068px) { .sf-pr-ukratko__popis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .sf-pr-ukratko__popis > li { padding: 24px 28px; border-radius: var(--sf-r-kartica); background: var(--sf-bg3); font: 600 19px/1.35 var(--sf-ff); letter-spacing: -.015em; text-wrap: pretty; } /* the description and "U paketu" (a grey panel beside it on a wide screen) */ .sf-pr-opis__mreza { display: grid; gap: 40px; } .sf-pr-opis__tekst > .sf-h2 { margin-bottom: 24px; } .sf-pr-opis .sf-tekst { max-width: 64ch; font-size: 17px; line-height: 1.6; } .sf-pr-opis__tekst > .sf-pv { margin-top: 16px; } .sf-pr-opis__paket { align-self: start; padding: 28px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); } .sf-pr-opis__paket .sf-h3 { margin-bottom: 12px; } .sf-pr-opis__paket .sf-popis > li { padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--sf-tx) 10%, transparent); font-size: 15px; line-height: 1.4; } @media (min-width: 1068px) { .sf-pr-opis__mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .sf-pr-opis__tekst { grid-column: 1 / span 7; } .sf-pr-opis__paket { grid-column: 9 / span 4; } .sf-pr-opis__mreza--sam .sf-pr-opis__tekst { grid-column: 1 / span 8; } } /* mounting and steering (trolling motors): the words and the helper's link, the three answers as Apple's rows */ .sf-pr-montaza__mreza { display: grid; gap: 32px; } .sf-pr-montaza__tekst { max-width: 46ch; margin-top: 16px; color: var(--sf-tx2); } .sf-pr-montaza__dl > div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--sf-ln); } .sf-pr-montaza__dl > div:last-child { border-bottom: 1px solid var(--sf-ln); } .sf-pr-montaza__dl dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-pr-montaza__dl dd { margin: 0; font: 600 19px/1.35 var(--sf-ff); letter-spacing: -.015em; } @media (min-width: 1068px) { .sf-pr-montaza__mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; } .sf-pr-montaza__kop { grid-column: 1 / span 6; } .sf-pr-montaza__dl { grid-column: 8 / span 5; } } /* the versions: an Apple table; on a phone each version stands as a block, every value under its label */ .sf-pr-izvedbe .sf-kop .sf-lead { max-width: 44ch; } .sf-izvedbe__radnje { text-align: right; white-space: nowrap; } .sf-izvedbe__radnje .sf-gumb { position: relative; min-height: 36px; padding: 0 14px; font-size: 14px; } .sf-izvedbe__radnje .sf-gumb::after { content: ""; position: absolute; inset: -4px 0; } .sf-izvedbe__radnje .sf-dodaj-bezjs { font-size: 14px; } .sf-izvedbe__radnje .sf-na-popisu { margin-left: 8px; } @media (max-width: 733px) { .sf-izvedbe thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sf-izvedbe, .sf-izvedbe tbody, .sf-izvedbe tr, .sf-izvedbe th, .sf-izvedbe td { display: block; } .sf-izvedbe tr { padding: 16px 0; border-top: 1px solid var(--sf-ln); } .sf-izvedbe tr:last-child { border-bottom: 1px solid var(--sf-ln); } .sf-izvedbe tbody th, .sf-izvedbe td, .sf-izvedbe tr:last-child > * { padding: 2px 0; border: 0; } .sf-izvedbe tbody th { font: 800 19px/1.3 var(--sf-ff-mk); font-stretch: 100%; letter-spacing: .01em; } .sf-izvedbe tbody th[data-oznaka]::before, .sf-izvedbe td[data-oznaka]::before { content: attr(data-oznaka) ": "; font: 400 14px/1.4 var(--sf-ff); letter-spacing: 0; color: var(--sf-tx2); } .sf-izvedbe td:empty { display: none; } .sf-izvedbe__radnje { padding-top: 10px; text-align: left; white-space: normal; } } /* the specifications: Apple's tech specs - the heading beside the table on a wide screen */ .sf-pr-spec__mreza { display: grid; gap: 24px; } @media (min-width: 1068px) { .sf-pr-spec__mreza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; } .sf-pr-spec__mreza > .sf-h2 { grid-column: 1 / span 4; } .sf-pr-spec__mreza > .sf-spec { grid-column: 5 / span 8; } } /* installation and service (no source line under it since 3. 11. 2026.) */ .sf-pr-servis__okvir { max-width: 760px; } .sf-pr-servis .sf-lead { margin-top: 16px; } /* ===================================================================== 13. reduced motion, forced colours, print */ /* The lift, the chevron's slide and the reveal are site.css's (.sf-podigni, .sf-gumb, .sf-pojava*). Here only the photographs growing a hair inside their white padding and the tile's chevron, under no-preference and a pointer that hovers - transform only, nothing moves the layout. */ @media (prefers-reduced-motion: no-preference) { .sf-proizvod__slika img, .sf-kat-vrata__slika img { transition: transform .6s var(--sf-ease-out); } .sf-kat-vrata__strelica { transition: transform var(--sf-t-ui) var(--sf-ease-out); } .sf-cip, .sf-oprema-nav__veza { transition: background-color var(--sf-t-micro) var(--sf-ease-out), color var(--sf-t-micro) var(--sf-ease-out); } .sf-trazilica__unos { transition: box-shadow var(--sf-t-micro) var(--sf-ease-out); } .sf-indeks__sazetak::after, .sf-sazetak__naslov::after { transition: transform var(--sf-t-ui) var(--sf-ease); } @media (hover: hover) { .sf-proizvod:hover .sf-proizvod__slika img { transform: scale(1.03); } .sf-kat-vrata:hover .sf-kat-vrata__slika img { transform: scale(1.04); } .sf-kat-vrata:hover .sf-kat-vrata__strelica { transform: translateX(4px); } } } @media (forced-colors: active) { .sf-cip:has(input:checked) { outline: 3px solid Highlight; outline-offset: 1px; } .sf-oprema-nav__veza[aria-current] { outline: 2px solid Highlight; outline-offset: -4px; } .sf-ploca, .sf-pr__upit, .sf-mk-savjetnik, .sf-pr-ukratko__popis > li { border: 1px solid CanvasText; } .sf-trazilica__unos { border: 1px solid CanvasText; } .sf-trazilica__unos:focus { outline: 2px solid Highlight; } } @media print { .sf-oprema-nav, .sf-kat__alati, .sf-kat__traka, .sf-kat__broj, .sf-kat__prazno, .sf-kat__nema, .sf-usp-traka, .sf-proizvod__radnje, .sf-proizvod__usp, .sf-pr__radnje, .sf-izvedbe__radnje, .sf-na-popisu, .sf-oprema-odabir .sf-gumbi, .sf-oprema-pomoc .sf-gumbi, .sf-pr-servis .sf-gumbi, .sf-pr-montaza .sf-gumbi, .sf-usp, .sf-mk-hero__gumbi, .sf-mk-hero .sf-trazilica, .sf-paket__dno, .sf-kat-vrata__strelica { display: none !important; } .sf-ploca, .sf-pr__upit, .sf-mk-savjetnik, .sf-pr-ukratko__popis > li { box-shadow: inset 0 0 0 1px var(--sf-crta-dan); } .sf-mk-savjetnik, .sf-pr__upit, .sf-pr-ukratko__popis > li, .sf-pr-opis__paket { background: none; } .sf-kat-vrata__popis, .sf-izdvojeno__popis, .sf-pr-uz__popis, .sf-kat__popis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; } .sf-proizvod, .sf-kat-vrata, .sf-paket, .sf-spec tr, .sf-pr-ukratko__popis > li { break-inside: avoid; } .sf-pr__galerija { position: static; } } /* Sport Fishing D.O. - odabir.css (lane H), design 3 "Plavi bedz" (DIZAJN-3.md, 2026-11-02): the helper "Koji motor mi treba?" (oprema/koji-motor/) in Minn Kota's world - white and cloud with Minn Kota's yellow and little black (OP-03) - an Apple configurator (Apple HIG: Layout, Buttons, Toggles, Segmented controls, Accessibility): the helper's band the grouped grey; fields white with the unit inside, each choice a segmented control (a list on a narrow screen) whose chosen segment is Minn Kota's yellow, the yes/no questions as switches that turn yellow, example boats behind a disclosure, the yellow "Izracunajte" the ONE prominent action the answer three big Saira numbers on white tiles (thrust, voltage, shaft) with Minn Kota's yellow dash; the products that fit on the light plates with "Dodaj u upit" and the marks the visitor asked for; at sea the other motors under a tinted note; before an answer, a quiet empty state for everyone the rule as a big figure beside its table (Apple's specification table); the shaft charts as white cards on grey; the way on as a white tile The builder concatenates the files of SF_CSS (ctx.ts) into the ONE shipped assets/site.css. No colour literal: only the worlds' roles (svijet.ts), palette keys (SF_BOJE) and color-mix() of them. The error colour --sf-o-greska is obrasci.css's (one mapping for every form of the site, chosen by the ground). No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). Motion: transform and opacity only, under prefers-reduced-motion: no-preference, never on a keystroke; the static blocks arrive with site.css's .sf-pojava; nothing captures wheel, touch or keys; print keeps the rule and the charts. Markup: src/lib/sportfishingdo/stranice/odabir.ts (the page) and assets/odabir.js (the answer it writes). (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 1. the helper's band (JavaScript only) */ /* without JavaScript the page is the rule, the table and the charts; the head script sets html.sf-js */ html:not(.sf-js) .sf-odabir { display: none; } /* Apple's grouped grey: the fields and the tiles stand on it in white. A field's edge is the secondary text mixed into the ground - 3:1 or more on the field and on the grey (WCAG 1.4.11; apple.com's checkout draws its fields the same way) - declared here, so it is resolved with this band's roles. */ .sf-pojas.sf-odabir { background: var(--sf-bg2); --sf-o-rub: color-mix(in srgb, var(--sf-tx2) 80%, var(--sf-bg)); } .sf-odabir__mreza { display: grid; gap: clamp(48px, 6vw, 72px); align-items: start; } @media (min-width: 1068px) { .sf-odabir__mreza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 5vw, 80px); } } /* ===================================================================== 2. the form */ .sf-odabir__forma { display: grid; gap: 32px; min-width: 0; } .sf-odabir__polje { min-width: 0; margin: 0; padding: 0; border: 0; } /* a legend that floats is an ordinary block: the same spacing as a label above a field */ .sf-odabir__polje > legend { float: left; width: 100%; margin-bottom: 8px; } .sf-odabir__polje > legend + * { clear: left; } .sf-odabir__polje > * + * { margin-top: 8px; } .sf-odabir__polje > .sf-odabir__uputa + * { margin-top: 12px; } .sf-odabir__oznaka { display: block; padding: 0; font: 600 17px/1.3 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } .sf-odabir__neobv { font-weight: 400; color: var(--sf-tx2); } .sf-odabir__uputa { max-width: 62ch; font: 400 14px/1.45 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } /* a number: Apple's field (52 px, 17 px figures, 12 px corners), its unit inside at the trailing edge - the unit never takes a click, the field does */ .sf-odabir__unos-red { position: relative; max-width: 20rem; } .sf-odabir__unos-red--tekst { max-width: 34rem; } .sf-odabir__unos { display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 56px 13px 16px; border: 1px solid var(--sf-o-rub); border-radius: var(--sf-r); background: var(--sf-bg); color: var(--sf-tx); -webkit-appearance: none; appearance: none; font: 500 17px/1.4 var(--sf-ff); letter-spacing: -.012em; font-variant-numeric: tabular-nums; } .sf-odabir__unos--tekst { padding-right: 16px; } .sf-odabir__unos::placeholder { color: var(--sf-tx2); opacity: 1; } /* the focus: the edge in the text colour and a soft ring (the transparent outline shows in forced colours) */ .sf-odabir__unos:focus { outline: 2px solid transparent; outline-offset: 2px; border-radius: var(--sf-r); border-color: var(--sf-tx); box-shadow: 0 0 0 1px var(--sf-tx), 0 0 0 5px color-mix(in srgb, var(--sf-tx) 12%, transparent); } .sf-odabir__jedinica { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font: 500 17px/1 var(--sf-ff); color: var(--sf-tx2); } /* A choice: Apple's segmented control - a grey track, the chosen segment filled with Minn Kota's yellow (design 3: less black in Minn Kota's world). A real radio lies over each segment (arrow keys, screen readers, the focus ring on the segment). On a narrow track the segments stand one under another, white rows of a list; side by side from a 300 px track, a wide group (three answers, or answers with a line of help) from 460 px. */ .sf-odabir__izbori { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 3px; max-width: 34rem; padding: 3px; border-radius: calc(var(--sf-r) + 3px); background: color-mix(in srgb, var(--sf-tx) 9%, var(--sf-bg2)); } .sf-odabir__izbori--siroko { max-width: none; } .sf-odabir__izbor { position: relative; display: flex; flex: 1 1 100%; min-width: 0; cursor: pointer; } .sf-odabir__izbor > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sf-odabir__izbor-tekst { flex: 1; display: grid; place-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: var(--sf-r); background: var(--sf-bg); color: var(--sf-tx); text-align: center; font: 500 16px/1.25 var(--sf-ff); letter-spacing: -.011em; } .sf-odabir__izbor-tekst b { font-weight: 600; } .sf-odabir__izbor-tekst small { font: 400 13px/1.35 var(--sf-ff); letter-spacing: -.003em; color: var(--sf-tx2); } .sf-odabir__izbori--kartice .sf-odabir__izbor-tekst { place-content: center start; padding: 14px 16px; text-align: left; } .sf-odabir__izbor > input:checked + .sf-odabir__izbor-tekst { background: var(--sf-ak); color: var(--sf-ak-tx); box-shadow: 0 1px 2px var(--sf-sjena), 0 6px 14px -8px var(--sf-sjena-jaka); } .sf-odabir__izbor > input:checked + .sf-odabir__izbor-tekst small { color: color-mix(in srgb, var(--sf-ak-tx) 78%, var(--sf-ak)); } .sf-odabir__izbor > input:focus-visible + .sf-odabir__izbor-tekst { outline: 2px solid var(--sf-fk); outline-offset: 2px; } @container (min-width: 300px) { .sf-odabir__izbori:not(.sf-odabir__izbori--siroko) > .sf-odabir__izbor { flex: 1 1 0; } .sf-odabir__izbori:not(.sf-odabir__izbori--siroko) > .sf-odabir__izbor > input:not(:checked) + .sf-odabir__izbor-tekst { background: transparent; } } @container (min-width: 460px) { .sf-odabir__izbori--siroko > .sf-odabir__izbor { flex: 1 1 0; } .sf-odabir__izbori--siroko > .sf-odabir__izbor > input:not(:checked) + .sf-odabir__izbor-tekst { background: transparent; } } @media (hover: hover) { .sf-odabir__izbori > .sf-odabir__izbor:hover > input:not(:checked) + .sf-odabir__izbor-tekst { background: color-mix(in srgb, var(--sf-tx) 5%, var(--sf-bg)); } } /* A yes/no question: Apple's switch at the trailing edge of a white row, the row its label. Off, a grey track with a 3:1 edge; on, the track in Minn Kota's yellow - the knob's place says which, not the colour alone. The knob is drawn (a radial gradient), so it slides with the native control under it. */ .sf-odabir__kvacica { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px; border-radius: var(--sf-r); background: var(--sf-bg); color: var(--sf-tx); cursor: pointer; font: 500 17px/1.35 var(--sf-ff); letter-spacing: -.012em; } .sf-odabir__kvacica > span { flex: 1; min-width: 0; } .sf-odabir__kvacica > input { order: 2; flex: none; width: 51px; height: 31px; margin: 0; border: 0; border-radius: 980px; cursor: pointer; -webkit-appearance: none; appearance: none; background-color: color-mix(in srgb, var(--sf-tx) 12%, var(--sf-bg)); background-image: radial-gradient(circle, var(--sf-bijela) 0 13px, var(--sf-sjena) 13.5px, transparent 15.5px); background-repeat: no-repeat; background-size: 31px 31px; background-position: 0 50%; box-shadow: inset 0 0 0 1px var(--sf-o-rub); } .sf-odabir__kvacica > input:checked { background-color: var(--sf-ak); background-position: 100% 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-ak-tx) 35%, var(--sf-ak)); } /* a switch row with a line of help under its label */ .sf-odabir__kvacica--uputa > span { display: grid; gap: 3px; } .sf-odabir__kvacica--uputa b { font-weight: 600; } .sf-odabir__kvacica--uputa small { font: 400 14px/1.4 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } /* the wishes: the switches as one grouped list */ .sf-odabir__zelje > .sf-odabir__kvacica + .sf-odabir__kvacica { margin-top: 2px; } .sf-odabir__kvacica > input:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 3px; border-radius: 980px; } /* Example boats (OP-33): a quiet disclosure under the weight field; open, a white tile with one boat per row */ .sf-odabir__primjeri { max-width: 34rem; margin-top: -16px; } .sf-odabir__primjeri > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx); } .sf-odabir__primjeri > summary::-webkit-details-marker { display: none; } .sf-odabir__primjeri > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); } .sf-odabir__primjeri[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .sf-odabir__primjeri > summary:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 2px; border-radius: 6px; } .sf-odabir__primjeri-tijelo { display: grid; gap: 12px; margin-top: 4px; padding: 18px 20px; border-radius: var(--sf-r-kartica); background: var(--sf-bg); } .sf-odabir__primjeri-popis { display: grid; } .sf-odabir__primjeri-popis > li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--sf-ln); } .sf-odabir__primjeri-popis > li:first-child { border-top: 0; padding-top: 4px; } .sf-odabir__primjer-ime { font: 500 15px/1.35 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx2); } .sf-odabir__primjer-ime b { font-weight: 650; color: var(--sf-tx); } .sf-odabir__primjer-zbroj { font: 400 15px/1.45 var(--sf-ff); letter-spacing: -.008em; font-variant-numeric: tabular-nums; color: var(--sf-tx); } .sf-odabir__primjer-zbroj b { font-weight: 650; white-space: nowrap; } .sf-odabir__primjer-gorivo { font: 400 13px/1.4 var(--sf-ff); color: var(--sf-tx2); } /* the one prominent action: the yellow capsule, the width of a phone */ .sf-odabir__dno { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .sf-odabir__dno .sf-gumb { width: 100%; } @media (min-width: 560px) { .sf-odabir__dno .sf-gumb { width: auto; min-width: 15rem; } } /* an error: its words in the text colour, ruled and tinted in the error colour; the field it names takes the colour on its edge, a choice on its track */ .sf-odabir__greska { max-width: 34rem; padding: 10px 14px; border-left: 3px solid var(--sf-o-greska); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--sf-o-greska) 9%, var(--sf-bg)); color: var(--sf-tx); font: 500 15px/1.4 var(--sf-ff); letter-spacing: -.008em; } .sf-odabir__polje.is-greska .sf-odabir__unos { border-color: var(--sf-o-greska); box-shadow: 0 0 0 1px var(--sf-o-greska); } .sf-odabir__polje.is-greska .sf-odabir__unos:focus { box-shadow: 0 0 0 1px var(--sf-o-greska), 0 0 0 5px color-mix(in srgb, var(--sf-o-greska) 18%, transparent); } .sf-odabir__polje.is-greska .sf-odabir__izbori { box-shadow: 0 0 0 2px var(--sf-o-greska); } /* ===================================================================== 3. the answer */ .sf-odabir__ishod { position: relative; container-type: inline-size; display: grid; gap: 20px; min-width: 0; align-content: start; } /* before an answer (or after a wrong field): a quiet empty state. Once the answer is drawn the same status line stays for screen readers only (role=status) - the numbers say it to the eye. */ .sf-odabir__stanje { padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); border-radius: var(--sf-r-kartica); background: var(--sf-bg); color: var(--sf-tx2); text-align: center; text-wrap: balance; font: 500 17px/1.45 var(--sf-ff); letter-spacing: -.012em; } .sf-odabir__ishod:has(> .sf-odabir__rezultat:not(:empty)) > .sf-odabir__stanje { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sf-odabir__rezultat { display: grid; gap: 16px; min-width: 0; } .sf-odabir__rezultat:empty { display: none; } /* "Za vas brod": Minn Kota's voice, as the page's own headings */ .sf-odabir__naslov { scroll-margin-top: calc(var(--sf-vrh) + 24px); font: 800 clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem)/.96 var(--sf-ff-mk); font-stretch: 100%; letter-spacing: -.012em; text-transform: uppercase; color: var(--sf-tx); } .sf-odabir__naslov:focus { outline: none; } /* The three numbers: big Saira figures on white tiles, each under Minn Kota's yellow dash; side by side once the answer is wide enough, one under another beside the form. The figure scales with its tile (cqi), never past it. */ .sf-odabir__sazetak { display: grid; gap: 12px; margin: 4px 0 0; } @container (min-width: 620px) { .sf-odabir__sazetak { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .sf-odabir__sazetak > div { container-type: inline-size; display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; border-radius: var(--sf-r-kartica); background: var(--sf-bg); } .sf-odabir__sazetak > div::before { content: ""; justify-self: start; width: 28px; height: 4px; margin-bottom: 6px; border-radius: 2px; background: var(--sf-ak); } .sf-odabir__sazetak dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-odabir__sazetak dd { display: grid; gap: 10px; margin: 0; } .sf-odabir__sazetak b { font: 800 clamp(2rem, 1.6rem + 1.6vw, 3rem)/.95 var(--sf-ff-mk); font-stretch: 100%; font-size: clamp(2rem, 14cqi, 3.5rem); letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--sf-tx); overflow-wrap: break-word; text-wrap: balance; } /* the second unit under the figure (OP-24), in the same face, smaller and quieter */ .sf-odabir__sazetak b small { display: block; margin-top: 6px; font-size: clamp(1.125rem, 7cqi, 1.5rem); font-weight: 700; letter-spacing: -.005em; color: var(--sf-tx2); } .sf-odabir__sazetak span { max-width: 60ch; font: 400 14px/1.45 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } .sf-odabir__podnaslov { margin-top: 16px; font: 650 21px/1.2 var(--sf-ff); letter-spacing: -.018em; color: var(--sf-tx); } .sf-odabir__napomena { max-width: 62ch; font: 400 15px/1.45 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx2); } /* at sea, the note over the motors not built for salt water (OP-31): a tinted tile in the text colour, no rule */ .sf-odabir__upozorenje { max-width: none; padding: 14px 18px; border-radius: var(--sf-r-kartica); background: color-mix(in srgb, var(--sf-ak) 16%, var(--sf-bg)); color: var(--sf-tx); font-weight: 500; } /* "Sonari Humminbird": an Apple link with its chevron */ .sf-odabir__veza a { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1.3 var(--sf-ff); letter-spacing: -.01em; color: var(--sf-tx); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } .sf-odabir__veza a::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg); } /* A motor that fits: the light plate (katalog.css .sf-ploca: white, its own roles), the photograph whole on white (contain, never cropped - PRODUCT-STANDARD 8b), the name an Apple link with its chevron, each variant a row. */ .sf-odabir__motori { display: grid; gap: 12px; } @container (min-width: 720px) { .sf-odabir__motori { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 1080px) { .sf-odabir__motori { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* the products under the form and the summary, the band's full width (assets/odabir.js fills it) */ .sf-odabir__proizvodi { container-type: inline-size; display: grid; gap: 16px; min-width: 0; margin-top: clamp(48px, 6vw, 72px); } .sf-odabir__proizvodi:empty { display: none; } .sf-odabir__proizvodi > .sf-odabir__podnaslov:first-child, .sf-odabir__proizvodi > .sf-odabir__napomena:first-child { margin-top: 0; } .sf-odabir__motori > li { container-type: inline-size; display: grid; min-width: 0; } .sf-odabir__motor { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; } .sf-odabir__motor--bez { grid-template-columns: minmax(0, 1fr); } @container (min-width: 440px) { .sf-odabir__motor { grid-template-columns: 128px minmax(0, 1fr); gap: 20px; padding: 20px; } .sf-odabir__motor--bez { grid-template-columns: minmax(0, 1fr); } } .sf-odabir__slika { display: block; aspect-ratio: 1; } .sf-odabir__slika img { width: 100%; height: 100%; object-fit: contain; } .sf-odabir__tijelo { display: grid; gap: 12px; min-width: 0; align-content: start; } .sf-odabir__naziv { font: 650 19px/1.25 var(--sf-ff); letter-spacing: -.016em; overflow-wrap: break-word; } .sf-odabir__naziv a { color: var(--sf-tx); text-decoration: none; } .sf-odabir__naziv a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: translateY(-.14em) rotate(45deg); } .sf-odabir__naziv a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-odabir__oznake { display: flex; flex-wrap: wrap; gap: 6px; } .sf-odabir__oznake > li { padding: 4px 10px; border-radius: 980px; background: color-mix(in srgb, var(--sf-ak) 22%, var(--sf-bg)); font: 600 12px/1.3 var(--sf-ff); letter-spacing: .01em; color: var(--sf-tx); } .sf-odabir__izvedbe { display: grid; } .sf-odabir__izvedbe > li { display: grid; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--sf-ln); } .sf-odabir__izvedba { font: 600 15px/1.35 var(--sf-ff); letter-spacing: -.008em; overflow-wrap: anywhere; } .sf-odabir__sifra { font: 500 13px/1.35 var(--sf-ff); font-variant-numeric: tabular-nums; color: var(--sf-tx2); } .sf-odabir__izvedbe .sf-odabir__dodaj { margin-top: 6px; } @container (min-width: 540px) { .sf-odabir__izvedbe > li { grid-template-columns: minmax(0, 1fr) auto; } .sf-odabir__izvedbe > li > .sf-odabir__dodaj { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } } /* "Dodaj u upit": Minn Kota's yellow capsule, small (its target 44 px); once on the list (inline.js marks it) it turns white inside a yellow ring, with a tick */ .sf-odabir__dodaj { position: relative; justify-self: start; min-height: 36px; padding: 0 16px; font-size: 15px; } .sf-odabir__dodaj::after { content: ""; position: absolute; inset: -4px 0; } .sf-odabir__dodaj[data-sf-na-popisu], .sf-odabir__dodaj[data-sf-dodano] { background: var(--sf-bg); color: var(--sf-tx); box-shadow: inset 0 0 0 1.5px var(--sf-ak); } .sf-odabir__dodaj[data-sf-na-popisu]::before, .sf-odabir__dodaj[data-sf-dodano]::before { content: ""; flex: none; width: 5px; height: 9px; margin: -2px 2px 0 1px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); } .sf-odabir__cijena { font: 500 14px/1.4 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } .sf-odabir__predaja { margin-top: 8px; } .sf-odabir__predaja .sf-gumb { width: 100%; white-space: normal; } @container (min-width: 480px) { .sf-odabir__predaja .sf-gumb { width: auto; } } /* ===================================================================== 4. the rule, the table, the charts (everyone) */ .sf-odabir__tekst { max-width: 66ch; } .sf-odabir__biljeska { max-width: 62ch; margin-top: 14px; font: 400 14px/1.45 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } /* the thrust: the rule as Minn Kota's big figure on a grey tile with the yellow edge of Oprema's door (left from 1068 px), the table it fills beside it */ .sf-odabir__potisak { display: grid; gap: 40px; align-items: start; } @media (min-width: 1068px) { .sf-odabir__potisak { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } } .sf-odabir__pravilo { position: relative; overflow: clip; display: grid; gap: 16px; align-content: start; padding: clamp(40px, 5vw, 60px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 44px); border-radius: var(--sf-r-plocica); background: var(--sf-bg2); color: var(--sf-tx); } .sf-odabir__pravilo::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sf-ak); } /* the figure's metrics are those of Oprema's yellow helper tile (katalog.css), so the two read as one */ .sf-odabir__pravilo-prije { display: block; font: 600 17px/1.2 var(--sf-ff); letter-spacing: -.012em; } .sf-odabir__pravilo-broj { display: block; font: 900 clamp(5.5rem, 2.5rem + 10vw, 10.5rem)/.82 var(--sf-ff-mk); font-stretch: 100%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .sf-odabir__pravilo-broj small { font-size: .32em; font-weight: 800; letter-spacing: -.01em; } .sf-odabir__pravilo-tekst { display: block; max-width: 24ch; text-wrap: balance; font: 600 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.35 var(--sf-ff); letter-spacing: -.016em; } .sf-odabir__pravilo-kg { display: block; font: 400 15px/1.4 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx2); } /* a table wider than a phone scrolls sideways inside its own box (focusable, so keys can scroll it) */ .sf-odabir__klizac { max-width: 100%; overflow-x: auto; scrollbar-width: thin; } .sf-odabir__klizac:focus-visible { outline: 2px solid var(--sf-fk); outline-offset: 4px; border-radius: 4px; } /* Apple's specification table: thin rules, small grey heads, tabular figures; the thrust it asks for in weight */ .sf-odabir__tablica { width: 100%; border-collapse: collapse; color: var(--sf-tx); font: 400 15px/1.4 var(--sf-ff); letter-spacing: -.008em; font-variant-numeric: tabular-nums; } .sf-odabir__tablica caption { padding-bottom: 14px; text-align: left; font: 650 17px/1.3 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } .sf-odabir__tablica th, .sf-odabir__tablica td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--sf-ln); } .sf-odabir__tablica tr > :last-child { padding-right: 0; } .sf-odabir__tablica thead th { padding-top: 0; vertical-align: bottom; white-space: normal; font: 500 13px/1.3 var(--sf-ff); letter-spacing: -.003em; color: var(--sf-tx2); } .sf-odabir__tablica tbody th { font-weight: 600; } .sf-odabir__potisak .sf-odabir__tablica tbody td:nth-child(3) { font-weight: 650; } /* the second unit under the first (OP-24: cm next to inches, kg next to lb) */ .sf-odabir__druga { display: block; font: 400 13px/1.35 var(--sf-ff); font-weight: 400; color: var(--sf-tx2); } .sf-odabir__model { white-space: normal; color: var(--sf-tx2); } /* voltage and batteries: two grey tiles */ .sf-odabir__napon { margin-top: clamp(56px, 7vw, 96px); } .sf-odabir__h3 { margin-bottom: 12px; } .sf-odabir__naponi { display: grid; gap: 12px; margin-top: 24px; } @media (min-width: 734px) { .sf-odabir__naponi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sf-odabir__naponi > div { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); } .sf-odabir__naponi dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-odabir__naponi dd { margin: 0; font: 600 17px/1.45 var(--sf-ff); letter-spacing: -.012em; font-variant-numeric: tabular-nums; } /* the shaft (grey band): the adders under Minn Kota's yellow dashes, the two charts as white cards, the way on as a white tile, the source beneath it */ .sf-odabir__dodaci { display: grid; gap: 10px; margin-top: 18px; } .sf-odabir__dodaci > li { position: relative; max-width: 62ch; padding-left: 26px; } .sf-odabir__dodaci > li::before { content: ""; position: absolute; left: 0; top: .68em; width: 14px; height: 3px; border-radius: 2px; background: var(--sf-ak); } .sf-odabir__tablice { display: grid; gap: 12px; margin-top: 36px; } @media (min-width: 734px) { .sf-odabir__tablice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } .sf-odabir__osovine { min-width: 0; padding: clamp(20px, 3vw, 28px); border-radius: var(--sf-r-kartica); background: var(--sf-bg); } .sf-odabir__osovine .sf-odabir__tablica tbody tr:last-child > * { border-bottom: 0; } .sf-odabir__dalje { display: grid; justify-items: start; margin-top: clamp(48px, 6vw, 72px); padding: clamp(28px, 4vw, 48px); border-radius: var(--sf-r-plocica); background: var(--sf-bg); } .sf-odabir__dalje .sf-odabir__tekst { font: 600 var(--sf-f-lead)/1.36 var(--sf-ff); letter-spacing: -.018em; color: var(--sf-tx); text-wrap: pretty; } .sf-odabir__dalje .sf-gumbi { margin-top: 24px; } /* a long label ("All Minn Kota trolling motors") wraps inside its capsule rather than past a phone's tile */ .sf-odabir__dalje .sf-gumb { white-space: normal; } /* ===================================================================== 5. motion (brief, optional, never on a keystroke) */ /* a field's edge, a segment's fill and a switch's knob ease into their new state; an error line rises once when a calculation finds it */ @media (prefers-reduced-motion: no-preference) { .sf-odabir__unos { transition: border-color var(--sf-t-micro) var(--sf-ease-out), box-shadow var(--sf-t-micro) var(--sf-ease-out); } .sf-odabir__izbor-tekst { transition: background-color var(--sf-t-micro) var(--sf-ease-out), color var(--sf-t-micro) var(--sf-ease-out), box-shadow var(--sf-t-ui) var(--sf-ease-out), transform var(--sf-t-micro) var(--sf-ease-out); } .sf-odabir__izbor:active > .sf-odabir__izbor-tekst { transform: scale(.98); } .sf-odabir__kvacica > input { transition: background-color var(--sf-t-ui) var(--sf-ease), background-position var(--sf-t-ui) var(--sf-ease), box-shadow var(--sf-t-ui) var(--sf-ease); } .sf-odabir__greska:not([hidden]) { animation: sf-iskoci .3s var(--sf-ease) both; } } /* ===================================================================== 6. forced colours, print */ @media (forced-colors: active) { .sf-odabir__izbori { border: 1px solid CanvasText; } .sf-odabir__izbor-tekst, .sf-odabir__izbor-tekst small { forced-color-adjust: none; background: Canvas; color: CanvasText; } .sf-odabir__izbor > input:checked + .sf-odabir__izbor-tekst, .sf-odabir__izbor > input:checked + .sf-odabir__izbor-tekst small { background: Highlight; color: HighlightText; } .sf-odabir__izbor > input:focus-visible + .sf-odabir__izbor-tekst { outline-color: CanvasText; } /* the drawn switch gives way to the system's own checkbox */ .sf-odabir__kvacica > input { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; background: none; box-shadow: none; border-radius: 0; } .sf-odabir__stanje, .sf-odabir__sazetak > div, .sf-odabir__pravilo, .sf-odabir__naponi > div, .sf-odabir__osovine, .sf-odabir__dalje, .sf-odabir__primjeri-tijelo, .sf-odabir__upozorenje, .sf-odabir__oznake > li { border: 1px solid CanvasText; } } /* paper: the helper is a screen tool; the rule, the table and the charts print (svijet.ts gives paper the house's day roles, so the yellow marks print in ink) */ @media print { .sf-odabir { display: none !important; } .sf-odabir__klizac { overflow: visible; } .sf-odabir__pravilo, .sf-odabir__naponi > div, .sf-odabir__osovine, .sf-odabir__dalje { background: none; box-shadow: inset 0 0 0 1px var(--sf-crta-dan); break-inside: avoid; } .sf-odabir__dalje .sf-gumbi { display: none; } } /* Sport Fishing D.O. - obrasci.css (lane F), design 3 "Plavi bedz" (DIZAJN-3.md, 2026-11-02): EVERY form rule of the site - the three forms on one engine (upit with the basket, servis, projekt) and the field look any page may borrow (the .sf-unos class). Apple's checkout and iOS Settings: ONE grouped panel, numbered steps parted by hairlines, fields with the label above (52 px, 17 px text, 12 px corners), choices as capsules, the basket as an iOS list with steppers, the helper's answers on a card, the message on a receipt, the channels: WhatsApp THE primary (UK-09) - the filled capsule in the badge's cobalt, its glyph in the capsule's own colour (IZ-23) - and Viber, e-mail, SMS, the call and copying as tinted capsules beneath it (UK-08). It reads ONLY the worlds' roles (svijet.ts). All three forms stand in the house (body.sf-svijet-k): white band, cloud panel, white fields, the badge's cobalt on the step numbers, the chosen capsules and the primary button; a form on a navy band (.sf-tamno) takes that band's roles from the same rules. The builder concatenates the parts of SF_CSS (src/lib/sportfishingdo/ctx.ts) into the ONE shipped assets/site.css (inlined in the studio preview). No colour literal: roles, palette keys (SF_BOJE) and color-mix() of them. No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). Motion only under prefers-reduced-motion: no-preference and never on a keystroke; nothing captures wheel, touch or keys; paper keeps the message and drops the controls. Markup: src/lib/sportfishingdo/obrasci.ts; script assets/obrasci.js (its hooks are never styled away here). (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ---------------------------------------------------------------- 0. the lane's own colours The error colour rules a line and marks a field (the words of an error stay in the text colour), 3:1 or more on every ground a form stands on: the catch ink on light grounds (6,0:1 on white, 5,5:1 on cloud), the catch light on dark ones (8,2:1 on black, 6,6:1 on graphite, 5,5:1 on graphite two). Palette keys, picked by the ground; odabir.css reads it too. */ :root, .sf-svijet-k, .sf-svijet-m, .sf-ploca, .sf-svjetlo-k { --sf-o-greska: var(--sf-ulov-tinta); } .sf-tamno, .sf-svijet-d, .sf-svijet-k.sf-tamno, .sf-svijet-m.sf-tamno { --sf-o-greska: var(--sf-ulov-svijetli); } .sf-tamno .sf-ploca, .sf-tamno .sf-svjetlo-k { --sf-o-greska: var(--sf-ulov-tinta); } /* A field's edge: the secondary text mixed into the ground - 3:1 or more on the field and on the panel around it (WCAG 1.4.11; apple.com's checkout draws its fields the same way). Declared where it is read, so it is resolved with the roles of the ground it stands on. */ .sf-obrazac, :where(.sf-unos) { --sf-o-rub: color-mix(in srgb, var(--sf-tx2) 80%, var(--sf-bg)); } /* ---------------------------------------------------------------- 1. without JavaScript The message cannot compose itself: the steps and the preview's text step aside; what stays is the band's head, the sentence saying what to write and the bare channel links (IZGRADNJA 9), on one card. */ html:not(.sf-js) .sf-obrazac .sf-forma, html:not(.sf-js) .sf-obrazac .sf-poruka, html:not(.sf-js) .sf-obrazac .sf-pregled__nas { display: none; } html:not(.sf-js) .sf-upit__mreza { display: block; } html:not(.sf-js) .sf-upit__mreza > .sf-pregled { position: static; max-width: 40rem; } /* ---------------------------------------------------------------- 2. the band, the panel */ /* on upit/ the band follows the page head directly: no second band's worth of air between them */ .sf-glava + .sf-obrazac { --sf-pt: 0px; } .sf-upit__kop { margin-bottom: clamp(32px, 4vw, 56px); } .sf-upit__kop .sf-lead { margin-top: 16px; } .sf-upit__kop .sf-caption { margin-top: 12px; } /* ONE grouped panel (Apple's grouped background, the tile's radius): the steps on it and, from 1068 px, the receipt beside them, held in view while the visitor writes (sticky under the frame; it follows the native scroll) */ .sf-upit__mreza { display: grid; gap: 28px; min-width: 0; padding: clamp(16px, 4vw, 48px); border-radius: var(--sf-r-plocica); background: var(--sf-bg2); color: var(--sf-tx); } @media (min-width: 1068px) { .sf-upit__mreza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 4vw, 64px); align-items: start; } .sf-upit__mreza > .sf-pregled { position: sticky; top: calc(var(--sf-vrh) + 24px); } } /* ---------------------------------------------------------------- 3. the numbered steps The number is a counter, so a step that is hidden (the basket without JavaScript) does not count; it stands in a small filled circle before the step's title. The steps are parted by hairlines. A legend floats, so it is an ordinary block: no notch in the hairline, the same spacing as a label. */ .sf-forma { display: grid; min-width: 0; counter-reset: sf-korak; container-type: inline-size; } .sf-forma > .sf-korak { counter-increment: sf-korak; min-width: 0; margin: 0; padding: 28px 0; border: 0; } .sf-forma > .sf-korak:first-child { padding-top: 0; } .sf-forma > .sf-korak:last-child { padding-bottom: 0; } .sf-forma > .sf-korak + .sf-korak { border-top: 1px solid var(--sf-ln); } .sf-forma fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .sf-forma legend { float: left; width: 100%; padding: 0; } .sf-forma legend + * { clear: left; } .sf-korak > .sf-oznaka { position: relative; display: block; min-height: 26px; margin: 0 0 16px; padding: 0 0 0 40px; font: 650 19px/1.3 var(--sf-ff); letter-spacing: -.016em; color: var(--sf-tx); } .sf-polje-forme.sf-korak > .sf-oznaka:not(legend) { margin-bottom: 8px; } .sf-korak > .sf-oznaka::before { content: counter(sf-korak); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sf-ak); color: var(--sf-ak-tx); font: 700 13px/1 var(--sf-ff); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* "po zelji", "moze vise odgovora": Apple's grey "optional" */ .sf-oznaka__neobv { font-weight: 400; letter-spacing: -.01em; color: var(--sf-tx2); } /* ---------------------------------------------------------------- 4. fields Apple's field: the label above, a box 52 px tall, 17 px text, 12 px corners, its edge 3:1 on every ground; the focus darkens the edge to the text colour and lays a soft ring around it (a transparent outline shows in forced colours). Another page may borrow the look: the base weighs nothing (:where), so a lane's own class refines it. */ .sf-polje-forme { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } fieldset.sf-polje-forme { display: block; } :where(.sf-unos) { display: block; width: 100%; min-height: 52px; margin: 0; padding: 14px 16px; border: 1px solid var(--sf-o-rub); border-radius: var(--sf-r); background: var(--sf-bg); color: var(--sf-tx); font: 400 17px/1.35 var(--sf-ff); letter-spacing: -.013em; } :where(textarea.sf-unos) { min-height: 140px; resize: vertical; line-height: 1.47; } :where(.sf-unos)::placeholder { color: var(--sf-tx2); opacity: 1; } :where(.sf-unos):focus { outline: 2px solid transparent; outline-offset: 2px; border-radius: var(--sf-r); border-color: var(--sf-tx); box-shadow: 0 0 0 1px var(--sf-tx), 0 0 0 5px color-mix(in srgb, var(--sf-tx) 12%, transparent); } /* every field at 16 px or more, so no phone zooms on focus */ .sf-forma .sf-unos { font-size: 17px; } /* a field's own label inside a step, its hint beneath it */ .sf-oznaka--polje { display: block; padding: 0; font: 600 14px/1.3 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx); } .sf-polje-forme > .sf-caption, .sf-obrazac__pomoc { max-width: 60ch; font: 400 14px/1.43 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } /* short fields side by side once the form is wide enough: length and weight, phone and e-mail */ .sf-polja-par { display: grid; gap: 20px 16px; min-width: 0; } @container (min-width: 480px) { .sf-polja-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } @supports not (container-type: inline-size) { @media (min-width: 560px) { .sf-polja-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } } /* the blocks of a step with several fields */ .sf-skupina > :not(legend) + * { margin-top: 20px; } .sf-skupina > .sf-obrazac__pomoc { margin-top: 10px; } /* the person's step (always the last, UK-06): the hint that nothing is required stands right under its title */ .sf-skupina--podaci > .sf-obrazac__pomoc { margin: -6px 0 0; } .sf-skupina--podaci > .sf-obrazac__pomoc + * { margin-top: 18px; } .sf-tipke + .sf-greska, .sf-greska + .sf-greska { margin-top: 10px; } /* An error: its words in the text colour, ruled and tinted in the error colour, after a drawn mark (a bar and a dot in a circle - drawn, so no screen reader reads a glyph); the block it names takes the colour on its edge. */ .sf-greska { display: flex; align-items: flex-start; gap: 10px; max-width: 40rem; padding: 10px 14px; border-left: 3px solid var(--sf-o-greska); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--sf-o-greska) 9%, var(--sf-bg)); color: var(--sf-tx); font: 500 15px/1.4 var(--sf-ff); letter-spacing: -.008em; } .sf-greska::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background-color: var(--sf-o-greska); background-image: linear-gradient(var(--sf-bg), var(--sf-bg)), radial-gradient(circle, var(--sf-bg) 0 1.2px, transparent 1.7px); background-repeat: no-repeat; background-size: 2px 6px, 4px 4px; background-position: 50% 4px, 50% 12px; } .sf-polje-forme.is-greska .sf-unos { border-color: var(--sf-o-greska); box-shadow: 0 0 0 1px var(--sf-o-greska); } .sf-polje-forme.is-greska .sf-unos:focus { box-shadow: 0 0 0 1px var(--sf-o-greska), 0 0 0 5px color-mix(in srgb, var(--sf-o-greska) 18%, transparent); } .sf-polje-forme.is-greska .sf-tipka > input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--sf-o-greska); } /* ---------------------------------------------------------------- 5. choices: capsules One answer (a radio) or several (a checkbox): Apple's capsules, 44 px tall, white with a hairline; the chosen one filled with the page's accent (the badge's cobalt in the house). The real control lies over its capsule (keys, screen readers, the focus ring drawn on the capsule). Several-at-once capsules carry a plus that turns into a tick, so the two kinds never look alike. */ .sf-tipke { display: flex; flex-wrap: wrap; gap: 8px; } .sf-tipka { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; } .sf-tipka > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sf-tipka > span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 980px; background: var(--sf-bg); color: var(--sf-tx); box-shadow: inset 0 0 0 1px var(--sf-ln); font: 500 16px/1.25 var(--sf-ff); letter-spacing: -.011em; } .sf-tipka > input:checked + span { background: var(--sf-ak); color: var(--sf-ak-tx); box-shadow: inset 0 0 0 1px var(--sf-ak); } .sf-tipka > input:focus-visible + span { outline: 2px solid var(--sf-fk); outline-offset: 2px; } @media (hover: hover) { .sf-tipka:hover > input:not(:checked) + span { background: color-mix(in srgb, var(--sf-tx) 6%, var(--sf-bg)); } } .sf-tipka--vise > span::before { content: ""; flex: none; width: 12px; height: 12px; margin-right: 8px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 1.75px, 1.75px 100%; } .sf-tipka--vise > input:checked + span::before { width: 6px; height: 11px; margin: -3px 11px 0 3px; background: none; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); } /* ---------------------------------------------------------------- 6. the helper's answers ("Koji motor mi treba?") A white card on the panel: its title in the secondary text, the answers in the text colour, one line that wraps between them (" . "), then "Uklonite odgovore". */ .sf-iz-odabira { display: grid; gap: 6px; justify-items: start; padding: 18px 18px 6px; border-radius: var(--sf-r-okvir); background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-iz-odabira__nas { font: 600 14px/1.35 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } .sf-iz-odabira__tekst { font: 600 17px/1.4 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } /* "Uklonite" (a row of the basket, the helper's choice): Apple's text button, grey until hovered, 44 px tall */ .sf-iz-odabira__ukloni, .sf-stavka__ukloni { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: var(--sf-tx2); cursor: pointer; font: 500 15px/1.3 var(--sf-ff); letter-spacing: -.008em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .sf-iz-odabira__ukloni:hover, .sf-stavka__ukloni:hover { color: var(--sf-tx); text-decoration-color: currentColor; } /* ---------------------------------------------------------------- 7. the basket ("Popis za upit") iOS's grouped list: white rows on the panel, hairlines inset from the leading edge; each row the product, its variant and part number, a stepper and "Uklonite" - on one line once the form is wide enough. */ .sf-popis-upit [data-sf-popis-naslov]:focus:not(:focus-visible) { outline: none; } .sf-stavke { display: grid; border-radius: var(--sf-r-okvir); background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--sf-ln); } .sf-stavke:empty { display: none; } .sf-stavka { position: relative; display: grid; align-items: center; gap: 10px 16px; padding: 14px 16px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tekst tekst" "kolicina ukloni"; } .sf-stavka + .sf-stavka::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sf-ln); } .sf-stavka__tekst { grid-area: tekst; min-width: 0; } .sf-stavka .sf-kolicina { grid-area: kolicina; } .sf-stavka .sf-stavka__ukloni { grid-area: ukloni; justify-self: end; } @container (min-width: 520px) { .sf-stavka { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tekst kolicina ukloni"; } } .sf-stavka__ime { font: 600 17px/1.35 var(--sf-ff); letter-spacing: -.012em; overflow-wrap: break-word; } .sf-stavka__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; font: 400 14px/1.45 var(--sf-ff); letter-spacing: -.006em; font-variant-numeric: tabular-nums; color: var(--sf-tx2); } /* the stepper (iOS): one tinted capsule, minus and plus at its ends, the count between; the signs are drawn */ .sf-kolicina { display: inline-grid; grid-template-columns: 44px minmax(2.5ch, auto) 44px; align-items: center; height: 44px; border-radius: 980px; background: color-mix(in srgb, var(--sf-tx) 7%, var(--sf-bg)); } .sf-kolicina__broj { padding: 0 2px; text-align: center; font: 600 17px/1 var(--sf-ff); font-variant-numeric: tabular-nums; } .sf-kolicina__gumb { width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 980px; cursor: pointer; color: var(--sf-tx); background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 50% 50%; background-size: 14px 2px; } .sf-kolicina__gumb--vise { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 14px 2px, 2px 14px; } .sf-kolicina__gumb:disabled { opacity: .3; cursor: default; } @media (hover: hover) { .sf-kolicina__gumb:not(:disabled):hover { background-color: color-mix(in srgb, var(--sf-tx) 9%, transparent); } } .sf-popis-upit > .sf-caption { max-width: 60ch; font: 400 15px/1.45 var(--sf-ff); letter-spacing: -.008em; color: var(--sf-tx2); } .sf-popis-upit > .sf-caption .sf-link { display: inline; min-height: 0; font: inherit; font-weight: 600; color: var(--sf-tx); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-popis-upit__dno .sf-gumb { position: relative; min-height: 36px; padding: 0 16px; font-size: 15px; } .sf-popis-upit__dno .sf-gumb::after { content: ""; position: absolute; inset: -4px 0; } /* ---------------------------------------------------------------- 8. the receipt: the preview, the status line The message as the visitor will send it, on a card like a receipt: its first line set as the heading, the lines between dashed rules, the code last; the status line under it says what is missing or that it is ready. */ .sf-pregled { display: grid; gap: 16px; align-content: start; min-width: 0; container-type: inline-size; padding: clamp(20px, 3vw, 28px); border-radius: var(--sf-r-kartica); background: var(--sf-bg); color: var(--sf-tx); box-shadow: inset 0 0 0 1px var(--sf-ln), 0 18px 40px -28px var(--sf-sjena-jaka); } .sf-pregled__nas { font: 650 19px/1.3 var(--sf-ff); letter-spacing: -.016em; } .sf-poruka { margin: 0; padding: 16px 0; border-block: 1px dashed color-mix(in srgb, var(--sf-tx) 24%, transparent); font: 400 15px/1.6 var(--sf-ff); letter-spacing: -.006em; font-variant-numeric: tabular-nums; color: var(--sf-tx); white-space: pre-wrap; overflow-wrap: anywhere; } .sf-poruka::first-line { font-weight: 600; } .sf-pregled .sf-napomena { font: 400 14px/1.45 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx2); } .sf-napomena a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } /* ---------------------------------------------------------------- 9. the channels WhatsApp THE primary (UK-09): ONE filled capsule across the card in the page's accent, its glyph drawn in the capsule's own colour (IZ-23: never WhatsApp's green). Beneath it, in the order of UK-08, tinted capsules - Viber (it copies the message, then opens the chat), e-mail, SMS, the call, copying. On a narrow card Viber, e-mail and SMS stand as three equal tiles, the glyph above the word, and the call (with its number) and copying take a row each; where the card is wide they are capsules wrapping in one line. Without JavaScript a caption says that Viber opens without text. */ .sf-kanali { display: grid; gap: 12px; } .sf-pregled__pod { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-kanali__glavni { display: grid; gap: 10px; } .sf-kanali__glavni .sf-gumb { width: 100%; white-space: normal; } .sf-kanal-glavni .sf-kanal__ikona { width: 22px; height: 22px; } .sf-kanali__ostali { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .sf-kanal { grid-column: span 6; padding: 0 16px 0 14px; font-size: 15px; font-weight: 500; white-space: normal; background: color-mix(in srgb, var(--sf-tx) 7%, transparent); color: var(--sf-tx); } .sf-kanali__ostali > :is([data-sf-send="viber"], [data-sf-send="mail"], [data-sf-send="sms"]) { grid-column: span 2; flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 6px; border-radius: var(--sf-r-kartica); font-size: 14px; } @container (min-width: 420px) { .sf-kanali__ostali { display: flex; flex-wrap: wrap; } .sf-kanali__ostali > :is([data-sf-send="viber"], [data-sf-send="mail"], [data-sf-send="sms"]) { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 980px; font-size: 15px; } } @media (hover: hover) { .sf-kanal:hover { background: color-mix(in srgb, var(--sf-tx) 12%, transparent); } } .sf-kanal__ikona { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sf-kanal .sf-kanal__ikona { width: 18px; height: 18px; } .sf-kanal__ikona .sf-ikona__puno { fill: currentColor; stroke: none; } html.sf-js .sf-kanali__bez-js { display: none; } .sf-kanali__bez-js { font: 400 13px/1.45 var(--sf-ff); color: var(--sf-tx2); } /* ---------------------------------------------------------------- 10. staging, the walk-through, privacy */ .sf-obrazac__staging { padding: 8px 0 8px 12px; border-left: 3px solid var(--sf-o-greska); font: 400 14px/1.45 var(--sf-ff); color: var(--sf-tx); } .sf-pregled > .sf-caption { font: 400 13px/1.45 var(--sf-ff); letter-spacing: -.004em; color: var(--sf-tx2); } .sf-upit__privatnost a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } /* ---------------------------------------------------------------- 11. motion (brief, optional, never on a keystroke) A field's edge and a capsule's fill ease into their new state, a pressed capsule gives a little; an error line rises once when a send finds it, the helper's choice once when the address brings it. */ @media (prefers-reduced-motion: no-preference) { :where(.sf-unos) { transition: border-color var(--sf-t-micro) var(--sf-ease-out), box-shadow var(--sf-t-micro) var(--sf-ease-out); } .sf-tipka > span, .sf-kolicina__gumb, .sf-kanal { transition: background-color var(--sf-t-micro) var(--sf-ease-out), color var(--sf-t-micro) var(--sf-ease-out), box-shadow var(--sf-t-micro) var(--sf-ease-out), transform var(--sf-t-micro) var(--sf-ease-out); } .sf-tipka:active > span, .sf-kolicina__gumb:not(:disabled):active { transform: scale(.96); } .sf-greska:not([hidden]), .sf-iz-odabira:not([hidden]) { animation: sf-iskoci .3s var(--sf-ease) both; } } /* ---------------------------------------------------------------- 12. forced colours, print */ @media (forced-colors: active) { .sf-upit__mreza, .sf-pregled, .sf-stavke, .sf-iz-odabira, .sf-kolicina { border: 1px solid CanvasText; } .sf-korak > .sf-oznaka::before { forced-color-adjust: none; background: CanvasText; color: Canvas; } .sf-tipka > span { forced-color-adjust: none; background: Canvas; color: CanvasText; box-shadow: inset 0 0 0 1px CanvasText; } .sf-tipka > input:checked + span { background: Highlight; color: HighlightText; box-shadow: none; } .sf-tipka > input:focus-visible + span { outline-color: CanvasText; } .sf-kolicina__gumb { forced-color-adjust: none; background-color: Canvas; color: ButtonText; } .sf-kolicina__gumb:disabled { color: GrayText; } } /* paper: the band's head and the message, not the controls (site.css also drops the channels and the privacy line) */ @media print { .sf-obrazac .sf-forma, .sf-obrazac [data-sf-stanje], .sf-obrazac__staging { display: none !important; } .sf-upit__mreza { display: block; padding: 0; background: none; } .sf-pregled { padding: 0; box-shadow: none; background: none; } } /* Sport Fishing D.O. - odjeli.css (lane S), design 3 "Plavi bedz" (docs/HANDOFFS/sportfishingdo/DIZAJN-3.md, IZGRADNJA-3 section 5.5, 2026-11-02): the section pages S Servis and MD M&D Elektroinstalacije, both in THE HOUSE (body.sf-svijet-k: white and cloud, the badge's cobalt as the accent, its dark band the navy mornar - never black). The builder concatenates the parts of SF_CSS (src/lib/sportfishingdo/ctx.ts) into the ONE shipped assets/site.css. v2's sheet (the stacking cards, the black M&D page and its roof reveal) is archived in _archive/sportfishingdo-v2-2026-11-02/src/components/sportfishingdo/assets/css/odjeli.css. No colour literal: only the world's roles (--sf-bg ... --sf-fk, written by svijet.ts and checked for contrast) and the palette (SF_BOJE as --sf-), through var() and color-mix(). No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). PHOTOGRAPHS (DIZAJN-3 section 7) are always whole at their own ratio - never cover, never cropped, never darkened, never written on; a portrait and a landscape stand side by side at one height by giving each its ratio (--ar, written inline) as its share of the row, never a fixed frame with bars at its sides. Motion only inside prefers-reduced-motion: no-preference (site.css's .sf-ulaz, .sf-pojava, .sf-pojava-niz, .sf-pojava-foto follow the native scroll); nothing captures the wheel, touch or keys, and print shows none of it. Markup: src/lib/sportfishingdo/stranice/{servis,elektro}.ts. Split 2026-11-02 (IZGRADNJA-3 section 6): D Dejan (old section 4) is css/dejan.css; kontakt, impresum, privatnost and the 404 (old sections 5-7) are css/zajednicko.css. The integrator pruned section 1 (demo 1's shared blocks: chips, profile tiles, the impressum's rows - zajednicko.css carries them now -, job sheets, his video cards, the most watched, the channel's numbers, partners, competitions and press, places) once no page printed them; its copy is in the archive above. Layers: 2. S Servis the opening, "Kljuc u ruke", the cards, what else, where, how, our work, stories 3. MD M&D the opening with the real mark, the service plates 8. motion 9. forced colours, print (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 2. S Servis (the house) */ /* the badge's ring: a circle with a dot, the shape of the badge's rings (DIZAJN-3 section 3) - a list's mark, a status line's mark, a plate's mark. Decorative (aria-hidden). */ .sf-sv-prsten { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sf-polje); background: radial-gradient(circle, var(--sf-polje) 0 3px, transparent 3.5px); } .sf-tamno .sf-sv-prsten { border-color: var(--sf-tx); background: radial-gradient(circle, var(--sf-tx) 0 3px, transparent 3.5px); } /* a list with the badge's small dots, in columns where a card is wide enough */ .sf-sv-popis { display: grid; gap: 8px 24px; } .sf-sv-popis > li { position: relative; padding-left: 20px; } .sf-sv-popis > li::before { content: ""; position: absolute; left: 2px; top: calc(.735em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sf-polje); } .sf-tamno .sf-sv-popis > li::before { background: var(--sf-tx); } /* a photograph's own frame: rounded, whole at its ratio (no aspect-ratio, no object-fit: the picture's height is its own) */ .sf-sv-slika { overflow: clip; border-radius: var(--sf-r-plocica); } /* 2a. the opening: the words and the portrait photograph beside them (under them on a phone); her three lines in three tones - graphite, the badge's cobalt, the secondary grey */ .sf-sv-heroj { --sf-pb: clamp(56px, 7vw, 104px); } .sf-sv-heroj__mreza { display: grid; gap: clamp(36px, 6vw, 72px); } .sf-sv-heroj__tekst { min-width: 0; } .sf-sv-heroj .sf-h1 { max-width: 12ch; font-size: var(--sf-f-hero); line-height: 1.02; letter-spacing: -.04em; } .sf-sv-tri { display: grid; justify-items: start; gap: 2px; margin-top: clamp(20px, 2.4vw, 32px); font: 700 clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem)/1.12 var(--sf-ff); letter-spacing: -.028em; } .sf-sv-tri > span:nth-child(2) { color: var(--sf-polje); } .sf-sv-tri > span:nth-child(3) { color: var(--sf-tx2); } .sf-sv-heroj .sf-lead { max-width: 38ch; margin-top: clamp(20px, 2.4vw, 28px); } .sf-sv-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 18px 8px 10px; border-radius: 980px; background: color-mix(in srgb, var(--sf-polje) 9%, var(--sf-bg)); font: 600 15px/1.3 var(--sf-ff); letter-spacing: -.006em; color: var(--sf-tx); } .sf-sv-heroj .sf-gumbi { margin-top: 28px; } .sf-sv-heroj__foto { min-width: 0; width: 100%; max-width: 440px; } .sf-sv-heroj__foto > .sf-pv { margin-top: 10px; } @media (min-width: 900px) { .sf-sv-heroj__mreza { grid-template-columns: minmax(0, 1fr) minmax(0, min(34vw, 400px)); align-items: center; column-gap: clamp(48px, 6vw, 96px); } .sf-sv-heroj__mreza--bez { grid-template-columns: minmax(0, 1fr); } .sf-sv-heroj__foto { justify-self: end; } } /* 2b. "Kljuc u ruke", made striking (Dejan, 3. 11. 2026.: "Kljuc u ruke da bude upecatljiviji"; the model is their own advert, Handoffs/.../19.10/...11.26.26 (4).jpeg): the navy band (.sf-tamno, the house's dark). The H2 "KLJUC U RUKE" in Minn Kota's face and yellow - Saira at its heaviest and widest (wght 900, wdth 125: the SERVIS wordmark's instance), mkZuta on the navy mornar 9,2:1 - at the page H1's size; their line "Ja radim, Vi plovite." large and white under it; the lede; the two makers' marks in their official colour reverse (yellow icon, white word); four plates of deeper navy, each ticked with a drawn yellow check; at the foot their closing line, its dots yellow, and a yellow capsule to the enquiry - the Minn Kota world's primary action (yellow, black label, the hover only motion). The band starts 24 px higher than the others: the H2's own box holds the caron's room above its capitals. */ .sf-sv-kljuc { --sf-pt: calc(var(--sf-py) - 24px); } .sf-sv-kljuc__glava { display: grid; justify-items: start; } /* the caron of C (U+010C) stands about a third of an em above Saira's capitals: the padding keeps it inside the heading's own box, and nothing here clips (KLJUC is the first word, so no line above can meet it). Fluid with the page H1 (--sf-f-hero, 44 px on a 320 px phone): the longest word, TURNKEY, is 5,33 em - 235 px of the phone's 288. */ .sf-sv-kljuc .sf-sv-kljuc__naslov { padding-top: .18em; font: 900 var(--sf-f-hero)/1.02 var(--sf-ff-mk); font-stretch: 125%; letter-spacing: 0; text-transform: uppercase; color: var(--sf-mk-zuta); } .sf-sv-kljuc__geslo { margin-top: clamp(12px, 1.6vw, 20px); font: 700 var(--sf-f-h2)/1.06 var(--sf-ff); letter-spacing: -.03em; text-wrap: balance; color: var(--sf-tx); } .sf-sv-kljuc .sf-lead { margin-top: clamp(16px, 2vw, 24px); max-width: 44ch; } /* the marks at ONE scale (the makers' pairing rule, assets/brand/IZVOR.md): Minn Kota 57.639 units high, Humminbird 52.385, so the two icons are equally wide - Minn Kota 32 px (204 px wide), Humminbird 29,08 px (221 px wide). On a phone stacked and centred on each other; side by side from 734 px with the words' bottoms on one line: Humminbird's word ends 0.353 units above its foot, Minn Kota's 15.104 above its icon's point, so Humminbird stands 14.751 units higher. Paper prints the colour copies (section 9). */ .sf-sv-kljuc__znakovi { --sf-sv-znak-h: 32px; display: grid; justify-items: center; gap: 20px; max-width: 100%; margin-top: clamp(28px, 3.6vw, 44px); } .sf-sv-znak { display: block; width: auto; height: var(--sf-sv-znak-h); } .sf-sv-znak.sf-logo--humminbird { height: calc(var(--sf-sv-znak-h) * 52.385 / 57.639); } .sf-sv-znak--papir { display: none; } @media (min-width: 734px) { .sf-sv-kljuc__znakovi { display: flex; align-items: flex-end; gap: 48px; } .sf-sv-znak.sf-logo--humminbird { margin-bottom: calc(var(--sf-sv-znak-h) * 14.751 / 57.639); } } .sf-sv-kljuc__stavke { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 64px); } @media (min-width: 734px) { .sf-sv-kljuc__stavke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1068px) { .sf-sv-kljuc__stavke { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sf-sv-kljuc__stavka { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 24px 24px 28px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); box-shadow: inset 0 0 0 1px var(--sf-ln); } /* a plate's tick: a drawn check in Minn Kota's yellow (aria-hidden; 7,6:1 on the plate), as their advert ticks a list */ .sf-sv-kljuc__kvacica { width: 28px; height: 28px; margin-bottom: 4px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; color: var(--sf-mk-zuta); } .sf-sv-kljuc__stavka h3 { font: 700 19px/1.25 var(--sf-ff); letter-spacing: -.016em; text-wrap: balance; overflow-wrap: anywhere; } .sf-sv-kljuc__stavka p { color: var(--sf-tx2); font-size: 16px; line-height: 1.45; } /* the foot: their closing line on the left, the capsule on the right (stacked on a phone) */ .sf-sv-kljuc__dno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(36px, 4.6vw, 56px); } .sf-sv-kljuc__potpis { font: 700 14px/1.5 var(--sf-ff); letter-spacing: .16em; text-transform: uppercase; text-wrap: balance; color: var(--sf-tx); } .sf-sv-kljuc__tocka { color: var(--sf-mk-zuta); } /* the capsule takes the Minn Kota world's primary-action roles (svijet.ts mDan / mNoc: yellow, a black label, the same on hover; checked there, 12,1:1); site.css's .sf-gumb--polje draws it, and its hover is a lift and a sliding chevron */ .sf-sv-kljuc__gumb { --sf-ak: var(--sf-mk-zuta); --sf-ak-tx: var(--sf-crna); --sf-ak-h: var(--sf-mk-zuta); --sf-ak-h-tx: var(--sf-crna); font-weight: 700; } /* 2c. the four cards on the cloud: white, the photograph flush on top and whole, then the mark or heading, her sentence, the list, the link at the foot. A row of two is JUSTIFIED: each card grows by its photograph's ratio (--ar), so the two photographs end equally tall and neither is cut; a portrait's card is the narrow one. */ .sf-sv-kartice { display: grid; gap: 16px; } .sf-sv-red { display: flex; flex-direction: column; gap: 16px; } .sf-sv-kartica { --ar: 1.6; display: flex; flex-direction: column; min-width: 0; overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); box-shadow: 0 1px 2px color-mix(in srgb, var(--sf-crna) 6%, transparent); scroll-margin-top: calc(var(--sf-vrh, 0px) + 20px); } /* a portrait on a phone: its card never taller than about three quarters of the screen (a narrow column, IZ-15) */ .sf-sv-kartica[data-sf-omjer="uspravna"] { width: 100%; max-width: min(100%, calc(var(--ar) * 72svh)); margin-inline: auto; } .sf-sv-kartica__foto { flex: none; } .sf-sv-kartica__tipo { flex: none; display: grid; align-items: end; aspect-ratio: 16 / 10; padding: clamp(20px, 3vw, 32px); background: var(--sf-bg2); color: var(--sf-tx2); font: 800 clamp(2rem, 1.3rem + 3vw, 3.25rem)/.95 var(--sf-ff); letter-spacing: -.035em; overflow-wrap: anywhere; } .sf-sv-kartica__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 1 auto; padding: clamp(24px, 3vw, 36px); } .sf-sv-kartica__tekst > .sf-pv { align-self: stretch; } .sf-sv-kartica__naslov { font: 700 var(--sf-f-h3)/1.15 var(--sf-ff); letter-spacing: -.022em; text-wrap: balance; } .sf-sv-kartica__naslov--znak { line-height: 0; padding-block: 4px 2px; } .sf-sv-kartica__znak { display: block; } .sf-sv-kartica__p { max-width: 40ch; font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.4 var(--sf-ff); letter-spacing: -.014em; color: var(--sf-tx2); text-wrap: pretty; } .sf-sv-kartica .sf-sv-popis { align-self: stretch; } .sf-sv-kartica__dno { margin-top: auto; } .sf-sv-usluge .sf-dalje { margin-top: 24px; } @media (min-width: 734px) { .sf-sv-kartice, .sf-sv-red { gap: 20px; } .sf-sv-red { flex-direction: row; align-items: stretch; } .sf-sv-red > .sf-sv-kartica { flex: var(--ar) 1 0%; width: auto; max-width: none; margin-inline: 0; } /* a long list in a wide card takes two columns */ .sf-sv-kartica .sf-sv-popis--siroko { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); } } /* 2d. "Sto jos radim": four plates on white, the badge's ring beside the words */ .sf-sv-jos { display: grid; gap: 12px; } @media (min-width: 734px) { .sf-sv-jos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1068px) { .sf-sv-jos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sf-sv-jos > li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 22px 24px 24px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); font: 600 18px/1.35 var(--sf-ff); letter-spacing: -.014em; text-wrap: balance; } .sf-sv-jos > li > .sf-sv-prsten { margin-top: 2px; } /* 2e. "Gdje i za koga": three white plates on the cloud, then the navy plate for an urgent fault with its capsule */ .sf-sv-gdje { display: grid; gap: 12px; } @media (min-width: 734px) { .sf-sv-gdje { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1068px) { .sf-sv-gdje { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sf-sv-gdje__stup { display: grid; align-content: start; gap: 16px; min-width: 0; padding: clamp(24px, 3vw, 32px); border-radius: var(--sf-r-plocica); background: var(--sf-bg); } .sf-sv-gdje__p { max-width: 32ch; font: 600 clamp(1.125rem, 1.05rem + .3vw, 1.3125rem)/1.4 var(--sf-ff); letter-spacing: -.014em; text-wrap: pretty; } .sf-sv-hitno { display: grid; gap: 20px; align-items: center; margin-top: 16px; padding: clamp(28px, 4vw, 44px); border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); } .sf-sv-hitno__tekst { display: grid; gap: 8px; } .sf-sv-hitno__tekst p { color: var(--sf-tx2); } .sf-sv-hitno__gumb .sf-gumb { font-variant-numeric: tabular-nums; } @media (min-width: 734px) { .sf-sv-hitno { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; } } /* 2f. "Kako radim": the steps numbered in the badge's ring (a CSS counter), the warranty plate in a whisper of cobalt */ .sf-sv-kako { display: grid; gap: 16px; } @media (min-width: 1068px) { .sf-sv-kako { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 20px; } } .sf-sv-koraci { display: grid; gap: 12px; counter-reset: sf-korak; } @media (min-width: 734px) { .sf-sv-koraci { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sf-sv-koraci > li { counter-increment: sf-korak; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; padding: 16px 22px 16px 16px; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); font: 600 17px/1.4 var(--sf-ff); letter-spacing: -.012em; text-wrap: pretty; } .sf-sv-koraci > li::before { content: counter(sf-korak); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sf-polje); color: var(--sf-polje); font: 700 17px/1 var(--sf-ff); font-variant-numeric: tabular-nums; } .sf-sv-jamstvo { display: grid; gap: 16px; padding: clamp(24px, 3vw, 32px); border-radius: var(--sf-r-plocica); background: color-mix(in srgb, var(--sf-polje) 8%, var(--sf-bg)); } .sf-sv-jamstvo .sf-sv-popis > li { font-weight: 600; } /* 2g. "Nasi radovi": white cards on the cloud in columns (one, two from 734 px, three from 1068 px), each card as tall as its own photograph makes it - the photograph flush on top and whole (it opens in the viewer), then the date, the title, what was done, the equipment as capsules that link to the catalogue, the video */ .sf-sv-radovi { columns: 1; column-gap: 20px; } @media (min-width: 734px) { .sf-sv-radovi { columns: 2; } } @media (min-width: 1068px) { .sf-sv-radovi { columns: 3; } } .sf-sv-radovi > li { display: block; margin-bottom: 20px; break-inside: avoid; } .sf-sv-rad { display: flex; flex-direction: column; overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); box-shadow: 0 1px 2px color-mix(in srgb, var(--sf-crna) 6%, transparent); scroll-margin-top: calc(var(--sf-vrh, 0px) + 20px); } .sf-sv-rad__foto { display: block; overflow: clip; } .sf-sv-rad__foto > picture { display: block; } .sf-sv-rad__tekst { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 22px 26px 26px; } .sf-sv-rad__naslov { overflow-wrap: anywhere; } .sf-sv-rad__p { color: var(--sf-tx2); } .sf-sv-rad__polja { display: grid; border-top: 1px solid var(--sf-ln); } .sf-sv-rad__polja > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--sf-ln); } .sf-sv-rad__polja dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-tx2); } .sf-sv-rad__polja dd { margin: 0; } .sf-sv-rad__oprema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sf-sv-rad__oznaka { margin-right: 4px; font: 600 12px/1.3 var(--sf-ff); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-tx2); } .sf-sv-cip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 980px; background: color-mix(in srgb, var(--sf-polje) 9%, var(--sf-bg)); color: var(--sf-polje); font: 600 15px/1.2 var(--sf-ff); letter-spacing: -.006em; text-decoration: none; } .sf-sv-cip:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-sv-rad__video .sf-veza { min-height: 44px; } /* 2h. customers' stories (the slot renders only once a story exists) */ .sf-sv-iskustva { display: grid; gap: 16px; } @media (min-width: 734px) { .sf-sv-iskustva { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sf-sv-iskustvo { display: grid; gap: 12px; padding: clamp(24px, 3vw, 32px); border-radius: var(--sf-r-plocica); background: var(--sf-bg2); } .sf-sv-iskustvo blockquote { margin: 0; font: 600 clamp(1.125rem, 1.05rem + .3vw, 1.3125rem)/1.45 var(--sf-ff); letter-spacing: -.014em; } /* ===================================================================== 3. MD M&D Elektroinstalacije (the house, light, modest) */ /* 3a. the opening, centred: the real mark in graphite (its own ratio 1458 x 1202,7), the H1, her line, the capsule */ .sf-md-heroj { --sf-pb: clamp(56px, 7vw, 104px); text-align: center; } .sf-md-heroj .sf-putanja ol { justify-content: center; } .sf-md-heroj__znak { display: flex; justify-content: center; margin: 4px 0 clamp(24px, 3vw, 36px); } .sf-md-znak { display: block; width: min(200px, 48vw); height: auto; } .sf-md-heroj .sf-h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.125rem, 1.2rem + 3.8vw, 4.25rem); } .sf-md-heroj .sf-lead { max-width: 32ch; margin: 20px auto 0; } .sf-md-heroj .sf-gumbi { justify-content: center; } /* 3b. "Nase usluge": her sentence as the band's lede, then the four groups as white plates on the cloud, in her order. On a wider screen each plate is a row: the photograph at ONE height for all four (--sf-md-h) - its column is its ratio times that height, so a portrait is a narrow column and a landscape a wide one, none cut - and her words beside it. From 1068 px two portrait plates share a row and a landscape plate takes a row of its own (the second one with its photograph on the right). On a phone the photograph stands on top, a portrait never taller than about two thirds of the screen. */ .sf-md-usluge-pojas .sf-kop .sf-lead { max-width: 44ch; } .sf-md-usluge { display: grid; gap: 16px; } .sf-md-usluga { --ar: 1; --sf-md-h: clamp(240px, 26vw, 340px); display: grid; min-width: 0; overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); box-shadow: 0 1px 2px color-mix(in srgb, var(--sf-crna) 6%, transparent); scroll-margin-top: calc(var(--sf-vrh, 0px) + 20px); } .sf-md-usluga[data-sf-omjer="uspravna"] { width: 100%; max-width: min(100%, calc(var(--ar) * 66svh)); margin-inline: auto; } .sf-md-usluga__foto { min-width: 0; } .sf-md-usluga__tekst { display: grid; align-content: center; gap: 12px; min-width: 0; padding: clamp(24px, 3.4vw, 48px); } .sf-md-usluga__naziv { font: 700 clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem)/1.08 var(--sf-ff); letter-spacing: -.028em; text-wrap: balance; } .sf-md-usluga__p { max-width: 34ch; font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.42 var(--sf-ff); letter-spacing: -.014em; color: var(--sf-tx2); text-wrap: pretty; } /* the drawn icon, the fallback of a group without its photograph: strokes of 1,6 with round ends in the text colour */ .sf-md-usluga__ikona-polje { display: grid; place-items: center; min-height: 160px; background: var(--sf-bg2); } .sf-md-usluga__ikona { width: 56px; height: 56px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sf-md-usluga__tocka { fill: currentColor; stroke: none; } .sf-md-usluge ~ .sf-pv { margin-top: 16px; } @media (min-width: 734px) { .sf-md-usluga, .sf-md-usluga[data-sf-omjer="uspravna"] { grid-template-columns: calc(var(--ar) * var(--sf-md-h)) minmax(0, 1fr); align-items: center; width: auto; max-width: none; margin-inline: 0; } .sf-md-usluga--bez { grid-template-columns: var(--sf-md-h) minmax(0, 1fr); } .sf-md-usluga__ikona-polje { align-self: stretch; } } @media (min-width: 1068px) { .sf-md-usluge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .sf-md-usluga:not([data-sf-omjer="uspravna"]) { grid-column: 1 / -1; } .sf-md-usluga:not([data-sf-omjer="uspravna"]) .sf-md-usluga__tekst { padding-inline: clamp(40px, 5vw, 80px); } .sf-md-usluga:not([data-sf-omjer="uspravna"]):nth-child(even) { grid-template-columns: minmax(0, 1fr) calc(var(--ar) * var(--sf-md-h)); } .sf-md-usluga:not([data-sf-omjer="uspravna"]):nth-child(even) > .sf-md-usluga__foto { order: 2; } } /* ===================================================================== 8. motion */ /* Purposeful, brief, optional (Apple HIG: Motion; DIZAJN-3 section 6 "livelier inside the page"): Servis's three lines rise one after another after the H1; the cards, plates and steps arrive with the native scroll (site.css's .sf-pojava family); a tile that IS a link lifts a hair under the pointer; a capsule slides its words a hair. */ @media (prefers-reduced-motion: no-preference) { .sf-sv-heroj .sf-ulaz > .sf-sv-tri { animation: none; } .sf-sv-tri > span { animation: sf-dizanje .8s var(--sf-ease) both; } .sf-sv-tri > span:nth-child(1) { animation-delay: 220ms; } .sf-sv-tri > span:nth-child(2) { animation-delay: 330ms; } .sf-sv-tri > span:nth-child(3) { animation-delay: 440ms; } .sf-sv-cip { transition: background-color var(--sf-t-ui) var(--sf-ease-out), transform var(--sf-t-micro) var(--sf-ease-out); } .sf-sv-rad__foto img { transition: opacity var(--sf-t-ui) var(--sf-ease-out); } @media (hover: hover) { .sf-sv-cip:hover { background: color-mix(in srgb, var(--sf-polje) 15%, var(--sf-bg)); transform: translateY(-1px); } .sf-sv-rad__foto:hover img { opacity: .94; } } } /* ===================================================================== 9. forced colours, print */ @media (forced-colors: active) { .sf-sv-kartica, .sf-sv-rad, .sf-sv-gdje__stup, .sf-sv-hitno, .sf-sv-jamstvo, .sf-sv-kljuc__stavka, .sf-sv-jos > li, .sf-sv-koraci > li, .sf-sv-status, .sf-sv-cip, .sf-md-usluga { border: 1px solid CanvasText; } .sf-sv-popis > li::before { background: CanvasText; } .sf-sv-prsten { border-color: CanvasText; background: none; } } /* paper: the house by day everywhere (svijet.ts), no motion (site.css); a white mark would vanish on white - the navy band prints its colour copies instead */ @media print { /* this sheet's band paddings come after site.css's paper paddings: they take paper's again here */ .sf-sv-heroj, .sf-md-heroj { --sf-pt: 24px; --sf-pb: 24px; } .sf-sv-znak:not(.sf-sv-znak--papir) { display: none; } .sf-sv-znak--papir { display: block; } /* "Kljuc u ruke" on white: paper's band padding again, the H2, the ticks and the dots in the text colour */ .sf-sv-kljuc { --sf-pt: 24px; } .sf-sv-kljuc .sf-sv-kljuc__naslov, .sf-sv-kljuc__kvacica, .sf-sv-kljuc__tocka { color: var(--sf-tx); } .sf-sv-radovi { columns: 2; } .sf-sv-kartica, .sf-sv-rad, .sf-sv-gdje__stup, .sf-sv-hitno, .sf-md-usluga { box-shadow: inset 0 0 0 1px var(--sf-crta-dan); } .sf-sv-kartica, .sf-sv-rad, .sf-sv-kljuc__stavka, .sf-sv-koraci > li, .sf-md-usluga { break-inside: avoid; } } /* Sport Fishing D.O. - dejan.css (lane D Dejan): the page "Sport Fishing" about Dejan Otkovic, version 3 (IZGRADNJA-3 section 5.6, DIZAJN-3 "Plavi bedz", 2026-11-02), in the SEA world (body.sf-svijet-d,
painted from the surface to the seabed, white type). Every band is transparent on the one gradient; a panel is deeper water (--sf-bg2); the three gear cards and the partners' tiles are light islands (.sf-svjetlo-k) so each maker's mark keeps its own colours. Registered in SF_CSS (src/lib/sportfishingdo/ctx.ts) after css/odjeli.css. v2's rules are in _archive/sportfishingdo-v2-2026-11-02/src/components/sportfishingdo/assets/css/dejan.css. Every class here is the page's own (sf-dejan-*): the page no longer leans on odjeli.css's demo-1 blocks. No colour literal: only the world's roles and the palette (SF_BOJE as --sf-). No decorative line. No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). Photographs and the loop stand WHOLE, never cropped, darkened or written on: every picture is width 100% and height auto at its own ratio. Motion is the site's reveal utilities (site.css 9) plus a hover lift, transform and opacity only, none under reduced motion. Markup: src/lib/sportfishingdo/stranice/dejan.ts and the Dejan blocks of src/lib/sportfishingdo/blokovi.ts. (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 0. the sea's rhythm */ /* the bands stand transparent on ONE gradient, so between two of them there is one gap, not two */ .sf-dejan-pojas { --sf-pt: clamp(72px, 9vw, 128px); --sf-pb: 0px; } .sf-main > .sf-dejan-pojas:last-child { --sf-pb: var(--sf-py); } .sf-dejan-pojas .sf-kop .sf-lead { max-width: 46ch; } .sf-dejan-pojas .sf-kop .sf-h2 { max-width: 20ch; } /* a panel is deeper water (--sf-bg2) near the surface; in the bands near the seabed (.sf-dejan-duboko) deeper water no longer stands out, so a panel there is a whisper of the text colour instead (the text holds: the ground is at its darkest there) */ .sf-dejan-pojas { --sf-dejan-ploca: var(--sf-bg2); --sf-dejan-ploca-h: var(--sf-bg3); } .sf-dejan-duboko { --sf-dejan-ploca: color-mix(in srgb, var(--sf-tx) 8%, transparent); --sf-dejan-ploca-h: color-mix(in srgb, var(--sf-tx) 13%, transparent); } /* a picture in this page is always whole at its own ratio */ .sf-dejan-heroj .sf-foto img, .sf-dejan-gal .sf-foto img { display: block; width: 100%; height: auto; } /* ===================================================================== 1. the opening */ /* centred like the badge on the home page: the eyebrow, the badge beside "Sport Fishing", his name under it */ .sf-dejan-heroj { --sf-pb: 0px; text-align: center; } .sf-dejan-heroj .sf-putanja ol { justify-content: center; } .sf-dejan-heroj__naslov { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.2vw, 30px); } .sf-dejan-heroj__znak { --sf-zv: clamp(76px, 3.5rem + 4.5vw, 136px); } .sf-dejan-heroj .sf-h1 { max-width: none; margin-top: 0; font-size: var(--sf-f-hero); line-height: 1; letter-spacing: -.045em; } .sf-dejan-heroj__ime { margin-top: clamp(14px, 1.8vw, 22px); font: 600 var(--sf-f-lead)/1.3 var(--sf-ff); letter-spacing: -.018em; color: var(--sf-tx2); } .sf-dejan-heroj__medij { margin-top: clamp(40px, 5vw, 72px); } .sf-dejan-heroj__foto { max-width: 1120px; margin: 0 auto; } .sf-dejan-heroj__medij > .sf-pv { margin-top: 10px; text-align: center; } /* the frame of a single photograph: rounded, its ground the deeper water while the photograph grows into it */ .sf-dejan-okvir { overflow: clip; border-radius: var(--sf-r-plocica); background: var(--sf-bg2); } @media (max-width: 599px) { .sf-dejan-heroj__naslov { flex-direction: column; gap: 18px; } } /* ===================================================================== 2. the intro: her two paragraphs */ /* Apple's big two-tone paragraph: her first paragraph white, the second one tone down (the text colour at 68 % over the sea is 3,6 : 1 at its lightest point, and the paragraph is large bold text, 3 : 1) */ .sf-dejan-uvod { --sf-pt: clamp(64px, 8vw, 112px); } .sf-dejan-uvod__tekst { max-width: 34ch; font: 700 clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem)/1.24 var(--sf-ff); letter-spacing: -.026em; text-wrap: pretty; } .sf-dejan-uvod__tekst > p + p { margin-top: .55em; } .sf-dejan-uvod__drugi { color: color-mix(in srgb, var(--sf-tx) 68%, transparent); } .sf-dejan-uvod .sf-gumbi { margin-top: clamp(28px, 3.4vw, 44px); } .sf-dejan-gumb__ikona { flex: none; width: 22px; height: 22px; } .sf-dejan-uvod .sf-pv-izvor { margin-top: 16px; } /* ===================================================================== 3. the gear he uses and tests */ /* three light cards: the maker's mark in its own colours, her caption, a link that covers the card */ .sf-dejan-marke { display: grid; gap: 14px; } @media (min-width: 734px) { .sf-dejan-marke { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .sf-dejan-marka { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); } .sf-dejan-marka__znak { display: flex; align-items: center; min-height: 64px; font: inherit; } /* a mark keeps the width its height asks for (the width attribute), scaled down only by a narrow card */ .sf-dejan-marka__logo { display: block; max-width: 100%; height: auto; } .sf-dejan-marka__opis { flex-grow: 1; font: 600 clamp(18px, 1.05rem + .25vw, 20px)/1.35 var(--sf-ff); letter-spacing: -.016em; text-wrap: pretty; } .sf-dejan-marka__veza { align-self: flex-start; color: var(--sf-ak); font-weight: 600; } .sf-dejan-marka__veza::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .sf-dejan-marka--veza:hover .sf-dejan-marka__veza { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; } .sf-dejan-marka > .sf-pv { position: relative; z-index: 1; } /* ===================================================================== 4. Dejan's boat and gear */ /* the photographs first, the list under them; on a phone the two portraits share a row and the landscape spans it (grid, dense); from 734 px one justified row across the wrap: each photograph's own ratio (--sf-ar) shares the width, so the heights are equal and none is cut */ .sf-dejan-brod { display: grid; gap: clamp(16px, 2vw, 24px); } .sf-dejan-brod__fotke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; } .sf-dejan-brod__fotke > [data-sf-omjer="polozena"] { grid-column: 1 / -1; } @media (min-width: 734px) { .sf-dejan-brod__fotke { display: flex; gap: 12px; } .sf-dejan-brod__fotke > li { flex: var(--sf-ar) 1 0%; min-width: 0; } } /* a photograph that opens in the viewer: whole, rounded, the deeper water behind it while it grows into place */ .sf-dejan-gal { display: block; overflow: clip; border-radius: var(--sf-r-kartica); background: var(--sf-bg2); cursor: zoom-in; } .sf-dejan-brod__popis { padding: clamp(24px, 3vw, 36px); border-radius: var(--sf-r-plocica); background: var(--sf-bg2); } .sf-dejan-brod__dl { display: grid; gap: 20px; } @media (min-width: 734px) { .sf-dejan-brod__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; } } @media (min-width: 1068px) { .sf-dejan-brod__dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sf-dejan-brod__dl dt { font: 600 12px/1.3 var(--sf-ff); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-tx2); } .sf-dejan-brod__dl dd { margin: 6px 0 0; font: 600 clamp(18px, 1.05rem + .25vw, 20px)/1.35 var(--sf-ff); letter-spacing: -.016em; } .sf-dejan-brod__proizvod { display: inline; color: var(--sf-tx); text-decoration: none; } .sf-dejan-brod__proizvod .sf-veza__chevron { display: inline-block; margin-left: 6px; vertical-align: .05em; } .sf-dejan-brod__proizvod:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } .sf-dejan-brod__dno { margin-top: 28px; } .sf-dejan-brod__popis > .sf-pv { margin-top: 16px; } /* ===================================================================== 5. the biography */ .sf-dejan-bio .sf-h2 { max-width: 24ch; } .sf-dejan-bio__tekst { max-width: 60ch; font-size: clamp(19px, 1.1rem + .3vw, 22px); line-height: 1.55; letter-spacing: -.014em; text-wrap: pretty; } .sf-dejan-bio__tekst > p + p { margin-top: 1em; } .sf-dejan-bio .sf-pv-izvor { margin-top: 20px; } /* ===================================================================== 6. catches: a column gallery */ /* columns keep every photograph whole at its own ratio (portraits stay portraits); two on a phone, three from 734 px, four from 1068 px; each one opens the set "ulovi" in the viewer */ .sf-dejan-ulovi { columns: 2; column-gap: 8px; } .sf-dejan-ulovi > li { break-inside: avoid; margin-bottom: 8px; } @media (min-width: 734px) { .sf-dejan-ulovi { columns: 3; column-gap: 14px; } .sf-dejan-ulovi > li { margin-bottom: 14px; } } @media (min-width: 1068px) { .sf-dejan-ulovi { columns: 4; } } .sf-dejan-ulovi + .sf-pv { margin-top: 12px; } /* ===================================================================== 7. places, catch, techniques */ .sf-dejan-mjesta { display: grid; gap: 40px; } @media (min-width: 1068px) { .sf-dejan-mjesta--medij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } } .sf-dejan-ribolov { display: grid; gap: 32px; } .sf-dejan-ribolov__skupina > .sf-h3 { margin-bottom: 14px; } /* a pill per name: deeper water, the text white */ .sf-dejan-pilule { display: flex; flex-wrap: wrap; gap: 8px; } .sf-dejan-pilule > li { padding: 9px 16px; border-radius: 980px; background: var(--sf-dejan-ploca); font: 500 16px/1.3 var(--sf-ff); letter-spacing: -.01em; } /* the one loop, whole at 16:9 on the seabed; the source BELOW the frame, never over it */ .sf-dejan-petlja { margin: 0; } .sf-dejan-petlja > .sf-okvir { border-radius: var(--sf-r-plocica); } .sf-dejan-petlja > .sf-okvir, .sf-dejan-petlja .sf-petlja__video { background: var(--sf-dno); } .sf-dejan-izvidea { margin-top: 12px; color: var(--sf-tx2); } .sf-dejan-izvidea a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-dejan-ribolov__medij > .sf-pv { margin-top: 8px; } /* ===================================================================== 8. the most watched: one text list */ .sf-dejan-videi { display: grid; gap: 8px; } @media (min-width: 1068px) { .sf-dejan-videi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } } .sf-dejan-video { display: flex; align-items: center; gap: 16px; min-height: 64px; height: 100%; padding: 14px 18px; border-radius: var(--sf-r-kartica); background: var(--sf-dejan-ploca); color: var(--sf-tx); text-decoration: none; } .sf-dejan-video__br { flex: none; width: 2.2ch; font: 700 15px/1 var(--sf-ff); font-variant-numeric: tabular-nums; color: var(--sf-tx2); } .sf-dejan-video__tekst { display: grid; gap: 4px; flex: 1; min-width: 0; } .sf-dejan-video__nas { font: 600 17px/1.32 var(--sf-ff); letter-spacing: -.012em; } .sf-dejan-video > .sf-veza__chevron { flex: none; } .sf-dejan-videi__kanal { margin-top: 20px; } /* ===================================================================== 9. competitions and media */ .sf-dejan-mediji { display: grid; gap: clamp(40px, 5vw, 64px); } .sf-dejan-dogadaji { display: grid; gap: 14px; } @media (min-width: 734px) { .sf-dejan-dogadaji { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } .sf-dejan-dogadaj { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--sf-r-plocica); background: var(--sf-dejan-ploca); } .sf-dejan-dogadaj__video { color: var(--sf-tx2); font-size: 15px; line-height: 1.45; } .sf-dejan-dogadaj__video a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-dejan-novine > .sf-caption { margin-top: 8px; color: var(--sf-tx2); } .sf-dejan-clanci { display: grid; gap: 8px; margin-top: 20px; } .sf-dejan-clanak { display: grid; gap: 4px; padding: 14px 18px; border-radius: var(--sf-r-kartica); background: var(--sf-dejan-ploca); color: var(--sf-tx); text-decoration: none; } .sf-dejan-clanak__nas { font: 600 17px/1.35 var(--sf-ff); letter-spacing: -.012em; text-wrap: pretty; } .sf-dejan-novine__dno { margin-top: 16px; } /* the rows and cards that are links lift a hair under the pointer; no movement under reduced motion */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .sf-dejan-video, .sf-dejan-clanak { transition: transform var(--sf-t-ui) var(--sf-ease-out), background-color var(--sf-t-ui) var(--sf-ease-out); } .sf-dejan-video:hover, .sf-dejan-clanak:hover { transform: translateY(-2px); background: var(--sf-dejan-ploca-h); } .sf-dejan-video:hover > .sf-veza__chevron { transform: translateX(3px); } } /* ===================================================================== 10. partnerships (#suradnja) */ /* the partners first, what he offers under them, then the invitation */ .sf-dejan-suradnja { display: grid; gap: clamp(36px, 4.5vw, 52px); } .sf-dejan-suradnja__blok > .sf-h3 { margin-bottom: 14px; } /* the partners: their REAL marks on light tiles (.sf-svjetlo-k, the house's day roles, so each mark keeps its own colours), one column on a phone and three from 600 px; each mark at the height its visual weight asks for (dejan.ts PARTNER_H), scaled down only by a narrow tile, never cropped. Not links (the page never sends a customer to another shop), so a tile has no hover. */ .sf-dejan-partneri { display: grid; gap: 10px; } @media (min-width: 600px) { .sf-dejan-partneri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } .sf-dejan-partner { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 88px; padding: 20px 24px; border-radius: var(--sf-r-kartica); background: var(--sf-bg); color: var(--sf-tx); } @media (min-width: 1068px) { .sf-dejan-partner { min-height: 112px; } } .sf-dejan-partner__znak { display: block; flex: none; min-width: 0; max-width: 100%; height: auto; } /* a mark whose file is not there yet: its name in the page's heavy type, on the same tile (mediji.ts logo) */ .sf-dejan-partner .sf-logo--tekst { flex: 0 1 auto; font: 800 clamp(20px, 1.05rem + .5vw, 24px)/1.15 var(--sf-ff); letter-spacing: -.02em; text-align: center; } /* the invitation: a light island (.sf-svjetlo-k, the house's day roles) at the end of the band, her sentence and the enquiry in the badge's cobalt */ .sf-dejan-poziv { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 4vw, 52px); border-radius: var(--sf-r-plocica); background: var(--sf-bg); color: var(--sf-tx); text-align: center; } .sf-dejan-poziv__tekst { font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.2 var(--sf-ff); letter-spacing: -.026em; } .sf-dejan-poziv .sf-gumbi { justify-content: center; margin-top: 24px; } /* ===================================================================== 11. where to follow him */ /* the bubbles a size up: each real app icon grows with its white tile (okvir.css .sf-mjehur--app) */ .sf-dejan-mjehurici { gap: 14px; } .sf-dejan-mjehurici .sf-mjehur { width: 56px; height: 56px; } /* ===================================================================== paper */ /* (it must follow the screen rules above) */ @media print { .sf-dejan-heroj, .sf-dejan-pojas, .sf-main > .sf-dejan-pojas:last-child { --sf-pt: 24px; --sf-pb: 24px; } .sf-dejan-okvir, .sf-dejan-gal, .sf-dejan-petlja > .sf-okvir, .sf-dejan-petlja .sf-petlja__video { background: none; } .sf-dejan-ulovi { columns: 3; } .sf-dejan-marka, .sf-dejan-brod__popis, .sf-dejan-dogadaj, .sf-dejan-video, .sf-dejan-clanak, .sf-dejan-poziv, .sf-dejan-pilule > li { background: none; padding-inline: 0; } } /* Sport Fishing D.O. - zajednicko.css (lane F): the shared pages kontakt, impresum, privatnost and the 404, in the house world (white and cloud, the badge's cobalt as the accent). Split out of css/odjeli.css on 2026-11-02 (IZGRADNJA-3 section 6, lane T), redrawn for design 3 "Plavi bedz" the same day. Registered in SF_CSS (src/lib/sportfishingdo/ctx.ts) after css/dejan.css. No colour literal: only the world's roles and the palette (SF_BOJE as --sf-). No class name may match an EasyList word (ad, ads-, banner, promo, sponsor). Motion: the frame's .sf-pojava reveal and the tiles' lift (okvir.css), nothing of its own. Markup: src/lib/sportfishingdo/stranice/zajednicko.ts; the channel tiles are chrome.ts kontaktBlok (plocice). (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top) */ /* ===================================================================== 5. kontakt (the house by day) */ /* ONE card "Za sve upite" on the cloud panel straight under the page head: its title with the reply time, the channels as white tiles (WhatsApp the filled one, UK-09), then the address and the forms side by side. */ .sf-kontakt-pojas { --sf-pt: 0px; } .sf-kontakt-kartica { display: grid; gap: clamp(24px, 3vw, 36px); min-width: 0; padding: clamp(20px, 4vw, 48px); border-radius: var(--sf-r-plocica); background: var(--sf-bg2); color: var(--sf-tx); } .sf-kontakt-kartica__glava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; } .sf-kontakt-odgovor { font: 500 17px/1.4 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx2); } /* The channel tiles (chrome.ts kontaktBlok with plocice, the frame's .sf-kontakti--veliki): a list of rows on a phone - the glyph beside the name and the number, iOS's grouped rows - then WhatsApp across the top with the four others two by two from 640 px, and from 1068 px three on the first row (WhatsApp, Viber, the call) and SMS with the wider e-mail tile under them. The address may break only before its @ (the ). */ .sf-kontakt-kanali .sf-kontakt__veze { gap: 10px; } .sf-kontakt-kanali .sf-kanal-veza { overflow-wrap: normal; } .sf-kontakt-kanali .sf-kanal-veza__vrijednost { overflow-wrap: break-word; } @media (max-width: 639px) { .sf-kontakt-kanali .sf-kanal-veza { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 0; padding: 14px 18px; min-height: 64px; } .sf-kontakt-kanali .sf-kanal-veza__ikona { grid-row: 1 / span 2; width: 26px; height: 26px; margin: 0; } .sf-kontakt-kanali .sf-kanal-veza__sto { font-size: 18px; line-height: 1.25; } } @media (min-width: 640px) { .sf-kontakt-kanali .sf-kontakt__veze > li:first-child { grid-column: 1 / -1; } } @media (min-width: 1068px) { .sf-kontakti--veliki.sf-kontakt-kanali .sf-kontakt__veze { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .sf-kontakt-kanali .sf-kontakt__veze > li, .sf-kontakt-kanali .sf-kontakt__veze > li:first-child { grid-column: span 2; } .sf-kontakt-kanali .sf-kontakt__veze > li:nth-child(5):last-child { grid-column: span 4; } } /* the address (no map, UK-16) and the forms: one column, two from 900 px, under a hairline */ .sf-kontakt-kartica__dno { display: grid; gap: 24px 48px; min-width: 0; padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--sf-ln); } @media (min-width: 900px) { .sf-kontakt-kartica__dno { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } } .sf-kontakt-adresa { display: grid; gap: 6px; min-width: 0; } .sf-kontakt-adresa > .sf-eyebrow, .sf-kontakt-obrasci > .sf-eyebrow { margin: 0; } .sf-kontakt-adresa__tekst { max-width: 40ch; font: 400 17px/1.47 var(--sf-ff); letter-spacing: -.012em; color: var(--sf-tx); } .sf-kontakt-obrasci { display: grid; gap: 2px; min-width: 0; } .sf-kontakt-obrasci ul { display: flex; flex-wrap: wrap; gap: 0 28px; } /* the profiles: the round bubbles a size up (each real app icon grows with its tile, okvir.css), then the reviews once the Google profile exists (PT-17) */ .sf-kontakt-profili { --sf-pt: clamp(48px, 6vw, 80px); } .sf-kontakt-profili .sf-h3 { margin-bottom: 16px; } .sf-kontakt-mjehurici { gap: 12px; } .sf-kontakt-mjehurici .sf-mjehur { width: 52px; height: 52px; } .sf-kontakt-recenzije { margin-top: 12px; } /* ===================================================================== 6. impresum, privatnost (the house by day) */ /* one legal column of 72ch (site.css .sf-tekst--pravno), straight under the opening */ .sf-pravno-pojas { --sf-pt: 0px; } .sf-tekst--pravno > .sf-h3 { margin-top: clamp(40px, 5vw, 56px); } .sf-tekst--pravno > .sf-h3:first-child { margin-top: 0; } .sf-tekst--pravno > .sf-h3 + * { margin-top: 12px; } .sf-tekst--pravno > p + p { margin-top: 12px; } .sf-pravno > .sf-primatelji { margin-top: 12px; } /* the register's rows (and the privacy notice's recipients): definitions with hairlines, two columns from 734 px. The same rules as odjeli.css 1c, held here too so the legal pages never depend on another lane's file. */ .sf-tekst--pravno .sf-imp { display: grid; border-top: 1px solid var(--sf-ln); } .sf-tekst--pravno .sf-imp > div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--sf-ln); } .sf-tekst--pravno .sf-imp dt { font: 500 14px/1.45 var(--sf-ff); letter-spacing: -.004em; color: var(--sf-tx2); } .sf-tekst--pravno .sf-imp dd { margin: 0; overflow-wrap: break-word; } @media (min-width: 734px) { .sf-tekst--pravno .sf-imp > div { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); column-gap: 24px; align-items: baseline; } } /* the IBAN in its groups of four, digits of one width */ .sf-imp__iban { font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* ===================================================================== 7. the 404 (the house by day) */ /* a calm page: the head, then the pages as chevron rows with hairlines, the phone, the way home; English below */ .sf-404 { --sf-pb: clamp(32px, 4vw, 56px); } .sf-404-pojas { --sf-pt: 0px; } .sf-404__tijelo { display: grid; gap: 20px; max-width: 880px; } .sf-404__veze { display: grid; border-top: 1px solid var(--sf-ln); } @media (min-width: 734px) { .sf-404__veze { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } .sf-404__veze > li { min-width: 0; border-bottom: 1px solid var(--sf-ln); } .sf-404__veze .sf-veza { display: flex; justify-content: space-between; width: 100%; min-height: 56px; font: 600 19px/1.3 var(--sf-ff); letter-spacing: -.016em; } .sf-404__tel { color: var(--sf-tx2); } .sf-404__tel a { color: var(--sf-tx); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; } .sf-404__tijelo > .sf-gumbi { margin-top: 4px; } .sf-404__en { display: grid; gap: 16px; margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--sf-ln); } .sf-404__p { max-width: 52ch; color: var(--sf-tx2); } /* forced colours: the card and the tiles keep an edge */ @media (forced-colors: active) { .sf-kontakt-kartica { border: 1px solid CanvasText; } } /* paper (moved from odjeli.css section 9: it must follow the screen rules above) */ @media print { .sf-pravno-pojas, .sf-404, .sf-404-pojas { --sf-pt: 24px; --sf-pb: 24px; } .sf-kontakt-kartica { padding: 0; background: none; } .sf-kontakt-mjehurici { display: none; } }