/* Theme Name: Gorna Design Theme URI: https://gorna.design Description: Cyfrowa galeria sztuki dla Agaty Górnej — immersyjny, ciemny motyw FSE z color-blockingiem na palecie obrazów artystki. GSAP + Lenis, typografia Fraunces / Hanken Grotesk. Author: Claude Code / Piotr Górny Version: 0.2.1 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.4 License: GPL-2.0-or-later Text Domain: gorna-design Tags: art, gallery, shop, full-site-editing, block-theme, dark */ /* ===================================================================== 0. TOKENS & FUNDAMENT ===================================================================== */ :root { --gd-void: #0E0C1D; --gd-bg: #16132A; --gd-ink: #1E1B33; --gd-surface: #241F3B; --gd-cobalt: #2C3E9E; --gd-cobalt-bright: #6B7FE8; --gd-violet: #7E4FB0; --gd-magenta: #C0468A; --gd-magenta-bright: #E36AAE; --gd-teal: #2E7D6B; --gd-teal-deep: #173B33; --gd-orange: #E07B39; --gd-ochre: #C99A3B; --gd-ochre-bright: #E0B458; --gd-wine: #7B2D4E; --gd-wine-deep: #2E1426; --gd-cream: #F4EFE6; --gd-muted: #C9C2D6; --gd-line: rgba(244, 239, 230, 0.09); --gd-line-strong: rgba(244, 239, 230, 0.18); --gd-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --gd-font-body: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --gd-ease: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gd-pad-x: clamp(1.25rem, 4vw, 4rem); --gd-safe-top: 0px; --gd-safe-right: 0px; --gd-safe-bottom: 0px; --gd-safe-left: 0px; --gd-header-offset: calc(var(--gd-header-h) + var(--gd-safe-top)); } html { background-color: var(--gd-void); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* WC mini-cart (koszyk w headerze) renderuje boczną szufladę jako position:fixed, zawsze obecną w DOM (nawet zamkniętą, chowaną przez transform, nie display:none — potrzebne do animacji wjazdu). Overflow position:fixed NIE jest przycinany przez overflow-x:clip na (potomek fixed liczy się do przewijalnego obszaru najbliższego "initial containing block", czyli , nie ) — stąd realny, zmierzony ~150px poziomego overflow strony mimo body{overflow-x:clip} (zgłoszenie Piotra: ciemny pas po prawej na każdej podstronie Moje konto po przewinięciu). Ten sam clip trzeba więc powtórzyć tutaj. Zweryfikowane: dodanie tej jednej linii zeruje scrollWidth-clientWidth. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.gd-ios-scrollport .wp-site-blocks { scroll-behavior: auto; } .gd-hero__scroll::after { animation: none; transform: scaleY(1); opacity: 0.65; } .gd-blob, .gd-marquee__track { will-change: auto; } } body { background-color: var(--gd-bg); color: var(--gd-cream); font-family: var(--gd-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; transition: background-color 0.8s var(--gd-ease); } /* Ziarno — subtelna tekstura na całej stronie */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%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"); } ::selection { background: var(--gd-magenta); color: var(--gd-cream); } :focus-visible { outline: 2px solid var(--gd-magenta-bright); outline-offset: 3px; border-radius: 2px; } img { max-width: 100%; height: auto; } /* Scrollbar */ @media (pointer: fine) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--gd-void); } ::-webkit-scrollbar-thumb { background: var(--gd-surface); border-radius: 999px; border: 2px solid var(--gd-void); } ::-webkit-scrollbar-thumb:hover { background: var(--gd-violet); } } /* ===================================================================== 1. NAGŁÓWEK ===================================================================== */ .gd-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; box-sizing: border-box; min-height: var(--gd-header-offset); padding: calc(0.9rem + var(--gd-safe-top)) max(var(--gd-pad-x), var(--gd-safe-right)) 0.9rem max(var(--gd-pad-x), var(--gd-safe-left)); background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.45s var(--gd-ease), border-color 0.45s var(--gd-ease), backdrop-filter 0.45s var(--gd-ease); } .gd-header.is-scrolled { background: rgba(14, 12, 29, 0.72); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--gd-line); } /* Safari 26 wybiera kolor obszaru statusu z początkowego tła elementu fixed. Zmiana transparent → glass dopiero po scrollu nie jest ponownie próbkowana, dlatego na iPhonie nagłówek jest od pierwszej klatki jednolicie nieprzezroczysty. */ body.gd-ios-scrollport .gd-header, body.gd-ios-scrollport .gd-header.is-scrolled { background: var(--gd-void); -webkit-backdrop-filter: none; backdrop-filter: none; } /* iOS WebKit: dokument bazowy nie przewija się, więc Safari nie może skopiować ruchomej treści do systemowego obszaru nad nagłówkiem. Cała witryna przewija się wewnątrz przyciętego scrollportu; JS kieruje do niego ScrollTrigger. */ body.gd-ios-scrollport { --gd-safe-top: env(safe-area-inset-top, 0px); --gd-safe-right: env(safe-area-inset-right, 0px); --gd-safe-bottom: env(safe-area-inset-bottom, 0px); --gd-safe-left: env(safe-area-inset-left, 0px); } html:has(body.gd-ios-scrollport), body.gd-ios-scrollport { height: 100%; overflow: hidden; background-color: var(--gd-void); } body.gd-ios-scrollport .wp-site-blocks { box-sizing: border-box; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-padding-top: calc(var(--gd-header-offset) + 1.5rem); /* Pasek adresu/narzędzi Safari na iOS potrafi "wrócić" (rozwinąć się z powrotem) PO tym, jak przeglądarka już policzyła maksymalny scrollTop dla 100dvh z paskiem schowanym (największa możliwa wysokość) — więc ostatnie ~50-80px realnej treści zostają wizualnie zasłonięte, a użytkownik nie może doprzewijać dalej, bo scrollHeight-clientHeight jest już wyczerpane (zgłoszenie Piotra: przycisk "Zapłać" na Kasie niewidoczny i nieosiągalny scrollem, zawsze, Safari i Chrome iOS — Chrome iOS używa tego samego silnika WebKit, stąd identyczny objaw). Bufor na dole gwarantuje, że pod ostatnim realnym elementem zawsze jest dodatkowy zapas do przewinięcia, większy niż najgorszy przypadek wysokości paska narzędzi. */ padding-bottom: calc(6rem + var(--gd-safe-bottom, 0px)); background-color: var(--gd-bg); transition: background-color 0.8s var(--gd-ease); } .gd-header .wp-block-site-title { margin: 0; line-height: 1; } .gd-header .wp-block-site-title a { font-variation-settings: "opsz" 40; transition: opacity 0.3s var(--gd-ease); } .gd-header .wp-block-site-title a:hover { opacity: 0.75; color: var(--gd-cream); } /* Linki nawigacji — podkreślenie rosnące od lewej */ .gd-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-block: 0.35rem; } .gd-header .wp-block-navigation .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gd-ochre-bright); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s var(--gd-ease-out); } .gd-header .wp-block-navigation .wp-block-navigation-item__content:hover::after, .gd-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left center; } /* Overlay menu mobilnego */ .wp-block-navigation__responsive-container.has-modal-open { background-color: var(--gd-void) !important; } .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content { font-family: var(--gd-font-display); font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 350; text-transform: none; letter-spacing: -0.01em; color: var(--gd-cream); } /* Pełnoekranowy overlay menu: 100dvh zapobiega problemowi na Android Chrome, gdzie 100vh liczy wysokość z ukrytym paskiem adresu po scrollu, a menu staje się niższe niż rzeczywisty viewport. */ .wp-block-navigation__responsive-container.has-modal-open { height: 100dvh; } .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content { padding-top: var(--gd-header-offset); } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--gd-cream); } /* Mini-koszyk */ .gd-header .wc-block-mini-cart__button { color: var(--gd-cream); opacity: 0.85; } .gd-header .wc-block-mini-cart__button:hover { opacity: 1; } /* Wyrównanie pionowe elementów w prawej części headera */ .gd-header > .wp-block-group > .wp-block-group { align-items: center !important; } /* TRP anchor (niewidoczny element który zajmuje miejsce) — usuń własną wysokość */ .gd-header .trp-shortcode-switcher__wrapper .trp-shortcode-anchor { height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; visibility: hidden !important; } .wc-block-mini-cart__badge { background: var(--gd-magenta); color: var(--gd-cream); border: none; } /* Treść stron poniżej fixed-headera (hero na froncie sam sięga pod header) */ main.gd-main { padding-top: calc(var(--gd-header-offset) + 1.5rem); margin-block-start: 0 !important; } main.gd-main--flush { padding-top: 0; margin-block-start: 0 !important; } /* ===================================================================== 2. HERO (strona główna) ===================================================================== */ .gd-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; padding: calc(var(--gd-header-offset) + 2rem) max(var(--gd-pad-x), var(--gd-safe-right)) 5rem max(var(--gd-pad-x), var(--gd-safe-left)); background: var(--gd-void); isolation: isolate; } /* Aurora — plamy barw z obrazów, rozmyte jak światło galerii nocą */ .gd-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; z-index: -1; will-change: transform; pointer-events: none; } .gd-blob--cobalt { width: 55vw; height: 55vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle at 30% 30%, var(--gd-cobalt), transparent 65%); top: -12%; right: -8%; } .gd-blob--magenta { width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 60% 40%, var(--gd-magenta), transparent 65%); bottom: -10%; left: -10%; opacity: 0.42; } .gd-blob--orange { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; background: radial-gradient(circle at 50% 50%, var(--gd-orange), transparent 60%); top: 38%; left: 32%; opacity: 0.26; } .gd-hero__eyebrow { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gd-muted); margin: 0 0 clamp(1rem, 3vh, 2rem); } .gd-hero__eyebrow::before { content: ""; width: 3rem; height: 1px; background: var(--gd-ochre-bright); } .gd-hero__title { font-family: var(--gd-font-display); font-size: clamp(3.4rem, 14.5vw, 12.5rem); font-weight: 320; font-variation-settings: "opsz" 144; line-height: 0.93; letter-spacing: -0.03em; margin: 0; color: var(--gd-cream); } /* Gradient nakładany na em ORAZ na pojedyncze litery (.gd-char po splicie JS) — background-clip:text nie działa przez granicę inline-block w Chrome */ .gd-hero__title em, .gd-hero__title em .gd-char { font-style: italic; font-weight: 380; background: linear-gradient(110deg, var(--gd-ochre-bright) 5%, var(--gd-orange) 38%, var(--gd-magenta-bright) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Litery hero — owijane przez JS */ .gd-hero__title .gd-char { display: inline-block; } .gd-hero__sub { max-width: 34rem; margin: clamp(1.5rem, 4vh, 2.75rem) 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--gd-muted); } .gd-hero__sub em { display: block; margin-top: 0.4rem; font-family: var(--gd-font-display); font-style: italic; color: rgba(201, 194, 214, 0.7); } .gd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: clamp(2rem, 5vh, 3.5rem); } /* Sygnał scrolla — fixed, zawsze widoczny nad foldem */ .gd-hero__scroll { position: fixed; bottom: 2.25rem; right: var(--gd-pad-x); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gd-muted); writing-mode: vertical-rl; transition: opacity 0.5s ease; } .gd-hero__scroll.is-hidden { opacity: 0; pointer-events: none; } .gd-hero__scroll::after { content: ""; width: 1px; height: 4rem; background: linear-gradient(to bottom, var(--gd-ochre-bright), transparent); animation: gd-scroll-pulse 2.2s var(--gd-ease) infinite; } @keyframes gd-scroll-pulse { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ===================================================================== 3. PRZYCISKI I LINKI ===================================================================== */ .wp-element-button, .wp-block-button__link, .wc-block-components-button, .single_add_to_cart_button, button[name="add-to-cart"] { position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.35s var(--gd-ease), color 0.35s var(--gd-ease), transform 0.35s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease); } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(192, 70, 138, 0.55); } /* Przycisk konturowy */ .gd-btn-ghost .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--gd-cream); border: 1px solid var(--gd-line-strong); } .gd-btn-ghost .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--gd-cream); color: var(--gd-void); border-color: var(--gd-cream); box-shadow: 0 12px 32px -8px rgba(244, 239, 230, 0.25); } /* Link strzałkowy */ .gd-arrow-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 550; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-cream); } .gd-arrow-link::after { content: "→"; font-family: var(--gd-font-body); transition: transform 0.35s var(--gd-ease-out); } .gd-arrow-link:hover::after { transform: translateX(0.4rem); } /* ===================================================================== 4. MARQUEE ===================================================================== */ .gd-marquee { overflow: clip; border-top: var(--gd-border-subtle); border-bottom: var(--gd-border-subtle); padding: 1.1rem 0; white-space: nowrap; display: flex; } .gd-marquee__track { display: inline-flex; align-items: baseline; gap: 2.5rem; padding-right: 2.5rem; animation: gd-marquee 36s linear infinite; will-change: transform; flex-shrink: 0; min-width: 100%; justify-content: space-around; } @keyframes gd-marquee { to { transform: translateX(-100%); } } .gd-marquee__item { font-family: var(--gd-font-display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 340; font-style: italic; color: var(--gd-muted); } .gd-marquee__item--accent { color: var(--gd-ochre-bright); font-style: normal; } .gd-marquee__star { color: var(--gd-magenta); font-size: 0.9em; } @media (prefers-reduced-motion: reduce) { .gd-marquee__track { animation: none; } } /* ===================================================================== 5. SEKCJE / NAGŁÓWKI SEKCJI / COLOR-BLOCKING ===================================================================== */ .gd-section { position: relative; padding: clamp(4rem, 10vh, 8rem) var(--gd-pad-x); } .gd-section--tight { padding-block: clamp(3rem, 7vh, 5.5rem); } .gd-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: clamp(2.5rem, 7vh, 5rem); max-width: 1360px; margin-inline: auto; } .gd-eyebrow { display: flex; align-items: center; gap: 0.9rem; font-size: 0.72rem; font-weight: 550; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gd-muted); margin: 0 0 1.1rem; } .gd-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--gd-ochre-bright); } .gd-section__title { font-family: var(--gd-font-display); font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-weight: 330; font-variation-settings: "opsz" 144; line-height: 1; letter-spacing: -0.02em; margin: 0; } .gd-section__title em { font-style: italic; color: var(--gd-ochre-bright); } /* ===================================================================== 6. SIATKA GALERII (produkty) ===================================================================== */ .gd-gallery .wc-block-product-template, .gd-gallery ul.wp-block-product-template { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 3.5vw, 3rem); max-width: 1360px; margin-inline: auto; padding: 0; list-style: none; } /* Rytm salonu — środkowa kolumna opuszczona */ @media (min-width: 882px) { .gd-gallery .wc-block-product-template > li:nth-child(3n+2) { transform: translateY(3.5rem); } .gd-gallery.gd-gallery--flat .wc-block-product-template > li:nth-child(3n+2) { transform: none; } } .gd-gallery .wc-block-product-template > li { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Karta obrazu — bez pudełka; płótno wisi na ścianie galerii */ .gd-artwork { position: relative; } .gd-artwork .gd-artwork__frame, .gd-artwork .wc-block-components-product-image { position: relative; overflow: clip; border-radius: 3px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.45); background: var(--gd-surface); margin: 0 0 1.4rem; transition: box-shadow 0.5s var(--gd-ease); } .gd-artwork:hover .gd-artwork__frame, .gd-artwork:hover .wc-block-components-product-image { box-shadow: 0 45px 110px -20px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.5); } .gd-artwork img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transform: scale(1.015); transition: transform 0.9s var(--gd-ease-out), filter 0.6s var(--gd-ease); } .gd-artwork:hover img { transform: scale(1.06); } /* Poświata — światło reflektora od dołu przy hoverze */ .gd-artwork .wc-block-components-product-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 12, 29, 0.45), transparent 45%); opacity: 0; transition: opacity 0.5s var(--gd-ease); pointer-events: none; } .gd-artwork:hover .wc-block-components-product-image::after { opacity: 1; } .gd-artwork__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .gd-artwork .wp-block-post-title { margin: 0; font-family: var(--gd-font-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } .gd-artwork .wp-block-post-title a { color: var(--gd-cream); transition: color 0.3s var(--gd-ease); } .gd-artwork .wp-block-post-title a:hover { color: var(--gd-ochre-bright); } /* Link na całej karcie — pseudo-overlay */ .gd-artwork .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; z-index: 2; } .gd-artwork .wc-block-components-product-price, .gd-artwork .wp-block-woocommerce-product-price { margin: 0.35rem 0 0; font-family: var(--gd-font-body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; color: var(--gd-ochre-bright); white-space: nowrap; } /* Plakietka „Sprzedane" */ .gd-sold-badge { position: absolute; top: 1rem; left: 1rem; z-index: 3; padding: 0.45rem 0.9rem; font-family: var(--gd-font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gd-cream); background: rgba(14, 12, 29, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(244, 239, 230, 0.28); border-radius: 999px; pointer-events: none; } /* Sprzedane — obraz lekko przygaszony */ .gd-is-sold img { filter: saturate(0.55) brightness(0.82); } .gd-is-sold:hover img { filter: saturate(0.8) brightness(0.92); } /* Przycisk w karcie produktu ukrywamy — karta prowadzi do dzieła */ .gd-artwork .wp-block-woocommerce-product-button { display: none; } /* Paginacja */ .wp-block-query-pagination { margin-top: clamp(3rem, 7vh, 5rem); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; } .wp-block-query-pagination a:hover { color: var(--gd-ochre-bright); } .wp-block-query-pagination .page-numbers.current { color: var(--gd-ochre-bright); } /* ===================================================================== 7. SEKCJA MANIFEST / EDYTORIAL ===================================================================== */ .gd-statement { max-width: 60rem; margin-inline: auto; text-align: center; } .gd-statement__text { font-family: var(--gd-font-display); font-size: clamp(1.7rem, 4.2vw, 3.4rem); font-weight: 340; font-style: italic; font-variation-settings: "opsz" 144; line-height: 1.32; letter-spacing: -0.01em; margin: 0; color: var(--gd-cream); } .gd-statement__text .gd-word { display: inline-block; } .gd-statement__source { margin-top: 2rem; font-size: 0.72rem; font-weight: 550; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gd-muted); } /* Trzy filary (01/02/03) */ .gd-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); max-width: 1360px; margin-inline: auto; } .gd-pillar { border-top: 1px solid var(--gd-line-strong); padding-top: 1.5rem; } .gd-pillar__no { font-family: var(--gd-font-display); font-style: italic; font-size: 1rem; color: var(--gd-ochre-bright); display: block; margin-bottom: 1.25rem; } .gd-pillar h3 { font-family: var(--gd-font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.2; margin: 0 0 0.9rem; } .gd-pillar p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--gd-muted); } .gd-pillar p em { display: block; margin-top: 0.5rem; font-family: var(--gd-font-display); font-style: italic; opacity: 0.75; } /* Wstęga CTA */ .gd-cta-band { text-align: center; } .gd-cta-band__title { font-family: var(--gd-font-display); font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 330; font-variation-settings: "opsz" 144; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 2.5rem; } .gd-cta-band__title em { font-style: italic; color: var(--gd-magenta-bright); } /* ===================================================================== 8. STRONA PRODUKTU ===================================================================== */ .gd-product { max-width: 1360px; margin-inline: auto; padding-inline: var(--gd-pad-x); } .gd-product__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .gd-product__media { position: sticky; top: calc(var(--gd-header-offset) + 1.5rem); } /* Galeria Woo na ciemnym */ .gd-product__media .woocommerce-product-gallery, .gd-product__media .wp-block-woocommerce-product-image-gallery { border-radius: 4px; overflow: clip; box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.65), 0 10px 28px rgba(0, 0, 0, 0.5); background: var(--gd-surface); } .gd-product__media .woocommerce-product-gallery__trigger { background: rgba(14, 12, 29, 0.6) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; } .gd-product__media .flex-control-thumbs { display: flex; gap: 0.6rem; margin-top: 0.85rem !important; padding: 0; } .gd-product__media .flex-control-thumbs li { width: 5.5rem; list-style: none; border-radius: 3px; overflow: clip; opacity: 0.55; transition: opacity 0.3s var(--gd-ease); cursor: pointer; } .gd-product__media .flex-control-thumbs li:hover, .gd-product__media .flex-control-thumbs img.flex-active { opacity: 1; } .gd-product__details .wp-block-post-title { font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 340; font-variation-settings: "opsz" 144; line-height: 1.04; letter-spacing: -0.02em; margin: 0.4rem 0 0; } .gd-product__details .wp-block-woocommerce-product-price { font-family: var(--gd-font-body); font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 450; letter-spacing: 0.04em; color: var(--gd-ochre-bright); } .gd-product__details .wp-block-woocommerce-product-price del { opacity: 0.5; margin-right: 0.5rem; } /* Formularz koszyka */ .gd-product__details .wp-block-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .gd-product__details .wp-block-add-to-cart-form .quantity .qty { background: transparent; border: 1px solid var(--gd-line-strong); border-radius: 999px; color: var(--gd-cream); height: 3.4rem; width: 4.5rem; text-align: center; font-family: var(--gd-font-body); font-size: 1rem; } .gd-product__details .single_add_to_cart_button { flex: 1; min-width: 14rem; background: var(--gd-magenta); color: var(--gd-cream); border: none; border-radius: 999px; padding: 1.05rem 2.2rem; font-family: var(--gd-font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .gd-product__details .single_add_to_cart_button:hover { background: var(--gd-violet); transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(192, 70, 138, 0.6); } /* Stan „Sprzedane" na stronie produktu */ .gd-product__details .stock.out-of-stock { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; padding: 0.8rem 1.6rem; border: 1px solid var(--gd-line-strong); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gd-muted); } .gd-product__details .stock.out-of-stock::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gd-wine); box-shadow: 0 0 12px var(--gd-wine); } /* Karta 10% */ .gd-donation-note { background: linear-gradient(100deg, rgba(201, 154, 59, 0.09), rgba(201, 154, 59, 0.02)); border: 1px solid color-mix(in srgb, var(--gd-ochre) 28%, transparent); border-radius: 10px; padding: 1.25rem 1.5rem; font-size: 0.92rem; line-height: 1.65; color: var(--gd-muted); } .gd-donation-note strong { color: var(--gd-cream); font-weight: 550; } .gd-donation-note em { display: block; margin-top: 0.45rem; font-family: var(--gd-font-display); font-style: italic; opacity: 0.8; } /* Metadane produktu */ .gd-product__details .wp-block-woocommerce-product-meta, .gd-product__details .product_meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(201, 194, 214, 0.6); } .gd-product__details .product_meta a { color: var(--gd-muted); } /* Opis pełny */ .gd-product__description { max-width: 760px; margin: clamp(4rem, 9vh, 7rem) auto 0; padding-top: clamp(2.5rem, 6vh, 4rem); border-top: var(--gd-border-subtle); } .gd-product__description .wp-block-woocommerce-product-description { font-size: 1.05rem; line-height: 1.85; color: var(--gd-muted); } /* Breadcrumb */ .gd-product .woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201, 194, 214, 0.65) !important; } .gd-product .woocommerce-breadcrumb a, .wp-block-woocommerce-breadcrumbs a { color: var(--gd-muted); } /* ===================================================================== 9. STRONY STATYCZNE / BLOG ===================================================================== */ .gd-page-hero { padding: clamp(3rem, 8vh, 6rem) var(--gd-pad-x) clamp(2.5rem, 6vh, 4.5rem); max-width: 1360px; margin-inline: auto; } .gd-page-hero .wp-block-post-title { font-size: clamp(2.8rem, 8vw, 7rem); font-weight: 330; font-variation-settings: "opsz" 144; line-height: 1; letter-spacing: -0.02em; margin: 0; max-width: 18ch; } /* .gd-prose (page.html, single.html, page-warunki/polityka/formy-platnosci) dziedziczy tylko generyczny WordPressowy "constrained layout" (max-width + margin:auto) — bez has-global-padding to nie daje ŻADNEGO marginesu bocznego, gdy viewport jest węższy niż contentSize (740px). Na desktopie niewidoczne (740px < typowa szerokość ekranu, margin:auto i tak zostawia oddech), na mobile treść styka się z krawędziami ekranu (zgłoszenie Piotra ze zrzutów z iPhone'a). Ten sam brak dotyczy .gd-post-list/.gd-post-media niżej. */ .gd-prose { font-size: 1.05rem; line-height: 1.85; color: var(--gd-muted); padding-inline: var(--gd-pad-x); } .gd-prose p { margin-block-end: 1.4em; } .gd-prose h2, .gd-prose h3, .gd-prose h4 { color: var(--gd-cream); margin-top: 2.5em; margin-bottom: 0.8em; font-weight: 350; } .gd-prose h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); border-bottom: 1px solid var(--gd-line); padding-bottom: 0.4em; } .gd-prose a { color: color-mix(in srgb, var(--gd-ochre) 90%, var(--gd-cream)); } .gd-prose a:hover { color: var(--gd-magenta); } .gd-prose ul, .gd-prose ol { padding-left: 1.4em; margin-block-end: 1.4em; } .gd-prose li { margin-bottom: 0.4em; } .gd-prose strong { color: var(--gd-cream); font-weight: 500; } .gd-prose em { color: color-mix(in srgb, var(--gd-muted) 75%, transparent); } .gd-prose-notice { background: color-mix(in srgb, var(--gd-ochre) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gd-ochre) 25%, transparent); padding: 0.9rem 1.25rem; border-radius: 4px; font-size: 0.88rem; color: color-mix(in srgb, var(--gd-cream) 80%, transparent); margin-block-end: 2.5rem !important; } /* Lista wpisów bloga */ /* Ten sam brakujący margines boczny co .gd-prose wyżej — .gd-post-list (Blog) i .gd-post-media (pojedynczy wpis) mają tylko generyczny constrained layout, bez has-global-padding. */ .gd-post-list, .gd-post-media { padding-inline: var(--gd-pad-x); } .gd-post-list .wp-block-post { border-top: 1px solid var(--gd-line); padding: clamp(1.75rem, 4vh, 3rem) 0; margin: 0; } .gd-post-list .wp-block-post:last-child { border-bottom: 1px solid var(--gd-line); } .gd-post-list .wp-block-post-title { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 350; line-height: 1.1; } .gd-post-list .wp-block-post-title a { display: inline-block; transition: color 0.3s var(--gd-ease), transform 0.4s var(--gd-ease-out); } .gd-post-list .wp-block-post-title a:hover { color: var(--gd-ochre-bright); transform: translateX(0.6rem); } .gd-post-list .wp-block-post-date, .wp-block-post-date { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201, 194, 214, 0.6); } .gd-post-list .wp-block-post-excerpt__excerpt { color: var(--gd-muted); font-size: 0.98rem; line-height: 1.7; } .gd-blog-empty { padding: clamp(3rem, 8vh, 6rem) 0; text-align: center; color: var(--gd-muted); line-height: 1.8; } .gd-blog-empty .gd-eyebrow { margin-bottom: 1.5rem; } .gd-blog-empty em { color: color-mix(in srgb, var(--gd-muted) 60%, transparent); font-size: 0.9rem; } /* ===================================================================== 10. STOPKA ===================================================================== */ .gd-footer { position: relative; background: var(--gd-void); border-top: var(--gd-border-subtle); padding: clamp(4rem, 9vh, 7rem) max(var(--gd-pad-x), var(--gd-safe-right)) calc(2.5rem + var(--gd-safe-bottom)) max(var(--gd-pad-x), var(--gd-safe-left)); overflow: clip; } .gd-footer__wordmark { font-family: var(--gd-font-display); font-size: clamp(3rem, 12.5vw, 11rem); font-weight: 330; font-variation-settings: "opsz" 144; font-style: italic; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 clamp(3rem, 7vh, 5rem); color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 230, 0.35); user-select: none; transition: color 1.2s var(--gd-ease); } .gd-footer__wordmark:hover { color: rgba(244, 239, 230, 0.12); } .gd-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); max-width: 1360px; } .gd-footer h6 { font-size: 0.68rem; letter-spacing: 0.22em; margin: 0 0 1.25rem; } .gd-footer p, .gd-footer li { font-size: 0.92rem; line-height: 1.8; color: var(--gd-muted); } .gd-footer .wp-block-navigation { font-size: 0.85rem; text-transform: none; letter-spacing: 0.02em; font-weight: 400; } .gd-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--gd-muted); transition: color 0.3s; } .gd-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--gd-ochre-bright); } .gd-footer a { transition: color 0.3s var(--gd-ease); } .gd-footer a:hover { color: var(--gd-ochre-bright); } .gd-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.75rem; border-top: var(--gd-border-subtle); font-size: 0.75rem; color: rgba(201, 194, 214, 0.6); } .gd-footer__bottom a { color: rgba(201, 194, 214, 0.75); } .gd-footer__bottom a:hover { color: var(--gd-cream); } /* ===================================================================== 11. 404 ===================================================================== */ .gd-404 { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--gd-header-offset) max(var(--gd-pad-x), var(--gd-safe-right)) calc(4rem + var(--gd-safe-bottom)) max(var(--gd-pad-x), var(--gd-safe-left)); position: relative; overflow: clip; isolation: isolate; } .gd-404__code { font-family: var(--gd-font-display); font-style: italic; font-size: clamp(7rem, 28vw, 22rem); font-weight: 320; line-height: 1; margin: 0; background: linear-gradient(120deg, var(--gd-cobalt-bright), var(--gd-magenta-bright), var(--gd-orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===================================================================== 13. RESPONSYWNOŚĆ ===================================================================== */ @media (max-width: 1080px) { .gd-product__layout { grid-template-columns: 1fr; } .gd-product__media { position: static; } } @media (max-width: 881px) { .gd-gallery .wc-block-product-template, .gd-gallery ul.wp-block-product-template { grid-template-columns: repeat(2, 1fr); } .gd-pillars { grid-template-columns: 1fr; gap: 2.5rem; } .gd-footer__grid { grid-template-columns: 1fr; } .gd-hero__scroll { display: none; } } @media (max-width: 560px) { .gd-gallery .wc-block-product-template, .gd-gallery ul.wp-block-product-template { grid-template-columns: 1fr; } :root { --gd-header-h: 4.25rem; } main.gd-main { padding-top: calc(var(--gd-header-offset) + 3rem); } } /* ===================================================================== 14. DROBIAZGI / INTEGRACJA WP ===================================================================== */ .skip-link { position: absolute; left: -9999px; z-index: 999999; padding: 1em 1.5em; background: var(--gd-void); color: var(--gd-cream); } .skip-link:focus { left: 1rem; top: 1rem; } /* Admin bar */ .admin-bar .gd-header { top: var(--wp-admin--admin-bar--height, 32px); } /* Komunikaty Woo (store notices) */ .wc-block-store-notices, .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--gd-surface); color: var(--gd-cream); border: var(--gd-border-subtle); border-top: 2px solid var(--gd-teal); border-radius: 10px; padding: 1rem 1.25rem; } .woocommerce-error { border-top-color: var(--gd-wine); } /* ── Strona O mnie ────────────────────────────────────────────────── */ .gd-about-page { position: relative; background: var(--gd-ink); overflow: hidden; min-height: 100vh; } .gd-about-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Layout i typografia poszczególnych "pokoi" (.gd-morph) tej strony — assets/css/about.css, nie tutaj (ten sam wzorzec co contact.css dla Kontaktu). .gd-about-page i .gd-about-blobs powyżej zostają, bo są reużywane przez nowy szablon. */ /* ── Strona Kontakt ───────────────────────────────────────────────── */ .gd-contact-page { position: relative; background: var(--gd-ink); overflow: hidden; min-height: 100vh; } .gd-contact-eyebrow { position: relative; z-index: 1; padding-top: clamp(2rem, 4vw, 4rem); margin: 0 !important; } .gd-contact-eyebrow::after { content: ''; display: block; width: 80px; height: 1px; background: color-mix(in srgb, var(--gd-teal) 50%, transparent); margin-top: 0.75rem; } .gd-contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); max-width: 1200px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 6vw, 6rem) clamp(5rem, 10vw, 10rem); align-items: start; } .gd-contact-title.wp-block-post-title { font-family: var(--gd-font-display); font-size: clamp(4rem, 9vw, 8rem); color: var(--gd-cream); line-height: 0.95; letter-spacing: -0.02em; margin-block-end: clamp(2rem, 4vw, 4rem) !important; } .gd-contact-details { display: flex; flex-direction: column; gap: 0; } .gd-contact-item { display: flex; flex-direction: column; padding: 1.25rem 0; border-bottom: 1px solid var(--gd-line); text-decoration: none; transition: transform 0.35s var(--gd-ease-out); } .gd-contact-item:first-child { border-top: 1px solid var(--gd-line); } a.gd-contact-item:hover { transform: translateX(0.5rem); } .gd-contact-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--gd-muted) 60%, transparent); margin-bottom: 0.3rem; } .gd-contact-value { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--gd-cream); font-family: var(--gd-font-display); font-weight: 350; } a.gd-contact-item .gd-contact-value { transition: color 0.3s; } a.gd-contact-item:hover .gd-contact-value { color: var(--gd-teal-bright, var(--gd-teal)); } .gd-muted-text { color: var(--gd-muted) !important; font-style: italic; font-size: 0.9em !important; } /* Formularz CF7 */ .gd-contact-form-lead, .gd-contact-form-lead-en { color: var(--gd-muted); font-size: 0.98rem; line-height: 1.7; margin-block-end: 0.5rem !important; } .gd-contact-form-lead-en { font-size: 0.85rem; opacity: 0.65; margin-block-end: 2rem !important; } .wpcf7-form label { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--gd-muted) 65%, transparent); margin-top: 1.5rem; margin-bottom: 0.5rem; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: 100%; background: color-mix(in srgb, var(--gd-void) 60%, transparent); border: 1px solid var(--gd-line); border-radius: 8px; color: var(--gd-cream); font-family: var(--wp--preset--font-family--hanken-grotesk), sans-serif; font-size: 1rem; padding: 0.85rem 1rem; transition: border-color 0.3s, background 0.3s; outline: none; -webkit-appearance: none; } .wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form textarea:focus { border-color: color-mix(in srgb, var(--gd-teal) 70%, transparent); background: color-mix(in srgb, var(--gd-surface) 80%, transparent); } .wpcf7-form textarea { min-height: 140px; resize: vertical; } .wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit { margin-top: 1.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2.5rem; background: transparent; border: 1px solid var(--gd-cream); color: var(--gd-cream); font-family: var(--wp--preset--font-family--hanken-grotesk), sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.35s, color 0.35s, border-color 0.35s; border-radius: 0; } .wpcf7-form input[type="submit"]:hover { background: var(--gd-cream); color: var(--gd-void); } .wpcf7-response-output { margin-top: 1.5rem !important; padding: 0.85rem 1.25rem !important; border-radius: 8px !important; font-size: 0.9rem !important; border: 1px solid var(--gd-teal) !important; color: var(--gd-cream) !important; background: color-mix(in srgb, var(--gd-teal) 10%, transparent) !important; } .wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output { border-color: var(--gd-wine) !important; background: color-mix(in srgb, var(--gd-wine) 10%, transparent) !important; } .wpcf7-not-valid-tip { font-size: 0.78rem !important; color: color-mix(in srgb, var(--gd-magenta) 80%, var(--gd-cream)) !important; margin-top: 0.3rem !important; } @media (max-width: 900px) { .gd-contact-grid { grid-template-columns: 1fr; gap: 3rem; } } /* ── Przełącznik języka ([lang_toggle]) ──────────────────────────── */ /* Ukryj floater TRP */ .trp-floater { display: none !important; } /* Blok shortcode w headerze — inline z nawigacją */ .gd-header .wp-block-shortcode { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .gd-lang-toggle { display: flex; align-items: center; } .gd-lang-btn { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gd-muted); text-decoration: none; padding: 0.2rem 0.4rem; transition: color 0.3s; } .gd-lang-btn:hover { color: var(--gd-cream); } .gd-lang-btn img { width: 16px; height: auto; display: block; opacity: 0.7; transition: opacity 0.3s; } .gd-lang-btn:hover img { opacity: 1; }