/* NL Marka 0.1.7 — identyfikacja wizualna z Figmy („nowoczesnelustra.pl — Identyfikacja wizualna (szkic)”, Marcel, 23.10.2026). Warstwa NAD nl-apple: te same tokeny --a-*, inne wartości. Wszystko pod html.nl-apple.nl-marka (klasę dokłada skrypt nl-marka-js). Zasady z planszy 06 · Zasady stosowania: · 4 kolory: Czerń #111111 (akcent ~10 %: typografia, logo, przyciski, ciemne plansze), Papier #F6F4F0 (tło ~70 %), Kamień #DAD5CD (tła wtórne, linie, miejsca na zdjęcia ~20 %), Grafit #686560 (tylko tekst pomocniczy i cienkie linie, nigdy tło). · Grafit tylko na Papierze (5,3:1). Na Kamieniu tekst Czerń (12,9:1). Na Czerni tekst Papier / Kamień. · Jost (nagłówki, nazwy modeli, etykiety; nagłówki ciasno −1,5…−2 %, kapitaliki +10…+14 %), DM Sans (opisy). Bez innych krojów. · Bez gradientów i cieni; geometria: proste linie, małe promienie (znak ma 10 % boku). Kolory funkcyjne (błąd, sukces) zostają z nl-apple — to nie kolory marki, tylko stany formularzy. */ /* ============ 0. Fonty lokalne (SIL OFL 1.1, pliki w assets/fonts) ============ */ @font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jost-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dmsans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dmsans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============ 1. Tokeny marki (jasny) ============ */ html.nl-apple.nl-marka{ --m-czern:#111111;--m-papier:#F6F4F0;--m-kamien:#DAD5CD;--m-grafit:#686560; --m-kamien50:#EBE7E0; /* Kamień 50 % na Papierze — tło wtórne, na którym Grafit ma jeszcze 4,6:1 */ --m-kamien-ciemny:#ABA69F; /* Kamień 75 % na Czerni — tekst pomocniczy na ciemnych planszach (7,8:1) */ --m-head:"Jost","Futura","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; /* tokeny nl-apple → marka */ --a-blue:var(--m-czern);--a-blue-h:var(--m-czern);--a-blue-f:var(--m-czern);--a-blue-d:var(--m-kamien); --a-btn:var(--m-czern);--a-btn-h:#33312e;--a-on-ink:var(--m-papier); --a-ink:var(--m-czern);--a-ink80:var(--m-czern);--a-ink48:var(--m-grafit);--a-ink30:var(--m-grafit); --a-line:var(--m-kamien);--a-soft:var(--m-kamien);--a-hair:rgba(17,17,17,.1); --a-canvas:var(--m-papier);--a-pearl:var(--m-papier);--a-parch:var(--m-kamien50);--a-parch2:var(--m-kamien); --a-tile:var(--m-czern);--a-tile2:var(--m-czern);--a-black:var(--m-czern);--a-band:var(--m-czern); --a-chip:rgba(246,244,240,.78);--a-chip-h:rgba(246,244,240,.95);--a-muted-dark:var(--m-kamien-ciemny); --a-glass:rgba(246,244,240,.9);--a-glass-strong:rgba(246,244,240,.96);--a-glass-parch:rgba(235,231,224,.92); --a-scrim:rgba(17,17,17,.45); --a-r-sm:2px;--a-r-md:4px;--a-r-lg:6px;--a-r-xl:8px;--a-pill:4px; --a-f:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; /* zmienne motywu wiwi */ --maincolor:var(--m-czern);--secondarycolor:var(--m-czern);--themecolor:var(--m-czern);--bodybackgroundcolor:var(--m-papier); --menubackgroundcolor:var(--m-papier);--menuhambcolor:var(--m-czern);--menuhambbackground:var(--m-czern);--menumobilebackground:var(--m-papier); --footerbackground:var(--m-kamien50); background:var(--m-papier); } html.nl-apple.nl-marka body{background:var(--a-canvas)!important;letter-spacing:0;font-size:16px;line-height:1.6} html.nl-apple.nl-marka ::selection{background:rgba(17,17,17,.14)} /* strona główna v3 i Studio mają własne zmienne — nl-apple podpina je pod tokeny; tu tylko to, co wpisał na sztywno */ html.nl-apple.nl-marka .nlh3,html.nl-apple.nl-marka .nlw{--night:var(--m-czern);--glow:var(--m-papier);letter-spacing:0} /* ============ 2. Typografia: Jost + DM Sans ============ */ html.nl-apple.nl-marka body :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6), html.nl-apple.nl-marka body :is(.product_title,.custom-category-title,.nlh3-slide__title,.cart_totals h2,.hn-slide-panel-header h4,.nlw-krok>legend){ font-family:var(--m-head)!important;font-weight:500!important; } html.nl-apple.nl-marka body :is(h1,.h1,.product_title,.custom-category-title){letter-spacing:-.02em!important} html.nl-apple.nl-marka body :is(h2,.h2){letter-spacing:-.015em!important} html.nl-apple.nl-marka body :is(h3,.h3){letter-spacing:-.005em!important} html.nl-apple.nl-marka body :is(h4,.h4,h5,.h5,h6,.h6){letter-spacing:0!important} html.nl-apple.nl-marka body :is(h3,.h3,h4,.h4){font-weight:400!important} html.nl-apple.nl-marka body :is(p,li,dd,td,label,input,select,textarea){letter-spacing:0!important} html.nl-apple.nl-marka .nlh3 :is(h1,h2,h3),html.nl-apple.nl-marka .nlw :is(h1,h2,h3), html.nl-apple.nl-marka .nlh3-head h2,html.nl-apple.nl-marka .nlh3-config h2,html.nl-apple.nl-marka .nlh3-seo h2,html.nl-apple.nl-marka .nlw h2{font-weight:500!important;letter-spacing:-.015em!important} html.nl-apple.nl-marka .nlh3-slide__title{font-weight:500!important;letter-spacing:-.02em!important} /* nazwy modeli (karty): Jost Medium; w kafelkach strony głównej kapitaliki +10 % jak „Nazwa modelu” z Figmy */ html.nl-apple.nl-marka body :is(.custom-products-wrapper .product h3,.custom-products-wrapper .product h3 a,.product .product-content .text-L a,.nlh3-card__name,.nlh3-shape__name,.hn-tile-name,.hn-tile-rich-title,.hn-addon-name,.hn-addons-title,.nlh3-quick__t b,.nl-op__who b){ font-family:var(--m-head)!important;font-weight:500!important;letter-spacing:.005em!important; } html.nl-apple.nl-marka .nlh3-card__name{text-transform:uppercase;letter-spacing:.1em!important;font-size:15px!important} /* etykiety, nadtytuły, nagłówki stopki: Jost Medium, kapitaliki +14 % (styl „Etykieta/CAPS”) */ html.nl-apple.nl-marka body :is(.nlh3-kicker,.nlw-kicker,footer h5,footer .h5,.product-tag,.product-badge,.nl-tag,.nlh3-tag,.nlh3-studio__kick,.custom-tabs-nav .tab-link,.woocommerce table.shop_table thead th){ font-family:var(--m-head)!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.14em!important; } html.nl-apple.nl-marka body :is(.nlh3-kicker,.nlw-kicker){font-size:12px!important;color:var(--a-ink48)!important} html.nl-apple.nl-marka footer :is(h5,.h5){font-size:12px!important;letter-spacing:.14em!important} html.nl-apple.nl-marka body .custom-tabs-nav .tab-link{font-size:13px!important} /* ceny: DM Sans, cyfry równej szerokości */ html.nl-apple.nl-marka body :is(.price,.product-price,.woocommerce-Price-amount,.hn-from-price,.hn-sticky-bar-price,.nl-cart-bar__total,.nlh3-card__price){font-variant-numeric:tabular-nums;letter-spacing:0!important} html.nl-apple.nl-marka body :is(.hn-from-price,.hn-sticky-bar-price){font-weight:600!important} /* ============ 3. Odnośniki w treści: Czerń z podkreśleniem (kolor nie może być jedynym wyróżnikiem) ============ */ html.nl-apple.nl-marka body :is(main,.main,.woocommerce,.entry-content,.custom-category-description,.product-description,.woocommerce-Tabs-panel,.nl-ap,.nlw) p a:not([class*="btn"]):not(.button), html.nl-apple.nl-marka .custom-category-description a,html.nl-apple.nl-marka .woocommerce-privacy-policy-text a,html.nl-apple.nl-marka .woocommerce-terms-and-conditions-link, html.nl-apple.nl-marka .woocommerce-info a,html.nl-apple.nl-marka .woocommerce-message a:not(.button){ color:var(--a-ink)!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px; } html.nl-apple.nl-marka body :is(main,.main) p a:not([class*="btn"]):not(.button):hover{text-decoration-thickness:2px!important} html.nl-apple.nl-marka :is(.nlh3-more,.nl-op__more,.btn-read-more,.hn-addon-more,.nl-summary__edit,.nl-kupon summary,.woocommerce-cart td.product-name .nl-edit){ color:var(--a-ink)!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px; } /* ============ 4. Przyciski: Czerń, Papier, Jost, prostokąt 4 px ============ Reguła przycisków nl-apple ma #place_order w :is(), więc waży jak selektor ID dla KAŻDEGO przycisku. Tu ten sam ciężar daje body:not(#nlm) (zawsze pasuje), a odmiany (obrysowe, odwrócone na ciemnym) dokładają drugie :not(#nlm). */ html.nl-apple.nl-marka body:not(#nlm) :is(.btn,.button,a.button,button.button,input.button,input[type="submit"],.single_add_to_cart_button,.checkout-button,.wc-forward,.wp-block-button__link,.wpcf7-submit,.hidden-content-configuration,.hn-sticky-add,.nl-cart-bar__btn,.nln__btn,.nln__code-go,.nlh3-btn,.nlw-btn,.nlh3-nextmodel,.nlh3-scrollnav__next,.tm-filter-reviews__form-submit-btn,.cky-btn-accept){ background:var(--a-btn)!important;color:var(--a-on-ink)!important;border-radius:var(--a-pill)!important; font-family:var(--m-head)!important;font-weight:500!important;letter-spacing:.02em!important; } html.nl-apple.nl-marka body:not(#nlm) :is(.btn,.button,a.button,button.button,input.button,input[type="submit"],.single_add_to_cart_button,.checkout-button,.wc-forward,.wp-block-button__link,.wpcf7-submit,.hidden-content-configuration,.hn-sticky-add,.nl-cart-bar__btn,.nln__btn,.nln__code-go,.nlh3-btn,.nlw-btn,.nlh3-nextmodel,.nlh3-scrollnav__next,.tm-filter-reviews__form-submit-btn,.cky-btn-accept):hover{background:var(--a-btn-h)!important;color:var(--a-on-ink)!important} html.nl-apple.nl-marka body:not(#nlm) :is(.button,.btn,input[type="submit"],.single_add_to_cart_button):is(:disabled,.disabled){background:var(--a-btn)!important;color:var(--a-on-ink)!important} /* obrysowe: Czerń 1 px, po najechaniu wypełnione */ html.nl-apple.nl-marka body:not(#nlm) :is(.nlh3-btn--ghost,.nlw-btn--ghost,.white-btn,.cky-btn-reject,.cky-btn-customize,.cky-btn-preferences,.nln__copy):not(#nlm){ background:transparent!important;color:var(--a-ink)!important;box-shadow:inset 0 0 0 1px var(--a-ink)!important;border-color:var(--a-ink)!important; font-family:var(--m-head)!important;font-weight:500!important;letter-spacing:.02em!important; } html.nl-apple.nl-marka body:not(#nlm) :is(.nlh3-btn--ghost,.nlw-btn--ghost,.white-btn):not(#nlm):hover{background:var(--a-btn)!important;color:var(--a-on-ink)!important} html.nl-apple.nl-marka body:not(#nlm) .nlh3-btn--light:not(#nlm){background:var(--m-papier)!important;color:var(--m-czern)!important} html.nl-apple.nl-marka .cky-btn{font-family:var(--m-head)!important;font-weight:500!important} html.nl-apple.nl-marka .cky-btn-revisit-wrapper{background-color:var(--m-czern)!important} html.nl-apple.nl-marka :is(.nlw-chip.is-on,.nlw-chip:has(input:checked)){background:var(--a-btn)!important;border-color:var(--a-btn)!important;color:var(--a-on-ink)!important} /* przyciski na ciemnych planszach: Papier z Czernią (odwrócone) */ html.nl-apple.nl-marka body:not(#nlm) :is(.nlh3-config,.nln,.nlw-suma,.newsletter,.nlh3-tile--dark,.nlh3-quick) :is(.btn,.button,.nlh3-btn,.nlw-btn,.nln__btn,.nln__code-go,input[type="submit"]):not(#nlm){ background:var(--m-papier)!important;color:var(--m-czern)!important; } html.nl-apple.nl-marka body:not(#nlm) :is(.nlh3-config,.nln,.nlw-suma,.newsletter,.nlh3-tile--dark,.nlh3-quick) :is(.btn,.button,.nlh3-btn,.nlw-btn,.nln__btn,.nln__code-go,input[type="submit"]):not(#nlm):hover, html.nl-apple.nl-marka body:not(#nlm) .nlh3-quick a:hover .nlh3-btn:not(#nlm){background:var(--m-kamien)!important;color:var(--m-czern)!important} html.nl-apple.nl-marka body:not(#nlm) :is(.nln,.newsletter) .nln__copy:not(#nlm){color:var(--m-papier)!important;box-shadow:inset 0 0 0 1px var(--m-kamien)!important;border-color:var(--m-kamien)!important} html.nl-apple.nl-marka body:not(#nlm) :is(.nln,.newsletter) .nln__copy:not(#nlm):hover{background:var(--m-kamien)!important;color:var(--m-czern)!important} html.nl-apple.nl-marka .nln__input{background:var(--m-papier)!important;color:var(--m-czern)!important;border-radius:var(--a-pill)!important} /* ============ 5. Pola formularzy: linia Grafit (3:1 dla granic pól), fokus Czerń ============ */ html.nl-apple.nl-marka body :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="url"],textarea,select):not(#live-search-input):not(.nln__input){border-color:var(--m-grafit)!important;background-color:var(--m-papier)!important} html.nl-apple.nl-marka body :is(input,textarea,select):not(#live-search-input):focus{border-color:var(--m-czern)!important;box-shadow:inset 0 0 0 1px var(--m-czern)!important} html.nl-apple.nl-marka body select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important} html.nl-apple.nl-marka .live-search-container input,html.nl-apple.nl-marka #live-search-input{background:var(--m-kamien50)!important} html.nl-apple.nl-marka .live-search-container input:focus{background:var(--m-papier)!important;border-color:var(--m-czern)!important} /* ============ 6. Pasek górny, nagłówek, stopka ============ */ html.nl-apple.nl-marka .topbar,html.nl-apple.nl-marka .topbar *{color:var(--m-papier)!important} html.nl-apple.nl-marka .topbar .topbar-info span{color:var(--m-kamien)!important} html.nl-apple.nl-marka .topbar a:hover{color:var(--m-kamien)!important} /* menu górne (Paweł 23.10: większy font, wyśrodkowane z logo) — wiersz już jest d-flex align-items-center w markupie motywu, więc większy font centruje się sam; tu tylko rozmiar, waga i odstęp między pozycjami */ html.nl-apple.nl-marka .top_nav_bar .navbar-nav-css>li>a,html.nl-apple.nl-marka .top_nav_bar .navbar-nav-css>li>.nav-link{ font-family:var(--m-head)!important;font-weight:500!important;font-size:18px!important;letter-spacing:0!important;padding-top:0!important;padding-bottom:0!important; } html.nl-apple.nl-marka .top_nav_bar .navbar-nav-css>li{display:flex;align-items:center;margin:0 10px!important} html.nl-apple.nl-marka .top_nav_bar .dropdown-toggle::after{width:15px!important;height:11px!important} /* zgłoszenie Pawła 23.10: tło hover najeżdżało na sąsiednie pozycje (nl-menu rozciąga je 12 px poza napis ujemnym marginesem -7 -12 — przy 4 px odstępu między pozycjami to się stykało); tu zmniejszam rozciągnięcie do 8 px, odstęp między pozycjami (margin na li, wyżej) daje mu miejsce bez nachodzenia */ html.nl-apple.nl-marka #header .navbar-nav-css>li.nl-mm>a.nav-link{padding:7px 6px!important;margin:-7px -6px!important} /* #header w nl-menu.css — bez tego samego ID moja reguła przegrywa mimo !important */ /* usunięcie „Kontakt” z menu tekstowego komputera (Paweł 23.10) — zastępuje go ikona przy szukaj/konto/koszyk (glowa.js, .nl-marka-kontakt); w szufladzie telefonu (.mobile-box-header) „Kontakt” zostaje bez zmian */ html.nl-apple.nl-marka .top_nav_bar .navbar-nav-css>li.nav-item-155{display:none!important} /* odstęp menu ↔ szukajka, żeby nic się nie stykało */ html.nl-apple.nl-marka .top_nav_bar .header-data{margin-left:20px!important} /* zgłoszenie Pawła 23.10: szukajka za mała — większa na komputerze (1280: wąsko między menu i ikonami, więc mniej niż przy 1440), bez naruszania telefonu i szuflady (tylko .top_nav_bar .header-data, nie .mobileWrapHamb) */ @media (min-width:1200px){ html.nl-apple.nl-marka .top_nav_bar .header-data .live-search-container{width:170px!important;max-width:170px!important} } @media (min-width:1200px){ html.nl-apple.nl-marka .top_nav_bar .header-data .live-search-container input{width:100%!important;height:44px!important;font-size:16px!important} } /* zgłoszenie Pawła 23.10 wieczór: 4 ikony nagłówka (tryb, kontakt, konto, koszyk) miały różny rozmiar krążka (księżyc 40 px na stałe, kontakt 40 px, konto/koszyk bez krążka wcale — gołe ikony 22 px) i różny glif (20 vs 22 px). Jeden wspólny krąg 44×44 (klikalny obszar), tło TYLKO na hover/focus (żaden nie ma go na stałe), jeden glif 20 px, jedna linia bazowa — nadpisuje osobne reguły .nl-motyw/.nl-marka-kontakt z nl-apple i stąd wyżej. Specyficzność: 4 klasy (nl-apple.nl-marka .header-data + :is) > nl-apple „html.nl-apple.nl-dark-ok .nl-motyw” (3 klasy) niezależnie od kolejności plików; .nl-motyw--wiersz (wiersz w szufladzie telefonu) wyłączony :not(). */ html.nl-apple.nl-marka .header-data :is(.nl-motyw,.nl-marka-kontakt,.account-link,.cart-link):not(.nl-motyw--wiersz){ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:44px!important;height:44px!important;margin:0!important;padding:0!important;border:0!important; border-radius:50%!important;background:transparent!important;color:var(--a-ink)!important;flex:0 0 auto; transition:background-color .2s var(--a-ease); } html.nl-apple.nl-marka .header-data :is(.nl-motyw,.nl-marka-kontakt,.account-link,.cart-link):not(.nl-motyw--wiersz):hover, html.nl-apple.nl-marka .header-data :is(.nl-motyw,.nl-marka-kontakt,.account-link,.cart-link):not(.nl-motyw--wiersz):focus-visible{background:var(--a-parch)!important} /* zgłoszenie Pawła 23.10 (zrzut): księżyk zostawał z widocznym obrysowanym kółkiem po kliknięciu — Safari/Firefox pokazują :focus-visible na