/* ========================================================================== proCarto — coming soon Implementation of ComingSoon.dc.html (Claude Design: "Procarto rebrand v3a"). Design tokens follow the Propero design system: Public Sans is the only face. ========================================================================== */ :root { --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* brand */ --brand: #fc5200; --brand-hover: #d64600; --brand-light: #ff7542; /* dark surface (hero + footer) */ --dark: #121417; --on-dark: #fff; --on-dark-secondary: #c7cbd3; --on-dark-muted: #8a93a3; --on-dark-faint: #7d8590; /* light surface (features) */ --ink: #16181c; --ink-secondary: #5f6b7a; --hairline: rgb(255 255 255 / .12); --field: rgb(255 255 255 / .08); --field-border: rgb(255 255 255 / .18); --radius-sm: 8px; --radius-md: 10px; --gutter: 48px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font-sans); background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } :where(a, button, input):focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 820px; display: flex; flex-direction: column; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-image: url(../img/map-bg.svg); background-size: cover; background-position: center; background-color: var(--dark); } /* heroStyle: "solid" — set data-hero="solid" on (or CONFIG.heroStyle in app.js) */ body[data-hero="solid"] .hero__bg { background-image: none; background-color: var(--dark); } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 20 23 / .35), rgb(18 20 23 / .55) 60%, var(--dark) 100%); } .hero__stack { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; } /* header ------------------------------------------------------------------ */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--gutter); } .lang { display: flex; align-items: center; gap: 10px; } /* Linki, nie przyciski — język wybiera serwer, patrz app/lang.php */ .lang__btn { display: block; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; border-radius: 3px; opacity: .5; text-decoration: none; box-shadow: 0 0 0 2px transparent; transition: opacity .15s ease, box-shadow .15s ease; } .lang__btn svg { display: block; border-radius: 2px; } .lang__btn:hover { opacity: 1; } .lang__btn[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--brand); } .contact { color: var(--on-dark-secondary); font-size: 14px; text-decoration: none; transition: color .15s ease; } .contact:hover { color: var(--on-dark); } /* hero body --------------------------------------------------------------- */ .hero__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 72px; gap: 26px; } .brand { display: flex; align-items: center; gap: 9px; } .brand__pin { display: block; } .brand__word { font-size: 32px; line-height: 1; letter-spacing: -0.03em; } .brand__pro { font-weight: 800; color: var(--on-dark); } .brand__carto { font-weight: 400; color: var(--brand); } .hero__title { margin: 0; max-width: 820px; font-size: 42px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--on-dark); text-wrap: pretty; } .hero__subtitle { margin: 0; max-width: 660px; font-size: 16.5px; line-height: 1.65; color: var(--on-dark-secondary); text-wrap: pretty; } /* countdown --------------------------------------------------------------- */ .countdown { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; } .countdown[hidden] { display: none; } .countdown__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-light); } .countdown__grid { display: flex; gap: 14px; } .countdown__cell { width: 78px; background: rgb(255 255 255 / .06); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 0; } .countdown__num { font-size: 28px; font-weight: 700; color: var(--on-dark); font-variant-numeric: tabular-nums; } .countdown__unit { font-size: 11px; color: var(--on-dark-muted); margin-top: 2px; } /* signup ------------------------------------------------------------------ */ .signup { display: flex; gap: 10px; margin-top: 4px; } .signup[hidden] { display: none; } /* honeypot — poza ekranem, ale w drzewie dostępności ukryty przez aria-hidden */ .signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .signup__input { width: 270px; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field); color: var(--on-dark); font: inherit; font-size: 14.5px; outline: none; } .signup__input::placeholder { color: var(--on-dark-muted); } .signup__input:focus-visible { border-color: var(--brand); } .signup__btn { padding: 13px 22px; border: none; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgb(252 82 0 / .35); transition: background .15s ease; } .signup__btn:hover { background: var(--brand-hover); } .signup__btn[disabled] { opacity: .65; cursor: progress; } .signup-done { display: flex; align-items: center; gap: 10px; background: rgb(252 82 0 / .12); border: 1px solid rgb(252 82 0 / .35); border-radius: var(--radius-sm); padding: 14px 22px; color: var(--on-dark); font-size: 14.5px; text-align: left; } .signup-done[hidden] { display: none; } .signup-error { margin: -14px 0 0; font-size: 13px; color: #ff8c6b; } .signup-error[hidden] { display: none; } .hero__note { margin: 0; font-size: 12.5px; color: var(--on-dark-faint); } /* -------------------------------------------------------------------------- Features -------------------------------------------------------------------------- */ .features { max-width: 1080px; margin: 0 auto; padding: 88px 24px; } .features__title { margin: 0 0 52px; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; text-align: center; text-wrap: balance; } .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; } .feature__icon { display: block; } .feature__title { margin: 12px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); } .feature__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-secondary); text-wrap: pretty; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--dark); padding: 24px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-footer__copy { font-size: 13px; color: var(--on-dark-faint); } .site-footer .contact { font-size: 13px; color: var(--on-dark-faint); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1000px) { :root { --gutter: 32px; } .features__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; } } @media (max-width: 760px) { :root { --gutter: 20px; } .hero { min-height: 100svh; } .hero__body { padding: 32px 20px 56px; gap: 22px; } .brand__word { font-size: 27px; } .brand__pin { width: 29px; height: 29px; } .hero__title { font-size: clamp(26px, 6.4vw, 34px); } .hero__subtitle { font-size: 15.5px; } .countdown__grid { gap: 10px; } .countdown__cell { width: 68px; padding: 10px 0; } .countdown__num { font-size: 24px; } .signup { flex-direction: column; width: 100%; max-width: 340px; } .signup__input { width: 100%; } .signup__btn { width: 100%; } .features { padding: 64px 20px; } .features__title { margin-bottom: 40px; font-size: 24px; } .features__grid { grid-template-columns: 1fr; gap: 32px; } .site-footer { flex-direction: column; gap: 8px; text-align: center; } } @media (max-width: 380px) { .countdown__grid { gap: 8px; } .countdown__cell { width: 60px; } .countdown__num { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }