/* ========================================================================== 15minute.md – UI kit (Light & Dark) v2025.03.12 Design goals: - Clean, Google-like spacing & rhythm - Consistent buttons (2–3px radius), minimal chrome - Fast, readable type; premium feel without heavy webfonts - Works with prefers-color-scheme + optional [data-theme] override - Robust mega-menu + typeahead dropdown (mouse friendly) - Compact “bricks” grid for recipes; images are correctly cropped ========================================================================== */ /* ---------------------------- Variables ---------------------------------- */ :root { /* Brand */ --brand: #16a34a; /* primary accent (green) */ --brand-ink: #0b5c28; /* pressed state / outline */ /* Base (Dark by default) */ --bg: #0b0c10; --bg-2: #0f1115; --text: #eaeef3; --text-weak: #c7ccd3; --text-dim: #98a1ab; --ink: #0d0f12; /* Cards / controls */ --card-bg: #0f1216; --card-border: #1c2230; --hover-bg: rgba(255,255,255,.06); --focus: rgba(22, 163, 74, .55); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 10px 24px rgba(0,0,0,.35); --shadow-lg: 0 26px 60px rgba(0,0,0,.45); /* Radii */ --r-sm: 3px; --r-md: 6px; --r-lg: 10px; /* Layout */ --container: 960px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; /* Overlay text color (can be flipped via .on-light / .ink-light) */ --overlay-ink: #ffffff; } /* Forced theme overrides (optional toggler sets data-theme on ) */ html[data-theme="light"] { --bg: #ffffff; --bg-2: #fafafa; --text: #0e1013; --text-weak: #1f2328; --text-dim: #60656f; --ink: #0b0c10; --card-bg: #ffffff; --card-border: #e6e8eb; --hover-bg: #f4f6f8; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 12px 28px rgba(0,0,0,.10); --shadow-lg: 0 28px 60px rgba(0,0,0,.12); } /* Sync with system preference if no explicit theme chosen */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #ffffff; --bg-2: #fafafa; --text: #0e1013; --text-weak: #1f2328; --text-dim: #60656f; --ink: #0b0c10; --card-bg: #ffffff; --card-border: #e6e8eb; --hover-bg: #f4f6f8; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 12px 28px rgba(0,0,0,.10); --shadow-lg: 0 28px 60px rgba(0,0,0,.12); } } /* ------------------------------ Reset ------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas, audio { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } b, strong { font-weight: 700; } button { font: inherit; } input, button, textarea { color: inherit; } /* Visually-hidden (for a11y helpers) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link – hidden until focus */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: var(--r-sm); z-index: 2000; box-shadow: var(--shadow-sm); } /* ------------------------------ Layout ----------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: var(--space-5); } @supports(padding: max(0px)) { .container { padding-left: max(var(--space-5), env(safe-area-inset-left)); padding-right: max(var(--space-5), env(safe-area-inset-right)); } } h1, h2, h3 { margin: var(--space-4) 0 var(--space-2); line-height: 1.2; } h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(20px, 2.8vw, 24px); font-weight: 800; letter-spacing: -0.01em; } /* ------------------------------ Header ----------------------------------- */ .site-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: saturate(120%) blur(8px); border-bottom: 1px solid var(--card-border); } .hdr__wrap { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; } .hdr__brand { display:flex; align-items:center; gap: var(--space-2); margin-right: var(--space-3); } .logo { font-weight: 900; letter-spacing: .2px; } .logo span { color: var(--brand); } .main-nav { display:flex; align-items:center; gap: var(--space-2); } .main-nav a, .nav-link { padding: 8px 10px; border-radius: var(--r-sm); color: var(--text-dim); } .main-nav a:hover, .nav-link:hover, .main-nav a:focus-visible, .nav-link:focus-visible { background: var(--hover-bg); color: var(--text-weak); outline: none; } .hdr__actions { margin-left: auto; display:flex; gap: var(--space-2); } .btn, .hdr__btn { --_bg: var(--card-bg); --_br: var(--card-border); background: var(--_bg); color: var(--text); border: 1px solid var(--_br); padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .06s ease; } .btn:hover, .hdr__btn:hover { background: color-mix(in oklab, var(--_bg), #fff 3%); border-color: color-mix(in oklab, var(--_br), #fff 10%); } .btn:active, .hdr__btn:active { transform: scale(.99); } .btn--primary { --_bg: color-mix(in oklab, var(--brand), #000 10%); --_br: color-mix(in oklab, var(--brand), #000 20%); } .btn--ghost { --_bg: transparent; --_br: var(--card-border); color: var(--text-weak); } .hdr__burger { display:none; background:transparent; border:1px solid var(--card-border); border-radius: var(--r-sm); padding: 6px 10px; color: var(--text) } /* Mega dropdown */ .nav-dropdown { position: relative; } .nav-dropdown .mega { position: absolute; left: 0; top: 100%; margin-top: 10px; min-width: 560px; max-width: 80vw; background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 16px; display: none; z-index: 1100; } .nav-dropdown.open .mega { display: block; } .mega__grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px 24px; } .mega__item { display:block; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent; } .mega__item:hover { background: var(--hover-bg); border-color: var(--card-border); } .mega__title { font-weight: 800; color: var(--text-weak); } .mega__sub { display:block; opacity:.9; font-size: 13px; color: var(--text-dim); margin-top: 2px; } .mega__footer { border-top: 1px solid var(--card-border); margin-top: 12px; padding-top: 12px; text-align: right; } .mega__all { color: var(--text-weak); } .mega__all:hover { color: var(--text); } @media (max-width: 840px) { .main-nav { display:none; } .hdr__burger { display:inline-block; } .nav-panel { display:block; } } /* Mobile panel */ .nav-panel { display:none; position: fixed; inset: 56px 0 auto 0; background: var(--bg-2); border-bottom: 1px solid var(--card-border); padding: 12px 24px; box-shadow: var(--shadow-md); z-index: 1050; } .nav-panel[hidden] { display:none; } .nav-panel a { display:block; padding: 10px 0; color: var(--text-weak); border-bottom: 1px solid color-mix(in oklab, var(--card-border), transparent); } .nav-panel details { padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--card-border), transparent); } .panel__cats a { padding: 6px 0 6px 14px; display:block; } /* --------------------------- Hero & Search ------------------------------- */ .hero { margin: 0 0 var(--space-4); padding: 8px 0; } .lang-switch a { color: var(--text-dim); text-decoration: none; margin-right: 10px; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--card-border); } .lang-switch a.active, .lang-switch a:hover { color: var(--text); border-color: color-mix(in oklab, var(--card-border), #fff 10%); background: var(--card-bg); } /* Quick search field (no visible search icon button) */ .quick-search, .search-form { position: relative; display:flex; gap: var(--space-2); align-items:center; max-width: 720px; } .quick-search input, .search-form input[type="search"]{ flex:1; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); box-shadow: inset 0 1px 0 rgba(0,0,0,.02); } .quick-search input:focus-visible, .search-form input[type="search"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .quick-search button, .search-form button { /* hide visible icon button; keep for a11y */ position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); } /* Typeahead dropdown (suggestii) */ .ta-dropdown{ position:absolute; left:0; right:0; margin-top: 8px; z-index: 1300; background: var(--card-bg); border:1px solid var(--card-border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; } .ta-dropdown:empty, .ta-dropdown[hidden], .ta-dropdown[aria-expanded="false"]{ display:none !important; } .ta-section{ padding: 8px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .38px; color: var(--text-dim); background: color-mix(in oklab, var(--card-bg), #000 4%); border-bottom: 1px solid var(--card-border); } .ta-list { display:block; max-height:420px; overflow:auto; scroll-behavior:smooth; } .ta-item { display:grid; grid-template-columns: 48px 1fr; gap: 12px; align-items:center; padding: 12px 14px; color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--card-border), transparent 40%); background: var(--card-bg); transition: background .15s ease; } .ta-item:last-child{ border-bottom: none; } .ta-item:hover, .ta-item[aria-selected="true"] { background: var(--hover-bg); } .ta-thumb { width:48px; height:48px; border-radius: var(--r-sm); overflow:hidden; background: color-mix(in oklab, var(--card-bg), #000 8%); display:flex; align-items:center; justify-content:center; } .ta-thumb img { width:100%; height:100%; object-fit: cover; } .ta-title { font-weight: 800; color: var(--text-weak); line-height: 1.2; } .ta-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; display:flex; gap:8px; align-items:center; } .ta-count { opacity: .9; } .ta-highlight { color: var(--brand); font-weight: 800; text-decoration: none; } .ta-badge { display:inline-block; padding:2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing:.15px; border: 1px solid transparent; } .ta-badge--recipe { background: #1e3a8a; color:#bfdbfe; border-color:#173b7a; } .ta-badge--ingredient{ background: #064e3b; color:#86efac; border-color:#0b6a52; } /* ← FIX: colon */ .ta-badge--tag { background: #4c1d95; color:#ddd6fe; border-color:#3d1778; } @media (prefers-color-scheme: light), html[data-theme="light"] { .ta-badge--recipe { background:#dbeafe; color:#1e3a8a; border-color:#93c5fd; } .ta-badge--ingredient{ background:#dcfce7; color:#065f46; border-color:#86efac; } .ta-badge--tag { background:#ede9fe; color:#4c1d95; border-color:#c4b5fd; } } /* --------------------------- Chips / Pills ------------------------------- */ .chips { display:flex; flex-wrap: wrap; gap: 8px; } .chip, .pill { display:inline-block; padding: 8px 12px; border:1px solid var(--card-border); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text-weak); font-size: 14px; } .chip:hover, .pill:hover { background: color-mix(in oklab, var(--card-bg), #fff 3%); } /* ---------------------------- Cards + Bricks ------------------------------ */ /* Legacy cards (search results) */ .cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; } .card { background: transparent; } .card__link { display:block; position:relative; color:inherit; } .card__media { position:relative; border-radius: var(--r-md); overflow:hidden; background: var(--card-bg); box-shadow: var(--shadow-sm); border: 1px solid var(--card-border); } /* strat suplimentar de contrast pe media (sub text) */ .card__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 80%); z-index: 1; pointer-events:none; } .card__img { width:100%; height:100%; object-fit: cover; display:block; aspect-ratio: 16/10; transform: scale(1.0001); transition: transform .35s ease; } /* --- Overlay: folosește variabila --overlay-ink (default alb). Poți forța negru cu .on-light sau .ink-light pe overlay sau părinte. --- */ .card__overlay { position:absolute; left:0; right:0; bottom:0; padding: 14px 16px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.82) 100%); color: var(--overlay-ink); z-index: 2; pointer-events: none; /* textul nu blochează click-ul pe card */ } .card__title { margin:0 0 6px; font-size:18px; line-height:1.25; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35); } .card__meta { opacity:.95; font-size:14px; display:flex; gap:6px; align-items:center; text-shadow: 0 1px 2px rgba(0,0,0,.4) } .card__link:hover .card__img, .card__link:focus-visible .card__img { transform: scale(1.04); } .card__link:focus-visible { outline: none; } .card__link:focus-visible .card__media { box-shadow: 0 0 0 2px var(--brand), var(--shadow-sm); } /* New compact bricks */ .bricks { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .brick { background: var(--card-bg); border:1px solid var(--card-border); border-radius: var(--r-sm); overflow:hidden; box-shadow: var(--shadow-sm); } .brick__link { display:block; color:inherit; text-decoration:none; } .brick__img { width:100%; aspect-ratio:16/10; object-fit: cover; display:block; } .brick__meta { padding: 12px 14px; } .brick__title{ margin:0 0 6px; font-size: 18px; font-weight: 800; } .brick__sub { opacity:.95; font-size: 14px; display:flex; gap:6px; align-items:center; color: var(--text-dim); } /* ------------------- Ink utilities (deterministe) ------------------- */ .on-light, .ink-light { color:#111 !important; text-shadow:none !important; } .on-dark, .ink-dark { color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.45) !important; } /* Dacă pui .on-light pe un container/overlay, forțăm cerneala neagră */ .on-light, .on-light * { --overlay-ink: #111 !important; } /* ------------------------------ Recipe ----------------------------------- */ .recipe { } .recipe__head h1 { margin: .2rem 0 0 0; } .recipe__meta { opacity:.9; display:flex; gap:8px; align-items:center; margin: 6px 0 10px 0; color: var(--text-dim); } .recipe__actions { display:flex; gap:8px; margin: 8px 0 14px; align-items:center; } .recipe__actions button { padding: 8px 12px; border-radius: var(--r-sm); border:1px solid var(--card-border); background: var(--card-bg); color: var(--text); cursor:pointer; } .recipe__media { position:relative; margin: 0 0 12px 0; } .recipe__media img { width:100%; height:auto; border-radius: var(--r-md); border: 1px solid var(--card-border); background: var(--bg-2); } .recipe__ingredients, .recipe__steps, .recipe__partners, .recipe__notes, .recipe__related { margin: 18px 0; } .servings__ctrl { display:flex; align-items:center; gap: 10px; margin-bottom: 10px; } .servings__buttons { display:flex; gap: 6px; align-items:center; } .servings__buttons input { width: 68px; text-align:center; padding: 6px; border-radius: var(--r-sm); border:1px solid var(--card-border); background: var(--card-bg); color: var(--text); } .servings__buttons button { width: 34px; height: 34px; border-radius: var(--r-sm); border:1px solid var(--card-border); background: var(--card-bg); color: var(--text); } #ingredientsList { list-style:none; padding:0; margin:0; display:grid; gap: 6px; } #ingredientsList li { display:flex; gap: 8px; align-items:center; } #ingredientsList .qty { min-width: 72px; display:inline-block; opacity:.95; color: var(--text-weak); } .recipe__steps ol { padding-left: 1.2rem; } /* Partners grid (reuse utils grid) */ .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .card--simple, .card { text-decoration:none; color:inherit; display:block; } .card--simple { background: var(--card-bg); border:1px solid var(--card-border); border-radius: var(--r-md); padding: 12px; } /* Related cards */ .recipe__related .card img { width:100%; height:140px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 8px; } /* ---------------------------- Favorites ---------------------------------- */ .btn-fav{ padding:8px 12px; border-radius:999px; border:1px solid var(--card-border); background: var(--card-bg); color: var(--text); cursor:pointer; display:inline-flex; gap:8px; align-items:center; font-weight: 700; transition: transform .08s ease, background .15s ease, border-color .15s ease; } .btn-fav:active{ transform: scale(.97); } .btn-fav.is-active, .btn-fav.is-favorited{ border-color: color-mix(in oklab, var(--brand), #000 15%); background: color-mix(in oklab, var(--brand), #000 85%); color: #eaffea; } .btn-fav__icon{ font-size: 1.05rem; line-height: 1; } .btn-fav[disabled]{ opacity:.6; cursor:not-allowed; } .fav-btn { position:absolute; top:10px; right:10px; z-index:5; } .fav-count{ font-weight:600; margin-left:4px; color:#a3e635; } /* ------------------------------- Footer ---------------------------------- */ .site-footer { border-top: 1px solid var(--card-border); background: var(--bg-2); padding: 20px 0; margin-top: 24px; } .footer__grid { display:grid; gap: 12px; grid-template-columns: 1fr; align-items:start; } .footer__brand .logo { color: var(--text); } .footer__brand .logo span { color: var(--brand); } .footer__brand .logo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .footer__brand .copy { display:block; margin-top: 4px; color: var(--text-dim); } .footer__nav a, .footer__langs a { color: var(--text-dim); text-decoration:none; margin-right: 10px; } .footer__langs a.active { color: var(--brand); font-weight: 800; } .back-to-top { position: fixed; right: 16px; bottom: 16px; width:44px; height:44px; border-radius: 50%; border:1px solid var(--card-border); background: var(--card-bg); color: var(--text); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .back-to-top.show { opacity: .9; pointer-events: auto; transform: translateY(0); } @media(min-width: 720px) { .footer__grid { grid-template-columns: 1fr auto auto; } } /* Hide header/footer in Cook mode */ body.cook-mode .site-header, body.cook-mode .site-footer, body.cook-mode #backToTop { display:none; } /* ----------------------------- Focus rings ------------------------------- */ :where(a, button, input, summary, .card__link, .brick__link):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ----------------------------- Utilities -------------------------------- */ .muted { color: var(--text-dim); } .badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius: 999px; border:1px solid var(--card-border); background: var(--card-bg); color: var(--text-weak); font-size: 12px; font-weight: 700; } /* ----------------------------- Animations -------------------------------- */ @keyframes subtle-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .ta-dropdown { animation: subtle-fade-in .12s ease-out; } .mega { animation: subtle-fade-in .12s ease-out; } /* ----------------------------- Light tweaks ------------------------------ */ @media (prefers-color-scheme: light), html[data-theme="light"] { .site-header { background: color-mix(in oklab, #fff 90%, transparent); } .logo { color: #111; } .lang-switch a.active, .lang-switch a:hover { background: #fff; } .card__media { background: #f6f7f9; } /* Megameniu ALB în light */ .nav-dropdown .mega{ background: #ffffff; color: #111111; border-color: #e6e8eb; } .mega__title{ color:#1f2328; } .mega__sub{ color:#60656f; } .mega__item:hover{ background: #f4f6f8; border-color: #e9ecef; } .mega__footer{ border-top-color:#e6e8eb; } .mega__all{ color:#374151; } .mega__all:hover{ color:#111; } .footer__brand .logo { color: #111; } .back-to-top { background: #fff; color:#111; border-color: #e1e4e8; } } /* Forțare suplimentară (specificitate + !important) pentru alb în light */ html[data-theme="light"] .nav-dropdown .mega{ background:#fff !important; color:#111 !important; border-color:#e6e8eb !important; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav-dropdown .mega{ background:#fff !important; color:#111 !important; border-color:#e6e8eb !important; } } /* ----------------------------- Search page ------------------------------- */ .search-hero { padding: 8px 0 4px; margin: 0 0 8px; } .search-hero h1 { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; } .search-meta { color: var(--text-dim); margin: 10px 0; } .sort-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; } .pill.active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ----------------------------- Page helpers ------------------------------- */ blockquote { margin: 0; border-left: 3px solid var(--card-border); padding-left: 12px; color: var(--text-dim); } code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: color-mix(in oklab, var(--card-bg), #000 6%); padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--card-border); } /* -------------------------- Reduce motion -------------------------------- */ @media (prefers-reduced-motion: reduce) { .card__img { transition: none; } .ta-dropdown, .mega { animation: none; } } /* -------------------------- End of stylesheet ---------------------------- */