/* ========================================================================== Molly Malone Pub & Pool — mm7000.diskosys.dk Lys tema som standard + valgfri dark mode (data-theme="dark" på ). Farver genbrugt fra brandet: mørkrød, guld, creme, mørk. ========================================================================== */ :root { /* Brand-konstanter (samme i begge temaer) */ --gold: #d2aa52; --red: #df3131; --red-deep: #7e1d1d; --cream: #fef6ed; --ink: #1a1a1a; /* Semantiske farver — LYS TEMA (standard) */ --bg: #fdf9f2; --bg-alt: #f3e9d8; --bg-elevated:#ffffff; --text: #211c18; --text-muted: #6f665c; --border: rgba(40,30,20,.13); --accent: #7e1d1d; /* mørkrød accent på lys */ --header-bg: rgba(253,249,242,.90); --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --maxw: 1200px; } :root[data-theme="dark"] { --bg: #1a1a1a; --bg-alt: #201d1b; --bg-elevated:#262321; --text: #fef6ed; --text-muted: #b7b0a8; --border: rgba(255,255,255,.10); --accent: #d2aa52; /* guld accent på mørk */ --header-bg: rgba(26,26,26,.92); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .25s, color .25s; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 92px 0; } .section--tight { padding: 60px 0; } /* ---- Eyebrow / overskrifter ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; } .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--accent); } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 30px; height: 2px; background: var(--accent); } .section-title { font-size: clamp(30px, 4vw, 46px); color: var(--text); margin-top: 14px; } .section-sub { color: var(--text-muted); font-size: 17px; margin-top: 12px; max-width: 640px; } .center { text-align: center; } .center .eyebrow, .center .section-sub { margin-left: auto; margin-right: auto; } /* ---- Knapper ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 7px; font-size: 15px; font-weight: 600; font-family: var(--font-body); cursor: pointer; border: none; transition: filter .15s, transform .05s; } .btn:active { transform: translateY(1px); } .btn--gold { background: var(--gold); color: #1a1a1a; } .btn--gold:hover { filter: brightness(1.07); } .btn--red { background: var(--red-deep); color: var(--cream); } .btn--red:hover { filter: brightness(1.12); } .btn--outline { background: transparent; color: var(--text); border: 1.5px solid currentColor; } .btn--outline:hover { background: var(--text); color: var(--bg); } .btn--full { width: 100%; } .btn svg { width: 18px; height: 18px; } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; } .logo { display: flex; align-items: center; gap: 10px; } .logo .mark { width: 46px; height: 46px; object-fit: contain; padding: 5px; border-radius: 50%; background: #1c1714; box-shadow: 0 1px 5px rgba(0,0,0,.22); } .logo .name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .5px; color: var(--text); line-height: 1; } .logo .tag { font-size: 9px; font-weight: 600; letter-spacing: 2.5px; color: var(--accent); } .nav { display: flex; align-items: center; gap: 32px; } .nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; transition: color .15s; } .nav a:hover, .nav a.active { color: var(--text); } .header-cta { display: flex; align-items: center; gap: 14px; } .theme-toggle { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--bg-alt); } .theme-toggle svg { width: 19px; height: 19px; } .burger { display: none; width: 42px; height: 42px; border-radius: 8px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); cursor: pointer; align-items: center; justify-content: center; } .burger svg { width: 22px; height: 22px; } .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 12px 24px 24px; background: var(--bg-alt); border-bottom: 1px solid var(--border); } .mobile-nav.open { display: flex; } .mobile-nav a { color: var(--text); font-size: 17px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--border); } .mobile-nav .btn { margin-top: 14px; } /* ---- Hero (altid mørkt foto + lys tekst, uafhængigt af tema) ---- */ .hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,11,9,.94) 0%, rgba(15,11,9,.6) 58%, rgba(15,11,9,.4) 100%); } .hero__content { position: relative; z-index: 2; max-width: 760px; padding: 90px 0; } .hero .eyebrow, .hero .eyebrow::before { color: var(--gold); } .hero .eyebrow::before { background: var(--gold); } .hero h1 { font-size: clamp(44px, 6.5vw, 76px); color: var(--cream); margin-top: 22px; } .hero p.lead { color: #d8cfc4; font-size: clamp(16px,2vw,19px); margin-top: 22px; max-width: 600px; } .hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .hero .btn--outline { color: var(--cream); } .hero .btn--outline:hover { background: var(--cream); color: var(--ink); } /* ---- Kort ---- */ .grid { display: grid; gap: 24px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 34px; } .card__badge { width: 56px; height: 56px; border-radius: 12px; background: var(--red-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .card__badge svg { width: 26px; height: 26px; color: var(--gold); } .card h3 { font-size: 24px; color: var(--text); margin-bottom: 9px; } .card p { color: var(--text-muted); font-size: 15px; } .card--row { display: flex; gap: 22px; align-items: flex-start; } .card--row .card__badge { margin-bottom: 0; flex-shrink: 0; } .check-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 11px; } .check-list li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 500; } .check-list svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; } /* ---- Foto-spilkort ---- */ .game-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .game-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.16); } .game-card__img { height: 210px; background-size: cover; background-position: center; position: relative; } .game-card__tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 20px; background: rgba(18,13,11,.78); color: var(--gold); font-size: 12px; font-weight: 600; } .game-card__tag svg { width: 15px; height: 15px; } .game-card__body { padding: 24px 26px 28px; } .game-card__body h3 { font-size: 22px; color: var(--text); margin-bottom: 8px; } .game-card__body p { color: var(--text-muted); font-size: 15px; } /* ---- Sektions-baggrunde (tema-bevidste) ---- */ .bg-cream, .bg-ink2 { background: var(--bg-alt); color: var(--text); } .bg-red { background: var(--red-deep); color: var(--cream); } .bg-red .section-title, .bg-red h2 { color: var(--cream); } .bg-red .eyebrow, .bg-red .eyebrow::before { color: var(--gold); } .bg-red .eyebrow::before { background: var(--gold); } .bg-red p { color: #f3e7d8; } /* ---- Split-sektion ---- */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .split__img { background-size: cover; background-position: center; min-height: 520px; } .split__text { padding: 80px; display: flex; flex-direction: column; justify-content: center; } .split__text h2 { font-size: clamp(30px,3.5vw,44px); color: var(--text); margin: 18px 0; } .split__text p { color: var(--text-muted); font-size: 17px; } .bg-red.split .split__text h2 { color: var(--cream); } .bg-red.split .split__text p { color: #f3e7d8; } /* Billede + tekst med billedet til højre (CMS-blok) */ .split--rev .split__img { order: 2; } .split--rev .split__text { order: 1; } /* Call-to-action-bånd (CMS-blok) */ .cta-band { background: var(--bg-alt); } .cta-band .hero__cta { justify-content: center; } /* ---- Info-paneler (åbningstider / kontakt) ---- */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .panel, .panel--white, .panel--ink, .panel--ink2 { border-radius: 16px; padding: 38px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .panel h3, .panel--white h3, .panel--ink h3, .panel--ink2 h3 { font-size: 26px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; color: var(--text); } .panel h3 svg { width: 22px; height: 22px; } .hours-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 16px; } .hours-row .time { font-weight: 700; color: var(--accent); } .hours-row .time.closed { color: var(--text-muted); font-weight: 500; } .contact-row { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; } .contact-row .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-row .ic svg { width: 20px; height: 20px; color: var(--gold); } .contact-row .l1 { font-size: 13px; color: var(--text-muted); } .contact-row .l2 { font-size: 17px; font-weight: 600; color: var(--text); } /* ---- Formularer ---- */ .form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: flex; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; flex: 1; } .field label { font-size: 13px; font-weight: 600; color: var(--text); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: 15px; padding: 13px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; } .field textarea { min-height: 110px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .8; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); } .form-msg { font-size: 14px; padding: 12px 14px; border-radius: 8px; display: none; } .form-msg.ok { display: block; background: rgba(126,29,29,.10); color: var(--accent); } .form-msg.err { display: block; background: rgba(223,49,49,.14); color: #c0392b; } :root[data-theme="dark"] .form-msg.ok { background: rgba(210,170,82,.16); } :root[data-theme="dark"] .form-msg.err { color: #ff8b8b; } /* ---- Nyhedsbrev ---- */ .newsletter { text-align: center; } .newsletter .inline-form { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .newsletter input { width: 340px; max-width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 15px; } .benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; } .benefit { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .benefit svg { width: 26px; height: 26px; color: var(--gold); } .benefit h4 { font-size: 19px; color: var(--text); } .benefit p { color: var(--text-muted); font-size: 14px; } /* ---- Job ---- */ .job-row { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 26px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); } .job-row h3 { font-size: 22px; color: var(--text); } .pill { display: inline-block; padding: 5px 11px; border-radius: 20px; background: rgba(126,29,29,.12); color: var(--accent); font-size: 12px; font-weight: 600; margin-left: 10px; } .job-row p { color: var(--text-muted); font-size: 15px; margin-top: 6px; } /* ---- Banner (undersider) ---- */ .page-banner { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 86px 0; } .page-banner h1 { font-size: clamp(38px,5vw,60px); color: var(--text); margin-top: 16px; } .page-banner p { color: var(--text-muted); margin-top: 14px; max-width: 720px; font-size: 18px; } .page-banner.red { background: var(--red-deep); border-color: rgba(0,0,0,.2); } .page-banner.red h1 { color: var(--cream); } .page-banner.red p { color: #f3e7d8; } .page-banner.red .eyebrow, .page-banner.red .eyebrow::before { color: var(--gold); } .page-banner.red .eyebrow::before { background: var(--gold); } /* ---- Footer (altid mørk) ---- */ .site-footer { background: #131010; color: #b7b0a8; padding: 64px 0 30px; } .footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .footer-brand { max-width: 320px; } .footer-brand .logo-full { height: 84px; width: auto; margin-bottom: 6px; } .footer-brand p { color: #b7b0a8; font-size: 14px; margin: 14px 0; } .socials { display: flex; gap: 10px; } .socials a { width: 38px; height: 38px; border-radius: 50%; background: #262321; display: flex; align-items: center; justify-content: center; color: var(--cream); transition: background .15s; } .socials a:hover { background: var(--red-deep); } .socials svg { width: 17px; height: 17px; } .footer-col h4 { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 14px; } .footer-col a, .footer-col span { display: block; color: #b7b0a8; font-size: 15px; margin-bottom: 10px; } .footer-col a:hover { color: var(--cream); } .footer-bottom { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #7c736b; font-size: 13px; flex-wrap: wrap; gap: 8px; } /* ---- Responsivt ---- */ @media (max-width: 980px) { .nav, .header-cta .btn { display: none; } .burger { display: flex; } .grid--3, .grid--2, .info-grid, .benefits { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .split.bg-red { display: flex; flex-direction: column-reverse; } .split__img { min-height: 260px; } .split__text { padding: 48px 24px; } .section { padding: 60px 0; } .job-row { flex-direction: column; align-items: flex-start; gap: 16px; } .job-row .btn { width: 100%; } .footer-top { flex-direction: column; gap: 32px; } .panel, .panel--white, .panel--ink, .panel--ink2 { padding: 28px; } } @media (max-width: 560px) { .form-row { flex-direction: column; } .hero__content { padding: 60px 0; } .newsletter input { width: 100%; } } /* ---- Booking-modal (modul) ---- */ .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal.open { display: flex; } .modal__overlay { position: fixed; inset: 0; background: rgba(10,7,6,.62); backdrop-filter: blur(3px); } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 540px; margin: auto; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 38px; box-shadow: 0 30px 80px rgba(0,0,0,.45); } .modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 8px; border: none; background: var(--bg-alt); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal__close:hover { background: var(--red-deep); color: var(--cream); } .modal__close svg { width: 19px; height: 19px; } .modal__head { margin-bottom: 22px; } .modal__head h2 { font-size: 28px; color: var(--text); margin: 10px 0 6px; } .modal__head p { color: var(--text-muted); font-size: 15px; } body.modal-open { overflow: hidden; } .bk-types { display: flex; flex-direction: column; gap: 8px; } .bk-type { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .bk-type__info { display: flex; flex-direction: column; } .bk-type__info strong { font-size: 15px; color: var(--text); } .bk-type__info span { font-size: 12px; color: var(--text-muted); } .bk-type select { width: 74px; flex-shrink: 0; } .bk-types-err { color: var(--text-muted); font-size: 14px; padding: 8px 0; } .booking-hours { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12.5px; margin-top: -4px; } .booking-hours svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; } .booking-timewarn { display: none; margin-top: -4px; padding: 10px 12px; border-radius: 8px; background: rgba(223,49,49,.14); color: #c0392b; font-size: 13px; font-weight: 500; } :root[data-theme="dark"] .booking-timewarn { color: #ff8b8b; } .booking-timewarn.show { display: block; } .btn:disabled { opacity: .5; cursor: not-allowed; } .booking-price { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 10px; background: var(--bg-alt); } .booking-price span { color: var(--text-muted); font-size: 14px; font-weight: 500; } .booking-price strong { font-family: var(--font-display); font-size: 24px; color: var(--accent); } .booking-pay-note { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; } .booking-pay-note svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; } /* SMS-besked ved ankomst — markant fremhævet under telefonfeltet */ .booking-sms { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 11px; background: rgba(210,170,82,.16); border: 1.5px solid rgba(210,170,82,.6); color: var(--text); font-size: 14.5px; line-height: 1.45; } .booking-sms strong { color: var(--accent); } .booking-sms svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 1px; } :root[data-theme="dark"] .booking-sms { background: rgba(210,170,82,.12); } .booking-manage { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); } .booking-manage a { color: var(--gold); font-weight: 600; } /* Min booking — detaljeliste */ .booking-detail { display: grid; gap: 10px; margin: 0; } .booking-detail > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(128,128,128,.18); } .booking-detail > div:last-child { border-bottom: 0; padding-bottom: 0; } .booking-detail dt { margin: 0; color: var(--muted); font-size: 14px; } .booking-detail dd { margin: 0; text-align: right; font-weight: 600; } /* Booking trin 2 — SMS-bekræftelse (egen skærm i modalen) */ .bk-verify { text-align: center; padding: 6px 0 2px; } .bk-verify__icon { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: rgba(210,170,82,.16); border: 1.5px solid rgba(210,170,82,.55); } .bk-verify__icon svg { width: 26px; height: 26px; color: var(--gold); } .bk-verify h3 { font-size: 22px; margin: 0 0 8px; } .bk-verify p { color: var(--muted); font-size: 15px; margin: 0 auto; max-width: 380px; } .bk-code-input { text-align: center; font-size: 30px; letter-spacing: .45em; font-weight: 700; padding: 14px 10px; text-indent: .45em; } .bk-verify__links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 16px 0 0; font-size: 14px; } .bk-verify__links a { color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .bk-verify__links svg { width: 15px; height: 15px; } .game-card__price { margin: 10px 0 0; font-weight: 700; color: var(--gold); font-size: 15px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Indholds-prosa + datatabel (fx privatlivspolitik) ---- */ .prose { max-width: 820px; } .prose h2 { font-size: clamp(22px,3vw,30px); color: var(--text); margin: 34px 0 12px; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--text-muted); font-size: 16px; margin-bottom: 12px; } .prose ul { margin: 6px 0 14px 20px; display: flex; flex-direction: column; gap: 8px; } .prose li { color: var(--text-muted); font-size: 16px; } .prose a { color: var(--accent); font-weight: 600; } .prose .muted { font-size: 14px; color: var(--text-muted); } .data-table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tr:last-child td { border-bottom: none; } .data-table th { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: var(--bg-alt); } .data-table td { color: var(--text-muted); } @media (max-width: 680px) { .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; } .data-table thead { display: none; } .data-table td { border: none; padding: 2px 0; } .data-table tr { border-bottom: 1px solid var(--border); padding: 12px 14px; } }