/* ============================================================ SwiftFrame GUGSB — frontend bundle. GENERATED by bin/build-css.sh — edit the per-file sources in assets/css/ and rebuild; do not edit this file directly. ============================================================ */ @import url('https://fonts.cdnfonts.com/css/geomanist'); @import url('https://fonts.cdnfonts.com/css/proxima-nova-2'); /* ══════════ tailwind.css ══════════ */ /*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-geomanist:"Geomanist", sans-serif;--font-proxima:"Proxima Nova", sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.top-0{top:0}.top-\[-10px\]{top:-10px}.top-\[-168px\]{top:-168px}.top-\[14px\]{top:14px}.top-\[18px\]{top:18px}.top-\[28px\]{top:28px}.top-\[32px\]{top:32px}.top-\[35px\]{top:35px}.top-\[36px\]{top:36px}.top-\[44px\]{top:44px}.top-\[45px\]{top:45px}.top-\[46px\]{top:46px}.top-\[61px\]{top:61px}.top-\[68px\]{top:68px}.top-\[99px\]{top:99px}.top-\[142px\]{top:142px}.top-\[164px\]{top:164px}.top-\[176px\]{top:176px}.top-\[182px\]{top:182px}.top-\[188px\]{top:188px}.top-\[200px\]{top:200px}.top-\[203px\]{top:203px}.top-\[233px\]{top:233px}.top-\[242px\]{top:242px}.top-\[250px\]{top:250px}.top-\[270px\]{top:270px}.top-\[271px\]{top:271px}.top-\[285px\]{top:285px}.top-\[289px\]{top:289px}.top-\[324px\]{top:324px}.top-\[329px\]{top:329px}.top-\[359px\]{top:359px}.top-\[368px\]{top:368px}.top-\[394px\]{top:394px}.top-\[397px\]{top:397px}.top-\[516px\]{top:516px}.top-\[631px\]{top:631px}.top-\[858px\]{top:858px}.top-\[884px\]{top:884px}.top-\[945px\]{top:945px}.top-\[953px\]{top:953px}.top-\[971px\]{top:971px}.top-\[1086px\]{top:1086px}.top-\[1490px\]{top:1490px}.top-\[1653px\]{top:1653px}.top-\[1894px\]{top:1894px}.top-\[2334px\]{top:2334px}.top-\[2353px\]{top:2353px}.top-\[2523px\]{top:2523px}.top-\[2576px\]{top:2576px}.top-\[2589px\]{top:2589px}.top-\[2709px\]{top:2709px}.top-\[2938px\]{top:2938px}.top-\[3026px\]{top:3026px}.top-\[3066px\]{top:3066px}.top-\[3086px\]{top:3086px}.top-\[3118px\]{top:3118px}.top-\[3186px\]{top:3186px}.top-\[3207px\]{top:3207px}.top-\[3257px\]{top:3257px}.top-\[3415px\]{top:3415px}.top-\[3421px\]{top:3421px}.top-\[3521px\]{top:3521px}.top-\[3536px\]{top:3536px}.top-\[3574px\]{top:3574px}.top-\[3587px\]{top:3587px}.top-\[3594px\]{top:3594px}.top-\[3707px\]{top:3707px}.top-\[3898px\]{top:3898px}.top-\[3936px\]{top:3936px}.top-\[3948px\]{top:3948px}.top-\[4005px\]{top:4005px}.top-\[4024px\]{top:4024px}.top-\[4064px\]{top:4064px}.top-\[4116px\]{top:4116px}.top-\[4120px\]{top:4120px}.top-\[4178px\]{top:4178px}.top-\[4184px\]{top:4184px}.top-\[4413px\]{top:4413px}.top-\[4490px\]{top:4490px}.top-\[4540px\]{top:4540px}.top-\[4584px\]{top:4584px}.top-\[4704px\]{top:4704px}.top-\[4819px\]{top:4819px}.top-\[4877px\]{top:4877px}.top-\[5189px\]{top:5189px}.top-\[5239px\]{top:5239px}.top-\[5296px\]{top:5296px}.top-\[5411px\]{top:5411px}.top-\[5469px\]{top:5469px}.top-\[5770px\]{top:5770px}.right-0{right:0}.right-\[7px\]{right:7px}.right-\[24px\]{right:24px}.right-\[27px\]{right:27px}.right-\[39px\]{right:39px}.right-\[60px\]{right:60px}.left-0{left:0}.left-1\/2{left:50%}.left-\[-582px\]{left:-582px}.left-\[24px\]{left:24px}.left-\[99px\]{left:99px}.left-\[120px\]{left:120px}.left-\[121px\]{left:121px}.left-\[143px\]{left:143px}.left-\[153px\]{left:153px}.left-\[226px\]{left:226px}.left-\[409px\]{left:409px}.left-\[432px\]{left:432px}.left-\[462px\]{left:462px}.left-\[492px\]{left:492px}.left-\[608px\]{left:608px}.left-\[625px\]{left:625px}.left-\[633px\]{left:633px}.left-\[765px\]{left:765px}.left-\[862px\]{left:862px}.left-\[975px\]{left:975px}.left-\[1260px\]{left:1260px}.left-\[1296px\]{left:1296px}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-\[8px\]{margin-top:8px}.mt-\[9px\]{margin-top:9px}.mt-\[15px\]{margin-top:15px}.mt-\[16px\]{margin-top:16px}.mt-\[24px\]{margin-top:24px}.mt-\[32px\]{margin-top:32px}.mt-\[48px\]{margin-top:48px}.mb-\[16px\]{margin-bottom:16px}.mb-\[27px\]{margin-bottom:27px}.mb-\[60px\]{margin-bottom:60px}.mb-\[64px\]{margin-bottom:64px}.ml-\[24px\]{margin-left:24px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[4\/3\]{aspect-ratio:4/3}.h-\[7px\]{height:7px}.h-\[14px\]{height:14px}.h-\[20px\]{height:20px}.h-\[24px\]{height:24px}.h-\[36px\]{height:36px}.h-\[45px\]{height:45px}.h-\[60px\]{height:60px}.h-\[94px\]{height:94px}.h-\[99px\]{height:99px}.h-\[114px\]{height:114px}.h-\[254px\]{height:254px}.h-\[344px\]{height:344px}.h-\[360px\]{height:360px}.h-\[379px\]{height:379px}.h-\[402px\]{height:402px}.h-\[504px\]{height:504px}.h-\[525px\]{height:525px}.h-\[674px\]{height:674px}.h-\[675px\]{height:675px}.h-\[800px\]{height:800px}.h-\[4944px\]{height:4944px}.h-\[6198px\]{height:6198px}.h-full{height:100%}.h-px{height:1px}.max-h-full{max-height:100%}.w-\[12px\]{width:12px}.w-\[14px\]{width:14px}.w-\[20px\]{width:20px}.w-\[24px\]{width:24px}.w-\[59\.5px\]{width:59.5px}.w-\[120px\]{width:120px}.w-\[170px\]{width:170px}.w-\[240px\]{width:240px}.w-\[284px\]{width:284px}.w-\[345px\]{width:345px}.w-\[373px\]{width:373px}.w-\[452px\]{width:452px}.w-\[555px\]{width:555px}.w-\[575px\]{width:575px}.w-\[576px\]{width:576px}.w-\[580px\]{width:580px}.w-\[684px\]{width:684px}.w-\[789px\]{width:789px}.w-\[989px\]{width:989px}.w-\[1199px\]{width:1199px}.w-\[1200px\]{width:1200px}.w-\[1440px\]{width:1440px}.w-\[1920px\]{width:1920px}.w-full{width:100%}.max-w-\[402px\]{max-width:402px}.max-w-\[960px\]{max-width:960px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-\[10px\]{gap:10px}.gap-\[16px\]{gap:16px}.gap-\[23px\]{gap:23px}.gap-\[24px\]{gap:24px}.gap-\[34px\]{gap:34px}.gap-\[48px\]{gap:48px}.overflow-hidden{overflow:hidden}.rounded-\[30px\]{border-radius:30px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\[1\.5px\]{border-top-style:var(--tw-border-style);border-top-width:1.5px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-\[var\(--footer-line\)\]{border-color:var(--footer-line)}.border-\[var\(--hairline\)\]{border-color:var(--hairline)}.border-\[var\(--line\)\]{border-color:var(--line)}.bg-\[\#0F0F0F\]{background-color:#0f0f0f}.bg-\[\#ADADAB\]{background-color:#adadab}.bg-\[var\(--bg\)\]{background-color:var(--bg)}.bg-\[var\(--hairline\)\]{background-color:var(--hairline)}.bg-\[var\(--line\)\]{background-color:var(--line)}.bg-\[var\(--text\)\]{background-color:var(--text)}.bg-black\/85{background-color:#000000d9}@supports (color:color-mix(in lab, red, red)){.bg-black\/85{background-color:color-mix(in oklab, var(--color-black) 85%, transparent)}}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-\[24px\]{padding:24px}.px-\[24px\]{padding-inline:24px}.py-\[20px\]{padding-block:20px}.py-\[28px\]{padding-block:28px}.text-center{text-align:center}.text-justify{text-align:justify}.font-geomanist{font-family:var(--font-geomanist)}.font-proxima{font-family:var(--font-proxima)}.text-\[15px\]{font-size:15px}.text-\[18px\]{font-size:18px}.text-\[24px\]{font-size:24px}.text-\[32px\]{font-size:32px}.text-\[36px\]{font-size:36px}.text-\[43px\]{font-size:43px}.text-\[48px\]{font-size:48px}.text-\[72px\]{font-size:72px}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.tracking-\[-0\.03em\]{--tw-tracking:-.03em;letter-spacing:-.03em}.whitespace-pre{white-space:pre}.text-\[var\(--bg\)\]{color:var(--bg)}.text-\[var\(--muted\)\]{color:var(--muted)}.text-\[var\(--text\)\]{color:var(--text)}.uppercase{text-transform:uppercase}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}@media (min-width:64rem){.lg\:mx-auto{margin-inline:auto}.lg\:mt-0{margin-top:0}.lg\:mt-\[48px\]{margin-top:48px}.lg\:mt-\[64px\]{margin-top:64px}.lg\:mt-\[73px\]{margin-top:73px}.lg\:mb-\[96px\]{margin-bottom:96px}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:h-\[504px\]{height:504px}.lg\:w-\[373px\]{width:373px}.lg\:max-w-\[760px\]{max-width:760px}.lg\:max-w-\[1200px\]{max-width:1200px}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:gap-\[24px\]{gap:24px}.lg\:gap-\[36px\]{gap:36px}.lg\:px-0{padding-inline:0}.lg\:px-\[106px\]{padding-inline:106px}.lg\:py-\[32px\]{padding-block:32px}.lg\:pt-\[32px\]{padding-top:32px}.lg\:text-\[32px\]{font-size:32px}.lg\:text-\[43px\]{font-size:43px}.lg\:text-\[48px\]{font-size:48px}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false} /* ══════════ gugsb-tokens.css ══════════ */ /* ============================================================ GUGSB design tokens + base + themeable icon helper Dark is the default at :root; [data-theme="light"] overrides. ============================================================ */ :root { --bg: #272727; --text: #FFFFFF; --muted: #878787; --line: #393939; --hairline: rgba(255, 255, 255, 0.16); --footer-line: rgba(255, 255, 255, 0.16); } :root[data-theme="light"] { --bg: #FFFFFF; --text: #272727; --muted: #737373; --line: #CCCCCC; --hairline: transparent; --footer-line: #CCCCCC; } /* ── Low-specificity reset for block content (self-contained; author classes win) ── */ :where(.gugsb-block) *, :where(.gugsb-block) *::before, :where(.gugsb-block) *::after { box-sizing: border-box; } :where(.gugsb-block) :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol) { margin: 0; } :where(.gugsb-block) :where(a) { text-decoration: none; color: inherit; } :where(.gugsb-block) :where(img) { max-width: 100%; } /* ── Frontend base ── */ body { background-color: var(--bg); color: var(--text); font-family: 'Geomanist', sans-serif; letter-spacing: -0.03em; } .gugsb-block { font-family: 'Geomanist', sans-serif; letter-spacing: -0.03em; background-color: var(--bg); } .gugsb-proxima { font-family: 'Proxima Nova', sans-serif; } /* ── Themeable graphic (logo / icons / arrows) ── Single monochrome SVG used as a mask; its colour follows --text, so it recolours automatically between dark and light themes. Set --icon and a width/height inline on the element. */ .gugsb-mask { display: inline-block; flex: none; background-color: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--icon); mask-image: var(--icon); } .gugsb-mask--muted { background-color: var(--muted); } .gugsb-mask--bg { background-color: var(--bg); } /* ── Shared "Više" (read more) link ── */ .gugsb-more { display: inline-flex; align-items: center; gap: 16px; font-size: 18px; line-height: 1.5; color: var(--text); } .gugsb-more__arrow { width: 59.5px; height: 7px; } /* ══════════ header-bar.css ══════════ */ /* ── gugsb/header-bar ── */ .gugsb-header { width: 100%; background-color: var(--bg); border-bottom: 1.5px solid var(--hairline); } .gugsb-header__inner { max-width: 1440px; margin: 0 auto; height: 99px; padding: 0 24px; display: flex; align-items: center; gap: 0; } .gugsb-header__logo { display: inline-flex; flex: none; } .gugsb-header__nav { display: none; } .gugsb-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .gugsb-header__icon { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; } /* ── Theme toggle: sun ⟷ moon spin-crossfade, driven by [data-theme] ── * Dark shows the sun (tap → light), light shows the moon (tap → dark). */ .gugsb-header__toggle { position: relative; width: 24px; height: 24px; justify-content: center; } .gugsb-header__toggle .gugsb-mask { position: absolute; inset: 0; margin: auto; transition: opacity 0.3s ease, transform 0.45s ease; } .gugsb-header__toggle-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } :root[data-theme='light'] .gugsb-header__toggle-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } :root[data-theme='light'] .gugsb-header__toggle-moon { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .gugsb-header__toggle .gugsb-mask { transition: none; } } @media (min-width: 1170px) { .gugsb-header__inner { height: 114px; padding: 0 120px; /* 3-column grid keeps the nav centred in the header regardless of the * logo/actions widths: logo | nav (centre) | actions, with equal side columns. */ display: grid; grid-template-columns: 1fr auto 1fr; } /* Explicit cells — .gugsb-search shares row 1 / column 2 with the nav * (see search.css), so auto-placement must not shift the actions. */ .gugsb-header__logo { grid-area: 1 / 1; justify-self: start; } .gugsb-header__actions { grid-area: 1 / 3; justify-self: end; } .gugsb-header__nav { grid-area: 1 / 2; display: flex; align-self: stretch; /* fill header height so dropdowns anchor at its bottom edge */ justify-self: center; gap: 48px; } .gugsb-header__nav > a, .gugsb-header__item { display: inline-flex; align-items: center; /* vertically centre the label within the full-height nav */ } .gugsb-header__item { position: relative; } .gugsb-header__toplink { display: inline-flex; align-items: center; font-size: 18px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); } /* ── Dropdown caret (rotates open on hover) ── */ .gugsb-header__caret { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .gugsb-header__item:hover .gugsb-header__caret, .gugsb-header__item:focus-within .gugsb-header__caret { transform: translateY(1px) rotate(-135deg); } /* ── Dropdown panel — GUGSB: sharp edges, themed, hairline dividers ── */ .gugsb-header__dropdown { position: absolute; top: 100%; left: -20px; min-width: 240px; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s; z-index: 60; } .gugsb-header__item:hover > .gugsb-header__dropdown, .gugsb-header__item:focus-within > .gugsb-header__dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; } .gugsb-header__dropdown a { display: block; padding: 14px 20px; font-size: 16px; line-height: 1.25; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--hairline); transition: background-color 0.15s ease, color 0.15s ease; } .gugsb-header__dropdown a:last-child { border-bottom: none; } .gugsb-header__dropdown a:hover { background: var(--text); color: var(--bg); } .gugsb-header__actions { gap: 24px; } } /* ── Mobile menu — floating button (FAB) + full-screen overlay ── * Mobile only; the inline nav takes over at ≥1024px (FAB + overlay hidden). */ .gugsb-menu-fab { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--text); /* white disc in dark mode; inverts with the theme */ border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } .gugsb-menu { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; /* Red-cross drawer: slides in from the right; visibility flips after the * slide-out finishes so the closed panel isn't focusable/clickable. */ transform: translateX(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; } .gugsb-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } .gugsb-menu[hidden] { display: none; } .gugsb-menu__bar { flex: none; height: 99px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--hairline); } .gugsb-menu__logo { display: inline-flex; } .gugsb-menu__close { background: none; border: 0; padding: 8px; margin-right: -8px; cursor: pointer; line-height: 0; } .gugsb-menu__nav { flex: 1 1 auto; } .gugsb-header__mlink { display: block; padding: 20px 24px; font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); border-bottom: 1px solid var(--hairline); } /* Parent row (red-cross behavior): the whole row is one button that toggles the * accordion — no separate link/caret zones. Typography matches .gugsb-header__mlink. */ .gugsb-header__mrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; background: none; border: 0; border-bottom: 1px solid var(--hairline); font-family: inherit; font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; text-align: left; color: var(--text); cursor: pointer; } .gugsb-header__mrow:hover { background: var(--text); color: var(--bg); } .gugsb-header__mcaret { flex: none; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); /* points down when collapsed */ transition: transform 0.2s ease; } .gugsb-header__mrow[aria-expanded="true"] .gugsb-header__mcaret { transform: translateY(2px) rotate(-135deg); /* points up when expanded */ } /* Collapsed by default; .is-open slides it down (red-cross max-height technique). */ .gugsb-header__msub { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .gugsb-header__msub.is-open { max-height: 1000px; } .gugsb-header__msublink { display: block; padding: 13px 24px 13px 40px; font-size: 16px; line-height: 1.2; letter-spacing: -0.03em; color: var(--muted); border-bottom: 1px solid var(--hairline); } .gugsb-header__mlink:hover, .gugsb-header__msublink:hover { background: var(--text); color: var(--bg); } /* ── Badge above the contact footer (e.g. openCity) ── */ .gugsb-menu__badge { flex: none; padding: 24px; } .gugsb-menu__badge a { display: block; width: 100%; padding: 8px; background: #fff; } .gugsb-menu__badge img { display: block; max-width: 100%; height: auto; } /* ── Contact footer at the bottom of the overlay (red-cross drawer footer) ── */ .gugsb-menu__footer { flex: none; padding: 20px 24px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; } .gugsb-menu__contact { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.2; letter-spacing: -0.03em; color: var(--muted); transition: color 0.15s ease; } .gugsb-menu__contact:hover { color: var(--text); } @media (min-width: 1170px) { .gugsb-menu-fab, .gugsb-menu { display: none !important; } } /* ══════════ search.css ══════════ */ /* ── Header search — swaps in place of the nav ── * Clicking the search icon fades the nav out, morphs the icon into an X and * fades the input in, all inside the header bar (no expanding panel). * .gugsb-search lives inside .gugsb-header__inner: flex middle on mobile, * stacked into the nav's grid cell on desktop. Driven by .is-searching on * .gugsb-header (see search.js). */ .gugsb-search { flex: 1 1 auto; min-width: 0; margin: 0 20px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s; } .gugsb-header.is-searching .gugsb-search { opacity: 1; visibility: visible; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; } .gugsb-search__form { display: flex; align-items: center; width: 100%; } .gugsb-search__input { flex: 1 1 auto; min-width: 0; background: none; border: 0; border-bottom: 1.5px solid var(--line); padding: 8px 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); outline: none; } .gugsb-search__input:focus { border-bottom-color: var(--text); } .gugsb-search__input::placeholder { color: var(--muted); } /* Enter submits; a second search glyph inside the bar is just clutter. */ .gugsb-search__submit { display: none; } /* Nav fades out while searching (desktop; the inline nav is hidden on mobile). */ .gugsb-header__nav { transition: opacity 0.22s ease; } .gugsb-header.is-searching .gugsb-header__nav { opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s 0.22s; } /* Search icon ⟷ X morph inside the toggle button. */ .gugsb-header__search-btn { position: relative; width: 24px; height: 24px; justify-content: center; } .gugsb-header__search-btn .gugsb-mask { transition: opacity 0.22s ease, transform 0.22s ease; } .gugsb-header__search-x { position: absolute; inset: 0; margin: auto; opacity: 0; transform: rotate(-90deg); } .gugsb-header.is-searching .gugsb-header__search-btn .gugsb-mask:not(.gugsb-header__search-x) { opacity: 0; transform: rotate(90deg); } .gugsb-header.is-searching .gugsb-header__search-x { opacity: 1; transform: none; } @media (min-width: 1170px) { /* Occupy the nav's grid cell so the input appears exactly where the nav was. */ .gugsb-search { grid-area: 1 / 2; justify-self: stretch; margin: 0; } .gugsb-search__input { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .gugsb-search, .gugsb-header__nav, .gugsb-header__search-btn .gugsb-mask { transition: none !important; } } /* ══════════ footer-bar.css ══════════ */ /* ── gugsb/footer-bar ── */ .gugsb-footer { width: 100%; background-color: var(--bg); border-top: 1.5px solid var(--footer-line); } .gugsb-footer__inner { max-width: 1440px; margin: 0 auto; min-height: 360px; padding: 61px 24px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; } .gugsb-footer__logo { display: inline-flex; } .gugsb-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 34px; margin-top: 45px; } .gugsb-footer__nav a { font-size: 18px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); } .gugsb-footer__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin-top: 32px; font-size: 15px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); } .gugsb-footer__powered { display: inline-flex; align-items: center; gap: 8px; } /* Icon + name form a tight brand lockup, closer than the label-to-icon gap. */ .gugsb-footer__brand { display: inline-flex; align-items: center; gap: 4px; } .gugsb-footer__sep { color: var(--muted); } .gugsb-footer__powered-link { color: inherit; text-decoration: none; } .gugsb-footer__powered-link:hover { text-decoration: underline; } @media (min-width: 1024px) { .gugsb-footer__nav { gap: 48px; } } /* ══════════ hero.css ══════════ */ /* ── gugsb/hero ── */ .gugsb-hero__inner { max-width: 1440px; margin: 0 auto; padding: 32px 24px 0; } .gugsb-hero__top { display: flex; flex-direction: column; gap: 24px; } .gugsb-hero__title { margin: 0; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); max-width: 789px; } .gugsb-hero__aside { display: flex; flex-direction: column; gap: 16px; } .gugsb-hero__subtitle { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; text-align: justify; color: var(--muted); } .gugsb-hero__image { margin-top: 32px; width: 100%; aspect-ratio: 1200 / 504; overflow: hidden; background-color: #ADADAB; } .gugsb-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Swiper slider variant (2+ slides) — square B/W pagination bullets ── */ .gugsb-hero__swiper { width: 100%; height: 100%; cursor: grab; } .gugsb-hero__swiper:active { cursor: grabbing; } .gugsb-hero__swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .gugsb-hero__swiper .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 0; background: #fff; opacity: 0.55; transition: opacity 0.2s ease; } .gugsb-hero__swiper .swiper-pagination-bullet-active { opacity: 1; } @media (min-width: 1024px) { .gugsb-hero__inner { padding: 48px 120px 0; } .gugsb-hero__top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 64px; } .gugsb-hero__title { flex: 1; font-size: 72px; } .gugsb-hero__aside { width: 345px; flex: none; padding-top: 12px; } .gugsb-hero__image { margin-top: 40px; height: 504px; aspect-ratio: auto; } } /* ══════════ news.css ══════════ */ /* ── gugsb/news (Novosti) ── */ .gugsb-news__inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; padding-bottom: 48px; /* uniform section rhythm: 48px above/below every separator */ } .gugsb-news__rule { border-top: 1px solid var(--line); } .gugsb-news__heading { margin: 48px 0 0; /* uniform section rhythm */ text-align: center; font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-news__list { display: flex; flex-direction: column; gap: 48px; margin: 48px auto 0; max-width: 989px; } .gugsb-news__card { display: flex; flex-direction: column; gap: 16px; } .gugsb-news__thumb { display: block; width: 100%; height: 344px; overflow: hidden; flex: none; } .gugsb-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gugsb-news__body { display: flex; flex-direction: column; } .gugsb-news__date { font-size: 18px; line-height: 1.5; color: var(--text); } .gugsb-news__title { margin: 8px 0 0; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-news__title a { color: inherit; } .gugsb-news__excerpt { margin: 16px 0 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; text-align: justify; color: var(--muted); } .gugsb-news__body .gugsb-more { margin-top: 16px; } .gugsb-news__empty { color: var(--muted); font-size: 18px; } .gugsb-news__more { display: flex; justify-content: center; margin-top: 48px; } .gugsb-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 240px; height: 60px; border-radius: 30px; background-color: var(--text); color: var(--bg); font-size: 24px; line-height: 1.5; letter-spacing: -0.03em; } @media (min-width: 1024px) { .gugsb-news__inner { padding: 0 120px; padding-bottom: 48px; /* uniform section rhythm */ } .gugsb-news__heading { font-size: 48px; } .gugsb-news__card { flex-direction: row; gap: 36px; } .gugsb-news__thumb { width: 373px; height: 344px; } .gugsb-news__body { flex: 1; padding-top: 32px; } .gugsb-news__title { font-size: 43px; } } /* ══════════ feature-row.css ══════════ */ /* ── gugsb/feature-row ── */ .gugsb-feature__inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; } .gugsb-feature__rule { border-top: 1px solid var(--line); } .gugsb-feature__grid { display: flex; flex-direction: column; gap: 24px; padding-top: 48px; /* equal spacing above/below the row content */ padding-bottom: 48px; } .gugsb-feature__col { display: flex; flex-direction: column; } .gugsb-feature__heading { margin: 0; font-size: 43px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-feature__body { margin-top: 16px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; text-align: justify; color: var(--muted); } .gugsb-feature__body p { margin: 0 0 1em; } .gugsb-feature__body p:last-child { margin-bottom: 0; } .gugsb-feature__col .gugsb-more { margin-top: 16px; } .gugsb-feature__media { width: 100%; height: 254px; overflow: hidden; } .gugsb-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1024px) { .gugsb-feature__inner { padding: 0 120px; } .gugsb-feature__grid { flex-direction: row; align-items: flex-start; gap: 90px; padding-top: 48px; /* equal spacing above/below the row content */ padding-bottom: 48px; } .gugsb-feature__col { flex: 1; } .gugsb-feature__media { width: 555px; height: 402px; flex: none; } } /* ══════════ post.css ══════════ */ /* ── Single post (gugsb/post-article + gugsb/post-gallery) ── */ .gugsb-post__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .gugsb-post__date { margin-top: 48px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--text); } .gugsb-post__title { margin-top: 8px; max-width: 960px; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-post__featured { margin-top: 32px; width: 100%; height: 254px; overflow: hidden; } .gugsb-post__featured img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Post body (block payload or classic content, themed) ── * .gugsb-post__body is now full-width and just spaces the body off the header. * Each body block carries its own width: copy/images sit in .gugsb-post__prose, * the gallery spans the full .gugsb-post__inner. */ .gugsb-post__body { margin-top: 48px; margin-bottom: 64px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } /* The reading column for paragraphs + inline images. Typography is scoped to * .gugsb-post__prose (not .gugsb-post__body) so these blocks stay self-styled * when used outside the single-post body — e.g. inside a gugsb/columns block on * a page. .gugsb-post__body only handles top/bottom spacing. */ .gugsb-post__prose { /* Match the header/menu content box (.gugsb-header__inner: 1440 max, 120 desktop pad). */ max-width: 1440px; margin: 0 auto; padding: 0 24px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } /* Pages using the “narrow text” template (templates/page-narrow.html) get the * same reading measure as single posts. */ .gugsb-page--narrow .gugsb-post__prose { max-width: 808px; /* beat the desktop 120px page gutter so the measure matches single posts */ padding-left: 24px; padding-right: 24px; } /* The single-post article body keeps the narrow reading measure. */ .gugsb-post__body .gugsb-post__prose { max-width: 808px; /* 760 content + 24 padding each side */ padding-left: 24px; padding-right: 24px; } .gugsb-post__image { margin: 0 auto; } .gugsb-post__image img { display: block; } .gugsb-post__image--left img { margin-left: 0; margin-right: auto; } .gugsb-post__image--right img { margin-left: auto; margin-right: 0; } .gugsb-post__image--center img { margin-left: auto; margin-right: auto; } /* ── Post video (gugsb/post-video) ── */ .gugsb-post__video { margin: 24px 0; } .gugsb-post__video-el { display: block; width: 100%; height: auto; background: #000; } .gugsb-post__video-embed { position: relative; width: 100%; padding-top: 56.25%; } /* 16:9 */ .gugsb-post__video-embed iframe, .gugsb-post__video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .gugsb-post__video--center .gugsb-post__video-el, .gugsb-post__video--center .gugsb-post__video-embed { margin-left: auto; margin-right: auto; } .gugsb-post__video--right .gugsb-post__video-el, .gugsb-post__video--right .gugsb-post__video-embed { margin-left: auto; } .gugsb-post__video-caption { margin-top: 8px; font-size: 14px; line-height: 1.5; letter-spacing: -0.03em; text-align: center; color: var(--muted); } .gugsb-post__prose p { margin: 0 0 27px; text-align: justify; } .gugsb-post__prose p:last-child { margin-bottom: 0; } .gugsb-post__prose h1, .gugsb-post__prose h2, .gugsb-post__prose h3, .gugsb-post__prose h4 { margin: 48px 0 16px; font-size: 24px; line-height: 1.5; text-transform: uppercase; color: var(--text); } .gugsb-post__prose h3 { margin-top: 28px; } .gugsb-post__prose a { color: var(--text); text-decoration: underline; } .gugsb-post__prose img { height: auto; max-width: 100%; margin: 16px 0; } .gugsb-post__prose ul, .gugsb-post__prose ol { margin: 0 0 27px; padding-left: 22px; } .gugsb-post__prose li { margin-bottom: 8px; } .gugsb-post__prose iframe { max-width: 100%; } /* Floated inline images (classic alignleft/alignright/aligncenter) so body text * wraps around them — e.g. /stalni-postav/. Clearfix keeps floats inside the prose. */ .gugsb-post__prose::after { content: ""; display: table; clear: both; } .gugsb-post__prose .alignleft { float: left; margin: 6px 28px 18px 0; } .gugsb-post__prose .alignright { float: right; margin: 6px 0 18px 28px; } .gugsb-post__prose .aligncenter { display: block; margin: 18px auto; } .gugsb-post__prose .alignleft, .gugsb-post__prose .alignright { max-width: 45%; height: auto; } @media (max-width: 600px) { .gugsb-post__prose .alignleft, .gugsb-post__prose .alignright { max-width: 40%; margin-bottom: 10px; } } /* ── Gallery grid ── */ .gugsb-post__gallery { margin-top: 37px; padding-bottom: 64px; } .gugsb-post__rule { border-top: 1px solid var(--line); } .gugsb-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; } .gugsb-gallery__item { display: block; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; border: 0; padding: 0; background: none; } .gugsb-gallery__item img { width: 100%; height: 100%; margin: 0; /* reset .gugsb-post__body img margin now that the gallery nests in the body */ object-fit: cover; display: block; transition: transform 0.3s ease; } .gugsb-gallery__item:hover img { transform: scale(1.04); } /* ── Lightbox overlay ── */ .gugsb-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.88); } .gugsb-lb[hidden] { display: none; } .gugsb-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; } .gugsb-lb__btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 48px; line-height: 1; cursor: pointer; padding: 12px 20px; } .gugsb-lb__prev { left: 4px; } .gugsb-lb__next { right: 4px; } .gugsb-lb__close { position: absolute; top: 12px; right: 18px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; } @media (min-width: 1024px) { .gugsb-post__date { margin-top: 64px; } .gugsb-post__title { font-size: 43px; } .gugsb-post__featured { margin-top: 48px; height: 504px; } .gugsb-post__prose { padding-left: 120px; padding-right: 120px; } /* align with menu gutter */ .gugsb-post__body { margin-top: 64px; } .gugsb-post__gallery { margin-top: 37px; padding-bottom: 64px; } .gugsb-gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } } /* ══════════ post-list.css ══════════ */ /* ── gugsb/post-list (paginated listing — /novosti/, /izlozbe/) ── */ .gugsb-list__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .gugsb-list__head { text-align: center; } .gugsb-list__title { margin-top: 48px; font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-list__subtitle { margin-top: 8px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } .gugsb-list__rule { margin-top: 48px; border-top: 1px solid var(--line); } .gugsb-list__items { margin-top: 48px; } .gugsb-list__item { display: flex; flex-direction: column; margin-bottom: 60px; } .gugsb-list__thumb { display: block; width: 100%; height: 344px; overflow: hidden; flex: none; } .gugsb-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gugsb-list__date { margin-top: 15px; font-size: 18px; line-height: 1.5; color: var(--text); } .gugsb-list__itemtitle { margin-top: 9px; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-list__itemtitle a { color: inherit; } .gugsb-list__excerpt { margin-top: 16px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; text-align: justify; color: var(--muted); } .gugsb-list__body .gugsb-more { margin-top: 16px; } .gugsb-list__empty { color: var(--muted); font-size: 18px; } .gugsb-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; margin-bottom: 64px; font-size: 18px; line-height: 1; letter-spacing: -0.03em; } .gugsb-pagination__num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 2px 6px 0; /* top: optical centering — Geomanist sits high */ color: var(--muted); transition: color 0.15s ease, background-color 0.15s ease; } a.gugsb-pagination__num:hover { color: var(--text); } .gugsb-pagination__num.is-current { background: var(--text); color: var(--bg); } .gugsb-pagination__gap { color: var(--muted); padding: 0 2px; } .gugsb-pagination__step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .gugsb-pagination__step .gugsb-mask { transition: transform 0.2s ease; } .gugsb-pagination__arrow--prev { transform: rotate(180deg); } .gugsb-pagination__step:hover .gugsb-pagination__arrow { transform: translateX(4px); } .gugsb-pagination__step:hover .gugsb-pagination__arrow--prev { transform: rotate(180deg) translateX(4px); } @media (min-width: 1024px) { .gugsb-list__inner { padding: 0; } .gugsb-list__title { margin-top: 73px; font-size: 48px; } .gugsb-list__rule { margin-top: 64px; } .gugsb-list__items { margin-top: 64px; padding: 0 106px; } .gugsb-list__item { flex-direction: row; gap: 36px; } .gugsb-list__thumb { width: 373px; height: 344px; } .gugsb-list__body { flex: 1; padding-top: 32px; } .gugsb-list__itemtitle { font-size: 43px; } .gugsb-pagination { margin-bottom: 96px; } } /* ══════════ documents.css ══════════ */ /* ── gugsb/documents (dokumenti.html) ── */ .gugsb-docs__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; margin-bottom: 64px; } .gugsb-docs__title { margin-top: 48px; text-align: center; font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-docs__subtitle { margin-top: 8px; text-align: center; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } .gugsb-docs__main { margin-top: 48px; } /* Category index */ .gugsb-docs__index { border-top: 1px solid var(--line); } .gugsb-docs__cat { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); } .gugsb-docs__catname { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } /* Category view */ .gugsb-docs__view[hidden] { display: none; } .gugsb-docs__back { display: inline-flex; align-items: center; gap: 16px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } .gugsb-docs__backarrow { transform: rotate(180deg); } .gugsb-docs__viewtitle { margin-top: 16px; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-docs__files { margin-top: 24px; border-top: 1px solid var(--line); } .gugsb-docs__file { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); } .gugsb-docs__file span { font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--text); } .gugsb-docs__dl { flex: none; width: 20px; height: 20px; color: var(--muted); } @media (min-width: 1024px) { .gugsb-docs__inner { padding: 0; margin-bottom: 96px; } .gugsb-docs__title { margin-top: 73px; font-size: 48px; } .gugsb-docs__main { margin-top: 64px; padding: 0 106px; } .gugsb-docs__cat { padding: 32px 0; } .gugsb-docs__catname { font-size: 32px; } .gugsb-docs__viewtitle { font-size: 43px; } } /* File strips reused inside prose (e.g. katalozi on Kabinet akvarela): kses * strips inline SVG from richtext, so the download arrow comes from CSS. */ .gugsb-post__prose .gugsb-docs__file { text-decoration: none; } .gugsb-post__prose .gugsb-docs__file::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--text); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* ══════════ contact.css ══════════ */ /* ── gugsb/contact ── */ .gugsb-contact__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; margin-bottom: 64px; } .gugsb-contact__head { text-align: center; } .gugsb-contact__title { margin-top: 48px; font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-contact__subtitle { margin-top: 8px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } .gugsb-contact__rule { margin-top: 48px; border-top: 1px solid var(--line); } /* Info + map */ .gugsb-contact__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; } .gugsb-contact__sub { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } /* ── Working hours: full-width section — intro-style centred title + columns ── */ .gugsb-contact__hours { margin-top: 48px; } .gugsb-contact__hourstitle { margin-top: 48px; font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; text-align: center; color: var(--text); } .gugsb-contact__hoursgrid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } .gugsb-contact__hcol { text-align: center; } .gugsb-contact__hcol h3 { max-width: 300px; margin: 0 auto; font-size: 18px; line-height: 1.3; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-contact__hcol p { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--text); } .gugsb-contact__hcol p + p { margin-top: 4px; } .gugsb-contact__hlabel { margin: 20px 0 6px; font-size: 13px; letter-spacing: 0; text-transform: uppercase; color: var(--muted); } .gugsb-contact__list { margin: 24px 0 0; } .gugsb-contact__list > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); } .gugsb-contact__list dt { font-size: 13px; letter-spacing: 0; text-transform: uppercase; color: var(--muted); } .gugsb-contact__list dd { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--text); } .gugsb-contact__list a { color: var(--text); } .gugsb-contact__map { position: relative; width: 100%; height: 360px; margin-top: 48px; overflow: hidden; } .gugsb-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); } /* Red pin overlaid at map centre — the iframe is grayscaled, so Google's own * marker (at the embed's centre coordinate) goes gray; this sits on top of it. */ .gugsb-contact__map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 42px; transform: translate(-50%, -100%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 42'%3E%3Cpath fill='%23e05a5a' d='M14 0C6.27 0 0 6.27 0 14c0 10.5 14 28 14 28s14-17.5 14-28C28 6.27 21.73 0 14 0z'/%3E%3Ccircle cx='14' cy='14' r='5' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; } /* Form */ .gugsb-contact__form { margin-top: 24px; } .gugsb-contact__frow { display: grid; grid-template-columns: 1fr; gap: 16px; } .gugsb-contact__field { display: block; margin-bottom: 16px; } .gugsb-contact__field span { display: block; font-size: 13px; text-transform: uppercase; color: var(--muted); } .gugsb-contact__field input, .gugsb-contact__field textarea { width: 100%; margin-top: 8px; padding: 12px 14px; background: transparent; border: 1px solid var(--line); color: var(--text); font-family: 'Geomanist', sans-serif; font-size: 18px; letter-spacing: -0.03em; } .gugsb-contact__field textarea { resize: vertical; } .gugsb-contact__field input:focus, .gugsb-contact__field textarea:focus { outline: none; border-color: var(--text); } .gugsb-contact__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .gugsb-contact__submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; height: 60px; padding: 0 40px; line-height: 1; border: 0; border-radius: 30px; background: var(--text); color: var(--bg); font-family: 'Geomanist', sans-serif; font-size: 18px; letter-spacing: -0.03em; cursor: pointer; } .gugsb-contact__submit > span:first-child { transform: translateY(2px); /* optical centering — Geomanist sits high in its line box */ } .gugsb-contact__submit:disabled { opacity: 0.6; cursor: default; } .gugsb-contact__status { margin-top: 12px; min-height: 1.2em; font-size: 16px; line-height: 1.4; color: var(--muted); } .gugsb-contact__status.is-ok { color: var(--text); } .gugsb-contact__status.is-error { color: #e05a5a; } @media (min-width: 1024px) { .gugsb-contact__inner { padding: 0; margin-bottom: 96px; } .gugsb-contact__title { margin-top: 73px; font-size: 48px; } .gugsb-contact__rule { margin-top: 64px; } .gugsb-contact__grid { grid-template-columns: 1.4fr 1fr; gap: 64px; margin-top: 64px; align-items: start; } .gugsb-contact__frow { grid-template-columns: 1fr 1fr; gap: 24px; } .gugsb-contact__hours { margin-top: 64px; } .gugsb-contact__hourstitle { margin-top: 64px; font-size: 36px; } .gugsb-contact__hoursgrid { grid-template-columns: repeat(2, 1fr); gap: 48px; margin-top: 48px; align-items: start; } .gugsb-contact__map { margin-top: 64px; height: 480px; } } @media (min-width: 1440px) { .gugsb-contact__hoursgrid { grid-template-columns: repeat(4, 1fr); } } /* ── Contact Form 7 variant ── * The CF7 form reuses the .gugsb-contact__* form styling above; these rules fix * up CF7's own wrappers/messages to match (it wraps each field in a span and * appends a bordered response box by default). */ .gugsb-cf7 .wpcf7-form-control-wrap { display: block; } /* let the input fill the field */ .gugsb-cf7 .wpcf7-submit { width: auto; } .gugsb-cf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #e05a5a; } .gugsb-contact__formwrap .wpcf7-response-output { margin: 16px 0 0; padding: 0; border: 0; font-size: 16px; line-height: 1.4; color: var(--muted); } .gugsb-contact__formwrap .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #e05a5a; } .gugsb-contact__formwrap .wpcf7-spinner { margin: 14px 0 0 10px; } /* The Turnstile widget renders right after the submit pill — give it air. */ .gugsb-contact .cf-turnstile { margin-top: 24px; } /* ── Badge (e.g. openCity) at the bottom of the contact info column ── */ .gugsb-contact__badge { margin-top: 32px; } .gugsb-contact__badge a { display: inline-block; padding: 8px; background: #fff; } .gugsb-contact__badge img { display: block; max-width: 220px; height: auto; } /* ══════════ page-header.css ══════════ */ /* ── gugsb/page-header (standalone page title, matches .gugsb-list__head) ── */ .gugsb-pagehead__inner { /* Match the header/menu content box so the title + rule align with the prose. */ max-width: 1440px; margin: 0 auto; padding: 0 24px; } .gugsb-pagehead--left { text-align: left; } .gugsb-pagehead--center { text-align: center; } .gugsb-pagehead--right { text-align: right; } .gugsb-pagehead__title { margin-top: 48px; font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text); } .gugsb-pagehead__subtitle { margin-top: 8px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--muted); } .gugsb-pagehead__rule { margin-top: 48px; margin-bottom: 40px; border-top: 1px solid var(--line); } @media (min-width: 1024px) { .gugsb-pagehead__inner { padding: 0 120px; } /* align with menu gutter */ .gugsb-pagehead__title { margin-top: 64px; font-size: 43px; } .gugsb-pagehead__rule { margin-top: 64px; margin-bottom: 48px; } } /* ══════════ columns.css ══════════ */ /* ── gugsb/columns (responsive grid of block stacks) ── * Per-instance grid-template-columns / gap / padding are emitted as scoped *