/* Fontovi se učitavaju preko u svake strane (brži LCP od @import koji blokira render). Fallback fontovi ispod su metrički usklađeni (size-adjust/ascent-override) da font-swap ne pravi layout shift. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; } @font-face { font-family: 'Playfair Fallback'; src: local('Georgia'); size-adjust: 101.2%; /* izmerena širina Playfair/Georgia ≈ 1.012 */ ascent-override: 107%; descent-override: 28.7%; line-gap-override: 0%; } :root { --color-bark: #17150e; --color-paper-white: #ffffff; --color-bone-mist: #f0f7f6; --color-ash: #e2e2e2; --color-ink: #000000; --color-slate: #333333; --color-charcoal: #0e1011; --color-brand: #006e9e; /* tamnija nijansa brenda — beli tekst na njoj zadovoljava WCAG 4.5:1 */ --color-brand-light: #e0f4ff; --color-accent: #0088cc; /* jedina akcentna boja — namerna odluka */ --color-chartreuse-pop: var(--color-accent); /* legacy alias, ne koristiti u novom kodu */ --color-periwinkle-wash: #9fa6ff; --gradient-periwinkle: linear-gradient(160deg, rgb(159,166,255), rgb(179,186,232)); --gradient-moss: linear-gradient(160deg, rgb(108,136,83), rgb(153,171,145)); --gradient-slate-blue: linear-gradient(160deg, rgb(104,131,161), rgb(151,169,185)); --gradient-sage: linear-gradient(160deg, rgb(154,193,150), rgb(174,199,176)); --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif; --text-caption: 13px; --text-body: 16px; --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --text-subheading: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-heading-sm: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); --text-heading: clamp(2rem, 1.5rem + 2vw, 2.75rem); --text-heading-lg: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); --text-display: clamp(2.75rem, 1.8rem + 4.4vw, 4.75rem); --leading-caption: 1.4; --leading-body: 1.4; --leading-body-lg: 1.2; --leading-heading: 1.05; --leading-display: 1.02; --tracking-caption: 0.071em; --tracking-wide: 0.092em; --tracking-heading: -0.03em; --tracking-display: -0.04em; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-80: 80px; --spacing-96: 96px; --spacing-120: 120px; --radius-card: 24px; --radius-pill: 9999px; --radius-badge: 8px; --radius-feature: 16px; --page-max: 90vw; /* Motion tokeni — sve animacije referenciraju ove vrednosti */ --dur-fast: 160ms; --dur: 280ms; --dur-slow: 600ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-emph: cubic-bezier(0.16, 1, 0.3, 1); /* Dubina — slojeviti shadow jezik */ --shadow-card: 0 1px 2px rgba(23,21,14,0.04), 0 4px 12px rgba(23,21,14,0.05); --shadow-lift: 0 2px 4px rgba(23,21,14,0.05), 0 12px 28px rgba(23,21,14,0.10); --inset-highlight: inset 0 1px 0 rgba(255,255,255,0.6); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--color-bone-mist); color: var(--color-bark); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } ul { list-style: none; } .container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--spacing-40); } /* ───── ANNOUNCEMENT BAR ───── */ .announcement-bar { background: var(--color-brand); padding: 10px var(--spacing-24); text-align: center; font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: #fff; } .announcement-bar a { text-decoration: underline; font-weight: 600; color: #fff; } /* ───── NAVIGATION ───── */ .nav { background: var(--color-bone-mist); border-bottom: 1px solid var(--color-ash); position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--spacing-32); height: 64px; display: flex; align-items: center; gap: var(--spacing-24); } .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .nav-logo img { height: 32px; width: auto; display: block; } .nav-menu { display: flex; align-items: center; gap: var(--spacing-20); flex: 1; justify-content: center; } .nav-menu a { font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-charcoal); transition: opacity 0.15s; white-space: nowrap; } .nav-menu a:hover { opacity: 0.6; } .nav-menu a.active { border-bottom: 1.5px solid var(--color-bark); padding-bottom: 2px; } .nav-actions { display: flex; align-items: center; gap: var(--spacing-12); } .btn-nav-outline { font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.056em; text-transform: uppercase; color: var(--color-bark); border: 1px solid var(--color-bark); border-radius: var(--radius-pill); padding: 10px 20px; background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .btn-nav-outline:hover { background: var(--color-bark); color: var(--color-paper-white); } .btn-dark { font-size: var(--text-body); font-weight: 500; letter-spacing: 0.056em; background: var(--color-bark); color: var(--color-paper-white); border: none; border-radius: var(--radius-pill); padding: 14px 28px; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; display: inline-block; text-transform: uppercase; } .btn-dark:hover { opacity: 0.85; } .btn-chartreuse { font-size: var(--text-body); font-weight: 500; letter-spacing: 0.056em; background: var(--color-brand); color: var(--color-paper-white); border: none; border-radius: var(--radius-pill); padding: 14px 28px; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; display: inline-block; text-transform: uppercase; } .btn-chartreuse:hover { opacity: 0.85; } /* hamburger */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-bark); margin: 5px 0; transition: 0.2s; } /* ───── LANGUAGE SWITCH ───── */ .lang-switch { position: relative; flex-shrink: 0; } .lang-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bark); background: none; border: 1px solid var(--color-ash); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; transition: border-color 0.15s; white-space: nowrap; } .lang-btn:hover { border-color: var(--color-bark); } .lang-btn svg { flex-shrink: 0; transition: transform 0.2s; } .lang-switch.open .lang-btn svg { transform: rotate(180deg); } .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--color-paper-white); border: 1px solid var(--color-ash); border-radius: 12px; padding: 6px; min-width: 160px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .lang-switch.open .lang-dropdown { display: block; } .lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--color-bark); cursor: pointer; transition: background 0.12s; text-decoration: none; } .lang-option:hover { background: var(--color-bone-mist); } .lang-option.active { font-weight: 700; } .lang-flag { font-size: 16px; line-height: 1; } /* ───── HERO ───── */ .hero { background: var(--color-bone-mist); padding: var(--spacing-120) var(--spacing-40); } .hero-inner { max-width: var(--page-max); margin: 0 auto; max-width: 720px; } .hero-eyebrow { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-bark); margin-bottom: var(--spacing-24); } .hero h1 { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--color-bark); margin-bottom: var(--spacing-24); } .hero-body { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-slate); margin-bottom: var(--spacing-40); max-width: 520px; } .hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-12); } /* ───── SECTION SHARED ───── */ .section { padding: var(--spacing-96) var(--spacing-40); } .section-eyebrow { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-bark); margin-bottom: var(--spacing-20); } .section-heading { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: -0.03em; color: var(--color-bark); margin-bottom: var(--spacing-24); } .section-subheading { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-slate); max-width: 560px; } /* ───── SERVICES GRID ───── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-56); } .service-card { background: var(--color-paper-white); border-radius: var(--radius-card); padding: var(--spacing-32); transition: transform 0.2s; } .service-card:hover { transform: translateY(-4px); } .service-icon { width: 40px; height: 40px; margin-bottom: var(--spacing-20); color: var(--color-bark); } .service-card h3 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: var(--spacing-12); } .service-card p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); } /* ───── FEATURE CARDS ───── */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-24); max-width: var(--page-max); margin: 0 auto; } .feature-card { border-radius: var(--radius-feature); padding: var(--spacing-48); position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; } .feature-card.periwinkle { background: var(--gradient-periwinkle); } .feature-card.moss { background: var(--gradient-moss); } .feature-card.slate-blue { background: var(--gradient-slate-blue); } .feature-card.sage { background: var(--gradient-sage); } .feature-card-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-bark); opacity: 0.7; margin-bottom: var(--spacing-12); } .feature-card h3 { font-size: var(--text-heading-sm); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; color: var(--color-bark); margin-bottom: var(--spacing-16); } .feature-card p { font-size: var(--text-body); color: var(--color-bark); opacity: 0.75; line-height: var(--leading-body); max-width: 360px; } .feature-card-screen { position: absolute; top: var(--spacing-32); right: var(--spacing-32); width: 45%; background: var(--color-paper-white); border-radius: 12px; overflow: hidden; } .screen-placeholder { background: var(--color-paper-white); border-radius: 12px; aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-ash); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; } /* ───── NUMBERS / STATS ───── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-ash); border: 1px solid var(--color-ash); border-radius: var(--radius-card); overflow: hidden; } .stat-item { background: var(--color-paper-white); padding: var(--spacing-40); } .stat-number { font-size: var(--text-heading-lg); font-weight: 400; letter-spacing: var(--tracking-heading); color: var(--color-bark); line-height: 1; margin-bottom: var(--spacing-8); } .stat-label { font-size: var(--text-body); color: var(--color-slate); } /* ───── PROCESS ───── */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-32); margin-top: var(--spacing-56); } .process-step { } .step-num { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-paper-white); margin-bottom: var(--spacing-16); background: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); } .process-step h3 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--spacing-12); } .process-step p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); } /* ───── TESTIMONIALS ───── */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-56); } .testimonial-card { background: var(--color-paper-white); border-radius: var(--radius-card); padding: var(--spacing-32); } .testimonial-text { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-bark); margin-bottom: var(--spacing-24); } .testimonial-author { display: flex; align-items: center; gap: var(--spacing-12); } .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-ash); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--color-slate); } .author-name { font-weight: 600; font-size: var(--text-body); } .author-role { font-size: var(--text-caption); color: var(--color-slate); } /* ───── FAQ ───── */ .faq-section { background: var(--color-bark); padding: var(--spacing-96) var(--spacing-40); } .faq-inner { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spacing-80); align-items: start; } .faq-heading { font-size: var(--text-heading); font-weight: 400; letter-spacing: -0.03em; line-height: var(--leading-heading); color: var(--color-paper-white); } .faq-link { color: var(--color-periwinkle-wash); text-decoration: underline; font-size: var(--text-body); margin-top: var(--spacing-32); display: block; } .faq-list { } .faq-item { border-bottom: 1px solid rgba(255,255,255,0.15); } .faq-question { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: var(--spacing-24) 0; font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; color: var(--color-paper-white); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-16); } .faq-chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-answer { display: none; font-size: var(--text-body); color: var(--color-ash); line-height: var(--leading-body); padding-bottom: var(--spacing-24); } .faq-item.open .faq-answer { display: block; } /* ───── CTA BAND ───── */ .cta-band { background: var(--color-bone-mist); padding: var(--spacing-96) var(--spacing-40); text-align: center; } .cta-band h2 { font-size: var(--text-heading-lg); font-weight: 400; letter-spacing: -0.04em; line-height: var(--leading-heading); color: var(--color-bark); margin-bottom: var(--spacing-32); } .cta-band-actions { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-12); } /* ───── FOOTER ───── */ .footer { background: var(--color-bark); color: var(--color-paper-white); padding: var(--spacing-80) var(--spacing-40) var(--spacing-48); } .footer-inner { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--spacing-56); } .footer-brand { } .footer-logo { font-size: 15px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--spacing-16); } .footer-desc { font-size: var(--text-body); color: rgba(255,255,255,0.5); line-height: var(--leading-body); } .footer-col h4, .footer-col .footer-h { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; opacity: 0.5; margin-bottom: var(--spacing-20); } .footer-col ul { display: flex; flex-direction: column; gap: var(--spacing-12); } .footer-col a { font-size: var(--text-body); color: rgba(255,255,255,0.75); transition: opacity 0.15s; } .footer-col a:hover { opacity: 0.5; } .footer-bottom { max-width: var(--page-max); margin: var(--spacing-56) auto 0; padding-top: var(--spacing-32); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: var(--text-caption); color: rgba(255,255,255,0.4); } /* ───── STICKY CHIP ───── */ .sticky-chip { position: fixed; bottom: var(--spacing-32); right: var(--spacing-32); background: var(--color-paper-white); border-radius: var(--radius-pill); padding: 12px 20px; display: flex; align-items: center; gap: var(--spacing-8); box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 14px; font-weight: 500; color: var(--color-bark); z-index: 200; cursor: pointer; text-decoration: none; transition: transform 0.15s; } .sticky-chip:hover { transform: translateY(-2px); } /* ───── PAGE HEADER ───── */ .page-header { background: var(--color-bone-mist); padding: var(--spacing-96) var(--spacing-40) var(--spacing-80); } .page-header-inner { max-width: var(--page-max); margin: 0 auto; } .page-header h1 { font-size: var(--text-heading-lg); font-weight: 400; letter-spacing: -0.04em; line-height: var(--leading-heading); color: var(--color-bark); margin-bottom: var(--spacing-20); max-width: 700px; } .page-header p { font-size: var(--text-body-lg); color: var(--color-slate); line-height: var(--leading-body-lg); max-width: 520px; } /* ───── PORTFOLIO ───── */ .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); } .case-card { background: var(--color-paper-white); border-radius: var(--radius-card); overflow: hidden; transition: transform 0.2s; cursor: pointer; text-decoration: none; color: inherit; display: block; } .case-card:hover { transform: translateY(-4px); } .case-thumb { height: 260px; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(23,21,14,0.35); font-weight: 500; } .case-thumb.p { background: var(--gradient-periwinkle); } .case-thumb.m { background: var(--gradient-moss); } .case-thumb.s { background: var(--gradient-slate-blue); } .case-thumb.sa { background: var(--gradient-sage); } .case-body { padding: var(--spacing-32); } .case-tag { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate); margin-bottom: var(--spacing-12); } .case-body h3 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--spacing-12); } .case-body p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); } .case-metrics { display: flex; gap: var(--spacing-32); margin-top: var(--spacing-24); padding-top: var(--spacing-24); border-top: 1px solid var(--color-ash); } .metric-val { font-size: var(--text-heading-sm); font-weight: 400; letter-spacing: -0.025em; line-height: 1; margin-bottom: 4px; } .metric-lab { font-size: var(--text-caption); color: var(--color-slate); } /* ───── SERVICE DETAIL ───── */ .service-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); } .service-detail-card { background: var(--color-paper-white); border-radius: var(--radius-card); padding: var(--spacing-40); } .service-detail-card .tag { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; background: var(--color-bone-mist); border-radius: var(--radius-pill); padding: 4px 12px; display: inline-block; margin-bottom: var(--spacing-20); color: var(--color-bark); } .service-detail-card h3 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--spacing-16); } .service-detail-card p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); margin-bottom: var(--spacing-24); } .service-detail-card ul { display: flex; flex-direction: column; gap: var(--spacing-8); } .service-detail-card li { font-size: var(--text-body); color: var(--color-bark); padding-left: var(--spacing-16); position: relative; } .service-detail-card li::before { content: "→"; position: absolute; left: 0; color: var(--color-chartreuse-pop); background: var(--color-bark); width: 4px; height: 4px; border-radius: 50%; top: 10px; content: ""; } .service-detail-card li::before { content: "→"; background: none; width: auto; height: auto; top: auto; border-radius: 0; font-size: 12px; } /* ───── ABOUT ───── */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-80); align-items: center; } .value-list { display: flex; flex-direction: column; gap: var(--spacing-32); margin-top: var(--spacing-48); } .value-item h4 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--spacing-8); } .value-item p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-56); } .team-card { background: var(--color-paper-white); border-radius: var(--radius-card); overflow: hidden; } .team-photo { height: 220px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; color: rgba(23,21,14,0.2); } .team-photo.p { background: var(--gradient-periwinkle); } .team-photo.m { background: var(--gradient-moss); } .team-photo.s { background: var(--gradient-slate-blue); } .team-photo.sa { background: var(--gradient-sage); } .team-info { padding: var(--spacing-20); } .team-info h4 { font-size: var(--text-body); font-weight: 600; margin-bottom: 4px; } .team-info p { font-size: var(--text-caption); color: var(--color-slate); } /* ───── BLOG ───── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); } .blog-card { background: var(--color-paper-white); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform 0.2s; } .blog-card:hover { transform: translateY(-4px); } .blog-thumb { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(23,21,14,0.3); font-weight: 500; } .blog-thumb.p { background: var(--gradient-periwinkle); } .blog-thumb.m { background: var(--gradient-moss); } .blog-thumb.s { background: var(--gradient-slate-blue); } .blog-thumb.sa { background: var(--gradient-sage); } .blog-body { padding: var(--spacing-24); } .blog-cat { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate); margin-bottom: var(--spacing-12); } .blog-body h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--spacing-12); } .blog-body p { font-size: var(--text-body); color: var(--color-slate); line-height: var(--leading-body); } .blog-meta { margin-top: var(--spacing-16); font-size: var(--text-caption); color: var(--color-ash); } /* ───── CONTACT ───── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-80); align-items: start; } .contact-info h2 { font-size: var(--text-heading); font-weight: 400; letter-spacing: -0.03em; margin-bottom: var(--spacing-24); } .contact-info p { font-size: var(--text-body-lg); color: var(--color-slate); line-height: var(--leading-body-lg); margin-bottom: var(--spacing-40); } .contact-details { display: flex; flex-direction: column; gap: var(--spacing-20); } .contact-detail-item { display: flex; gap: var(--spacing-12); align-items: flex-start; } .contact-detail-icon { color: var(--color-bark); margin-top: 2px; flex-shrink: 0; } .contact-detail-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-slate); } .contact-detail-val { font-size: var(--text-body); color: var(--color-bark); } .contact-form { background: var(--color-paper-white); border-radius: var(--radius-card); padding: var(--spacing-48); } .contact-form h3 { font-size: var(--text-subheading); font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--spacing-32); } .form-group { margin-bottom: var(--spacing-24); } .form-group label { display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-bark); margin-bottom: var(--spacing-8); } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--color-bone-mist); border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-bark); outline: none; transition: border-color 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-bark); } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); } /* ───── BOOKING ───── */ .booking-wrap { max-width: 640px; margin: 0 auto; } .booking-card { background: var(--color-paper-white); border-radius: var(--radius-card); padding: var(--spacing-56); } .booking-steps { display: flex; gap: var(--spacing-8); margin-bottom: var(--spacing-40); } .booking-step { flex: 1; height: 4px; background: var(--color-ash); border-radius: 2px; overflow: hidden; } .booking-step.done { background: var(--color-bark); } .booking-step.active { background: var(--color-chartreuse-pop); } /* ───── RESPONSIVE ───── */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .feature-row { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .faq-inner { grid-template-columns: 1fr; gap: var(--spacing-40); } .footer-inner { grid-template-columns: 1fr 1fr; } .about-split { grid-template-columns: 1fr; } .team-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .service-detail-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* veličine naslova sada rešava clamp() fluidna skala u :root */ .container { padding: 0 var(--spacing-20); } .section { padding: var(--spacing-64) var(--spacing-20); } .hero { padding: var(--spacing-80) var(--spacing-20); } .page-header { padding: var(--spacing-64) var(--spacing-20) var(--spacing-48); } .nav-inner { padding: 0 var(--spacing-20); } .nav-menu { display: none; } .nav-toggle { display: block; margin-left: auto; } .nav-menu.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--color-bone-mist); padding: var(--spacing-24) var(--spacing-20); border-bottom: 1px solid var(--color-ash); gap: var(--spacing-20); z-index: 99; } .services-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; gap: var(--spacing-40); } .team-grid { grid-template-columns: repeat(2, 1fr); } .service-detail-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .faq-section { padding: var(--spacing-64) var(--spacing-20); } .footer { padding: var(--spacing-64) var(--spacing-20) var(--spacing-40); } .sticky-chip { bottom: var(--spacing-20); right: var(--spacing-20); } .nav-actions { display: none; } .btn-dark, .btn-chartreuse, .btn-nav-outline { white-space: normal; text-align: center; max-width: 100%; } .hero-cta, .cta-band-actions { flex-wrap: wrap; } .cookie-banner { flex-wrap: wrap; } .cookie-banner p { min-width: 0; flex-basis: 100%; } .stats-row { grid-template-columns: 1fr 1fr; gap: var(--spacing-16); } .stat-number { font-size: 1.6rem; overflow-wrap: anywhere; } .stat-item { min-width: 0; } } /* ===== ND shared layer: nav dropdown, cookie banner, form states ===== */ .nav-dropdown { position: relative; } .nav-dropdown > a { display: inline-flex; align-items: center; gap: 5px; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: -12px; min-width: 240px; background: var(--color-paper-white, #fff); border: 1px solid var(--color-ash, #e3e1da); border-radius: 14px; padding: 10px; list-style: none; margin: 0; box-shadow: 0 16px 40px rgba(23,21,14,0.10); z-index: 60; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--color-bark, #17150e); text-decoration: none; } .nav-dropdown-menu li a:hover, .nav-dropdown-menu li a.active { background: var(--color-bone-mist, #f3f1ea); } @media (max-width: 768px) { .nav-dropdown-menu { position: static; box-shadow: none; border: none; padding-left: 16px; } } .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 560px; margin: 0 auto; background: var(--color-paper-white, #fff); border: 1px solid var(--color-ash, #e3e1da); border-radius: 16px; padding: 16px 20px; display: flex; gap: 16px; align-items: center; box-shadow: 0 16px 40px rgba(23,21,14,0.14); } .cookie-banner p { font-size: 13px; color: var(--color-slate, #6b675c); margin: 0; flex: 1; } .cookie-banner a { color: var(--color-bark, #17150e); text-decoration: underline; } .form-error { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #fdf0ee; border: 1px solid #e8c4bd; color: #8a3326; font-size: 14px; line-height: 1.5; } .form-error a { color: inherit; font-weight: 600; } .form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--color-slate, #6b675c); margin-bottom: 20px; } .form-consent input { margin-top: 3px; } .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: center; } .logo-wall .logo-slot { border: 1px dashed var(--color-ash, #e3e1da); border-radius: 12px; padding: 22px 12px; text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate, #6b675c); } /* ============================================================ PLACEHOLDER FLAG (.is-placeholder) Reusable vizuelni marker za case-study / testimonijal / logo slotove koji TEK ČEKAJU realan sadržaj. Sve označeno ovom klasom je očigledno placeholder, NIKADA lažni dokaz. Badge "Primer · uskoro" jasno to govori posetiocu, a vlasniku označava mesto koje treba popuniti. Pretraži HTML za "PLACEHOLDER" ili klasu "is-placeholder" da nađeš sve. ============================================================ */ .is-placeholder { position: relative; outline: 1px dashed var(--color-ash, #e3e1da); outline-offset: -1px; } .is-placeholder::before { content: 'Primer · uskoro'; position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--color-bark); color: var(--color-accent); padding: 4px 10px; border-radius: var(--radius-pill); pointer-events: none; } /* Suptilno utišavanje sadržaja — dovoljno da se vidi da nije realan podatak */ .is-placeholder .case-body, .is-placeholder .testimonial-text, .is-placeholder .testimonial-author { opacity: 0.85; } .logo-wall.is-placeholder { outline: none; } .logo-wall.is-placeholder::before { top: -28px; left: 0; } .logo-wall.is-placeholder { margin-top: 40px; } /* ============================================================ ND POLISH LAYER — tipografija, dubina, motion sistem ============================================================ */ /* ---- Tipografija ---- */ body { font-optical-sizing: auto; } h1, h2, h3, .section-heading, .faq-heading { text-wrap: balance; } p, .section-subheading, .hero-body { text-wrap: pretty; } .stat-number, .metric-val, .seo-stat-num, .pricing-name { font-variant-numeric: tabular-nums; } /* Display tretman — Playfair namerno i selektivno */ .hero h1, .page-header h1, .cta-band h2, .faq-heading, .seo-hero h1 { font-family: var(--font-display); letter-spacing: -0.02em; } /* Body čitljivost na dugim stranama */ .section p, .faq-answer, .faq-mini-a { line-height: 1.55; } /* ---- Dubina: kartice ---- */ .service-card, .testimonial-card, .case-card, .blog-card, .service-detail-card, .pricing-card, .contact-form, .booking-card { box-shadow: var(--shadow-card), var(--inset-highlight); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .service-card:hover, .case-card:hover, .blog-card:hover, .pricing-card:hover, .service-detail-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift), var(--inset-highlight); } .pricing-card.featured { transform: translateY(-6px); box-shadow: var(--shadow-lift); outline: 1.5px solid var(--color-accent); outline-offset: -1.5px; } .pricing-card.featured:hover { transform: translateY(-10px); } /* ---- Tekstura: film grain preko tamnih sekcija ---- */ .faq-section, .footer, .seo-hero { position: relative; } .faq-section::after, .footer::after, .seo-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Mikro-interakcije: dugmad ---- */ .btn-dark, .btn-chartreuse, .btn-nav-outline { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease; } .btn-dark:hover, .btn-chartreuse:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(23,21,14,0.18); } .btn-dark:active, .btn-chartreuse:active { transform: translateY(0); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; } .btn-dark:focus-visible, .btn-chartreuse:focus-visible, .btn-nav-outline:focus-visible { outline-offset: 3px; border-radius: var(--radius-pill); } /* ---- Nav i footer linkovi: animirani underline ---- */ .nav-menu > li > a:not(.btn-nav-outline), .footer-col a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur) var(--ease-out), opacity var(--dur-fast) ease; padding-bottom: 2px; } .nav-menu > li > a:hover, .footer-col a:hover { background-size: 100% 1px; opacity: 1; } /* ---- Dropdown meni: mekan fade + slide ---- */ @media (min-width: 769px) { .nav-dropdown-menu { display: block; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } } /* ---- Nav posle scrolla: blur + senka (bez promene visine = bez CLS) ---- */ .nav { transition: background var(--dur) ease, box-shadow var(--dur) ease; } .nav.scrolled { background: rgba(240,247,246,0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(23,21,14,0.06), 0 8px 24px rgba(23,21,14,0.05); border-bottom-color: transparent; } /* ---- Sticky chip: pojavljuje se tek posle ~1 ekrana ---- */ .sticky-chip { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .sticky-chip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .sticky-chip.visible:hover { transform: translateY(-2px); } /* ---- Scroll-reveal (klase dodaje isključivo JS — bez JS sve je vidljivo) ---- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-emph), transform var(--dur-slow) var(--ease-emph); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; will-change: auto; } /* ---- Hero ulazak (čist CSS, završava vidljivo) ---- */ @keyframes nd-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-eyebrow, .hero h1, .hero-body, .hero-cta, .page-header .section-eyebrow, .page-header h1, .page-header p { animation: nd-fade-up var(--dur-slow) var(--ease-emph) both; } .hero h1, .page-header h1 { animation-delay: 90ms; } .hero-body, .page-header p { animation-delay: 180ms; } .hero-cta { animation-delay: 270ms; } /* ---- FAQ: glatko otvaranje ---- */ .faq-answer, .faq-mini-a { display: block; overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur) ease, padding-bottom var(--dur-slow) var(--ease-out); } .faq-item.open .faq-answer, .faq-mini-item.open .faq-mini-a { max-height: 420px; opacity: 1; padding-bottom: var(--spacing-24); } /* ---- View transition (kratki fade među stranama, graceful fallback) ---- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } /* ---- Signature: aurora hero (samo .hero, vrlo blago) ---- */ .hero { position: relative; overflow: hidden; } .hero::before, .hero::after { content: ''; position: absolute; width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; border-radius: 50%; filter: blur(90px); opacity: 0.32; pointer-events: none; z-index: 0; } .hero::before { background: radial-gradient(circle at 30% 30%, rgba(0,136,204,0.55), transparent 65%); top: -22%; right: -14%; animation: nd-aurora-a 22s var(--ease-out) infinite alternate; } .hero::after { background: radial-gradient(circle at 70% 70%, rgba(159,166,255,0.5), transparent 65%); bottom: -34%; left: -16%; animation: nd-aurora-b 26s var(--ease-out) infinite alternate; } .hero-inner { position: relative; z-index: 1; } @keyframes nd-aurora-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7%, 9%) scale(1.12); } } @keyframes nd-aurora-b { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(8%, -7%) scale(0.96); } } /* Rotirajuća ključna reč u hero H1 */ .rotate-word { display: inline-block; color: var(--color-accent); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .rotate-word.out { opacity: 0; transform: translateY(8px); } /* ---- Forme: premium fokus + glatki koraci ---- */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,136,204,0.12); } .form-group input, .form-group select, .form-group textarea { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .step.active { animation: nd-fade-up var(--dur) var(--ease-emph) both; } #successMsg { animation: nd-fade-up var(--dur-slow) var(--ease-emph) both; } .form-error { animation: nd-fade-up var(--dur) var(--ease-out) both; } /* ---- Shimmer na placeholder blokovima ---- */ .screen-placeholder, .case-thumb, .blog-thumb { position: relative; overflow: hidden; } .screen-placeholder::after, .case-thumb::after, .blog-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%); background-size: 250% 100%; animation: nd-shimmer 3.2s ease-in-out infinite; pointer-events: none; } @keyframes nd-shimmer { 0% { background-position: 130% 0; } 55% { background-position: -60% 0; } 100% { background-position: -60% 0; } } /* ---- Performanse ---- */ .footer { content-visibility: auto; contain-intrinsic-size: auto 560px; } /* ---- Reduced motion: globalni fallback ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } .hero::before, .hero::after { animation: none; } .reveal { opacity: 1; transform: none; } .screen-placeholder::after, .case-thumb::after, .blog-thumb::after { animation: none; background: none; } .rotate-word { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }