:root{ --charcoal:#626367; --charcoal-dark:#3f4043; --gray:#9a9a9b; --gold:#e2b552; --gold-deep:#dfaf48; --gold-light:#f9e199; --bg:#ffffff; --bg-soft:#fafafa; --font:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} /* Background lives on , not : a body background propagates to the canvas but is still sized to the root box. With html{height:100%} that box is exactly one viewport tall, so on any taller page the gradient tiled and left a hard #FAFAFA -> #FFFFFF seam at the fold. min-height + no-repeat spans the whole document instead. */ html{ /* Everything is sized in rem, so this one value scales the whole UI. 125% reproduces the browser-zoom level the design was signed off at. % rather than px so a user's own font-size preference still applies. */ font-size:125%; min-height:100%; background-color:var(--bg); background-image: radial-gradient(ellipse 60% 45% at 50% 40%, rgba(249,225,153,.20) 0%, rgba(249,225,153,0) 100%), linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); background-repeat:no-repeat; background-size:100% 100%; } body{ font-family:var(--font); color:var(--charcoal); /* not 100%: that resolves against , whose height is auto, so the body never filled the window and the footer floated mid-page. */ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; } /* ---------- floating navbar card ---------- */ .nav-wrap{padding:1.25rem 1.25rem 0} .nav{ max-width:72rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1.6rem; background:rgba(255,255,255,.9); border:1px solid rgba(98,99,103,.10); border-radius:999px; box-shadow:0 6px 28px rgba(98,99,103,.08); backdrop-filter:blur(10px); animation:rise .7s ease-out both; } .brand{ display:flex; align-items:center; text-decoration:none; } .brand:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;border-radius:999px} .nav-mark{height:2.1rem;width:auto;display:block} /* language switcher */ .lang{display:flex;gap:.15rem} .lang a{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--gray); text-decoration:none; border-radius:999px; padding:.45rem .85rem; transition:color .2s ease, background-color .2s ease; } .lang a:hover{color:var(--charcoal)} .lang a[aria-current="page"]{ color:var(--charcoal-dark); background:var(--gold-light); } .lang a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px} /* ---------- hero ---------- */ main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 1.5rem 3.5rem; } .lockup{ display:flex; flex-direction:column; align-items:center; margin-bottom:3rem; } .hero-mark{ width:min(10.5rem,40vw); height:auto; animation:rise .8s ease-out both; } .hero-wordmark{ margin-top:1.15rem; width:min(15rem,56vw); max-height:5.5rem; height:auto; object-fit:contain; animation:rise .8s .08s ease-out both; } .hero-divider{ margin-top:.7rem; width:min(15rem,56vw); height:auto; animation:rise .8s .16s ease-out both; } .motto{ margin-top:.75rem; font-size:.92rem; font-weight:700; line-height:1.45; color:var(--charcoal); animation:rise .8s .22s ease-out both; } h1{ font-size:clamp(1.9rem,5.2vw,3.1rem); font-weight:700; line-height:1.15; letter-spacing:-.015em; color:var(--charcoal-dark); max-width:34ch; animation:rise .8s .26s ease-out both; } .sub{ margin-top:1.1rem; font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6; color:var(--gray); max-width:60ch; animation:rise .8s .34s ease-out both; } /* ---------- contact card (mirrors the business card) ---------- */ .contact{ margin-top:2.4rem; max-width:100%; display:flex; flex-direction:column; gap:1.1rem; padding:1.35rem 1.7rem; font-style:normal; text-align:left; background:rgba(255,255,255,.9); border:1px solid rgba(98,99,103,.10); border-radius:1.35rem; box-shadow:0 6px 28px rgba(98,99,103,.08); backdrop-filter:blur(10px); animation:rise .8s .42s ease-out both; } .contact-group{ display:flex; align-items:flex-start; gap:.85rem; } .contact-group--email{align-items:center} .contact-icon{ flex:none; width:1.05rem; height:1.05rem; margin-top:.2rem; color:var(--gold-deep); } .contact-group--email .contact-icon{margin-top:0} .contact-rows{ display:grid; grid-template-columns:max-content max-content; column-gap:1.1rem; row-gap:.35rem; align-items:baseline; } .contact-tel, .contact-email{ font-size:.92rem; font-weight:600; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--charcoal); text-decoration:none; transition:color .2s ease; } .contact-tel:hover, .contact-email:hover{color:var(--gold-deep)} .contact-tel:focus-visible, .contact-email:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px} .contact-label{ font-size:.92rem; line-height:1.35; color:rgba(98,99,103,.4); } .domain{ display:inline-block; margin-top:2.25rem; font-size:.8rem; font-weight:600; letter-spacing:.14em; color:var(--gold-deep); text-decoration:none; transition:color .2s ease; animation:rise .8s .5s ease-out both; } .domain:hover{color:var(--charcoal)} .domain:focus-visible{outline:2px solid var(--gold-deep);outline-offset:5px;border-radius:4px} footer{ padding:0 1.5rem 1.75rem; text-align:center; font-size:.75rem; letter-spacing:.04em; color:var(--gray); } @keyframes rise{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} } @media (max-width:560px){ /* Back to 100% here: at 125% the language pills overflowed the nav card on phones (+21px at 360, +61px at 320). Measured 100% as the largest value that still fits down to 320px. */ html{font-size:100%} .nav-wrap{padding:.85rem .85rem 0} .nav{padding:.55rem .7rem .55rem 1rem;gap:.5rem} .nav-mark{height:1.75rem} .lang a{padding:.4rem .55rem;font-size:.76rem} main{padding:2rem 1.25rem 2.5rem} .lockup{margin-bottom:2.25rem} .hero-wordmark{margin-top:.9rem} .motto{font-size:.85rem} .contact{margin-top:2rem;padding:1.15rem 1.25rem;gap:.95rem;border-radius:1.15rem} .contact-group{gap:.7rem} /* the "Komórka" / "Büro Deutschland" labels don't fit next to the numbers on phones — drop them rather than wrap or overflow the card */ .contact-label{display:none} .contact-rows{grid-template-columns:max-content;row-gap:.4rem} .contact-tel,.contact-email{font-size:.85rem} /* phone numbers stay unbroken; the email may break if there is no room */ .contact-email{white-space:normal;overflow-wrap:anywhere} } @media (max-width:340px){ .contact{padding:1rem 1.1rem;gap:.85rem} .contact-group{gap:.6rem} .contact-tel,.contact-email{font-size:.82rem} }