:root { --accent: #e0a66b; --cream: #fbf4ea; /* Tweakable */ --grad-dark: #241510; --grad-mid: #6b4429; --sheen: 0.22; --wm-color: #fbf4ea; --wm-scale: 1; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow: hidden; background-color: #241510; } body { margin: 0; min-height: 100vh; min-height: 100svh; height: 100vh; height: 100svh; overflow: hidden; /* iOS 26 izvodi boju trake iz background-color -ja (theme-color ignorira) */ background-color: #241510; background-image: linear-gradient(298deg, rgba(16, 9, 4, 0.6) 0%, rgba(16, 9, 4, 0) 44%), linear-gradient(118deg, rgba(231, 185, 138, 0) 43%, rgba(231, 185, 138, var(--sheen)) 50%, rgba(231, 185, 138, 0) 57%), linear-gradient(118deg, var(--grad-dark) 0%, var(--grad-dark) 28%, var(--grad-mid) 50%, var(--grad-dark) 72%, var(--grad-dark) 100%); color: var(--cream); font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-user-select: none; -moz-user-select: none; user-select: none; } img { display: block; max-width: 100%; } a { color: inherit; } /* ─── Sadržaj ─────────────────────────────────────────────────────── */ .wrap { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(40px, 8vh, 96px) clamp(24px, 6vw, 64px); } .wordmark { font-family: "Playfair Display", serif; font-weight: 600; color: var(--wm-color); line-height: 0.95; margin: 0; font-size: calc(clamp(72px, 15vw, 168px) * var(--wm-scale)); letter-spacing: 0.005em; text-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); } .slogan { display: block; margin: clamp(18px, 2.6vw, 28px) 0 0; font-size: clamp(10px, 1.2vw, 14px); letter-spacing: 0.34em; text-transform: uppercase; color: var(--cream); font-weight: 400; text-align: center; padding-left: 0.34em; white-space: nowrap; } .divider { width: clamp(54px, 7vw, 86px); height: 1px; background: rgba(251, 244, 234, 0.4); margin: clamp(40px, 6vh, 64px) 0 0; } .contact { max-width: 660px; margin: clamp(32px, 5vh, 52px) 0 0; font-weight: 300; font-size: clamp(16px, 1.9vw, 22px); line-height: 1.64; color: rgba(251, 244, 234, 0.92); text-wrap: pretty; } .contact a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(224, 166, 107, 0.5); transition: color 0.2s ease, border-color 0.2s ease; } .contact a:hover, .contact a:focus-visible { color: var(--cream); border-color: var(--cream); outline: none; } .social { display: flex; gap: clamp(14px, 1.6vw, 18px); margin-top: clamp(34px, 5vh, 50px); } .social a { width: clamp(42px, 4.25vw, 49px); height: clamp(42px, 4.25vw, 49px); display: flex; align-items: center; justify-content: center; transition: transform 0.22s ease, opacity 0.22s ease; opacity: 0.92; } .social a:focus-visible { opacity: 1; transform: translateY(-3px); outline: none; } /* Hover (lift) samo na uređajima s pravim pokazivačem — ne na dodir/mobitel */ @media (hover: hover) { .social a:hover { opacity: 1; transform: translateY(-3px); } } .social img { width: 100%; height: 100%; display: block; } .foot { margin-top: clamp(40px, 6vh, 64px); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(251, 244, 234, 0.5); } /* ─── Ulazna animacija (fluidna) ──────────────────────────────────── */ .wordmark .ltr { display: inline-block; will-change: transform, opacity; } .stack { display: flex; flex-direction: column; align-items: center; width: 100%; will-change: transform; } .rest { display: flex; flex-direction: column; align-items: center; width: 100%; } @media (prefers-reduced-motion: no-preference) { /* Slova ChoCo se fluidno pojave jedno po jedno */ .wordmark .ltr { opacity: 0; transform: translateY(42px) scale(0.66); animation: pop 0.74s cubic-bezier(0.33, 1.28, 0.5, 1) forwards; } .wordmark .ltr:nth-child(1) { animation-delay: 0.26s; } .wordmark .ltr:nth-child(2) { animation-delay: 0.42s; } .wordmark .ltr:nth-child(3) { animation-delay: 0.58s; } .wordmark .ltr:nth-child(4) { animation-delay: 0.74s; } .wordmark .ltr:nth-child(5) { animation-delay: 0.9s; } @keyframes pop { 0% { opacity: 0; transform: translateY(42px) scale(0.66); } 60% { opacity: 1; transform: translateY(-5px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Logo fluidno klizne gore (transform), ostatak se fluidno otkrije */ .stack.glide { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .rest > * { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } body.ready .rest > * { opacity: 1; transform: none; } body.ready .slogan { transition-delay: 0.1s; } body.ready .divider { transition-delay: 0.44s; } body.ready .contact { transition-delay: 0.78s; } body.ready .social { transition-delay: 1.14s; } body.ready .foot { transition-delay: 1.46s; } } /* ─── Mobitel (portrait): wordmark +30%, slogan +20% u 2 reda, kontakt +2px ─── */ @media (max-width: 620px) { :root { --wm-scale: 1.235; } .slogan { font-size: calc(clamp(10px, 1.2vw, 14px) * 1.2); line-height: 1.6; white-space: normal; max-width: 22em; text-wrap: balance; } .contact { font-size: calc(clamp(16px, 1.9vw, 22px) + 1px); } } /* ─── Mobitel landscape: bez slogana, veći logo (+20%), veći razmaci ─── */ @media (orientation: landscape) and (max-height: 500px) { .wrap { padding: 12px clamp(24px, 6vw, 64px); } .wordmark { font-size: calc(clamp(38px, 11vh, 60px) * 1.32); } .slogan { display: none; } .divider { margin-top: 27px; } .contact { margin-top: 27px; font-size: 16px; line-height: 1.45; } .social { margin-top: 29px; } .social a { width: 38px; height: 38px; } .foot { margin-top: 29px; } }