{"id":6,"date":"2026-09-26T16:14:06","date_gmt":"2026-09-26T16:14:06","guid":{"rendered":"https:\/\/homemetal.ro\/?page_id=6"},"modified":"2026-09-26T16:56:04","modified_gmt":"2026-09-26T16:56:04","slug":"elementor-6","status":"publish","type":"page","link":"https:\/\/homemetal.ro\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0561c87 e-con-full e-flex e-con e-parent\" data-id=\"0561c87\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-649a74f elementor-widget elementor-widget-html\" data-id=\"649a74f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"ro\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>UNIC HOME \u2014 De la structur\u0103 la cas\u0103<\/title>\n<meta name=\"description\" content=\"UNIC HOME \u2014 structuri metalice \u0219i case complete. Noul website este \u00een preg\u0103tire.\">\n\n<!-- FONT -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* =========================\n   RESET\n========================= *\/\n\n:root {\n    --dark: #1d211f;\n    --dark-soft: #252a27;\n    --mineral: #f3f1eb;\n    --green: #819184;\n    --green-dark: #4f5b50;\n    --steel: #a5aaa6;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml {\n    width: 100%;\n    min-height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    scroll-behavior: smooth;\n}\n\nbody {\n    width: 100%;\n    min-height: 100%;\n    font-family: \"Manrope\", Arial, sans-serif;\n    background: var(--dark);\n    color: var(--mineral);\n    overflow-x: hidden;\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n}\n\n\n\/* =========================\n   MAIN WRAPPER\n========================= *\/\n\n.site-wrapper {\n    position: relative;\n    width: 100%;\n    min-height: 100vh;\n    min-height: 100svh;\n    background: var(--dark);\n}\n\n\n\/* =========================\n   BACKGROUND GRID\n========================= *\/\n\n.background-grid {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    pointer-events: none;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,0.045) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,0.045) 1px,\n            transparent 1px\n        );\n\n    background-size: 90px 90px;\n}\n\n\n\/* =========================\n   DECORATIVE STRUCTURE\n========================= *\/\n\n.structure-art {\n    position: absolute;\n    z-index: 1;\n    right: -7%;\n    top: 22%;\n    width: 48%;\n    height: 68%;\n    opacity: 0.42;\n    pointer-events: none;\n}\n\n.structure-art .vertical,\n.structure-art .horizontal {\n    position: absolute;\n    background: rgba(243,241,235,0.20);\n}\n\n.structure-art .vertical {\n    width: 1px;\n    height: 100%;\n    top: 0;\n}\n\n.structure-art .v1 { left: 10%; }\n.structure-art .v2 { left: 40%; }\n.structure-art .v3 { left: 70%; }\n.structure-art .v4 { left: 100%; }\n\n.structure-art .horizontal {\n    width: 100%;\n    height: 1px;\n    left: 0;\n}\n\n.structure-art .h1 { top: 10%; }\n.structure-art .h2 { top: 40%; }\n.structure-art .h3 { top: 70%; }\n.structure-art .h4 { top: 100%; }\n\n.structure-art .diagonal {\n    position: absolute;\n    width: 125%;\n    height: 1px;\n    left: -12%;\n    top: 52%;\n    background: rgba(129,145,132,0.75);\n    transform: rotate(-45deg);\n}\n\n\n\/* =========================\n   HEADER\n========================= *\/\n\n.site-header {\n    position: relative;\n    z-index: 10;\n\n    width: 100%;\n    padding: 38px 5vw;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.brand {\n    display: flex;\n    align-items: center;\n    gap: 17px;\n}\n\n\n\/* SIMPLE TEMPORARY MARK *\/\n\n.brand-mark {\n    position: relative;\n    width: 38px;\n    height: 38px;\n    flex: 0 0 38px;\n}\n\n.brand-mark::before,\n.brand-mark::after {\n    content: \"\";\n    position: absolute;\n    width: 20px;\n    height: 29px;\n}\n\n.brand-mark::before {\n    left: 0;\n    bottom: 0;\n\n    border-left: 2px solid var(--mineral);\n    border-bottom: 2px solid var(--mineral);\n    border-right: 2px solid var(--mineral);\n}\n\n.brand-mark::after {\n    right: 0;\n    top: 0;\n\n    border-left: 2px solid var(--green);\n    border-top: 2px solid var(--green);\n    border-right: 2px solid var(--green);\n}\n\n.brand-name {\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: 0.22em;\n    line-height: 1;\n    white-space: nowrap;\n}\n\n.brand-name span {\n    font-weight: 300;\n}\n\n\n\/* STATUS *\/\n\n.status {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    color: var(--steel);\n\n    font-size: 11px;\n    font-weight: 400;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.status-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: var(--green);\n}\n\n\n\/* =========================\n   HERO\n========================= *\/\n\n.hero {\n    position: relative;\n    z-index: 5;\n\n    width: 100%;\n    min-height: calc(100vh - 115px);\n\n    display: flex;\n    align-items: center;\n\n    padding:\n        clamp(50px, 8vh, 100px)\n        5vw\n        clamp(70px, 10vh, 120px);\n}\n\n.hero-content {\n    position: relative;\n    z-index: 5;\n\n    width: 100%;\n    max-width: 1180px;\n}\n\n\n\/* EYEBROW *\/\n\n.eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    margin-bottom: 34px;\n\n    color: var(--green);\n\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.22em;\n    text-transform: uppercase;\n}\n\n.eyebrow::before {\n    content: \"\";\n    display: block;\n    width: 45px;\n    height: 1px;\n    background: var(--green);\n}\n\n\n\/* TITLE *\/\n\n.hero h1 {\n    max-width: 1050px;\n\n    font-size: clamp(60px, 8vw, 128px);\n    line-height: 0.93;\n    letter-spacing: -0.055em;\n    font-weight: 300;\n}\n\n.hero h1 .accent {\n    color: var(--green);\n}\n\n\n\/* DESCRIPTION *\/\n\n.hero-description {\n    max-width: 650px;\n    margin-top: 42px;\n\n    color: rgba(243,241,235,0.76);\n\n    font-size: 18px;\n    line-height: 1.7;\n    font-weight: 300;\n}\n\n\n\/* =========================\n   SERVICES\n========================= *\/\n\n.services {\n    width: 100%;\n    max-width: 800px;\n\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n\n    gap: 14px;\n    margin-top: 52px;\n}\n\n.service-card {\n    position: relative;\n\n    padding: 25px 26px;\n\n    border: 1px solid rgba(243,241,235,0.16);\n\n    background: rgba(255,255,255,0.025);\n\n    transition:\n        background 0.3s ease,\n        border-color 0.3s ease,\n        transform 0.3s ease;\n}\n\n.service-card:hover {\n    background: rgba(255,255,255,0.055);\n    border-color: rgba(129,145,132,0.55);\n    transform: translateY(-3px);\n}\n\n.service-number {\n    display: block;\n\n    margin-bottom: 12px;\n\n    color: var(--green);\n\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.20em;\n}\n\n.service-title {\n    display: block;\n\n    color: var(--mineral);\n\n    font-size: 16px;\n    font-weight: 500;\n    letter-spacing: 0.07em;\n    text-transform: uppercase;\n}\n\n.service-text {\n    margin-top: 8px;\n\n    color: rgba(243,241,235,0.56);\n\n    font-size: 13px;\n    line-height: 1.55;\n}\n\n\n\/* =========================\n   COMING SOON\n========================= *\/\n\n.coming-soon {\n    position: relative;\n    z-index: 5;\n\n    width: 100%;\n\n    padding: 80px 5vw;\n\n    background: var(--mineral);\n    color: var(--dark);\n}\n\n.coming-inner {\n    max-width: 1180px;\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns: 0.7fr 1.3fr;\n    gap: 80px;\n    align-items: start;\n}\n\n.coming-label {\n    color: var(--green-dark);\n\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.20em;\n    text-transform: uppercase;\n}\n\n.coming-text {\n    max-width: 720px;\n\n    font-size: clamp(28px, 3vw, 46px);\n    line-height: 1.22;\n    letter-spacing: -0.035em;\n    font-weight: 300;\n}\n\n.coming-text strong {\n    font-weight: 500;\n}\n\n\n\/* =========================\n   FOOTER\n========================= *\/\n\n.site-footer {\n    position: relative;\n    z-index: 5;\n\n    width: 100%;\n\n    padding: 28px 5vw;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    border-top: 1px solid rgba(243,241,235,0.12);\n\n    background: var(--dark);\n\n    color: rgba(243,241,235,0.45);\n\n    font-size: 10px;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n}\n\n\n\/* =========================\n   TABLET\n========================= *\/\n\n@media (max-width: 900px) {\n\n    .structure-art {\n        right: -25%;\n        width: 75%;\n        opacity: 0.25;\n    }\n\n    .coming-inner {\n        grid-template-columns: 1fr;\n        gap: 30px;\n    }\n\n}\n\n\n\/* =========================\n   MOBILE\n========================= *\/\n\n@media (max-width: 650px) {\n\n    .background-grid {\n        background-size: 52px 52px;\n    }\n\n    \/* HEADER *\/\n\n    .site-header {\n        padding: 24px 22px;\n    }\n\n    .brand {\n        gap: 12px;\n    }\n\n    .brand-mark {\n        width: 32px;\n        height: 32px;\n        flex-basis: 32px;\n    }\n\n    .brand-mark::before,\n    .brand-mark::after {\n        width: 17px;\n        height: 24px;\n    }\n\n    .brand-name {\n        font-size: 15px;\n        letter-spacing: 0.15em;\n    }\n\n    .status {\n        display: none;\n    }\n\n\n    \/* HERO *\/\n\n    .hero {\n        min-height: auto;\n\n        display: block;\n\n        padding:\n            65px\n            22px\n            70px;\n    }\n\n    .eyebrow {\n        gap: 12px;\n        margin-bottom: 25px;\n\n        font-size: 11px;\n        letter-spacing: 0.17em;\n    }\n\n    .eyebrow::before {\n        width: 27px;\n    }\n\n    .hero h1 {\n        width: 100%;\n\n        font-size: clamp(53px, 16vw, 74px);\n        line-height: 0.96;\n        letter-spacing: -0.05em;\n    }\n\n    .hero-description {\n        width: 100%;\n        max-width: 100%;\n\n        margin-top: 30px;\n\n        font-size: 16px;\n        line-height: 1.65;\n    }\n\n\n    \/* SERVICES *\/\n\n    .services {\n        grid-template-columns: 1fr;\n\n        gap: 10px;\n        margin-top: 36px;\n    }\n\n    .service-card {\n        padding: 20px;\n    }\n\n    .service-number {\n        margin-bottom: 8px;\n    }\n\n    .service-title {\n        font-size: 15px;\n    }\n\n    .service-text {\n        font-size: 13px;\n    }\n\n\n    \/* STRUCTURE GRAPHIC *\/\n\n    .structure-art {\n        top: 350px;\n        right: -50%;\n        width: 110%;\n        height: 500px;\n        opacity: 0.18;\n    }\n\n\n    \/* LIGHT SECTION *\/\n\n    .coming-soon {\n        padding: 65px 22px;\n    }\n\n    .coming-inner {\n        display: block;\n    }\n\n    .coming-label {\n        margin-bottom: 25px;\n    }\n\n    .coming-text {\n        font-size: 30px;\n        line-height: 1.3;\n    }\n\n\n    \/* FOOTER *\/\n\n    .site-footer {\n        padding: 24px 22px;\n\n        display: block;\n\n        line-height: 1.8;\n    }\n\n    .site-footer div:last-child {\n        margin-top: 5px;\n    }\n\n}\n\n\n\/* =========================\n   VERY SMALL PHONES\n========================= *\/\n\n@media (max-width: 380px) {\n\n    .hero h1 {\n        font-size: 49px;\n    }\n\n    .hero {\n        padding-left: 18px;\n        padding-right: 18px;\n    }\n\n    .site-header {\n        padding-left: 18px;\n        padding-right: 18px;\n    }\n\n}\n\n<\/style>\n<\/head>\n\n\n<body>\n\n<div class=\"site-wrapper\">\n\n    <!-- BACKGROUND -->\n    <div class=\"background-grid\"><\/div>\n\n\n    <!-- ABSTRACT METAL STRUCTURE -->\n    <div class=\"structure-art\" aria-hidden=\"true\">\n\n        <span class=\"vertical v1\"><\/span>\n        <span class=\"vertical v2\"><\/span>\n        <span class=\"vertical v3\"><\/span>\n        <span class=\"vertical v4\"><\/span>\n\n        <span class=\"horizontal h1\"><\/span>\n        <span class=\"horizontal h2\"><\/span>\n        <span class=\"horizontal h3\"><\/span>\n        <span class=\"horizontal h4\"><\/span>\n\n        <span class=\"diagonal\"><\/span>\n\n    <\/div>\n\n\n    <!-- HEADER -->\n\n    <header class=\"site-header\">\n\n        <div class=\"brand\">\n\n            <div class=\"brand-mark\" aria-hidden=\"true\"><\/div>\n\n            <div class=\"brand-name\">\n                UNIC <span>HOME<\/span>\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"status\">\n\n            <span class=\"status-dot\"><\/span>\n\n            Un nou website prinde form\u0103\n\n        <\/div>\n\n    <\/header>\n\n\n    <!-- HERO -->\n\n    <main>\n\n        <section class=\"hero\">\n\n            <div class=\"hero-content\">\n\n                <div class=\"eyebrow\">\n                    \u00cen cur\u00e2nd\n                <\/div>\n\n\n                <h1>\n                    De la\n                    <span class=\"accent\">structur\u0103<\/span><br>\n                    la cas\u0103.\n                <\/h1>\n\n\n                <p class=\"hero-description\">\n                    Producem structuri metalice \u0219i construim mai departe,\n                    p\u00e2n\u0103 la casa complet\u0103. Un proces precis, de la proiect\n                    la realitate.\n                <\/p>\n\n\n                <div class=\"services\">\n\n\n                    <div class=\"service-card\">\n\n                        <span class=\"service-number\">\n                            01\n                        <\/span>\n\n                        <span class=\"service-title\">\n                            Structuri metalice\n                        <\/span>\n\n                        <p class=\"service-text\">\n                            Produc\u021bie \u00b7 transport \u00b7 montaj\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"service-card\">\n\n                        <span class=\"service-number\">\n                            02\n                        <\/span>\n\n                        <span class=\"service-title\">\n                            Case complete\n                        <\/span>\n\n                        <p class=\"service-text\">\n                            De la structur\u0103 p\u00e2n\u0103 la finisaj\n                        <\/p>\n\n                    <\/div>\n\n\n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n\n        <!-- SECOND SECTION -->\n\n        <section class=\"coming-soon\">\n\n            <div class=\"coming-inner\">\n\n                <div class=\"coming-label\">\n                    UNIC HOME\n                <\/div>\n\n\n                <div class=\"coming-text\">\n                    Un spa\u021biu dedicat tehnologiei, preciziei \u0219i unui mod contemporan de a construi \u2014 de la produc\u021bia structurii metalice p\u00e2n\u0103 la realizarea casei complete.\n                    <br><br>Noul website va fi disponibil \u00een cur\u00e2nd.\n                 \n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n    <\/main>\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"site-footer\">\n\n        <div>\n            \u00a9 2026 UNIC HOME\n        <\/div>\n\n        <div>\n            Arhitectur\u0103 \u00b7 Structur\u0103 \u00b7 Construc\u021bie\n        <\/div>\n\n    <\/footer>\n\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UNIC HOME \u2014 De la structur\u0103 la cas\u0103 UNIC HOME Un nou website prinde form\u0103 \u00cen cur\u00e2nd De la structur\u0103 la cas\u0103. Producem structuri metalice \u0219i construim mai departe, p\u00e2n\u0103 la casa complet\u0103. Un proces precis, de la proiect la realitate. 01 Structuri metalice Produc\u021bie \u00b7 transport \u00b7 montaj 02 Case complete De la structur\u0103 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/homemetal.ro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":17,"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/homemetal.ro\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/homemetal.ro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}