/* ========================================================================== Widari — arkusz stron DEMONSTRACYJNYCH Jeden szkielet, trzy różne skóry. Każda podstrona demo nadpisuje tokeny --d-* w swoim , żeby pokazać, że to nie jeden szablon w trzech kolorach. Ten plik NIE jest używany przez stronę Widari — tylko przez demo/*.html. ========================================================================== */ :root { /* Wartości domyślne — każde demo nadpisuje je u siebie */ --d-bg: #FFFFFF; --d-bg-2: #F5F5F5; --d-ink: #111111; --d-ink-2: #5A5A5A; --d-line: #E5E5E5; --d-accent: #B93D0A; --d-on-accent: #FFFFFF; --d-display: Georgia, serif; --d-body: system-ui, sans-serif; --d-radius: 4px; --d-hero-h: 1; --d-ease: cubic-bezier(0.22, 1, 0.36, 1); --d-dur: 220ms; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; } body { font-family: var(--d-body); font-size: 1.0625rem; line-height: 1.7; color: var(--d-ink); background: var(--d-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } h1, h2, h3 { font-family: var(--d-display); line-height: 1.08; text-wrap: balance; font-weight: 700; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 3px; } ::selection { background: var(--d-accent); color: var(--d-on-accent); } /* Paski przewijania — color-mix z --d-ink sprawia, że kciuk sam się dostosowuje: ciemny na jasnych skórach, jasny na ciemnej skórze restauracji. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--d-ink) 28%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--d-ink) 28%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--d-ink) 50%, transparent); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* -------------------------------------------------------------------------- PASEK DEMO — zawsze na górze, żeby nikt nie pomylił tego z prawdziwą firmą -------------------------------------------------------------------------- */ .demobar { position: relative; z-index: 60; background: #14110F; color: #FAF8F5; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.8125rem; line-height: 1.5; } .demobar__inner { max-width: 1200px; margin-inline: auto; padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; } .demobar__tag { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .demobar__dot { width: 7px; height: 7px; border-radius: 50%; background: #B93D0A; box-shadow: 0 0 0 3px rgba(185, 61, 10, .25); flex-shrink: 0; } .demobar__note { color: #A79E96; } .demobar__back { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; color: #F0A882; white-space: nowrap; } .demobar__back:hover { color: #FAF8F5; } .demobar__back svg { width: 15px; height: 15px; transition: transform var(--d-dur) var(--d-ease); } .demobar__back:hover svg { transform: translateX(-3px); } /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .wrap--narrow { max-width: 800px; } .sec { padding-block: clamp(4rem, 8vw, 7.5rem); } .sec--alt { background: var(--d-bg-2); } .sec--ink { background: var(--d-ink); color: var(--d-bg); } .sec--ink h2, .sec--ink h3 { color: var(--d-bg); } .skip { position: absolute; top: -100px; left: 1rem; z-index: 100; background: var(--d-ink); color: var(--d-bg); padding: .75rem 1.5rem; border-radius: var(--d-radius); } .skip:focus { top: 1rem; } /* -------------------------------------------------------------------------- NAWIGACJA -------------------------------------------------------------------------- */ .dnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--d-bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--d-dur) var(--d-ease); } .dnav.is-stuck { border-bottom-color: var(--d-line); } .dnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 74px; } .dlogo { font-family: var(--d-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; flex-shrink: 0; } .dlogo small { display: block; font-family: var(--d-body); font-size: .625rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--d-ink-2); margin-top: 2px; } .dnav__links { display: none; align-items: center; gap: .25rem; } .dnav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: .9rem; font-size: .9375rem; color: var(--d-ink-2); transition: color var(--d-dur) var(--d-ease); } .dnav__links a::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: 12px; height: 1.5px; background: var(--d-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--d-dur) var(--d-ease); } .dnav__links a:hover { color: var(--d-ink); } .dnav__links a:hover::after { transform: scaleX(1); } .dnav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; } .dnav__toggle svg { width: 24px; height: 24px; } .dnav__mobile { position: fixed; inset: 0 0 0 0; z-index: 55; background: var(--d-bg); padding: 6rem clamp(1.25rem, 4vw, 2.5rem) 3rem; display: flex; flex-direction: column; gap: .25rem; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--d-ease), transform 260ms var(--d-ease), visibility 260ms; } .dnav__mobile.is-open { visibility: visible; opacity: 1; transform: translateY(0); } .dnav__mobile a:not(.dbtn) { font-family: var(--d-display); font-size: 1.75rem; font-weight: 700; padding-block: .6rem; border-bottom: 1px solid var(--d-line); } .dnav__mobile .dbtn { margin-top: 2rem; } .dnav__close { position: absolute; top: 1.25rem; right: clamp(1rem, 4vw, 2rem); width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; } .dnav__close svg { width: 24px; height: 24px; } @media (min-width: 900px) { .dnav__links { display: flex; } .dnav__toggle, .dnav__mobile { display: none; } } /* -------------------------------------------------------------------------- PRZYCISKI -------------------------------------------------------------------------- */ .dbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .8rem 1.7rem; background: var(--d-accent); color: var(--d-on-accent); border: 1.5px solid transparent; border-radius: var(--d-radius); font-family: var(--d-body); font-weight: 600; font-size: .9375rem; letter-spacing: .01em; transition: transform var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), background-color var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease); } /* Bez podnoszenia — patrz style.css */ .dbtn:hover { box-shadow: 0 10px 24px -8px rgba(0,0,0,.3); } .dbtn:active { box-shadow: none; transition-duration: 90ms; } .dbtn svg { width: 17px; height: 17px; transition: transform var(--d-dur) var(--d-ease); } .dbtn:hover svg { transform: translateX(3px); } .dbtn--ghost { background: transparent; color: var(--d-ink); border-color: var(--d-line); } .dbtn--ghost:hover { border-color: var(--d-ink); } .dbtn--light { background: var(--d-bg); color: var(--d-ink); } .dbtn--lg { min-height: 58px; padding: 1rem 2.1rem; font-size: 1.0625rem; } .dbtn--block { width: 100%; } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ /* Górny odstęp mały — pasek demo i nawigacja dają już wystarczająco oddechu */ .dhero { position: relative; padding-block: clamp(1.75rem, 3vw, 3rem) clamp(3rem, 6vw, 5.5rem); overflow: hidden; } .dhero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } @media (min-width: 940px) { .dhero__grid { grid-template-columns: 1.05fr .95fr; } } .dhero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--d-body); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--d-accent); margin-bottom: 1.5rem; } .dhero__eyebrow::before { content: ''; width: 26px; height: 1.5px; background: currentColor; } .dhero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: var(--d-hero-h); margin-bottom: 1.75rem; } .dhero p.dlead { font-size: 1.1875rem; color: var(--d-ink-2); max-width: 46ch; } .dhero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; } .dhero__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--d-line); } .dhero__meta div strong { display: block; font-family: var(--d-display); font-size: 1.25rem; } .dhero__meta div span { font-size: .8125rem; color: var(--d-ink-2); } /* -------------------------------------------------------------------------- MIEJSCE NA ZDJĘCIE — czysty CSS: 0 KB, 0 żądań, 0 licencji. Podpis mówi klientowi wprost, co się tu znajdzie. -------------------------------------------------------------------------- */ .photo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; aspect-ratio: 4 / 3; border-radius: var(--d-radius); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--d-accent) 16%, transparent) 0%, color-mix(in srgb, var(--d-accent) 5%, transparent) 45%, color-mix(in srgb, var(--d-ink) 7%, transparent) 100%), var(--d-bg-2); border: 1px solid var(--d-line); color: var(--d-ink-2); text-align: center; padding: 1rem; } /* delikatna siatka — żeby placeholder nie był płaską plamą */ .photo::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--d-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--d-ink) 5%, transparent) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%); pointer-events: none; } .photo svg { width: 26px; height: 26px; opacity: .5; position: relative; } .photo span { position: relative; font-family: var(--d-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; } .photo--tall { aspect-ratio: 3 / 4; } .photo--wide { aspect-ratio: 16 / 9; } .photo--square { aspect-ratio: 1; } .photo--round { border-radius: 50%; aspect-ratio: 1; } /* -------------------------------------------------------------------------- NAGŁÓWKI SEKCJI + SIATKI -------------------------------------------------------------------------- */ .dhead { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .dhead--center { margin-inline: auto; text-align: center; } .dhead h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.25rem; } .dhead p { color: var(--d-ink-2); font-size: 1.0625rem; } .sec--ink .dhead p { color: color-mix(in srgb, var(--d-bg) 65%, transparent); } .dgrid { display: grid; gap: 1.5rem; } .dgrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .dgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .dgrid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } /* -------------------------------------------------------------------------- POZYCJA CENNIKA / MENU -------------------------------------------------------------------------- */ .item { display: flex; gap: 1.25rem; align-items: baseline; padding-block: 1.15rem; border-bottom: 1px solid var(--d-line); } /* min-width:0 jest konieczne: bez niego element flex nie skurczy się poniżej swojej treści i wypycha niełamliwą cenę poza ekran na wąskich telefonach. */ .item__body { flex: 1; min-width: 0; } /* display:block jest tu konieczne: to -y wewnątrz .item__body, które NIE jest kontenerem flex — bez tego nazwa i opis sklejają się w jeden ciąg tekstu inline. */ .item__name { display: block; font-family: var(--d-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; } .item__desc { display: block; font-size: .9375rem; line-height: 1.5; color: var(--d-ink-2); margin-top: .15rem; } .item__dots { flex: 1; border-bottom: 1px dotted var(--d-line); min-width: 1.5rem; transform: translateY(-4px); } .item__price { font-family: var(--d-display); font-size: 1.1875rem; font-weight: 700; color: var(--d-accent); white-space: nowrap; } .item__time { display: block; font-family: var(--d-body); font-size: .75rem; font-weight: 500; color: var(--d-ink-2); text-align: right; } /* -------------------------------------------------------------------------- KARTY -------------------------------------------------------------------------- */ .dcard { background: var(--d-bg); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: clamp(1.5rem, 2.5vw, 2rem); transition: transform var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease); } .dcard--hover:hover { border-color: var(--d-ink); box-shadow: 0 16px 40px -16px rgba(0,0,0,.22); } .dcard__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1.25rem; border-radius: var(--d-radius); background: color-mix(in srgb, var(--d-accent) 12%, transparent); color: var(--d-accent); } .dcard__ico svg { width: 22px; height: 22px; } .dcard h3 { font-size: 1.25rem; margin-bottom: .6rem; } .dcard p { font-size: .9375rem; color: var(--d-ink-2); } .sec--ink .dcard { background: transparent; border-color: color-mix(in srgb, var(--d-bg) 18%, transparent); } .sec--ink .dcard p { color: color-mix(in srgb, var(--d-bg) 62%, transparent); } /* -------------------------------------------------------------------------- GODZINY OTWARCIA -------------------------------------------------------------------------- */ .hours { display: flex; flex-direction: column; } .hours li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); font-size: .9375rem; } .hours li:last-child { border-bottom: none; } .hours li span:last-child { font-weight: 600; white-space: nowrap; } .hours li.is-closed { opacity: .55; } /* -------------------------------------------------------------------------- STOPKA DEMO -------------------------------------------------------------------------- */ .dfoot { background: var(--d-ink); color: color-mix(in srgb, var(--d-bg) 62%, transparent); padding-block: 4rem 2rem; } .dfoot__grid { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid color-mix(in srgb, var(--d-bg) 15%, transparent); } @media (min-width: 780px) { .dfoot__grid { grid-template-columns: 1.6fr 1fr 1fr; } } .dfoot .dlogo { color: var(--d-bg); margin-bottom: 1rem; } .dfoot .dlogo small { color: color-mix(in srgb, var(--d-bg) 50%, transparent); } .dfoot h4 { font-family: var(--d-body); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--d-bg) 55%, transparent); margin-bottom: .9rem; } .dfoot a, .dfoot span.line { display: block; font-size: .9375rem; padding-block: .35rem; } .dfoot a:hover { color: var(--d-bg); } .dfoot__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 2rem; font-size: .75rem; } .dfoot__bottom a { display: inline; color: color-mix(in srgb, var(--d-bg) 80%, transparent); text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- ANIMACJE — stan startowy tylko przy działającym JS (patrz bezpiecznik w ) -------------------------------------------------------------------------- */ .js [data-r] > * { opacity: 0; transform: translateY(24px); } .js [data-r-self] { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-r] > *, .js [data-r-self] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }