/* e-motion grafika — offline static presentation */ /* --- Tipografija ------------------------------------------------------- Bodoni Moda (display) + Karla (tekst), self-hostano, bez CDN-a. Bodoni je odabran jer njegove oštre hairline linije odgovaraju zlatotisku i graviranim okvirima na pozivnicama; Georgia je ostala fallback dok se font ne učita. latin-ext pokriva č ć ž š đ. */ @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin-ext-italic.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Karla";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/karla-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Karla";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/karla-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/karla-latin-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/karla-latin-ext-italic.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{--paper:#f5f1e9;--paper-deep:#ebe4d7;--ink:#202320;--ink-deep:#15181a;--muted:#6d706a;--green:#5f6d5d;--green-dark:#3f5143;--rose:#ead7cc;--foil:#a9834e;--foil-dark:#6d5228;--line:#d8d1c5;--max:1440px;--serif:"Bodoni Moda",Georgia,"Times New Roman",serif;--sans:"Karla",Arial,Helvetica,sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit}h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.03;margin:0 0 1rem}h1{font-size:clamp(3.3rem,7vw,7.4rem);letter-spacing:-.055em}h2{font-size:clamp(2rem,3.7vw,4rem);letter-spacing:-.035em}h3{font-size:1.35rem}p{max-width:70ch}.site-header{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(32,35,32,.1)}.header-inner{max-width:var(--max);margin:auto;padding:18px 4vw;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:13px;min-width:225px}.brand img{width:205px;height:auto}.brand span{display:none;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.site-nav{margin-left:auto}.site-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}.site-nav a{display:block;white-space:nowrap;padding:7px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4d514c;border-bottom:1px solid transparent}.site-nav a:hover,.site-nav a.is-active{color:var(--green-dark);border-color:var(--green)}.header-cta{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--green-dark);white-space:nowrap}.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:none;padding:8px 13px}.hero{max-width:var(--max);margin:0 auto;padding:clamp(36px,6vw,90px) 4vw 70px;display:grid;grid-template-columns:minmax(300px,.83fr) minmax(420px,1.45fr);gap:5vw;align-items:start}.hero__copy{padding-left:0}.eyebrow,.pathway__label{margin:0 0 16px;color:#8b8174;font-size:11px;letter-spacing:.25em;text-transform:uppercase}.hero__copy>p:not(.eyebrow){font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:#51554f;max-width:34rem}.button{display:inline-flex;align-items:center;gap:25px;margin:20px 0 14px;padding:14px 20px;border:1px solid var(--ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase}.button--dark{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}.hero__image{background:var(--paper-deep);aspect-ratio:1.18;overflow:hidden}.hero__image img{width:100%;height:100%;object-fit:cover}.hero-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.pathways{max-width:var(--max);margin:0 auto;padding:0 4vw 85px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.pathway{min-height:230px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}.pathway h2{font-size:2rem;margin-bottom:8px}.pathway p{margin:0 0 16px;color:#555850}.pathway--green{background:#dfe5dc}.pathway--paper{background:#eee8dd}.pathway--rose{background:var(--rose)}.pathway .text-link{font-size:12px;text-transform:uppercase;letter-spacing:.1em}.section-block{max-width:var(--max);margin:0 auto;padding:0 4vw 90px}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:26px}.section-heading h2{margin:0}.text-link{font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px}.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.home-card{background:#fff}.home-card img{width:100%;aspect-ratio:1;object-fit:cover}.home-card span{display:flex;justify-content:space-between;padding:15px 14px;font-family:var(--serif);font-size:1.25rem}.home-card b{font-family:var(--sans);font-weight:400;color:var(--green-dark)}main{min-height:55vh}.page-hero{max-width:var(--max);margin:auto;padding:80px 4vw 40px}.page-hero p{color:var(--muted);font-family:var(--serif);font-size:1.2rem}.catalog-intro{max-width:var(--max);margin:auto;padding:0 4vw 35px}.catalog-intro p{max-width:70ch;color:#535851}.catalog-grid{max-width:var(--max);margin:auto;padding:0 4vw 90px;display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.catalog-card{background:#fff;min-width:0}.catalog-card__image{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-deep)}.catalog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.catalog-card:hover img{transform:scale(1.03)}.catalog-card__body{padding:16px}.catalog-card h3{font-size:1.25rem;margin-bottom:12px}.catalog-card .text-link{font-size:10px}.product-intro{max-width:var(--max);margin:auto;padding:80px 4vw 45px}.product-intro p{font-family:var(--serif);font-size:1.2rem;color:var(--muted)}.product-flow{margin:auto}.product-flow>.product-unit{max-width:var(--max);margin:0 auto}.product-unit{display:grid;grid-template-columns:minmax(320px,1.04fr) minmax(300px,.8fr);gap:6vw;padding:55px 4vw 75px;border-top:1px solid var(--line);align-items:start}.product-unit__media{min-width:0}.product-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-tile{border:0;padding:0;cursor:zoom-in;background:var(--paper-deep);aspect-ratio:1;overflow:hidden}.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.gallery-tile:hover img{transform:scale(1.03)}.product-unit__copy{padding-top:10px;position:sticky;top:112px}.product-unit__copy h2{font-size:clamp(2rem,3.5vw,3.3rem)}.product-unit__copy>p:not(.eyebrow){color:#5a5f59;white-space:pre-line}.price-list{list-style:none;padding:14px 0;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:5px}.price-list li{font-family:var(--serif);font-size:1.1rem}.product-meta{display:flex;gap:15px;flex-wrap:wrap;color:#7b7e77;text-transform:uppercase;letter-spacing:.08em;font-size:10px}.order-info{max-width:var(--max);margin:auto;padding:30px 4vw 100px}.form-placeholder{border:1px dashed #a99f91;background:#f7f3eb;color:#6b6d65;padding:20px;margin-top:18px;max-width:650px}.legacy-content{max-width:var(--max);margin:auto;padding:0 4vw 90px}.legacy-content .module_content,.legacy-content .contentarea{max-width:78ch}.legacy-content img.content-image{width:min(100%,800px);height:auto;margin:22px 0}.legacy-content h2,.legacy-content h3,.legacy-content h4{margin-top:35px}.legacy-content ul{padding-left:22px}.offline-note{padding:18px;background:var(--paper-deep);color:var(--muted)}.empty-state{max-width:var(--max);padding:90px 4vw;margin:auto}.site-footer{max-width:var(--max);margin:auto;padding:30px 4vw 38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.site-footer>div:first-child{display:flex;gap:14px;align-items:center}.site-footer strong{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}.gallery-modal[hidden]{display:none}.gallery-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:5vh 5vw}.gallery-modal__backdrop{position:absolute;inset:0;background:rgba(20,23,20,.7);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.gallery-modal__panel{position:relative;z-index:1;max-width:94vw;max-height:94vh;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:4px}.gallery-modal figure{margin:0;grid-column:2;grid-row:1;max-height:calc(88vh - 50px);text-align:center}.gallery-modal figure img{max-width:100%;max-height:calc(88vh - 76px);width:auto;height:auto;object-fit:contain;margin:auto}.gallery-modal figcaption{color:#fff;font-size:12px;padding:9px}.gallery-modal__close{border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;width:48px;height:48px;font-size:34px;line-height:1}.gallery-modal__prev,.gallery-modal__next{display:block;justify-self:center;width:auto;height:auto;padding:7px;border:1px solid rgba(255,255,255,0);border-radius:8px;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;line-height:1}.gallery-modal__prev img,.gallery-modal__next img{width:24px;height:24px;display:block}.gallery-modal__prev:hover,.gallery-modal__next:hover{background:rgba(0,0,0,.45)}.gallery-modal__prev:active,.gallery-modal__next:active{transform:scale(.96)}.gallery-modal__close{position:fixed;top:20px;right:24px;font-size:38px}.gallery-modal__prev{grid-column:1;grid-row:1}.gallery-modal__next{grid-column:3;grid-row:1}.gallery-modal__count{grid-column:2;grid-row:2;text-align:center;color:#fff;font-size:12px;padding-top:0;line-height:1.2}.gallery-modal button:focus-visible,.site-nav a:focus-visible,.button:focus-visible,a:focus-visible{outline:3px solid #ad6d46;outline-offset:3px}@media(max-width:1050px){.site-nav ul{gap:13px}.site-nav a{font-size:10px}.header-cta{display:none}.catalog-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1360px){.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:13px 4vw 20px;border-bottom:1px solid var(--line)}.site-nav.is-open{display:block}.site-nav ul{display:grid;gap:0}.site-nav a{padding:10px 0}}@media(max-width:760px){.header-inner{padding:14px 5vw}.brand img{width:185px}.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:13px 5vw 20px;border-bottom:1px solid var(--line)}.site-nav.is-open{display:block}.site-nav ul{display:grid;gap:0}.site-nav a{padding:10px 0}.hero{display:flex;flex-direction:column;padding:35px 5vw 55px;gap:28px}.hero__copy{padding:0}.hero__image{width:100%;aspect-ratio:1}.hero-points{gap:12px;font-size:9px}.pathways{grid-template-columns:1fr;padding:0 5vw 60px}.pathway{min-height:190px}.section-block{padding:0 5vw 60px}.section-heading{display:block}.section-heading .text-link{display:inline-block;margin-top:12px}.home-grid{grid-template-columns:repeat(2,1fr);gap:10px}.home-card span{font-size:1rem;padding:11px 10px}.page-hero{padding:55px 5vw 30px}.catalog-grid{grid-template-columns:repeat(2,1fr);padding:0 5vw 65px;gap:10px}.catalog-card__body{padding:12px}.catalog-card h3{font-size:1.05rem}.product-intro{padding:55px 5vw 25px}.product-unit{display:block;padding:35px 5vw 55px}.product-unit__copy{padding-top:25px;position:static}.product-gallery{gap:7px}.product-gallery--carousel{display:block}.product-carousel__arrow{padding:7px}.product-carousel__arrow img{width:24px;height:24px}.product-carousel__arrow[data-carousel-prev]{left:8px}.product-carousel__arrow[data-carousel-next]{right:8px}.site-footer{display:block;padding:25px 5vw 30px}.site-footer>div:first-child{display:block}.site-footer>div:first-child span{display:block;margin-top:5px}.gallery-modal{padding:3vh 3vw}.gallery-modal__panel{max-width:100%;grid-template-columns:42px minmax(0,1fr) 42px}.gallery-modal__close{top:10px;right:12px}.gallery-modal__prev,.gallery-modal__next{padding:7px}.gallery-modal__prev img,.gallery-modal__next img{width:24px;height:24px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} .category-copy{max-width:var(--max);margin:auto;padding:70px 4vw 95px}.category-copy__intro{max-width:760px;padding-bottom:34px}.category-copy__intro h1{font-size:clamp(3rem,6vw,6rem);margin-bottom:20px}.category-copy__intro>p:last-child{font-family:var(--serif);font-size:1.2rem;color:var(--muted);max-width:60ch}.category-copy-grid{border-top:1px solid var(--line)}.category-copy-card{display:grid;grid-template-columns:76px minmax(0,760px);gap:28px;padding:38px 0;border-bottom:1px solid var(--line)}.category-copy-card__number{font-family:var(--serif);font-size:1.7rem;color:var(--green-dark)}.category-copy-card h2{font-size:clamp(1.65rem,2.8vw,2.7rem);margin-bottom:12px}.category-copy-card p{color:#555850;max-width:72ch}.category-copy-card__note{font-size:.95rem;color:var(--muted)!important}.category-copy-card__prices{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);max-width:470px}.category-copy-card__prices .eyebrow{margin-bottom:8px}.category-copy-card__prices ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-family:var(--serif);color:var(--ink)}.envelope-page{max-width:var(--max);margin:auto;padding:70px 4vw 100px}.envelope-page__intro{max-width:820px}.envelope-page__intro h1{font-size:clamp(3rem,6vw,6.2rem);margin-bottom:24px}.envelope-page__copy{color:#555850;font-size:1.05rem}.envelope-page__copy h2{font-size:1.8rem;margin-top:24px}.envelope-page__copy a{color:var(--green-dark);text-decoration:underline;text-underline-offset:4px}.envelope-media{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:48px 0 28px}.envelope-media figure{margin:0;background:var(--paper-deep);padding:10px}.envelope-media img{width:100%;aspect-ratio:1;object-fit:cover}.envelope-media figcaption{padding:10px 4px 2px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.envelope-page__details{border-top:1px solid var(--line);padding-top:30px;max-width:720px}.envelope-page__details h2{font-size:2.5rem}.printing-flow .product-unit{grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr)}.printing-flow .product-unit__copy{position:static}.printing-flow .product-unit__copy h2{font-size:clamp(1.8rem,3vw,3rem)} .envelope-detail-media{margin:48px 0 28px;max-width:560px;background:var(--paper-deep);padding:10px}.envelope-detail-media img{width:100%;aspect-ratio:1;object-fit:cover}.envelope-detail-media figcaption{padding:10px 4px 2px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em} .faq-page{padding-bottom:80px}.faq-list{max-width:960px;margin:0 auto;padding:0 4vw}.faq-item{border-top:1px solid var(--line);padding:0}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;list-style:none;padding:24px 42px 24px 0;font-family:var(--serif);font-size:1.35rem;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';position:absolute;right:8px;top:20px;font-family:var(--sans);font-size:1.4rem;color:var(--green-dark)}.faq-item[open] summary::after{content:'−'}.faq-item p{padding:0 48px 25px 0;margin:0;color:#555850;max-width:78ch} @media(max-width:760px){.category-copy{padding:50px 5vw 65px}.category-copy-card{grid-template-columns:36px minmax(0,1fr);gap:13px;padding:28px 0}.category-copy-card__number{font-size:1.25rem}.category-copy-card__prices ul{display:grid;gap:4px}.envelope-page{padding:50px 5vw 65px}.envelope-media{grid-template-columns:1fr;margin-top:35px}.envelope-page__details h2{font-size:2rem}} .category-copy-card{grid-template-columns:minmax(190px,260px) 54px minmax(0,1fr);gap:25px;align-items:start}.category-copy-card__media{background:var(--paper-deep);padding:8px}.category-copy-card__media img{width:100%;aspect-ratio:1;object-fit:cover}.catalog-intro{padding-bottom:48px}.catalog-intro p{max-width:1100px;font-family:var(--serif);font-size:1.2rem;line-height:1.55}.legacy-content--wide .contentarea,.legacy-content--wide .module_content{max-width:1120px}.legacy-content--wide p,.legacy-content--wide li{max-width:none}.legacy-content--kontakt .contentarea{max-width:1120px}.legacy-content--kontakt .contentarea > .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.4fr);gap:5vw;align-items:start}.legacy-content--kontakt .contentarea > .row .span9,.legacy-content--kontakt .contentarea > .row .span3{width:auto;float:none;margin:0}.envelope-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);gap:5vw;align-items:start}.envelope-page__intro{max-width:none}.envelope-hero__media{margin:0;background:var(--paper-deep);padding:10px}.envelope-hero__media img{width:100%;aspect-ratio:1;object-fit:cover}.envelope-hero__media figcaption{padding:10px 4px 2px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.envelope-media{display:none} @media(max-width:760px){.category-copy-card{grid-template-columns:1fr;gap:12px}.category-copy-card__number{font-size:1.25rem}.category-copy-card__media{max-width:260px}.legacy-content--kontakt .contentarea > .row{display:block}.legacy-content--kontakt .contentarea > .row .span3{margin-top:35px}.envelope-hero{grid-template-columns:1fr;gap:30px}.envelope-hero__media{order:-1}.catalog-intro p{font-size:1.08rem}} .hero__image{aspect-ratio:1}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.category-copy-card{grid-template-columns:minmax(260px,340px) 54px minmax(0,1fr);gap:25px}.category-copy-card__media{aspect-ratio:1;overflow:hidden;min-height:0}.category-copy-card__media img{width:100%;height:100%;object-fit:cover}.category-copy-card p{max-width:none}.product-intro h1{max-width:1100px;font-size:clamp(3rem,5vw,6rem);text-wrap:balance}.product-gallery--single{grid-template-columns:1fr}.product-gallery--carousel{display:block;position:relative}.product-carousel__stage{width:100%;aspect-ratio:1}.product-carousel__stage .gallery-tile{width:100%;height:100%}.product-carousel__stage .gallery-tile[hidden]{display:none}.product-carousel__arrow[hidden]{display:none} .envelope-hero__media .product-gallery--carousel{position:relative} .envelope-hero__media .gallery-tile{width:100%;height:100%} .envelope-hero__media .gallery-tile img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover} .envelope-hero__media .product-carousel__arrow img{width:24px;height:24px;aspect-ratio:auto;object-fit:fill}.product-carousel__arrow{position:absolute;top:50%;z-index:2;transform:translateY(-50%);display:block;width:auto;height:auto;padding:7px;border:1px solid rgba(255,255,255,0);border-radius:8px;background:rgba(0,0,0,.35);color:#fff;line-height:1;cursor:pointer}.product-carousel__arrow img{width:24px;height:24px;display:block}.product-carousel__arrow[data-carousel-prev]{left:10px}.product-carousel__arrow[data-carousel-next]{right:10px}.product-carousel__arrow:hover{background:rgba(0,0,0,.45)}.product-carousel__arrow:active{transform:translateY(-50%) scale(.96)}.product-unit{grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:4vw}.product-unit__copy h2{font-size:clamp(1.7rem,2.7vw,2.8rem);text-wrap:balance}.product-unit__copy>p:not(.eyebrow){max-width:none}.catalog-intro p,.category-copy-card p,.product-unit__copy>p:not(.eyebrow),.legacy-content p,.legacy-content li{text-align:justify;text-justify:inter-word;hyphens:none;text-align-last:left}.category-copy__intro>p:last-child{max-width:900px;text-align:left}.catalog-intro p{max-width:none;text-align:justify}.legacy-content img.content-image{aspect-ratio:1;object-fit:cover}.gallery-tile img,.catalog-card__image img,.home-card img,.hero__image img{aspect-ratio:1;object-fit:cover}.envelope-hero__media,.envelope-detail-media{aspect-ratio:1;overflow:hidden;min-height:0}.envelope-hero__media img,.envelope-detail-media img{width:100%;height:100%;object-fit:cover} .category-copy-card__media{background:transparent;padding:0}.category-copy-card__media .gallery-tile{width:100%;height:100%;aspect-ratio:1}.envelope-hero__media,.envelope-detail-media{background:transparent;padding:0} .envelope-page__copy p,.envelope-page__details p{max-width:none;text-align:justify;text-justify:inter-word;text-align-last:left} .legacy-content a,.catalog-intro a,.category-copy-card a,.product-unit__copy a,.order-notes__list a{color:var(--green-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .price-list,.category-price-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:6px}.price-list li,.category-price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:22px;border-bottom:1px solid var(--line);padding:4px 0}.price-list li span,.category-price-list li span{color:#555850}.price-list li strong,.category-price-list li strong{font-family:var(--serif);font-weight:400;white-space:nowrap;color:var(--ink)}.category-copy-card__prices ul.category-price-list{display:grid;gap:6px} .pathways .pathway{display:grid;grid-template-rows:auto auto 1fr auto;align-content:stretch;justify-content:initial} .category-copy--thanks .category-copy-card,.category-copy--menus .category-copy-card{grid-template-columns:minmax(320px,450px) 54px minmax(0,1fr)}.hero{grid-template-columns:minmax(300px,.95fr) minmax(380px,1.15fr);gap:4vw}.hero__copy h1{font-size:clamp(2.8rem,5.2vw,5.8rem);white-space:nowrap} .category-price-group + .category-price-group{margin-top:18px}.category-price-group__title{font-family:var(--serif);font-size:1.08rem;font-weight:400;line-height:1.2;margin:0 0 5px;color:var(--ink)} @media(max-width:1050px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.category-copy--thanks .category-copy-card,.category-copy--menus .category-copy-card{grid-template-columns:1fr}} @media(max-width:760px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-copy-card{grid-template-columns:1fr}.category-copy-card__media{max-width:340px}.product-intro h1{font-size:clamp(2.5rem,11vw,4.4rem)}.hero__copy h1{white-space:normal;font-size:clamp(2.7rem,12vw,4.4rem)}} .thanks-order-form .invitation-order-form__contact-fields{max-width:none}.envelope-order-copy{color:#555850;font-size:1.05rem}.catalog-grid--invitations .catalog-card__body{background:#eee8dd;color:var(--ink)}.catalog-grid--invitations .catalog-card__body h3 a{color:var(--ink)}.catalog-grid--invitations .catalog-card__body .text-link{color:var(--green-dark)}.catalog-grid--invitations .catalog-card__body .text-link span{display:none}.catalog-grid--invitations{gap:24px}@media(max-width:760px){.catalog-grid--invitations{gap:14px}}.invitation-order{margin:32px 0 70px;padding:48px 0 62px;background:var(--paper-deep)}.invitation-order__inner{max-width:var(--max);margin:0 auto;padding:0 4vw}.invitation-order h2{font-size:clamp(2rem,3.7vw,3.4rem);margin:0 0 12px}.invitation-order__hint{max-width:none;margin:0 0 28px;color:var(--muted);font-size:.92rem}.invitation-order-form{display:grid;gap:28px}.invitation-order-form__contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:850px}.invitation-order-form__field{display:grid;gap:7px;min-width:0}.invitation-order-form__field label{font-size:.92rem;color:#4f544e}.invitation-order-form__field input,.invitation-order-form__field textarea{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #cfc7ba;border-radius:4px;background:rgba(255,255,255,.72);color:var(--ink);font:inherit}.invitation-order-form__field textarea{resize:vertical;min-height:115px}.invitation-order-form__field input:focus-visible,.invitation-order-form__field textarea:focus-visible,.invitation-order-form__choice input:focus-visible,.invitation-order-form__confirmation input:focus-visible,.invitation-order-form__submit:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px}.invitation-order-form__choices{min-width:0;margin:0;padding:0;border:0}.invitation-order-form__choices legend,.invitation-order-form__item-fields legend{font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:var(--ink)}.invitation-order-form__help{max-width:none;margin:7px 0 12px;color:var(--muted);font-size:.9rem}.invitation-order-form__choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;max-width:920px}.invitation-order-form__choice{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid rgba(80,78,68,.18);cursor:pointer}.invitation-order-form__choice input,.invitation-order-form__confirmation input{flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;accent-color:var(--green-dark)}.invitation-order-form__item-list{display:grid;gap:0}.invitation-order-form__item-fields{min-width:0;margin:0;padding:22px 0 0;border:0;border-top:1px solid #c9c1b4}.invitation-order-form__item-fields legend{padding:0 0 18px}.invitation-order-form__item-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);gap:18px 24px}.invitation-order-form__field--text,.invitation-order-form__field--note,.invitation-order-form__confirmation{grid-column:1/-1}.invitation-order-form__field--quantity input{max-width:240px}.invitation-order-form__confirmation{display:flex;align-items:flex-start;gap:11px;max-width:760px;cursor:pointer;color:#4f544e}.invitation-order-form__confirmation input{margin-top:2px}.invitation-order-form__trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}.invitation-order-form__actions{display:grid;justify-items:start;gap:12px}.invitation-order-form__submit{width:max-content;cursor:pointer}.invitation-order-form__submit[hidden]{display:none!important}.invitation-order-form__submit:disabled{cursor:wait;opacity:.65}.invitation-order-form__status{width:100%;max-width:none;margin:0;color:var(--muted)}.invitation-order-form__status[data-state=success]{display:flex;align-items:center;gap:14px;box-sizing:border-box;padding:17px 20px;border:1px solid #c9d3c2;border-radius:7px;background:#e9eee5;color:var(--green-dark);font-weight:600;line-height:1.5}.invitation-order-form__status-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--green-dark);color:#fff;font-size:26px;font-weight:700;line-height:1}.invitation-order-form__status[data-state=error]{color:#8b342c}@media(max-width:760px){.invitation-order{margin:18px 0 55px;padding:34px 0 42px}.invitation-order-form{gap:22px}.invitation-order-form__contact-fields,.invitation-order-form__choice-list,.invitation-order-form__item-grid{grid-template-columns:1fr}.invitation-order-form__item-grid{gap:15px}.invitation-order-form__field--quantity input{max-width:none}.invitation-order-form__status[data-state=success]{align-items:flex-start;padding:15px}.invitation-order-form__status-icon{flex-basis:36px;width:36px;height:36px;font-size:22px}}.printing-specifics{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}.printing-specifics h3{font-family:var(--serif);font-size:1.2rem;font-weight:400;line-height:1.2;margin:0 0 12px;color:var(--ink)}.printing-specifics ul{margin:0;padding-left:1.25rem;color:#5a5f59}.printing-specifics li{padding-left:.25rem;margin:0 0 7px;text-align:justify;text-justify:inter-word}.order-step{margin:0 0 18px;padding:24px 28px 18px;background:#f1eee7;border:1px solid var(--line);border-radius:14px}.order-step__heading{display:flex;align-items:center;gap:15px;margin:0 0 14px;font-size:clamp(1.45rem,2.3vw,2.15rem);letter-spacing:-.02em}.order-step__number{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--green-dark);color:#fff;font-family:var(--sans);font-size:1.05rem;font-weight:700;letter-spacing:0}.order-step__label{flex:1}.order-step p:last-child{margin-bottom:0}.gallery-modal__prev[hidden],.gallery-modal__next[hidden]{display:none!important}.product-specs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.product-specs ul{margin:0;padding-left:1.25rem;color:#5a5f59}.product-specs li{padding-left:.25rem;margin:0 0 7px;text-align:justify;text-justify:inter-word}.product-specs li:last-child{margin-bottom:0}.product-specs strong{font-weight:600;color:var(--ink)}.order-guideline-heading{margin-top:34px!important;padding:12px 16px;border-left:4px solid var(--green-dark);background:#eee8dd;color:var(--green-dark);font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.015em}.cjenik-delivery-list{margin:14px 0 22px;padding-left:1.25rem}.cjenik-delivery-list li{margin:0 0 7px;padding-left:.25rem}.cjenik-delivery-list strong{font-weight:600;color:var(--ink)}.cjenik-service-list{margin:14px 0 22px;padding-left:1.25rem;display:grid;gap:8px}.cjenik-service-list li{margin:0;padding-left:.25rem}.contact-layout{max-width:920px;margin:0}.contact-layout__left{display:grid;gap:20px}.contact-card,.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 32px}.contact-card h2,.contact-form-card h2{font-size:clamp(1.7rem,2.8vw,2.45rem);margin:0 0 12px}.contact-card__intro{max-width:62ch;color:#555850;margin:0 0 20px}.contact-card__intro a,.contact-service-links a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}.contact-card__details{list-style:none!important;padding:0!important;margin:18px 0 0!important;display:grid;gap:0}.contact-card__details .contact_info_item{border-top:1px solid var(--line);padding:12px 0}.contact-card__details .contact_info_wrapper{display:flex;gap:12px;align-items:flex-start}.contact-card__details .contact_info_icon{width:22px;flex:none;color:var(--green-dark);font-size:12px}.contact-card__details .contact_info_text{color:#4f544e}.contact-service-links{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line);display:grid;gap:0}.contact-service-links li{padding:12px 0;border-bottom:1px solid var(--line)}.contact-service-links li::before{content:'→';display:inline-block;margin-right:10px;color:var(--green-dark)}.contact-form-card{background:#f7f3eb}.contact-form-card h2{margin-bottom:10px}.contact-form-placeholder{margin:0;max-width:none;background:transparent;border:1px dashed #a99f91}.contact-card,.contact-form-card{background:transparent;border:0;border-radius:0;padding:30px 0}.contact-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contact-card h2,.contact-form-card h2{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.45rem);margin:0 0 12px}.contact-card__intro{max-width:70ch;margin:0 0 22px;color:#555850}.contact-card__details{list-style:none!important;padding:0!important;margin:22px 0 0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:0}.contact-card__details .contact_info_item{border-top:1px solid var(--line);padding:14px 0}.contact-card__details .contact_info_item:nth-child(-n+2){border-top:0}.contact-card__details .contact_info_wrapper{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:start}.contact-card__details .contact_info_icon{display:none}.contact-info-label{color:var(--muted);font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.contact-card__details .contact_info_text{color:#4f544e}.contact-service-links__title{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.contact-service-links{list-style:none;padding:0;margin:0;display:flex;gap:25px;flex-wrap:wrap}.contact-service-links li{padding:10px 0;border:0}.contact-service-links li::before{content:'→';display:inline-block;margin-right:10px;color:var(--green-dark)}.contact-form-card{margin-top:30px;padding:28px 30px;background:#eee8dd;border-radius:14px}.contact-form-card h2{margin-bottom:10px}.contact-form-placeholder{margin:0;max-width:none;background:rgba(255,255,255,.25);border:1px dashed #b2a797}.contact-card__details{grid-template-columns:1fr;max-width:780px}.contact-card__details .contact_info_item{border-top:1px solid var(--line)}.contact-card__details .contact_info_item:first-child{border-top:0}.contact-card__details .contact_info_item{border-top:0;padding:8px 0}.contact-card__details .contact_info_wrapper{align-items:center}.contact-info-label{line-height:1.2}.contact-card__details .contact_info_text{line-height:1.35}.contact-service-links{display:grid;gap:0}@media(max-width:760px){.order-step{padding:20px 18px 14px;border-radius:12px}.order-step__heading{align-items:flex-start;gap:11px;font-size:1.45rem}.order-step__number{flex-basis:38px;width:38px;height:38px;font-size:.95rem}.order-guideline-heading{padding:10px 13px}.contact-card,.contact-form-card{padding:22px 18px}.contact-card__details{grid-template-columns:1fr}.contact-card__details .contact_info_item:nth-child(-n+2){border-top:1px solid var(--line)}.contact-card__details .contact_info_item:first-child{border-top:0}.contact-card__details .contact_info_wrapper{grid-template-columns:100px minmax(0,1fr)}.contact-service-links{display:grid;gap:0}.contact-service-links li{padding:10px 0}}.contact-inquiry-form{display:grid;gap:18px;margin-top:20px}.contact-inquiry-form__field{display:grid;gap:7px}.contact-inquiry-form label{font-family:var(--sans);font-size:.92rem;color:#4f544e}.contact-inquiry-form input,.contact-inquiry-form textarea{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #cfc7ba;border-radius:6px;background:rgba(255,255,255,.72);color:var(--ink);font:inherit}.contact-inquiry-form textarea{min-height:170px;resize:vertical}.contact-inquiry-form input:focus,.contact-inquiry-form textarea:focus{outline:2px solid var(--green-dark);outline-offset:2px;border-color:var(--green-dark)}.contact-inquiry-form__submit{width:max-content;cursor:pointer;font-family:var(--sans)}.contact-inquiry-form__submit:disabled{cursor:wait;opacity:.65}.contact-inquiry-form__status{margin:0;color:var(--muted);font-family:var(--sans)}.contact-inquiry-form__status[data-state=success]{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;margin-top:2px;padding:16px 18px;border:1px solid #c9d3c2;border-radius:9px;background:#e9eee5;color:var(--green-dark);font-size:1.05rem;line-height:1.45}.contact-inquiry-form__status-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--green-dark);color:#fff;font-family:var(--sans);font-size:26px;font-weight:700;line-height:1}.contact-inquiry-form__status-message{font-weight:600}.contact-inquiry-form__status[data-state=error]{color:#8b342c}.contact-inquiry-form__trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}@media(max-width:760px){.contact-inquiry-form{gap:15px}.contact-inquiry-form textarea{min-height:140px}}.invitation-order{margin:32px 0 70px;padding:48px 0 62px;background:var(--paper-deep)}.invitation-order__inner{max-width:var(--max);margin:0 auto;padding:0 4vw}.invitation-order h2{font-size:clamp(2rem,3.7vw,3.4rem);margin:0 0 12px}.invitation-order__hint{max-width:none;margin:0 0 28px;color:var(--muted);font-size:.92rem}.invitation-order-form{display:grid;gap:28px}.invitation-order-form__contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:850px}.invitation-order-form__field{display:grid;gap:7px;min-width:0}.invitation-order-form__field label{font-size:.92rem;color:#4f544e}.invitation-order-form__field input,.invitation-order-form__field textarea{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #cfc7ba;border-radius:4px;background:rgba(255,255,255,.72);color:var(--ink);font:inherit}.invitation-order-form__field textarea{resize:vertical;min-height:115px}.invitation-order-form__field input:focus-visible,.invitation-order-form__field textarea:focus-visible,.invitation-order-form__choice input:focus-visible,.invitation-order-form__confirmation input:focus-visible,.invitation-order-form__submit:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px}.invitation-order-form__choices{min-width:0;margin:0;padding:0;border:0}.invitation-order-form__choices legend,.invitation-order-form__item-fields legend{font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:var(--ink)}.invitation-order-form__help{max-width:none;margin:7px 0 12px;color:var(--muted);font-size:.9rem}.invitation-order-form__choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;max-width:920px}.invitation-order-form__choice{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid rgba(80,78,68,.18);cursor:pointer}.invitation-order-form__choice input,.invitation-order-form__confirmation input{flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;accent-color:var(--green-dark)}.invitation-order-form__item-list{display:grid;gap:0}.invitation-order-form__item-fields{min-width:0;margin:0;padding:22px 0 0;border:0;border-top:1px solid #c9c1b4}.invitation-order-form__item-fields legend{padding:0 0 18px}.invitation-order-form__item-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);gap:18px 24px}.invitation-order-form__field--text,.invitation-order-form__field--note,.invitation-order-form__confirmation{grid-column:1/-1}.invitation-order-form__field--quantity input{max-width:240px}.invitation-order-form__confirmation{display:flex;align-items:flex-start;gap:11px;max-width:760px;cursor:pointer;color:#4f544e}.invitation-order-form__confirmation input{margin-top:2px}.invitation-order-form__trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}.invitation-order-form__actions{display:grid;justify-items:start;gap:12px}.invitation-order-form__submit{width:max-content;cursor:pointer}.invitation-order-form__submit[hidden]{display:none!important}.invitation-order-form__submit:disabled{cursor:wait;opacity:.65}.invitation-order-form__status{width:100%;max-width:none;margin:0;color:var(--muted)}.invitation-order-form__status[data-state=success]{display:flex;align-items:center;gap:14px;box-sizing:border-box;padding:17px 20px;border:1px solid #c9d3c2;border-radius:7px;background:#e9eee5;color:var(--green-dark);font-weight:600;line-height:1.5}.invitation-order-form__status-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--green-dark);color:#fff;font-size:26px;font-weight:700;line-height:1}.invitation-order-form__status[data-state=error]{color:#8b342c}@media(max-width:760px){.invitation-order{margin:18px 0 55px;padding:34px 0 42px}.invitation-order-form{gap:22px}.invitation-order-form__contact-fields,.invitation-order-form__choice-list,.invitation-order-form__item-grid{grid-template-columns:1fr}.invitation-order-form__item-grid{gap:15px}.invitation-order-form__field--quantity input{max-width:none}.invitation-order-form__status[data-state=success]{align-items:flex-start;padding:15px}.invitation-order-form__status-icon{flex-basis:36px;width:36px;height:36px;font-size:22px}} /* Shared columns for current and anchor price tables */ .price-comparison{margin:14px 0;min-width:0} .price-comparison__table{width:100%;border-collapse:collapse;table-layout:auto} .price-comparison__table thead th{padding:4px 4px 6px;color:#454a43;font-family:var(--sans);font-size:.82rem;font-weight:600;line-height:1.25;text-align:left;white-space:nowrap} .price-comparison__table thead th:nth-child(2){text-align:center} .price-comparison__table thead th:nth-child(3){text-align:right} .price-comparison__table thead th.price-comparison__anchor-heading{color:#777b74;font-size:.68rem;font-weight:400;line-height:1.2;text-align:right;white-space:normal} .price-comparison__table tbody tr{border-bottom:1px solid var(--line)} .price-comparison__table tbody th,.price-comparison__table tbody td{padding:5px 4px;line-height:1.35;white-space:nowrap} .price-comparison__table tbody th{color:#555850;font-family:var(--sans);font-size:1rem;font-weight:400;text-align:left} .price-comparison__table tbody td{font-family:var(--serif);text-align:center} .price-comparison__table tbody td.price-comparison__current{color:var(--ink);font-size:1.05rem;font-weight:400} .price-comparison__table tbody td.price-comparison__anchor{color:#777b74;font-size:.88rem;text-align:right} @media(max-width:420px){.price-comparison__table thead th{padding:3px 2px 5px;font-size:.75rem}.price-comparison__table thead th.price-comparison__anchor-heading{font-size:.64rem}.price-comparison__table tbody th,.price-comparison__table tbody td{padding:4px 2px;font-size:.84rem}.price-comparison__table tbody td.price-comparison__current{font-size:.9rem}.price-comparison__table tbody td.price-comparison__anchor{font-size:.76rem}.price-comparison--source-price-list .price-comparison__table tbody th,.price-comparison--source-price-list .price-comparison__table tbody td.price-comparison__current{font-size:.8rem}.price-comparison--source-price-list .price-comparison__table tbody td.price-comparison__anchor{font-size:.71rem}} .price-anchor-inline{color:#777b74;font-size:.9em} .price-comparison--cjenik-services .price-comparison__table{table-layout:fixed}.price-comparison--cjenik-services .price-comparison__product-column{width:50%}.price-comparison--cjenik-services .price-comparison__current-column{width:24%}.price-comparison--cjenik-services .price-comparison__anchor-column{width:26%}.price-comparison--cjenik-services .price-comparison__table thead th:first-child{white-space:normal}.price-comparison--cjenik-services .price-comparison__table tbody th{white-space:normal;vertical-align:top}.price-comparison--cjenik-services .price-comparison__table tbody td{white-space:nowrap;vertical-align:top}.cjenik-service-note{color:var(--muted);font-size:.9em} /* --- Mobilni/padajuci izbornik: indikator trenutne stranice --- Podcrtana crta u padajucem izborniku pada tocko izmedu dva naslova, pa nije bilo jasno koja je stranica odabrana. Umjesto crte ide puna podloga, a odabrana dobiva i zeleni rub slijeva. Dodano 2026-10-07. */ @media(max-width:1360px){ .site-nav a{padding:10px 14px;border-bottom:0;border-radius:3px} .site-nav a:hover{background:var(--paper-deep)} .site-nav a.is-active{background:var(--paper-deep);color:var(--green-dark);box-shadow:inset 3px 0 0 var(--green)} } /* Karusel u herou kuverti: figure je bio aspect-ratio:1 + overflow:hidden, pa je figcaption (opis ispod fotografije) bio odrezan. Kvadrat ostaje na pozornici, figure se vise ne sijece. */ .envelope-hero__media{aspect-ratio:auto;overflow:visible} .envelope-hero__media .product-carousel__stage{width:100%;aspect-ratio:1;overflow:hidden} /* Hero karusel na naslovnici. .hero__image img je siroko pravilo i bi pogodilo i strelice, pa se ovdje vracaju njihove dimenzije. */ .hero__image{position:relative} .hero__image .product-carousel__stage{width:100%;height:100%;aspect-ratio:auto} .hero__image .gallery-tile{width:100%;height:100%} .hero__image .gallery-tile img{width:100%;height:100%;object-fit:cover} .hero__image .product-carousel__arrow img{width:24px;height:24px;aspect-ratio:auto;object-fit:fill} /* Klizni karusel: stage je klipujuci okvir, track je traka koja se pomice. Prije se samo prebacivalo display:none, pa je zamjena bila skokovita. */ .product-carousel__stage{overflow:hidden} .product-carousel__track{display:flex;height:100%;transform:translateX(0);transition:transform .5s cubic-bezier(.4,0,.2,1)} /* Veliki hero kadar: prebrzo klizenje djeluje nervozno. Sporije samo na heroima. */ .hero__image .product-carousel__track, .envelope-hero__media .product-carousel__track{transition-duration:.9s} .product-carousel__track .gallery-tile{flex:0 0 100%;width:100%;height:100%;aspect-ratio:auto} @media(prefers-reduced-motion:reduce){.product-carousel__track{transition:none}} /* Potpis ispod hero leada: Georgia kurziv za tvrdnju, sans razmaknut za žig. Nazad običan paragraf - tri tipografske razine drže hijerarhiju bez boje. */ .hero__sign{max-width:34rem;margin:28px 0 0} .hero__sign::before{content:"";display:block;width:48px;height:1px;background:var(--line);margin-bottom:20px} .hero__sign em{display:block;font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.3;color:var(--ink)} .hero__sign span{display:block;margin-top:12px;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:#8b8174} .hero__sign strong{font-weight:400;text-transform:uppercase;letter-spacing:.25em} /* Traka dokaza ispod heroa: jedan font, jedna velicina, dvije kolone. */ .proof{max-width:var(--max);margin:0 auto;padding:0 4vw} .proof__list{list-style:none;margin:0;padding:24px 0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 34px;border-top:1px solid var(--line);font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--muted)} .proof__list li{position:relative;padding-left:16px;text-wrap:pretty} .proof__list strong{font-weight:700;color:var(--ink)} .proof__list li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--green)} @media(max-width:760px){.proof__list{grid-template-columns:minmax(0,1fr)}} /* Kuverte uz pozivnicu: oblik i boja, neposredno prije obrasca za narudzbu. Pozadina je ista svijetlozelena kao .pathway--green. */ .envelope-picker{margin:56px 0 0;padding:44px 0 52px;background:#dfe5dc} .envelope-picker__inner{max-width:var(--max);margin:0 auto;padding:0 4vw} .envelope-picker h2{margin:0 0 24px;font-size:clamp(1.7rem,3vw,2.6rem)} .envelope-picker h3{margin:0 0 14px;font-size:1.05rem} .envelope-picker__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:start} .envelope-picker .product-gallery--carousel{max-width:none} .envelope-picker figure{margin:0} .envelope-picker .source-print-reference--envelope-colors img{width:100%;height:auto} @media(max-width:900px){.envelope-picker__grid{grid-template-columns:minmax(0,1fr)}} /* Selectovi za oblik i boju kuverte u obrascu za narudzbu. Fieldset je skriven dok se ne oznaci "Pozivnice" - explicitni display bi inace nadjakao atribut hidden, pa ide i pravilo za [hidden]. */ .invitation-order-form__envelope{min-width:0;margin:0;padding:22px 0 0;border:0;border-top:1px solid var(--line);display:grid;gap:12px} .invitation-order-form__envelope[hidden]{display:none} .invitation-order-form__envelope-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:850px} .invitation-order-form__field select{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #cfc7ba;border-radius:4px;background:rgba(255,255,255,.72);color:var(--ink);font:inherit} .invitation-order-form__field select:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px} @media(max-width:760px){.invitation-order-form__envelope-fields{grid-template-columns:minmax(0,1fr)}} /* Vidljivi natpisi slajdova ("Slika A", "Slika B"...) preko donjeg ruba fotografije, da se fotografija moze imenovati u upitu ili narudzbi. Klasa je na tileu, pa radi i u karuseli i kod jedne fotografije. */ .gallery-tile--labelled{position:relative} .product-carousel__label{position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 11px;border-radius:6px;background:rgba(20,23,20,.72);color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;pointer-events:none} /* ============================================================ Redesign 2026-10-08 — tipografski identitet i ritam Namjerno NIE mijenjaju fotografije ni omjere (kvadrat je izbor: isti kadar radi na Facebooku, Instagramu i u karuseli). Svaki blok je samostalan pa se može vraćati jedan po jedan. ============================================================ */ /* 1) Zrnatost papira: UKLONJENA na Simonov zahtjev (2026-10-08). Probano u dvije verzije - SVG feTurbulence (šum je bio nevidljiv) i PNG tile sa šumom po pikselu (vidljiv, ali je smetao). Alat i dokumentacija ostaju: node tools/make-grain-tile.mjs --alfa=18 --apply, pa vraća se samo background-image:var(--zrno) na površinama papira. */ /* 2) Zaglavlje: bez mat-sklasa. Neprozirni papir + hairline. background-color (ne pozadina u skraćenici) da se ne poništi zrnatost. */ .site-header{background-color:var(--paper);backdrop-filter:none} /* 3) Bodoni traži drugu mjeru od Georgie: širi razmak, debljina 500, a lead u herou ide u sans jer Bodoni ispod ~22 px ima preslabu liniju. */ /* 3) Bodoni Moda ima optičku os (opsz 6..96). Uz font-optical-sizing:auto browser na naslovu od 83 px sam bira DISPLAY kroj, a u display kroju su hairline linije najtanje - zato nestaju na velikom naslovu. Mjera se drži ručno na tekstualnoj vrijednosti, a debljina diže na 600. */ h1,h2,h3,h4,.hero__sign em,.home-card span,.home-card b,.catalog-card h3,.category-copy-card__number,.site-footer strong,.faq-item summary,.price-comparison__table td,.price-comparison__table th{font-optical-sizing:none;font-variation-settings:"opsz" 16,"wght" 650} h1,.pathway--green h2,.hero__sign em{font-variation-settings:"opsz" 20,"wght" 650} h1{letter-spacing:-.02em} h2{letter-spacing:-.012em} /* Bodoni ima višu kapitalu i karune (č, ž) od Georgie - 1.03 je premalo za višeredne naslove. */ h1,h2{line-height:1.08} .hero__copy>p:not(.eyebrow){font-family:var(--sans);font-size:1.05rem;line-height:1.72;color:#4f534d} .hero__sign em{font-size:1.55rem} .category-copy__intro>p:last-child,.catalog-intro p,.product-intro .catalog-intro p{font-family:var(--sans);font-size:1.05rem;line-height:1.72} .faq-item summary{font-size:1.25rem;font-weight:500} .category-copy-card__number{font-weight:500} /* 4) Akcent: foil zlato umjesto kadulje na linkovima i oznakama. */ .site-nav a:hover,.site-nav a.is-active{color:var(--ink);border-color:var(--foil)} .text-link:hover{color:var(--foil)} .proof__list li::before{background:var(--foil)} .gallery-modal button:focus-visible,.site-nav a:focus-visible,.button:focus-visible,a:focus-visible{outline-color:var(--foil)} /* 5) Chrome: oštri rubovi i neprozirna polja (bez translucidentnih ispuna i zaobljenih kutova koji odaju UI-kit). */ .button{border-radius:0;padding:13px 22px} .button--dark{background:var(--ink);border-color:var(--ink);color:#fff} .button--dark:hover{background:transparent;color:var(--ink)} .menu-toggle{border-radius:0} .invitation-order-form__field input,.invitation-order-form__field textarea{border-radius:0;background:#fff;border-color:#c9c2b6} .invitation-order-form__field select{border-radius:0;background:#fff} /* 6) Strelice karusela i lightboxa: vraćeno na originalno (PNG strelice u tamnom piliću, X za zatvaranje). Tipografske strelice (‹ › iz CSS-a) su maknute, pa se primjenjuju pravila iznad - HTML nikad i nije mijenjan, pa se PNG automatski vraća. */ /* 7) Naljepnica slajda: tiskana etiketa, ne UI pilić. */ .product-carousel__label{left:8px;bottom:8px;padding:4px 9px;border:1px solid rgba(32,35,32,.22);border-radius:0;background:rgba(250,247,240,.94);color:var(--ink);font-size:10px;letter-spacing:.14em;text-transform:uppercase} /* 7b) (vidi napomenu pod 6) - lightbox kontrole su također vraćene na originalno) */ /* 8) Pravdan tekst bez hidratacije radio je rijeke praznog prostora. */ .catalog-intro p,.category-copy-card p,.product-unit__copy>p:not(.eyebrow),.legacy-content p,.legacy-content li,.envelope-page__copy p,.envelope-page__details p{hyphens:auto;-webkit-hyphens:auto} /* 9) Naslovnica: tri jednake kartice -> asimetrija, i jedan tamni blok umjesto treće pastelne. Traka dokaza ide preko cijele širine. */ .hero{padding-right:0} .hero__image{margin-top:-14px} /* Tri jednake kartice - kao prije. Asimetrija (zelena ploča 2x2) je na papiru izgledala fora, ali na ekranu neuredno: različite visine i prazna polja. Simon: "sva tri taba ista, tj. iste veličine". */ .pathways{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .pathway{min-height:230px;padding:28px} .pathway__label{color:var(--foil);letter-spacing:.18em} /* Tamna tinta na trećoj kartici je maknuta: dok su kartice bile različitih veličina, tamna je nosila težinu i imala smisla. Kad su tri jednake, crni blok djeluje kao da je ispao iz niza. Vraćeno na originalnu ružičastu (--rose); oznaka "Od ideje do tiska" sada koristi --foil-dark, koji na ružičastoj ima 5,2:1. */ .proof{max-width:none;background-color:var(--ink-deep)} .proof__list{max-width:var(--max);margin:0 auto;padding:30px 4vw 34px;border-top:0;color:#c9c3ba} /* 19) Traka dokaza: umjesto dviju kolona jedan centrirani stupac, jedan ispod drugog, sa zbijenim proredom. Crtica ispred teksta pada jer u centriranom nizu visi lijevo i ne poravnava se ni s čim; broj u debelom je dovoljan marker. Stupac je sužen na 44 rem da redovi ne vuku preko cijele širine. Širina je dizignuta na 48 rem jer je najduža natuknica ("preko 150 varijanti kuverti iz vlastite proizvodnje dostupno u petnaestak oblika i boja", uključujući zlatne crtice s obje strane) široka 593 px, a stupac od 44 rem na širokom ekranu ostavlja samo 552 px teksta - natuknica bi se lomila na dva retka dok su ostale tri na jednom, i ritam trake bi se raspao. Obloga je ograničena s min(4vw, 40 px): 4vw raste s ekranom, pa bi na 2560 px obloga pojela 205 px i stupac bi se opet suzio ispod 593 px. Sa 40 px kapa sadržaj je uvijek 688 px na svim ekranima širim od 768 px. */ .proof__list{max-width:48rem;grid-template-columns:minmax(0,1fr);gap:5px;text-align:center;line-height:1.45;padding:30px min(4vw,40px) 34px} .proof__list li{padding-left:0} /* Zlatna crtica s obje strane natuknice. Nije više apsolutno pozicionirana crtica nego inline znak, jer u centriranom nizu mora pratiti tekst i ostati u istom retku. Em-crtica, jer je takva i drugdje na stranici. */ .proof__list li::before,.proof__list li::after{content:"—";display:inline;position:static;width:auto;height:auto;background:none;color:var(--foil);font-weight:700} .proof__list li::before{margin-right:9px} .proof__list li::after{margin-left:9px} .proof__list strong{color:#fff} @media(max-width:760px){.pathway--green{grid-column:auto;grid-row:auto;min-height:190px}.hero{padding-right:4vw}} /* 11) Sitna velika slova su bila najslabija točka stranice: 11 px + debljina 400 + razmak 0,25 em + boja niskog kontrasta. Izmjereno na papiru #f5f1e9: #8b8174 (eyebrow) -> 3,40:1 #a9834e (pathway oznaka) -> 3,08:1 oboje ispod praga 4,5:1 za sitni tekst, a uz to antialiasing pojede jednopolne linije pa slova izgledaju isprekidano. Lijek u tri smjera: debljina, manji razmak, tamnija boja. */ .eyebrow,.pathway__label{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--foil-dark)} .hero-points{font-size:11px;font-weight:600;letter-spacing:.1em;color:#5f6159} .hero__sign span{font-size:12px;font-weight:700;letter-spacing:.14em;color:#5f6159} .hero__sign strong{font-weight:700;letter-spacing:.14em} /* 17) Glavni izbornik: aktivna stranica i hover nose pozadinu, ne samo crtu. Ranije je signal bio 1 px obrub u foil zlatu - na 11 px tekstu to je jedva vidljivo i čita se kao podcrtavanje linka, a ne kao oznake stranice. Pozadine su iz palete: topli papirasti ton za hover, kadulja (ista kao ploča "Kolekcija" i blok kuverti) za aktivnu stranicu. */ .site-nav ul{gap:4px} .site-nav a{padding:8px 10px;border-bottom:0;border-radius:0;background:transparent;font-weight:600;letter-spacing:.06em} .site-nav a:hover{background:#e7e1d5;color:var(--ink)} .site-nav a.is-active{background:#dfe5dc;color:var(--green-dark)} /* kutije poravnate s desnim rubom sadržaja (bez izlaska preko ruba) */ .product-carousel__label{font-size:11px;font-weight:700;letter-spacing:.1em} /* 12) Bodoni kurziv ima tanju liniju od uspravnog kroja pri istoj debljini, a potpis u herou je jedini kurziv - traži vlastitu mjeru, ne mjeru naslova. */ .hero__sign em{font-size:1.5rem;font-variation-settings:"opsz" 12,"wght" 700} /* 13) Zašto je dio eyebrowa i dalje bio u serifu: na stranicama poput /pozivnice-za-vjencanje/, /vrste-tiska/, /kako-naruciti/, /cjenik/ i /kontakt/ eyebrow je

unutar .page-hero, a pravilo .page-hero p { font-family:var(--serif); font-size:1.2rem; color:var(--muted) } ima prioritet 0,1,1 i pobjeđuje .eyebrow (0,1,0). Ovdje se ista mjera ponavlja s roditeljem u selektoru (0,2,0) pa pobjeđuje. */ .page-hero .eyebrow,.product-intro .eyebrow,.catalog-intro .eyebrow,.envelope-page__intro .eyebrow, .envelope-page__copy .eyebrow,.legacy-content .eyebrow,.category-copy__intro .eyebrow, .section-heading .eyebrow,.order-guideline-heading .eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--foil-dark)} /* 14) Naslovi koraka na /kako-naruciti/ (.order-step__label) su serif na 34,4 px s debljinom 400 - nisu bili na popisu naslova pa nisu dobili optičku mjeru. */ .order-step__label,.order-step__heading{font-optical-sizing:none;font-variation-settings:"opsz" 20,"wght" 650} /* 20) Fallback obrasca kad API (Node app) nije dostupan. Poruka nudi alternativni put do narudžbe, pa neuspješan POST ne znači izgubljenog posjetitelja. Linkovi su naslijeđeni iz /kontakt/. */ .form-fallback{display:block;font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--ink)} .form-fallback a{color:var(--green-dark);text-decoration:underline;text-underline-offset:.18em} .form-fallback a:hover{text-decoration:none} /* 21) Tri ispravke, 2026-10-09. a) TABOVI NA NASLOVNICI SE NISU SLAGALI JEDAN ISPOD DRUGOG. Stožni zapis .pathways{grid-template-columns:1fr} stoji u @media(max-width:760px) na offsetu 12700, ali je isti selector kasnije ponovljen BEZ medija upita (offset 54278, sekcija 9). Medija upit ne dodaje specifičnost: oba su (0,1,0), pa kasnije pobjeđuje - i na mobitelu je ostalo repeat(3,1fr), tj. tri uska stupca. Lijek: ovdje se mobilna varijanta izričito ponavlja kao zadnja u datoteci, pa je redoslijed više ne može poništiti. b) ULAZ U EDITOR NA MOBITELU. /izradi-svoj-dizajn/ je imao jedan gumb na /editor/. Desktop editor je platno s bočnim panelima i na uskom ekranu nije upotrebljiv. Kao na iziwedd.com/izradi-pozivnicu/ postoje dva ulaza: desktop -> /editor/ i mobilni -> /editor/index-mobile.html, a koji se vidi odlučuje samo širina ekrana. 820px je preuzeto iz iziwedda; to je granica gdje desktop editor prestaje stati, a ne širina telefona. c) TANKE LINIJE BODONIJA. Bodoni Moda ima izrazito visoki kontrast poteza. Na 16 px tanki potez pada ispod ~1 px i antialiasing ga razlije, pa naslov izgleda isprekidano - najgore na mobitelu, gdje je efektivna veličina manja. Font je varijabilan i oba os-a su u podskupljenom woff2 (mjereno na latin podskupu, isti tekst na 100 px): opsz 6 -> 837,90 px opsz 96 -> 815,75 px (niži opsz = deblji wght 400 -> 792,40 px wght 700 -> 831,15 px tanki potezi) Zato se za sitni serif ide niži opsz (to je os koji je za to i napravljen) i viši wght, a veliki naslovi zadržavaju elegantniji opsz 20. */ /* a) tri taba jedan ispod drugog */ @media(max-width:760px){ .pathways{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 5vw 60px} .pathway{min-height:190px;padding:24px} } /* b) dva ulaza u editor, jedan po širini ekrana */ .editor-entry--mobile{display:none} /* Napomena o tome da desktop editor ima više opcija korisna je SAMO onome tko otvara mobilni editor. Na desktopu je to suvišan tekst ispod gumba, pa je skriven istim prekidačem (820px) kojim se prebacuje i CTA. */ .source-device-note{display:none} @media(max-width:820px){ .editor-entry--desktop{display:none} .editor-entry--mobile{display:inline-flex} .source-device-note{display:block} } /* c) deblji tanki potezi - druga runda. fvar tablica woff2 (fonttools): wght 400-900, opsz 6-96. Prva runda je stala na wght 660 jer je @font-face tvrdio "400 700", iako datoteka ide do 900 - ograničenje je bilo u CSS-u, ne u fontu. Pravilo: manji tekst = niži opsz (deblji TANKI potez) i viši wght. Desktop: h1 800, h2 820, sitni serif 840. Mobitel: 860 / 880 / 900. */ h1,h2,h3,h4,.home-card span,.home-card b,.catalog-card h3,.category-copy-card__number,.site-footer strong,.faq-item summary,.price-comparison__table td,.price-comparison__table th,.order-step__label,.order-step__heading{font-optical-sizing:none;font-variation-settings:"opsz" 12,"wght" 800} h1{font-variation-settings:"opsz" 12,"wght" 800} h2,.pathway--green h2{font-variation-settings:"opsz" 10,"wght" 820} h3,.catalog-card h3,.faq-item summary,.category-copy-card__number,.price-comparison__table td,.price-comparison__table th{font-variation-settings:"opsz" 8,"wght" 840} /* Potpis u kurzivu je najosjetljiviji: kurzivni Bodoni ima tanje poteze od uspravnog, a stoji na 1,5rem. Zato je iznad naslova. Mora biti ZADNJI u nizu - grupno pravilo gore ga inače poništi (ista specifičnost, kasnije pobjeđuje; to je bio uzrok regresije u prvoj rundi). */ .hero__sign em{font-variation-settings:"opsz" 9,"wght" 840} @media(max-width:760px){ h1{font-variation-settings:"opsz" 10,"wght" 860} h2,.pathway h2,.pathway--green h2{font-variation-settings:"opsz" 8,"wght" 880} h3,.catalog-card h3,.faq-item summary,.category-copy-card__number{font-variation-settings:"opsz" 7,"wght" 900} .hero__sign em{font-variation-settings:"opsz" 8,"wght" 900} } /* d) tri propusta koje je auditat svih stranica u 390 px pronasao. Provjera je isla po svakom elementu ciji computed font-family pocinje s "Bodoni Moda", a ne po popisu selektora - zato je nasla ono sto lista naslova nije pokrivala: - legend u obrascu na /tisak-vaseg-dizajna/ : serif 20 px, wght 400 - .page-hero p (sekcija 13) : serif 19,2 px, wght 400 - .button uopce nema font-family, pa nasljeduje. Na normalnim stranicama roditelj je sans i gumb je sans. Na 404 stranici roditelj je .page-hero p koji je serif -> gumb postaje Bodoni na 12 px, sta je najgori moguci slucaj za ovaj kroj. Lijek je eksplicitan font-family na .button, a ne podebljanje: 12 px Bodoni se ne moze spasiti. .eyebrow je izuzet - on je sans (0,2,0 pravilo), a Karla ima wght os 300-800 pa bi ga grupno pravilo pomaklo sa 700 na 760. */ legend,.page-hero p:not(.eyebrow){font-optical-sizing:none;font-variation-settings:"opsz" 10,"wght" 760} .button{font-family:var(--sans)} @media(max-width:760px){ legend,.page-hero p:not(.eyebrow){font-variation-settings:"opsz" 8,"wght" 800} } /* 22) Specifikacije artikla kao natuknice, i manji h1 na mobitelu. Test na jednoj stranici (P114) prije nego se primijeni na svih 41. Natuknice nose ono što je prije bilo rep naslova: papir, vrstu tiska, format. Sans jer je to tehnički podatak, ne naslov - i zato što Bodoni ispod ~22 px ima preslabu liniju (isto pravilo kao za lead u herou). Crtica umjesto pike se poklapa s .hero-points i trakom činjenica. h1 na mobitelu: "POZIVNICA P114" je u Bodoniju na wght 860 širok 8,73 x visine fonta (mjereno: 39,04 px -> 341 px), a dostupno u viewportu je ~90% sirine ekrana (5vw obloga sa svake strane) minus klizna traka. Na 390 px dostupno je 336 px, pa 10vw (39 px -> 341 px) FALI 5 px i tekst se lomi u dva retka. 9,5vw daje 0,83 x sirine ekrana -> 323 px na 390 px, s rezervom od ~13 px, i staje na 360 px i 320 px viewportu. */ .spec-list{list-style:none;margin:0 0 20px;padding:0;max-width:52ch; font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--muted)} .spec-list li{position:relative;padding:3px 0 3px 16px;font-weight:700} .spec-list li::before{content:"•";position:absolute;left:0;top:0;color:var(--foil-dark)} @media(max-width:760px){ .product-intro h1{font-size:clamp(1.8rem,9.5vw,3.4rem)} } /* 23) Redak dostave na dnu cjenika artikla i napomena o obrascu ispod cijena. Redak dostave namjerno izgleda kao i redovi kolicine - to je cjenovna linija i tako se cita. Jedino sto se razlikuje je razmak iznad, da se odvoji od niza kolicina bez druge linije u tablici (svaki red vec ima donju obrubu, pa dodatna gornja daje deblju crtu). Napomena je link na #naruci-tisak: obrazac je na dnu stranice, a na mobitelu je stranica artikal duga ~6 ekrana. Link je boje zelene (akcija), ali s tamnom podvlacenom linijom da ne vika. */ .price-comparison__table tr.price-comparison__row--extra th, .price-comparison__table tr.price-comparison__row--extra td{padding-top:9px} .price-block__note{margin:10px 0 0;font-family:var(--sans);font-size:.9rem;line-height:1.45} .price-block__note a{color:var(--green-dark);font-weight:600;text-decoration-color:var(--line); text-underline-offset:3px} .price-block__note a:hover{text-decoration-color:var(--green-dark)} /* 24) Uvodni odlomak u sekciji kuverti, i pozadina sekcija od ruba do ruba. Pozadina je i prije bila na samoj sekciji - problem je bio sto je sekcija stajala u omacu .product-flow sirine max 1440 px, pa je zelena sjecila samo do te sirine (izmjereno: lijevo 223 px, desno 1663 px u viewportu od 1886 px). Ogranichenje je premjesteno s omaca na .product-unit, jer su jedina direktna djeca omaca product-unit, envelope-picker i invitation-order (provjereno na svih 42 stranice s omacem). Artikli time zadrzavaju potpuno istu sirinu, a dvije sekcije s pozadinom sezu do ruba ekrana. Namjerno bez klasicnog "100vw" breakout trika: 100vw ukljucuje kliznu traku, pa u viewportu s trakom daje ~8 px viska i horizontalni scroll. Uvodni odlomak je sans, ne serif: Bodoni ispod ~22 px ima preslabu liniju, a ovdje je 16 px. */ .envelope-picker h2{margin:0 0 18px} /* max-width:none je izricita iznimka od globalnog p{max-width:70ch} - tekst ide do ruba sadrzaja sekcije, po zahtjevu. */ .envelope-picker__intro{max-width:none;margin:0 0 12px;color:#4f544e; font-family:var(--sans);font-size:1rem;line-height:1.65} /* 25) Sekcije kuverti i obrasca u istoj sirini kao artikli, i natuknica ispod teksta o kuvertama. Prije: __inner je bio max-width 1080 px, a artikli 1440 px, pa su sekcije s pozadinom izgledale uvucene u odnosu na prikaz artikala. Sada __inner ima istu max sirinu kao .product-unit (var(--max)) i istu vodoravnu oblogu (4vw). Obloga SAME sekcije je spustena na nulu jer bi se inace zbrajala s oblogom unutra - dupla obloga daje krivu sirinu na uzim ekranima (na 1000 px viewporta: 40 + 40 = 80 px umjesto 40 px). Na mobitelu artikli koriste 5vw, pa i __inner ide na 5vw. Pravilo je namjerno napiseno kasnije u datoteci: medija upit ne dodaje specifikcnost, pa pobjeduje ono sto je napiseno zadnje. */ @media(max-width:760px){ .envelope-picker__inner,.invitation-order__inner{padding:0 5vw} } /* Natuknica ispod teksta o kuvertama. Ista grafika kao .spec-list (pika + bold) da se ponavlja isti jezik, ali tamnija boja jer je podloga svijetlozelena i --muted na njoj ima premali kontrast. */ .envelope-picker__points{list-style:none;margin:0 0 30px;padding:0} .envelope-picker__points li{position:relative;padding:3px 0 3px 16px; font-family:var(--sans);font-size:1rem;line-height:1.5;font-weight:700;color:#3f5143} .envelope-picker__points li::before{content:"•";position:absolute;left:0;top:0;color:var(--green-dark)} /* 26) Napomene iznad obrasca za narucivanje (zamjenjuju stari hint "Polja označena zvjezdicom su obavezna."). Razlog za oblik: radi se o uvjetima koji se pravno citaju (sta je u cijeni, tko provjerava tekst, minimalna kolicina), pa moraju biti vidljivi kao blok, a ne kao siva sitna slovica ispod naslova. Bijela plocica na --paper-deep podloci + zeleni rub lijevo odvaja ih od polja forme, a pika i boja ponavljaju jezik natuknica drugdje na stranici. Sirina plocice je puna sirina sekcije, kao i kod sekcije kuverti iznad, da se rubovi sekcija s pozadinom poklapaju. Sam tekst je ogranicen na 100ch (902 px) jer bi bez ogranicenja red bio ~1200 px i tekst bi se tesko pratio. 100ch je izmjereno, ne pogodeno: najduza napomena ("Minimalna kolicina od 30 artikala ...") u jednom retku treba 871 px, a prijasnjih 95ch (857 px) bilo je 14 px premalo - zato se lomila, iako je u ploci bilo 1218 px mjesta. Kod justify poravnanja to se ne vidi golim okom: svaki redak je rastegnut do pune sirine, pa se ne vidi gdje je prirodni lom. Dva stupca su kratko bila u igri, ali se vratilo na jedan stupac jer se napomene citaju kao slijed uvjeta, a ne kao katalog stavki. Naslov "Napomene" je u HTML-u normalnim pismom, a ovdje se radi velikim slovima s razmakom (isto kao .contact-info-label) - izgleda kao oznaka, a u sourceu i kod citaca ekrana ostaje normalna rijec. text-wrap:pretty sprjecava da zadnji redak ostane s jednom rijecju. Bez toga se najduza napomena lomi pa na zadnjem retku ostaje samo "kolicinu." - browser inače lomi gramatički, a ne vizualno, i ne brine ga koliko je zadnji redak pun. Isti pristup je vec koristen na .proof__list li. */ .order-notes{max-width:none;margin:0 0 30px;padding:22px 26px 20px; background:rgba(255,255,255,.55);border-left:3px solid var(--green-dark)} .order-notes__title{margin:0 0 14px;font-family:var(--sans);font-size:1rem; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark)} .order-notes__list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .order-notes__list li{position:relative;padding-left:18px;max-width:100ch; color:#4f544e;font-size:.95rem;line-height:1.55;text-align:justify;text-justify:inter-word; text-wrap:pretty} .order-notes__list li::before{content:"•";position:absolute;left:0;top:0;color:var(--green-dark)} @media(max-width:760px){ .order-notes{padding:18px 16px 16px} .order-notes__list li{text-align:left} } /* ===================== /forma/ — obrazac za dostavu i racun (2026-10-14) ===================== */ .page-hero--form{padding:56px 4vw 26px} .page-hero--form h1{font-size:clamp(1.45rem,2.5vw,2.15rem);letter-spacing:-.015em;margin-bottom:.5rem} /* Natpis iznad obrasca: globalno pravilo na .page-hero p (redak 366/369) diže weight na 760 jer je napisano za serifne heroje. Ovdje je sans, pa to izgleda kao nepotrebno podebljanje; selector mora imati istu specifičnost (:not) i kasnije mjesto u datoteci da pobijedi. text-wrap:balance briše osamljeni zadnji red. */ .page-hero--form p:not(.eyebrow){font-family:var(--sans);font-size:1.02rem;color:#555850;max-width:62ch;font-weight:400;font-variation-settings:"opsz" 0,"wght" 400;text-wrap:balance} .delivery-card{max-width:var(--max);margin:auto;padding:0 4vw 90px} .delivery-form{display:grid;gap:34px;max-width:900px} .delivery-form__section{min-width:0;margin:0;padding:26px 0 0;border:0;border-top:1px solid var(--line)} .delivery-form__section legend{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;letter-spacing:-.02em;padding:0 0 10px;color:var(--ink)} .delivery-form__help{max-width:none;margin:0 0 20px;color:var(--muted);font-size:.92rem} .delivery-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:850px} .delivery-form__field{display:grid;gap:7px;min-width:0} .delivery-form__field label{font-family:var(--sans);font-size:.92rem;color:#4f544e} .delivery-form__optional{color:var(--muted);font-size:.85rem} .delivery-form__field input,.delivery-form__field textarea{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #c9c2b6;border-radius:0;background:#fff;color:var(--ink);font:inherit} /* Država je