/* ArcOps — single page. Light SaaS register (dribbble 19183940 as reference) adapted to the ArcOps voice: monochrome ink brand, one mint accent, no invented numbers, no stock illustrations. Plus Jakarta Sans self-hosted — no third-party requests, CSP stays at 'self'. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-italic-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } :root { --bg: #f2f2f5; --surface: #ffffff; --ink: #12141d; --muted: #565b6b; --line: #e3e3ea; --accent: #2ee6b7; --accent-soft: #d9f9f0; --accent-ink: #0c6b52; --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maxw: 72rem; --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 18px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Language switching: html[data-lang] decides which spans show. Descendant combinator on purpose — a bare attribute selector would also match itself and hide the whole page. Default (no-JS) is English. */ html:not([data-lang="hr"]) [data-lang="hr"] { display: none; } html[data-lang="hr"] [data-lang="en"] { display: none; } a { color: inherit; } h1, h2, h3 { letter-spacing: -0.02em; } /* ------------------------------ buttons ------------------------------ */ .btn { display: inline-block; font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 0.8rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-small { padding: 0.55rem 1.2rem; font-size: 0.875rem; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: var(--accent); color: var(--ink); } .btn-ghost { border-color: var(--ink); color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; } .btn-accent { background: var(--accent); color: var(--ink); } .btn-accent:hover { background: #fff; } /* -------------------------------- nav -------------------------------- */ .nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: var(--maxw); margin: 0 auto; padding: 1.1rem var(--gutter); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .mark { width: 2rem; height: 2rem; color: var(--ink); } .brand-word { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 1.8rem; font-size: 0.925rem; font-weight: 600; } .nav-links a { color: var(--muted); text-decoration: none; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 0.9rem; } .lang-toggle { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--muted); background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; } .lang-toggle:hover { color: var(--ink); border-color: var(--ink); } /* -------------------------------- hero ------------------------------- */ main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .hero { position: relative; text-align: center; padding: clamp(4rem, 10vh, 7rem) 0 clamp(3.5rem, 8vh, 5.5rem); } .deco { position: absolute; z-index: -1; color: var(--accent); } .deco-rings { width: clamp(14rem, 30vw, 22rem); height: auto; left: -6rem; top: -2rem; opacity: 0.5; } .deco-dots { width: clamp(6rem, 12vw, 9rem); height: auto; right: 0; bottom: 4rem; opacity: 0.7; } .badge { display: inline-block; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 0.45rem 1.1rem; margin-bottom: 1.6rem; } .hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.12; margin-bottom: 1.4rem; } /* The accent marker: a thick mint underline behind the key words. */ .hl { font-style: normal; background: linear-gradient(transparent 68%, var(--accent) 68%, var(--accent) 94%, transparent 94%); } .lede { max-width: 40rem; margin: 0 auto 2.2rem; color: var(--muted); font-size: 1.1rem; } .hero-actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: clamp(3rem, 7vh, 4.5rem); } .stack-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .stack { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .stack li { font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; } /* ---------------------------- services panel -------------------------- */ .panel { background: var(--surface); border-radius: calc(var(--radius) + 6px); padding: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: clamp(3.5rem, 8vh, 5.5rem); } .panel-head { text-align: center; margin-bottom: 2.4rem; } .panel-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; margin-bottom: 0.6rem; } .panel-head p { color: var(--muted); max-width: 34rem; margin: 0 auto; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: border-color 0.15s ease; } .card:hover { border-color: var(--accent); } .icon { width: 2.2rem; height: 2.2rem; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 0.45rem; margin-bottom: 1rem; } .card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; } .card p { color: var(--muted); font-size: 0.925rem; } /* ------------------------------ projects ------------------------------ */ .section { margin-bottom: clamp(3.5rem, 8vh, 5.5rem); } .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .project { background: var(--surface); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; } .project .tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .project h3 { font-size: 1.35rem; font-weight: 800; } .project h3 a { text-decoration: none; } .project h3 a:hover { text-decoration: underline; } .project p:not(.tag) { color: var(--muted); font-size: 0.925rem; } .project-accent { background: var(--accent); } .project-accent .tag, .project-accent p:not(.tag) { color: rgba(18, 20, 29, 0.75); } .project-link { margin-top: auto; font-weight: 700; font-size: 0.9rem; text-decoration: none; } .project-link:hover { text-decoration: underline; } .project-dark { background: var(--ink); color: #fff; } .project-dark .tag { color: var(--accent); } .project-dark p:not(.tag) { color: rgba(255, 255, 255, 0.72); } /* ------------------------------- steps -------------------------------- */ .steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; counter-reset: none; } .steps li { border-top: 2px solid var(--ink); padding-top: 1.1rem; } .step-n { display: inline-block; font-size: 0.8rem; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 0.15rem 0.7rem; margin-bottom: 0.7rem; } .steps h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; } .steps p { color: var(--muted); font-size: 0.925rem; } /* -------------------------------- CTA --------------------------------- */ .cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: calc(var(--radius) + 6px); text-align: center; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem); margin-bottom: clamp(3.5rem, 8vh, 5.5rem); } .cta-rings { left: auto; right: -5rem; top: -4rem; opacity: 0.35; } .cta h2 { font-size: clamp(1.6rem, 3.8vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1.8rem; } .cta-meta { margin-top: 1.6rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); } /* ------------------------------ footer -------------------------------- */ .footer { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.875rem; } .footer-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); } .footer .mark { width: 1.5rem; height: 1.5rem; } /* ------------------------------ mobile -------------------------------- */ @media (max-width: 760px) { .nav-links { display: none; } .deco-rings { left: -8rem; } .deco-dots { display: none; } .footer { flex-direction: column; gap: 0.6rem; } }