/* Anti-FOUC: when a non-default language is resolved before paint, the head script adds .i18n-pending to ; translatable text stays invisible (but keeps its layout box, so no shift) until applyLang() removes the class. Polish visitors never get this class, so they see text instantly. */ .i18n-pending [data-i18n]:not([data-i18n-attr]), .i18n-pending [data-home-i18n], .i18n-pending [data-work-i18n]{ visibility: hidden; } :root{ --bg: #0b0c0e; --bg2:#0f1114; --surface:#13161b; --surface2:#171b22; --line: rgba(255,255,255,.08); --line2: rgba(205,168,93,.20); --text:#f2f1ee; --muted: rgba(242,241,238,.72); --muted2: rgba(242,241,238,.55); --gold:#cda85d; --gold2:#e6c97a; --shadow: 0 24px 60px -22px rgba(0,0,0,.62), 0 8px 24px -16px rgba(0,0,0,.5); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -20px rgba(0,0,0,.55); --shadow-gold: 0 26px 64px -24px rgba(205,168,93,.30); --radius: 20px; --radius2: 26px; --max: 1120px; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: Georgia, "Times New Roman", serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); } *{box-sizing:border-box} html{ height:100%; overflow-x: clip; scroll-behavior:smooth; } body{height:100%; overflow-x: clip} body{ margin:0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height:1.55; position: relative; min-height: 100%; } body::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 700px at 65% 10%, rgba(205,168,93,.08), transparent 60%), radial-gradient(1000px 600px at 15% 25%, rgba(255,255,255,.05), transparent 55%), radial-gradient(1100px 700px at 92% 55%, rgba(205,168,93,.05), transparent 65%), var(--bg); } a{color:inherit; text-decoration:none} a:hover{text-decoration:none} img{max-width:100%; display:block} button{font-family:inherit} ::selection{background: rgba(205,168,93,.25)} .container{max-width:var(--max); margin:0 auto; padding:0 22px} .h1,.h2,.h3{ font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing:-.025em; } .h1{font-size: clamp(2.25rem, 3.2vw, 3.1rem); line-height:1.06; margin:0} .h2{font-size: clamp(1.6rem, 2.2vw, 2.05rem); line-height:1.15; margin:0} .h3{font-size: 1.2rem; margin:0} .kicker{ color: var(--gold); font-weight:600; letter-spacing:.10em; text-transform:uppercase; font-size:.78rem; } .sub{color:var(--muted); margin:.9rem 0 0} .page{padding: 40px 0 70px} .section{padding: 56px 0} .divider{height:1px; background: var(--line); margin: 26px 0} .nav{ position:sticky; top:0; z-index:95; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom:1px solid var(--line); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding: 14px 0; min-height: 58px; } .brand{ display:flex; align-items:center; gap:12px; min-width: 220px; min-inline-size: 0; flex: 1 1 auto; align-self:center; } .brand .mark{ width:10px; height:10px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(205,168,93,.15); } .brand .name{ font-weight:700; min-width: 0; line-height: 1.05; } .brand .role{display:block; color: var(--muted2); font-size:.88rem; margin-top:1px} .nav-links{display:flex; gap:18px; align-items:center} .nav-links a{ color: var(--muted); font-weight:600; font-size:.95rem; padding: 10px 10px; border-radius: 12px; } .nav-links a:hover{color: var(--text); background: rgba(255,255,255,.04)} .nav-links a[aria-current="page"]{color: var(--text); background: rgba(205,168,93,.10); outline:1px solid var(--line2)} .nav-actions{ display:flex; align-items:center; gap:12px; margin-left: auto; flex-shrink: 0; } .lang{ display:flex; gap:6px; padding: 4px; border:1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); } .lang button{ border:0; background:transparent; color: var(--muted); padding: 7px 10px; border-radius: 999px; font-weight:700; font-size:.86rem; } .lang button.active{color: var(--bg); background: var(--gold);} .btn{ display:inline-flex; align-items:center; gap:10px; justify-content:center; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-weight:700; font-size:.95rem; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14)} .btn.primary{ background: linear-gradient(180deg, rgba(205,168,93,1), rgba(186,149,76,1)); border-color: rgba(205,168,93,.55); color: #0b0c0e; } .btn.primary:hover{transform: translateY(-1px); filter: brightness(1.03)} .nav-toggle{ display:none; align-items:center; justify-content:center; inline-size: 46px; block-size: 46px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 14px; padding: 0; color: var(--text); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .nav-toggle:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } .nav-toggle[aria-expanded="true"]{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); } .nav-toggle span{ display:block; width:22px; height:2px; background: currentColor; border-radius:999px; margin:4px 0; transition: transform .22s ease, opacity .22s ease; transform-origin:center; } .nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-6px) rotate(-45deg)} .nav-backdrop{ position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events:none; transition: opacity 300ms ease, visibility 0s linear 350ms; } .nav-backdrop.is-open{ opacity: 1; visibility: visible; pointer-events:auto; transition-delay: 0s; } .mobile-menu{ position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(320px, 88vw); padding: 78px 16px 16px; background: #1a1a16; color: #ffffff; border-left:1px solid rgba(255,255,255,.06); box-shadow: -18px 0 42px rgba(0,0,0,.28); transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease, visibility 0s linear 350ms; } .mobile-menu.is-open{ transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .mobile-links{ width:100%; max-height: calc(100dvh - 94px); overflow-y:auto; display:grid; gap:10px; } .mobile-links a{ display:flex; align-items:center; min-height:44px; padding: 12px 16px; border-radius: 12px; color: #ffffff; font-weight:700; background: transparent; transition: background .18s ease, transform .18s ease, color .18s ease; } .mobile-links a:hover{ background: rgba(255,255,255,.06); transform: translateX(-1px); } .mobile-links a[aria-current="page"]{ background: rgba(255,255,255,.08); } .mobile-menu-cta{ width: 100%; margin-top: 10px; padding: 14px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #c9963e, #e8b84b); color: #1a1a16; font-weight:700; justify-content:center; box-shadow: 0 12px 24px rgba(201,150,62,.18); } .mobile-menu-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); } body.nav-open, body.is-open{ overflow:hidden; } body.nav-open .mobile-dock, body.is-open .mobile-dock{ opacity:0; pointer-events:none; transform: translateY(10px); } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .nav-toggle, .nav-toggle span, .nav-backdrop, .mobile-menu, .mobile-links a, .mobile-menu-cta, .mobile-dock{ transition:none !important; animation:none !important; } } .grid{display:grid; gap:16px} .grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))} .grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))} @media (max-width: 980px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} } .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius: var(--radius2); padding: 18px; } .card.glow{ box-shadow: 0 0 0 1px rgba(205,168,93,.10), 0 18px 50px rgba(0,0,0,.35); } .card .meta{color: var(--muted2); font-size:.92rem; margin-top:6px} .card a.inline{color: var(--gold); font-weight:700} .card a.inline:hover{text-decoration:underline} .bullets{margin: 12px 0 0; padding-left: 18px; color: var(--muted)} .bullets li{margin: 6px 0} .list{margin: 12px 0 0; padding-left: 18px; color: var(--muted)} .list li{margin: 6px 0} .list strong{color: var(--text)} .metricline{margin-top: 12px; padding-top: 12px; border-top:1px solid var(--line); color: var(--muted)} .metricline b{color: var(--gold2)} .hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: stretch; } @media (max-width: 980px){ .hero{grid-template-columns:1fr} } .hero-visual{ border-radius: var(--radius2); border:1px solid var(--line); background: radial-gradient(600px 360px at 70% 25%, rgba(205,168,93,.22), transparent 60%), radial-gradient(520px 360px at 35% 60%, rgba(255,255,255,.08), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); position:relative; overflow:hidden; min-height: 320px; } .hero-visual::after{ content:""; position:absolute; inset:-2px; background: linear-gradient(120deg, transparent, rgba(205,168,93,.18), transparent); transform: translateX(-60%); opacity:.7; } .hero-visual .tag{ position:absolute; bottom:16px; left:16px; padding: 9px 12px; background: rgba(11,12,14,.55); border:1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight:700; } .hero-copy{ display:flex; flex-direction:column; justify-content:center; } .hero-actions, .hero-proof{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; } .hero-proof{margin-top:14px} label{display:block; font-weight:700; color: var(--muted); margin-bottom:7px} input, select, textarea{ width:100%; padding: 12px 12px; background: rgba(255,255,255,.02); border:1px solid var(--line); border-radius: 14px; color: var(--text); outline:none; } input:focus, select:focus, textarea:focus{border-color: rgba(205,168,93,.55); box-shadow: 0 0 0 4px rgba(205,168,93,.12)} textarea{min-height:140px; resize:vertical} .form-row{display:grid; grid-template-columns: 1fr 1fr; gap: 14px} @media (max-width: 980px){ .form-row{grid-template-columns:1fr} } .footer{ border-top:1px solid var(--line); padding: 28px 0; color: var(--muted2); } .footer .row{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap} .footer a{color: var(--muted); font-weight:700} .footer a:hover{color: var(--text)} .reveal{opacity:1; transform:none} html.js .reveal{opacity:0; transform: translateY(8px)} html.js .reveal.in{opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease} .pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); font-weight:700; } .title{ display:flex; flex-direction:column; gap:10px; max-width:min(760px, 100%); } .title .sub{max-width: 70ch} .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; } .quick-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; } .quick-actions > *{min-width:0} .grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; } @media (max-width: 980px){ .grid-2{grid-template-columns:1fr} } .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px; } .filters::-webkit-scrollbar{display:none} .filters + .grid-2{margin-top:18px} .filter{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding: 9px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); font-weight:800; font-size:.9rem; white-space:nowrap; cursor:pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .filter:hover{transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--text)} .filter.active, .filter[aria-selected="true"]{ background: rgba(205,168,93,.14); border-color: rgba(205,168,93,.35); color: var(--text); } .carousel-dots{ display:none; align-items:center; justify-content:center; gap:8px; margin-top: 14px; } .carousel-dots button{ width:9px; height:9px; padding:0; border:0; border-radius:999px; background: rgba(255,255,255,.16); transition: transform .22s ease, background .22s ease, width .22s ease; } .carousel-dots button.active{ width:26px; background: var(--gold); } .work-card .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .work-card h3{margin:0; font-size:1.15rem} .work-card .role{margin-top:6px; color: var(--muted)} .stack{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; } .stack .pill{padding: 7px 10px; font-size:.86rem} .steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top: 16px; } @media (max-width: 980px){ .steps{grid-template-columns:1fr} } .step{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius: var(--radius2); padding: 18px; } .step .n{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; border:1px solid var(--line2); color: var(--gold2); font-weight:900; margin-bottom: 10px; } .price{ margin-top: 12px; padding-top: 12px; border-top:1px solid var(--line); color: var(--muted); } .inline-actions, .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; } .inline-actions > *, .actions > *{min-width:0} .form{display:flex; flex-direction:column; gap:14px} .field{display:flex; flex-direction:column} .help{margin-top: 10px; color: var(--muted2); font-size:.92rem} .copy-status{margin-top: 10px; color: var(--gold2); font-weight:700; min-height: 1.2em} .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .footer .claim{max-width: 70ch} .footer .mini{display:flex; gap:14px; flex-wrap:wrap} .footer .mini a{color: var(--muted); font-weight:700} .footer .copyright{flex-basis:100%; font-size:.9rem; color: var(--muted2)} .footer .mini a:hover{color: var(--text)} .mobile-dock{display:none} .mobile-dock-duplicate{display:inherit} .mobile-dock-redundant{display:inherit} @media (max-width: 920px){ .nav-links{display:none} .nav-actions .btn.primary{display:none} .brand{ min-width: 0; gap:10px; } .brand .role{display:none} .nav-toggle{display:inline-flex} } @media (min-width: 921px){ .nav-toggle, .mobile-menu, .nav-backdrop{ display:none !important; } } .p{color: var(--muted); margin: 12px 0 0} .muted{color: var(--muted2)} @media (max-width: 760px){ .container{padding:0 18px} .page{padding: 28px 0 56px} .section{padding: 40px 0} .divider{margin: 22px 0} body.has-mobile-dock{padding-bottom: calc(104px + env(safe-area-inset-bottom))} .nav-inner{ gap:10px; padding: 12px 0; } .brand .name{font-size:.96rem} .lang{padding:3px} .lang button{padding: 7px 9px} .hero{gap: 16px} .hero-visual{min-height: 240px} .hero-visual .tag{ display:flex; left:12px; right:12px; bottom:12px; max-width: none; justify-content:center; text-align:center; } .hero-actions{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .hero-actions > *{width:100%} .hero-proof{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-right:-18px; padding-right:18px; } .hero-proof::-webkit-scrollbar{display:none} .hero-proof .pill{white-space:nowrap} .card, .step{padding:16px} .section-head{ align-items:flex-start; } .quick-actions{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .quick-actions > *{width:100%} .quick-actions > :first-child{grid-column:1 / -1} .inline-actions{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .inline-actions > *{width:100%} .inline-actions > :only-child, .inline-actions > :first-child:nth-last-child(3){ grid-column:1 / -1; } .actions{ gap:12px; flex-direction:column; } .actions > *{width:100%} .filters{ flex-wrap:nowrap; margin-right:-18px; padding-right:18px; scroll-snap-type:x proximity; } .filter{ width:auto; scroll-snap-align:start; } .mobile-dock-duplicate{display:none !important} .mobile-dock-redundant{display:none !important} [data-carousel]{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; margin-right:-18px; padding:0 18px 6px 0; } [data-carousel]::-webkit-scrollbar{display:none} [data-carousel] > *{ flex:0 0 min(84vw, 320px); scroll-snap-align:start; } .carousel-dots{display:flex} .work-card .row{ flex-direction:column; align-items:flex-start; } .mobile-dock{ position:fixed; left:18px; right:18px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:70; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .95fr); gap:10px; padding:10px; border:1px solid rgba(255,255,255,.09); border-radius: 22px; background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: blur(18px); box-shadow: 0 18px 48px rgba(0,0,0,.42); } .mobile-dock .btn{ width:100%; min-height:48px; margin:0; } .footer-inner{ flex-direction:column; align-items:flex-start; } .footer .copyright{flex-basis:auto} } @media (max-width: 560px){ .container{padding:0 16px} .h1{ font-size: clamp(1.95rem, 11vw, 2.45rem); line-height:1.08; } .h2{font-size: clamp(1.45rem, 7vw, 1.85rem)} .nav-inner{align-items:center} .brand{ min-width:0; transform: translateY(1px); } .brand .mark{ width:9px; height:9px; box-shadow: 0 0 0 5px rgba(205,168,93,.15); } .brand .name{ font-size:.9rem; line-height:1.15; } .nav-actions{gap:8px} .lang button{ padding: 6px 8px; font-size:.8rem; } .nav-toggle{ inline-size: 44px; block-size: 44px; } .hero-visual{min-height: 220px} .hero-visual .tag{ font-size:.8rem; text-align:center; } body.has-mobile-dock{padding-bottom: calc(98px + env(safe-area-inset-bottom))} .hero-actions{grid-template-columns:1fr} .filters{ margin-right:-16px; padding-right:16px; } [data-carousel]{ margin-right:-16px; padding-right:16px; } .mobile-dock{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); } .btn{width:100%} .footer .mini{ flex-direction:column; align-items:flex-start; gap:10px; } #calInlineEmbed{height:min(70svh, 620px) !important} } .title .h1{ font-size: clamp(2rem, 2.6vw, 2.6rem); } .section-grid{ margin-top: 18px; } .card-link{ margin-top: 14px; } .compact-title{ font-size: 1.5rem; margin-bottom: 12px; } .about-last{ margin-bottom: 0; } .stack-title{ margin-top: 16px; } .stack-block{ margin-top: 10px; } .book-card{ margin-bottom: 18px; } .soft-divider{ margin: 16px 0; } .calendar-notice{ font-size: .85rem; opacity: .82; } .cal-embed{ width: 100%; height: 720px; overflow: auto; margin-top: 20px; } .no-script-note{ margin-top: 10px; opacity: .8; } .page-home .hero{ position: relative; min-height: min(720px, calc(100svh - 118px)); padding: clamp(24px, 5vw, 56px); border: 1px solid rgba(255,255,255,.08); border-radius: clamp(26px, 4vw, 42px); background: radial-gradient(520px 420px at 82% 18%, rgba(205,168,93,.24), transparent 66%), radial-gradient(620px 480px at 12% 78%, rgba(255,255,255,.07), transparent 62%), linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 46%, rgba(205,168,93,.05)); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.36); isolation: isolate; } .page-home .hero::before{ content: "NK"; position: absolute; right: clamp(-12px, 4vw, 40px); top: -34px; z-index: -1; font-family: "Playfair Display", Georgia, serif; font-size: clamp(7rem, 20vw, 18rem); line-height: .8; letter-spacing: -.08em; color: rgba(255,255,255,.035); } .page-home .hero::after{ content: ""; position: absolute; inset: auto 10% -40% 32%; height: 360px; background: radial-gradient(circle, rgba(205,168,93,.22), transparent 65%); filter: blur(42px); pointer-events: none; z-index: -1; } .page-home .hero .h1{ max-width: 11ch; font-size: clamp(2.85rem, 7vw, 5.8rem); line-height: .9; letter-spacing: -.055em; } .page-home .hero .sub{ max-width: 48ch; font-size: clamp(1rem, 1.35vw, 1.14rem); } .hero-stage{ min-height: 420px; border: 0; background: linear-gradient(145deg, rgba(12,13,12,.78), rgba(24,23,18,.96)), radial-gradient(340px 260px at 80% 18%, rgba(205,168,93,.22), transparent 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 26px 70px rgba(0,0,0,.35); } .stage-grid{ position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle at 62% 34%, black, transparent 72%); } .stage-card{ position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: rgba(255,255,255,.065); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.26); } .stage-card-main{ left: 26px; right: 38px; top: 64px; padding: 24px; } .stage-card-side{ right: 22px; bottom: 86px; width: min(230px, 58%); padding: 18px; background: rgba(205,168,93,.13); } .stage-label{ display: block; margin-bottom: 8px; color: var(--gold2); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .stage-card strong{ display: block; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.1; } .stage-lines{ display: grid; gap: 10px; margin-top: 24px; } .stage-lines span{ display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(205,168,93,.9)); } .stage-lines .line-long{width:82%} .stage-lines .line-short{width:64%; opacity:.62} .stage-lines .line-mid{width:74%; opacity:.78} .stage-metrics{ position: absolute; left: 24px; right: 24px; bottom: 26px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; } .stage-metrics span{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(11,12,14,.48); color: rgba(255,255,255,.78); font-weight: 800; font-size: .82rem; } .service-strip{ position: relative; min-height: 100%; padding: 22px 18px 20px 0; border-top: 1px solid rgba(255,255,255,.12); } .service-strip::before{ content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--gold); } .service-strip .meta, .case-study .meta{ color: var(--muted2); font-size: .92rem; margin-top: 6px; } .service-strip .bullets{ padding-left: 0; list-style: none; } .service-strip .bullets li{ display: flex; gap: 9px; } .service-strip .bullets li::before{ content: ""; width: 6px; height: 6px; margin-top: .65em; border-radius: 999px; background: var(--gold); flex: 0 0 auto; } .service-strip a.inline, .legal-summary a.inline, .card a.inline{ color: var(--gold); font-weight: 800; } .case-rail{ align-items: stretch; } .case-study{ position: relative; min-height: 100%; padding: 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), radial-gradient(260px 160px at 100% 0%, rgba(205,168,93,.16), transparent 65%); } .case-index, .case-marker{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 14px; color: var(--gold2); background: rgba(205,168,93,.1); border: 1px solid rgba(205,168,93,.22); font-weight: 900; } .case-note{ margin: 16px 0 0; color: var(--muted); } .case-note b{ color: var(--text); } .process-list{ margin-top: 18px; border-top: 1px solid rgba(255,255,255,.1); } .process-item{ display: grid; grid-template-columns: 86px minmax(0, .34fr) minmax(0, 1fr); align-items: start; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .process-item .sub{ margin-top: 0; } .section-cta{ margin-top: 20px; } .faq-list{ margin-top: 18px; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.1); } .faq-item{ display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .faq-item .sub{ margin-top: 0; } .case-panel{ position: relative; padding: 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), radial-gradient(320px 200px at 100% 0%, rgba(205,168,93,.12), transparent 62%); box-shadow: 0 20px 52px rgba(0,0,0,.22); } .case-panel:hover{ border-color: rgba(205,168,93,.26); } .work-desc{ margin: 10px 0 0; } .service-detail, .fit-panel{ padding: 22px; min-height: 100%; border-top: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.028), transparent); } .service-detail{ border-left: 1px solid rgba(205,168,93,.24); padding-left: 24px; } .fit-panel{ border-left: 1px solid rgba(255,255,255,.08); } .legal-shell{ display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; } .legal-summary{ position: sticky; top: 92px; padding: 22px; border: 1px solid rgba(205,168,93,.18); border-radius: 28px; background: radial-gradient(280px 190px at 100% 0%, rgba(205,168,93,.18), transparent 62%), rgba(255,255,255,.035); } .legal-points{ margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); } .legal-points li{ padding-left: 18px; position: relative; } .legal-points li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); } .legal-doc{ max-width: 980px; padding: clamp(20px, 3vw, 30px); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: rgba(255,255,255,.028); } .legal-doc .h2{ margin-bottom: 14px; } .legal-doc .h3{ margin-top: 26px; } .legal-doc a{ color: var(--gold2); font-weight: 800; } .mobile-menu-secondary{ color: rgba(255,255,255,.7) !important; font-size: .88rem; min-height: 40px !important; margin-top: 2px; } .mobile-menu-secondary[aria-current="page"]{ color: #fff !important; background: rgba(201,150,62,.16) !important; } @media (max-width: 980px){ .legal-shell{ grid-template-columns: 1fr; } .legal-summary{ position: relative; top: auto; } } @media (max-width: 760px){ .page-home .hero{ min-height: auto; padding: 24px 18px; border-radius: 28px; } .page-home .hero .h1{ max-width: 100%; font-size: clamp(2.15rem, 9.8vw, 2.9rem); } .hero-stage{ min-height: 300px; } .stage-card-main{ left: 16px; right: 16px; top: 42px; padding: 18px; } .stage-card-side{ display: none; } .stage-metrics{ left: 14px; right: 14px; bottom: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); } .hero-stage .tag{ display: none; } .service-strip{ padding: 20px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: rgba(255,255,255,.025); } .process-item, .faq-item{ grid-template-columns: 1fr; gap: 8px; } .case-panel, .case-study, .service-detail, .fit-panel, .legal-summary, .legal-doc{ border-radius: 24px; } body.has-mobile-dock{ padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .mobile-dock{ padding: 8px; border-radius: 18px; } .mobile-dock .btn{ min-height: 44px; padding: 10px 11px; font-size: .9rem; } } @media (max-width: 560px){ body.has-mobile-dock{ padding-bottom: calc(82px + env(safe-area-inset-bottom)); } .mobile-dock{ grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } .page-home .hero .h1{ max-width: 100%; font-size: clamp(2.05rem, 9.4vw, 2.65rem); } } .hero-stage .tag{ top: 18px; right: 18px; bottom: auto; left: auto; z-index: 2; } .stage-metrics{ z-index: 2; } .contact-sidecard{ display: flex; flex-direction: column; } .contact-sidecard .divider{ margin: 20px 0; } .contact-sidecard .inline-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0; } .contact-sidecard .inline-actions > .btn{ width: auto; min-width: 128px; min-height: 46px; flex: 0 0 auto; padding: 11px 16px; border-radius: 999px; } @media (max-width: 760px){ .contact-sidecard .inline-actions{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-sidecard .inline-actions > .btn{ width: 100%; min-width: 0; } } .about-last { margin-bottom: 20px; } .proof-spotlight{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(20px, 4vw, 42px); align-items: center; } .proof-visual, .work-feature-media{ position: relative; min-height: 420px; border-radius: 28px; overflow: hidden; background: radial-gradient(440px 300px at 90% 8%, rgba(205,168,93,.16), transparent 62%), rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 28px 70px rgba(0,0,0,.32); } .proof-desktop, .work-feature-desktop{ width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: top left; opacity: .92; } .proof-phone, .work-feature-mobile{ position: absolute; right: 22px; bottom: 22px; width: min(190px, 30%); max-height: 74%; object-fit: cover; object-position: top center; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; box-shadow: 0 24px 54px rgba(0,0,0,.44); } .proof-copy{ display: grid; gap: 14px; } .proof-copy .sub, .work-feature-copy .sub{ margin-top: 0; } .proof-facts{ display: grid; gap: 12px; margin: 6px 0 0; } .proof-facts div{ padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); } .proof-facts dt{ color: var(--gold2); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; } .proof-facts dd{ margin: 5px 0 0; color: var(--muted); } .case-thumb{ margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .case-thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: top left; } .case-live-link{ display: inline-flex; margin-top: 14px; } .work-feature{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(20px, 4vw, 40px); align-items: center; } .work-feature-copy{ display: grid; gap: 14px; } .proof-list{ display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); } .proof-list li{ position: relative; padding-left: 18px; } .proof-list li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); } @media (max-width: 980px){ .proof-spotlight, .work-feature{ grid-template-columns: 1fr; } .proof-visual, .work-feature-media{ min-height: 340px; } } @media (max-width: 760px){ .proof-visual, .work-feature-media{ min-height: 280px; border-radius: 24px; } .proof-phone, .work-feature-mobile{ right: 12px; bottom: 12px; width: min(116px, 34%); border-radius: 18px; } .case-thumb{ border-radius: 16px; } } /* ========================================================================= PREMIUM UPGRADE LAYER Fraunces + Plus Jakarta Sans · floating glass island nav · NK monogram · machined cards · magnetic button-in-button CTAs · film-grain · cinematic reveals. Appended last so it deliberately overrides the base cascade. ========================================================================= */ /* ---- Display typography tuned for Fraunces ---- */ .h1{ font-size: clamp(2.4rem, 3.4vw, 3.35rem); line-height:1.02; letter-spacing:-.035em; } .h2{ letter-spacing:-.03em; } .h3{ letter-spacing:-.018em; font-weight:600; } .sub{ text-wrap: pretty; } /* Editorial eyebrow — hairline tick instead of plain label */ .kicker{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; } .kicker::before{ content:""; width:18px; height:1px; background: linear-gradient(90deg, var(--gold), transparent); } /* numeric / doc kickers stay clean */ .process-item .kicker, .faq-item .kicker, .step .n{ } .process-item .kicker::before, .faq-item .kicker::before{ display:none; } /* ---- Fixed film-grain + tactile field (decorative, non-interactive) ---- */ body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode: overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } /* ---- Container rhythm + macro whitespace ---- */ .container{ padding-inline: clamp(18px, 3.5vw, 30px); } .section{ padding: clamp(58px, 9vw, 116px) 0; } .page{ padding: clamp(26px, 4vw, 52px) 0 clamp(56px, 8vw, 92px); } .divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 48%, rgba(205,168,93,.16) 52%, transparent); margin: clamp(26px, 4.5vw, 46px) 0; } /* ---- Floating glass island navigation ---- */ .nav{ position: sticky; top: 0; z-index: 95; background: transparent; border-bottom: 0; backdrop-filter: none; padding-top: clamp(10px, 1.6vw, 18px); } .nav .nav-inner{ padding: 9px 9px 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bg2) 76%, transparent); border: 1px solid rgba(255,255,255,.09); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); } /* Brand mark → NK monogram tile (matches favicon) */ .brand{ gap: 11px; } .brand .mark{ flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(155deg, #16181d, #0a0b0d); border: 1px solid rgba(205,168,93,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px -10px rgba(0,0,0,.7); display: grid; place-items: center; position: relative; overflow: hidden; } .brand .mark::after{ content:"NK"; font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: .01em; color: var(--text); line-height: 1; } .brand .mark::before{ content:""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(205,168,93,.20); } .brand .name{ font-family: var(--font-sans); font-weight: 600; font-size: .98rem; letter-spacing: -.012em; white-space: nowrap; } .brand .role{ font-family: var(--font-sans); color: var(--gold2); opacity: .82; font-size: .74rem; letter-spacing: .035em; white-space: nowrap; } /* ---- Magnetic buttons + button-in-button arrow chip ---- */ .btn{ font-family: var(--font-sans); font-weight: 600; letter-spacing: -.01em; padding: 12px 18px; transition: transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease); } .btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); } .btn:active{ transform: translateY(0) scale(.975); transition-duration: .12s; } .btn.primary{ background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: rgba(205,168,93,.5); color: #16120a; padding-right: 9px; box-shadow: 0 12px 30px -12px rgba(205,168,93,.5), inset 0 1px 0 rgba(255,255,255,.38); } .btn.primary:hover{ transform: translateY(-2px); filter: brightness(1.04); background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: rgba(205,168,93,.6); box-shadow: 0 18px 42px -14px rgba(205,168,93,.62), inset 0 1px 0 rgba(255,255,255,.45); } .btn.primary:not(.disabled)::after{ content:"\2192"; display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; margin-left: 1px; border-radius: 999px; background: rgba(22,18,10,.16); color: #16120a; font-size: .95em; line-height: 1; transition: transform .5s var(--ease), background .4s var(--ease); } .btn.primary:not(.disabled):hover::after{ transform: translate(3px, -1px); background: rgba(22,18,10,.30); } .btn[disabled]{ opacity: .5; } .btn[disabled]::after{ display:none; } /* ---- Machined card material ---- */ .card, .case-panel, .case-study, .service-detail, .fit-panel, .legal-summary, .legal-doc, .work-feature-media, .proof-visual, .home-showcase-frame, .hero-stage, .book-card{ box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); } .case-panel{ transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); } .case-panel:hover{ transform: translateY(-3px); border-color: rgba(205,168,93,.26); box-shadow: var(--shadow), var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.07); } .home-work-tile{ transition: transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease), box-shadow .55s var(--ease); } .home-work-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow), var(--shadow-gold); } /* Pills + stack chips */ .pill, .stack .pill{ font-family: var(--font-sans); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* ---- Cinematic scroll reveals ---- */ html.js .reveal{ opacity:0; transform: translateY(22px); filter: blur(6px); } html.js .reveal.in{ opacity:1; transform:none; filter: blur(0); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } /* ---- Premium focus ring ---- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid rgba(205,168,93,.6); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1; transform:none; filter:none; } .btn, .btn.primary::after, .case-panel, .home-work-tile{ transition:none !important; } } /* ---- Mobile polish for the upgrade layer ---- */ @media (max-width: 560px){ .nav .nav-inner{ padding: 8px 8px 8px 12px; } .brand .mark{ width: 30px; height: 30px; border-radius: 9px; } .brand .mark::after{ font-size: .86rem; } .btn{ padding: 12px 16px; } } /* ---- Reusable identity lockup (home hero + about) ---- */ .hero-identity{ display:flex; align-items:center; gap:13px; margin-bottom:22px; } .hero-identity-mark{ flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; position:relative; overflow:hidden; background: linear-gradient(155deg, #17191e, #0a0b0d); border:1px solid rgba(205,168,93,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -14px rgba(0,0,0,.8); } .hero-identity-mark::after{ content:"NK"; font-family: var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:.01em; color: var(--text); line-height:1; } .hero-identity-mark::before{ content:""; position:absolute; top:7px; right:7px; width:5px; height:5px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 3px rgba(205,168,93,.18); } .hero-identity-text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .hero-identity-text strong{ font-family: var(--font-display); font-weight:600; font-size: clamp(1.18rem, 2vw, 1.42rem); letter-spacing:-.015em; line-height:1.05; color: var(--text); } .hero-identity-text span{ font-size:.8rem; letter-spacing:.02em; color: rgba(230,201,122,.9); } /* ---- Concrete trust strip (homepage) — keep tidy at all widths ---- */ .home-trust-item b{ letter-spacing:-.01em; } /* ---- New project cards: system preview ---- */ .system-preview-svg{ width:100%; height:100%; display:block; } .system-preview-svg text{ font-family: var(--font-sans); }