/* ============================================================ SALON MATURZYSTÓW — Joomla template Design tokens + layout + components. Fonts (Oswald + Open Sans) and Font Awesome are loaded separately via the Web Asset Manager (see joomla.asset.json). ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* ---- Brand: Perspektywy Red ---- */ --red-50:#FEF1F1; --red-100:#FBD9DA; --red-200:#F6A9AC; --red-300:#F1787D; --red-400:#F0454D; --red-500:#ED1E26; --red-600:#CE161D; --red-700:#A01017; --red-800:#730B10; /* ---- Brand: Salon Blue ---- */ --blue-50:#EAF4FA; --blue-100:#CDE5F1; --blue-200:#9CCAE3; --blue-300:#63ABD0; --blue-400:#2F88B6; --blue-500:#1A6C9C; --blue-600:#155A82; --blue-700:#0F4361; --blue-800:#0A2F44; --blue-900:#07212F; /* ---- Accent: Salon Orange ---- */ --orange-50:#FFF3EA; --orange-100:#FFDFC4; --orange-300:#FFA866; --orange-400:#FF8533; --orange-500:#FF6600; --orange-600:#E25600; --orange-700:#B84500; /* ---- Neutrals ---- */ --white:#FFFFFF; --ink-50:#F6F8FA; --ink-100:#EDF1F5; --ink-200:#DEE4EB; --ink-300:#C4CDD7; --ink-400:#9AA5B1; --ink-500:#6B7682; --ink-600:#4B545E; --ink-700:#333B43; --ink-800:#20262C; --ink-900:#14181C; --black:#000000; /* ---- Feedback ---- */ --green-50:#E9F7EF; --green-500:#1E9E5A; --green-600:#168049; --amber-50:#FFF6E5; --amber-500:#F5A300; --amber-600:#C98300; /* ---- Semantic aliases ---- */ --brand-primary:var(--red-500); --brand-primary-ink:var(--red-600); --brand-secondary:var(--blue-500); --brand-accent:var(--orange-500); --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --text-subtle:var(--ink-400); --text-on-brand:var(--white); --text-link:var(--blue-500); --text-link-hover:var(--blue-600); --surface-page:var(--white); --surface-subtle:var(--ink-50); --surface-card:var(--white); --surface-inverse:var(--blue-800); --surface-accent:var(--orange-500); --surface-brand:var(--red-500); --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--blue-500); --focus-ring:var(--blue-400); /* ---- Typography ---- */ --font-display:"Oswald","Arial Narrow",Arial,sans-serif; --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --text-display:clamp(2.75rem,6vw,5rem); --text-h1:clamp(2rem,4vw,3rem); --text-h2:clamp(1.625rem,3vw,2.25rem); --text-h3:1.375rem; --text-h4:1.125rem; --text-lead:1.25rem; --text-base:1rem; --text-sm:0.875rem; --text-xs:0.75rem; --text-eyebrow:0.8125rem; --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.55; --leading-relaxed:1.7; --tracking-display:-0.01em; --tracking-tight:-0.005em; --tracking-eyebrow:0.14em; --tracking-wide:0.04em; /* ---- Spacing & layout ---- */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem; --container-max:1200px; --container-narrow:800px; --gutter:1.5rem; --section-y:clamp(3rem,7vw,6rem); --aside-width:320px; /* ---- Effects ---- */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:32px; --radius-pill:999px; --radius-hero:48px 48px 0 64px; --shadow-xs:0 1px 2px rgba(10,47,68,.06); --shadow-sm:0 2px 8px rgba(10,47,68,.08); --shadow-md:0 8px 24px rgba(10,47,68,.10); --shadow-lg:0 18px 48px rgba(10,47,68,.14); --shadow-brand:0 10px 30px rgba(237,30,38,.28); --border-width:1px; --border-width-bold:2px; --ring:0 0 0 3px rgba(47,136,182,.4); --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:.15s; --dur-base:.25s; --dur-slow:.4s; } /* ============================================================ 2. RESET & BASE ============================================================ */ *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { margin:0; font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--text-body); background:var(--surface-page); min-height:100vh; display:flex; flex-direction:column; } img { max-width:100%; height:auto; } a { color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); } a:hover { color:var(--text-link-hover); } :focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); } .sm-skip-link { position:absolute; left:-999px; top:0; z-index:200; background:var(--blue-800); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0; } .sm-skip-link:focus { left:0; color:#fff; } /* ============================================================ 3. LAYOUT PRIMITIVES ============================================================ */ .sm-container { max-width:var(--container-max); margin:0 auto; padding-left:24px; padding-right:24px; } .sm-page { flex:1 0 auto; display:flex; flex-direction:column; } .sm-main { padding:44px 24px 80px; } .sm-body { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; } @media (min-width:1000px) { .sm-body { grid-template-columns:minmax(0,1fr) var(--aside-width); gap:56px; } .sm-body[data-full="true"] { grid-template-columns:minmax(0,1fr); } .sm-aside { align-self:start; } } .sm-content { min-width:0; display:flex; flex-direction:column; gap:40px; } .sm-aside { min-width:0; display:flex; flex-direction:column; gap:20px; } /* ============================================================ 4. HEADER ============================================================ */ .sm-header { position:sticky; top:0; z-index:40; } /* Top bar */ .sm-topbar { background:var(--blue-800); color:rgba(255,255,255,.82); font-size:12.5px; } .sm-topbar__inner { max-width: var(--container-max); margin: 0 auto; padding: 7px 24px; display: flex; align-items: flex-start; /* menu przy górnej linii tekstu */ flex-wrap: nowrap; /* nie pozwól menu spaść pod spód */ gap: 8px 16px; } .sm-topbar__info { flex: 1 1 auto; min-width: 0; } /* tekst bierze resztę i zawija się u siebie */ .sm-topbar__links { margin-left: auto; } @media (max-width: 580px) { .sm-topbar__info { display: none; } } .sm-topbar a { color:inherit; } .sm-topbar a:hover { color:#fff; } .sm-topbar .mod-menu { list-style:none; margin:0; padding:0; display:flex; gap:18px; } .sm-topbar .mod-menu a { font-size:12.5px; } /* Nav bar */ .sm-navbar { background:#fff; border-bottom:1px solid var(--border-subtle); } .sm-navbar__inner { max-width:var(--container-max); margin:0 auto; /* padding:14px 24px; */ display:flex; align-items:center; gap:24px; flex-wrap:wrap; } /* Logo */ .sm-logo { text-decoration:none; line-height:.9; display:flex; flex-direction:column; } .sm-logo__title { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:25px; text-transform:uppercase; letter-spacing:-.01em; color:var(--blue-800); } .sm-logo__title em { font-style:normal; color:var(--red-500); } .sm-logo__tag { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--text-muted); margin-top:3px; } .sm-logo img { display:block; max-height:92px; width:auto; } /* Primary navigation */ .sm-nav { margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:wrap; } .sm-nav .mod-menu { list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center; flex-wrap:wrap; } .sm-nav .mod-menu > li { position:relative; } .sm-nav .mod-menu a, .sm-nav .mod-menu span.nav-header, .sm-nav .mod-menu .separator { display:block; font-size:14px; font-weight:var(--fw-medium); color:var(--text-body); padding:8px 12px; border-radius:8px; transition:background var(--dur-fast) var(--ease-out); } .sm-nav .mod-menu a:hover, .sm-nav .mod-menu .current > a, .sm-nav .mod-menu .active > a { background:var(--ink-100); color:var(--text-strong); } /* Dropdown submenus (if a menu module outputs nested lists) */ .sm-nav .mod-menu ul { list-style:none; margin:0; padding:6px; position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); display:none; flex-direction:column; gap:2px; z-index:50; } .sm-nav .mod-menu li:hover > ul { display:flex; } .sm-nav .mod-menu ul a { font-weight:var(--fw-regular); } /* CTA button in header */ .sm-cta { margin-left:8px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--red-500); padding:11px 22px; border-radius:var(--radius-pill); border:2px solid transparent; transition:background var(--dur-fast) var(--ease-out); } .sm-cta:hover { background:var(--red-600); color:#fff; } /* Mobile toggle */ .sm-nav-toggle { display:none; margin-left:auto; background:transparent; border:0; cursor:pointer; width:44px; height:44px; align-items:center; justify-content:center; color:var(--blue-800); font-size:22px; border-radius:var(--radius-sm); } .sm-nav-toggle:hover { background:var(--ink-100); } @media (max-width: 860px) { .sm-nav-toggle { display: inline-flex; margin-left: auto; } /* logo lewo, hamburger przy prawej krawędzi, jedna linia */ .sm-navbar__inner { flex-wrap: wrap; align-items: center; gap: 0; } /* logo mniejsze, żeby mieściło się z hamburgerem nawet na małych telefonach */ .sm-logo__title { font-size: 20px; } .sm-logo__tag { font-size: 10px; letter-spacing: .18em; } /* menu = panel pełnej szerokości POD paskiem */ .sm-nav { order: 3; flex-basis: 100%; width: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out); } .sm-header.is-open .sm-nav { max-height: 80vh; overflow: auto; } .sm-nav .mod-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin-top: 10px; } .sm-nav .mod-menu > li { width: 100%; } /* pełnej szerokości, klikalne wiersze z separatorami */ .sm-nav .mod-menu a, .sm-nav .mod-menu span.nav-header, .sm-nav .mod-menu .separator { display: block; width: 100%; padding: 14px 6px; border-radius: 0; border-top: 1px solid var(--border-subtle); font-size: 16px; } .sm-nav .mod-menu > li:last-child a { border-bottom: 1px solid var(--border-subtle); } /* zagnieżdżone podmenu (gdyby były) */ .sm-nav .mod-menu ul { position: static; box-shadow: none; border: 0; padding-left: 16px; display: flex; flex-direction: column; } .sm-cta { margin: 14px 0 4px; justify-content: center; width: 100%; } } /* ============================================================ 5. HERO / BANNER (full-width module position) ============================================================ */ .sm-hero { max-width:var(--container-max); margin:0 auto; padding:28px 24px 0; width:100%; } .sm-hero img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); } .sm-hero .sm-imgph { background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 11px), linear-gradient(135deg,var(--blue-600),var(--blue-400)); border-radius:var(--radius-lg); aspect-ratio:1200/300; } /* ============================================================ 6. BREADCRUMBS ============================================================ */ .sm-breadcrumbs { max-width:var(--container-max); margin:0 auto; padding:18px 24px 0; } .sm-breadcrumbs .breadcrumb, .sm-breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; font-size:13px; color:var(--text-muted); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; } .sm-breadcrumbs li + li::before { content:"›"; margin-right:8px; color:var(--text-subtle); } .sm-breadcrumbs a { color:var(--text-muted); } .sm-breadcrumbs a:hover { color:var(--red-500); } /* ============================================================ 7. SIDEBAR CARDS (module chrome "sm-card") ============================================================ */ .sm-card { background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:24px; } .sm-card__title { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:1.15rem; font-weight:var(--fw-semibold); color:var(--blue-700); margin:0 0 16px; } .sm-card__body > *:first-child { margin-top:0; } .sm-card__body > *:last-child { margin-bottom:0; } /* Accent variant (e.g. newsletter tile) — add Module Class Suffix " sm-card--accent" */ .sm-card--accent { background:var(--orange-500); border-color:transparent; color:#fff; } .sm-card--accent .sm-card__title, .sm-card--accent a { color:#fff; } .sm-card--accent:hover { background:var(--orange-600); } .sm-card--inverse { background:var(--blue-800); border-color:transparent; color:#fff; } .sm-card--inverse .sm-card__title { color:#fff; } /* Social icon row helper (use inside a Custom HTML module) */ .sm-social { display:flex; gap:10px; flex-wrap:wrap; } .sm-social a { width:42px; height:42px; border-radius:50%; background:var(--blue-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; transition:background var(--dur-fast) var(--ease-out); } .sm-social a:hover { background:var(--blue-600); color:#fff; } /* ============================================================ 8. FOOTER ============================================================ */ .sm-footer { flex-shrink:0; background:var(--blue-900); color:rgba(255,255,255,.72); } .sm-footer__top { max-width:var(--container-max); margin:0 auto; padding:52px 24px 28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; } .sm-footer__brand { grid-column:1/-1; max-width:340px; } .sm-footer__logo { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:23px; text-transform:uppercase; color:#fff; line-height:1; } .sm-footer__logo em { font-style:normal; color:var(--red-400); } .sm-footer__about { font-size:13.5px; line-height:1.6; margin:14px 0 0; } .sm-footer__social { display:flex; gap:10px; margin-top:16px; } .sm-footer__social a { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:background var(--dur-fast) var(--ease-out); } .sm-footer__social a:hover { background:rgba(255,255,255,.2); color:#fff; } .sm-footer__col .mod-menu, .sm-footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px; } .sm-footer__col a { color:inherit; } .sm-footer__col a:hover { color:#fff; } /* Footer module titles */ .sm-footer__top .moduletitle, .sm-footer__top h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:#fff; margin:0 0 14px; } .sm-footer__bottom { border-top:1px solid rgba(255,255,255,.12); } .sm-footer__bottom-inner { max-width:var(--container-max); margin:0 auto; padding:16px 24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } /* ============================================================ 9. CONTENT TYPOGRAPHY (articles / com_content / modules) Applies inside .sm-content so user-authored article HTML automatically inherits the brand look. ============================================================ */ .sm-content .eyebrow, .sm-content .sm-eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:13px; font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.14em; color:var(--red-500); } .sm-content .sm-eyebrow::before { content:""; width:28px; height:3px; border-radius:2px; background:currentColor; } .sm-content h1, .sm-content h2, .sm-content h3, .sm-content h4 { font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase; color:var(--blue-400); line-height:var(--leading-snug); margin:0 0 .5em; } .sm-content h1 { font-size:var(--text-h1); } .sm-content h2 { font-size:var(--text-h2); margin-top:0; } .sm-content h3 { font-size:var(--text-h3); } .sm-content h4 { font-size:var(--text-h4); letter-spacing:.02em; } .sm-content p { margin:0 0 1.1rem; font-size:1.05rem; line-height:1.75; } .sm-content p.lead, .sm-content .lead { font-size:var(--text-lead); color:var(--text-strong); font-weight:var(--fw-semibold); line-height:1.5; } .sm-content a { color:var(--text-link); text-decoration:underline; text-underline-offset:2px; } .sm-content a:hover { color:var(--text-link-hover); } .sm-content ul, .sm-content ol { margin:0 0 1.1rem; padding-left:1.4rem; line-height:1.7; } .sm-content li { margin-bottom:.4rem; } /*.sm-content img { border-radius:var(--radius-md); }*/ .sm-content hr { border:0; border-top:1px solid var(--border-subtle); margin:2.5rem 0; } .sm-content blockquote { margin:2rem 0; padding:28px 36px; border-left:4px solid var(--red-500); background:var(--ink-50); border-radius:0 var(--radius-md) var(--radius-md) 0; } .sm-content blockquote p { margin:0; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.55rem; line-height:1.3; color:var(--blue-800); } .sm-content blockquote cite { display:block; margin-top:14px; font-style:normal; font-size:14px; color:var(--text-muted); } /* Tables */ .sm-content table { width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.95rem; } .sm-content th, .sm-content td { padding:12px 16px; border-bottom:1px solid var(--border-subtle); text-align:left; } .sm-content thead th { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:13px; color:var(--blue-800); background:var(--ink-50); } .sm-content tbody tr:hover { background:var(--ink-50); } /* Media embeds keep aspect ratio */ .sm-content iframe { max-width:100%; border-radius:var(--radius-lg); } /* ============================================================ 10. REUSABLE COMPONENTS (opt-in classes for Custom HTML modules/articles) ============================================================ */ /* Buttons */ .sm-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.04em; font-size:14px; padding:12px 26px; border-radius:var(--radius-pill); border:2px solid transparent; cursor:pointer; text-decoration:none; transition:all var(--dur-fast) var(--ease-out); } .sm-btn--primary { background:var(--red-500); color:#fff; } .sm-btn--primary:hover { background:var(--red-600); color:#fff; } .sm-btn--secondary { background:var(--blue-500); color:#fff; } .sm-btn--secondary:hover { background:var(--blue-600); color:#fff; } .sm-btn--accent { background:var(--orange-500); color:#fff; } .sm-btn--accent:hover { background:var(--orange-600); color:#fff; } .sm-btn--ghost { background:transparent; color:var(--blue-700); border-color:var(--blue-300); } .sm-btn--ghost:hover { border-color:var(--red-500); color:var(--red-500); } /* Pills / badges */ .sm-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12px; letter-spacing:.03em; padding:3px 11px; border-radius:var(--radius-pill); background:var(--orange-50); color:var(--orange-700); } .sm-badge--blue { background:var(--blue-50); color:var(--blue-700); } .sm-badge--red { background:var(--red-50); color:var(--red-600); } /* Card grid (e.g. list of cities / links) */ .sm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px; } .sm-tile { text-decoration:none; background:#fff; border:2px solid var(--blue-200); border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:8px; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .sm-tile:hover { border-color:var(--red-500); box-shadow:var(--shadow-md); } .sm-tile__title { font-family:var(--font-display); text-transform:uppercase; font-weight:var(--fw-semibold); font-size:1.15rem; color:var(--blue-800); line-height:1.1; } .sm-tile__meta { font-size:12.5px; color:var(--text-muted); line-height:1.35; } /* Stat block on dark background */ .sm-section--dark { background:var(--blue-800); border-radius:var(--radius-xl); padding:48px; color:#fff; } .sm-section--dark h2, .sm-section--dark h3 { color:#fff; } .sm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:28px; } .sm-stat__value { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(2.2rem,4vw,3rem); line-height:.95; color:#fff; display:block; } .sm-stat__label { font-size:13.5px; font-weight:var(--fw-semibold); color:rgba(255,255,255,.72); } /* ============================================================ 11. JOOMLA SYSTEM MESSAGES ============================================================ */ #system-message-container { display: none; } .alert { border-radius:var(--radius-md); padding:14px 18px; margin-bottom:12px; border:1px solid var(--border-subtle); background:#fff; font-size:.95rem; display:flex; align-items:flex-start; gap:10px; } .alert-success { background:var(--green-50); border-color:var(--green-500); color:var(--green-600); } .alert-info { background:var(--blue-50); border-color:var(--blue-300); color:var(--blue-700); } .alert-warning { background:var(--amber-50); border-color:var(--amber-500); color:var(--amber-600); } .alert-danger, .alert-error { background:var(--red-50); border-color:var(--red-400); color:var(--red-600); } .alert .alert-heading { font-weight:var(--fw-bold); } button.btn-close, .alert .close { margin-left:auto; background:transparent; border:0; font-size:18px; cursor:pointer; color:inherit; opacity:.6; } button.btn-close:hover { opacity:1; } /* ============================================================ 12. UTILITIES ============================================================ */ .sm-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .sm-mt-0 { margin-top:0 !important; } .sm-mb-0 { margin-bottom:0 !important; } .sm-text-center { text-align:center; } /* ============================================================ 13. RESPONSIVE FINE-TUNING ============================================================ */ @media (max-width:720px) { .sm-main { padding:28px 20px 56px; } .sm-container, .sm-topbar__inner, .sm-navbar__inner, .sm-hero, .sm-breadcrumbs, .sm-footer__top, .sm-footer__bottom-inner { padding-left:20px; padding-right:20px; } .sm-section--dark { padding:32px 24px; } .sm-content blockquote { padding:20px 22px; } .sm-content blockquote p { font-size:1.25rem; } } p:empty { margin: 0; } #privacy-settings { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } /* ============================================================ SALON SUBMENU — pasek zakładek (Joomla mod_menu) Sufiks klasy modułu: "salon-submenu". Spłaszcza zagnieżdżone pozycje do jednego rzędu. Desktop: jeden rząd zakładek (gdy zabraknie miejsca — przewijanie poziome zamiast łamania). Mobile: siatka kafelków 2 kolumny. ============================================================ */ .salon-submenu { margin:22px 0 0; padding:6px; list-style:none; display:flex; flex-wrap:nowrap; /* było: wrap — stąd poszarpane rzędy */ gap:4px; border:1px solid var(--border-subtle); background:#fff; border-radius:var(--radius-pill); /* przewijanie poziome zamiast łamania */ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; scroll-snap-type:x proximity; scroll-padding-inline:6px; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* stary Edge */ } .salon-submenu::-webkit-scrollbar { display:none; } /* WebKit / Blink */ /* Flatten: dissolve every
  • and nested