{"id":5,"date":"2026-08-17T10:06:37","date_gmt":"2026-08-17T10:06:37","guid":{"rendered":"https:\/\/hetvenhat.hu\/?page_id=5"},"modified":"2026-08-29T08:24:36","modified_gmt":"2026-08-29T08:24:36","slug":"fooldal","status":"publish","type":"page","link":"https:\/\/hetvenhat.hu\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5\" class=\"elementor elementor-5\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6652e05 e-flex e-con-boxed e-con e-parent\" data-id=\"6652e05\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-882ac2a elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"882ac2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   HETVENHAT \u2014 RESET\n========================================================= *\/\n\n* {\n    box-sizing: border-box;\n}\n\nhtml,\nbody {\n    margin: 0;\n    padding: 0;\n    background: #070707;\n    overflow-x: hidden;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\n\n\/* Elementor HTML widget ne korl\u00e1tozzon *\/\n\n.elementor-widget-html,\n.elementor-widget-html .elementor-widget-container {\n    width: 100%;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\n\/* =========================================================\n   SITE \u2014 FULL VIEWPORT BREAKOUT\n========================================================= *\/\n\n.hetvenhat-site {\n    --black: #070707;\n    --gold: #d9b568;\n    --gold-light: #efd28e;\n    --white: #f6f2ea;\n    --muted: rgba(255,255,255,.68);\n\n    position: relative;\n\n    width: 100vw;\n    max-width: none;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    background: var(--black);\n    color: var(--white);\n\n    font-family: Arial, Helvetica, sans-serif;\n\n    overflow: hidden;\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.hh-hero {\n    position: relative;\n\n    width: 100vw;\n\n    \/*\n       Desktopon a banner eredeti sz\u00e9les ar\u00e1ny\u00e1t k\u00f6vetj\u00fck.\n    *\/\n    aspect-ratio: 1680 \/ 896;\n\n    min-height: 0;\n    max-height: none;\n\n    overflow: hidden;\n\n    background: #050505;\n}\n\n\n\/* =========================================================\n   HERO IMAGE\n========================================================= *\/\n\n.hh-hero-image {\n    position: absolute;\n\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: contain;\n    object-position: center center;\n\n    transform: scale(1);\n\n    animation:\n        hhHeroImage 2.2s\n        cubic-bezier(.16,1,.3,1)\n        forwards;\n}\n\n\n\/* =========================================================\n   DARK CINEMATIC OVERLAY\n========================================================= *\/\n\n.hh-hero-overlay {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 2;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.88) 0%,\n            rgba(0,0,0,.72) 24%,\n            rgba(0,0,0,.34) 46%,\n            rgba(0,0,0,.10) 67%,\n            rgba(0,0,0,.02) 100%\n        ),\n\n        linear-gradient(\n            to bottom,\n            rgba(0,0,0,.38) 0%,\n            transparent 23%,\n            transparent 70%,\n            rgba(0,0,0,.52) 100%\n        );\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.hh-header {\n    position: absolute;\n\n    top: 0;\n    left: 0;\n\n    z-index: 20;\n\n    width: 100%;\n}\n\n.hh-header-inner {\n    width: min(1500px, calc(100% - 100px));\n\n    height: 108px;\n\n    margin: 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 35px;\n}\n\n\n\/* =========================================================\n   LOGO\n========================================================= *\/\n\n.hh-logo {\n    display: flex;\n    align-items: center;\n\n    gap: 15px;\n\n    flex-shrink: 0;\n\n    text-decoration: none;\n\n    color: white;\n}\n\n.hh-logo-number {\n    color: var(--gold);\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 54px;\n    font-weight: 400;\n\n    line-height: .8;\n}\n\n.hh-logo-copy {\n    display: flex;\n    flex-direction: column;\n}\n\n.hh-logo-name {\n    color: white;\n\n    font-size: 15px;\n    font-weight: 500;\n\n    letter-spacing: 5px;\n\n    white-space: nowrap;\n}\n\n.hh-logo-sub {\n    margin-top: 6px;\n\n    color: rgba(255,255,255,.52);\n\n    font-size: 8px;\n\n    letter-spacing: 3px;\n\n    white-space: nowrap;\n}\n\n\n\/* =========================================================\n   DESKTOP NAV\n========================================================= *\/\n\n.hh-nav {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: clamp(16px, 1.55vw, 30px);\n}\n\n.hh-nav a {\n    position: relative;\n\n    color: rgba(255,255,255,.80);\n\n    text-decoration: none;\n\n    font-size: 11px;\n    font-weight: 600;\n\n    letter-spacing: 1.6px;\n\n    text-transform: uppercase;\n\n    white-space: nowrap;\n\n    transition:\n        color .3s ease;\n}\n\n.hh-nav a::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    bottom: -10px;\n\n    width: 0;\n    height: 1px;\n\n    background: var(--gold);\n\n    transition:\n        width .45s\n        cubic-bezier(.16,1,.3,1);\n}\n\n.hh-nav a:hover,\n.hh-nav a.active {\n    color: white;\n}\n\n.hh-nav a:hover::after,\n.hh-nav a.active::after {\n    width: 100%;\n}\n\n\n\/* =========================================================\n   HEADER ACTION\n========================================================= *\/\n\n.hh-header-action {\n    flex-shrink: 0;\n}\n\n.hh-header-button {\n    height: 48px;\n\n    padding: 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    background: var(--gold-light);\n\n    color: #111;\n\n    text-decoration: none;\n\n    font-size: 10px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n\n    text-transform: uppercase;\n\n    transition:\n        background .3s ease,\n        transform .3s ease;\n}\n\n.hh-header-button:hover {\n    background: white;\n\n    transform: translateY(-2px);\n}\n\n\n\/* =========================================================\n   MOBILE MENU BUTTON\n========================================================= *\/\n\n.hh-menu-button {\n    width: 48px;\n    height: 48px;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n\n    border: 1px solid rgba(255,255,255,.18);\n\n    background: rgba(0,0,0,.24);\n\n    cursor: pointer;\n\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n}\n\n.hh-menu-lines {\n    width: 20px;\n    height: 14px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.hh-menu-lines span {\n    display: block;\n\n    width: 100%;\n    height: 1px;\n\n    background: white;\n\n    transition:\n        transform .35s ease,\n        opacity .35s ease;\n}\n\n\n\/* =========================================================\n   HERO CONTENT\n========================================================= *\/\n\n.hh-hero-content-wrapper {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 5;\n\n    display: flex;\n    align-items: center;\n}\n\n.hh-hero-inner {\n    width: min(1500px, calc(100% - 100px));\n\n    margin: 0 auto;\n\n    padding-top: 72px;\n}\n\n.hh-hero-content {\n    width: min(680px, 48%);\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.hh-eyebrow {\n    margin-bottom: 25px;\n\n    color: var(--gold-light);\n\n    font-size: 11px;\n    font-weight: 600;\n\n    letter-spacing: 5px;\n\n    text-transform: uppercase;\n\n    opacity: 0;\n\n    transform: translateY(25px);\n\n    animation:\n        hhReveal .9s .15s\n        cubic-bezier(.16,1,.3,1)\n        forwards;\n}\n\n\n\/* =========================================================\n   MAIN TITLE\n========================================================= *\/\n\n.hh-title {\n    margin: 0;\n\n    color: white;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size:\n        clamp(\n            64px,\n            5.9vw,\n            105px\n        );\n\n    font-weight: 400;\n\n    line-height: .93;\n\n    letter-spacing: -3px;\n\n    opacity: 0;\n\n    transform: translateY(35px);\n\n    animation:\n        hhReveal 1.1s .25s\n        cubic-bezier(.16,1,.3,1)\n        forwards;\n}\n\n.hh-title span {\n    display: block;\n\n    color: var(--gold-light);\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n========================================================= *\/\n\n.hh-description {\n    max-width: 530px;\n\n    margin: 30px 0 0;\n\n    color: rgba(255,255,255,.72);\n\n    font-size: 16px;\n\n    line-height: 1.75;\n\n    opacity: 0;\n\n    transform: translateY(30px);\n\n    animation:\n        hhReveal 1s .42s\n        cubic-bezier(.16,1,.3,1)\n        forwards;\n}\n\n\n\/* =========================================================\n   BUTTONS\n========================================================= *\/\n\n.hh-buttons {\n    display: flex;\n\n    align-items: center;\n\n    gap: 12px;\n\n    margin-top: 36px;\n\n    opacity: 0;\n\n    transform: translateY(30px);\n\n    animation:\n        hhReveal 1s .57s\n        cubic-bezier(.16,1,.3,1)\n        forwards;\n}\n\n.hh-btn {\n    min-height: 57px;\n\n    padding: 0 29px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    gap: 20px;\n\n    text-decoration: none;\n\n    font-size: 10px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n\n    text-transform: uppercase;\n\n    transition:\n        transform .35s\n        cubic-bezier(.16,1,.3,1),\n        background .35s ease,\n        border-color .35s ease;\n}\n\n.hh-btn-primary {\n    color: #111;\n\n    background: var(--gold-light);\n\n    border: 1px solid var(--gold-light);\n}\n\n.hh-btn-secondary {\n    color: white;\n\n    background: rgba(0,0,0,.10);\n\n    border: 1px solid rgba(255,255,255,.34);\n\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n}\n\n.hh-btn:hover {\n    transform: translateY(-3px);\n}\n\n.hh-btn-primary:hover {\n    background: white;\n\n    border-color: white;\n}\n\n.hh-btn-secondary:hover {\n    background: rgba(255,255,255,.07);\n\n    border-color: rgba(255,255,255,.70);\n}\n\n.hh-arrow {\n    font-size: 17px;\n\n    transition:\n        transform .3s ease;\n}\n\n.hh-btn:hover .hh-arrow {\n    transform: translateX(5px);\n}\n\n\n\/* =========================================================\n   SCROLL INDICATOR\n========================================================= *\/\n\n.hh-scroll {\n    position: absolute;\n\n    z-index: 10;\n\n    left: max(\n        calc((100vw - 1500px) \/ 2),\n        50px\n    );\n\n    bottom: 78px;\n\n    display: flex;\n    align-items: center;\n\n    gap: 15px;\n\n    color: rgba(255,255,255,.52);\n\n    font-size: 11px;\n\n    letter-spacing: 2.5px;\n\n    text-transform: uppercase;\n}\n\n.hh-scroll-line {\n    position: relative;\n\n    width: 1px;\n    height: 52px;\n\n    overflow: hidden;\n\n    background:\n        rgba(255,255,255,.17);\n}\n\n.hh-scroll-line::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    top: -100%;\n\n    width: 1px;\n    height: 100%;\n\n    background: var(--gold);\n\n    animation:\n        hhScroll 1.7s\n        ease-in-out\n        infinite;\n}\n\n\n\/* =========================================================\n   MOBILE NAV\n========================================================= *\/\n\n.hh-mobile-nav {\n    position: fixed;\n\n    inset: 0;\n\n    z-index: 9999;\n\n    padding:\n        calc(92px + env(safe-area-inset-top))\n        24px\n        calc(34px + env(safe-area-inset-bottom));\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    gap: 4px;\n\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    background:\n        rgba(5,5,5,.985);\n\n    backdrop-filter: blur(22px);\n    -webkit-backdrop-filter: blur(22px);\n\n    opacity: 0;\n\n    visibility: hidden;\n\n    transform: translateY(-20px);\n\n    transition:\n        opacity .45s ease,\n        transform .45s\n        cubic-bezier(.16,1,.3,1),\n        visibility .45s;\n}\n\n.hh-mobile-nav.open {\n    opacity: 1;\n\n    visibility: visible;\n\n    transform: translateY(0);\n}\n\n.hh-mobile-nav a {\n    width: min(100%, 520px);\n\n    margin: 0 auto;\n\n    padding: 8px 0;\n\n    display: grid;\n    grid-template-columns: 48px minmax(0, 1fr);\n\n    align-items: baseline;\n\n    color: white;\n\n    text-decoration: none;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size:\n        clamp(\n            28px,\n            7.6vw,\n            40px\n        );\n\n    line-height: 1.08;\n\n    white-space: nowrap;\n}\n\n.hh-mobile-nav a span {\n    margin: 0;\n\n    color: var(--gold);\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    font-size: .34em;\n\n    line-height: 1;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes hhReveal {\n\n    to {\n        opacity: 1;\n\n        transform:\n            translateY(0);\n    }\n\n}\n\n@keyframes hhHeroImage {\n\n    from {\n        opacity: .5;\n\n        transform:\n            scale(1.01);\n    }\n\n    to {\n        opacity: 1;\n\n        transform:\n            scale(1);\n    }\n\n}\n\n@keyframes hhScroll {\n\n    from {\n        transform:\n            translateY(0);\n    }\n\n    to {\n        transform:\n            translateY(200%);\n    }\n\n}\n\n\n\/* =========================================================\n   LARGE LAPTOP\n========================================================= *\/\n\n@media (max-width: 1350px) {\n\n    .hh-header-inner,\n    .hh-hero-inner {\n        width:\n            calc(100% - 70px);\n    }\n\n    .hh-nav {\n        gap: 16px;\n    }\n\n    .hh-nav a {\n        font-size: 10px;\n\n        letter-spacing: 1.3px;\n    }\n\n    .hh-logo-number {\n        font-size: 48px;\n    }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n    .hh-header-inner,\n    .hh-hero-inner {\n        width:\n            calc(100% - 50px);\n    }\n\n    .hh-nav,\n    .hh-header-button {\n        display: none;\n    }\n\n    .hh-menu-button {\n        display: flex;\n    }\n\n    .hh-hero-content {\n        width: 55%;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .hh-hero {\n        aspect-ratio: auto;\n\n        width: 100vw;\n\n        height: 100svh;\n\n        min-height: 720px;\n\n        max-height: none;\n    }\n\n\n    \/*\n       Mobilon m\u00e1s crop:\n       jobbra toljuk, hogy a poh\u00e1r megmaradjon.\n    *\/\n\n    .hh-hero-image {\n        width: 100%;\n        height: 100%;\n\n        object-fit: cover;\n\n        object-position:\n            72% center;\n    }\n\n\n    .hh-hero-overlay {\n        background:\n\n            linear-gradient(\n                to bottom,\n                rgba(0,0,0,.10) 0%,\n                rgba(0,0,0,.13) 24%,\n                rgba(0,0,0,.38) 45%,\n                rgba(0,0,0,.90) 70%,\n                #070707 100%\n            ),\n\n            linear-gradient(\n                90deg,\n                rgba(0,0,0,.36),\n                rgba(0,0,0,.03)\n            );\n    }\n\n\n    \/* HEADER *\/\n\n    .hh-header-inner {\n        width:\n            calc(100% - 32px);\n\n        height: 82px;\n    }\n\n    .hh-logo {\n        gap: 10px;\n    }\n\n    .hh-logo-number {\n        font-size: 39px;\n    }\n\n    .hh-logo-name {\n        font-size: 11px;\n\n        letter-spacing: 3.5px;\n    }\n\n    .hh-logo-sub {\n        font-size: 6px;\n\n        letter-spacing: 2px;\n    }\n\n\n    \/* HERO *\/\n\n    .hh-hero-content-wrapper {\n        align-items: flex-end;\n    }\n\n    .hh-hero-inner {\n        width:\n            calc(100% - 36px);\n\n        padding:\n            0\n            0\n            80px;\n    }\n\n    .hh-hero-content {\n        width: 100%;\n    }\n\n\n    .hh-eyebrow {\n        margin-bottom: 14px;\n\n        font-size: 9px;\n\n        letter-spacing: 3.5px;\n    }\n\n\n    .hh-title {\n        font-size:\n            clamp(\n                48px,\n                15vw,\n                68px\n            );\n\n        line-height: .94;\n\n        letter-spacing: -2px;\n    }\n\n\n    .hh-description {\n        max-width: 460px;\n\n        margin-top: 20px;\n\n        font-size: 14px;\n\n        line-height: 1.65;\n    }\n\n\n    .hh-buttons {\n        margin-top: 25px;\n\n        flex-direction: column;\n\n        align-items: stretch;\n\n        gap: 9px;\n    }\n\n\n    .hh-btn {\n        width: 100%;\n\n        min-height: 55px;\n\n        justify-content:\n            space-between;\n\n        padding:\n            0\n            20px;\n    }\n\n\n    .hh-scroll {\n        display: none;\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 390px) {\n\n    .hh-title {\n        font-size: 45px;\n    }\n\n    .hh-description {\n        font-size: 13px;\n    }\n\n    .hh-mobile-nav {\n        padding-left: 18px;\n        padding-right: 18px;\n    }\n\n    .hh-mobile-nav a {\n        grid-template-columns: 42px minmax(0, 1fr);\n\n        font-size:\n            clamp(\n                26px,\n                7.4vw,\n                34px\n            );\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    *,\n    *::before,\n    *::after {\n        animation-duration:\n            .01ms !important;\n\n        animation-iteration-count:\n            1 !important;\n\n        scroll-behavior:\n            auto !important;\n    }\n\n}\n\n\n\/* =========================================================\n   ABOUT \/ BIO \u2014 PLACEHOLDER VERSION\n========================================================= *\/\n\n.hh-about {\n    position: relative;\n    width: 100%;\n    background: #070707;\n    padding: 120px 0 135px;\n    overflow: hidden;\n}\n\n.hh-about::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n        radial-gradient(circle at 78% 30%, rgba(217,181,104,.08), transparent 32%),\n        linear-gradient(to bottom, rgba(255,255,255,.018), transparent 28%);\n    pointer-events: none;\n}\n\n.hh-about-inner {\n    position: relative;\n    z-index: 2;\n    width: min(1500px, calc(100% - 100px));\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);\n    gap: clamp(60px, 7vw, 120px);\n    align-items: center;\n}\n\n.hh-about-copy {\n    max-width: 650px;\n}\n\n.hh-section-kicker {\n    color: var(--gold-light);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    margin-bottom: 22px;\n}\n\n.hh-about-title {\n    margin: 0;\n    color: #fff;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(50px, 4.7vw, 82px);\n    font-weight: 400;\n    line-height: .98;\n    letter-spacing: -2px;\n}\n\n.hh-about-title em {\n    color: var(--gold-light);\n    font-style: normal;\n}\n\n.hh-about-lead {\n    margin: 30px 0 0;\n    color: rgba(255,255,255,.72);\n    font-size: 17px;\n    line-height: 1.8;\n    max-width: 600px;\n}\n\n.hh-about-joke {\n    margin-top: 22px;\n    padding-left: 18px;\n    border-left: 1px solid rgba(217,181,104,.7);\n    color: rgba(255,255,255,.48);\n    font-size: 13px;\n    line-height: 1.7;\n}\n\n.hh-founders {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n    margin-top: 42px;\n}\n\n.hh-founder {\n    border-top: 1px solid rgba(255,255,255,.14);\n    padding-top: 18px;\n}\n\n.hh-founder-name {\n    color: white;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 22px;\n    margin-bottom: 7px;\n}\n\n.hh-founder-role {\n    color: var(--gold-light);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 2.2px;\n    text-transform: uppercase;\n}\n\n.hh-about-visual {\n    position: relative;\n}\n\n.hh-about-photo-wrap {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid rgba(255,255,255,.09);\n    background: #111;\n}\n\n.hh-about-photo {\n    width: 100%;\n    display: block;\n    aspect-ratio: 4 \/ 5;\n    object-fit: cover;\n    object-position: center 35%;\n    filter: saturate(.82) contrast(1.04);\n    transform: scale(1.01);\n    transition: transform 1.1s cubic-bezier(.16,1,.3,1);\n}\n\n.hh-about-photo-wrap:hover .hh-about-photo {\n    transform: scale(1.035);\n}\n\n.hh-about-photo-wrap::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(0,0,0,.48), transparent 48%);\n    pointer-events: none;\n}\n\n.hh-photo-caption {\n    position: absolute;\n    left: 24px;\n    right: 24px;\n    bottom: 22px;\n    z-index: 2;\n    display: flex;\n    justify-content: space-between;\n    gap: 20px;\n    align-items: end;\n}\n\n.hh-photo-caption strong {\n    display: block;\n    color: white;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 22px;\n    font-weight: 400;\n}\n\n.hh-photo-caption span {\n    display: block;\n    color: rgba(255,255,255,.58);\n    font-size: 9px;\n    letter-spacing: 1.8px;\n    text-transform: uppercase;\n    margin-top: 5px;\n}\n\n.hh-about-stamp {\n    position: absolute;\n    top: -22px;\n    right: -22px;\n    width: 105px;\n    height: 105px;\n    border-radius: 50%;\n    border: 1px solid rgba(217,181,104,.55);\n    background: rgba(7,7,7,.86);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: var(--gold-light);\n    font-size: 9px;\n    line-height: 1.45;\n    letter-spacing: 1.7px;\n    text-transform: uppercase;\n    transform: rotate(8deg);\n}\n\n.hh-reveal {\n    opacity: 0;\n    transform: translateY(34px);\n    transition:\n        opacity .9s cubic-bezier(.16,1,.3,1),\n        transform .9s cubic-bezier(.16,1,.3,1);\n}\n\n.hh-reveal.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n@media (max-width: 1100px) {\n    .hh-about-inner {\n        width: calc(100% - 50px);\n        grid-template-columns: 1fr 1fr;\n        gap: 50px;\n    }\n}\n\n@media (max-width: 820px) {\n    .hh-about {\n        padding: 86px 0 95px;\n    }\n\n    .hh-about-inner {\n        width: calc(100% - 36px);\n        grid-template-columns: 1fr;\n        gap: 48px;\n    }\n\n    .hh-about-copy {\n        max-width: none;\n    }\n\n    .hh-about-title {\n        font-size: clamp(46px, 13vw, 68px);\n    }\n\n    .hh-about-lead {\n        font-size: 15px;\n        line-height: 1.72;\n    }\n\n    .hh-founders {\n        margin-top: 34px;\n    }\n\n    .hh-about-visual {\n        width: 100%;\n    }\n\n    .hh-about-photo {\n        aspect-ratio: 4 \/ 5;\n        object-position: center 30%;\n    }\n\n    .hh-about-stamp {\n        width: 88px;\n        height: 88px;\n        right: -6px;\n        top: -16px;\n        font-size: 8px;\n    }\n}\n\n@media (max-width: 480px) {\n    .hh-founders {\n        grid-template-columns: 1fr;\n        gap: 18px;\n    }\n\n    .hh-about-title {\n        letter-spacing: -1.2px;\n    }\n\n    .hh-photo-caption {\n        left: 18px;\n        right: 18px;\n        bottom: 17px;\n    }\n\n    .hh-photo-caption strong {\n        font-size: 19px;\n    }\n}\n\n<\/style>\n\n\n\n<div class=\"hetvenhat-site\">\n\n\n    <!-- =====================================================\n         HERO\n    ====================================================== -->\n\n    <section class=\"hh-hero\">\n\n\n        <!-- BANNER IMAGE -->\n\n        <img decoding=\"async\"\n            class=\"hh-hero-image\"\n            src=\"https:\/\/hetvenhat.hu\/wp-content\/uploads\/2026\/08\/76-new-banner.png\"\n            alt=\"\"\n        >\n\n\n        <!-- CINEMATIC DARK OVERLAY -->\n\n        <div class=\"hh-hero-overlay\"><\/div>\n\n\n\n        <!-- =================================================\n             HEADER\n        ================================================== -->\n\n        <header class=\"hh-header\">\n\n            <div class=\"hh-header-inner\">\n\n\n                <!-- LOGO -->\n\n                <a\n                    href=\"https:\/\/hetvenhat.hu\/en\/\"\n                    class=\"hh-logo\"\n                >\n\n                    <div class=\"hh-logo-number\">\n                        76\n                    <\/div>\n\n\n                    <div class=\"hh-logo-copy\">\n\n                        <div class=\"hh-logo-name\">\n                            seventy-six\n                        <\/div>\n\n                        <div class=\"hh-logo-sub\">\n                            WINE BAR &amp; WEBSHOP\n                        <\/div>\n\n                    <\/div>\n\n                <\/a>\n\n\n\n                <!-- DESKTOP NAV -->\n\n                <nav class=\"hh-nav\">\n\n                    <a\n                        href=\"https:\/\/hetvenhat.hu\/en\/\"\n                        class=\"active\"\n                    >\n                        Home\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/webshop-2\/\">\n                        Online shop\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/kostolok\/\">\n                        Tastings\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/boraszaink\/\">\n                        Our winemakers\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/hirek-2\/\">\n                        News\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/viszonteladoknak-2\/\">\n                        For trade\n                    <\/a>\n\n                    <a href=\"https:\/\/hetvenhat.hu\/en\/kapcsolat-2\/\">\n                        Contact\n                    <\/a>\n\n                <\/nav>\n\n\n\n                <!-- HEADER ACTION -->\n\n                <div class=\"hh-header-action\">\n\n                    <a\n                        href=\"https:\/\/hetvenhat.hu\/en\/webshop-2\/\"\n                        class=\"hh-header-button\"\n                    >\n                        Online shop\n                    <\/a>\n\n\n                    <button\n                        class=\"hh-menu-button\"\n                        id=\"hhMenuButton\"\n                        aria-label=\"Menu\"\n                    >\n\n                        <span class=\"hh-menu-lines\">\n\n                            <span><\/span>\n\n                            <span><\/span>\n\n                            <span><\/span>\n\n                        <\/span>\n\n                    <\/button>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/header>\n\n\n\n        <!-- =================================================\n             HERO CONTENT\n        ================================================== -->\n\n        <div class=\"hh-hero-content-wrapper\">\n\n            <div class=\"hh-hero-inner\">\n\n                <div class=\"hh-hero-content\">\n\n\n                    <div class=\"hh-eyebrow\">\n\n                        Wine \u2022 experience \u2022 stories\n\n                    <\/div>\n\n\n\n                    <h1 class=\"hh-title\">\n\n                        More than wine.\n\n                        <span>\n                            Seventy-six.\n                        <\/span>\n\n                    <\/h1>\n\n\n\n                    <p class=\"hh-description\">\n\n                        V\u00e1logatott borok,\n                        k\u00fcl\u00f6nleges k\u00f3stol\u00f3k \u00e9s egy hely,\n                        ahol j\u00f3 meg\u00e1llni egy poh\u00e1rra.\n\n                    <\/p>\n\n\n\n                    <div class=\"hh-buttons\">\n\n\n                        <a\n                            href=\"https:\/\/hetvenhat.hu\/en\/kostolok\/\"\n                            class=\"hh-btn                                hh-btn-primary\"\n                        >\n\n                            Tastings\n\n                            <span class=\"hh-arrow\">\n                                \u2192\n                            <\/span>\n\n                        <\/a>\n\n\n                    <\/div>\n\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             SCROLL INDICATOR\n        ================================================== -->\n\n        <div class=\"hh-scroll\">\n\n            <div class=\"hh-scroll-line\"><\/div>\n\n            Scroll down\n\n        <\/div>\n\n\n    <\/section>\n\n\n\n\n\n    <!-- =====================================================\n         BEMUTATKOZ\u00c1S\n    ====================================================== -->\n\n    <section class=\"hh-about\" id=\"rolunk\">\n\n        <div class=\"hh-about-inner\">\n\n            <div class=\"hh-about-copy hh-reveal\">\n\n                <div class=\"hh-section-kicker\">\n                    Introduction\n                <\/div>\n\n                <h2 class=\"hh-about-title\">\n                    They are the <em>Seventy-six.<\/em>\n                <\/h2>\n\n                <p class=\"hh-about-lead\">\n                    Krut\u00e1k Zsolt \u00e9s Kiss Ferenc. K\u00e9t f\u00e9rfi, k\u00e9t garb\u00f3,\n                    indokolatlanul komoly arckifejez\u00e9s \u00e9s kurva sok v\u00e9lem\u00e9ny a borr\u00f3l.\n                    A Hetvenhat m\u00f6g\u00f6tt \u0151k \u00e1llnak \u2014 borokat v\u00e1logatnak, k\u00f3stol\u00f3kat tartanak,\n                    \u00e9s sz\u00fcks\u00e9g eset\u00e9n percekig k\u00e9pesek egy poharat a f\u00e9ny fel\u00e9 tartani.\n                <\/p>\n\n                <p class=\"hh-about-joke\">\n                    A r\u00e9szletes szakmai bemutatkoz\u00e1s \u00e9rkezik, amint siker\u00fcl r\u00f3luk olyan\n                    f\u00e9nyk\u00e9pet k\u00e9sz\u00edteni, amelyen egyik\u00fck sem \u00fagy n\u00e9z ki, mint egy francia\n                    m\u0171v\u00e9szfilm mell\u00e9kszerepl\u0151je.\n                <\/p>\n\n                <div class=\"hh-founders\">\n\n                    <div class=\"hh-founder\">\n                        <div class=\"hh-founder-name\">Krut\u00e1k Zsolt<\/div>\n                        <div class=\"hh-founder-role\">Seventy-Six \u2022 co-founder<\/div>\n                    <\/div>\n\n                    <div class=\"hh-founder\">\n                        <div class=\"hh-founder-name\">Kiss Ferenc<\/div>\n                        <div class=\"hh-founder-role\">Seventy-Six \u2022 co-founder<\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <div class=\"hh-about-visual hh-reveal\">\n\n                <div class=\"hh-about-photo-wrap\">\n\n                    <img decoding=\"async\"\n                        class=\"hh-about-photo\"\n                        src=\"https:\/\/hetvenhat.hu\/wp-content\/uploads\/2026\/08\/e48af5d1-1b7c-446c-adb9-e10ecdf2d04d.png\"\n                        alt=\"Krut\u00e1k Zsolt \u00e9s Kiss Ferenc\"\n                    >\n\n                    <div class=\"hh-photo-caption\">\n                        <div>\n                            <strong>Zsolt &amp; Ferenc<\/strong>\n                            <span>bor \u2022 turtleneck \u2022 questionable elegance<\/span>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"hh-about-stamp\">\n                    76\n                    <br>\n                    very\n                    <br>\n                    serious\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- =====================================================\n         MOBILE NAVIGATION\n    ====================================================== -->\n\n    <div\n        class=\"hh-mobile-nav\"\n        id=\"hhMobileNav\"\n    >\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/\">\n\n            <span>01<\/span>\n\n            Home\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/webshop-2\/\">\n\n            <span>02<\/span>\n\n            Online shop\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/kostolok\/\">\n\n            <span>03<\/span>\n\n            Tastings\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/boraszaink\/\">\n\n            <span>04<\/span>\n\n            Our winemakers\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/hirek-2\/\">\n\n            <span>05<\/span>\n\n            News\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/viszonteladoknak-2\/\">\n\n            <span>06<\/span>\n\n            For trade\n\n        <\/a>\n\n\n        <a href=\"https:\/\/hetvenhat.hu\/en\/kapcsolat-2\/\">\n\n            <span>07<\/span>\n\n            Contact\n\n        <\/a>\n\n\n    <\/div>\n\n\n<\/div>\n\n\n\n<script>\n(function () {\n\n    const button =\n        document.getElementById(\n            'hhMenuButton'\n        );\n\n    const menu =\n        document.getElementById(\n            'hhMobileNav'\n        );\n\n\n    if (!button || !menu) {\n        return;\n    }\n\n\n    button.addEventListener(\n        'click',\n        function () {\n\n            menu.classList.toggle(\n                'open'\n            );\n\n\n            if (\n                menu.classList.contains(\n                    'open'\n                )\n            ) {\n\n                document.body.style.overflow =\n                    'hidden';\n\n            } else {\n\n                document.body.style.overflow =\n                    '';\n\n            }\n\n        }\n    );\n\n\n    menu\n        .querySelectorAll('a')\n        .forEach(\n            function (link) {\n\n                link.addEventListener(\n                    'click',\n                    function () {\n\n                        menu.classList.remove(\n                            'open'\n                        );\n\n                        document.body.style.overflow =\n                            '';\n\n                    }\n                );\n\n            }\n        );\n\n\n    const revealItems = document.querySelectorAll('.hh-reveal');\n\n    if ('IntersectionObserver' in window && revealItems.length) {\n        const revealObserver = new IntersectionObserver(function(entries, observer) {\n            entries.forEach(function(entry) {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('is-visible');\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.16 });\n\n        revealItems.forEach(function(item) {\n            revealObserver.observe(item);\n        });\n    } else {\n        revealItems.forEach(function(item) {\n            item.classList.add('is-visible');\n        });\n    }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5613c99 elementor-widget elementor-widget-html\" data-id=\"5613c99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   HETVENHAT \u2014 BORB\u00c1R SECTION\r\n========================================================= *\/\r\n\r\n.hh-bar-section {\r\n    --hh-bar-bg: #070707;\r\n    --hh-bar-card: #0d0d0d;\r\n    --hh-bar-gold: #d9b568;\r\n    --hh-bar-gold-light: #efd28e;\r\n    --hh-bar-white: #f5f1e8;\r\n    --hh-bar-muted: rgba(255,255,255,.62);\r\n\r\n    position: relative;\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n\r\n    padding: 110px 0 125px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 80% 20%,\r\n            rgba(217,181,104,.06),\r\n            transparent 35%\r\n        ),\r\n        #070707;\r\n\r\n    color: var(--hh-bar-white);\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INNER\r\n========================================================= *\/\r\n\r\n.hh-bar-inner {\r\n    width: min(1500px, calc(100% - 100px));\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INTRO\r\n========================================================= *\/\r\n\r\n.hh-bar-heading-row {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0, .9fr)\r\n        minmax(380px, .7fr);\r\n\r\n    gap: 80px;\r\n\r\n    align-items: end;\r\n\r\n    margin-bottom: 55px;\r\n}\r\n\r\n\r\n.hh-bar-kicker {\r\n    margin-bottom: 18px;\r\n\r\n    color: var(--hh-bar-gold);\r\n\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 4px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.hh-bar-title {\r\n    margin: 0;\r\n\r\n    max-width: 850px;\r\n\r\n    font-family:\r\n        Georgia,\r\n        \"Times New Roman\",\r\n        serif;\r\n\r\n    font-size: clamp(55px, 5.4vw, 92px);\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: .94;\r\n\r\n    letter-spacing: -3px;\r\n}\r\n\r\n\r\n.hh-bar-title span {\r\n    color: var(--hh-bar-gold-light);\r\n}\r\n\r\n\r\n.hh-bar-intro {\r\n    margin: 0;\r\n\r\n    color: var(--hh-bar-muted);\r\n\r\n    font-size: 16px;\r\n\r\n    line-height: 1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BANNER\r\n========================================================= *\/\r\n\r\n.hh-bar-banner {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    min-height: 590px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #090909;\r\n}\r\n\r\n\r\n.hh-bar-image {\r\n    position: absolute;\r\n\r\n    inset: -5% 0;\r\n\r\n    width: 100%;\r\n    height: 110%;\r\n\r\n    object-fit: cover;\r\n\r\n    object-position: center center;\r\n\r\n    transform: scale(1.02);\r\n\r\n    transition:\r\n        transform 1.4s\r\n        cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.hh-bar-banner:hover .hh-bar-image {\r\n    transform: scale(1.055);\r\n}\r\n\r\n\r\n\/* IMAGE OVERLAY *\/\r\n\r\n.hh-bar-overlay {\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 2;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            to right,\r\n            rgba(0,0,0,.20),\r\n            rgba(0,0,0,.03) 50%,\r\n            rgba(0,0,0,.26)\r\n        ),\r\n\r\n        linear-gradient(\r\n            to bottom,\r\n            rgba(0,0,0,.08) 35%,\r\n            rgba(0,0,0,.82) 100%\r\n        );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LARGE NUMBER\r\n========================================================= *\/\r\n\r\n.hh-bar-number {\r\n    position: absolute;\r\n\r\n    z-index: 3;\r\n\r\n    top: 38px;\r\n    left: 42px;\r\n\r\n    color: rgba(255,255,255,.14);\r\n\r\n    font-family:\r\n        Georgia,\r\n        \"Times New Roman\",\r\n        serif;\r\n\r\n    font-size: clamp(80px, 10vw, 175px);\r\n\r\n    line-height: 1;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT ON IMAGE\r\n========================================================= *\/\r\n\r\n.hh-bar-banner-content {\r\n    position: absolute;\r\n\r\n    z-index: 5;\r\n\r\n    left: 45px;\r\n    right: 45px;\r\n    bottom: 42px;\r\n\r\n    display: flex;\r\n\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n\r\n    gap: 50px;\r\n}\r\n\r\n\r\n.hh-bar-caption {\r\n    max-width: 720px;\r\n}\r\n\r\n\r\n.hh-bar-caption-label {\r\n    margin-bottom: 13px;\r\n\r\n    color: var(--hh-bar-gold-light);\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.hh-bar-caption-title {\r\n    margin: 0;\r\n\r\n    font-family:\r\n        Georgia,\r\n        \"Times New Roman\",\r\n        serif;\r\n\r\n    font-size: clamp(31px, 3vw, 50px);\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.06;\r\n}\r\n\r\n\r\n.hh-bar-caption-text {\r\n    max-width: 600px;\r\n\r\n    margin: 16px 0 0;\r\n\r\n    color: rgba(255,255,255,.7);\r\n\r\n    font-size: 14px;\r\n\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INFO CARDS\r\n========================================================= *\/\r\n\r\n.hh-bar-info {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    gap: 1px;\r\n\r\n    margin-top: 1px;\r\n\r\n    background: rgba(255,255,255,.10);\r\n}\r\n\r\n\r\n.hh-bar-info-card {\r\n    min-height: 205px;\r\n\r\n    padding: 34px;\r\n\r\n    background: #0b0b0b;\r\n\r\n    transition:\r\n        background .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n\r\n.hh-bar-info-card:hover {\r\n    background: #101010;\r\n}\r\n\r\n\r\n.hh-bar-info-number {\r\n    margin-bottom: 24px;\r\n\r\n    color: rgba(217,181,104,.50);\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2px;\r\n}\r\n\r\n\r\n.hh-bar-info-label {\r\n    margin-bottom: 11px;\r\n\r\n    color: var(--hh-bar-gold-light);\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 2.5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.hh-bar-info-value {\r\n    margin: 0;\r\n\r\n    color: white;\r\n\r\n    font-family:\r\n        Georgia,\r\n        \"Times New Roman\",\r\n        serif;\r\n\r\n    font-size: 24px;\r\n\r\n    line-height: 1.35;\r\n}\r\n\r\n\r\n.hh-bar-info-small {\r\n    margin: 13px 0 0;\r\n\r\n    color: rgba(255,255,255,.50);\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.65;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ADDRESS LINK\r\n========================================================= *\/\r\n\r\n.hh-bar-address-link {\r\n    color: inherit;\r\n\r\n    text-decoration: none;\r\n\r\n    border-bottom:\r\n        1px solid rgba(217,181,104,.45);\r\n\r\n    transition:\r\n        color .25s ease,\r\n        border-color .25s ease;\r\n}\r\n\r\n\r\n.hh-bar-address-link:hover {\r\n    color: var(--hh-bar-gold-light);\r\n\r\n    border-color: var(--hh-bar-gold-light);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SILLY NOTE\r\n========================================================= *\/\r\n\r\n.hh-bar-note {\r\n    margin-top: 35px;\r\n\r\n    display: flex;\r\n\r\n    align-items: flex-start;\r\n\r\n    gap: 18px;\r\n\r\n    max-width: 850px;\r\n}\r\n\r\n\r\n.hh-bar-note-line {\r\n    width: 34px;\r\n    height: 1px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    margin-top: 10px;\r\n\r\n    background: var(--hh-bar-gold);\r\n}\r\n\r\n\r\n.hh-bar-note p {\r\n    margin: 0;\r\n\r\n    color: rgba(255,255,255,.48);\r\n\r\n    font-size: 13px;\r\n\r\n    font-style: italic;\r\n\r\n    line-height: 1.75;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n.hh-bar-reveal {\r\n    opacity: 0;\r\n\r\n    transform: translateY(45px);\r\n\r\n    transition:\r\n        opacity .9s ease,\r\n        transform 1s\r\n        cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.hh-bar-reveal.hh-visible {\r\n    opacity: 1;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1050px) {\r\n\r\n    .hh-bar-inner {\r\n        width: calc(100% - 60px);\r\n    }\r\n\r\n\r\n    .hh-bar-heading-row {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 28px;\r\n    }\r\n\r\n\r\n    .hh-bar-banner {\r\n        min-height: 520px;\r\n    }\r\n\r\n\r\n    .hh-bar-info {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n\r\n    .hh-bar-info-card:last-child {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .hh-bar-section {\r\n        padding:\r\n            75px\r\n            0\r\n            85px;\r\n    }\r\n\r\n\r\n    .hh-bar-inner {\r\n        width:\r\n            calc(100% - 34px);\r\n    }\r\n\r\n\r\n    .hh-bar-heading-row {\r\n        margin-bottom: 35px;\r\n    }\r\n\r\n\r\n    .hh-bar-kicker {\r\n        font-size: 9px;\r\n\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n\r\n    .hh-bar-title {\r\n        font-size:\r\n            clamp(\r\n                46px,\r\n                14vw,\r\n                65px\r\n            );\r\n\r\n        letter-spacing: -2px;\r\n    }\r\n\r\n\r\n    .hh-bar-intro {\r\n        font-size: 14px;\r\n\r\n        line-height: 1.7;\r\n    }\r\n\r\n\r\n    \/* MOBILE IMAGE *\/\r\n\r\n    .hh-bar-banner {\r\n        min-height: 620px;\r\n    }\r\n\r\n\r\n    .hh-bar-image {\r\n        inset: 0;\r\n\r\n        height: 100%;\r\n\r\n        object-position: 56% center;\r\n\r\n        transform: none;\r\n    }\r\n\r\n\r\n    .hh-bar-banner:hover .hh-bar-image {\r\n        transform: none;\r\n    }\r\n\r\n\r\n    .hh-bar-overlay {\r\n        background:\r\n\r\n            linear-gradient(\r\n                to bottom,\r\n                rgba(0,0,0,.03) 25%,\r\n                rgba(0,0,0,.22) 50%,\r\n                rgba(0,0,0,.96) 100%\r\n            );\r\n    }\r\n\r\n\r\n    .hh-bar-number {\r\n        top: 24px;\r\n        left: 22px;\r\n\r\n        font-size: 82px;\r\n    }\r\n\r\n\r\n    .hh-bar-banner-content {\r\n        left: 23px;\r\n        right: 23px;\r\n        bottom: 27px;\r\n\r\n        display: block;\r\n    }\r\n\r\n\r\n    .hh-bar-caption-title {\r\n        font-size: 34px;\r\n    }\r\n\r\n\r\n    .hh-bar-caption-text {\r\n        font-size: 13px;\r\n    }\r\n\r\n\r\n    \/* INFO *\/\r\n\r\n    .hh-bar-info {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n\r\n    .hh-bar-info-card:last-child {\r\n        grid-column: auto;\r\n    }\r\n\r\n\r\n    .hh-bar-info-card {\r\n        min-height: 0;\r\n\r\n        padding: 28px 24px;\r\n    }\r\n\r\n\r\n    .hh-bar-info-value {\r\n        font-size: 22px;\r\n    }\r\n\r\n\r\n    .hh-bar-note {\r\n        margin-top: 28px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .hh-bar-reveal {\r\n        opacity: 1;\r\n\r\n        transform: none;\r\n\r\n        transition: none;\r\n    }\r\n\r\n    .hh-bar-image {\r\n        transform: none !important;\r\n\r\n        transition: none !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<section\r\n    id=\"borbar\"\r\n    class=\"hh-bar-section\"\r\n>\r\n\r\n    <div class=\"hh-bar-inner\">\r\n\r\n\r\n        <!-- =============================\r\n             INTRO\r\n        ============================== -->\r\n\r\n        <div\r\n            class=\"hh-bar-heading-row                hh-bar-reveal\"\r\n        >\r\n\r\n\r\n            <div>\r\n\r\n                <div class=\"hh-bar-kicker\">\r\n                    Borb\u00e1r\r\n                <\/div>\r\n\r\n\r\n                <h2 class=\"hh-bar-title\">\r\n\r\n                    An espresso bar,\nwhich in the evening\r\n\r\n                    <span>\r\n                        he makes bad decisions.\r\n                    <\/span>\r\n\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <p class=\"hh-bar-intro\">\r\n\r\n                By day you order coffee at Kaffeine Espresso Bar. \n\nIn the evening, at the exact same counter, Zsolt and Feri are looking at you with unreasonably serious faces as they ask whether you can taste the wet stone in the wine.\r\n\r\n            <\/p>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =============================\r\n             IMAGE BANNER\r\n        ============================== -->\r\n\r\n        <div\r\n            class=\"hh-bar-banner                hh-bar-reveal\"\r\n        >\r\n\r\n\r\n            <img decoding=\"async\"\r\n                class=\"hh-bar-image\"\r\n                src=\"https:\/\/hetvenhat.hu\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-28-2026-01_31_32-PM.png\"\r\n                alt=\"Hetvenhat Borb\u00e1r\"\r\n            >\r\n\r\n\r\n            <div class=\"hh-bar-overlay\"><\/div>\r\n\r\n\r\n            <div class=\"hh-bar-number\">\r\n                76\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hh-bar-banner-content\">\r\n\r\n\r\n                <div class=\"hh-bar-caption\">\r\n\r\n                    <div class=\"hh-bar-caption-label\">\r\n                        Budapest \u2022 Seventy-six\r\n                    <\/div>\r\n\r\n\r\n                    <h3 class=\"hh-bar-caption-title\">\r\n\r\n                        The place where wine is more serious than us.\r\n\r\n                    <\/h3>\r\n\r\n\r\n                    <p class=\"hh-bar-caption-text\">\r\n\r\n                        Carefully selected wines,\r\n                        serious expressions,\r\n                        French snobs\r\n                        and completely gratuitous\r\n                        glass swirling.\r\n\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =============================\r\n             INFO\r\n        ============================== -->\r\n\r\n        <div\r\n            class=\"hh-bar-info                hh-bar-reveal\"\r\n        >\r\n\r\n\r\n            <!-- LOCATION -->\r\n\r\n            <div class=\"hh-bar-info-card\">\r\n\r\n                <div class=\"hh-bar-info-number\">\r\n                    01\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hh-bar-info-label\">\r\n                    Where?\r\n                <\/div>\r\n\r\n\r\n                <p class=\"hh-bar-info-value\">\r\n\r\n                    Kaffeine\r\n                    Espresso Bar\r\n\r\n                <\/p>\r\n\r\n\r\n                <p class=\"hh-bar-info-small\">\r\n\r\n                    <a class=\"hh-bar-address-link\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=Baross+utca+6+1088+Budapest\" target=\"_blank\" rel=\"noopener\">\r\n                        1088 Budapest,\nBaross utca 6.\r\n                    <\/a>\r\n\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- OPENING -->\r\n\r\n            <div class=\"hh-bar-info-card\">\r\n\r\n                <div class=\"hh-bar-info-number\">\r\n                    02\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hh-bar-info-label\">\r\n                    When?\r\n                <\/div>\r\n\r\n\r\n                <p class=\"hh-bar-info-value\">\r\n\r\n                    20:00 \u2013 24:00\r\n\r\n                <\/p>\r\n\r\n\r\n                <p class=\"hh-bar-info-small\">\r\n\r\n                    For now.\r\n\r\n                    If enough of you come along\r\n                    and drink a fair amount,\r\n                    we\u2019ll be forced to\r\n                    stay open longer.\r\n\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- PHILOSOPHY -->\r\n\r\n            <div class=\"hh-bar-info-card\">\r\n\r\n                <div class=\"hh-bar-info-number\">\r\n                    03\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hh-bar-info-label\">\r\n                    The plan\r\n                <\/div>\r\n\r\n\r\n                <p class=\"hh-bar-info-value\">\r\n\r\n                    First of all, this evening. Then we'll see.\r\n\r\n                <\/p>\r\n\r\n\r\n                <p class=\"hh-bar-info-small\">\r\n\r\n                    The current opening hours\r\n                    will remain in place\r\n                    until you realise\r\n                    that it\u2019s much better to have a drink here,\r\n                    than at home.\r\n\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =============================\r\n             FOOTNOTE\r\n        ============================== -->\r\n\r\n        <div\r\n            class=\"hh-bar-note                hh-bar-reveal\"\r\n        >\r\n\r\n            <div class=\"hh-bar-note-line\"><\/div>\r\n\r\n\r\n            <p>\r\n\r\n                * The longer opening hours are not scientifically guaranteed. They depend significantly on the number of guests, their wine consumption, and when Feri wants to go home or how pissed he got that day.\r\n\r\n            <\/p>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    const elements =\r\n        document.querySelectorAll(\r\n            '.hh-bar-reveal'\r\n        );\r\n\r\n\r\n    if (\r\n        !('IntersectionObserver' in window)\r\n    ) {\r\n\r\n        elements.forEach(function (element) {\r\n\r\n            element.classList.add(\r\n                'hh-visible'\r\n            );\r\n\r\n        });\r\n\r\n        return;\r\n    }\r\n\r\n\r\n    const observer =\r\n        new IntersectionObserver(\r\n            function (entries) {\r\n\r\n                entries.forEach(\r\n                    function (entry) {\r\n\r\n                        if (\r\n                            entry.isIntersecting\r\n                        ) {\r\n\r\n                            entry.target\r\n                                .classList\r\n                                .add(\r\n                                    'hh-visible'\r\n                                );\r\n\r\n                            observer.unobserve(\r\n                                entry.target\r\n                            );\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n            },\r\n            {\r\n                threshold: .14\r\n            }\r\n        );\r\n\r\n\r\n    elements.forEach(\r\n        function (element) {\r\n\r\n            observer.observe(\r\n                element\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* subtle image parallax *\/\r\n\r\n    const banner =\r\n        document.querySelector(\r\n            '.hh-bar-banner'\r\n        );\r\n\r\n    const image =\r\n        document.querySelector(\r\n            '.hh-bar-image'\r\n        );\r\n\r\n\r\n    if (\r\n        banner &&\r\n        image &&\r\n        !window.matchMedia(\r\n            '(prefers-reduced-motion: reduce)'\r\n        ).matches\r\n    ) {\r\n\r\n        window.addEventListener(\r\n            'scroll',\r\n            function () {\r\n\r\n                if (\r\n                    window.innerWidth < 768\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n\r\n                const rect =\r\n                    banner.getBoundingClientRect();\r\n\r\n\r\n                if (\r\n                    rect.bottom < 0 ||\r\n                    rect.top > window.innerHeight\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n\r\n                const progress =\r\n                    (\r\n                        window.innerHeight -\r\n                        rect.top\r\n                    )\r\n                    \/\r\n                    (\r\n                        window.innerHeight +\r\n                        rect.height\r\n                    );\r\n\r\n\r\n                const movement =\r\n                    (\r\n                        progress - .5\r\n                    ) * 34;\r\n\r\n\r\n                image.style.transform =\r\n                    'translateY(' +\r\n                    movement +\r\n                    'px) scale(1.04)';\r\n\r\n            },\r\n            {\r\n                passive: true\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>76 HETVENHAT WINE BAR &#038; WEBSHOP F\u0151oldal Webshop K\u00f3stol\u00f3k Bor\u00e1szaink H\u00edrek Viszontelad\u00f3knak Kapcsolat Webshop Bor \u2022 \u00e9lm\u00e9ny \u2022 t\u00f6rt\u00e9netek T\u00f6bb, mint bor. Hetvenhat. V\u00e1logatott borok, k\u00fcl\u00f6nleges k\u00f3stol\u00f3k \u00e9s egy hely, ahol j\u00f3 meg\u00e1llni egy poh\u00e1rra. K\u00f3stol\u00f3k \u2192 G\u00f6rgess tov\u00e1bb Bemutatkoz\u00e1s \u0150k a Hetvenhat. Krut\u00e1k Zsolt \u00e9s Kiss Ferenc. K\u00e9t f\u00e9rfi, k\u00e9t garb\u00f3, indokolatlanul komoly arckifejez\u00e9s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":70,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/5\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}