/* ============================================================ مكتب زكي محمد البريكي للاستشارات الهندسية Zaki Mohammed Alburaiki Consultant Office — site stylesheet ============================================================ */ @font-face{ font-family:'Cairo'; src:url('../fonts/cairo-sub.woff2') format('woff2'); font-weight:200 1000; font-style:normal; font-display:swap; } @font-face{ font-family:'Amiri'; src:url('../fonts/amiri-sub.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } :root{ --wrap:1500px; --nav-h:74px; --navy:#1E4380; --navy-deep:#16305C; --bronze:#A87C48; --bronze-strong:#8F6534; --greige:#D3D1C4; --bg:#F1EFE7; --panel:#E6E3D7; --card:#FBFAF5; --ink:#1B2B4A; --ink-soft:#54607C; --line:rgba(27,43,74,.16); --on-navy:#F4F2EA; --on-navy-soft:#B9C2D8; --shadow:0 18px 40px -22px rgba(22,48,92,.35); } @media (prefers-color-scheme: dark){ :root{ --bg:#0F1C36; --panel:#152647; --card:#182B4F; --ink:#EBE8DC; --ink-soft:#A7B0C6; --line:rgba(235,232,220,.16); --bronze:#C69A62; --bronze-strong:#D8B080; --shadow:0 18px 40px -22px rgba(0,0,0,.6); } } *{box-sizing:border-box} html,body{margin:0; padding:0} body{ background:var(--bg); color:var(--ink); font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif; line-height:1.85; font-size:16px; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:inherit} /* ---- language switching (data-lang lives on ) ---- */ html[data-lang="ar"] .en{display:none !important} html[data-lang="en"] .ar{display:none !important} /* =================== NAVBAR =================== */ .navbar{ position:sticky; top:0; z-index:60; color:var(--on-navy); background:linear-gradient(180deg, rgba(18,40,78,.92) 0%, rgba(18,40,78,.78) 100%); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid rgba(244,242,234,.1); transition:box-shadow .3s ease, background .3s ease; } .navbar.scrolled{ background:rgba(15,33,64,.94); box-shadow:0 10px 34px -18px rgba(0,0,0,.75); } .nav-inner{ max-width:var(--wrap); margin:0 auto; padding:0 28px; height:var(--nav-h); display:flex; align-items:center; gap:20px; transition:height .3s ease; } .navbar.scrolled .nav-inner{height:62px} .brand{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-inline-end:auto; min-width:0; } .brand img{ width:44px; height:44px; flex:none; transition:transform .35s ease; } .brand:hover img{transform:rotate(-6deg) scale(1.05)} .brand b{font-size:15px; font-weight:800; line-height:1.35; display:block; letter-spacing:.005em} .brand small{ color:var(--on-navy-soft); font-size:10.5px; display:block; letter-spacing:.14em; text-transform:uppercase; font-weight:500; } .brand .en + small, .brand small.en{letter-spacing:.1em} .nav-links{display:flex; gap:2px; align-items:center; list-style:none; margin:0; padding:0} .nav-links a{ position:relative; text-decoration:none; color:var(--on-navy-soft); font-size:14.5px; font-weight:600; padding:10px 16px; border-radius:10px; transition:color .22s ease, background .22s ease; } .nav-links a::after{ content:""; position:absolute; bottom:4px; inset-inline:16px; height:2px; background:var(--bronze); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .28s cubic-bezier(.4,0,.2,1); } .nav-links a:hover{color:var(--on-navy); background:rgba(244,242,234,.07)} .nav-links a:hover::after{transform:scaleX(1)} .nav-links a[aria-current="page"]{color:#fff} .nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-links a:focus-visible{outline:2px solid var(--bronze); outline-offset:-2px} .lang-btn{ appearance:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--on-navy); background:transparent; border:1px solid rgba(244,242,234,.34); border-radius:999px; padding:8px 18px; margin-inline-start:10px; letter-spacing:.06em; transition:background .22s ease, border-color .22s ease, color .22s ease; } .lang-btn:hover{background:var(--bronze); border-color:var(--bronze); color:#fff} .lang-btn:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} .nav-burger{ display:none; appearance:none; background:transparent; cursor:pointer; border:1px solid rgba(244,242,234,.28); border-radius:10px; width:44px; height:44px; color:var(--on-navy); align-items:center; justify-content:center; transition:background .2s; } .nav-burger:hover{background:rgba(244,242,234,.1)} .nav-burger svg{width:24px; height:24px} .nav-burger:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} @media (max-width:1000px){ .nav-inner{padding:0 18px; gap:12px} .nav-burger{display:flex} .nav-links{ position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; background:rgba(15,33,64,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:10px 16px 18px; gap:2px; border-bottom:1px solid rgba(244,242,234,.12); box-shadow:0 20px 40px -22px rgba(0,0,0,.8); display:none; } .nav-links.open{display:flex; animation:navDrop .28s ease} @keyframes navDrop{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}} .nav-links a{padding:13px 14px} .nav-links a::after{inset-inline:14px; bottom:8px} .nav-links li:last-child{margin-top:8px} .lang-btn{margin-inline-start:14px} .brand b{font-size:13.5px} .brand small{font-size:9.5px} } @media (prefers-reduced-motion: reduce){ .navbar,.nav-inner,.brand img,.nav-links a,.nav-links a::after{transition:none} .nav-links.open{animation:none} } /* =================== HERO =================== */ .hero{ position:relative; background:var(--navy-deep); color:var(--on-navy); min-height:78vh; display:flex; align-items:center; overflow:hidden; } .hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35; } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,48,92,.25) 0%, rgba(22,48,92,.78) 100%); } .hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:80px 20px; width:100%; } .hero .eyebrow{ color:var(--bronze); font-weight:700; font-size:13.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px; } .hero h1{ margin:0 0 14px; font-size:clamp(28px,4.6vw,50px); font-weight:800; line-height:1.35; max-width:18em; text-wrap:balance; } .hero p{ margin:0 0 30px; color:var(--on-navy-soft); font-size:clamp(15.5px,2vw,19px); font-weight:300; max-width:36em; } .btn-row{display:flex; gap:14px; flex-wrap:wrap} .btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:12px 30px; border-radius:10px; transition:transform .2s, background .2s, color .2s; } .btn:hover{transform:translateY(-2px)} .btn:focus-visible{outline:2px solid var(--on-navy); outline-offset:2px} .btn.primary{background:var(--bronze); color:#fff} .btn.primary:hover{background:var(--bronze-strong)} .btn.ghost{border:1.5px solid rgba(244,242,234,.6); color:var(--on-navy)} .btn.ghost:hover{background:rgba(244,242,234,.12)} /* page-header hero (inner pages) */ .page-hero{ background:var(--navy-deep); color:var(--on-navy); position:relative; overflow:hidden; padding:64px 20px 56px; text-align:center; } .page-hero::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:44px 44px; } .page-hero .eyebrow{ position:relative; color:var(--bronze); font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:10px; } .page-hero h1{ position:relative; margin:0; font-size:clamp(26px,4vw,42px); font-weight:800; line-height:1.4; } .page-hero p{ position:relative; color:var(--on-navy-soft); font-weight:300; margin:12px auto 0; max-width:44em; font-size:16.5px; } /* =================== STATS BAND =================== */ .stats-band{background:var(--navy); color:var(--on-navy)} .stats-inner{ max-width:var(--wrap); margin:0 auto; padding:34px 20px; display:flex; justify-content:space-around; gap:24px; flex-wrap:wrap; } .stat{text-align:center; min-width:130px} .stat b{ display:block; font-size:clamp(28px,3.6vw,40px); font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; } .stat b i{font-style:normal} .stat b span{color:var(--bronze)} .stat small{color:var(--on-navy-soft); font-size:13.5px} /* =================== SECTIONS =================== */ .section{max-width:var(--wrap); margin:0 auto; padding:clamp(52px,8vw,92px) 20px 0} .section:last-of-type{padding-bottom:clamp(52px,8vw,92px)} .sec-head{margin-bottom:clamp(24px,4vw,40px)} .sec-num{ color:var(--bronze-strong); font-weight:700; font-size:13px; letter-spacing:.24em; text-transform:uppercase; display:flex; align-items:center; gap:14px; margin-bottom:10px; } .sec-num::after{content:""; height:1px; width:56px; background:var(--bronze); opacity:.55} h2{margin:0; font-size:clamp(23px,3.4vw,34px); font-weight:800; line-height:1.4; text-wrap:balance} .sec-lead{color:var(--ink-soft); max-width:46em; margin:10px 0 0; font-weight:300; font-size:16.5px} .center .sec-num{justify-content:center} .center .sec-num::after{display:none} .center{text-align:center} .center .sec-lead{margin-inline:auto} /* =================== CARDS =================== */ .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px} .svc-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px 24px; transition:transform .25s ease, box-shadow .25s ease; } .svc-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)} .svc-ico{ width:48px; height:48px; border-radius:10px; margin-bottom:16px; background:color-mix(in srgb, var(--navy) 10%, transparent); color:var(--navy); display:grid; place-items:center; } @media (prefers-color-scheme: dark){ .svc-ico{background:rgba(198,154,98,.14); color:var(--bronze)} } .svc-ico svg{width:25px; height:25px} .svc-card h3{margin:0 0 8px; font-size:18px; font-weight:700} .svc-card p{margin:0; color:var(--ink-soft); font-size:14.5px; font-weight:300; line-height:1.9} .uniq-card{border-top:2px solid var(--bronze); padding:20px 2px 0; background:transparent} .uniq-card b{display:block; font-size:17px; font-weight:700; margin-bottom:8px; line-height:1.55} .uniq-card p{margin:0; color:var(--ink-soft); font-size:14.5px; font-weight:300; line-height:1.85} .note-strip{ margin-top:24px; padding:16px 20px; border-inline-start:3px solid var(--bronze); background:color-mix(in srgb, var(--bronze) 8%, transparent); border-radius:8px; color:var(--ink-soft); font-size:14.5px; font-weight:300; } /* =================== ABOUT =================== */ .about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:start} .about-text p{margin:0 0 1.1em; max-width:40em} .cred-list{display:flex; flex-direction:column; gap:14px} .cred{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; } .cred-dot{ flex:none; width:34px; height:34px; border-radius:50%; margin-top:3px; background:color-mix(in srgb, var(--bronze) 16%, transparent); color:var(--bronze-strong); display:grid; place-items:center; font-weight:800; font-size:15px; } .cred b{display:block; font-size:15.5px; font-weight:700} .cred small{color:var(--ink-soft); font-size:13.5px; line-height:1.6; display:block} .timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(34px,5vw,52px)} .tl-item{position:relative; border-top:2px solid var(--line); padding-top:16px} .tl-item::before{ content:""; position:absolute; top:-6px; inset-inline-start:0; width:10px; height:10px; border-radius:50%; background:var(--bronze); } .tl-item b{ display:block; font-size:22px; font-weight:800; color:var(--bronze-strong); font-variant-numeric:tabular-nums; line-height:1.4; } .tl-item span{color:var(--ink-soft); font-size:14.5px; font-weight:300; line-height:1.8; display:block} .founder-panel{background:var(--panel); margin-top:clamp(44px,6vw,72px)} .founder-panel .section{padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px)} .quote{ font-family:'Amiri',Georgia,'Times New Roman',serif; font-size:clamp(19px,2.7vw,25px); font-weight:400; line-height:2.05; max-width:42em; margin:0; } .quote .en{line-height:1.9} .quote-mark{color:var(--bronze); font-size:64px; line-height:0; display:block; height:34px; font-family:Georgia,serif} .founder-sig{margin-top:26px; display:flex; align-items:center; gap:16px} .founder-sig .bar{width:44px; height:2px; background:var(--bronze)} .founder-sig b{display:block; font-size:16px} .founder-sig small{color:var(--ink-soft)} .vmv-card{ border-radius:12px; padding:26px 24px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); } .vmv-card.navy{background:var(--navy); border-color:transparent; color:var(--on-navy)} .vmv-card.bronze{background:var(--bronze); border-color:transparent; color:#FFF9EF} .vmv-card.navy .vmv-label,.vmv-card.bronze .vmv-label{color:rgba(255,255,255,.78)} .vmv-label{ font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-strong); font-weight:700; margin-bottom:12px; } .vmv-card p{margin:0; font-weight:300; font-size:15.5px; line-height:1.9} .vmv-card.bronze p{font-weight:400} .values-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px} .value-chip{ border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:4px 14px; font-size:14px; font-weight:700; } /* =================== GALLERY =================== */ .work-cat{margin-top:clamp(30px,4vw,46px)} .work-cat:first-of-type{margin-top:0} .work-cat-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:12px; } .work-cat-head .idx{color:var(--bronze-strong); font-weight:800; font-size:14px; letter-spacing:.1em} .work-cat-head h3{margin:0; font-size:clamp(18px,2.6vw,22px); font-weight:800} .shot{ margin:0; border-radius:12px; overflow:hidden; background:var(--card); border:1px solid var(--line); display:block; text-decoration:none; color:inherit; transition:box-shadow .25s ease, transform .25s ease; } a.shot:hover{box-shadow:var(--shadow); transform:translateY(-2px)} a.shot:focus-visible{outline:2px solid var(--bronze); outline-offset:3px} .shot .frame{aspect-ratio:16/10; overflow:hidden} .shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease} .shot:hover img{transform:scale(1.035)} .shot .cap{padding:12px 16px; display:flex; justify-content:space-between; gap:12px; align-items:baseline} .shot .cap b{font-size:14.5px; font-weight:700} .shot .cap small{color:var(--bronze-strong); font-size:12.5px; white-space:nowrap; font-weight:700} /* =================== PROJECT GALLERY =================== */ .filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,4vw,36px); } .filter{ appearance:none; cursor:pointer; font:inherit; font-size:14px; font-weight:700; color:var(--ink-soft); background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 20px; transition:background .2s, color .2s, border-color .2s; } .filter:hover{color:var(--ink); border-color:var(--bronze)} .filter.on{background:var(--navy); border-color:var(--navy); color:var(--on-navy)} .filter:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} .proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,34px)} .proj{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .proj:hover{box-shadow:var(--shadow); transform:translateY(-4px); border-color:transparent} .proj[hidden]{display:none} /* single-image stage with cross-fading slideshow on hover */ .proj-stage{ appearance:none; border:0; padding:0; margin:0; cursor:pointer; display:block; position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--panel); } .proj-stage .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .75s ease, transform 6s linear; } .proj-stage .layer.on{opacity:1} .proj:hover .proj-stage .layer.on{transform:scale(1.045)} .proj-stage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,24,48,0) 45%, rgba(11,24,48,.55) 100%); opacity:0; transition:opacity .35s ease; } .proj:hover .proj-stage::after{opacity:1} .proj-stage:focus-visible{outline:3px solid var(--bronze); outline-offset:-3px} .proj-badge{ position:absolute; top:14px; inset-inline-start:14px; z-index:3; display:inline-flex; align-items:center; gap:7px; background:rgba(11,24,48,.62); color:#F4F2EA; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(244,242,234,.22); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; letter-spacing:.02em; } .proj-badge svg{width:14px; height:14px; opacity:.9} .proj-hint{ position:absolute; z-index:3; bottom:14px; inset-inline-start:14px; color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; } .proj:hover .proj-hint{opacity:1; transform:none} .proj-hint svg{width:16px; height:16px} /* progress dots for the running slideshow */ .proj-dots{ position:absolute; z-index:3; bottom:16px; inset-inline-end:14px; display:flex; gap:5px; opacity:0; transition:opacity .35s ease; } .proj:hover .proj-dots{opacity:1} .proj-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.42); transition:background .3s ease, transform .3s ease; } .proj-dots i.on{background:var(--bronze); transform:scale(1.4)} .proj-meta{padding:18px 22px 20px; display:flex; align-items:baseline; gap:14px} .proj-meta h3{margin:0; font-size:17.5px; font-weight:800; line-height:1.5} .proj-meta p{margin:0; color:var(--ink-soft); font-size:13.5px; font-weight:300; margin-inline-start:auto; white-space:nowrap} @media (max-width:900px){ .proj-meta{flex-direction:column; align-items:flex-start; gap:3px} .proj-meta p{margin-inline-start:0; white-space:normal} } @media (prefers-reduced-motion: reduce){ .proj-stage .layer{transition:opacity .2s ease} .proj:hover .proj-stage .layer.on{transform:none} .proj:hover{transform:none} } .no-results{text-align:center; color:var(--ink-soft); padding:40px 0; font-weight:300} /* =================== LIGHTBOX =================== */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(9,18,36,.97); display:grid; grid-template-rows:auto 1fr auto; color:#F4F2EA; } .lightbox[hidden]{display:none} .lb-bar{ display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid rgba(244,242,234,.14); } .lb-title{margin-inline-end:auto; min-width:0} .lb-title b{display:block; font-size:16px; font-weight:800; line-height:1.5} .lb-title small{display:block; color:#B9C2D8; font-size:12.5px; font-weight:300} .lb-count{ font-size:14px; font-weight:700; color:#B9C2D8; white-space:nowrap; font-variant-numeric:tabular-nums; direction:ltr; } .lb-close{ appearance:none; cursor:pointer; border:0; border-radius:999px; flex:none; width:40px; height:40px; display:grid; place-items:center; background:rgba(244,242,234,.12); color:#F4F2EA; } .lb-close:hover{background:var(--bronze)} .lb-close svg{width:20px; height:20px} .lb-close:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} .lb-stage{ position:relative; display:grid; place-items:center; padding:20px; min-height:0; } .lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; appearance:none; cursor:pointer; border:0; border-radius:999px; width:48px; height:48px; display:grid; place-items:center; background:rgba(244,242,234,.14); color:#F4F2EA; transition:background .2s; } .lb-nav:hover:not(:disabled){background:var(--bronze)} .lb-nav:disabled{opacity:.25; cursor:default} .lb-nav svg{width:24px; height:24px} .lb-nav:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} .lb-nav.prev{inset-inline-start:16px} .lb-nav.next{inset-inline-end:16px} html[dir="rtl"] .lb-nav svg{transform:scaleX(-1)} .lb-strip{ display:flex; gap:8px; padding:12px 16px 16px; overflow-x:auto; border-top:1px solid rgba(244,242,234,.14); scrollbar-width:thin; } .lb-strip button{ appearance:none; border:0; padding:0; cursor:pointer; flex:none; width:96px; height:64px; border-radius:6px; overflow:hidden; opacity:.5; transition:opacity .2s, box-shadow .2s; background:#132445; } .lb-strip button img{width:100%; height:100%; object-fit:cover} .lb-strip button:hover{opacity:.85} .lb-strip button.on{opacity:1; box-shadow:0 0 0 2px var(--bronze)} .lb-strip button:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} @media (max-width:680px){ .lb-nav{width:40px; height:40px} .lb-nav.prev{inset-inline-start:6px} .lb-nav.next{inset-inline-end:6px} .lb-strip button{width:72px; height:50px} .lb-title b{font-size:14.5px} .lb-stage{padding:10px} } @media (prefers-reduced-motion: reduce){ .ph img,.proj{transition:none} .ph:hover img{transform:none} } /* =================== CTA BAND =================== */ .cta-band{background:var(--navy); color:var(--on-navy); margin-top:clamp(52px,8vw,92px)} .cta-inner{ max-width:var(--wrap); margin:0 auto; padding:clamp(40px,6vw,64px) 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cta-inner h2{color:var(--on-navy); font-size:clamp(21px,3vw,30px)} .cta-inner p{color:var(--on-navy-soft); margin:6px 0 0; font-weight:300} /* =================== CONTACT =================== */ .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .contact-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px 24px; } .contact-card .c-label{ display:block; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-strong); margin-bottom:14px; font-weight:700; } .contact-card a{display:block; text-decoration:none; margin-bottom:8px; font-size:15.5px; direction:ltr; unicode-bidi:isolate; text-align:start} .contact-card a:hover{color:var(--bronze-strong)} .contact-card p{margin:0 0 6px; font-weight:300; font-size:15px; line-height:1.9} .contact-card small{color:var(--ink-soft); font-size:12.5px; display:block; margin-bottom:8px} .wa-btn{ display:inline-block; text-decoration:none; background:var(--bronze); color:#fff !important; font-weight:700; font-size:14px; border-radius:8px; padding:8px 18px; margin-top:4px; } .wa-btn:hover{background:var(--bronze-strong)} /* =================== FOOTER =================== */ .footer{background:var(--navy-deep); color:var(--on-navy); margin-top:clamp(56px,9vw,100px)} .cta-band + .footer{margin-top:0} .footer-inner{ max-width:var(--wrap); margin:0 auto; padding:48px 20px 30px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; } .footer .f-brand img{width:64px; margin-bottom:14px} .footer .f-brand p{color:var(--on-navy-soft); font-weight:300; font-size:14px; margin:0; max-width:26em} .footer h4{ margin:0 0 14px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); font-weight:700; } .footer ul{list-style:none; margin:0; padding:0} .footer li{margin-bottom:8px} .footer a{color:var(--on-navy-soft); text-decoration:none; font-size:14.5px; font-weight:300} .footer a:hover{color:var(--on-navy)} .footer .num{direction:ltr; unicode-bidi:isolate; display:inline-block} .footer-bottom{ border-top:1px solid rgba(244,242,234,.14); max-width:var(--wrap); margin:0 auto; padding:18px 20px 26px; color:var(--on-navy-soft); font-size:13px; font-weight:300; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .footer-bottom .copy{margin:0} .legal-links{display:flex; align-items:center; gap:6px; flex-wrap:wrap} .legal-links a{ color:var(--on-navy-soft); text-decoration:none; font-size:13px; font-weight:400; padding:4px 2px; border-radius:4px; } .legal-links a:hover{color:var(--on-navy); text-decoration:underline; text-underline-offset:3px} .legal-links a:focus-visible{outline:2px solid var(--bronze); outline-offset:2px} .legal-links a + a::before{ content:"·"; color:rgba(244,242,234,.4); margin-inline-end:8px; display:inline-block; } @media (max-width:680px){ .footer-bottom{flex-direction:column; text-align:center; gap:10px} .legal-links{justify-content:center} } /* =================== LEGAL PAGES =================== */ .legal{max-width:820px} .legal h2{ font-size:clamp(18px,2.4vw,22px); font-weight:800; line-height:1.5; margin:clamp(28px,4vw,40px) 0 10px; } .legal h2:first-of-type{margin-top:0} .legal p{margin:0 0 1em; color:var(--ink-soft); font-weight:300; max-width:70ch} .legal a{color:var(--bronze-strong); text-decoration:underline; text-underline-offset:3px} .legal a:hover{color:var(--navy)} @media (prefers-color-scheme: dark){ .legal a:hover{color:var(--on-navy)} } .legal .updated{ display:inline-block; font-size:13px; font-weight:600; color:var(--bronze-strong); background:color-mix(in srgb, var(--bronze) 12%, transparent); border-radius:999px; padding:5px 16px; margin-bottom:8px; } .legal code{ font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,monospace; font-size:.9em; background:color-mix(in srgb, var(--navy) 9%, transparent); padding:2px 7px; border-radius:5px; direction:ltr; unicode-bidi:isolate; } @media (prefers-color-scheme: dark){ .legal code{background:rgba(244,242,234,.1)} } .pref-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin:22px 0 8px; } .pref-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); } .pref-info b{display:block; font-size:16px; font-weight:700; margin-bottom:4px} .pref-info small{color:var(--ink-soft); font-size:13.5px; font-weight:300; line-height:1.8; display:block} .pref-state{ flex:none; font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 14px; background:color-mix(in srgb, var(--bronze) 15%, transparent); color:var(--bronze-strong); white-space:nowrap; } .pref-msg{margin:14px 0 0 !important; font-size:14px; font-weight:600; color:var(--bronze-strong); min-height:1.2em} .pref-msg:empty{margin:0 !important; min-height:0} /* =================== REVEAL =================== */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1; transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} .shot img{transition:none} .btn:hover{transform:none} } /* =================== RESPONSIVE =================== */ @media (max-width:920px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .contact-grid{grid-template-columns:1fr} } @media (max-width:680px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .proj-grid{grid-template-columns:1fr} .about-grid{grid-template-columns:1fr} .timeline{grid-template-columns:1fr; gap:16px} .footer-inner{grid-template-columns:1fr; gap:26px} .hero{min-height:64vh} }