:root { --bg: #0F141C; --bg-2: #131924; --surface: #1A2232; --surface-2: #232c3e; --border: #2a3346; --text: #E2E8F0; --text-muted: #94A3B8; --accent: #D4AF37; --accent-2: #E2B04E; --accent-ink: #2a2100; --logo-orange: #E75A24; --logo-gold: #E2B04E; --logo-green: #47B557; --logo-blue: #00A3C4; --font-head: "Montserrat"; --glow: 1; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; } ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); } h1,h2,h3,h4,h5 { font-family: var(--font-head), "Montserrat", sans-serif; } .eyebrow { letter-spacing: .22em; text-transform: uppercase; font-weight: 600; font-size: 13px; } .display { letter-spacing: .01em; line-height: 1.05; font-weight: 800; } .h-section { letter-spacing: .04em; } .material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; } .ico-fill { font-variation-settings: 'FILL' 1,'wght' 400; } /* accent-driven helpers */ .accent { color: var(--accent); } .cta { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-ink); font-weight: 700; letter-spacing: .02em; transition: box-shadow .3s, transform .15s, filter .3s; } .cta:hover { filter: brightness(1.06); box-shadow: 0 0 calc(34px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent); } .cta:active { transform: scale(.975); } .cta-ghost { border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); transition: .25s; } .cta-ghost:hover { background: var(--accent); color: var(--accent-ink); } .card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); transition: border-color .3s, transform .3s, box-shadow .3s; } .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.8); } .hairline { border-color: color-mix(in srgb, var(--border) 70%, transparent); } .accent-glow { box-shadow: 0 0 calc(26px * var(--glow)) color-mix(in srgb, var(--accent) 30%, transparent); } .blue-glow { box-shadow: 0 0 calc(22px * var(--glow)) color-mix(in srgb, var(--logo-blue) 30%, transparent); } /* top spectrum bar (logo colors) */ .spectrum { height: 4px; background: linear-gradient(90deg,#E75A24 0%,#E2B04E 28%,#47B557 58%,#00A3C4 100%); } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } /* HERO variants: controlled by [data-hero] on */ .hero-A, .hero-B, .hero-C { display: none; } body[data-hero="A"] .hero-A { display: flex; } body[data-hero="B"] .hero-B { display: flex; } body[data-hero="C"] .hero-C { display: grid; } /* compass */ .seg { cursor: pointer; transition: opacity .35s, transform .35s; transform-origin: 260px 260px; } .compass.has-active .seg { opacity: .32; } .compass.has-active .seg.active { opacity: 1; } .seg:hover { opacity: 1 !important; } .needle { transition: transform .9s cubic-bezier(.16,1,.3,1); transform-origin: 260px 260px; } .seg-label { font-family: var(--font-head),"Montserrat"; font-size: 15px; font-weight: 700; fill: var(--text); transition: fill .3s; letter-spacing: .02em; } /* Admin bar offset — sticky nav */ .admin-bar #nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar #nav { top: 46px; } } .nav-link { position: relative; } .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width .25s; } .nav-link:hover::after { width:100%; } .testi-track { transition: transform .6s cubic-bezier(.2,.7,.2,1); } .dot { transition: all .3s; } .modal-back { backdrop-filter: blur(6px); } @media (prefers-reduced-motion: reduce) { .reveal{transition:none;} .needle{transition:none;} html{scroll-behavior:auto;} } @keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } } /* ====================================================== WooCommerce — single product layout fix Tailwind reset usuwa float i szerokosc — przywracamy ====================================================== */ .woocommerce div.product, .woocommerce-page div.product { display: flex !important; flex-wrap: wrap !important; gap: 2rem !important; align-items: flex-start !important; } .woocommerce div.product div.images, .woocommerce-page div.product div.images { flex: 0 0 46% !important; max-width: 46% !important; float: none !important; } .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { flex: 1 1 46% !important; float: none !important; } @media (max-width: 767px) { .woocommerce div.product div.images, .woocommerce-page div.product div.images { flex: 0 0 100% !important; max-width: 100% !important; } .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { flex: 0 0 100% !important; } } /* WooCommerce — dark theme kolory */ .woocommerce div.product .product_title { color: var(--text) !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent) !important; font-size: 2rem !important; font-weight: 700 !important; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-muted) !important; } .woocommerce div.product form.cart .qty { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: .5rem !important; padding: .5rem !important; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: var(--accent-ink) !important; font-weight: 700 !important; border: none !important; border-radius: .5rem !important; padding: .85rem 2rem !important; transition: filter .3s !important; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { filter: brightness(1.07) !important; background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: var(--accent-ink) !important; } .woocommerce .woocommerce-breadcrumb { color: var(--text-muted) !important; } .woocommerce .woocommerce-breadcrumb a { color: var(--text-muted) !important; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { color: var(--text-muted) !important; border-color: var(--border) !important; } /* Typography system — two-tone contrast */ .text-ink { color: var(--text) !important; } .text-muted { color: var(--text-muted) !important; } /* Inline highlight — bialy tekst (format Gutenberga) */ .hl-white { color: var(--text) !important; } /* Responsive containers — fallback dla Tailwind CDN (deterministyczne, niezalezne od JS) */ .max-w-wide { max-width: 1320px !important; } .max-w-prose { max-width: 760px !important; } .max-w-container { max-width: 1200px !important; }