/* Theme Name: Prestani Raditi Na Sebi Theme URI: https://prestaniraditinasebi.com Author: Timoteo Crnković Author URI: https://timoteocrnkovic.com Description: Landing page tema za knjigu "Prestani raditi na sebi!" — Timoteo Crnković / Mental Reset d.o.o. Version: 3.14.7 License: All Rights Reserved Text Domain: prestani */ /* CHANGELOG 3.14.7 — Checkout copy refresh - Label polja napomene: "Napomena ili adresa paketomata (preporuka)". Redoslijed riječi naglašava da je polje primarno za napomenu, a adresa paketomata je preporučena opcija. - Placeholder rok dostave: 1–3 dana umjesto 1–2. */ /* CHANGELOG 3.14.6 — Bug fix: Bjelovarsko-bilogorska u svim HR narudžbama Kritično: narudžbe iz Hrvatske su u polje billing_state imale zapisano "Bjelovarsko-bilogorska" iako je polje sakriveno CSS-om. Razlog — WooCommerce postavlja default na prvu abecednu županiju po odabranoj zemlji, a sakriveno polje i dalje submit-a tu vrijednost. Fix: tri filtera koji čiste state polje za zemlje u kojima ga ne koristimo (HR, RS, ME, BA): 1. woocommerce_checkout_get_value — prazni vrijednost pri inicijalnom renderingu 2. woocommerce_checkout_process — prazni $_POST vrijednost na submitu 3. Helper funkcija za order meta čišćenje nakon spremanja Nakon ove verzije, postojeće narudžbe i dalje imaju upisanu županiju (migracija ne čisti retroaktivno). Samo nove narudžbe su čiste. */ /* CHANGELOG 3.14.5 — Checkout label i placeholder refresh - Label polja za napomene: "Adresa paketomata ili napomena" (kraće, jasnije od prethodne verzije "Napomena ili BoxNow adresa (preporuka za HR)"). - Placeholder dopunjen riječju "provjerenu" — signal kupcu da adresa mora biti točna, a ne samo približan opis lokacije. - Napomena služi i kao BoxNow instrukcija. Jedno polje, dvije funkcije, checkout ostaje vizualno čist — nema dodatnih info blokova ni JS toggleova. */ /* CHANGELOG 3.14.4 — popravak regresije iz 3.14.3 - Inline style="background:#0a0a0a" maknut s i tagova. Razlog: čvrsta inline pozadina je poništavala gradient u hero::before i na final-cta sekciji, a na checkout stranici je trostruki repaint (tema inline → WooCommerce CSS → tema overrride) izgledao kao flash. - Obrana od bijelog flasha sada stoji na dva sloja umjesto tri: 1. — browser zna da je stranica tamna i ne radi default bijeli repaint. 2. Critical CSS html,body{background:#0a0a0a} — safety net za starije browsere. Ova dva sloja su dovoljna na modernim browserima i ne diraju gradiente. */ /* CHANGELOG 3.14.3 — FOUC / bijeli flash fix (djelomično poništen u 3.14.4) */ /* CHANGELOG 3.14.2 — Typography fix nakon OMGF proračuna - DM Sans dobio weightove 600 i 700 (bez njih browser je radio synthetic bold na FAQ pitanjima i UI labelima — vizualno gori fake-bold render). - Nakon uploada teme pokrenuti OMGF → Refresh Cache da preuzme nove weight fajlove i hostuje ih lokalno kroz prestani-google-fonts handle. */ /* CHANGELOG 3.14.1 — Performance pass nakon Lighthouse mjerenja (92/94/96/100) Performance: - DM Serif Display (hero naslov) prebačen na font-display: optional — sprječava CLS 0.111 od font swapa - Preconnect dodan za fonts.googleapis.com (paraleliziran handshake) - Preload fontova iz Customizera → Performanse - Fontovi (opcionalno, skraćuje LCP chain za 500-900ms) - Homepage dequeue: woocommerce-layout, smallscreen, general, wc-blocks (~18 KB CSS manje) - Mogućnost unosa .woff2 URL-ova za preload bez potrebe za code editom Nepromijenjeno od 3.14.0: - Sve sigurnosne i logičke popravke iz 3.14.0 ostaju na mjestu */ /* CHANGELOG 3.14.0 (puni audit) Kritično: - FAQ render petlja ide do 7, ne do 6 (sedmo pitanje se sada prikazuje) - Legal stranice — datum i ISBN se računaju dinamično, ne zamrznu se pri aktivaciji - get_page_by_path zamijenjen WP_Query pristupom (deprecated warning u WP 6.2+) - section-agitacija: prestani_stats_title/intro/punch dobili admin polja - XSS hardening — sva dinamička polja sad idu kroz wp_kses_post ili esc_html - register_setting dobio sanitize_callback svuda gdje je nedostajao Ozbiljno: - Newsletter AJAX: success se prikazuje nakon stvarnog odgovora, ne slijepo nakon 800ms - Exit-intent listener se skida nakon prvog okidanja - Defer scripts koristi wp_script_add_data umjesto str_replace - FB Pixel se učita odmah na checkout stranicama (ne lazy), da Purchase event ne propadne - In-app browser: sanitize_text_field + wp_unslash na User-Agent Srednje: - date('Y') u footeru zamijenjen wp_date('Y') - Svi preostali echo $buy_link / echo $book_cover pozivi prošli kroz esc_url - Elfsight embed kontroliran kroz wp_kses s dopuštenim tagovima - Stripe Purchase event total/currency prolaze kroz esc_js */ /* ═══════════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — sve varijable na jednom mjestu ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Boje pozadine ── */ --black: #0a0a0a; --black-light: #111111; --black-card: #141414; /* ── Boje teksta ── */ --white: #f0ece6; --white-dim: #a8a29e; --white-muted: #6b6560; /* ── Accent boje ── */ --red: #c23a22; --red-light: #d44a32; --red-glow: rgba(194, 58, 34, 0.15); /* ── Tipografija — familije ── */ --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', -apple-system, sans-serif; /* ── Tipografija — fluid skala ── Sve veličine se glatko skaliraju od 320px do 1920px+ ekrana koristeći clamp(). Format: clamp(MIN_PX, PREFERRED_VW, MAX_PX) - MIN: čitljiva veličina na 320px telefonu - VW: prirodno skaliranje proporcionalno širini ekrana - MAX: estetski cap na velikim desktop ekranima PRAVILO: Sve nove sekcije i sve postojeće font-size vrijednosti MORAJU koristiti ove varijable. NE override-ati u media queryjima. */ --font-display: clamp(36px, 6vw, 64px); /* hero title, final CTA naslovi */ --font-h1: clamp(28px, 4.5vw, 48px); /* section titles */ --font-h2: clamp(22px, 3vw, 32px); /* card titles, sub-titles */ --font-h3: clamp(18px, 2vw, 22px); /* FAQ pitanja, manja zaglavlja */ --font-lead: clamp(16px, 1.8vw, 20px); /* hero subtitle, lead tekst */ --font-body: clamp(15px, 1.4vw, 17px); /* paragraph body */ --font-small: clamp(13px, 1.1vw, 14px); /* meta, captions, dugmad */ --font-micro: clamp(11px, 0.9vw, 12px); /* labels, section numbers */ /* Specijalne typography veličine za jedinstvene elemente */ --font-price: clamp(32px, 4.5vw, 56px); /* hero price, final price */ --font-pivot: clamp(80px, 14vw, 140px); /* pivot citatni znak (dekorativan) */ --font-card-num: clamp(40px, 4vw, 56px); /* veliki brojevi na karticama */ /* ── Spacing — fluid skala ── Sve vertikalne sekcije i gutteri se sami skaliraju proporcionalno širini ekrana. Ne treba override-ati u media queryjima. */ --gutter: clamp(16px, 4vw, 32px); /* lijevi/desni padding stranica */ --section-space: clamp(48px, 7vw, 96px); /* sekcijski padding top/bottom */ --section-space-tight: clamp(40px, 5vw, 64px); /* manje sekcije */ --space-block: clamp(24px, 3vw, 40px); /* između velikih elemenata */ --space-element: clamp(16px, 2vw, 24px); /* između manjih elemenata */ /* ── Containeri (max-width vrijednosti za različite layoute) ── */ --container-content: 720px; --container-page: 960px; --container-wide: 1000px; --container-legal: 800px; /* ── Borderi ── */ --surface-border: rgba(255, 255, 255, 0.06); } /* Breakpoint sustav (referencа za media queries u sekciji 20 na dnu file-a) CSS varijable se NE mogu koristiti unutar @media uvjeta, pa su navedeni ovdje kao dokumentacija i jedna istina za sve responsive promjene. --bp-mobile: 600px ↓ telefoni --bp-tablet: 768px ↓ tablet portrait --bp-desktop: 900px ↓ tablet landscape, mali laptopi --bp-wide: 1024px+ ↓ pravi desktop */ /* ═══════════════════════════════════════════════════════════════════════ 2. RESET & BASE ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: var(--sans); font-size: 17px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--red); color: var(--white); } /* ═══════════════════════════════════════════════════════════════════════ 3. HERO ═══════════════════════════════════════════════════════════════════════ */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 56px 24px 40px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, var(--red-glow) 0%, transparent 50%); opacity: 0.4; pointer-events: none; } .hero-inner { max-width: 1100px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; } .hero-book { display: flex; justify-content: center; perspective: 1000px; } /* ── Subtle breathing animation for the book (premium dojam) ── */ .hero-book--breathing .book-wrapper { animation: book-breathe 6s ease-in-out infinite; } @keyframes book-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.012); } } @media (prefers-reduced-motion: reduce) { .hero-book--breathing .book-wrapper { animation: none; } } /* ── Industry noise: words floating behind the book ── */ .hero-noise { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .noise-word { position: absolute; font-family: var(--serif); font-style: italic; color: rgba(168, 162, 158, 0.42); font-size: clamp(20px, 2.4vw, 32px); white-space: nowrap; opacity: 0; animation: noise-cycle 22s linear infinite; animation-delay: var(--delay, 0s); letter-spacing: 0.02em; font-weight: 300; --peak-opacity: 0.42; } /* Each word picks a position based on its index (CSS-only, no JS) */ .noise-word:nth-child(1) { top: 12%; left: 8%; } .noise-word:nth-child(2) { top: 22%; left: 68%; } .noise-word:nth-child(3) { top: 35%; left: 5%; } .noise-word:nth-child(4) { top: 48%; left: 75%; } .noise-word:nth-child(5) { top: 62%; left: 10%; } .noise-word:nth-child(6) { top: 75%; left: 70%; } .noise-word:nth-child(7) { top: 18%; left: 42%; } .noise-word:nth-child(8) { top: 82%; left: 38%; } .noise-word:nth-child(9) { top: 30%; left: 80%; } .noise-word:nth-child(10) { top: 68%; left: 50%; } .noise-word:nth-child(11) { top: 42%; left: 35%; } @keyframes noise-cycle { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: var(--peak-opacity, 0.42); transform: translateY(0); } 16% { opacity: var(--peak-opacity, 0.42); transform: translateY(0); } 20% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .noise-word { animation: none; opacity: 0.28; transform: none; } } /* ── Tablet: malo manji font, malo bliže rubovima ── */ @media (max-width: 1024px) { .noise-word { font-size: clamp(16px, 2vw, 22px); } } /* ── Mobile: sve riječi vidljive, pametnije raspoređene Kratke riječi (single word / kratke) idu uz knjigu (top zona) Duge riječi (više riječi) idu u donji prostor oko cijene/gumba ── */ @media (max-width: 768px) { .noise-word { font-size: 14px; color: rgba(168, 162, 158, 0.55); letter-spacing: 0; animation-duration: 16s; --peak-opacity: 0.55; } /* KRATKE (jedna riječ ili 2 kratke) - zona oko knjige (top 5-25%) */ .noise-word:nth-child(1) { top: 8%; left: 4%; right: auto; } /* Manifestiraj */ .noise-word:nth-child(7) { top: 14%; right: 4%; left: auto; } /* Diši duboko */ .noise-word:nth-child(9) { top: 20%; left: 4%; right: auto; } /* Inner child */ .noise-word:nth-child(10) { top: 26%; right: 4%; left: auto; } /* Granice */ .noise-word:nth-child(3) { top: 4%; right: 4%; left: auto; } /* Misli pozitivno */ /* DUGE (više riječi) - zona ispod knjige, oko teksta i cijene (60-100%) */ .noise-word:nth-child(2) { top: 62%; left: 4%; right: auto; } /* Suoči se sa strahom */ .noise-word:nth-child(4) { top: 67%; right: 4%; left: auto; } /* Vizualiziraj uspjeh */ .noise-word:nth-child(5) { top: 72%; left: 4%; right: auto; } /* Budi blag prema sebi */ .noise-word:nth-child(6) { top: 88%; right: 4%; left: auto; } /* Pronađi svoju svrhu */ .noise-word:nth-child(8) { top: 93%; left: 4%; right: auto; } /* Ljubav prema sebi */ .noise-word:nth-child(11) { top: 98%; right: 4%; left: auto; } /* Dnevnik zahvalnosti */ } /* ── Mali mobiteli ── */ @media (max-width: 380px) { .noise-word { font-size: 13px; color: rgba(168, 162, 158, 0.50); --peak-opacity: 0.50; } } .book-wrapper { position: relative; transform: rotateY(8deg); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); will-change: transform; opacity: 0; } .book-wrapper.animating { animation: bookReveal 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } .book-wrapper.book-ready { opacity: 1; } noscript ~ .hero .book-wrapper, .no-js .book-wrapper { opacity: 1; } @keyframes bookReveal { 0% { transform: rotateY(70deg) scale(0.92); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotateY(8deg) scale(1); opacity: 1; } } .book-wrapper img { max-height: 520px; width: auto; border-radius: 4px; } .book-spine { position: absolute; right: -12px; top: 2px; bottom: 2px; width: 14px; background: linear-gradient(270deg, #1a1a1a, #2a2a2a); transform: rotateY(-90deg); transform-origin: left center; border-radius: 0 2px 2px 0; } .hero-content { position: relative; opacity: 0; transform: translateY(20px); animation: heroContentReveal 1s ease 0.8s both; } @keyframes heroContentReveal { to { opacity: 1; transform: translateY(0); } } .hero-label { font-family: var(--sans); font-size: var(--font-micro); letter-spacing: 4px; text-transform: uppercase; color: var(--red); margin-bottom: 24px; font-weight: 500; opacity: 0; animation: fadeUp 0.8s ease 0.2s forwards; } .hero-title { font-family: var(--serif); font-size: var(--font-display); line-height: 1.1; color: var(--white); margin-bottom: 20px; font-weight: 400; opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards; } .hero-subtitle { font-size: var(--font-lead); color: var(--white-dim); line-height: 1.6; margin-bottom: 36px; font-weight: 300; max-width: 440px; opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards; } .hero-cta-group { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s ease 0.8s forwards; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: var(--red); color: var(--white); font-family: var(--sans); font-size: var(--font-small); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease; } .btn-primary:hover { background: var(--red-light); transform: translateY(-2px); } .btn-primary:hover::after { left: 100%; } .hero-price { font-family: var(--serif); font-size: var(--font-price); color: var(--white); } .hero-price span { font-family: var(--sans); font-size: 13px; color: var(--white-muted); display: block; font-weight: 300; } .scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--white-muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } .scroll-hint svg { width: 20px; height: 20px; stroke: var(--white-muted); } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════ 4. SHARED LAYOUT — containeri, naslovi, ritam ═══════════════════════════════════════════════════════════════════════ */ .section-inner, .section-wide, .woo-page-inner, .sci-inner { width: 100%; margin: 0 auto; padding-inline: var(--gutter); } .section-inner { max-width: calc(var(--container-content) + var(--gutter) * 2); } .section-wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .section-inner--center { text-align: center; } .prestani-section { position: relative; } .prestani-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #222, transparent); } .section-num { font-family: var(--sans); font-size: var(--font-micro); letter-spacing: 4px; color: var(--red); text-transform: uppercase; margin-bottom: 12px; font-weight: 500; } .section-num--spaced { margin-bottom: 16px; } /* Utility */ .is-hidden { display: none !important; } /* 404 fallback */ .not-found { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); } .not-found-inner { text-align: center; } .not-found-title { font-family: var(--serif); font-size: var(--font-h1); margin-bottom: 16px; color: var(--white); font-weight: 400; } .not-found-text { color: var(--white-dim); margin-bottom: 24px; } .section-title { font-family: var(--serif); font-size: var(--font-h1); line-height: 1.2; margin-bottom: 32px; color: var(--white); } .section-lead { color: var(--white-dim); font-weight: 300; font-size: var(--font-lead); margin-bottom: 12px; } .section-note { color: var(--white-dim); font-weight: 300; font-size: var(--font-body); margin-top: 24px; } .text-emphasis { color: var(--white); font-style: normal; } /* Reveal */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════════ 4.5. ULAZ — Simptom Bridge (hvata dolaske iz oglasa) ═══════════════════════════════════════════════════════════════════════ */ .ulaz-section { background: var(--black); padding: var(--section-space-tight) 0; border-top: 1px solid #141414; border-bottom: 1px solid #141414; } .ulaz-inner { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); text-align: left; } .ulaz-lines { margin: 0 0 36px 0; } .ulaz-line { font-family: var(--sans); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--white-dim); margin: 0 0 10px 0; font-weight: 300; padding-left: 20px; border-left: 2px solid var(--red); } .ulaz-line:last-child { margin-bottom: 0; } .ulaz-punch { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; color: var(--white); margin: 0; font-style: italic; } @media (max-width: 640px) { .ulaz-line { padding-left: 16px; } } /* ═══════════════════════════════════════════════════════════════════════ 5. AGITACIJA — sekcija "Pokušao si sve" ═══════════════════════════════════════════════════════════════════════ */ .agitation { padding: var(--section-space) 0; background: var(--black); } .agitation-list { list-style: none; margin: 40px 0; } .agitation-list li { padding: 14px 0; border-bottom: 1px solid #1a1a1a; color: var(--white-dim); font-size: var(--font-body); display: flex; align-items: baseline; gap: 16px; font-weight: 300; } .agitation-list li::before { content: '×'; color: var(--red); font-size: var(--font-h3); font-weight: 700; flex-shrink: 0; } .agitation-punch { font-family: var(--serif); font-size: var(--font-h2); color: var(--white); margin-top: 40px; line-height: 1.5; font-style: italic; } .agitation-punch em { color: var(--red); font-style: normal; } /* ─── Agitation stats chart ─── */ .agit-stats { margin: 48px 0 40px; padding: 40px 0; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; text-align: center; } .agit-stats-title { font-family: var(--serif); font-size: var(--font-h2); font-weight: 400; line-height: 1.2; color: var(--white); margin-bottom: 20px; } .agit-stats-title em { font-style: italic; color: var(--red); } .agit-stats-intro { font-size: var(--font-body); line-height: 1.7; color: var(--white-dim); font-weight: 300; max-width: 580px; margin: 0 auto 36px; } .agit-stats-chart { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 16px; height: 260px; margin-bottom: 36px; } .agit-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; max-width: 100px; } .agit-bar-pct { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--red); margin-bottom: 6px; } .agit-bar-fill { width: 100%; background-color: var(--red); background-image: linear-gradient(180deg, var(--red) 0%, rgba(194,58,34,0.3) 100%); border-radius: 3px 3px 0 0; min-height: 16px; } .agit-bar-fill--01 { height: 50px; } .agit-bar-fill--02 { height: 85px; } .agit-bar-fill--03 { height: 115px; } .agit-bar-fill--04 { height: 145px; } .agit-bar-fill--05 { height: 175px; } .agit-bar-name { font-size: 10px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white-muted); text-align: center; margin-top: 10px; line-height: 1.3; height: 40px; display: flex; align-items: flex-start; justify-content: center; } .agit-stats-punch { font-family: var(--serif); font-size: var(--font-body); font-style: italic; line-height: 1.7; color: var(--white-dim); max-width: 560px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ 6. DRUGAČIJE — kartice "što ova knjiga nije" ═══════════════════════════════════════════════════════════════════════ */ .different { padding: var(--section-space) 0; background: var(--black-light); } .different-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .diff-card { background: var(--black-card); border: 1px solid #1e1e1e; padding: 40px 32px; position: relative; transition: border-color 0.5s ease, transform 0.6s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease, box-shadow 0.5s ease; } /* Animacija samo kad JS postavi klasu .diff-animate */ .diff-card.diff-animate { opacity: 0; transform: translateY(32px); } .diff-card.diff-animate.card-visible { opacity: 0.4; transform: translateY(0); } /* Active spotlight — kad je kartica u viewportu */ .diff-card.diff-animate.card-active, .diff-card.card-active { opacity: 1; border-color: var(--red); box-shadow: 0 0 30px rgba(199,44,34,.12), inset 0 0 30px rgba(199,44,34,.03); } .diff-card.card-active .diff-card-num { color: rgba(199,44,34,.25); } .diff-card:hover { border-color: var(--red); transform: translateY(-4px); opacity: 1; } .diff-card-num { font-family: var(--serif); font-size: var(--font-card-num); color: rgba(255,255,255,.08); position: absolute; top: 16px; right: 20px; line-height: 1; transition: color 0.4s ease; } .diff-card:hover .diff-card-num { color: var(--red-glow); } .diff-card h3 { font-family: var(--serif); font-size: var(--font-h2); margin-bottom: 16px; color: var(--white); font-weight: 400; } .diff-card p { color: var(--white-dim); font-size: var(--font-body); font-weight: 300; line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════ 7. SADRŽAJ — 4 dijela, 12 poglavlja ═══════════════════════════════════════════════════════════════════════ */ .toc { padding: var(--section-space) 0; background: var(--black); } .toc-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin-top: 48px; } .toc-part { padding: 36px; border: 1px solid #1a1a1a; background: var(--black-card); position: relative; overflow: hidden; border-radius: 8px; } .toc-part::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--red); opacity: 0; transition: opacity 0.4s ease; } .toc-part:hover::before { opacity: 1; } .part-label { font-size: var(--font-micro); letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 4px; } .part-title { font-family: var(--serif); font-size: var(--font-h2); color: var(--white); margin-bottom: 8px; font-weight: 400; } .part-subtitle { font-size: var(--font-body); color: var(--white-muted); font-style: italic; margin-bottom: 20px; } .part-chapters { list-style: none; } .part-chapters li { padding: 8px 0; color: var(--white-dim); font-size: var(--font-body); font-weight: 300; display: flex; gap: 12px; } .part-chapters li .ch-num { color: var(--white-muted); font-size: var(--font-micro); min-width: 20px; padding-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════ 8. EXCERPT — citat iz knjige ═══════════════════════════════════════════════════════════════════════ */ .excerpt { padding: var(--section-space) 0; background: var(--black-light); } .excerpt-quote { font-family: var(--serif); font-size: var(--font-h2); line-height: 1.5; color: var(--white); margin-bottom: 32px; position: relative; padding-left: 28px; border-left: 3px solid var(--red); } .excerpt-body { color: var(--white-dim); font-weight: 300; font-size: var(--font-body); line-height: 1.8; margin-bottom: 20px; } .excerpt-body em { color: var(--white); font-style: normal; font-weight: 400; } .excerpt-label { font-size: var(--font-small); color: var(--white-muted); margin-top: 32px; font-style: italic; } .sci-link { display: inline-block; margin-top: 32px; padding: 12px 24px; font-size: var(--font-small); color: var(--red); text-decoration: none; border: 1px solid rgba(194,58,34,.3); border-radius: 6px; letter-spacing: .02em; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .sci-link:hover { background: rgba(194,58,34,.08); border-color: var(--red); color: var(--white); } /* ═══════════════════════════════════════════════════════════════════════ 9. REVIEWS — Google + manuscript reviews ═══════════════════════════════════════════════════════════════════════ */ .reviews { padding: 56px 0; border-top: 1px solid var(--surface-border); } .reviews-embed { margin-top: 40px; } .reviews-empty { color: var(--white-dim); text-align: center; padding: 40px 0; } /* ─── Manuscript reviews carousel ─── */ .manuscript-reviews { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.06); } .manuscript-label { font-size: var(--font-micro); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 12px; } .manuscript-title { font-family: var(--serif); font-size: var(--font-h2); color: var(--white); font-weight: 400; margin-bottom: 28px; } .manuscript-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .manuscript-carousel::-webkit-scrollbar { display: none; } .manuscript-card { flex: 0 0 280px; scroll-snap-align: start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color 0.3s ease; } .manuscript-card:hover { border-color: rgba(255,255,255,.2); } .manuscript-card img { width: 100%; height: auto; display: block; } .manuscript-card-footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.06); } .manuscript-source { display: flex; align-items: center; gap: 8px; } .manuscript-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--white-muted); } .manuscript-icon--messenger { background: #0084ff; } .manuscript-icon--email { background: #ea4335; } .manuscript-icon--whatsapp { background: #25d366; } .manuscript-icon--instagram { background: #e1306c; } .manuscript-icon--facebook { background: #1877f2; } .manuscript-icon--sms { background: #34b7f1; } .manuscript-icon--viber { background: #7360f2; } .manuscript-icon--telegram { background: #0088cc; } .manuscript-icon--linkedin { background: #0077b5; } .manuscript-icon--other { background: var(--white-muted); } .manuscript-source-name { font-size: var(--font-small); color: var(--white-dim); } .manuscript-badge { font-size: var(--font-micro); letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); padding: 4px 10px; border-radius: 4px; } /* ─── Lightbox ─── */ .lightbox-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; cursor: zoom-out; } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-overlay img { max-width: 90vw; max-height: 88vh; border-radius: 8px; object-fit: contain; } .lightbox-close { position: fixed; top: 16px; right: 20px; z-index: 100000; width: 44px; height: 44px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; } .lightbox-close:hover { background: rgba(255,255,255,.2); } /* ═══════════════════════════════════════════════════════════════════════ 10. O AUTORU — Tim bio ═══════════════════════════════════════════════════════════════════════ */ .author-section { padding: var(--section-space) 0; background: var(--black); } .author-grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; margin-top: 40px; } .author-photo img { width: 200px; height: 200px; object-fit: cover; border: 1px solid #222; } .author-text p { color: var(--white-dim); font-weight: 300; margin-bottom: 16px; font-size: var(--font-body); } .author-text p strong { color: var(--white); font-weight: 500; } .author-meta { display: flex; gap: 40px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #1a1a1a; } .author-meta-item { font-size: var(--font-small); color: var(--white-muted); text-align: center; } .author-meta-item span { display: block; font-family: var(--serif); font-size: var(--font-h2); color: var(--white); margin-bottom: 2px; } /* ═══════════════════════════════════════════════════════════════════════ 11. FAQ — pitanja i odgovori ═══════════════════════════════════════════════════════════════════════ */ .faq { padding: var(--section-space) 0; background: var(--black); } .faq-list { margin-top: 48px; } .faq-item { border-bottom: 1px solid #1a1a1a; padding: 28px 0; } .faq-item:first-child { border-top: 1px solid #1a1a1a; } .faq-question { font-family: var(--serif); font-size: var(--font-h3); color: var(--white); font-weight: 400; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-question::after { content: '+'; font-family: var(--sans); font-size: var(--font-h2); color: var(--red); flex-shrink: 0; transition: transform 0.3s ease; } .faq-item.open .faq-question::after { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-item.open .faq-answer { max-height: 300px; padding-top: 16px; } .faq-answer p { color: var(--white-dim); font-weight: 300; font-size: var(--font-body); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════ 12. FINAL CTA — zaključni poziv ═══════════════════════════════════════════════════════════════════════ */ .final-cta { padding: 80px 0; background: var(--black-light); text-align: center; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, var(--red-glow) 0%, transparent 60%); opacity: 0.4; } .final-cta .section-inner { position: relative; z-index: 1; } /* ── Tihi eho industrije u final CTA: zadnji bljesak prije odluke ── */ .final-noise { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .final-noise-word { position: absolute; font-family: var(--serif); font-style: italic; color: rgba(168, 162, 158, 0.22); font-size: clamp(14px, 1.6vw, 20px); white-space: nowrap; opacity: 0; animation: final-noise-cycle 11s linear infinite; animation-delay: var(--fdelay, 0s); letter-spacing: 0.02em; font-weight: 300; } /* Pozicije - svjesno na rubovima da ne dotiču CTA gumb i naslov */ .final-noise-word:nth-child(1) { top: 8%; left: 6%; } .final-noise-word:nth-child(2) { top: 14%; right: 8%; } .final-noise-word:nth-child(3) { top: 86%; left: 8%; } .final-noise-word:nth-child(4) { top: 90%; right: 10%; } .final-noise-word:nth-child(5) { top: 22%; left: 12%; } .final-noise-word:nth-child(6) { top: 78%; right: 14%; } .final-noise-word:nth-child(7) { top: 18%; right: 18%; } @keyframes final-noise-cycle { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 0.22; transform: translateY(0); } 20% { opacity: 0.22; transform: translateY(0); } 28% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .final-noise-word { animation: none; opacity: 0.15; transform: none; } } /* Mobitel: smanji broj i veličinu, slično kao hero */ @media (max-width: 768px) { .final-noise-word { font-size: 12px; color: rgba(168, 162, 158, 0.20); } /* Sakrij srednje pozicije, ostavi samo rubove */ .final-noise-word:nth-child(5), .final-noise-word:nth-child(6), .final-noise-word:nth-child(7) { display: none; } .final-noise-word:nth-child(1) { top: 4%; left: 4%; } .final-noise-word:nth-child(2) { top: 6%; right: 4%; } .final-noise-word:nth-child(3) { top: 94%; left: 4%; } .final-noise-word:nth-child(4) { top: 96%; right: 4%; } } .final-title { font-family: var(--serif); font-size: var(--font-display); color: var(--white); margin-bottom: 16px; line-height: 1.1; } .final-sub { font-size: var(--font-lead); color: var(--white-dim); font-weight: 300; max-width: 520px; margin: 0 auto 40px; line-height: 1.6; } .final-price { font-family: var(--serif); font-size: var(--font-price); color: var(--white); margin-bottom: 8px; } .final-price-note { font-size: var(--font-small); color: var(--white-muted); margin-bottom: 32px; } .btn-large { display: inline-flex; align-items: center; gap: 12px; padding: 20px 48px; background: var(--red); color: var(--white); font-family: var(--sans); font-size: var(--font-body); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; } .btn-large:hover { background: var(--red-light); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(194, 58, 34, 0.3); } /* ═══════════════════════════════════════════════════════════════════════ 13. STICKY MOBILE CTA — gumb na dnu mobilne stranice ═══════════════════════════════════════════════════════════════════════ */ .sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid #222; padding: 12px 24px; transform: translateY(100%); transition: transform 0.4s ease; } .sticky-cta.visible { transform: translateY(0); } .sticky-cta-inner { max-width: 600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sticky-cta-text { font-size: var(--font-small); color: var(--white-dim); } .sticky-cta-text strong { font-family: var(--serif); font-size: var(--font-h3); color: var(--white); font-weight: 400; display: block; } .sticky-cta .btn-primary { padding: 12px 28px; font-size: var(--font-small); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ 14. FOOTER ═══════════════════════════════════════════════════════════════════════ */ .site-footer { padding: 40px 24px 60px; text-align: center; border-top: 1px solid #1a1a1a; } .site-footer p { font-size: 14px; color: var(--white-muted); margin-bottom: 8px; } .site-footer a { color: var(--white-dim); text-decoration: none; transition: color 0.3s ease; } .site-footer a:hover { color: var(--red); } .site-footer .disclaimer { margin-top: 24px; font-size: 12px; color: #333; } .footer-legal { margin-bottom: 16px; } .site-footer .footer-company { font-size: 12px; color: #555; } .site-footer .footer-links { font-size: 13px; } .site-footer .footer-links a { margin: 0 2px; } /* ═══════════════════════════════════════════════════════════════════════ 15. LEGAL PAGES — sticky bar + bottom CTA ═══════════════════════════════════════════════════════════════════════ */ .legal-sticky-bar { position: fixed; top: -70px; left: 0; right: 0; z-index: 1000; background: rgba(10,10,10,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); transition: top .35s cubic-bezier(.22,.61,.36,1); } .legal-sticky-bar.visible { top: 0; } .legal-sticky-inner { max-width: 800px; margin: 0 auto; padding: 10px 24px; display: flex!important; flex-direction: row!important; align-items: center!important; justify-content: space-between!important; gap: 16px; } .legal-sticky-left { display: flex!important; flex-direction: row!important; align-items: center!important; gap: 12px; min-width: 0; overflow: hidden; } .legal-sticky-cover { width: 36px!important; max-width: 36px!important; height: auto!important; border-radius: 3px; flex-shrink: 0; display: block; } .legal-sticky-title { font-family: var(--serif); font-size: 15px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .legal-sticky-bar .btn-primary { flex-shrink: 0; padding: 10px 20px!important; font-size: 13px!important; white-space: nowrap; } .legal-bottom { text-align: center; padding: 48px 0 0; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.06); } .legal-bottom-btn { display: inline-block; margin-bottom: 16px; } .legal-back { display: inline-block; margin-top: 4px; color: var(--white-dim); text-decoration: none; font-size: 14px; transition: color .2s; } .legal-back:hover { color: var(--white); } /* ═══════════════════════════════════════════════════════════════════════ 16. PRESALE — strip i countdown ═══════════════════════════════════════════════════════════════════════ */ .presale-strip { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .presale-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; } .presale-bonus { font-size: 14px; color: var(--white-dim); font-weight: 300; } .presale-countdown { font-size: 13px; color: var(--red); font-weight: 500; letter-spacing: .02em; } .price-old { text-decoration: line-through; opacity: .45; font-weight: 300; margin-right: 6px; font-size: .85em; } .presale-bonus-final { color: var(--white-dim); font-size: 15px; font-weight: 300; margin-top: 8px; margin-bottom: 8px; } .sticky-presale-badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } /* ═══════════════════════════════════════════════════════════════════════ 17. PIVOT — svijetla sekcija s testimonialom ═══════════════════════════════════════════════════════════════════════ */ .pivot { padding: calc(var(--section-space) + 16px) var(--gutter); background: var(--white); text-align: center; position: relative; } .pivot-inner { max-width: 720px; margin: 0 auto; position: relative; } .pivot-mark { font-family: var(--serif); font-size: clamp(80px, 14vw, 140px); line-height: 0.8; color: var(--red); opacity: 0.18; margin-bottom: -32px; user-select: none; font-weight: 400; } .pivot-quote { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.35; color: #111; font-weight: 400; font-style: italic; letter-spacing: -.005em; margin: 0 auto 32px; max-width: 640px; } .pivot-attribution { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } .pivot-author { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #222; letter-spacing: 0.02em; } .pivot-author-meta { font-family: var(--sans); font-size: 12px; font-weight: 400; color: #666; letter-spacing: 0.04em; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════════ 19. WP OVERRIDES — admin bar i WP defaults ═══════════════════════════════════════════════════════════════════════ */ /* Remove WP admin bar spacing */ html { margin-top: 0 !important; } #wpadminbar { display: none; } /* ═══════════════════════════════════════════════════════════════════════ WOOCOMMERCE CHECKOUT Desktop: dva stupca (forma+stripe | narudžba) Mobile: kompaktan single column ═══════════════════════════════════════════════════════════════════════ */ /* Wrapper */ .woo-page { min-height:100vh; background:var(--black); color:var(--white); padding:40px 20px 60px; } .woo-page-inner { max-width: calc(var(--container-page) + var(--gutter) * 2); } /* Hero */ .checkout-hero { margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); } .checkout-hero-inner { display:flex; align-items:center; gap:16px; } .checkout-hero-book { width:64px; border-radius:4px; box-shadow:0 6px 20px rgba(0,0,0,.4); } .checkout-hero-text h2 { font-family:'DM Serif Display',serif; font-size:22px; color:var(--white); margin:0 0 4px; } .checkout-hero-text p { color:var(--white-dim); font-size:14px; margin:0; } /* Desktop: dva stupca */ .woo-page .woocommerce-checkout { display:grid; grid-template-columns:1fr 300px; gap:0 40px; align-items:start; } .woo-page .woocommerce-checkout .col2-set, .woo-page .woocommerce-checkout .woocommerce-additional-fields, .woo-page .woocommerce-checkout .woocommerce-checkout-payment { grid-column:1; } .woo-page .col2-set .col-1, .woo-page .col2-set .col-2 { width:100%!important; float:none!important; } /* Inner grid za billing fields — čišći od WooCommerce float layouta. Hvatamo polja direktno na .woocommerce-billing-fields__field-wrapper umjesto da ovisimo o nadređenoj .col2-set strukturi koja se mijenja po WooCommerce verziji. */ .woo-page .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .woo-page .woocommerce-billing-fields__field-wrapper .form-row { margin-bottom: 0 !important; width: 100% !important; float: none !important; padding: 0 !important; } .woo-page .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } .woo-page .woocommerce-billing-fields__field-wrapper .form-row::before, .woo-page .woocommerce-billing-fields__field-wrapper .form-row::after { content: none; } /* Defenzivno skrij state polje za HR (locale flag nije pouzdan) */ .woo-page.country-hr #billing_state_field, .woo-page.country-hr #shipping_state_field { display: none !important; } /* Order notes textarea — više prostora za zahtjeve */ .woo-page .checkout-order-notes textarea { min-height: 96px; } .woo-page #order_review_heading { grid-column:2; grid-row:1; margin-top:0; font-size:18px; margin-bottom:12px; } .woo-page .woocommerce-checkout-review-order { grid-column:2; grid-row:2/20; position:sticky; top:20px; } /* Order review sidebar box */ .woo-page .woocommerce-checkout-review-order { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:20px; } /* Desktop spacing */ .woo-page .form-row { margin-bottom:14px; } /* Sav tekst bijeli */ .woo-page label, .woo-page h3, .woo-page #order_review_heading, .woo-page th, .woo-page td, .woo-page p, .woo-page li { color:var(--white); } .woo-page h3 { font-family:'DM Serif Display',serif; font-size:22px; font-weight:400; margin:28px 0 16px; } .woo-page h3:first-child { margin-top:0; } .woo-page label .optional { display:none; } .woo-page label .required { color:var(--red); } .woo-page label { font-size:15px; color:var(--white-dim)!important; } .woo-page a { color:var(--red); } .woo-page .btn-primary, .woo-page .legal-bottom-btn { color:var(--white)!important; } .woo-page .legal-sticky-bar .btn-primary { color:var(--white)!important; } /* Inputi */ .woo-page input[type="text"], .woo-page input[type="email"], .woo-page input[type="tel"], .woo-page input[type="number"], .woo-page input[type="password"], .woo-page textarea, .woo-page select, .woo-page .select2-selection--single { background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.12)!important; color:var(--white)!important; border-radius:6px; padding:12px 14px; font-size:15px; } .woo-page input:focus, .woo-page textarea:focus { border-color:var(--red)!important; outline:none; } .woo-page input::placeholder, .woo-page textarea::placeholder { color:rgba(255,255,255,.3); } .woo-page .select2-selection__rendered { color:var(--white)!important; } /* Select2 dropdown */ .select2-dropdown { background:#1a1a1a!important; border-color:rgba(255,255,255,.12)!important; } .select2-results__option { color:var(--white)!important; } .select2-results__option--highlighted { background:var(--red)!important; } .select2-search__field { background:rgba(255,255,255,.08)!important; color:var(--white)!important; } /* Tablica narudžbe */ .woo-page table { border-color:rgba(255,255,255,.08); } .woo-page table th, .woo-page table td { border-color:rgba(255,255,255,.06)!important; background:transparent!important; } .woo-page table th { color:var(--white-dim); } .woo-page .order-total td { font-family:'DM Serif Display',serif; font-size:20px; } /* Payment lista */ .woo-page .payment_methods { list-style:none!important; padding:0!important; } .woo-page .payment_methods li label { color:var(--white); font-size:20px; font-weight:700; } /* Stripe payment box — force dark */ .woo-page .payment_box, .woo-page .wc_payment_method .payment_box, .woo-page .payment_method_stripe .payment_box, .woo-page .woocommerce-checkout-payment .payment_box { background:rgba(255,255,255,.03)!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:8px; color:var(--white-dim)!important; } .woo-page .payment_box::before, .woo-page .payment_box::after { display:none!important; } .woo-page .payment_box *, .woo-page .payment_box p, .woo-page .payment_box label, .woo-page .payment_box span, .woo-page .payment_box fieldset, .woo-page .payment_box legend, .woo-page .payment_box h4 { color:var(--white-dim)!important; border-color:rgba(255,255,255,.1)!important; } .woo-page .payment_box fieldset, .woo-page .payment_box .form-row { background:transparent!important; } /* Stripe elements container */ .woo-page .wc-stripe-elements-field, .woo-page .stripe-card-group, .woo-page .wc-stripe-upe-element, .woo-page #wc-stripe-card-element, .woo-page [id*="stripe"] .payment_box { background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:6px; } /* Force dark on Stripe UPE wrapper — the white box */ .woo-page #wc-stripe-upe-element, .woo-page .wc-stripe-upe-element, .woo-page #payment .payment_box .wc-stripe-upe-element, .woo-page .payment_method_stripe .wc-stripe-upe-element, .woo-page .payment_box > div, .woo-page .payment_box > fieldset { background:#141414!important; border-radius:8px; } /* Stripe iframe wrapper — invert if still white */ .woo-page .payment_box .StripeElement, .woo-page .payment_box .__PrivateStripeElement { background:#141414!important; border-radius:6px; padding:4px; } .woo-page .wc-stripe-elements-field:focus-within { border-color:var(--red)!important; } .woo-page .wc_payment_method .testmode { color:var(--red)!important; } /* Kill any remaining white backgrounds in payment area */ .woo-page .woocommerce-checkout-payment, .woo-page .woocommerce-checkout-payment > div, .woo-page .woocommerce-checkout-payment li { background:transparent!important; } /* Naručite gumb — full width, jasno istaknut, prominent CTA */ .woo-page #place_order { background: var(--red); color: var(--white); border: none; padding: 20px 28px; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; border-radius: 10px; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(194, 58, 34, 0.25); margin-top: 20px; } .woo-page #place_order:hover { background: #a83220; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(194, 58, 34, 0.35); } .woo-page #place_order:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(194, 58, 34, 0.25); } .checkout-place-order-total { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } /* Notices */ .woo-page .woocommerce-error, .woo-page .woocommerce-message, .woo-page .woocommerce-info { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--white); border-radius:6px; list-style:none; } .woo-page .woocommerce-error { border-color:var(--red); } /* ─── Terms & Conditions checkbox — jasno odvojen klikabilan blok ─── */ /* Wrapper sekcija */ .woo-page .woocommerce-terms-and-conditions-wrapper { margin: 16px 0 8px; } /* Sam checkbox container — pretvaramo ga u istaknut blok */ .woo-page .wc-terms-and-conditions, .woo-page .form-row.validate-required > label.woocommerce-form__label-checkbox { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; line-height: 1.5; font-size: 14px; color: var(--white); } .woo-page .wc-terms-and-conditions:hover, .woo-page .form-row.validate-required > label.woocommerce-form__label-checkbox:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } /* Veći checkbox za bolji touch target */ .woo-page .wc-terms-and-conditions input[type="checkbox"], .woo-page .form-row.validate-required input.woocommerce-form__input-checkbox { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--red); cursor: pointer; } /* Linkovi unutar checkbox-a — jasno označeni ali ne dominiraju */ .woo-page .wc-terms-and-conditions a, .woo-page .form-row.validate-required label.woocommerce-form__label-checkbox a { color: var(--red-light); text-decoration: underline; text-underline-offset: 2px; /* Sprječava klik na link da slučajno trigerira checkbox toggle */ position: relative; z-index: 2; } .woo-page .wc-terms-and-conditions a:hover, .woo-page .form-row.validate-required label.woocommerce-form__label-checkbox a:hover { color: var(--red); } /* Sakrij defaultni .required asterisk koji WooCommerce dodaje */ .woo-page .wc-terms-and-conditions .required, .woo-page .form-row.validate-required .required { color: var(--red); text-decoration: none; font-weight: 600; } /* ─── Pravni linkovi ispod checkbox-a ─── */ /* Mali sivi tekst odvojen separatorima, vizualno demoted ispod glavnog checkbox-a. Margin je balansiran gore i dolje da legal linkovi budu vizualno odvojeni od payment description iznad i checkbox-a ispod sa istim razmakom. */ .woo-page .checkout-legal-links { margin: 14px 0 14px; padding: 0 18px; text-align: center; font-size: 12px; color: var(--white-muted); line-height: 1.6; } .woo-page .checkout-legal-links a { color: var(--white-dim); text-decoration: none; transition: color 0.2s ease; } .woo-page .checkout-legal-links a:hover { color: var(--white); text-decoration: underline; } .woo-page .checkout-legal-sep { margin: 0 8px; color: var(--white-muted); opacity: 0.6; } .woo-page input[type="checkbox"] { accent-color:var(--red); } /* Thank you */ .woo-page .woocommerce-order { text-align:center; padding:40px 0; } .woo-page .woocommerce-thankyou-order-received { font-family:'DM Serif Display',serif; font-size:22px; color:var(--white); } /* Loading */ .woo-page .blockUI.blockOverlay { background:var(--black)!important; opacity:.7!important; } /* Stripe "— ILI —" separator — sakrij ga, express gumbi dovoljno govore sami */ .woo-page .wc-stripe-express-checkout-element + .p-or-separator, .woo-page #wc-stripe-express-checkout-wrapper .p-or-separator, .woo-page .woocommerce-checkout > .p-or-separator, .woo-page .p-or-separator { display:none!important; } /* Razmak između express gumba i forme */ .woo-page #wc-stripe-express-checkout-wrapper, .woo-page .wc-stripe-express-checkout-element { margin-bottom:20px; } /* ─── Mobile ─── */ /* ═══════════════════════════════════════════════════════════════════════ IN-APP BROWSER CHECKOUT — sakrij express + warning ═══════════════════════════════════════════════════════════════════════ */ body.is-inapp-browser #wc-stripe-express-checkout-wrapper, body.is-inapp-browser .wc-stripe-express-checkout-element, body.is-inapp-browser .wc_payment_method .gpay-button, body.is-inapp-browser .p-or-separator { display: none !important; } .inapp-checkout-notice { background: rgba(194,58,34,.12); border: 1px solid var(--red); border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; color: var(--white-dim); line-height: 1.5; } .inapp-checkout-notice a { color: var(--red-light); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ OBIČNE WP STRANICE ═══════════════════════════════════════════════════════════════════════ */ .page-content { color:var(--white-dim); font-size:16px; line-height:1.7; } .page-content h1,.page-content h2,.page-content h3 { font-family:'DM Serif Display',serif; color:var(--white); font-weight:400; } .page-content h1 { font-size:32px; margin:0 0 24px; } .page-content h2 { font-size:22px; margin:32px 0 12px; } .page-content h3 { font-size:18px; margin:24px 0 8px; } .page-content p { margin:0 0 16px; } .page-content a { color:var(--red); } .page-content ul,.page-content ol { padding-left:24px; margin:0 0 16px; } /* ═══════════════════════════════════════════════════════════════════════ ZNANOST IZA KNJIGE — PAGE TEMPLATE ═══════════════════════════════════════════════════════════════════════ */ .sci-page { background: var(--black); color: var(--white); min-height: 100vh; } .sci-inner { max-width: calc(var(--container-legal) + var(--gutter) * 2); } /* ─── Sticky top bar ─── */ .sci-sticky-bar { position: fixed; top: -70px; left: 0; right: 0; z-index: 1000; background: rgba(10,10,10,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); transition: top .35s cubic-bezier(.22,.61,.36,1); } .sci-sticky-bar.visible { top: 0; } .sci-sticky-inner { max-width: 800px; margin: 0 auto; padding: 10px 24px; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 16px; } .sci-sticky-left { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px; min-width: 0; overflow: hidden; } .sci-sticky-cover { width: 36px !important; max-width: 36px !important; height: auto !important; border-radius: 3px; flex-shrink: 0; display: block; } .sci-sticky-title { font-family: var(--serif); font-size: 15px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sci-sticky-bar .btn-primary { flex-shrink: 0; padding: 10px 20px !important; font-size: 13px !important; white-space: nowrap; } /* ─── Hero ─── */ .sci-hero { padding: 80px 24px 60px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); } .sci-hero-label { font-family: var(--serif); font-style: italic; color: var(--red); font-size: 14px; margin-bottom: 16px; } .sci-hero-title { font-family: var(--serif); font-size: clamp(32px, 6vw, 48px); color: var(--white); font-weight: 400; margin: 0 0 20px; } .sci-hero-sub { color: var(--white-dim); font-size: 17px; line-height: 1.7; max-width: 600px; margin: 0 auto; font-weight: 300; } /* ─── Research Cards ─── */ .sci-cards { padding: 60px 0; } .sci-card { margin-bottom: 48px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; transition: border-color .3s; } .sci-card:hover { border-color: rgba(255,255,255,.15); } .sci-card-header { padding: 28px 32px 24px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); } .sci-card-ch { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--red); background: rgba(194,58,34,.1); padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; font-weight: 600; } .sci-card-header h2 { font-family: var(--serif); font-size: 24px; color: var(--white); font-weight: 400; margin: 0; } .sci-card-body { padding: 28px 32px 32px; } /* Individual studies */ .sci-study { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.04); } .sci-study:last-of-type { border-bottom: none; margin-bottom: 20px; padding-bottom: 0; } .sci-study-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.1); padding: 3px 8px; border-radius: 3px; margin-bottom: 10px; font-weight: 500; } .sci-study h3 { font-family: var(--serif); font-size: 17px; color: var(--white); font-weight: 400; margin: 0 0 8px; } .sci-study p { color: var(--white-dim); font-size: 15px; line-height: 1.7; font-weight: 300; margin: 0 0 8px; } .sci-source { display: inline-block; font-size: 12px; color: var(--red); text-decoration: none; font-weight: 500; letter-spacing: .02em; transition: opacity .2s; } .sci-source:hover { opacity: .7; } /* Connection to book */ .sci-connection { background: rgba(194,58,34,.05); border-left: 3px solid var(--red); padding: 16px 20px; border-radius: 0 8px 8px 0; margin-top: 20px; } .sci-connection strong { color: var(--red); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .sci-connection { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; } /* ─── Summary Table ─── */ .sci-summary { padding: 60px 0; border-top: 1px solid rgba(255,255,255,.06); } .sci-summary h2 { font-family: var(--serif); font-size: 28px; color: var(--white); font-weight: 400; margin: 0 0 28px; text-align: center; } .sci-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sci-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sci-table th { text-align: left; padding: 12px 16px; color: var(--red); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; } .sci-table td { padding: 14px 16px; color: var(--white-dim); border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; line-height: 1.5; } .sci-table td:first-child { color: var(--white); font-weight: 500; white-space: nowrap; } .sci-table td:last-child { text-align: center; color: rgba(255,255,255,.3); white-space: nowrap; } .sci-table tbody tr:hover td { background: rgba(255,255,255,.02); } /* ─── CTA ─── */ .sci-cta { padding: 80px 0; text-align: center; border-top: 1px solid rgba(255,255,255,.06); } .sci-cta h2 { font-family: var(--serif); font-size: clamp(24px, 4vw, 32px); color: var(--white); font-weight: 400; margin: 0 0 16px; } .sci-cta p { color: var(--white-dim); font-size: 16px; margin: 0 0 32px; font-weight: 300; max-width: 500px; margin-left: auto; margin-right: auto; } .sci-back { display: inline-block; margin-top: 20px; color: var(--white-dim); text-decoration: none; font-size: 14px; transition: color .2s; } .sci-back:hover { color: var(--white); } /* ─── Responsive ─── */ /* ═══════════════════════════════════════════════════════════════════════ BESPLATNO POGLAVLJE — SEKCIJA + POPUP ═══════════════════════════════════════════════════════════════════════ */ /* ─── Sekcija na stranici ─── */ .free-chapter { padding: 80px 0; background: var(--black); } .free-chapter-text { color: var(--white-dim); font-size: 17px; line-height: 1.7; max-width: 560px; margin: 0 auto 36px; font-weight: 300; } .btn-outline-red { display: inline-block; padding: 18px 40px; border: 2px solid var(--red); color: var(--red); background: transparent; background-color: transparent; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; line-height: 1.4; } .btn-outline-red:hover { background: var(--red); background-color: var(--red); color: #fff; } button.btn-outline-red { background: transparent; background-color: transparent; border: 2px solid var(--red); color: var(--red); -webkit-appearance: none; appearance: none; } /* ─── Popup overlay ─── */ .nl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .nl-overlay.active { opacity: 1; visibility: visible; } /* ─── Popup card ─── */ .nl-card { background: var(--black-light); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 48px 40px 36px; max-width: 480px; width: 100%; position: relative; transform: translateY(20px); transition: transform .3s ease; } .nl-overlay.active .nl-card { transform: translateY(0); } .nl-close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid rgba(255,255,255,.12); color: var(--white-dim); font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; transition: border-color 0.2s ease, color 0.2s ease; line-height: 1; } .nl-close:hover { border-color: var(--white); color: var(--white); } /* ─── Popup content ─── */ .nl-title { font-family: var(--serif); font-size: clamp(24px, 4vw, 30px); color: var(--white); line-height: 1.2; margin-bottom: 12px; font-weight: 400; } .nl-desc { color: var(--white-dim); font-size: 15px; line-height: 1.6; margin-bottom: 28px; font-weight: 300; } /* ─── Form ─── */ .nl-input { display: block; width: 100%; padding: 16px 18px; margin-bottom: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: var(--white); font-family: var(--sans); font-size: 16px; outline: none; transition: border-color .2s ease; } .nl-input:focus { border-color: var(--red); } .nl-input::placeholder { color: rgba(255,255,255,.3); } .nl-submit { display: block; width: 100%; padding: 18px; background: var(--red); color: #fff; border: none; border-radius: 6px; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: background .2s ease; } .nl-submit:hover { background: #a93226; } .nl-submit:disabled { opacity: .6; cursor: not-allowed; } /* ─── Success state ─── */ .nl-success-text { color: var(--white); font-size: 17px; text-align: center; padding: 24px 0; font-weight: 400; } /* ─── Footer links ─── */ .nl-alt { text-align: center; margin-top: 20px; color: var(--white-dim); font-size: 14px; } .nl-alt a { color: var(--red); text-decoration: none; } .nl-alt a:hover { text-decoration: underline; } .nl-privacy { text-align: center; margin-top: 10px; color: rgba(255,255,255,.25); font-size: 12px; } /* ─── Mobile ─── */ /* ═══════════════════════════════════════════════════════════════════════ 20. RESPONSIVE — sve media queries grupirane po breakpointu Strukturirano od šireg ka užem ekranu (desktop → mobile). ═══════════════════════════════════════════════════════════════════════ */ /* ── DESKTOP (769px+) ── */ @media (min-width: 769px) { .toc-scroll-dots { display: none; } } /* ── DESKTOP / TABLET LANDSCAPE (≤900px) ── */ @media (max-width: 900px) { /* Double-class specificity (0,2,0) beats single section classes like .faq, .agitation */ .prestani-section.prestani-section { padding-top: 48px; padding-bottom: 48px; } .mech-signal.mech-signal { padding-top: 28px; padding-bottom: 28px; } .presale-strip { flex-direction: column; align-items: flex-start; gap: 8px; } .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; } .presale-strip { align-items: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-cta-group { justify-content: center; } .different-grid { grid-template-columns: 1fr; } .test-grid { grid-template-columns: 1fr; } .author-grid { grid-template-columns: 1fr; text-align: center; } .author-photo { margin: 0 auto; } .author-meta { flex-direction: column; align-items: center; gap: 20px; } .book-wrapper img { max-height: 400px; } } /* ── TABLET PORTRAIT (≤768px) ── */ @media (max-width: 768px) { .toc .section-wide { padding: 0; } .toc .section-num, .toc .section-title { padding: 0 var(--gutter); } .toc-parts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; margin-top: 32px; padding: 0 var(--gutter); scrollbar-width: none; } .toc-parts::-webkit-scrollbar { display: none; } .toc-part { flex: 0 0 82%; scroll-snap-align: start; padding: 24px; } /* Nudge animation — subtle hint that there's more */ @keyframes tocNudge { 0% { transform: translateX(0); } 30% { transform: translateX(-20px); } 50% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 100% { transform: translateX(0); } } .toc-parts.nudge { animation: tocNudge .8s cubic-bezier(.22,.61,.36,1) .6s both; } /* Scroll indicators */ .toc-scroll-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 0 24px; } .toc-scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background 0.3s, width 0.3s, border-radius 0.3s; } .toc-scroll-dot.active { background: var(--red); width: 20px; border-radius: 3px; } .woo-page { padding:12px 16px 48px; } .woo-page .woocommerce-checkout { display:flex; flex-direction:column; } /* Redoslijed: express → forma → stripe → narudžba */ .woo-page #wc-stripe-express-checkout-wrapper, .woo-page .wc-stripe-express-checkout-element, .woo-page #wc-stripe-express-checkout-element { order:1; margin-bottom:8px; } .woo-page .woocommerce-checkout .col2-set { order:2; } .woo-page .woocommerce-checkout .woocommerce-additional-fields { order:3; } .woo-page .woocommerce-checkout .woocommerce-checkout-payment { order:4; } .woo-page #order_review_heading { order:5; margin-top:16px; font-size:14px; } .woo-page .woocommerce-checkout-review-order { order:6; position:static; } /* Narudžba sažetak na dnu — kompaktan */ .woo-page .woocommerce-checkout-review-order table th, .woo-page .woocommerce-checkout-review-order table td { padding:6px 0!important; font-size:13px; } .woo-page .woocommerce-checkout-review-order .order-total td { font-size:18px; } .checkout-hero { margin-bottom:10px; padding-bottom:8px; } .checkout-hero-inner { gap:10px; } .checkout-hero-book { width:40px; } .checkout-hero-text h2 { font-size:16px; } .checkout-hero-text p { font-size:12px; } .woo-page .form-row { margin:0 0 6px!important; } .woo-page label { font-size:12px!important; margin-bottom:2px!important; } .woo-page input[type="text"], .woo-page input[type="email"], .woo-page input[type="tel"], .woo-page textarea, .woo-page select, .woo-page .select2-selection--single { padding:9px 12px!important; font-size:14px!important; } .woo-page h3, .woo-page #order_review_heading { font-size:15px; margin:10px 0 6px; } .woo-page textarea { min-height:40px!important; } .woo-page .checkout-order-notes textarea { min-height:72px!important; } /* Collapse inner billing grid to single column on mobile */ .woo-page .woocommerce-checkout .col2-set .col-1 .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; gap: 6px; } .woo-page .woocommerce-checkout-review-order { position:static; } } /* ── MOBILE (≤600px) ── Pravilo: font-size se NE override-uje ovdje. Sve typography koristi clamp() varijable iz Design Tokens i sama se skalira. Ovdje samo strukturalne promjene: padding sekcija, grid switches, hero CTA stack, sticky CTA visibility. */ @media (max-width: 600px) { .agit-stats { padding: 28px 0; margin: 40px 0 32px; } .agit-stats-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 12px; height: 240px; margin-bottom: 28px; padding: 0 4px 8px; justify-content: flex-start; align-items: stretch; } .agit-stats-chart::-webkit-scrollbar { display: none; } .agit-bar { min-width: 72px; max-width: 72px; flex-shrink: 0; scroll-snap-align: start; } .agit-bar-name { margin-top: 8px; height: 36px; } /* Nudge animation — hints scrollability */ .agit-stats-chart.nudge { animation: chartNudge 0.6s ease 0.3s 1; } @keyframes chartNudge { 0% { transform: translateX(0); } 30% { transform: translateX(-20px); } 60% { transform: translateX(6px); } 100% { transform: translateX(0); } } .manuscript-card { flex: 0 0 260px; } .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; } .pivot { padding: 56px var(--gutter); } .sticky-cta { display: block; } .book-wrapper img { max-height: 260px; } .hero { min-height: auto; padding: 32px 24px 28px; } .hero-inner { gap: 24px; } .hero-cta-group { flex-direction: column; align-items: stretch; gap: 12px; } .hero-cta-group .btn-primary { width: 100%; justify-content: center; order: 2; } .hero-price { order: 1; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .hero-price span { display: inline; } .sci-hero { padding: 60px 20px 40px; } .sci-card-header { padding: 20px 20px 16px; } .sci-card-body { padding: 20px 20px 24px; } .sci-table td:first-child { white-space: normal; } .nl-card { padding: 36px 24px 28px; } .free-chapter { padding: 60px 24px; } } /* ── SMALL MOBILE (≤480px) — strukturalne prilagodbe za male telefone ── Pravilo: typography i gutter se sami skaliraju kroz clamp. Ovdje samo stvari koje su strukturalno specifične za male ekrane: hero padding tighter, knjiga max-height, checkout polja kompaktnija. */ @media (max-width: 480px) { /* Hero — malo tighter padding na malim ekranima */ .hero { padding: 28px 18px 24px; } .book-wrapper img { max-height: 240px; } /* Checkout — kompaktniji padding i polja, ne dira ostatak teme */ .woo-page { padding: 20px 14px 40px; } .checkout-hero-inner { gap: 12px; } .checkout-hero-book { width: 48px; } .woo-page .form-row { margin-bottom: 10px; } .woo-page input[type="text"], .woo-page input[type="email"], .woo-page input[type="tel"], .woo-page input[type="number"], .woo-page textarea, .woo-page select, .woo-page .select2-selection--single { padding: 11px 13px !important; } .woo-page #place_order { padding: 17px 22px; } .woo-page .wc-terms-and-conditions, .woo-page .form-row.validate-required > label.woocommerce-form__label-checkbox { padding: 14px 16px; } .woo-page .checkout-legal-links { padding: 0 14px; } .woo-page .checkout-legal-sep { margin: 0 6px; } } /* ── MINI MOBILE (≤375px) — najmanji moderni telefoni (iPhone SE, mini, Galaxy compact) ── Pravilo: typography i gutter se sami skaliraju kroz clamp varijable. Ovdje samo strukturalne stvari koje su specifične za male ekrane: tighter hero padding, manja knjiga, najkompaktniji checkout padding. */ @media (max-width: 375px) { /* Hero — još tighter padding na najmanjim ekranima */ .hero { padding: 24px 14px 20px; } .book-wrapper img { max-height: 220px; } /* Checkout — najkompaktniji padding za male telefone */ .woo-page { padding: 16px 12px 32px; } .checkout-hero-book { width: 42px; } .woo-page input[type="text"], .woo-page input[type="email"], .woo-page input[type="tel"], .woo-page input[type="number"], .woo-page textarea, .woo-page select, .woo-page .select2-selection--single { padding: 10px 12px !important; } .woo-page #place_order { padding: 16px 20px; border-radius: 8px; } .woo-page .wc-terms-and-conditions, .woo-page .form-row.validate-required > label.woocommerce-form__label-checkbox { padding: 12px 14px; gap: 12px; } .woo-page .wc-terms-and-conditions input[type="checkbox"], .woo-page .form-row.validate-required input.woocommerce-form__input-checkbox { width: 20px; height: 20px; } .woo-page .checkout-legal-links { padding: 0 10px; line-height: 1.7; } .woo-page .checkout-legal-sep { margin: 0 5px; } /* Order review tablica kompaktnije */ .woo-page .woocommerce-checkout-review-order table th, .woo-page .woocommerce-checkout-review-order table td { padding: 8px 4px !important; } }