/* ========================================================= Lynks — Editorial Premium Drogerie Static HTML/CSS/JS · matched-white gallery float system ========================================================= */ :root { /* --- palette --- */ --bg: #f7f5f4; --canvas: #f8f6f5; /* near-white gallery canvas */ --surface: #ffffff; --ink: #1c1517; /* warm near-black (logo wordmark) */ --ink-2: #3c3033; --muted: #7b6f70; --line: #ebe4e3; --line-soft: #f3eeed; /* Lynks brand red — deep, NOT neon (logo mark is brighter red). Token names kept as green/mint/yellow so all rules inherit. */ --green-900: #6f1620; /* darkest wine — footer/promobar bg, dark text */ --green-800: #9e1b26; /* deep brand red — primary CTA */ --green-700: #b52230; --green-500: #c8404b; --mint-600: #b81f2b; /* accent red */ --mint-500: #c62230; --mint-300: #f2c0c4; /* light red tint — borders / success bg */ /* badge / hit accent red — pair with WHITE text */ --yellow: #c62230; --yellow-600: #a81f2a; --star: #f5b301; /* review stars stay gold — rating convention */ /* --- form / metrics --- */ --radius: 20px; --radius-sm: 14px; --radius-lg: 28px; --radius-pill: 999px; --radius-card: 13px; /* crisper structural surfaces (editorial) */ --shadow-sm: 0 2px 10px rgba(50, 18, 22, .06); --shadow: 0 20px 50px -24px rgba(50, 18, 22, .30); --shadow-lg: 0 44px 90px -34px rgba(50, 18, 22, .42); --float-shadow: 0 40px 55px -30px rgba(50, 18, 22, .34); --ring: 0 0 0 4px rgba(198, 34, 48, .28); --container: 1220px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Unbounded", var(--font); --nums: "Manrope", system-ui, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); --dur: .24s; } /* --- reset & base --- */ * { box-sizing: border-box; } /* overflow-x must sit on too: body alone doesn't stop the off-canvas drawer (transform: translateX(105%)) from widening the scroll area. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--canvas); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; color: inherit; } input, select, textarea { font-family: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -.02em; font-family: var(--display); } ul { margin: 0; padding: 0; list-style: none; } .container { width: min(100% - 40px, var(--container)); margin-inline: auto; } .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; } /* focus visibility — green-700 clears 3:1 on light surfaces */ :focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; border-radius: 6px; } /* on dark surfaces use yellow so the focus ring keeps >=3:1 contrast */ .promobar :focus-visible, .whyband :focus-visible, .footer :focus-visible { outline-color: var(--yellow); } /* --- shared eyebrow / section head --- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green-500); } .section { padding: clamp(52px, 8vw, 108px) 0; } .section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 48px); } .section-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.25rem); margin: 14px 0 12px; letter-spacing: -.03em; } .section-head h2 .hl { color: var(--green-700); } .section-head p { font-family: var(--font); color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); margin: 0; } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 26px; border-radius: var(--radius-pill); border: 0; font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: -.01em; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; min-height: 48px; } .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--green-800); color: #f5f8f2; box-shadow: 0 16px 30px -16px rgba(120, 22, 30, .85); } .btn-primary:hover { background: var(--green-700); transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(120, 22, 30, .9); } .btn-outline { background: transparent; color: var(--ink); border: 1.6px solid var(--line); } .btn-outline:hover { border-color: var(--green-700); color: var(--green-700); transform: translateY(-2px); } .btn-block { width: 100%; white-space: normal; text-align: center; } /* ========================================================= PROMO BAR ========================================================= */ .promobar { background: var(--green-800); color: #eafff4; font-size: 13.5px; font-weight: 600; overflow: hidden; } .promobar.is-hidden { display: none; } .promobar-inner { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .promobar-list { display: flex; align-items: center; justify-content: center; gap: 26px; flex: 1; flex-wrap: wrap; } .promobar-list { flex-wrap: nowrap; overflow: hidden; gap: 22px; } .promobar-list li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .promobar-list b { color: var(--star); font-weight: 800; } /* the −7% offer is the strongest hook: it survives the narrowest bar */ @media (max-width: 1100px) { .promobar-list li:nth-child(2) { display: none; } } @media (max-width: 820px) { .promobar-list li:nth-child(1) { display: none; } } .promobar svg { width: 17px; height: 17px; fill: none; stroke: var(--mint-300); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .promobar-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: transparent; border: 0; border-radius: 50%; transition: background var(--dur); } .promobar-close:hover { background: rgba(255, 255, 255, .18); } .promobar-close svg { width: 16px; height: 16px; stroke: #eafff4; } @media (max-width: 720px) { .promobar-list { gap: 14px; font-size: 12.5px; } } /* ========================================================= HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(247, 249, 246, .78); backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); } .site-header.is-scrolled { border-color: var(--line); background: rgba(247, 249, 246, .94); box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; gap: 20px; padding: 12px 20px; } .site-header .container.container { width: min(100% - 40px, var(--container)); } .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; flex: none; } .brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; } .brand-mark img { width: 46px; height: 46px; object-fit: cover; display: block; } .brand-name { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: .01em; line-height: 1.05; } .brand-name small { display: block; font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; text-transform: none; } .nav { display: flex; gap: 2px; margin-left: 10px; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14.5px; color: var(--ink-2); transition: background var(--dur), color var(--dur); } .nav a:hover { background: var(--line-soft); color: var(--green-700); } /* Category dropdown: click the label, a panel of its subcategories drops down — one click deeper than the old plain nav link, same depth competitor mega-menus give. position:relative on .nav-item anchors the absolutely-positioned panel. .nav-link/.nav-drop-item are