/* ========================================================= NMVISUALS — MAPA DO STYLE.CSS 00 · CONFIGURAÇÃO RÁPIDA ← CORES / FONTES / MEDIDAS GERAIS 01 · BASE 02 · NAVEGAÇÃO 03 · HOME + 3D HIGHLIGHTS 04 · JOURNAL 05 · 3D PROJECTS 06 · ARCHITECTURE PHOTOGRAPHY 07 · AI WORKFLOW 08 · CASUAL GALLERY 09 · ARTIGOS 10 · LIGHTBOX 11 · COMMENTS / CONTACT 12 · RESPONSIVE REGRA PARA LEIGOS: 1. Cores, fonte e medidas gerais: alterar apenas as variáveis em :root. 2. Aspeto de uma secção: procurar o número e o nome no índice acima. 3. Os blocos finais com !important são correções de compatibilidade. Não os duplicar nem mover sem testar computador, tablet e telemóvel. ========================================================= */ :root{ /* CORES PRINCIPAIS — ALTERAR AQUI */ --ink:#171717; --paper:#ffffff; --soft:#777777; --line:#e5e5e5; --charcoal:#1b1b1b; --gallery-line:#eceee9; --gallery-line-size:3px; --filter-active:#9b3f36; /* CORES DE DESTAQUE */ --accent:#ffffff; --accent-1:#ffffff; --accent-2:#ffffff; --accent-3:#ffffff; --accent-4:#ffffff; /* FONTE PRINCIPAL — ALTERAR AQUI Montserrat é carregada no do index.html. Arial é usada automaticamente se Montserrat não carregar. */ --font-main:Montserrat,Arial,sans-serif; --font-body-size:14px; --font-lead-size:18px; /* LAYOUT GERAL — ALTERAR AQUI */ --page-padding-desktop:8vw; --page-padding-mobile:7vw; --header-height:74px; --header-height-mobile:66px; } /* ========================================================= MORADIA FOZ DO ARELHO · REPORTAGEM EDITORIAL Máximo visual de 3 colunas; texto integrado na sequência. ========================================================= */ body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .standalone-article .article-panel-body{ width:min(1540px,94vw) !important; max-width:none !important; margin:0 auto !important; padding:26px 0 120px !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; grid-auto-flow:row dense !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; gap:22px !important; border:0 !important; overflow:visible !important; background:#fff !important; align-items:stretch !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-child(n){ grid-column:span 2; min-width:0; height:clamp(300px,27vw,510px) !important; min-height:0 !important; margin:0 !important; border:0 !important; background:#f2f2f0 !important; overflow:hidden !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(1){grid-column:span 3;} body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(2){grid-column:span 2;} body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(3){grid-column:span 1;} body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(4), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(5), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(9n+6), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(9n+7){ grid-column:span 3; height:clamp(360px,36vw,650px) !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(9n+8){grid-column:span 4;} body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(9n+9){grid-column:span 2;} body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure > img{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; border:0 !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy{ grid-column:span 3; max-width:none !important; min-height:clamp(360px,36vw,650px); margin:0 !important; padding:clamp(26px,3.2vw,58px) clamp(18px,2.5vw,46px) !important; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; color:#111; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro h2{ margin:16px 0 0 !important; font-size:clamp(42px,5.1vw,84px) !important; line-height:.94 !important; letter-spacing:-.045em !important; font-weight:500 !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro h2 br{ display:none; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro p{ max-width:620px !important; margin-top:24px !important; font-size:14px !important; line-height:1.7 !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy{ font-size:13px !important; line-height:1.72 !important; justify-content:center; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy > p{ max-width:720px; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy p + p{ margin-top:18px !important; } @media (max-width:980px){ body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-child(n), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(n), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy{ grid-column:span 1; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(4n+1), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(4n+4){ grid-column:span 2; } } @media (max-width:620px){ body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .standalone-article .article-panel-body{ width:calc(100vw - 28px) !important; padding:14px 0 70px !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery{ grid-template-columns:1fr !important; gap:12px !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-child(n), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-of-type(n), body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy{ grid-column:1 !important; min-height:0; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-gallery > figure:nth-child(n){ height:auto !important; aspect-ratio:4 / 3; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro, body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-copy{ padding:36px 12px !important; } body.standalone-article-page:is([data-current-article="moradia-foz-do-arelho"],[data-current-article="miradouro-do-zebro"]) .reportage-intro h2{ font-size:clamp(38px,13vw,58px) !important; } } /* ========================================================= MIRADOURO DO ZEBRO · REPORTAGEM FIXA Duas imagens de igual dimensão, pela ordem numérica. ========================================================= */ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:row !important; gap:22px !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > figure, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > figure:nth-child(n), body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > figure:nth-of-type(n){ grid-column:span 1 !important; width:100% !important; height:auto !important; aspect-ratio:4 / 3 !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > figure > img{ width:100% !important; height:100% !important; object-fit:cover !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > .reportage-copy{ grid-column:span 1 !important; min-height:0 !important; aspect-ratio:4 / 3; } @media (max-width:620px){ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery{ grid-template-columns:1fr !important; gap:12px !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .zebro-reportage-gallery > .reportage-copy{ grid-column:1 !important; aspect-ratio:auto; } } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family:var(--font-main); font-size:var(--font-body-size); line-height: 1.7; } body.menu-open{ overflow: hidden; } img{ display: block; width: 100%; height: auto; } a{ color: inherit; text-decoration: none; } button{ font: inherit; } /* ========================================================= 01A · LIGAÇÕES DOS SITES NA SECÇÃO CONTACTO Estava no HTML; fica aqui para concentrar todo o aspeto no CSS. ========================================================= */ .contact-sites{ margin:.35rem 0 1rem; font:inherit; } .contact-sites a{ color:inherit; text-decoration:none; } .contact-sites a:hover, .contact-sites a:focus-visible{ text-decoration:underline; } /* NAVIGATION */ .topbar{ position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: stretch; background: rgba(255,255,255,.96); border-bottom: none; } .menu-toggle{ margin-left: auto; width: 74px; border: 0; background: var(--accent); padding: 23px 24px; cursor: pointer; } .menu-toggle span{ display: block; height: 1px; background: #fff; margin: 6px 0; transition: .25s; } .menu-toggle:hover{ background: color-mix(in srgb,var(--accent) 88%,#000); } .overlay-menu{ position: fixed; z-index: 200; inset: 0; background: rgba(15,15,15,.62); opacity: 0; visibility: hidden; transition: .32s ease; } .overlay-menu.open{ opacity: 1; visibility: visible; } .menu-panel{ position: absolute; top: 0; right: 0; height: 100%; width: min(520px,92vw); background: #fff; color: #171717; padding: 90px 65px 45px; transform: translateX(100%); transition: .42s cubic-bezier(.7,0,.2,1); display: flex; flex-direction: column; } .overlay-menu.open .menu-panel{ transform: none; } .menu-close{ position: absolute; z-index: 2; right: 24px; top: 17px; border: 0; background: transparent; color: #171717; font-size: 44px; line-height: 1; cursor: pointer; font-weight: 200; } .menu{ display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,.22); } .menu a{ font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -.6px; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,.22); transition: .2s; } .menu a span{ display: inline-block; width: 42px; font-size: 9px; letter-spacing: 1px; opacity: .65; vertical-align: middle; } .menu a:hover{ padding-left: 8px; } /* 00 · HOME */ .hero{ height: 100vh; min-height: 680px; position: relative; overflow: hidden; color: #fff; background: #111; } .hero-content{ position: absolute; left: 8vw; top: 50%; transform: translateY(-42%); /* LARGURA DO TÍTULO PRINCIPAL 900px mantém “& REAL ESTATE” na mesma linha em ecrãs grandes. O texto descritivo continua limitado separadamente a 570px. */ max-width: 900px; } .eyebrow{ font-size: 10px; font-weight: 600; letter-spacing: 3px; margin: 0 0 21px; color: rgba(255,255,255,.83); } h1, h2{ font-weight: 600; line-height: .98; letter-spacing: -2.7px; margin: 0; } h1{ font-size: clamp(52px,7.1vw,106px); } h1 strong{ color: var(--accent); font-weight: 600; } .hero-copy{ font-size: 16px; max-width: 570px; margin: 30px 0; color: rgba(255,255,255,.87); } .line-link{ display: inline-flex; gap: 18px; align-items: center; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 1.7px; border-bottom: 1px solid currentColor; padding-bottom: 7px; } .hero-quote{ position: absolute; right: 6vw; top: 28%; text-align: right; text-transform: uppercase; font-size: 9px; line-height: 1.7; letter-spacing: 1.8px; } .section{ position: relative; padding: 125px 8vw; } .white-section{ background: #fff; } /* 05 · CASUAL GALLERY */ .projects-section{ display: grid; grid-template-columns: 170px minmax(300px,470px) 1fr; column-gap: 5vw; } .section-index{ padding-top: 7px; text-transform: uppercase; } .section-index strong{ display: block; font-size: 42px; line-height: 1; font-weight: 300; color: #d8d8d8; } .section-index span{ display: block; margin-top: 13px; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; } .section-index.light strong{ color: rgba(255,255,255,.3); } .section-index.light span{ color: #fff; } .section-heading h2{ font-size: clamp(44px,5.4vw,76px); } .accent{ color: var(--accent); } .accent-light{ color: var(--accent); } .section-copy{ padding-top: 4px; } .lead{ font-size: 18px; line-height: 1.58; max-width: 710px; margin-top: 0; } .section-heading.light h2{ color: #fff; } .projects-section{ grid-template-rows: auto auto auto; } .project-grid{ grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 45px; } .charcoal-section{ background: var(--charcoal); color: #fff; } footer{ height: 82px; background: #111; color: #aaa; display: flex; justify-content: space-between; align-items: center; padding: 0 8vw; font-size: 8px; text-transform: uppercase; letter-spacing: 1.2px; } @media (max-width:1100px) { .projects-section{ grid-template-columns: 110px 1fr; } .section-heading{ grid-column: 2; } .section-copy{ grid-column: 2; margin-top: 52px; } .project-grid{ grid-column: 1/-1; grid-template-columns: repeat(2,1fr); } .hero-quote{ display: none; } } @media (max-width:720px) { .topbar{ height: 66px; } .brand{ min-width: 0; padding: 0 16px; } .brand-text strong{ font-size: 12px; } .brand-text small{ font-size: 6px; } .menu-toggle{ width: 66px; padding: 20px; } .menu-panel{ padding: 82px 28px 35px; } .menu a{ font-size: 25px; } .hero{ min-height: 620px; } .hero-content{ left: 7vw; right: 7vw; } .section{ padding: 88px 7vw; } .projects-section{ display: block; } .section-index{ margin-bottom: 32px; } .section-index strong{ font-size: 30px; } .section-heading h2{ font-size: 46px; } .section-copy{ margin-top: 42px; } .project-grid{ display: block; margin-top: 32px; } footer{ padding: 0 7vw; } .hero-copy{ font-size: 14px; } } .projects-section{ padding-bottom: 0; } .project-grid{ grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 45px -8vw 0; } @media (max-width:1100px) { .project-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); margin-left: -8vw; margin-right: -8vw; } } @media (max-width:720px) { .project-grid{ display: grid; grid-template-columns: 1fr; margin: 32px -7vw 0; } } /* COMPONENT · LIGHTBOX */ .lightbox{ position: fixed; z-index: 500; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s ease,visibility .25s ease; touch-action: pan-y; } .lightbox.open{ opacity: 1; visibility: visible; } .lightbox-stage{ position: relative; display: flex; align-items: center; justify-content: center; width: calc(100vw - 150px); height: calc(100vh - 80px); } .lightbox-image{ display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .lightbox-close{ position: absolute; z-index: 3; top: 18px; right: 24px; border: 0; background: transparent; color: #fff; font-size: 46px; font-weight: 200; line-height: 1; cursor: pointer; padding: 4px 8px; } .lightbox-prev{ left: 22px; } .lightbox-next{ right: 22px; } body.lightbox-open{ overflow: hidden; } @media (max-width:720px) { .lightbox-stage{ width: 100vw; height: 100vh; padding: 54px 0 46px; } .lightbox-image{ max-width: 100vw; max-height: calc(100vh - 100px); } .lightbox-close{ top: 8px; right: 10px; font-size: 42px; } .lightbox-prev{ left: 8px; } .lightbox-next{ right: 8px; } } .project-grid{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 10vw; grid-auto-flow: dense; } @media (max-width:1100px) { .project-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 13vw; } } @media (max-width:720px) { .project-grid{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 34vw; grid-auto-flow: dense; } } .projects-section{ padding-bottom: 0 !important; } .project-grid{ grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; margin: 45px -8vw 0 !important; align-items: stretch !important; background: #111; } @media (max-width:1100px) { .project-grid{ margin-left: -8vw !important; margin-right: -8vw !important; } } @media (max-width:720px) { .project-grid{ display: flex !important; margin: 32px -7vw 0 !important; } } /* 01 · JOURNAL */ .photography-section{ display: grid; grid-template-columns: 170px minmax(300px,470px) 1fr; column-gap: 5vw; padding-bottom: 0 !important; } .photography-copy{ padding-top: 4px; } @media (max-width:1100px) { .photography-section{ grid-template-columns: 110px 1fr; } .photography-section .section-heading{ grid-column: 2; } .photography-copy{ grid-column: 2; margin-top: 52px; } } @media (max-width:720px) { .photography-section{ display: block; } .photography-copy{ margin-top: 42px; } } .topbar{ background: #191919; border-bottom: none; } .menu-toggle span{ background: #ffffff; } @media (max-width:720px) { .brand{ padding-left: 16px; } } /* 04 · AI WORKFLOW */ .experience-section{ display: grid; grid-template-columns: 170px minmax(300px,470px) 1fr; column-gap: 5vw; padding-bottom: 0 !important; } .experience-copy{ padding-top: 4px; } .experience-grid{ grid-column: 1/-1; display: flex; flex-wrap: wrap; margin: 60px -8vw 0; align-items: stretch; background: #111; } @media (max-width:1100px) { .experience-section{ grid-template-columns: 110px 1fr; } .experience-section .section-heading{ grid-column: 2; } .experience-copy{ grid-column: 2; margin-top: 52px; } .experience-grid{ margin-left: -8vw; margin-right: -8vw; } } @media (max-width:720px) { .experience-section{ display: block; } .experience-copy{ margin-top: 42px; } .experience-grid{ margin: 32px -7vw 0; } } .comment-form{ max-width: 760px; margin-top: 44px; } .comment-field{ border-top: 1px solid #dcdcdc; padding: 18px 0 13px; } .comment-field:last-of-type{ border-bottom: 1px solid #dcdcdc; } .comment-field label{ display: block; margin-bottom: 8px; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: #777; } .comment-field input, .comment-field textarea{ display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.6; padding: 0; resize: vertical; } .comment-field input{ min-height: 34px; } .comment-field textarea{ min-height: 120px; } .comment-submit{ margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 13px 0; cursor: pointer; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; } .comment-submit span{ color: var(--accent); font-size: 18px; line-height: 1; } .comment-note{ margin: 12px 0 0; font-size: 8px; line-height: 1.5; letter-spacing: .7px; text-transform: uppercase; color: #999; } @media (max-width:720px) { .comment-form{ margin-top: 32px; } } #projects{ background: #ffffff !important; } #photography{ background: #eceee9 !important; } #experience{ background: var(--charcoal) !important; } .about-more{ margin-top: 48px; border-top: 1px solid rgba(23,23,23,.18); border-bottom: 1px solid rgba(23,23,23,.18); } .about-more summary{ list-style: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; user-select: none; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; } .about-more summary::-webkit-details-marker{ display: none; } .about-more-toggle{ width: 28px; height: 28px; display: grid; place-items: center; font-size: 22px; line-height: 1; font-weight: 300; color: var(--accent); transition: transform .2s ease; } .about-more[open] .about-more-toggle{ transform: rotate(45deg); } .about-more-content{ padding: 0 0 34px; } @media (max-width:720px) { .about-more{ margin-top: 40px; } .about-more summary{ min-height: 58px; } .about-more-content{ padding-bottom: 26px; } } .about-more{ margin-top: 32px !important; } @media (max-width:720px) { .about-more{ margin-top: 28px !important; } } .hero{ background-color: #000 !important; } .article-gallery-cover{ cursor: pointer; } .article-gallery-cover:focus-visible{ outline-offset: 4px; } @media (max-width:720px) { .topbar{ width: 100%; max-width: 100vw; overflow: visible; } .brand{ min-width: 0 !important; width: auto !important; flex: 1 1 auto; padding-left: 16px !important; padding-right: 10px !important; } .brand-text{ min-width: 0; } .menu-toggle{ display: block !important; flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; height: 66px; margin-left: auto; padding: 20px 17px !important; position: relative; z-index: 220; } .overlay-menu{ width: 100vw; max-width: 100vw; } .menu-panel{ right: 0; width: min(340px,92vw); max-width: 92vw; padding: 82px 28px 35px; } } @media (max-width:720px) { .topbar{ height: 66px !important; overflow: visible !important; } .brand{ min-width: 0 !important; width: calc(100% - 78px) !important; max-width: calc(100% - 78px) !important; flex: 0 0 calc(100% - 78px) !important; overflow: hidden !important; padding-left: 16px !important; padding-right: 6px !important; } .menu-toggle{ position: fixed !important; top: 6px !important; right: 8px !important; left: auto !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px !important; margin: 0 !important; padding: 0 !important; z-index: 10000 !important; background: var(--accent) !important; overflow: visible !important; box-sizing: border-box !important; } .menu-toggle span{ display: none !important; } .menu-toggle::before{ content: ""; position: absolute; left: 15px; top: 17px; width: 24px; height: 1px; background: #fff; box-shadow: 0 7px 0 #fff, 0 14px 0 #fff; } .menu-panel{ width: min(340px,92vw) !important; max-width: 92vw !important; padding: 52px 24px 20px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .menu-close{ top: 6px !important; right: 14px !important; font-size: 38px !important; } .menu{ margin-top: 0 !important; } .menu a{ font-size: 20px !important; line-height: 1.05 !important; padding: 10px 0 !important; } .menu a span{ width: 34px !important; font-size: 8px !important; } } @media (max-width:720px) { .menu-panel{ padding-top: 58px !important; padding-bottom: 24px !important; } .menu a{ padding: 11px 0 !important; } } .topbar{ display: flex !important; align-items: stretch !important; overflow: visible !important; } .topbar .menu-toggle{ position: static !important; top: auto !important; right: auto !important; left: auto !important; flex: 0 0 auto !important; margin-left: auto !important; width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: auto !important; padding: 23px 24px !important; box-sizing: border-box !important; overflow: visible !important; transform: none !important; opacity: 1 !important; visibility: visible !important; z-index: auto !important; } .topbar .menu-toggle::before{ content: none !important; display: none !important; } .topbar .menu-toggle span{ display: block !important; width: auto !important; min-width: 0 !important; height: 1px !important; margin: 6px 0 !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; transform: none !important; } @media (max-width:720px) { .topbar{ height: 66px !important; } .topbar .brand{ flex: 0 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 16px !important; overflow: visible !important; } .topbar .menu-toggle{ position: static !important; flex: 0 0 66px !important; margin-left: auto !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 66px !important; padding: 20px !important; z-index: auto !important; } .topbar .menu-toggle span{ display: block !important; width: auto !important; height: 1px !important; margin: 6px 0 !important; } } footer{ gap: 28px; } .footer-comments-open{ margin-left: auto; border: 0; background: transparent; color: #fff; text-transform: uppercase; letter-spacing: 1.4px; font-size: 9px; cursor: pointer; padding: 20px 0; } .footer-comments-open span{ margin-left: 10px; color: var(--accent); font-size: 20px; } /* COMPONENT · COMMENTS */ .comments-panel{ position: fixed; z-index: 600; inset: 0; background: #fff; color: var(--ink); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(18px); transition: .25s ease; } .comments-panel.open{ opacity: 1; visibility: visible; transform: none; } body.comments-open{ overflow: hidden; } .comments-panel-head{ position: sticky; z-index: 2; top: 0; height: 74px; padding-left: 28px; display: flex; align-items: center; justify-content: space-between; background: #191919; color: #fff; } .comments-panel-head div{ display: flex; flex-direction: column; line-height: 1.15; } .comments-panel-head strong{ font-size: 14px; } .comments-panel-head small{ font-size: 7px; letter-spacing: 1.4px; text-transform: uppercase; } .comments-panel-close{ border: 0; background: var(--accent); color: #fff; width: 74px; height: 74px; font-size: 42px; font-weight: 200; cursor: pointer; } .comments-blog{ width: min(1120px,84vw); margin: auto; padding: 90px 0 110px; } .comments-intro{ display: grid; grid-template-columns: 170px minmax(320px,470px) 1fr; column-gap: 5vw; align-items: start; padding-bottom: 70px; border-bottom: 1px solid #ddd; } .comments-kicker{ font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .comments-intro h2{ font-size: clamp(44px,5.4vw,76px); } .comments-intro p{ margin: 5px 0 0; font-size: 16px; line-height: 1.65; color: #666; } .comments-thread, .comments-form-area{ max-width: 860px; margin-left: auto; } .blog-comment{ position: relative; padding: 28px 0; border-bottom: 1px solid #e1e1e1; } .comment-meta{ display: flex; justify-content: space-between; gap: 20px; } .comment-meta strong{ font-size: 13px; } .comment-meta time{ font-size: 8px; letter-spacing: 1.2px; color: #999; } .blog-comment p{ margin: 9px 90px 0 0; font-size: 14px; line-height: 1.7; color: #555; } .comment-reply{ border: 0; background: none; padding: 5px 0; margin-top: 10px; color: var(--accent); font-size: 8px; text-transform: uppercase; letter-spacing: 1.2px; cursor: pointer; } .blog-comment.reply{ margin-left: 70px; padding-left: 34px; } .reply-mark{ position: absolute; left: 0; top: 29px; color: var(--accent); font-size: 18px; } .comments-form-area{ margin-top: 75px; padding-top: 28px; border-top: 2px solid #191919; } .comments-form-area .comment-form{ margin-top: 24px; } .replying-to{ color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; } @media (max-width:720px) { footer{ height: auto; min-height: 82px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; } .footer-comments-open{ order: 3; width: 100%; text-align: left; border-top: 1px solid #333; padding: 12px 0 0; } .comments-panel-head{ height: 66px; padding-left: 16px; } .comments-panel-close{ width: 66px; height: 66px; } .comments-blog{ width: 86vw; padding: 55px 0 80px; } .comments-intro{ display: block; padding-bottom: 42px; } .comments-intro h2{ font-size: 44px; margin-top: 25px; } .comments-intro p{ margin-top: 24px; } .blog-comment p{ margin-right: 0; font-size: 13px; } .blog-comment.reply{ margin-left: 26px; padding-left: 26px; } .comments-form-area{ margin-top: 55px; } } .header-comments-open{ margin-left: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border: 0; background: #191919; color: #fff; cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .header-comments-open span{ color: var(--accent); font-size: 17px; font-weight: 400; line-height: 1; } @media (max-width:720px) { .header-comments-open{ padding: 0 10px; font-size: 7px; letter-spacing: .6px; } .header-comments-open span{ font-size: 14px; } } .header-comments-open{ background: #ffffff !important; color: #171717 !important; min-width: 168px; padding: 0 18px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.35px !important; gap: 4px !important; } .header-comments-open span{ color: #171717 !important; font-size: 18px !important; font-weight: 700 !important; } @media (max-width:720px) { .header-comments-open{ min-width: auto; padding: 0 10px !important; font-size: 10px !important; letter-spacing: 0 !important; } .header-comments-open span{ font-size: 11px !important; } } .header-comments-open{ border-right: 2px solid #191919 !important; } .journal-filters{ display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 34px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; } .journal-filters button{ border: 0; background: transparent; padding: 0; color: #777; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: 1.2px; } .journal-filters button.active, .journal-filters button:hover{ color: var(--accent); } .journal-filters span{ color: #b7b7b7; } .journal-grid{ grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 60px -8vw 0; background: #fff; } .journal-cover{ position: relative; min-height: 430px; overflow: hidden; cursor: pointer; background: #111; color: #fff; } .journal-cover:first-child{ grid-column: 1/-1; min-height: 560px; } .journal-cover[hidden]{ display: none; } .journal-cover-image{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .5s ease; } .journal-cover::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.08) 72%); } .journal-cover:hover .journal-cover-image{ transform: scale(1.015); opacity: .94; } .journal-cover-caption{ position: absolute; z-index: 2; left: 36px; right: 36px; bottom: 34px; } .journal-cover:first-child .journal-cover-caption{ left: 8vw; bottom: 58px; width: min(600px,72%); } .journal-cover-caption span{ display: block; font-size: 8px; letter-spacing: 1.7px; margin-bottom: 10px; } .journal-cover-caption strong{ display: block; font-size: clamp(30px,4vw,58px); line-height: .98; letter-spacing: -1.7px; } .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(42px,5.2vw,76px); } .journal-cover-caption small{ display: block; max-width: 520px; margin-top: 14px; font-size: 12px; line-height: 1.55; } .article-panel{ position: fixed; z-index: 620; inset: 0; background: #fff; color: #171717; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(18px); transition: .28s ease; } .article-panel.open{ opacity: 1; visibility: visible; transform: none; } .article-panel-head{ position: sticky; top: 0; z-index: 3; height: 74px; padding: 0 28px; background: #191919; color: #fff; display: flex; align-items: center; justify-content: space-between; } .article-panel-head > div{ display: flex; flex-direction: column; line-height: 1.15; } .article-panel-head strong{ font-size: 18px; } .article-panel-head small{ margin-top: 3px; font-size: 7px; letter-spacing: 1.3px; text-transform: uppercase; } .article-panel-close{ border: 0; background: transparent; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; } .article-panel-body{ width: min(1100px,84vw); margin: 0 auto; padding: 95px 0 120px; } .article-panel-body[hidden]{ display: none; } .article-intro{ max-width: 780px; } .article-intro h2{ margin-top: 18px; font-size: clamp(52px,7vw,96px); } .article-intro p{ max-width: 720px; margin-top: 28px; font-size: 18px; line-height: 1.65; } .article-content{ max-width: 760px; margin-top: 70px; font-size: 16px; line-height: 1.85; } .article-content p + p{ margin-top: 28px; } .article-gallery{ display: flex; flex-wrap: wrap; width: 100vw; margin: 85px calc(50% - 50vw) -120px; background: #fff; } .article-gallery figure{ position: relative; flex: 1 1 360px; height: 280px; margin: 0; overflow: hidden; background: #111; cursor: pointer; } .article-gallery figure:nth-child(4n/**/+1){ flex-basis: 520px; } .article-gallery figure:nth-child(5n){ flex-basis: 250px; } .article-gallery img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease,opacity .45s ease; } .article-gallery figure:hover img{ transform: scale(1.018); opacity: .94; } body.article-open{ overflow: hidden; } @media (max-width:720px) { .journal-grid{ grid-template-columns: 1fr; margin: 32px -7vw 0; } .journal-cover, .journal-cover:first-child{ grid-column: auto; min-height: 420px; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 7vw; right: 7vw; bottom: 32px; width: auto; } .journal-cover-caption small{ font-size: 11px; } .article-panel-head{ height: 66px; padding: 0 16px; } .article-panel-body{ width: 86vw; padding: 70px 0 90px; } .article-intro p{ font-size: 15px; } .article-content{ font-size: 14px; margin-top: 48px; } .article-gallery{ display: block; margin-top: 62px; margin-bottom: -90px; } .article-gallery figure{ width: 100%; height: auto; } .article-gallery img{ width: 100%; height: auto; object-fit: contain; } } .journal-cover{ min-height: 215px !important; } .journal-cover:first-child{ min-height: 280px !important; } @media (max-width:720px) { .journal-cover, .journal-cover:first-child{ min-height: 210px !important; } } .journal-cover:first-child{ grid-column: auto !important; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 36px !important; right: 36px !important; bottom: 34px !important; width: auto !important; } .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(30px,4vw,58px) !important; } @media (max-width:720px) { .journal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .journal-cover, .journal-cover:first-child{ min-height: 210px !important; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 18px !important; right: 18px !important; bottom: 20px !important; } } .journal-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .journal-cover, .journal-cover:first-child{ grid-column: auto !important; min-height: 260px !important; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 24px !important; right: 24px !important; bottom: 24px !important; width: auto !important; } .journal-cover-caption strong, .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(24px,2.6vw,42px) !important; } .journal-cover-caption small{ font-size: 10px !important; } @media (max-width:1100px) { .journal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width:720px) { .journal-grid{ grid-template-columns: 1fr !important; } .journal-cover, .journal-cover:first-child{ min-height: 300px !important; } } .menu-mobile-action{ display: none; } @media (max-width:720px) { .topbar .header-comments-open{ display: none !important; } .menu-mobile-action{ display: block; width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; text-align: left; font-size: 25px; line-height: 1.15; font-weight: 500; letter-spacing: -.6px; padding: 15px 0; cursor: pointer; } .menu-mobile-action span{ display: inline-block; width: 42px; font-size: 9px; letter-spacing: 1px; opacity: .65; vertical-align: middle; } button.menu-mobile-action{ font-family:var(--font-main); } } .overlay-menu .menu .menu-mobile-action{ display: none !important; } @media (max-width:720px) { .overlay-menu .menu .menu-mobile-action{ display: block !important; } } @media (max-width:720px) { .topbar{ width: 100% !important; } .topbar .brand{ flex: 1 1 auto !important; min-width: 0 !important; } .topbar .menu-toggle{ margin-left: auto !important; margin-right: 0 !important; flex: 0 0 66px !important; width: 66px !important; } } .article-panel-body{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 95px 8vw 120px !important; } .article-intro{ width: 100% !important; max-width: 780px !important; margin: 0 !important; } .article-content{ width: 100% !important; max-width: 760px !important; margin: 70px 0 0 !important; } .article-gallery{ width: 100vw !important; margin: 85px -8vw -120px !important; } @media (max-width:720px) { .article-panel-body{ width: 100% !important; padding: 70px 7vw 90px !important; } .article-intro, .article-content{ width: 100% !important; max-width: none !important; } .article-content{ margin: 48px 0 0 !important; } .article-gallery{ width: 100vw !important; margin: 60px -7vw -90px !important; } } .article-nav-label{ display: flex; align-items: center; height: 100%; padding: 0 20px; border-right: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; } .article-nav-arrow{ width: 54px; height: 100%; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; font-size: 23px; font-weight: 300; line-height: 1; cursor: pointer; transition: opacity .2s ease, background .2s ease; } .article-nav-arrow:hover:not(:disabled){ background: rgba(255,255,255,.08); } .article-nav-arrow:disabled{ opacity: .22; cursor: default; } @media (max-width:720px) { .article-panel-head{ padding-right: 0 !important; } .article-panel-head > div:first-child small{ display: none; } .article-nav-label{ padding: 0 10px; font-size: 7px; letter-spacing: 1px; } .article-nav-arrow{ width: 42px; font-size: 20px; } } .article-nav-label{ border-left: 0 !important; border-right: 1px solid rgba(255,255,255,.18) !important; } .article-nav-prev{ border-right: 1px solid rgba(255,255,255,.18) !important; } .article-nav-next{ border-right: 1px solid rgba(255,255,255,.18) !important; } .article-white-nav{ position: sticky; top: 74px; z-index: 4; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 54px; padding: 0 28px; margin: 0; background: #ffffff; color: #171717; border-bottom: 1px solid #e5e5e5; } .article-white-nav .article-nav-label{ display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 16px; color: #171717 !important; border-left: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; } .article-white-nav .article-nav-arrow{ width: 48px; height: 100%; padding: 0; border: 0; background: #ffffff; color: #171717 !important; font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; } .article-white-nav .article-nav-prev{ border-left: 1px solid #e5e5e5 !important; } .article-white-nav .article-nav-next{ border-right: 1px solid #e5e5e5 !important; } .article-white-nav .article-nav-arrow:hover:not(:disabled){ background: #f3f3f3; } .article-white-nav .article-nav-arrow:disabled{ opacity: .22; cursor: default; } .article-panel-body{ padding-top: 70px !important; } @media (max-width:720px) { .article-white-nav{ top: 66px; height: 48px; padding: 0 10px; } .article-white-nav .article-nav-label{ padding: 0 10px; font-size: 7px; letter-spacing: 1px; } .article-white-nav .article-nav-arrow{ width: 40px; font-size: 19px; } .article-panel-body{ padding-top: 54px !important; } } .journal-filters{ font-size: 10px !important; gap: 10px !important; letter-spacing: 1.25px !important; } .journal-filters button{ font-size: 10px !important; letter-spacing: 1.25px !important; } @media (max-width:720px) { .journal-filters{ font-size: 9px !important; gap: 7px !important; } .journal-filters button{ font-size: 9px !important; } } .journal-filters button.active{ color: #8b3f36 !important; } .journal-grid{ display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; background: #fff !important; } .journal-cover, .journal-cover:first-child{ position: relative !important; grid-column: auto !important; flex: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; } .journal-cover-image{ width: 100% !important; height: 100% !important; object-fit: cover !important; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 26px !important; right: 26px !important; bottom: 24px !important; width: auto !important; } .journal-cover-caption strong, .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(25px,2.2vw,40px) !important; line-height: 1 !important; } .journal-grid::after{ display: none !important; content: none !important; } @media (max-width:720px) { .journal-grid{ display: block !important; } .journal-cover, .journal-cover:first-child{ width: 100% !important; height: 320px !important; } .journal-cover-caption, .journal-cover:first-child .journal-cover-caption{ left: 7vw !important; right: 7vw !important; bottom: 28px !important; } .journal-cover-caption strong, .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(28px,8vw,42px) !important; } } #projects .project-grid{ margin-top: 0 !important; } #experience .experience-grid{ margin-top: 0 !important; } @media (max-width:720px) { } #projects .section-heading, #projects .section-copy{ padding-bottom: 36px !important; } @media (max-width:720px) { #projects .section-heading, #projects .section-copy{ padding-bottom: 24px !important; } } #experience .section-heading, #experience .experience-copy{ padding-bottom: 42px !important; } @media (max-width:720px) { #experience .section-heading, #experience .experience-copy{ padding-bottom: 26px !important; } } .article-panel-body .article-content > p{ font-size: 14px; line-height: 1.7; margin-bottom: 16px; } .article-panel-body .about-more{ margin-top: 20px !important; border-top: 0 !important; border-bottom: 0 !important; } .article-panel-body .about-more summary{ min-height: 34px !important; justify-content: flex-start !important; gap: 5px !important; padding: 0 !important; } .article-panel-body .about-more-toggle{ width: auto !important; height: auto !important; display: inline-block !important; font-size: 15px !important; } .article-panel-body .about-more-content{ padding: 8px 0 10px !important; } .article-panel-body .about-more-content p{ font-size: 13px; line-height: 1.7; margin: 0 0 14px; } @media (max-width:720px) { .article-panel-body .article-content > p{ font-size: 13px; line-height: 1.65; margin-bottom: 14px; } .article-panel-body .about-more{ margin-top: 16px !important; } .article-panel-body .about-more summary{ min-height: 30px !important; } .article-panel-body .about-more-content p{ font-size: 12px; } } @media (min-width:721px) and (max-width:1100px) { #projects .project-grid, #experience .experience-grid, .article-gallery{ width: auto !important; max-width: none !important; overflow: hidden; } .article-gallery figure, .article-gallery figure:nth-child(4n/**/+1), .article-gallery figure:nth-child(5n){ flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; box-sizing: border-box; } .article-gallery figure, .article-gallery figure:nth-child(4n/**/+1), .article-gallery figure:nth-child(5n){ height: 260px !important; } .article-gallery img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } } @media (min-width:721px) and (max-width:1100px) { #photography .journal-grid{ display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; width: auto !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ width: calc(50% - 0.5px) !important; max-width: none !important; min-width: 0 !important; flex: 0 0 calc(50% - 0.5px) !important; height: auto !important; margin: 0 !important; } #photography .journal-cover img{ display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; } .article-gallery{ display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-flow: row !important; width: 100% !important; } .article-gallery figure, .article-gallery figure:nth-child(n){ width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; flex: none !important; margin: 0 !important; aspect-ratio: 4 / 3 !important; } .article-gallery figure img{ display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } } #projects .project-grid, #experience .experience-grid, #photography .journal-grid, .article-gallery{ background: #000 !important; } #photography .journal-cover, .article-gallery figure{ box-sizing: border-box !important; } #photography .journal-cover, .article-gallery figure{ margin: 0 !important; box-sizing: border-box !important; } @media (max-width:1100px) { #projects .project-grid, #photography .journal-grid, #experience .experience-grid, .article-gallery{ background: #000 !important; } } @media (max-width:720px) { #projects .project-grid, #photography .journal-grid, #experience .experience-grid, .article-gallery{ background: #000 !important; } } #photography .journal-cover, .article-gallery figure{ background: #000 !important; margin: 0 !important; } #projects .project-grid, #photography .journal-grid, #experience .experience-grid, .article-gallery{ background: #000 !important; } #photography .journal-cover, .article-gallery > figure{ margin: 0 !important; background: #000 !important; } #photography .journal-cover img, .article-gallery > figure > img{ display: block !important; } #photography .journal-grid{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ flex: 0 0 auto !important; max-width: none !important; min-width: 0 !important; grid-column: auto !important; } .article-gallery{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .article-gallery > figure, .article-gallery > figure:nth-child(n){ flex: 1 1 360px !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 280px !important; aspect-ratio: auto !important; } .article-gallery > figure:nth-child(4n/**/+1){ flex-basis: 520px !important; } .article-gallery > figure:nth-child(5n){ flex-basis: 250px !important; } @media (min-width:721px) and (max-width:1100px) { .article-gallery{ display: flex !important; flex-wrap: wrap !important; } .article-gallery > figure, .article-gallery > figure:nth-child(n), .article-gallery > figure:nth-child(4n/**/+1), .article-gallery > figure:nth-child(5n){ flex: 1 1 calc(50% - 3px) !important; width: auto !important; max-width: none !important; height: 260px !important; aspect-ratio: auto !important; } } @media (max-width:720px) { #photography .journal-grid{ display: block !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ width: 100% !important; max-width: 100% !important; height: 320px !important; margin-bottom: 3px !important; } #photography .journal-cover:last-child{ margin-bottom: 0 !important; } .article-gallery{ display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } .article-gallery > figure, .article-gallery > figure:nth-child(n){ flex: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; } .article-gallery > figure > img{ width: 100% !important; height: auto !important; object-fit: contain !important; } } #projects .project-grid, #experience .experience-grid{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; background: #000 !important; } #photography .journal-grid{ background: #000 !important; } #photography .journal-cover{ margin: 0 !important; background: #000 !important; } @media (max-width:720px) { #projects .project-grid, #experience .experience-grid{ background: #000 !important; } #photography .journal-grid{ background: #000 !important; } } #projects .project-grid, #photography .journal-grid, #experience .experience-grid{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; align-content: flex-start !important; background: #000 !important; } #photography .journal-cover{ position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; background: #000 !important; aspect-ratio: auto !important; } #photography .journal-cover-image{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } #photography .journal-cover::after{ content: none !important; display: none !important; } @media (max-width:720px) { #projects .project-grid, #photography .journal-grid, #experience .experience-grid{ display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } #photography .journal-cover{ width: 100% !important; max-width: 100% !important; height: auto !important; flex: 0 0 auto !important; } } #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ position: absolute !important; left: 26px !important; right: 26px !important; top: 18px !important; bottom: 18px !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; overflow: hidden !important; box-sizing: border-box !important; } #photography .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption strong{ display: block !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; font-size: clamp(22px,1.75vw,32px) !important; line-height: .98 !important; letter-spacing: -1.1px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: balance; } #photography .journal-cover-caption small{ display: block !important; margin-top: 10px !important; max-width: 100% !important; font-size: 10px !important; line-height: 1.45 !important; } @media (min-width:1101px) { #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ left: 24px !important; right: 20px !important; top: 16px !important; bottom: 16px !important; } } @media (min-width:721px) and (max-width:1100px) { #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ left: 20px !important; right: 18px !important; top: 15px !important; bottom: 15px !important; } #photography .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(20px,2.5vw,29px) !important; } } @media (max-width:720px) { #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ left: 7vw !important; right: 7vw !important; top: 24px !important; bottom: 24px !important; } #photography .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(26px,7vw,38px) !important; line-height: 1 !important; } } @media (min-width:721px) { .topbar{ height: 74px !important; background: transparent !important; align-items: flex-start !important; pointer-events: none; } .topbar .brand{ height: 74px !important; align-self: flex-start !important; background: #191919 !important; pointer-events: auto; } .topbar .header-comments-open, .topbar .menu-toggle{ height: 46px !important; min-height: 46px !important; max-height: 46px !important; align-self: flex-start !important; pointer-events: auto; } .topbar .header-comments-open{ margin-left: auto !important; } .topbar .menu-toggle{ margin-left: 0 !important; padding: 9px 24px !important; } } .overlay-menu .menu-panel{ background: #fff !important; color: #171717 !important; } .overlay-menu .menu-close{ color: #171717 !important; background: transparent !important; } .overlay-menu .menu{ border-top-color: rgba(0,0,0,.22) !important; } .overlay-menu .menu a{ color: #171717 !important; border-bottom-color: rgba(0,0,0,.22) !important; } .overlay-menu .menu-toggle{ background: var(--accent) !important; } /* 03 · ARCHITECTURE PHOTOGRAPHY */ .architecture-section{ display: grid; grid-template-columns: 170px minmax(300px,470px) 1fr; column-gap: 5vw; overflow: hidden; padding-bottom: 0 !important; } .architecture-copy{ padding-top: 4px; max-width: 820px; } .architecture-copy p + p{ margin-top: 22px; font-size: 15px; line-height: 1.7; } .architecture-gallery{ grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 60px -8vw 0; background: #fff; } .architecture-cover{ position: relative; min-width: 0; height: 260px; overflow: hidden; background: #000; } .architecture-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; } .architecture-cover-caption{ position: absolute; left: 24px; right: 24px; bottom: 24px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); } .architecture-cover-caption span{ display: block; font-size: 9px; letter-spacing: 1.4px; margin-bottom: 9px; } .architecture-cover-caption strong{ display: block; font-size: clamp(21px,2.1vw,34px); line-height: 1.05; font-weight: 500; } .architecture-cover-caption small{ display: block; max-width: 300px; margin-top: 10px; font-size: 11px; line-height: 1.45; } @media (max-width:1100px) { .architecture-section{ grid-template-columns: 110px 1fr; } .architecture-section .section-heading{ grid-column: 2; } .architecture-copy{ grid-column: 2; margin-top: 52px; } .architecture-gallery{ grid-template-columns: repeat(2,minmax(0,1fr)); margin-left: -8vw; margin-right: -8vw; } .architecture-cover{ height: 230px; } .architecture-cover-caption{ left: 18px; right: 18px; bottom: 20px; } } @media (max-width:720px) { .architecture-section{ display: block; } .architecture-copy{ margin-top: 42px; } .architecture-gallery{ grid-template-columns: 1fr; margin-left: -7vw; margin-right: -7vw; margin-top: 32px; } .architecture-cover{ height: 430px; } .architecture-cover-caption{ left: 7vw; right: 7vw; bottom: 28px; } } .architecture-section{ background: #eceee9 !important; } .architecture-gallery{ grid-template-columns: repeat(4,minmax(0,1fr)) !important; background: #000 !important; } .architecture-cover{ height: auto !important; aspect-ratio: 2 / 3 !important; background: #000 !important; } @media (max-width:1100px) { .architecture-gallery{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .architecture-cover{ height: auto !important; aspect-ratio: 2 / 3 !important; } } @media (max-width:720px) { .architecture-gallery{ grid-template-columns: 1fr !important; } .architecture-cover{ height: auto !important; aspect-ratio: 2 / 3 !important; } } :root{ --section-light: #eceee9; --section-dark: #191919; } #projects{ background: var(--section-light) !important; color: #171717 !important; } #photography{ background: var(--section-dark) !important; color: #fff !important; } #architecture{ background: var(--section-light) !important; color: #171717 !important; } #experience{ background: var(--section-dark) !important; color: #fff !important; } #photography .section-index strong{ color: rgba(255,255,255,.30) !important; } #photography .section-index span{ color: #fff !important; } #photography .section-heading h2{ color: #fff !important; } #photography .photography-copy, #photography .photography-copy p{ color: #fff !important; } #photography .journal-filters button{ color: #fff !important; } #photography .journal-filters span{ color: rgba(255,255,255,.45) !important; } #architecture .section-index strong{ color: #d1d3ce !important; } #architecture .section-index span{ color: #171717 !important; } #architecture .section-heading h2{ color: #171717 !important; } #architecture .architecture-copy, #architecture .architecture-copy p{ color: #171717 !important; } #architecture .architecture-gallery{ background: #000 !important; } #architecture .architecture-cover{ background: #000 !important; } #projects .project-grid, #experience .experience-grid{ display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; margin-left: -8vw !important; margin-right: -8vw !important; background: #000 !important; } @media (max-width:1100px) { #projects .project-grid, #experience .experience-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; margin-left: -8vw !important; margin-right: -8vw !important; } } @media (max-width:720px) { #projects .project-grid, #experience .experience-grid{ display: grid !important; grid-template-columns: 1fr !important; margin-left: -7vw !important; margin-right: -7vw !important; } } #photography .journal-grid{ display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; align-items: start !important; background: #000 !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex: none !important; grid-column: auto !important; grid-row: auto !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; } #photography .journal-cover-image, #photography .journal-cover img{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } @media (min-width:721px) and (max-width:1100px) { #photography .journal-grid{ display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ width: auto !important; max-width: none !important; height: auto !important; aspect-ratio: 2 / 3 !important; margin: 0 !important; } } @media (max-width:720px) { #photography .journal-grid{ display: grid !important; grid-template-columns: 1fr !important; } #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ width: auto !important; max-width: none !important; height: auto !important; aspect-ratio: 2 / 3 !important; margin: 0 !important; } } #architecture .architecture-cover{ height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3 !important; } #projects .project-grid, #architecture .architecture-gallery{ grid-template-columns: repeat(4,minmax(0,1fr)) !important; margin-left: -8vw !important; margin-right: -8vw !important; background: #000 !important; } @media (max-width:1100px) { #projects .project-grid, #architecture .architecture-gallery{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width:720px) { #projects .project-grid, #architecture .architecture-gallery{ grid-template-columns: 1fr !important; margin-left: -7vw !important; margin-right: -7vw !important; } } #architecture .architecture-cover{ height: auto !important; min-height: 0 !important; aspect-ratio: 2.45 / 1 !important; cursor: pointer !important; } #architecture .architecture-cover img{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transition: transform .45s ease, opacity .45s ease !important; } #architecture .architecture-cover:hover img{ transform: scale(1.018) !important; opacity: .94 !important; } #architecture .architecture-cover-caption{ transition: transform .3s ease, opacity .3s ease !important; } #architecture .architecture-cover:hover .architecture-cover-caption{ transform: translateY(-3px) !important; } @media (max-width:1100px) { #architecture .architecture-cover{ aspect-ratio: 2.45 / 1 !important; } } @media (max-width:720px) { #architecture .architecture-cover{ aspect-ratio: 2.45 / 1 !important; } } #architecture .architecture-cover{ height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3 !important; cursor: pointer !important; } #architecture .architecture-cover img{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } @media (max-width:1100px) { #architecture .architecture-cover{ aspect-ratio: 2 / 3 !important; } } @media (max-width:720px) { #architecture .architecture-cover{ aspect-ratio: 2 / 3 !important; } } #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ position: absolute !important; z-index: 2 !important; left: 24px !important; right: 24px !important; top: auto !important; bottom: 24px !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; overflow: visible !important; color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,.5) !important; } #photography .journal-cover-caption span, #photography .journal-cover:first-child .journal-cover-caption span{ display: block !important; font-size: 9px !important; line-height: 1.2 !important; letter-spacing: 1.4px !important; margin: 0 0 9px !important; padding: 0 !important; } #photography .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption strong{ display: block !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: clamp(21px,2.1vw,34px) !important; line-height: 1.05 !important; letter-spacing: normal !important; font-weight: 500 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: initial !important; } #photography .journal-cover-caption small, #photography .journal-cover:first-child .journal-cover-caption small{ display: block !important; max-width: 300px !important; margin: 10px 0 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.45 !important; } @media (max-width:1100px) { #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ left: 18px !important; right: 18px !important; bottom: 20px !important; } } @media (max-width:720px) { #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ left: 7vw !important; right: 7vw !important; bottom: 28px !important; } #photography .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption strong{ font-size: clamp(21px,6vw,34px) !important; } } #photography .journal-filters button{ font-family: inherit !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; } #photography .journal-filters button{ font-size: 12px !important; } .header-comments-open{ font-weight: 700 !important; } .lightbox-image{ cursor: pointer !important; } @media (max-width:720px) { .article-panel-body .article-gallery{ position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: none !important; margin: 60px 0 -90px !important; padding: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; overflow: hidden !important; } .article-panel-body .article-gallery > figure, .article-panel-body .article-gallery > figure:nth-child(n){ flex: 0 0 auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; box-sizing: border-box !important; } .article-panel-body .article-gallery > figure > img{ display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; object-fit: contain !important; } } /* 02 · 3D */ .three-d-section{ display: grid; grid-template-columns: 170px minmax(300px,470px) 1fr; column-gap: 5vw; padding-bottom: 0 !important; } .three-d-copy{ padding-top: 4px; } .three-d-grid{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 60px -8vw 0; background: #000; } .three-d-cover{ position: relative; aspect-ratio: 2 / 3; overflow: hidden; cursor: pointer; background: #111; color: #fff; } .three-d-cover-image{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease,opacity .5s ease; } .three-d-cover::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.04) 68%); } .three-d-cover:hover .three-d-cover-image{ transform: scale(1.015); opacity: .94; } .three-d-cover-caption{ position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; } .three-d-cover-caption span{ display: block; margin-bottom: 9px; font-size: 8px; letter-spacing: 1.45px; } .three-d-cover-caption strong{ display: block; font-size: clamp(22px,2vw,34px); line-height: 1.02; letter-spacing: -1px; } .three-d-cover-caption small{ display: block; margin-top: 10px; font-size: 10px; line-height: 1.4; } .three-d-cover:focus-visible{ outline-offset: -2px; } .three-d-article-gallery{ background: #fff; } @media (max-width:1100px) { .three-d-section{ grid-template-columns: 110px 1fr; } .three-d-section .section-heading{ grid-column: 2; } .three-d-copy{ grid-column: 2; margin-top: 52px; } .three-d-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); margin-left: -8vw; margin-right: -8vw; } } @media (max-width:720px) { .three-d-section{ display: block; } .three-d-copy{ margin-top: 42px; } .three-d-grid{ grid-template-columns: 1fr; margin: 32px -7vw 0; } .three-d-cover{ width: 100%; aspect-ratio: 2 / 3; } .three-d-cover-caption{ left: 7vw; right: 7vw; bottom: 28px; } .three-d-cover-caption strong{ font-size: clamp(28px,8vw,42px); } } #projects .project-grid, #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #experience .experience-grid, #architecture .architecture-gallery{ display: flex !important; flex-flow: row nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; background: #000 !important; scrollbar-width: none; -ms-overflow-style: none; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } #projects .project-grid::-webkit-scrollbar, #three-d .three-d-grid::-webkit-scrollbar, #photography .journal-grid.journal-horizontal::-webkit-scrollbar, #experience .experience-grid::-webkit-scrollbar, #architecture .architecture-gallery::-webkit-scrollbar{ display: none; } #three-d .three-d-cover, #architecture .architecture-cover{ flex: 0 0 calc((100% - 9px) / 4) !important; min-width: 0 !important; } #photography .journal-grid.journal-horizontal{ position: relative !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } #photography .journal-grid.journal-horizontal > .journal-cover{ display: block; flex: 0 0 calc((100vw - 15px) / 4) !important; width: calc((100vw - 15px) / 4) !important; min-width: calc((100vw - 15px) / 4) !important; max-width: calc((100vw - 15px) / 4) !important; height: auto !important; aspect-ratio: 2 / 3 !important; margin: 0 !important; overflow: hidden !important; } #photography .journal-grid.journal-horizontal > .journal-cover[hidden]{ display: none !important; } #three-d .three-d-cover, #three-d .three-d-cover img, #photography .journal-cover, #photography .journal-cover img, #architecture .architecture-cover, #architecture .architecture-cover img{ pointer-events: auto !important; } @media (hover: hover) and (pointer: fine) { #projects .project-grid, #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #experience .experience-grid, #architecture .architecture-gallery{ cursor: grab; } #projects .project-grid.is-dragging, #three-d .three-d-grid.is-dragging, #photography .journal-grid.journal-horizontal.is-dragging, #experience .experience-grid.is-dragging, #architecture .architecture-gallery.is-dragging{ cursor: grabbing; } } @media (min-width: 721px) and (max-width: 1100px) { #three-d .three-d-cover, #architecture .architecture-cover{ flex-basis: calc((100% - 3px) / 2) !important; } #photography .journal-grid.journal-horizontal > .journal-cover{ flex: 0 0 calc((100vw - 9px) / 2) !important; width: calc((100vw - 9px) / 2) !important; min-width: calc((100vw - 9px) / 2) !important; max-width: calc((100vw - 9px) / 2) !important; } } @media (max-width: 720px) { #three-d .three-d-cover, #architecture .architecture-cover{ flex: 0 0 100% !important; width: 100% !important; } #photography .journal-grid.journal-horizontal > .journal-cover{ flex: 0 0 calc(100vw - 6px) !important; width: calc(100vw - 6px) !important; min-width: calc(100vw - 6px) !important; max-width: calc(100vw - 6px) !important; } } #projects .project-card, #projects .project-card.wide, #experience .experience-card { position: relative !important; overflow: hidden !important; margin: 0 !important; background: #111 !important; cursor: pointer; } #projects .project-card img, #experience .experience-card img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .65s ease, opacity .45s ease; } #projects .project-card figcaption, #experience .experience-card figcaption { position: absolute; inset: auto 0 0 0; padding: 50px 20px 17px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; opacity: 0; transform: translateY(9px); transition: .3s ease; pointer-events: none; } #projects .project-card figcaption strong, #experience .experience-card figcaption strong { display: block; font-size: 14px; font-weight: 600; } #projects .project-card figcaption span, #experience .experience-card figcaption span { display: block; margin-top: 3px; font-size: 8px; line-height: 1.35; text-transform: uppercase; letter-spacing: 1.1px; opacity: .72; } @media (hover:hover) and (pointer:fine) { #projects .project-card:hover img, #experience .experience-card:hover img { transform: scale(1.025); opacity: .9; } #projects .project-card:hover figcaption, #experience .experience-card:hover figcaption { opacity: 1; transform: none; } } @media (max-width:720px) { #projects .project-card img, #experience .experience-card img { height: auto !important; object-fit: contain !important; } #projects .project-card figcaption, #experience .experience-card figcaption { opacity: 1; transform: none; } } #projects .project-grid .project-card, #projects .project-grid .project-card.wide, #experience .experience-grid .experience-card { flex: 0 0 360px !important; width: 360px !important; min-width: 360px !important; height: 260px !important; grid-column: auto !important; grid-row: auto !important; aspect-ratio: auto !important; } @media (min-width:721px) and (max-width:1100px) { #projects .project-grid .project-card, #projects .project-grid .project-card.wide, #experience .experience-grid .experience-card { flex-basis: 320px !important; width: 320px !important; min-width: 320px !important; height: 230px !important; } } @media (max-width:720px) { #projects .project-grid .project-card, #projects .project-grid .project-card.wide, #experience .experience-grid .experience-card { flex: 0 0 86vw !important; width: 86vw !important; min-width: 86vw !important; height: auto !important; } } .topbar .menu-toggle { margin-left: 3px !important; } @media (min-width:721px) { .topbar .header-comments-open { margin-left: auto !important; margin-right: 3px !important; border-right: 0 !important; } .topbar .menu-toggle { margin-left: 0 !important; } } .topbar .header-comments-open { position: absolute !important; right: 77px !important; margin: 0 !important; } .topbar .menu-toggle { position: absolute !important; right: 0 !important; margin: 0 !important; } @media (max-width:720px) { .topbar .header-comments-open { right: 69px !important; } } @media (max-width:720px){ .brand-text small{ font-size:6px !important; letter-spacing:1.05px !important; } } /* ========================================================= CORREÇÃO FINAL · MIRADOURO DO ZEBRO Layout editorial manual igual ao modelo enviado. Esta regra fica no final para não ser anulada pelo CSS anterior. ========================================================= */ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:row !important; width:100% !important; max-width:none !important; margin:0 0 110px !important; padding:0 !important; gap:22px !important; border:0 !important; overflow:visible !important; background:#fff !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure:nth-child(n), body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure:nth-of-type(n){ display:block !important; grid-column:span 1 !important; flex:none !important; width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; aspect-ratio:4 / 3 !important; border:0 !important; box-shadow:none !important; overflow:hidden !important; background:#fff !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure > img{ display:block !important; width:100% !important; height:100% !important; margin:0 !important; border:0 !important; object-fit:cover !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-copy{ grid-column:span 1 !important; width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; aspect-ratio:4 / 3; overflow:auto; } @media (max-width:620px){ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery{ grid-template-columns:1fr !important; gap:12px !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-copy{ grid-column:1 !important; aspect-ratio:auto; overflow:visible; } } /* ========================================================= HOME · CORREÇÃO FINAL PARA TELEMÓVEL Impede o corte lateral do título e deixa a cabeça crescer com o conteúdo, sem alterar o layout de computador. ========================================================= */ @media (max-width:720px){ html, body{ max-width:100%; overflow-x:hidden; } .hero{ height:auto !important; min-height:100svh !important; overflow:visible !important; } .hero-content{ position:relative !important; inset:auto !important; width:auto !important; max-width:none !important; padding:clamp(72px,15vh,105px) 7vw 48px !important; transform:none !important; } .hero h1{ max-width:100%; font-size:clamp(32px,10.6vw,48px) !important; line-height:.98; letter-spacing:-1.6px; overflow-wrap:normal; } .hero h1 strong{ white-space:normal; } .hero .eyebrow{ margin-bottom:16px; font-size:clamp(8px,2.6vw,10px); letter-spacing:clamp(1.5px,.75vw,3px); } .hero-copy{ max-width:100%; margin:24px 0 0; font-size:clamp(13px,3.8vw,15px); line-height:1.55; } } @media (max-width:360px){ .hero h1{ font-size:clamp(30px,10.2vw,37px) !important; letter-spacing:-1.3px; } } @media (max-width:720px) { #projects .project-grid, #experience .experience-grid { align-items: stretch !important; } #projects .project-grid .project-card, #projects .project-grid .project-card.wide, #experience .experience-grid .experience-card { flex: 0 0 86vw !important; width: 86vw !important; min-width: 86vw !important; height: 112vw !important; max-height: 430px !important; aspect-ratio: auto !important; overflow: hidden !important; background: #111 !important; } #projects .project-grid .project-card img, #projects .project-grid .project-card.wide img, #experience .experience-grid .experience-card img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.025); transform-origin: center center; } } @media (max-width:720px) { html, body { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; background: #111 !important; } body, .topbar, main, .hero, footer { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .topbar { left: 0 !important; right: 0 !important; } main, .section, #projects, #three-d, #photography, #experience, #architecture { max-width: none !important; box-sizing: border-box !important; } #projects .project-grid, #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #experience .experience-grid, #architecture .architecture-gallery { position: relative !important; left: 50% !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%) !important; box-sizing: border-box !important; } } @supports (width: 100dvw) { @media (max-width:720px) { body, .topbar, main, .hero, footer, #projects .project-grid, #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #experience .experience-grid, #architecture .architecture-gallery { width: 100dvw !important; min-width: 100dvw !important; max-width: 100dvw !important; } } } @media (max-width:720px) { #projects .project-grid, #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #experience .experience-grid, #architecture .architecture-gallery { scroll-snap-type: x mandatory !important; scroll-padding-left: 0 !important; scroll-padding-right: 0 !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch; } #projects .project-grid > .project-card, #projects .project-grid > .project-card.wide, #three-d .three-d-grid > .three-d-cover, #photography .journal-grid.journal-horizontal > .journal-cover, #experience .experience-grid > .experience-card, #architecture .architecture-gallery > .architecture-cover { scroll-snap-align: start !important; scroll-snap-stop: always !important; } } /* 06 · CONTACT */ .contact-section{ min-height: 420px; display:grid; grid-template-columns:170px minmax(300px,470px) 1fr; column-gap:5vw; align-items:start; background:var(--charcoal); color:#fff; } .contact-copy{padding-top:4px;} .contact-role{margin:0 0 10px;font-size:13px;line-height:1.4;} .contact-email{display:inline-block;font-size:13px;border-bottom:0;padding-bottom:0;} .contact-email:hover{border-bottom:0;} @media(max-width:1100px){ .contact-section{grid-template-columns:110px 1fr;} .contact-section .section-heading{grid-column:2;} .contact-copy{grid-column:2;margin-top:52px;} } @media(max-width:720px){ .contact-section{display:block;min-height:0;} .contact-copy{margin-top:42px;} .contact-role,.contact-email{font-size:12px;} } .topbar{ position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; background: transparent !important; } .topbar .menu-toggle{ position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; z-index: 220 !important; margin: 0 !important; } .overlay-menu .menu a{ font-size: 20px !important; line-height: 1.15 !important; padding-top: 12px !important; padding-bottom: 12px !important; } .overlay-menu .menu .menu-comments-action{ display: block !important; } @media (max-width:720px){ .overlay-menu .menu a{ font-size: 18px !important; padding-top: 11px !important; padding-bottom: 11px !important; } .topbar .menu-toggle{ width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 66px !important; position: fixed !important; top: 0 !important; right: 0 !important; } } @media (max-width:720px){ .topbar .brand{ flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; height: 66px !important; padding: 0 16px !important; background: #191919 !important; overflow: hidden !important; } .topbar .brand-text{ width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; } .topbar .brand-text strong{ display: block !important; width: max-content !important; max-width: none !important; white-space: nowrap !important; font-size: 11px !important; letter-spacing: .35px !important; line-height: 1.05 !important; } .topbar .brand-text small{ white-space: nowrap !important; } } @media (max-width:720px){ .topbar .exit-blog{ display: none !important; } } .contact-comments-link{ display: block; width: max-content; margin-top: 8px; font-size: 9px; letter-spacing: .8px; color: rgba(255,255,255,.65); text-transform: lowercase; } .contact-comments-link:hover{ color: #fff; } .contact-comments-link{ display: block !important; width: max-content !important; margin-top: 12px !important; font-size: 13px !important; line-height: 1.4 !important; letter-spacing: .5px !important; font-weight: 500 !important; } @media (max-width:720px){ .contact-comments-link{ font-size: 14px !important; } } @media (min-width:1101px){ #photography .journal-grid.journal-horizontal, #architecture .architecture-gallery{ grid-column: 1 / -1 !important; position: static !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin-left: -8vw !important; margin-right: -8vw !important; padding: 0 !important; display: flex !important; flex-flow: row nowrap !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; } #photography .journal-grid.journal-horizontal > .journal-cover, #architecture .architecture-gallery > .architecture-cover{ flex: 0 0 calc((100% - 9px) / 4) !important; width: calc((100% - 9px) / 4) !important; min-width: calc((100% - 9px) / 4) !important; max-width: calc((100% - 9px) / 4) !important; margin: 0 !important; box-sizing: border-box !important; } } .topbar .exit-blog{ display: none !important; } @media (min-width:1101px){ #three-d .three-d-grid{ grid-column: 1 / -1 !important; position: static !important; left: auto !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin-left: -8vw !important; margin-right: -8vw !important; overflow-x: auto !important; overflow-y: hidden !important; } #three-d .three-d-grid > .three-d-cover{ flex: 0 0 317px !important; width: 317px !important; min-width: 317px !important; max-width: 317px !important; aspect-ratio: 2 / 3 !important; } } @media (min-width:1101px){ #photography .journal-grid.journal-horizontal, #architecture .architecture-gallery{ grid-column: 1 / -1 !important; position: static !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin-left: -8vw !important; margin-right: -8vw !important; padding: 0 !important; display: flex !important; flex-flow: row nowrap !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; } #photography .journal-grid.journal-horizontal > .journal-cover, #architecture .architecture-gallery > .architecture-cover{ flex: 0 0 317px !important; width: 317px !important; min-width: 317px !important; max-width: 317px !important; margin: 0 !important; box-sizing: border-box !important; } } #three-d .three-d-cover-caption span{ font-size: 9px !important; line-height: 1.2 !important; letter-spacing: 1.4px !important; font-weight: 400 !important; } #three-d .three-d-cover-caption strong{ font-size: clamp(21px,2.1vw,34px) !important; line-height: 1.05 !important; letter-spacing: normal !important; font-weight: 500 !important; } #three-d .three-d-cover-caption small{ font-size: 11px !important; line-height: 1.45 !important; font-weight: 400 !important; } #photography .journal-grid.journal-horizontal > .journal-cover, #photography .journal-cover, #photography .journal-cover:first-child, #photography .journal-cover:nth-child(n){ position: relative !important; height: auto !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; background: #111 !important; } #photography .journal-cover-image, #photography .journal-cover img{ position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: center center !important; } #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ position: absolute !important; z-index: 3 !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 16px 18px 18px !important; display: block !important; box-sizing: border-box !important; background: #fff !important; color: #111 !important; opacity: 1 !important; text-shadow: none !important; overflow: visible !important; } #photography .journal-cover-caption span, #photography .journal-cover-caption strong, #photography .journal-cover-caption small, #photography .journal-cover:first-child .journal-cover-caption span, #photography .journal-cover:first-child .journal-cover-caption strong, #photography .journal-cover:first-child .journal-cover-caption small{ color: #111 !important; opacity: 1 !important; text-shadow: none !important; } #photography .journal-cover-caption small, #photography .journal-cover:first-child .journal-cover-caption small{ max-width: none !important; } @media (max-width:720px){ #photography .journal-cover-caption, #photography .journal-cover:first-child .journal-cover-caption{ padding: 14px 16px 17px !important; } } #three-d .three-d-cover{ position: relative !important; height: auto !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; background: #111 !important; color: #111 !important; } #three-d .three-d-cover-image, #three-d .three-d-cover img{ position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } #three-d .three-d-cover::after{ display: none !important; } #three-d .three-d-cover-caption{ position: absolute !important; z-index: 3 !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 16px 18px 18px !important; box-sizing: border-box !important; background: #fff !important; color: #111 !important; opacity: 1 !important; text-shadow: none !important; } #three-d .three-d-cover-caption span, #three-d .three-d-cover-caption strong, #three-d .three-d-cover-caption small{ color: #111 !important; opacity: 1 !important; text-shadow: none !important; max-width: none !important; } #architecture .architecture-cover{ position: relative !important; height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; background: #111 !important; } #architecture .architecture-cover img{ position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } #architecture .architecture-cover-caption{ position: absolute !important; z-index: 3 !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 16px 18px 18px !important; box-sizing: border-box !important; background: #fff !important; color: #111 !important; opacity: 1 !important; text-shadow: none !important; } #architecture .architecture-cover-caption span, #architecture .architecture-cover-caption strong, #architecture .architecture-cover-caption small{ color: #111 !important; opacity: 1 !important; text-shadow: none !important; max-width: none !important; } @media (max-width:720px){ #three-d .three-d-cover-caption, #architecture .architecture-cover-caption{ padding: 14px 16px 17px !important; } } #photography{ background: var(--section-light) !important; color: #171717 !important; } #three-d{ background: var(--section-dark) !important; color: #fff !important; } #contact{ background: var(--section-dark) !important; color: #fff !important; } #photography .section-index strong{ color:#d8d8d8 !important; } #photography .section-index span, #photography .section-heading h2, #photography .photography-copy, #photography .photography-copy p, #photography .journal-filters button, #photography .journal-filters span{ color:#171717 !important; } #three-d .section-index strong{ color:rgba(255,255,255,.30) !important; } #three-d .section-index span, #three-d .section-heading h2, #three-d .three-d-copy, #three-d .three-d-copy p{ color:#fff !important; } #experience .experience-grid{ grid-column: 1 / -1 !important; position: static !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 60px -8vw 0 !important; padding: 3px 0 0 !important; display: flex !important; flex-flow: row nowrap !important; align-items: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; background: #eceee9 !important; } #experience .experience-grid > .experience-card{ position: relative !important; flex: 0 0 317px !important; width: 317px !important; min-width: 317px !important; max-width: 317px !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; box-sizing: border-box !important; } #experience .experience-grid > .experience-card > img{ display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: initial !important; object-position: initial !important; transform: none !important; opacity: 1 !important; } #experience .experience-grid > .experience-card > figcaption{ position: static !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 16px 18px 18px !important; box-sizing: border-box !important; background: #fff !important; color: #111 !important; opacity: 1 !important; transform: none !important; text-shadow: none !important; pointer-events: none !important; } #experience .experience-card figcaption strong{ display: block !important; color: #111 !important; opacity: 1 !important; font-size: 26px !important; line-height: 1.08 !important; font-weight: 500 !important; letter-spacing: normal !important; } #experience .experience-card figcaption span{ display: block !important; margin-top: 8px !important; color: #111 !important; opacity: 1 !important; font-size: 11px !important; line-height: 1.45 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; } @media (hover:hover) and (pointer:fine){ #experience .experience-card:hover img{ transform: none !important; opacity: 1 !important; } #experience .experience-card:hover figcaption{ opacity: 1 !important; transform: none !important; } } @media (min-width:721px) and (max-width:1100px){ #experience .experience-grid{ margin-left: -8vw !important; margin-right: -8vw !important; } #experience .experience-grid > .experience-card{ flex-basis: 320px !important; width: 320px !important; min-width: 320px !important; max-width: 320px !important; } } @media (max-width:720px){ #experience .experience-grid{ position: relative !important; left: 50% !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin: 32px 0 0 !important; padding-top: 3px !important; transform: translateX(-50%) !important; align-items: flex-start !important; background: #eceee9 !important; } #experience .experience-grid > .experience-card{ flex: 0 0 calc(100vw - 6px) !important; width: calc(100vw - 6px) !important; min-width: calc(100vw - 6px) !important; max-width: calc(100vw - 6px) !important; height: auto !important; max-height: none !important; } #experience .experience-grid > .experience-card > img{ width: 100% !important; height: auto !important; min-height: 0 !important; transform: none !important; } #experience .experience-grid > .experience-card > figcaption{ padding: 14px 16px 17px !important; } #experience .experience-card figcaption strong{ font-size: 24px !important; } } /* ARTICLES · GALLERIES — SECTIONS 01 + 02 */ .article-panel-body .article-gallery{ position: relative !important; left: auto !important; transform: none !important; width: 72vw !important; max-width: 72vw !important; margin: 70px 0 110px !important; padding: 0 !important; background: #fff !important; overflow: hidden !important; box-sizing: border-box !important; } .article-panel-body .article-gallery > figure, .article-panel-body .article-gallery > figure:nth-child(n){ margin: 0 !important; background: #fff !important; } @media (min-width:721px) and (max-width:1100px){ .article-panel-body .article-gallery{ width: 82vw !important; max-width: 82vw !important; margin-top: 60px !important; margin-bottom: 90px !important; margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width:720px){ .article-panel-body .article-gallery{ position: relative !important; left: auto !important; transform: none !important; width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; margin: 48px auto 72px !important; background: #fff !important; overflow: hidden !important; } } #photography .journal-grid, #three-d .three-d-grid, #architecture .architecture-gallery, #experience .experience-grid, #projects .project-grid, .article-panel-body .article-gallery{ gap: 0 !important; border: var(--gallery-line-size) solid var(--gallery-line) !important; outline: 0 !important; box-shadow: none !important; } #photography .journal-grid{ background: var(--section-dark) !important; } #three-d .three-d-grid{ background: var(--section-light) !important; } #architecture .architecture-gallery{ background: var(--section-light) !important; } #experience .experience-grid{ background: var(--section-light) !important; } #projects .project-grid{ background: var(--section-light) !important; } .article-panel-body .article-gallery{ background: #fff !important; } #photography .journal-cover, #three-d .three-d-cover, #architecture .architecture-cover, #experience .experience-card, #projects .project-card{ border: 0 !important; border-right: var(--gallery-line-size) solid var(--gallery-line) !important; outline: 0 !important; box-shadow: none !important; } #photography .journal-cover:last-child, #three-d .three-d-cover:last-child, #architecture .architecture-cover:last-child, #experience .experience-card:last-child, #projects .project-card:last-child{ border-right: 0 !important; } #photography .journal-cover-caption, #three-d .three-d-cover-caption, #architecture .architecture-cover-caption, #experience .experience-card > figcaption{ border: 0 !important; border-top: var(--gallery-line-size) solid var(--gallery-line) !important; } .article-panel-body .article-gallery > figure{ border: 0 !important; border-right: var(--gallery-line-size) solid var(--gallery-line) !important; border-bottom: var(--gallery-line-size) solid var(--gallery-line) !important; outline: 0 !important; box-shadow: none !important; margin: 0 !important; } .article-panel-body .article-gallery > figure > img{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } @media (max-width:720px){ #photography .journal-grid, #three-d .three-d-grid, #architecture .architecture-gallery, #experience .experience-grid, #projects .project-grid, .article-panel-body .article-gallery{ border-width: var(--gallery-line-size) !important; } } #photography .journal-grid, #three-d .three-d-grid, #architecture .architecture-gallery{ border-color: var(--section-dark) !important; } #photography .journal-cover, #three-d .three-d-cover, #architecture .architecture-cover{ border-right-color: var(--section-dark) !important; } #photography .journal-cover-caption, #three-d .three-d-cover-caption, #architecture .architecture-cover-caption{ border-top-color: var(--section-dark) !important; } #three-d .three-d-grid{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } #three-d .three-d-cover{ border: var(--gallery-line-size) solid var(--section-dark) !important; outline: 0 !important; box-shadow: none !important; } #three-d .three-d-cover + .three-d-cover{ margin-left: calc(-1 * var(--gallery-line-size)) !important; } #three-d .three-d-cover-caption{ border: 0 !important; border-top: var(--gallery-line-size) solid var(--section-dark) !important; } #experience .experience-grid{ padding-top: 0 !important; border: var(--gallery-line-size) solid var(--gallery-line) !important; } @media (max-width:720px){ #experience .experience-grid{ padding-top: 0 !important; } } #three-d .three-d-grid > .three-d-cover, #three-d .three-d-grid > .three-d-cover:last-child{ border-right: var(--gallery-line-size) solid var(--section-dark) !important; } #three-d .three-d-grid{ background: linear-gradient( to bottom, var(--section-dark) 0, var(--section-dark) var(--gallery-line-size), var(--section-light) var(--gallery-line-size), var(--section-light) 100% ) !important; } #photography .journal-grid, #photography .journal-grid.journal-horizontal{ background: #1B1B1B !important; background-color: #1B1B1B !important; background-image: none !important; } #projects .project-grid{ border-color: var(--section-dark) !important; } #projects .project-card, #projects .project-card.wide{ border-color: var(--section-dark) !important; border-right: var(--gallery-line-size) solid var(--section-dark) !important; } #projects .project-card:last-child, #projects .project-card.wide:last-child{ border-right-color: var(--section-dark) !important; } #architecture .architecture-gallery{ background: #1B1B1B !important; } .article-gallery{ background: #ffffff !important; } .article-gallery figure{ border: 3px solid #ffffff !important; box-sizing: border-box !important; } .article-panel, .article-panel-body, .article-gallery{ background: #FFFFFF !important; } .article-gallery{ gap: 0 !important; } .article-gallery figure{ border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 2px #FFFFFF !important; background: #FFFFFF !important; } .article-gallery img{ border: 2px solid #FFFFFF !important; box-sizing: border-box !important; } .article-gallery figure{ border: 3px solid #FFFFFF !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; } .article-gallery figure img{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* 00 · HOME */ .hero-name{ display:inline-block; margin:0 0 3px; font-family:Montserrat,Arial,sans-serif; font-size:26px; font-weight:600; line-height:1.2; letter-spacing:3.1px; color:#fff; text-transform:uppercase; white-space:nowrap; } .contact-bio{ max-width:560px; margin:10px 0 18px; font-size:13px; line-height:1.55; } @media (max-width:720px){ .hero-name{ font-size:9px; letter-spacing:2.5px; } } /* ========================================================= 04 · AI WORKFLOW — architect line Keeps the architect credit bold, but smaller than the main title. ========================================================= */ #experience .experience-card figcaption span > strong{ display: inline !important; font-size: 11px !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: 0 !important; } @media (max-width:720px){ #experience .experience-card figcaption span > strong{ font-size: 10px !important; } } /* ========================================================= ARTICLE PANEL · SINGLE WHITE HEADER BAR Journal/3D title + previous / articles / next / close ========================================================= */ .article-panel-head{ position: sticky !important; top: 0 !important; z-index: 20 !important; height: 50px !important; min-height: 50px !important; padding: 0 0 0 28px !important; background: #fff !important; color: #111 !important; border-bottom: 1px solid #e5e5e5 !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; } .article-panel-head .article-panel-brand{ min-width: 0; display: flex !important; flex-direction: column !important; justify-content: center !important; line-height: 1.05 !important; padding-right: 24px; } .article-panel-head .article-panel-brand strong{ color: #111 !important; font-size: 18px !important; line-height: 1 !important; font-weight: 700 !important; } .article-panel-head .article-panel-brand small{ margin-top: 4px !important; color: #111 !important; font-size: 7px !important; line-height: 1 !important; letter-spacing: 1.15px !important; text-transform: uppercase !important; } .article-panel-head .article-white-nav{ position: static !important; top: auto !important; z-index: auto !important; width: auto !important; height: 50px !important; min-height: 50px !important; margin: 0 0 0 auto !important; padding: 0 !important; display: flex !important; align-items: stretch !important; justify-content: flex-end !important; background: #fff !important; color: #111 !important; border: 0 !important; } .article-panel-head .article-white-nav .article-nav-arrow{ width: 49px !important; height: 50px !important; background: #fff !important; color: #111 !important; border: 0 !important; border-left: 1px solid #e5e5e5 !important; font-size: 21px !important; } .article-panel-head .article-white-nav .article-nav-label{ height: 50px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; color: #111 !important; border: 0 !important; border-left: 1px solid #e5e5e5 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: 1.3px !important; } .article-panel-head .article-white-nav .article-nav-next{ border-right: 0 !important; } .article-panel-head .article-panel-close{ position: static !important; flex: 0 0 50px !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-left: 1px solid #e5e5e5 !important; background: #fff !important; color: #111 !important; font-size: 38px !important; font-weight: 200 !important; line-height: 1 !important; } .article-panel-head .article-white-nav .article-nav-arrow:hover:not(:disabled), .article-panel-head .article-panel-close:hover{ background: #f4f4f4 !important; } .article-panel-body{ padding-top: 70px !important; } @media (max-width:720px){ .article-panel-head{ height: 50px !important; min-height: 50px !important; padding-left: 14px !important; } .article-panel-head .article-panel-brand{ flex: 1 1 auto !important; padding-right: 8px !important; } .article-panel-head .article-panel-brand strong{ font-size: 14px !important; } .article-panel-head .article-panel-brand small{ display: block !important; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 5.5px !important; letter-spacing: .8px !important; } .article-panel-head .article-white-nav{ flex: 0 0 auto !important; height: 50px !important; min-height: 50px !important; } .article-panel-head .article-white-nav .article-nav-arrow{ width: 38px !important; height: 50px !important; font-size: 18px !important; } .article-panel-head .article-white-nav .article-nav-label{ height: 50px !important; padding: 0 9px !important; font-size: 6.5px !important; letter-spacing: .8px !important; } .article-panel-head .article-panel-close{ flex-basis: 44px !important; width: 44px !important; height: 50px !important; font-size: 34px !important; } .article-panel-body{ padding-top: 54px !important; } } .article-panel-head .article-white-nav{ display:flex !important; flex-direction:row !important; align-items:stretch !important; flex-wrap:nowrap !important; } .article-panel-head .article-white-nav .article-nav-arrow, .article-panel-head .article-white-nav .article-nav-label{ display:flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; } .article-panel-head{ border-bottom: 1px solid #dcdcdc !important; box-shadow: none !important; } .article-panel-head .article-panel-brand, .article-panel-head .article-white-nav, .article-panel-head .article-white-nav .article-nav-arrow, .article-panel-head .article-white-nav .article-nav-label, .article-panel-head .article-panel-close{ border-bottom: 0 !important; } /* ARTICLE GALLERIES · white separators / no grey outline */ .article-panel-body .article-gallery{ border-color: #ffffff !important; background: #ffffff !important; } .article-panel-body .article-gallery > figure{ border-color: #ffffff !important; outline: 0 !important; box-shadow: none !important; background: #ffffff !important; } .article-panel-body .article-gallery > figure > img{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } .article-panel-head{ border-bottom: 0 !important; position: sticky !important; } .article-panel-head::after{ content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; background: #dcdcdc !important; pointer-events: none !important; z-index: 100 !important; } .article-panel-head .article-panel-brand, .article-panel-head .article-white-nav, .article-panel-head .article-white-nav .article-nav-arrow, .article-panel-head .article-white-nav .article-nav-label, .article-panel-head .article-panel-close{ border-bottom: 0 !important; } /* Secções claras: TODO o texto a preto */ .white-section, .white-section *, #photography, #photography *, #architecture, #architecture *, #projects, #projects *{ color:#000000 !important; text-shadow:none !important; } /* Secções escuras: TODO o texto a branco */ .charcoal-section, .charcoal-section *, #three-d, #three-d *, #experience, #experience *, #contact, #contact *{ color:#ffffff !important; text-shadow:none !important; } /* Mantém as três riscas do botão de menu a preto */ .topbar .menu-toggle span, header.topbar button.menu-toggle span{ display:block !important; background:#000000 !important; background-color:#000000 !important; } .topbar .menu-toggle::before, header.topbar button.menu-toggle::before{ background:#000000 !important; box-shadow:0 7px 0 #000000, 0 14px 0 #000000 !important; } .hero{ height:72vh !important; min-height:520px !important; } @media (max-width:720px){ .hero{ height:auto !important; min-height:100svh !important; overflow:visible !important; } } /* ========================================================= SECÇÃO 04 · GALERIA HORIZONTAL IGUAL À SECÇÃO 01 ========================================================= */ #journal-personal .personal-journal-grid, #journal-personal .journal-grid.journal-horizontal{ grid-column:1 / -1 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; display:flex !important; flex-flow:row nowrap !important; width:auto !important; min-width:0 !important; max-width:none !important; margin-left:-8vw !important; margin-right:-8vw !important; padding:0 !important; gap:0 !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; -ms-overflow-style:none !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch !important; scroll-behavior:smooth !important; } #journal-personal .personal-journal-grid::-webkit-scrollbar{ display:none !important; } #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 317px !important; width:317px !important; min-width:317px !important; max-width:317px !important; margin:0 !important; box-sizing:border-box !important; } @media (min-width:721px) and (max-width:1100px){ #journal-personal .personal-journal-grid{ margin-left:-8vw !important; margin-right:-8vw !important; } #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 calc((100vw - 9px) / 2) !important; width:calc((100vw - 9px) / 2) !important; min-width:calc((100vw - 9px) / 2) !important; max-width:calc((100vw - 9px) / 2) !important; } } @media (max-width:720px){ #journal-personal .personal-journal-grid, #journal-personal .journal-grid.journal-horizontal{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:100vw !important; min-width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; scroll-snap-type:x mandatory !important; } #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 80vw !important; width:80vw !important; min-width:80vw !important; max-width:80vw !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; } } /* ========================================================= SECÇÃO 04 · PERSONAL WORK / JOURNAL ========================================================= */ #journal-personal.personal-journal-section{ display:grid !important; grid-template-columns:100px minmax(300px,470px) 1fr !important; column-gap:2.5vw !important; padding:100px 8vw 0 !important; background:#fff !important; color:#111 !important; box-sizing:border-box !important; } #journal-personal .section-index strong{ color:#d1d3ce !important; } #journal-personal .section-index span, #journal-personal .section-heading h2, #journal-personal .personal-journal-copy, #journal-personal .personal-journal-copy p, #journal-personal .section-pt, #journal-personal .section-pt summary, #journal-personal .section-pt-content, #journal-personal .section-pt-content p{ color:#171717 !important; text-shadow:none !important; } #journal-personal .section-heading h2 .accent{ color:#504638 !important; } #journal-personal .personal-journal-copy{ padding-left:2.5vw !important; transform:translateX(3vw) !important; } #journal-personal .personal-journal-grid{ grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; width:auto !important; margin:64px -8vw 0 !important; padding:0 !important; gap:0 !important; background:#000 !important; overflow:visible !important; } #journal-personal .journal-cover{ position:relative !important; display:block !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; aspect-ratio:2 / 3 !important; overflow:hidden !important; background:#fff !important; color:#111 !important; text-decoration:none !important; } #journal-personal .journal-cover-image, #journal-personal .journal-cover > img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; filter:grayscale(100%) contrast(88%) brightness(108%) !important; transition:transform .45s ease !important; } #journal-personal .journal-cover:hover .journal-cover-image, #journal-personal .journal-cover:hover > img{ transform:scale(1.015) !important; } #journal-personal .journal-cover-caption{ position:absolute !important; z-index:2 !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; height:auto !important; margin:0 !important; padding:16px 18px 18px !important; display:block !important; box-sizing:border-box !important; background:#fff !important; color:#111 !important; opacity:1 !important; text-shadow:none !important; } #journal-personal .journal-cover-caption span, #journal-personal .journal-cover-caption strong, #journal-personal .journal-cover-caption small{ display:block !important; color:#111 !important; opacity:1 !important; text-shadow:none !important; } #journal-personal .journal-cover-caption span{ margin-bottom:9px !important; font-size:9px !important; line-height:1.2 !important; letter-spacing:1.4px !important; } #journal-personal .journal-cover-caption strong{ font-size:clamp(21px,2.1vw,34px) !important; line-height:1.08 !important; font-weight:500 !important; } #journal-personal .journal-cover-caption small{ margin-top:10px !important; font-size:11px !important; line-height:1.45 !important; } @media (max-width:1100px) and (min-width:721px){ #journal-personal.personal-journal-section{ grid-template-columns:70px 1fr !important; } #journal-personal .personal-journal-copy{ padding-left:0 !important; transform:none !important; } #journal-personal .personal-journal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:720px){ #journal-personal.personal-journal-section{ display:block !important; padding:76px 7vw 0 !important; } #journal-personal .personal-journal-copy{ padding-left:0 !important; transform:none !important; } #journal-personal .personal-journal-grid{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; display:flex !important; flex-wrap:nowrap !important; width:100vw !important; margin:48px 0 0 !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch !important; } #journal-personal .journal-cover{ flex:0 0 80vw !important; width:80vw !important; min-width:80vw !important; max-width:80vw !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; } #journal-personal .journal-cover-caption{ padding:14px 16px 17px !important; } } /* ========================================================= PÁGINAS HTML INDEPENDENTES DOS ARTIGOS ========================================================= */ body.standalone-article-page{ margin:0; background:#fff; overflow:hidden; } .standalone-article.article-panel{ display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } .standalone-article .article-panel-head{ height:84px !important; min-height:84px !important; padding-left:32px !important; } .standalone-article .article-panel-head .article-white-nav{ height:84px !important; min-height:84px !important; } .standalone-article .article-panel-head .article-white-nav .article-nav-arrow, .standalone-article .article-panel-head .article-white-nav .article-nav-label{ height:84px !important; } .standalone-article .article-panel-head .article-white-nav .article-nav-arrow{ width:62px !important; text-decoration:none !important; } .standalone-article .article-panel-head .article-panel-brand strong{ font-size:20px !important; } .standalone-article .article-panel-head .article-panel-brand small{ margin-top:7px !important; } .article-page-close{ position:static !important; flex:0 0 64px !important; width:64px !important; height:84px !important; display:grid !important; place-items:center !important; border-left:1px solid #e5e5e5 !important; background:#fff !important; color:#111 !important; font-size:38px !important; font-weight:200 !important; line-height:1 !important; text-decoration:none !important; } .article-page-close:hover, .standalone-article .article-nav-arrow:hover{ background:#f4f4f4 !important; } .standalone-article .article-panel-body{ display:block !important; padding-top:90px !important; } @media (max-width:720px){ .standalone-article .article-panel-head{ height:72px !important; min-height:72px !important; padding-left:14px !important; } .standalone-article .article-panel-head .article-white-nav{ height:72px !important; min-height:72px !important; } .standalone-article .article-panel-head .article-white-nav .article-nav-arrow, .standalone-article .article-panel-head .article-white-nav .article-nav-label{ height:72px !important; } .standalone-article .article-panel-head .article-white-nav .article-nav-arrow{ width:38px !important; } .article-page-close{ flex-basis:44px !important; width:44px !important; height:72px !important; font-size:34px !important; } .standalone-article .article-panel-body{ padding-top:68px !important; } } /* SECÇÃO 01 · LIGAÇÃO PARA O ARTIGO DE SERVIÇOS */ .section-read-more{ display:inline-block; margin-top:18px; color:inherit; font:inherit; text-decoration:none; } .section-read-more:hover, .section-read-more:focus-visible{ text-decoration:underline; } /* TODAS AS LIGHTBOXES · FUNDO BRANCO OPACO */ .lightbox, #projectLightbox, #highlightsLightbox, .highlights-lightbox{ background:#fff !important; background-color:#fff !important; background-image:none !important; } .lightbox-close, #projectLightbox .lightbox-close, #highlightsLightbox .lightbox-close{ color:#000 !important; } #photography.photography-section, #three-d.three-d-section, #architecture.architecture-section, #experience.experience-section, #projects.projects-section, #contact.contact-section{ grid-template-columns:100px minmax(300px,470px) 1fr !important; column-gap:2.5vw !important; } @media (max-width:1100px) and (min-width:721px){ #photography.photography-section, #three-d.three-d-section, #architecture.architecture-section, #experience.experience-section, #projects.projects-section, #contact.contact-section{ grid-template-columns:70px 1fr !important; column-gap:2.5vw !important; } } @media (min-width:1101px){ #photography .photography-copy, #three-d .three-d-copy, #architecture .architecture-copy, #experience .experience-copy, #projects .section-copy, #contact .contact-copy{ padding-left:2.5vw !important; } } @media (min-width:1101px){ #photography .photography-copy, #three-d .three-d-copy, #architecture .architecture-copy, #experience .experience-copy, #projects .section-copy, #contact .contact-copy{ transform:translateX(3vw) !important; } } .journal-filters button.active{ color:var(--filter-active) !important; } /* UNIÃO DIRETA ENTRE 3D HIGHLIGHTS E 01 JOURNAL */ #photography{ border-top:0 !important; } /* TÍTULOS DAS PÁGINAS DOS ARTIGOS — PRETO */ .article-panel-body .article-intro h2, .article-panel-body .article-intro h2 *, .article-panel-body .article-intro h2 .accent, .article-panel-body .article-intro h2 .accent-light{ color:#000000 !important; text-shadow:none !important; } /* ========================================================= HOME · HIGHLIGHTS GALLERY Quadrados pequenos imediatamente abaixo do hero. ========================================================= */ .home-highlights{ width:100%; height:auto; min-height:100px; display:flex; flex-wrap:wrap; align-items:stretch; align-content:flex-start; background:#ECEEE9; border-top:3px solid #111 !important; border-bottom:0 !important; box-shadow:none !important; overflow:hidden; } .home-highlights-label{ flex:0 0 320px; width:320px; height:100px; display:flex; align-items:center; padding:0 30px; background:#050505; color:#fff; font-size:28px; line-height:1; font-weight:400; letter-spacing:-.5px; text-transform:uppercase; white-space:nowrap; border-top:0; border-bottom:0; box-sizing:border-box; } .home-highlights-track{ display:contents; } /* 3D HIGHLIGHTS · item da galeria O crédito NÃO aparece nas miniaturas. Surge apenas na LIGHTBOX. */ .home-highlights-item{ position:relative; flex:0 0 100px; width:100px; height:100px; margin:0; overflow:hidden; background:#111; } .home-highlights-image{ width:100px; height:100px; object-fit:cover; object-position:center; border-top:0; border-right:3px solid #111; border-bottom:3px solid #111; box-sizing:border-box; background:#111; } /* A última capa de cada linha completa absorve o espaço restante. A última linha incompleta mantém todas as capas com 100 px. */ .home-highlights-item.fills-row-end{ flex-basis:var(--row-fill-width,100px); width:var(--row-fill-width,100px); } .home-highlights-item.fills-row-end .home-highlights-image{ width:100%; } @media (max-width:720px){ .home-highlights{ display:none !important; } } /* ========================================================= HOME · 3D HIGHLIGHTS LIGHTBOX Crédito do arquiteto APENAS aqui, sobre a imagem aberta. Sem numeração. ========================================================= */ .home-highlights-image{ cursor: pointer; } .home-highlights-image:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; } .highlights-stage{ position:relative; } .highlights-credit{ position:absolute; z-index:4; color:#fff; font-size:14px; line-height:1.2; font-weight:500; letter-spacing:.2px; text-align:right; white-space:nowrap; transform:translate(-100%,-100%); text-shadow:none !important; pointer-events:none; } .highlights-credit[hidden]{display:none !important;} /* 3D HIGHLIGHTS · LIGHTBOX — fundo totalmente opaco + clique para avançar */ /* JOURNAL · CURSOR — mão para indicar arrastar horizontalmente */ @media (hover: hover) and (pointer: fine) { #photography .journal-grid.journal-horizontal, #photography .journal-grid.journal-horizontal > .journal-cover, #photography .journal-grid.journal-horizontal > .journal-cover img { cursor: grab !important; } #photography .journal-grid.journal-horizontal.is-dragging, #photography .journal-grid.journal-horizontal.is-dragging > .journal-cover, #photography .journal-grid.journal-horizontal.is-dragging > .journal-cover img { cursor: grabbing !important; } } @media (hover: hover) and (pointer: fine) { #photography .journal-grid.journal-horizontal, #photography .journal-grid.journal-horizontal > .journal-cover, #photography .journal-grid.journal-horizontal > .journal-cover img, #photography .journal-grid.journal-horizontal .journal-cover-image, #photography .journal-grid.journal-horizontal .journal-cover-caption, #photography .journal-grid.journal-horizontal .journal-cover-caption * { cursor: pointer !important; } } /* ========================================================= PT · TEXTOS DE APRESENTAÇÃO DAS SECÇÕES Acordeão simples — sem separadores, caixas ou efeitos ========================================================= */ .section-pt{ margin: 18px 0 0; padding: 0; border: 0; background: transparent; } .section-pt summary{ list-style: none; display: inline-block; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 9px; font-weight: 600; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; } .section-pt summary::-webkit-details-marker{ display: none; } .section-pt-content{ margin: 14px 0 0; padding: 0; border: 0; background: transparent; max-width: 710px; } .section-pt-content p{ margin: 0; padding: 0; color: inherit; font-size: 14px; line-height: 1.7; } .section-pt-content p + p{ margin-top: 14px; } .section-pt-light, .section-pt-light summary, .section-pt-light .section-pt-content{ color: inherit; } .hero .section-pt{ margin-top: 18px; } .hero .section-pt-content{ max-width: 570px; } .hero .section-pt-content p{ color: rgba(255,255,255,.87); } @media (max-width:720px){ .section-pt{ margin-top: 16px; } .section-pt-content{ margin-top: 12px; } .section-pt-content p{ font-size: 13px; } } /* ========================================================= COMMENTS — X DE FECHAR PRETO NO TELEMÓVEL Alteração pedida em 06-09-2026 ========================================================= */ @media (max-width:720px){ .comments-panel-close{ color:#000 !important; } } /* ========================================================= AUTOMATIC GALLERY NUMBERS + TOTAL COUNTS All main galleries except HOME · 3D HIGHLIGHTS ========================================================= */ .gallery-item-number{ position:absolute; z-index:12; top:14px; right:14px; display:block; /* ===== ALTERAR AQUI O ASPETO DOS NÚMEROS DAS GALERIAS ===== COR: color:#ffffff TRANSPARÊNCIA: opacity:.60 ← ALTERA AQUI (0 = invisível / 1 = opaco) TAMANHO: font-size:22px PESO: font-weight:400 = normal (sem bold) ========================================================== */ color:#ffffff !important; opacity:.60 !important; font-size:18px; line-height:1; font-weight:400; letter-spacing:-.04em; text-shadow:0 1px 4px rgba(0,0,0,.35); pointer-events:none; user-select:none; } #photography .journal-cover, #three-d .three-d-cover, #architecture .architecture-cover, #experience .experience-card, #projects .project-card{ position:relative; } .gallery-total-count{ margin:0 0 10px; color:inherit; font-size:11px; line-height:1.2; font-weight:600; font-style:italic; letter-spacing:.02em; text-transform:uppercase; } #experience .gallery-total-count{ color:#000 !important; } @media (max-width:720px){ .gallery-item-number{ top:11px; right:11px; font-size:18px; } .gallery-total-count{ margin-bottom:9px; font-size:10px; } } /* ========================================================= NUMERAÇÃO DAS GALERIAS — AJUSTE 03 · ARCHITECTURE: números sempre BRANCOS 05 · CASUAL GALLERY: sem numeração ========================================================= */ #architecture .gallery-item-number{ color:#ffffff !important; /* COR */ opacity:.60 !important; /* TRANSPARÊNCIA: 0 a 1 */ font-weight:400 !important; /* SEM BOLD */ } /* GALERIA 05 — retirar completamente a numeração */ #projects .gallery-item-number{ display:none !important; } /* ========================================================= COR DOS NÚMEROS — ALTERAR AQUI Galerias 01, 02, 03 e 04: BRANCO / 60% Galeria 05: SEM NUMERAÇÃO ========================================================= */ #photography .gallery-item-number, #three-d .gallery-item-number, #architecture .gallery-item-number, #experience .gallery-item-number{ color:#ffffff !important; /* COR DOS NÚMEROS */ opacity:.60 !important; /* TRANSPARÊNCIA: 0 a 1 */ font-weight:400 !important; /* SEM BOLD */ } #projects .gallery-item-number{ display:none !important; /* GALERIA 05 SEM NÚMEROS */ } /* ========================================================= CONTROLO INDIVIDUAL — MOSTRAR / ESCONDER NÚMEROS POR GALERIA COMO ALTERAR: display:block !important; = MOSTRA os números display:none !important; = ESCONDE os números Basta trocar APENAS "block" por "none" na galeria desejada. ========================================================= */ #photography .gallery-item-number{ display:none !important; /* MOSTRAR = block | ESCONDER = none */ } #three-d .gallery-item-number{ display:block !important; /* MOSTRAR = block | ESCONDER = none */ } #architecture .gallery-item-number{ display:none !important; /* MOSTRAR = block | ESCONDER = none */ } #experience .gallery-item-number{ display:block !important; /* MOSTRAR = block | ESCONDER = none */ } #projects .gallery-item-number{ display:none !important; /* MOSTRAR = block | ESCONDER = none */ } .experience-hover-preview{ position:fixed; z-index:10050; display:none; width:auto; max-width:min(600px, calc(100vw - 32px)); max-height:min(600px, calc(100vh - 32px)); padding:0; background:#fff; /* CONTORNO DA PREVIEW O contorno visível é desenhado em ::before, por cima da imagem, para garantir exatamente 3px nos QUATRO lados. */ border:0; outline:none; box-sizing:border-box; box-shadow:0 14px 40px rgba(0,0,0,.24); pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .12s ease, transform .12s ease; } .experience-hover-preview.is-visible{ display:block; opacity:1; transform:none; } .experience-hover-preview img{ display:block; width:auto !important; height:auto !important; max-width:min(600px, calc(100vw - 38px)) !important; max-height:min(600px, calc(100vh - 38px)) !important; object-fit:contain !important; } /* ========================================================= CONTORNO BRANCO DA PREVIEW — ALTERAR AQUI 3px iguais em CIMA, DIREITA, BAIXO e ESQUERDA. É desenhado SOBRE a fotografia para nenhum lado desaparecer. ========================================================= */ .experience-hover-preview::before{ content:""; position:absolute; z-index:2; inset:0; border:3px solid #fff; /* ESPESSURA DO CONTORNO */ box-sizing:border-box; pointer-events:none; } /* ========================================================= SETA DA PREVIEW --preview-arrow-x é calculado pelo JavaScript para que o BICO DA SETA coincida exatamente com a posição do rato. ========================================================= */ .experience-hover-preview::after{ content:""; position:absolute; z-index:3; left:var(--preview-arrow-x, 50%); transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; } .experience-hover-preview:not(.preview-below)::after{ bottom:-14px; border-top:14px solid #fff; } .experience-hover-preview.preview-below::after{ top:-14px; border-bottom:14px solid #fff; } @media (hover:none), (pointer:coarse), (max-width:720px){ .experience-hover-preview{ display:none !important; } } /* ========================================================= 04 · AI WORKFLOW — DESATIVAR PREVIEW EM TOUCH / MOBILE A preview de hover funciona APENAS em dispositivos com rato. Telemóvel e tablet tátil: DESATIVADA. ========================================================= */ @media (hover:none), (pointer:coarse), (max-width:900px){ .experience-hover-preview, .experience-hover-preview.is-visible{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } } /* ========================================================= COMMENTS — TEXTO / SETAS / FECHAR A PRETO --------------------------------------------------------- Toda a janela de comentários fica com fundo branco e todos os textos, setas de resposta e "X" a preto. ========================================================= */ .comments-panel{ background:#fff !important; color:#000 !important; } /* CABEÇALHO DOS COMENTÁRIOS */ .comments-panel-head{ background:#fff !important; color:#000 !important; border-bottom:1px solid #ddd !important; } .comments-panel-head, .comments-panel-head strong, .comments-panel-head small, .comments-panel-head div{ color:#000 !important; } /* X PARA FECHAR — PRETO E VISÍVEL */ .comments-panel-close{ background:#fff !important; color:#000 !important; opacity:1 !important; visibility:visible !important; } /* TODOS OS TEXTOS DA PÁGINA DE COMENTÁRIOS */ .comments-panel .comments-blog, .comments-panel .comments-intro, .comments-panel .comments-intro h2, .comments-panel .comments-intro p, .comments-panel .comments-kicker, .comments-panel .comments-thread, .comments-panel .blog-comment, .comments-panel .blog-comment p, .comments-panel .comment-meta, .comments-panel .comment-meta strong, .comments-panel .comment-meta time, .comments-panel .comments-form-area, .comments-panel .comment-form, .comments-panel .comment-field, .comments-panel .comment-field label, .comments-panel .comment-field input, .comments-panel .comment-field textarea, .comments-panel .comment-note, .comments-panel .replying-to, .comments-panel .comment-submit{ color:#000 !important; } /* SETAS / MARCAS DAS RESPOSTAS */ .comments-panel .reply-mark, .comments-panel .comment-reply, .comments-panel .comment-submit span{ color:#000 !important; opacity:1 !important; visibility:visible !important; } /* Linhas e separadores mantêm-se discretos */ .comments-panel .blog-comment{ border-bottom-color:#ddd !important; } .comments-panel .comments-form-area{ border-top-color:#000 !important; } .comments-panel .comment-field{ border-color:#ddd !important; } /* ========================================================= LIGHTBOX — BOTÃO FECHAR SEMPRE CLICÁVEL ========================================================= */ .lightbox-close{ z-index:10000 !important; pointer-events:auto !important; cursor:pointer !important; } /* ========================================================= JOURNAL · INDICADOR HORIZONTAL — visibilidade por viewport ========================================================= */ #photography .journal-grid.journal-horizontal .gallery-swipe-hint{ opacity:0; animation:none !important; visibility:hidden; } #photography .journal-grid.journal-horizontal.gallery-in-view .gallery-swipe-hint{ visibility:visible; animation:journalArrowFadeIn .8s ease-out .15s forwards, journalArrowBlink .45s ease-in-out .95s 2 !important; } /* AI WORKFLOW · segunda linha / nome do arquiteto */ .ai-architect-line{ font-size:20px !important; /* ALTERAR AQUI o tamanho do nome do arquiteto */ } /* ========================================================= 01 · JOURNAL — FILTRO ATIVO --------------------------------------------------------- ALTERAR A COR DO FILTRO ATIVO AQUI. Vermelho seco atual: #9b3f36 ========================================================= */ #photography .journal-filters button.active, #photography .journal-filters button[aria-pressed="true"]{ color:#9b3f36 !important; } /* ========================================================= CORE UI · ESTADOS FUNCIONAIS FINAIS --------------------------------------------------------- NÃO DUPLICAR estas regras noutro ponto do CSS. Garantem que MENU, ARTIGOS e LIGHTBOX ficam visíveis quando o JavaScript adiciona a classe .open. ========================================================= */ .overlay-menu.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } .overlay-menu.open .menu-panel{ transform:translateX(0) !important; visibility:visible !important; pointer-events:auto !important; } .article-panel.open{ opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; } #projectLightbox.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } #projectLightbox .lightbox-close{ display:block !important; z-index:10001 !important; pointer-events:auto !important; } #projectLightbox .lightbox-arrow, #projectLightbox .lightbox-caption, #projectLightbox .lightbox-counter{ display:none !important; } /* ========================================================= CAMADAS DA INTERFACE — NÃO DUPLICAR --------------------------------------------------------- Ordem visual correta: página normal < artigo/comentários < menu < lightbox Isto evita que o botão do menu fique por cima dos botões × e garante que a lightbox dos artigos aparece acima do artigo. ========================================================= */ .article-panel{ z-index:12000 !important; } .comments-panel{ z-index:12000 !important; } .overlay-menu{ z-index:15000 !important; } .overlay-menu .menu-close{ z-index:15002 !important; pointer-events:auto !important; } #projectLightbox{ z-index:20000 !important; } #projectLightbox .lightbox-close{ z-index:20002 !important; pointer-events:auto !important; } /* Enquanto menu/lightbox estão abertos, o botão hamburger não pode intercetar cliques destinados ao × que está por cima. */ body.menu-open .menu-toggle, body.lightbox-open .menu-toggle{ pointer-events:none !important; } /* 3D HIGHLIGHTS · BOTÃO FECHAR — exclusivo desta lightbox */ #highlightsLightbox .highlights-close{ position:absolute; z-index:40005; top:18px; right:24px; width:56px; height:56px; border:0; padding:0; background:transparent; color:#000 !important; font-size:46px; font-weight:200; line-height:1; cursor:pointer; pointer-events:auto; } #highlightsLightbox{z-index:40000 !important;} #highlightsLightbox .highlights-stage{z-index:40001;} @media (max-width:720px){ #highlightsLightbox .highlights-close{top:8px;right:10px;font-size:42px;} } /* ========================================================= MOBILE — MENU REMOVIDO --------------------------------------------------------- Em ecrãs até 720px o botão de menu e o menu overlay ficam completamente ocultos. Desktop permanece inalterado. ========================================================= */ @media (max-width:720px){ .topbar .menu-toggle, .menu-toggle, .overlay-menu{ display:none !important; } } /* ========================================================= CONTADORES "( n ) ARTICLES" · TODAS AS SECÇÕES Sem itálico; mesma fonte do texto inferior; bold; 2× maior. ========================================================= */ .gallery-total-count, .section-total-count, .articles-total-count, .journal-total-count, .three-d-total-count, .architecture-total-count, .experience-total-count, .projects-total-count, .data-gallery-actual-count{ font-family:Montserrat,Arial,sans-serif !important; font-style:normal !important; font-weight:700 !important; font-size:18px !important; line-height:1.25 !important; } /* ========================================================= GALERIAS HORIZONTAIS · SEM SETA Mantém a escala original definida no CSS principal. ========================================================= */ .gallery-swipe-hint{ display:none !important; } /* ========================================================= MOBILE · GALERIAS HORIZONTAIS — 20% DA CAPA SEGUINTE VISÍVEL --------------------------------------------------------- Em ecrãs até 720px cada capa ocupa 80vw. Assim, ao entrar em cada galeria, ficam visíveis a primeira capa e aproximadamente 20% da capa seguinte, indicando naturalmente que a galeria desliza horizontalmente. ========================================================= */ @media (max-width:720px){ #three-d .three-d-grid > .three-d-cover, #photography .journal-grid.journal-horizontal > .journal-cover, #architecture .architecture-gallery > .architecture-cover, #projects .project-grid > .project-card, #projects .project-grid > .project-card.wide, #experience .experience-grid > .experience-card{ flex: 0 0 80vw !important; width: 80vw !important; min-width: 80vw !important; max-width: 80vw !important; scroll-snap-align: start !important; } /* mantém a proporção visual já usada nestas duas galerias */ #projects .project-grid > .project-card, #projects .project-grid > .project-card.wide, #experience .experience-grid > .experience-card{ height: 104vw !important; max-height: 430px !important; } } /* ========================================================= MOBILE · SNAP HORIZONTAL DAS GALERIAS --------------------------------------------------------- Ao deslizar com o dedo, cada capa encaixa automaticamente no início do ecrã, mantendo cerca de 20% da seguinte visível. ========================================================= */ @media (max-width:720px){ #three-d .three-d-grid, #photography .journal-grid.journal-horizontal, #architecture .architecture-gallery, #projects .project-grid, #experience .experience-grid{ overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory !important; scroll-behavior: smooth; overscroll-behavior-x: contain; } #three-d .three-d-grid > .three-d-cover, #photography .journal-grid.journal-horizontal > .journal-cover, #architecture .architecture-gallery > .architecture-cover, #projects .project-grid > .project-card, #projects .project-grid > .project-card.wide, #experience .experience-grid > .experience-card{ scroll-snap-align: start !important; scroll-snap-stop: always; } } /* ========================================================= SECÇÃO 03 · AI WORKFLOW — CINZA + TEXTO PRETO ========================================================= */ #experience, #experience.experience-section, #experience.charcoal-section { background: #eceee9 !important; background-color: #eceee9 !important; color: #000 !important; } #experience .section-index, #experience .section-index strong, #experience .section-index span, #experience .section-heading, #experience .section-heading h2, #experience .section-heading h2 span, #experience .experience-copy, #experience .experience-copy p, #experience .lead, #experience .section-pt, #experience .section-pt summary, #experience .section-pt-content, #experience .section-pt-content p, #experience .accent, #experience .accent-light { color: #000 !important; } /* mantém a galeria abaixo separada da cabeça da secção */ #experience .experience-grid { color: #000 !important; } /* Destaques castanhos dos títulos principais */ #photography .section-heading h2 .accent, #experience .section-heading h2 .accent-light { color: #504638 !important; } /* SECÇÃO 03 — mais espaço cinza abaixo das capas antes da secção seguinte */ #experience .experience-grid { padding-bottom: 70px !important; box-sizing: border-box !important; background: #eceee9 !important; } /* HOME · IMAGEM DA CABEÇA — carregamento prioritário */ .hero{ background-color:#111 !important; background-image: linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.04) 100%), url("images/head/head_2.jpg") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; } @media (max-width:720px){ .hero{ background-image: linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.58) 68%,rgba(0,0,0,.20) 100%), url("images/head/head_2.jpg") !important; background-position:58% center !important; } } /* CORREÇÃO FINAL · SECÇÃO 04 COMO SLIDE HORIZONTAL */ #journal-personal .personal-journal-grid{ grid-column:1 / -1 !important; position:static !important; left:auto !important; transform:none !important; display:flex !important; flex-flow:row nowrap !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:64px -8vw 0 !important; padding:0 !important; gap:0 !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; -ms-overflow-style:none !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch !important; } #journal-personal .personal-journal-grid::-webkit-scrollbar{ display:none !important; } #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 317px !important; width:317px !important; min-width:317px !important; max-width:317px !important; margin:0 !important; } @media (min-width:721px) and (max-width:1100px){ #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 calc((100vw - 9px) / 2) !important; width:calc((100vw - 9px) / 2) !important; min-width:calc((100vw - 9px) / 2) !important; max-width:calc((100vw - 9px) / 2) !important; } } @media (max-width:720px){ #journal-personal .personal-journal-grid{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:100vw !important; min-width:100vw !important; max-width:100vw !important; margin:48px 0 0 !important; scroll-snap-type:x mandatory !important; } #journal-personal .personal-journal-grid > .journal-cover{ flex:0 0 80vw !important; width:80vw !important; min-width:80vw !important; max-width:80vw !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; } } /* SECÇÃO 04 · CONTORNO PRETO DE 3 PX EM TODAS AS CAPAS */ #journal-personal .personal-journal-grid > .journal-cover{ border:3px solid #000 !important; box-sizing:border-box !important; margin-right:-3px !important; } #journal-personal .personal-journal-grid > .journal-cover:last-child{ margin-right:0 !important; } /* SECÇÃO 05 · CONTACT COM A MESMA COR DA SECÇÃO 03 */ #contact, #contact.contact-section{ background:#eceee9 !important; background-color:#eceee9 !important; color:#000 !important; } #contact .section-index, #contact .section-index strong, #contact .section-index span, #contact .section-heading, #contact .section-heading h2, #contact .section-heading h2 span, #contact .contact-copy, #contact .contact-copy p, #contact .contact-copy a, #contact .contact-bio, #contact .contact-sites, #contact .contact-sites a, #contact .section-pt, #contact .section-pt summary, #contact .section-pt-content, #contact .section-pt-content p, #contact .accent, #contact .accent-light{ color:#000 !important; text-shadow:none !important; } /* SECÇÃO 04 · CABEÇALHO PRETO COM TEXTO BRANCO */ #journal-personal, #journal-personal.personal-journal-section{ background:#111 !important; background-color:#111 !important; color:#fff !important; } #journal-personal .section-index span, #journal-personal .section-heading, #journal-personal .section-heading h2, #journal-personal .section-heading h2 span, #journal-personal .personal-journal-copy, #journal-personal .personal-journal-copy p, #journal-personal .section-pt, #journal-personal .section-pt summary, #journal-personal .section-pt-content, #journal-personal .section-pt-content p, #journal-personal .accent, #journal-personal .accent-light{ color:#fff !important; text-shadow:none !important; } #journal-personal .section-index strong{ color:rgba(255,255,255,.30) !important; } /* Contador da secção PERSONAL WORK — sempre branco sobre fundo preto. */ #journal-personal .gallery-total-count{ color:#fff !important; } /* Palavra “Work.” branca no cabeçalho da secção 04 */ #journal-personal .section-heading h2 .accent{ color:#fff !important; } /* MOBILE · permite manter apenas 20% da primeira capa visível */ @media (max-width:720px){ #photography .journal-grid.journal-horizontal, #journal-personal .journal-grid.journal-horizontal, #architecture .architecture-gallery{ scroll-snap-type:none !important; scroll-behavior:auto !important; } } /* MIRADOURO DO ZEBRO · BLOQUEIO FINAL DO LAYOUT MANUAL */ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:row !important; width:100% !important; max-width:none !important; margin:0 0 110px !important; padding:0 !important; gap:22px !important; border:0 !important; overflow:visible !important; background:#fff !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure:nth-child(n), body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure:nth-of-type(n){ display:block !important; grid-column:span 1 !important; flex:none !important; width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; aspect-ratio:4 / 3 !important; border:0 !important; box-shadow:none !important; overflow:hidden !important; background:#fff !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > figure > img{ display:block !important; width:100% !important; height:100% !important; margin:0 !important; border:0 !important; object-fit:cover !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-copy{ grid-column:span 1 !important; width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; aspect-ratio:4 / 3; overflow:auto; } @media (max-width:620px){ body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery{ grid-template-columns:1fr !important; gap:12px !important; } body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-intro, body.standalone-article-page[data-current-article="miradouro-do-zebro"] .article-panel-body .zebro-reportage-gallery > .reportage-copy{ grid-column:1 !important; aspect-ratio:auto; overflow:visible; } }