/* ============================================================ SIDEBAR NAVIGATION – fælles for alle sider Inkluderes via sidebar.php ============================================================ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: #ffffff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform .3s cubic-bezier(.4,0,.2,1); border-right: 1.5px solid #e0ede3; overflow-y: auto; } .sidebar-logo { padding: 24px 20px 18px; border-bottom: 1px solid #e8f2ea; flex-shrink: 0; display: flex; align-items: center; gap: 12px; } .sidebar-logo-icon { font-size: 1.7rem; flex-shrink: 0; animation: sway 5s ease-in-out infinite; transform-origin: bottom center; } @keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .sidebar-logo-title { font-family: 'DM Serif Display', serif; font-size: .92rem; color: #0f2318; line-height: 1.25; font-weight: 700; } .sidebar-logo-sub { font-size: .65rem; color: #7a9882; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } .sidebar-nav { flex: 1; padding: 12px 10px; } .nav-section-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #a8c8b0; padding: 0 10px; margin: 16px 0 4px; display: block; } .nav-section-label:first-child { margin-top: 4px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #3d5a44; text-decoration: none; font-size: .88rem; font-weight: 400; transition: all .15s; margin-bottom: 1px; position: relative; } .nav-link:hover { background: #f0fdf5; color: #0f2318; } .nav-link.active { background: #e8faf0; color: #18a84e; font-weight: 600; } .nav-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: #18a84e; border-radius: 0 4px 4px 0; } .nav-link.nav-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } .nav-icon { font-size: 1.05rem; flex-shrink: 0; width: 20px; text-align: center; } .nav-badge { margin-left: auto; background: #e8faf0; color: #18a84e; font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; border: 1px solid #b8e8c8; } .sidebar-footer { padding: 14px 20px; border-top: 1px solid #e8f2ea; font-size: .7rem; color: #a8c8b0; line-height: 1.5; flex-shrink: 0; } .main-content { flex: 1; margin-left: 240px; min-height: 100vh; } .menu-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 200; background: #fff; border: 1.5px solid #e0ede3; color: #18a84e; width: 40px; height: 40px; border-radius: 10px; font-size: 1.2rem; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 99; backdrop-filter: blur(4px); } @media (max-width: 768px) { .menu-toggle { display: flex; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-overlay.open { display: block; } .main-content { margin-left: 0; } .site-header { padding: 56px 24px 40px; } .search-panel { padding: 18px; } .container { padding: 0 12px 60px; } .header-stats { gap: 8px; } .hstat { padding: 8px 14px; } } /* ============================================================ Bryggeri Database – Fælles Stylesheet Bruges af: humle_search.php og malt_search.php Sidens eget tema sættes via ============================================================ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ============================================================ FÆLLES CSS CUSTOM PROPERTIES Disse bruges på tværs af begge sider ============================================================ */ :root { --bg: #ffffff; --surface: #ffffff; --surface2: #f6fbf7; --border: #e0ede3; --border-dark: #c8dece; --accent: #18a84e; --accent-light: #22c45c; --accent-pale: #e8faf0; --accent-mid: #b8e8c8; --text: #0f2318; --text-2: #3d5a44; --text-3: #7a9882; --red-pale: #fff0f0; --red: #e03030; --amber-pale: #fffbf0; --amber: #d08000; --teal: #0d9488; --teal-pale: #e0faf8; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03); --shadow-md: 0 4px 16px rgba(0,0,0,.07); --shadow-lg: 0 12px 40px rgba(0,0,0,.10); } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; } /* ============================================================ HUMLE-TEMA (grøn/frisk) body.theme-humle ============================================================ */ body.theme-humle { --bg: #ffffff; --surface2: #f6fbf7; --border: #e0ede3; --border-dark: #c8dece; --accent: #18a84e; --accent-light: #22c45c; --accent-pale: #e8faf0; --accent-mid: #b8e8c8; --text: #0f2318; --text-2: #3d5a44; --text-3: #7a9882; --red-pale: #fff0f0; --red: #e03030; --amber-pale: #fffbf0; --amber: #d08000; --teal: #0d9488; --teal-pale: #e0faf8; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; } body.theme-humle .site-header { background: linear-gradient(135deg, #10803c 0%, #18a84e 55%, #0d9488 100%); } body.theme-humle .site-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,255,255,.05) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(255,255,255,.04) 0%, transparent 60%); } body.theme-humle .hstat-num { color: #a8e6b0; } body.theme-humle .site-title span { color: #a8e6b0; } /* Humle-specifik modal-top-bar */ body.theme-humle .modal-top-bar { background: linear-gradient(90deg, #18a84e, #0d9488, #18a84e); } body.theme-humle .modal-close:hover { background: var(--red-pale); border-color: #f5b8b3; color: var(--red); } body.theme-humle .modal-desc { background: var(--accent-pale); border-left-color: var(--accent); } body.theme-humle .modal-temp-wrap { background: var(--amber-pale); border-left-color: var(--amber); } body.theme-humle .smag-tag { background: #e8faf0; border-color: #90d8a8; color: #107038; } body.theme-humle .search-panel { border-radius: var(--radius-lg); margin: 32px 0 24px; } body.theme-humle .form-group input:focus, body.theme-humle .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(24,168,78,.15); } body.theme-humle .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%237a9080' d='M5 7L0 0h10z'/%3E%3C/svg%3E"); } body.theme-humle .btn-primary { background: var(--accent); box-shadow: 0 2px 8px rgba(58,125,68,.25); } body.theme-humle .btn-primary:hover { background: var(--accent-light); box-shadow: 0 4px 16px rgba(58,125,68,.3); } body.theme-humle .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); } body.theme-humle thead tr { border-bottom-color: var(--accent-mid); } body.theme-humle tbody tr:hover, body.theme-humle tbody tr:nth-child(even):hover { background: var(--accent-pale); } body.theme-humle thead th a:hover { color: var(--accent); } body.theme-humle .sa { color: var(--accent); } body.theme-humle .results-count { color: var(--accent); } body.theme-humle .search-panel-title { color: var(--accent); } body.theme-humle .error-box { border-color: #f5b8b3; background: var(--red-pale); } /* EBC display (malt-siden) */ .ebc-cell { display: flex; align-items: center; gap: 8px; min-width: 130px; } .ebc-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.18); flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,.3); } .ebc-bar-wrap { width: 60px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; flex-shrink: 0; } .ebc-bar { height: 100%; border-radius: 3px; } .ebc-label { font-size: .78rem; color: var(--text-3); white-space: nowrap; } /* ============================================================ FÆLLES KOMPONENTER (bruges uændret på begge sider) ============================================================ */ /* ── HEADER (fælles struktur) ── */ .site-header { padding: 50px 24px 42px; text-align: center; position: relative; overflow: hidden; } .site-header::after { content: ''; } .header-icon, .header-hop { font-size: 2.8rem; display: block; margin-bottom: 10px; animation: sway 5s ease-in-out infinite; transform-origin: bottom center; position: relative; } @keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .site-title { font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; letter-spacing: -.01em; line-height: 1.1; position: relative; } .site-sub { color: rgba(255,255,255,.6); font-size: .85rem; font-weight: 300; margin-top: 8px; letter-spacing: .12em; text-transform: uppercase; position: relative; } .header-stats { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; position: relative; } .hstat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 9px 18px; min-width: 80px; text-align: center; backdrop-filter: blur(4px); } .hstat-num { font-size: 1.45rem; font-weight: 700; display: block; line-height: 1; } .hstat-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; display: block; margin-top: 3px; } /* ── LAYOUT ── */ .container { max-width: 1360px; margin: 0 auto; padding: 0 20px 80px; } /* ── SEARCH PANEL ── */ .search-panel { background: var(--surface); border: 1px solid var(--border); padding: 26px 30px; box-shadow: var(--shadow-sm); } .search-panel-title { font-size: 1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } /* ── FORM ── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 13px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group.wide { grid-column: span 2; } .form-group label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; color: var(--text-3); } .form-group input, .form-group select { background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: .9rem; padding: 9px 12px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; -webkit-appearance: none; } .form-group input:focus, .form-group select:focus { background: #fff; } .form-group select { background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; cursor: pointer; } .alpha-range, .ebc-range { display: flex; gap: 7px; align-items: center; } .alpha-range input, .ebc-range input { flex: 1; } .alpha-range .sep, .ebc-range .sep { color: var(--text-3); font-size: .8rem; } .form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } /* ── BUTTONS ── */ .btn { padding: 9px 22px; border-radius: var(--radius); font-family: inherit; font-size: .87rem; font-weight: 600; cursor: pointer; border: none; transition: all .18s; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { color: #fff; } .btn-primary:hover { transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text-3); border: 1.5px solid var(--border-dark); } /* ── TYPE PILLS (malt) ── */ .type-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .type-pill { padding: 5px 14px; border-radius: 20px; font-size: .77rem; font-weight: 500; cursor: pointer; border: 1.5px solid var(--border-dark); background: var(--surface2); color: var(--text-2); text-decoration: none; transition: all .15s; display: inline-flex; align-items: center; gap: 5px; } /* ── RESULTS META ── */ .results-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .results-count { font-size: 1.05rem; } .results-count em { font-style: normal; color: var(--text-3); font-size: .8rem; } /* ── TABLE ── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: .87rem; } thead tr { background: #f6fbf7; } thead th { padding: 12px 15px; text-align: left; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); white-space: nowrap; } thead th a { color: inherit; text-decoration: none; transition: color .15s; display: inline-flex; align-items: center; gap: 4px; } .sa { font-size: .75rem; } tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer; } tbody tr:last-child { border-bottom: none; } tbody tr:nth-child(even) { background: var(--surface2); } tbody td { padding: 12px 15px; vertical-align: middle; } /* Item name cells */ .hop-name, .malt-name { font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap; } body.theme-humle .hop-name { font-family: 'DM Serif Display', serif; } /* Country cell */ .hop-country, .malt-country { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .flag { font-size: 1.2rem; line-height: 1; } .country-name, .cname { color: var(--text-2); font-size: .82rem; } /* ── BADGES (humle) ── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .badge-aroma { background: #e8faf0; color: #107038; border: 1px solid #90d8a8; } .badge-bitter { background: #fff0f0; color: #c02020; border: 1px solid #f8b0b0; } .badge-all { background: #eff4ff; color: #1a50a0; border: 1px solid #aac0f0; } /* ── MALT TYPE BADGES ── */ .tbadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } /* ── ALPHA BAR (humle) ── */ .alpha-bar { display: flex; align-items: center; gap: 8px; min-width: 130px; } .alpha-fill { height: 7px; border-radius: 4px; flex: 0 0 auto; max-width: 70px; min-width: 4px; } .bar-low { background: linear-gradient(90deg, #22c45c, #60d888); } .bar-mid { background: linear-gradient(90deg, #e8a020, #f0bc45); } .bar-high { background: linear-gradient(90deg, #e05030, #f07050); } .alpha-label { font-size: .8rem; color: var(--text-3); white-space: nowrap; } /* ── SMAG TAGS ── */ .smag-tags { display: flex; flex-wrap: wrap; gap: 4px; } .smag-tag { font-size: .68rem; font-weight: 500; padding: 2px 8px; border-radius: 20px; } .smag-cell { max-width: 190px; } /* ── TEMP CHIPS (humle) ── */ .temp-wrap { display: flex; flex-direction: column; gap: 4px; } .temp-chip { display: inline-block; font-size: .72rem; font-weight: 500; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .temp-hot { background: #fff0f0; color: #c82020; border: 1px solid #f8a8a8; } .temp-warm { background: #fffbf0; color: #b06000; border: 1px solid #f0d080; } .temp-cold { background: #eff4ff; color: #1a50a0; border: 1px solid #a8c0f0; } .temp-na { color: var(--text-3); font-size: .8rem; } /* Malt temp cells */ .temp-cell { font-size: .8rem; color: var(--text-2); white-space: nowrap; max-width: 160px; } .temp-none { color: var(--text-3); font-style: italic; font-size: .78rem; } /* Misc cells */ .erstatning-cell, .erstat-cell { font-size: .79rem; color: var(--text-3); max-width: 150px; } .prod-cell { font-size: .78rem; color: var(--text-2); white-space: nowrap; } /* ── STATE BOXES ── */ .state-box { text-align: center; padding: 58px 32px; border: 1.5px dashed var(--border-dark); border-radius: var(--radius-lg); background: var(--surface); margin-top: 8px; } .state-box .icon { font-size: 2.8rem; margin-bottom: 14px; display: block; } .state-box h3 { font-size: 1.3rem; color: var(--text); margin-bottom: 6px; } .state-box p { color: var(--text-3); font-size: .88rem; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,10,10,.55); z-index: 200; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; max-width: 720px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: popIn .22s cubic-bezier(.34,1.56,.64,1); } @keyframes popIn { from { opacity:0; transform: scale(.93) translateY(14px); } to { opacity:1; transform: scale(1) translateY(0); } } /* Humle: top-bar div | Malt: ribbon div */ .modal-top-bar, .modal-ribbon { height: 5px; border-radius: 18px 18px 0 0; } .modal-header { padding: 22px 26px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: 0; background: var(--surface); z-index: 1; } .modal-title { font-family: 'DM Serif Display', serif; font-size: 1.55rem; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.2; } .modal-close { background: var(--surface2); border: 1px solid var(--border); color: var(--text-3); font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; } .modal-body { padding: 20px 26px 28px; } .modal-grid, .modal-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .modal-top-grid { grid-template-columns: repeat(3, 1fr); } .modal-field { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; } .modal-field label { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); display: block; margin-bottom: 5px; } .modal-field .val { font-size: .9rem; color: var(--text); font-weight: 500; } .modal-section { margin-top: 18px; } .modal-section-title { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-top: 0; } .modal-desc { border-left-width: 3px; border-left-style: solid; border-radius: 0 var(--radius) var(--radius) 0; padding: 13px 16px; line-height: 1.75; color: var(--text-2); font-size: .89rem; } .modal-temp-wrap, .modal-temp { border-left-width: 3px; border-left-style: solid; border-radius: 0 var(--radius) var(--radius) 0; padding: 11px 16px; font-size: .88rem; color: var(--text-2); } .modal-oeltyper { background: #edf7ed; border-left: 3px solid #5a9a5a; border-radius: 0 var(--radius) var(--radius) 0; padding: 11px 16px; font-size: .88rem; color: #2a4a2a; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .form-group.wide { grid-column: span 1; } .modal-top-grid { grid-template-columns: 1fr 1fr; } thead th:nth-child(7), tbody td:nth-child(7), thead th:nth-child(8), tbody td:nth-child(8) { display: none; } } @media (max-width: 700px) { .site-header { padding: 32px 16px 28px; } .search-panel { padding: 18px; } .container { padding: 0 12px 60px; } .header-stats { gap: 8px; } .hstat { padding: 8px 14px; } .modal-grid, .modal-top-grid { grid-template-columns: 1fr; } thead th:nth-child(5), tbody td:nth-child(5), thead th:nth-child(6), tbody td:nth-child(6) { display: none; } }