/* ===================================================================== GOLDEN BROKER BROTHERS, közös stíluslap Arculat: "Swiss private banking × modern luxury" (BUILD_PROMPT §4) Használat: minden oldal -jébe: ===================================================================== */ :root{ --gold:#C9A55A; /* elsődleges arany akcent */ --gold-dark:#A9863F; --gold-soft:#e3cd9e; --ink:#14110D; /* meleg feketésbarna, főcímek/sötét blokk */ --charcoal:#232323; --text:#2C2C2C; /* törzsszöveg */ --muted:#6E6A62; --line:#E7DDC8; /* arany-halvány elválasztó */ --bg:#F7F6F3; /* off-white háttér */ --card:#FBFAF7; --white:#FFFFFF; --fh:'Playfair Display',Georgia,'Times New Roman',serif; --fb:'Montserrat','Helvetica Neue',Arial,sans-serif; --maxw:1080px; --dark-grad:linear-gradient(135deg,#232323 0%,#14110D 100%); --dark-grad-hero:linear-gradient(150deg,#2b2822 0%,#232323 45%,#14110D 100%); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--fb);color:var(--text);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--fh);color:var(--ink);font-weight:600;line-height:1.2} h1{font-size:clamp(32px,5.2vw,50px)} h2{font-size:clamp(25px,4vw,35px)} h3{font-size:clamp(19px,3vw,24px)} p{margin:0 0 1em} a{color:var(--ink);text-decoration:none} img{max-width:100%;height:auto;display:block} strong{font-weight:600} /* Layout helpers */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px} section{padding:78px 0} .muted{color:var(--muted)} .center{text-align:center} .small{font-size:14px} .eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold-dark);font-weight:700;margin-bottom:12px} .dark .eyebrow,.hero .eyebrow,.band .eyebrow,.pagehead .eyebrow{color:var(--gold)} .gold-rule{width:56px;height:2px;background:var(--gold);border:0;margin:0 0 22px} .center .gold-rule{margin-left:auto;margin-right:auto} /* Buttons */ .btn{display:inline-block;font-family:var(--fb);font-weight:600;border-radius:4px;padding:15px 30px;font-size:15px;transition:.2s;cursor:pointer;border:1px solid var(--gold);text-align:center} .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff} .btn-ghost{background:transparent;color:var(--gold-dark)} .btn-ghost:hover{background:rgba(201,165,90,.12)} .dark .btn-ghost,.hero .btn-ghost,.band .btn-ghost{color:var(--gold);border-color:var(--gold)} .dark .btn-ghost:hover,.hero .btn-ghost:hover,.band .btn-ghost:hover{background:rgba(201,165,90,.15)} .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} /* Header / nav */ header.nav{position:sticky;top:0;background:rgba(20,17,13,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,165,90,.28);z-index:40} .nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;gap:16px;max-width:1300px} .brand{display:flex;align-items:center;gap:11px;color:#fff} .brand .mark{width:34px;height:34px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-family:var(--fh);flex:0 0 34px} .brand b{font-size:13.5px;letter-spacing:.5px;color:#fff;font-weight:600;font-family:var(--fb);white-space:nowrap} .brand .sub{display:block;font-size:8px;letter-spacing:2.4px;color:var(--gold);text-transform:uppercase} .navlinks{display:flex;gap:17px;font-size:13.5px;align-items:center;white-space:nowrap} .navlinks a{color:#e9e5db} .navlinks a:hover,.navlinks a.active{color:var(--gold)} .nav-right{display:flex;align-items:center;gap:16px} .nav .btn{padding:11px 20px} /* Language switcher */ .langsw{display:flex;gap:1px;align-items:center;font-size:11.5px;letter-spacing:.04em} .langsw a{color:#9a958a;padding:3px 5px;text-transform:uppercase;border-radius:3px} .langsw a:hover{color:var(--gold)} .langsw a.active{color:var(--ink);background:var(--gold);font-weight:600} .langsw .sep{color:#5a564d} /* Mobile nav toggle */ .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex:0 0 auto} .navtoggle span{display:block;width:24px;height:2px;background:var(--gold);margin:5px 0;transition:.2s} /* Hero + page head (dark blocks) */ .hero,.pagehead{background:var(--dark-grad-hero);color:#fff;position:relative;overflow:hidden} .hero{text-align:center;padding:96px 0 88px} .pagehead{text-align:center;padding:74px 0 62px} .hero::after,.pagehead::after{content:"";position:absolute;right:-12%;top:-28%;width:600px;height:600px;background:radial-gradient(circle,rgba(201,165,90,.16),transparent 62%);pointer-events:none} .hero::before,.pagehead::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6} .hero .wrap,.pagehead .wrap{position:relative;z-index:1} .hero h1,.pagehead h1{color:#fff;max-width:880px;margin:0 auto} .hero p.lead{font-size:20px;color:#ddd8ce;max-width:700px;margin:20px auto 0} .pagehead p{font-size:19px;color:#ddd8ce;max-width:680px;margin:16px auto 0} .hero .cta-row{justify-content:center} .trust{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:52px} .trust div b{display:block;font-size:23px;color:var(--gold);font-family:var(--fh)} .trust div span{font-size:12px;letter-spacing:.5px;color:#b6b1a6} /* Sections + surfaces */ .alt{background:var(--white)} .dark{background:var(--dark-grad);color:#fff} .dark h1,.dark h2,.dark h3{color:#fff} .dark p{color:#d7d2c7} /* Grid + cards */ .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px} .alt .card{background:var(--bg)} .card.feature{border-top:3px solid var(--gold)} .ic{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;font-family:var(--fh)} /* Clean lists */ ul.clean{list-style:none;display:grid;gap:13px;margin:18px 0} ul.clean li{padding-left:28px;position:relative} ul.clean li:before{content:"\2726";position:absolute;left:0;color:var(--gold-dark)} .dark ul.clean li:before{color:var(--gold)} /* Tables */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0} .tablewrap table.t{margin:0} @media(max-width:640px){.tablewrap table.t{min-width:520px}} table.t{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px} table.t th{background:var(--ink);color:#fff;text-align:left;padding:13px 15px;font-family:var(--fb);font-weight:600} table.t td{padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top} table.t tr:nth-child(even) td{background:var(--bg)} .alt table.t tr:nth-child(even) td{background:#faf8f2} /* CTA band */ .band{background:var(--dark-grad);color:#fff;text-align:center} .band h2{color:#fff;max-width:700px;margin:0 auto 14px} .band p{color:#d7d2c7;max-width:640px;margin:0 auto 24px} .band .cta-row{justify-content:center} /* Forms */ form.lead-form{display:grid;gap:13px;max-width:520px} form.lead-form input,form.lead-form select,form.lead-form textarea{padding:14px;border:1px solid var(--line);border-radius:5px;font-family:var(--fb);font-size:15px;background:#fff;width:100%;color:var(--text)} form.lead-form textarea{min-height:120px;resize:vertical} form.lead-form input:focus,form.lead-form select:focus,form.lead-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)} .gdpr{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;margin:2px 0} .gdpr a{color:var(--gold-dark);text-decoration:underline} .dark .gdpr,.form-box .gdpr{color:#b6b1a6}.dark .gdpr a,.form-box .gdpr a{color:var(--gold)} .form-box{max-width:560px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(201,165,90,.35);border-radius:10px;padding:34px} .form-box input{width:100%;padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:5px;font-family:var(--fb);font-size:15px;margin-bottom:13px;background:rgba(255,255,255,.06);color:#fff} .form-box input::placeholder{color:#b6b1a6} .form-box .btn{width:100%} /* Accordion (native details) */ details{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:0;margin-bottom:11px;overflow:hidden} .alt details{background:var(--bg)} details summary{font-weight:600;color:var(--ink);cursor:pointer;font-size:16px;list-style:none;padding:18px 22px;position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px} details summary::-webkit-details-marker{display:none} details summary:after{content:"+";color:var(--gold-dark);font-size:22px;font-weight:400;flex:0 0 auto;transition:.2s} details[open] summary:after{transform:rotate(45deg)} details .detail-body{padding:0 22px 20px} details .detail-body p:last-child{margin-bottom:0} /* Breadcrumbs */ .crumbs{font-size:13px;color:var(--muted);padding:16px 0 0} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--gold-dark)} .crumbs .sep{margin:0 8px;color:var(--line)} /* Photo placeholders */ .photo{position:relative;border-radius:10px;overflow:hidden;background:var(--dark-grad);min-height:220px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .photo span{color:var(--gold);font-size:13px;letter-spacing:.5px;text-align:center;padding:12px;opacity:.85} .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo.tall{min-height:320px} .photostrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .photostrip.four{grid-template-columns:repeat(4,1fr)} .photostrip .photo{min-height:160px} /* Team */ .team{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:30px;text-align:left} .member{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;gap:18px;align-items:flex-start} .alt .member{background:var(--bg)} .avatar{flex:0 0 84px;width:84px;height:84px;border-radius:50%;background:var(--dark-grad);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:10px;text-align:center;overflow:hidden} .member h3{margin:0 0 2px;font-size:19px} .member .role{color:var(--gold-dark);font-weight:600;font-size:13px;margin-bottom:8px;font-family:var(--fb)} .member p{font-size:14.5px;margin:0} /* Note / callout box */ .note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;padding:18px 22px;font-size:14.5px;color:var(--muted)} .note strong{color:var(--text)} /* Steps */ .steps{counter-reset:step;display:grid;gap:20px} /* Footer */ footer{background:var(--ink);color:#b6b1a6;padding:48px 0 28px;font-size:14px} .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;margin-bottom:28px} footer .brand b{color:#fff} footer a{color:#b6b1a6} footer a:hover{color:var(--gold)} footer h4{color:var(--gold);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;font-family:var(--fb);font-weight:700} footer .col a{display:block;padding:3px 0} .foot-bottom{border-top:1px solid #2c2820;padding-top:20px;font-size:12px;color:#8a857a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} .disclaimer{max-width:var(--maxw);margin:14px auto 0;padding:0 24px;color:#6f6a5f;font-size:11px;line-height:1.65} /* Cookie consent banner */ #cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:780px;margin:0 auto;background:#14110D;color:#e9e5db;border:1px solid var(--gold);border-radius:10px;padding:18px 20px;font-size:13px;z-index:60;display:none;box-shadow:0 8px 34px rgba(0,0,0,.45)} #cookie.show{display:block} #cookie .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} #cookie a{color:var(--gold);text-decoration:underline} #cookie button{font-family:var(--fb);font-weight:600;border-radius:4px;padding:9px 16px;font-size:13px;cursor:pointer;border:1px solid var(--gold)} #cookie .acc{background:var(--gold);color:#14110D} #cookie .acc:hover{background:var(--gold-dark);color:#fff} #cookie .dec{background:transparent;color:var(--gold)} /* Utility */ .mt-0{margin-top:0}.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:40px} .maxw-660{max-width:660px} .pill{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-weight:600} /* Responsive */ /* Nav vált hamburgerre, amikor a teljes menü már nem férne el (8 menüpont + Blog + CTA + nyelvváltó) */ @media(max-width:1220px){ .navtoggle{display:block;order:3} .navlinks{position:fixed;top:64px;left:0;right:0;background:#14110D;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;border-bottom:1px solid rgba(201,165,90,.28);display:none;max-height:calc(100vh - 64px);overflow:auto} .navlinks.open{display:flex} .navlinks a{padding:12px 24px;width:100%} .nav-right{gap:12px} } @media(max-width:860px){ .grid-3,.grid-4{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} section{padding:56px 0} .hero{padding:70px 0 62px} .team{grid-template-columns:1fr} .photostrip,.photostrip.four{grid-template-columns:1fr 1fr} } /* Nyelvváltó a mobil legördülőben */ .langsw-mobile{display:none} @media(max-width:1220px){ .nav-right .langsw{display:none} .langsw-mobile{display:flex;padding:14px 24px;border-top:1px solid rgba(201,165,90,.18);margin-top:6px} } /* Nagyon szűk mobilon a fejléc-sáv csak márka + hamburger; a CTA a menübe kerül */ .nav-cta-mobile{display:none} @media(max-width:620px){ .brand .sub{display:none} .brand b{font-size:12.5px} .nav-right .btn{display:none} .nav-cta-mobile{display:block;margin:12px 24px;width:calc(100% - 48px);text-align:center} } @media(max-width:520px){ .photostrip,.photostrip.four{grid-template-columns:1fr} .trust{gap:26px} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}