/* ============================================================ druoutlet — layout chrome + page styles ============================================================ */ /* ---------------- HEADER ---------------- */ .hdr { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--line); } .hdr.scrolled { box-shadow: var(--shadow-sm); } .hdr-top-inner { display: flex; align-items: center; gap: 22px; padding: 16px 0; } .hdr-burger { display: none; background: none; border: 0; color: var(--ink); padding: 6px; margin-left: -6px; } .wm-link { display: inline-flex; flex-direction: column; gap: 4px; flex: none; } .wm-link .wordmark { font-size: 25px; } .hdr-search-wrap { flex: 1; max-width: 640px; } .hdr-actions { display: flex; align-items: center; gap: 8px; flex: none; } .hdr-action { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); padding: 4px 6px; position: relative; } .hdr-action-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .hdr-action:hover .hdr-action-label { color: var(--ink); } .hdr-action .icon-btn { border: 0; width: 40px; height: 40px; } .hdr-action:first-child { color: var(--ink); } .hdr-action:first-child > svg { margin-bottom: 0; } /* search */ /* scoped to form.search — WordPress puts class="search" on for search results, which would otherwise inherit these (flex/border/height) and break the whole page. */ form.search { display: flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--surface); overflow: visible; height: 50px; position: relative; } form.search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .search-cat { position: relative; flex: none; } .search-cat-btn { display: flex; align-items: center; gap: 7px; height: 100%; background: var(--surface-2); border: 0; border-right: 1px solid var(--line-2); border-radius: var(--r-pill) 0 0 var(--r-pill); padding: 0 16px 0 20px; font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; } .search-cat-btn:hover { background: var(--surface-3); } .search-cat-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; z-index: 70; display: flex; flex-direction: column; gap: 2px; } .search-cat-menu button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); } .search-cat-menu button:hover { background: var(--surface-2); color: var(--ink); } .search-cat-menu button.on { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 8%, transparent); } .search-input { flex: 1; border: 0; background: none; padding: 0 16px; font-size: 15px; font-family: inherit; color: var(--ink); outline: none; min-width: 60px; } .search-go { flex: none; width: 56px; border: 0; margin: 4px; border-radius: var(--r-pill); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .search-go:hover { background: var(--accent-press); } /* nav row */ .hdr-nav { border-top: 1px solid var(--line); background: var(--surface); } .hdr-nav-inner { display: flex; align-items: center; gap: 6px; height: 52px; } .nav-all { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); padding: 9px 18px; font-weight: 700; font-size: 14px; flex: none; } .nav-all:hover { background: oklch(0.32 0.05 264); } .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 8px; } .nav-links a { padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: 14.5px; color: var(--ink-2); } .nav-links a:hover { background: var(--surface-2); color: var(--ink); } .nav-deals { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); font-weight: 800; font-size: 14.5px; flex: none; padding: 8px 12px; } .nav-deals:hover { color: var(--accent); } .hdr-search-mobile { display: none; padding-bottom: 14px; } /* ---------------- DRAWER ---------------- */ .drawer-scrim { position: fixed; inset: 0; background: rgba(15,22,45,.45); z-index: 100; animation: fadeIn .2s ease; } .drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 360px); background: var(--surface); display: flex; flex-direction: column; animation: slideIn .25s ease; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: none; } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px; border-bottom: 1px solid var(--line); } .drawer-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .drawer-section { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 16px 12px 8px; } .drawer-link { display: flex; align-items: center; gap: 12px; background: none; border: 0; text-align: left; padding: 13px 12px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; color: var(--ink); } .drawer-link:hover { background: var(--surface-2); } .drawer-link.deal { color: var(--accent-ink); margin-top: 6px; } /* ---------------- FOOTER ---------------- */ .ftr { background: var(--surface); border-top: 1px solid var(--line); margin-top: 40px; } .ftr-trust { background: var(--surface-2); border-bottom: 1px solid var(--line); } .ftr-trust-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 26px 24px; } .ftr-trust-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink); } .ftr-trust-item svg { color: var(--accent); flex: none; } .ftr-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 48px 24px; } .ftr-brand { max-width: 340px; } .ftr-brand .wm-link { margin-bottom: 16px; } .ftr-blurb { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin: 0 0 18px; } .ftr-contact { display: flex; flex-direction: column; gap: 10px; } .ftr-contact a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink); } .ftr-contact a:hover { color: var(--accent-ink); } .ftr-col h4 { font-size: 13px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 500; } .ftr-col a { display: block; padding: 7px 0; color: var(--ink-2); font-size: 14.5px; font-weight: 500; } .ftr-col a:hover { color: var(--accent-ink); } .ftr-bottom { border-top: 1px solid var(--line); } .ftr-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; flex-wrap: wrap; } .ftr-bottom .muted { font-size: 12.5px; } .ftr-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; order: 3; } .ftr-legal a { font-size: 12.5px; color: var(--ink-2); } .ftr-legal a:hover { color: var(--accent); } .pay-row { display: flex; gap: 8px; flex-wrap: wrap; } .pay-chip { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 9px; background: var(--surface); } /* ============================================================ HOME ============================================================ */ .hero { padding: 40px 0 8px; } .hero-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 20px; } .hero-main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(120% 120% at 85% 10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%), linear-gradient(160deg, var(--ink) 0%, oklch(0.30 0.06 264) 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; } .hero-main .eyebrow { color: color-mix(in srgb, var(--accent) 80%, white); } .hero-h { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 16px 0 14px; max-width: 14ch; } .hero-sub { color: oklch(0.86 0.02 264); font-size: 17px; line-height: 1.5; max-width: 42ch; margin: 0 0 26px; } .hero-deal-card { display: flex; align-items: center; gap: 22px; background: color-mix(in srgb, #fff 8%, transparent); border: 1px solid color-mix(in srgb, #fff 16%, transparent); border-radius: var(--r-lg); padding: 18px; backdrop-filter: blur(6px); } .hero-deal-card .ph { width: 130px; flex: none; border-radius: var(--r); background: rgba(255,255,255,.08); } .hero-deal-card .ph-glyph { color: rgba(255,255,255,.55); } .hero-deal-card .ph-label { color: rgba(255,255,255,.5); } .hero-deal-info { flex: 1; min-width: 0; } .hero-deal-info .dt { font-weight: 700; font-size: 15.5px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hero-price .now { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; } .hero-price .now .cur { font-size: 0.55em; } .hero-price .old { text-decoration: line-through; color: rgba(255,255,255,.55); font-weight: 600; } .hero-price .eur { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.7); width: 100%; margin-top: 4px; } .hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; } /* One tile only → it fills the whole side column (no half-height gap). */ .hero-side--solo { grid-template-rows: 1fr; } /* No tiles → hero headline card spans the full width. */ .hero-grid--full { grid-template-columns: 1fr; } .promo-tile { border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); position: relative; overflow: hidden; min-height: 0; } .promo-tile.accent { background: var(--accent); color: #fff; border-color: transparent; } .promo-tile.soft { background: var(--surface-2); } .promo-tile h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.1; } .promo-tile p { margin: 0; font-size: 14.5px; opacity: .85; line-height: 1.45; } .promo-tile .promo-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; margin-top: 16px; font-size: 14.5px; } .promo-tile.accent .promo-cta { color: #fff; } .promo-tile.soft .promo-cta { color: var(--accent-ink); } .promo-tile .big-pct { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; } /* category tiles */ .cat-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .cat-tile { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; transition: border-color .18s, box-shadow .18s, transform .18s; } .cat-tile:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); } .cat-ic { width: 52px; height: 52px; border-radius: var(--r); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink); } .cat-tile:hover .cat-ic { background: var(--accent); color: #fff; } .cat-tile h3 { margin: 0; font-size: 17px; font-weight: 700; } .cat-tile p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); } .cat-tile .cat-count { margin-top: auto; font-family: var(--mono); font-size: 12px; color: var(--accent-ink); font-weight: 600; } /* newsletter */ .news { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; overflow: hidden; position: relative; } .news::after { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); } .news h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 10px; position: relative; } .news p { color: oklch(0.86 0.02 264); font-size: 16px; margin: 0; position: relative; } .news-form { display: flex; gap: 10px; position: relative; } .news-form .input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; } .news-form .input::placeholder { color: rgba(255,255,255,.6); } .news-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); margin-bottom: 16px; position: relative; } /* deals strip header */ .deal-strip-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .deal-strip-head .tickbox { background: var(--accent); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 8px; }