/* ═══════════════════════════════════════════════════════ Élégance — Editorial Refactor Luxe · Architectural · Whitespace-driven ═══════════════════════════════════════════════════════ */ /* Fontes carregadas no com preconnect para performance. Cormorant Garamond + Inter — ver tags em cada HTML. */ :root { /* Paleta validada — moss green + cream */ --cream: #fcf9f2; --cream-warm: #f1eee7; --cream-dim: #e7e2d5; --moss: #4a6450; --moss-deep: #2c4532; --moss-night: #3c4b35; --gold: #c5a059; --ink: #1f2419; --mute: #655d56; --line: #d8d2c1; /* Tipografia editorial */ --font-display: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Card / image radius — soft, never tombstone */ --radius-soft: 10px; --radius-card: 14px; /* Ritmo */ --gutter: clamp(1.5rem, 4vw, 4rem); --section: clamp(6rem, 14vw, 12rem); /* Easings */ --ease-luxe: cubic-bezier(0.23, 1, 0.32, 1); } /* — Reset & base — */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.65; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* Prevent any element from breaking horizontal layout on mobile */ html, body { overflow-x: hidden; } img, picture, video, svg { max-width: 100%; } /* Comfortable tap target for inline links inside paragraphs */ a, button { -webkit-tap-highlight-color: rgba(31, 42, 36, 0.08); } ::selection { background: var(--moss); color: var(--cream); } /* — Typography — */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.008em; margin: 0; color: var(--moss-deep); } .display--xl { font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.98; } .display--lg { font-size: clamp(2.5rem, 6vw, 5rem); } .display--md { font-size: clamp(2rem, 4vw, 3.5rem); } .display--sm { font-size: clamp(1.4rem, 2.2vw, 2rem); } .italic { font-style: italic; } .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--moss); } .lede { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--mute); max-width: 52ch; } .body-text { font-size: 0.98rem; font-weight: 400; line-height: 1.75; color: var(--ink); max-width: 52ch; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* — Container — */ .shell { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(4rem, 8vw, 7rem); } /* ═══════════════ NAVIGATION ═══════════════ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 1.25rem var(--gutter); display: flex; align-items: center; justify-content: space-between; background: rgba(252, 249, 242, 0); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, padding .35s ease, box-shadow .35s ease; } /* Subpages: scrolled gets the cream backdrop */ .nav.is-scrolled { background: rgba(252, 249, 242, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-block: .9rem; border-bottom-color: rgba(31, 42, 36, 0.08); box-shadow: 0 2px 14px rgba(31, 42, 36, 0.05); } .nav__brand { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: 0.005em; color: var(--moss-deep); } .nav__brand small { font-family: var(--font-sans); font-style: normal; font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; display: block; color: var(--mute); margin-top: 2px; } .nav__list { display: flex; gap: clamp(1.25rem, 2.4vw, 2.6rem); list-style: none; margin: 0; padding: 0; } .nav__list a { position: relative; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: .25rem 0; } .nav__list a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--moss); transition: width .5s var(--ease-luxe); } .nav__list a:hover::after, .nav__list a.is-active::after { width: 100%; } .nav__cta { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.25rem; border: 1px solid var(--moss); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--moss); transition: background 0.4s ease-in-out, color 0.4s ease-in-out; } .nav__cta:hover { background: var(--moss); color: var(--cream); } /* Language switcher */ .nav__lang { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; } .nav__lang a { color: var(--mute); padding: .3rem .25rem; transition: color 0.4s ease-in-out; } .nav__lang a:hover { color: var(--moss-deep); } .nav__lang a.is-active { color: var(--moss-deep); font-weight: 500; } .nav__lang span { color: var(--line); font-size: 0.7em; } @media (max-width: 880px) { .nav.is-open .nav__lang { margin-top: 1rem; } } .nav__burger { display: none; width: 28px; height: 18px; position: relative; cursor: pointer; background: transparent; border: 0; } .nav__burger span { position: absolute; left: 0; right: 0; height: 1px; background: var(--moss-deep); transition: transform .4s var(--ease-luxe), opacity .3s ease; } .nav__burger span:nth-child(1) { top: 4px; } .nav__burger span:nth-child(2) { top: 13px; } .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav.is-open .nav__burger span:nth-child(2) { transform: translateY(0) rotate(-45deg); } .nav__right { display: inline-flex; align-items: center; gap: clamp(0.85rem, 1.6vw, 1.5rem); } @media (max-width: 880px) { .nav { padding-inline: clamp(1rem, 4vw, 2rem); } /* Closed mobile bar: hide menu list + CTA, but keep the language switcher visible inline so users see they can switch idiom. */ .nav__list { display: none; } .nav > nav { display: none; } .nav__right { display: contents; } .nav__right > .nav__cta { display: none; } /* Compact lang inline in the closed navbar (right side, next to burger) */ .nav__lang { margin-left: auto; margin-right: .9rem; font-size: 0.74rem; letter-spacing: 0.18em; gap: .15rem; } .nav__lang a { padding: .45rem .3rem; } .nav__lang span { margin: 0 .05rem; opacity: .55; } .nav__burger { display: block; } /* Mobile open state — full-screen cream panel with moss text */ .nav.is-open { flex-direction: column; align-items: flex-start; gap: 1.5rem; background: var(--cream) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; height: 100dvh; height: 100vh; padding-top: 1.5rem; padding-bottom: 2rem; overflow-y: auto; } .nav.is-open > nav { display: block; width: 100%; } .nav.is-open .nav__list { display: flex; } .nav.is-open .nav__right { display: flex; } .nav.is-open .nav__right > .nav__cta { display: inline-flex; } .nav.is-open .nav__list { flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; width: 100%; } .nav.is-open .nav__list a { font-size: 1.1rem; color: var(--moss-deep) !important; text-shadow: none !important; padding: .65rem 0; /* 44px+ tap target */ display: block; } .nav.is-open .nav__brand, .nav.is-open .nav__brand small { color: var(--moss-deep) !important; text-shadow: none !important; } .nav.is-open .nav__right { flex-direction: column; align-items: flex-start; gap: 1.25rem; width: 100%; } .nav.is-open .nav__cta { color: var(--moss) !important; border-color: var(--moss) !important; padding: .85rem 1.25rem; } /* Reset compact placement once the menu is open */ .nav.is-open .nav__lang { margin-left: 0; margin-right: 0; font-size: 0.78rem; letter-spacing: 0.22em; gap: .35rem; } .nav.is-open .nav__lang a { color: var(--mute) !important; text-shadow: none !important; padding: .5rem .25rem; /* tap target */ } .nav.is-open .nav__lang a.is-active { color: var(--moss-deep) !important; } .nav.is-open .nav__burger span { background: var(--moss-deep) !important; } } /* Body lock when mobile menu is open */ body.is-no-scroll { overflow: hidden; touch-action: none; } /* ═══════════════ HERO — Full-bleed image, immersive ═══════════════ */ /* Design intent: ouverture de maison. Imagem do espaço cobre 100vh, overlay verde-musgo suave para dar leitura, texto sobreposto à esquerda. Zoom de entrada + parallax sutil ao scroll. */ .hero { position: relative; min-height: 100vh; /* fallback */ min-height: 100dvh; /* dynamic viewport — mobile-friendly */ overflow: hidden; display: flex; align-items: flex-end; padding: clamp(7rem, 14vw, 11rem) 0 clamp(2.5rem, 6vw, 5rem); isolation: isolate; background: var(--moss-deep); /* fallback enquanto img carrega */ } /* Background image */ .hero__bg { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; } /* Overlay leve — só o suficiente para legibilidade, sem peso */ .hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, rgba(252, 249, 242, 0.0) 30%, rgba(44, 69, 50, 0.28) 100% ), linear-gradient( 90deg, rgba(44, 69, 50, 0.22) 0%, rgba(44, 69, 50, 0.05) 55%, rgba(44, 69, 50, 0.0) 100% ); } /* Content — ligeiramente à esquerda, vertical centrado-baixo */ .hero__content { position: relative; z-index: 1; width: 100%; padding-inline: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter))); margin-bottom: clamp(2rem, 5vw, 4rem); } .hero__inner { max-width: 640px; } /* Brand line top — tiny tag */ .hero__brand-line { display: flex; align-items: center; gap: 1.25rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(252, 249, 242, 0.85); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .hero__brand-line::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(252, 249, 242, 0.4); max-width: 60px; } /* Title */ .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 5.25rem); line-height: 1.08; color: var(--cream); letter-spacing: -0.01em; margin: 0; text-shadow: 0 2px 18px rgba(20, 28, 18, 0.22); } .hero__title em { color: var(--gold); font-style: italic; font-weight: 500; } /* Subtitle */ .hero__subtitle { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(252, 249, 242, 0.92); margin: clamp(1.4rem, 2.4vw, 1.85rem) 0 0; max-width: 44ch; text-shadow: 0 1px 10px rgba(20, 28, 18, 0.2); } .hero__cta-wrap { margin-top: clamp(2rem, 3.5vw, 2.6rem); display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; } /* Hero CTA — primary (cream filled) and ghost (outline) variants */ .hero__btn { display: inline-flex; align-items: center; gap: 0.65rem; padding: .9rem 1.6rem; border-radius: 999px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; background: var(--cream); color: var(--moss-deep); border: 1px solid var(--cream); transition: transform .25s ease, background .25s ease, color .25s ease; } .hero__btn:hover { background: var(--gold); color: var(--cream); border-color: var(--gold); transform: translateY(-1px); } .hero__btn--ghost { background: transparent; color: var(--cream); border-color: rgba(252, 249, 242, 0.6); } .hero__btn--ghost:hover { background: rgba(252, 249, 242, 0.12); color: var(--cream); border-color: var(--cream); } /* Scroll cue — bottom right, discreto */ .hero__scroll-cue { position: absolute; bottom: clamp(1.5rem, 3vw, 2.5rem); right: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter))); display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(252, 249, 242, 0.7); z-index: 1; } @media (max-width: 880px) { .hero { min-height: 92vh; min-height: 92dvh; padding-top: clamp(6rem, 14vw, 8rem); padding-bottom: clamp(2rem, 6vw, 3.5rem); } .hero__inner { max-width: 100%; } .hero__scroll-cue { display: none; } .hero__bg img { object-position: center 40%; } .hero__cta-wrap { gap: .8rem; } .hero__btn { padding: .85rem 1.25rem; font-size: .72rem; letter-spacing: 0.16em; } } @media (max-width: 480px) { .hero__cta-wrap { flex-direction: column; align-items: stretch; } .hero__btn { width: 100%; justify-content: center; padding: 1rem; } } /* ═══════════════ NAV ON HERO (is-on-dark) ═══════════════ */ /* Subtle dark blur from page load — text stays visible no matter what part of the photo is behind it. */ .nav.is-on-dark:not(.is-scrolled) { background: rgba(31, 42, 36, 0.35); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .nav.is-on-dark:not(.is-scrolled) .nav__brand { color: var(--cream); text-shadow: 0 1px 6px rgba(20, 28, 18, 0.25); } .nav.is-on-dark:not(.is-scrolled) .nav__brand small { color: rgba(252, 249, 242, 0.78); } .nav.is-on-dark:not(.is-scrolled) .nav__list a { color: var(--cream); text-shadow: 0 1px 6px rgba(20, 28, 18, 0.25); } .nav.is-on-dark:not(.is-scrolled) .nav__list a::after { background: var(--cream); } .nav.is-on-dark:not(.is-scrolled) .nav__cta { color: var(--cream); border-color: rgba(252, 249, 242, 0.7); } .nav.is-on-dark:not(.is-scrolled) .nav__cta:hover { background: var(--cream); color: var(--moss-deep); border-color: var(--cream); } .nav.is-on-dark:not(.is-scrolled) .nav__lang a { color: rgba(252, 249, 242, 0.75); } .nav.is-on-dark:not(.is-scrolled) .nav__lang a.is-active, .nav.is-on-dark:not(.is-scrolled) .nav__lang a:hover { color: var(--cream); } .nav.is-on-dark:not(.is-scrolled) .nav__lang span { color: rgba(252, 249, 242, 0.4); } .nav.is-on-dark:not(.is-scrolled) .nav__burger span { background: var(--cream); } /* Once scrolled, even on home, switch to the cream off-white backdrop. */ .nav.is-on-dark.is-scrolled .nav__brand, .nav.is-on-dark.is-scrolled .nav__list a { color: var(--moss-deep); } .nav.is-on-dark.is-scrolled .nav__cta { color: var(--moss); border-color: var(--moss); } .nav.is-on-dark.is-scrolled .nav__cta:hover { background: var(--moss); color: var(--cream); } .hero__scroll__line { position: relative; display: block; width: 38px; height: 1px; background: var(--line); overflow: hidden; } .hero__scroll__line::after { content: ''; position: absolute; inset: 0; background: var(--moss); transform: translateX(-100%); animation: scrollLine 2.4s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(110%); } } .hero__headline { font-style: italic; color: var(--moss-deep); letter-spacing: -0.025em; font-size: clamp(2.85rem, 8.5vw, 9rem); line-height: 0.95; } .hero__headline span { display: block; } .hero__headline .indent { padding-left: clamp(1rem, 6vw, 6rem); } .hero__headline .gold { color: var(--gold); font-style: italic; } .hero__bottom { margin-top: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; } @media (max-width: 768px) { .hero__bottom { grid-template-columns: 1fr; } } /* ═══════════════ IMAGE FRAMES (soft rectangles) ═══════════════ */ .arch { position: relative; overflow: hidden; background: var(--cream-warm); border-radius: var(--radius-card); } .arch--soft, .arch--full, .arch--blunt { border-radius: var(--radius-card); } .arch img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; } .arch:hover img { opacity: 0.94; } .arch--portrait { aspect-ratio: 4 / 5; } .arch--tall { aspect-ratio: 4 / 5; } .arch--medium { aspect-ratio: 4 / 5; } .arch--wide { aspect-ratio: 5 / 4; } .arch--square { aspect-ratio: 1 / 1; } /* ═══════════════ MANIFESTO ═══════════════ */ .manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; } @media (max-width: 880px) { .manifesto { grid-template-columns: 1fr; } } .manifesto__quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.3; color: var(--moss-deep); } .manifesto__quote::before { content: '"'; font-size: 5rem; line-height: 0.5; display: block; color: var(--gold); margin-bottom: 1rem; } /* ═══════════════ SERVICES (editorial list) ═══════════════ */ .services-list { margin-top: 3rem; } .service-row { display: grid; grid-template-columns: 60px 1fr auto; gap: clamp(1rem, 3vw, 3rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease-luxe); } .service-row:last-child { border-bottom: 1px solid var(--line); } .service-row__num { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--mute); letter-spacing: 0.05em; } .service-row__name { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.6rem); color: var(--moss-deep); line-height: 1.05; } .service-row__name em { font-style: italic; color: var(--gold); } .service-row__cta { font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--moss); display: inline-flex; align-items: center; gap: .55rem; transition: color 0.4s ease-in-out; } .service-row:hover .service-row__cta { color: var(--moss-deep); } @media (max-width: 640px) { .service-row { grid-template-columns: 40px 1fr; } .service-row__cta { grid-column: 1 / -1; padding-top: .5rem; } } /* ═══════════════ FEATURE CARDS (3 services) ═══════════════ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: 4rem; } @media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr; } } .feature { display: flex; flex-direction: column; } .feature .arch { margin-bottom: 1.5rem; } .feature__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.85rem); color: var(--moss-deep); margin: 0 0 .5rem; } .feature__desc { font-size: 0.93rem; line-height: 1.7; color: var(--mute); max-width: 30ch; } .feature__no { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: .75rem; } /* Stagger heights for editorial rhythm */ .feature:nth-child(2) { margin-top: clamp(2rem, 5vw, 4rem); } .feature:nth-child(3) { margin-top: clamp(1rem, 3vw, 2rem); } @media (max-width: 880px) { .feature:nth-child(2), .feature:nth-child(3) { margin-top: 0; } } /* ═══════════════ MARQUEE / TICKER ═══════════════ */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.6rem; background: var(--cream-warm); } .marquee__track { display: flex; gap: 4rem; white-space: nowrap; animation: scrollX 60s linear infinite; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--moss-deep); letter-spacing: 0.02em; } .marquee__track span { display: inline-flex; align-items: center; gap: 4rem; } .marquee__track i { color: var(--gold); font-size: 0.6em; } @keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════ BUTTONS ═══════════════ */ .btn { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.85rem; border-radius: 999px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out; } .btn--solid { background: var(--moss); color: var(--cream); border-color: var(--moss); border-radius: 999px; padding: 0.95rem 1.7rem; } .btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--cream); } .btn--ghost { background: transparent; color: var(--moss-deep); border-color: var(--moss); border-radius: 999px; padding: 0.95rem 1.7rem; } .btn--ghost:hover { background: var(--moss); color: var(--cream); } .btn--gold { background: transparent; color: var(--gold); border-color: var(--gold); } .btn--gold:hover { background: var(--gold); color: var(--cream); } /* ═══════════════ FOOTER ═══════════════ */ .footer { background: var(--moss); color: var(--cream-warm); padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: 2rem; position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: -200px; right: -200px; width: 480px; height: 480px; border: 1px solid rgba(252,249,242,0.08); border-radius: 50%; } .footer h2 { font-family: var(--font-display); font-weight: 500; color: var(--cream); font-size: clamp(3rem, 9vw, 9rem); line-height: 0.95; letter-spacing: -0.02em; } .footer h2 .gold { color: var(--gold); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 3rem; border-top: 1px solid rgba(252,249,242,0.12); } @media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer { padding-top: clamp(4rem, 10vw, 6rem); } } @media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } } .footer__col h5 { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.5rem; } .footer__col ul { list-style: none; padding: 0; margin: 0; } .footer__col li { margin-bottom: .75rem; font-size: 0.92rem; } /* "Sunday closed" line in footer — readable on moss bg, subordinate to open hours */ .footer__col li.footer__day-off { color: rgba(252, 249, 242, 0.72); letter-spacing: 0.01em; } .footer__col li.footer__day-off::before { content: '·'; display: inline-block; margin-right: .5rem; color: var(--gold); } .footer__col a { color: var(--cream-warm); transition: color .3s ease; } .footer__col a:hover { color: var(--gold); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(252,249,242,0.12); margin-top: 3rem; padding-top: 2rem; font-size: 0.78rem; color: rgba(252,249,242,0.5); letter-spacing: 0.05em; } @media (max-width: 640px) { .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; } } /* ═══════════════ PAGE HERO (sub-pages) ═══════════════ */ .page-hero { padding-top: clamp(8rem, 14vw, 12rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .page-hero__num { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold); letter-spacing: 0.08em; } .page-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1.05; color: var(--moss-deep); margin: 1rem 0 2rem; letter-spacing: -0.012em; } .page-hero__title em { font-style: italic; font-weight: 500; color: var(--gold); } .page-hero__lede { max-width: 48ch; } /* ═══════════════ AREA SECTIONS (institutional) ═══════════════ */ .area { padding-block: clamp(4rem, 8vw, 6.5rem); } .area__num { display: block; font-family: var(--font-sans); font-weight: 500; color: var(--gold); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: .8rem; } .area__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.85rem, 3.4vw, 2.85rem); line-height: 1.12; color: var(--moss-deep); margin: 0 0 1.25rem; letter-spacing: -0.008em; } .area__title em { font-style: italic; font-weight: 500; color: var(--gold); } .area .body-text { max-width: 52ch; } .area .arch { aspect-ratio: 5 / 4; } @media (max-width: 880px) { .area { padding-block: clamp(3rem, 7vw, 5rem); } .area .arch { aspect-ratio: 4 / 3; } .area__title { font-size: clamp(1.65rem, 6vw, 2.2rem); } .area .body-text { font-size: 0.96rem; } } /* ═══════════════ ESPAÇO — Editorial Layout ═══════════════ */ .espaco-editorial { padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: clamp(4rem, 8vw, 7rem); display: grid; gap: clamp(2.5rem, 4.5vw, 4rem); } /* — Header — */ .espaco-editorial__head { text-align: center; max-width: 60ch; margin: 0 auto; padding-bottom: clamp(.5rem, 1.5vw, 1rem); } .espaco-editorial__num { display: inline-block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold); letter-spacing: 0.06em; margin-bottom: 1.25rem; } .espaco-editorial__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; color: var(--moss-deep); letter-spacing: -0.014em; margin: 0 0 1.5rem; } .espaco-editorial__title em { font-style: italic; font-weight: 500; color: var(--gold); } .espaco-editorial__lede { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65; color: var(--mute); margin: 0 auto; max-width: 52ch; } .espaco-editorial__pull { display: inline-block; margin-top: 1.5rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--moss); letter-spacing: 0.02em; position: relative; padding: 0 1.6rem; } .espaco-editorial__pull::before, .espaco-editorial__pull::after { content: ""; position: absolute; top: 50%; width: 24px; height: 1px; background: var(--gold); opacity: .55; } .espaco-editorial__pull::before { left: -8px; transform: translateX(-100%); } .espaco-editorial__pull::after { right: -8px; transform: translateX(100%); } /* — Generic figure — */ .espaco-fig { margin: 0; display: flex; flex-direction: column; } .espaco-fig__media { position: relative; overflow: hidden; border-radius: clamp(16px, 1.4vw, 22px); background: var(--cream-warm); } .espaco-fig__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-luxe); } .espaco-fig__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .85rem; padding-inline: .15rem; } .espaco-fig__name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.25; color: var(--moss-deep); margin: 0; letter-spacing: -0.005em; } .espaco-fig__hint { flex-shrink: 0; font-family: var(--font-sans); font-size: .7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); white-space: nowrap; } @media (hover: hover) { .espaco-fig:hover .espaco-fig__media img { transform: scale(1.04); } } /* — Block 1: Feature composition — */ .espaco-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1rem, 1.6vw, 1.5rem); align-items: start; } .espaco-feature__hero { grid-column: 1; grid-row: 1 / span 2; } .espaco-feature__top { grid-column: 2; grid-row: 1; } .espaco-feature__bot { grid-column: 2; grid-row: 2; } .espaco-feature__hero .espaco-fig__media { aspect-ratio: 3 / 4; } .espaco-feature__top .espaco-fig__media, .espaco-feature__bot .espaco-fig__media { aspect-ratio: 1 / 1; } /* — Block 2: Strip of 3 — */ .espaco-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); } .espaco-strip .espaco-fig__media { aspect-ratio: 4 / 5; } /* — Block 3: Narrative — */ .espaco-narrative { max-width: 62ch; margin: 0 auto; text-align: center; padding: clamp(1rem, 2vw, 2rem) clamp(.5rem, 3vw, 2rem); } .espaco-narrative::before { content: ""; display: block; width: 38px; height: 1px; background: var(--gold); opacity: .55; margin: 0 auto 1.75rem; } .espaco-narrative__quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.85vw, 1.55rem); line-height: 1.5; color: var(--moss-deep); margin: 0; } /* — Block 4: Pair — */ .espaco-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.6vw, 1.5rem); } .espaco-pair .espaco-fig__media { aspect-ratio: 16 / 10; } /* ─── Tablet (≤1024px) ─── */ @media (max-width: 1024px) { .espaco-editorial { gap: clamp(2.25rem, 4vw, 3rem); } .espaco-feature { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .espaco-feature__hero { grid-column: 1 / -1; grid-row: 1; } .espaco-feature__hero .espaco-fig__media { aspect-ratio: 16 / 10; } .espaco-feature__top { grid-column: 1; grid-row: 2; } .espaco-feature__bot { grid-column: 2; grid-row: 2; } .espaco-feature__top .espaco-fig__media, .espaco-feature__bot .espaco-fig__media { aspect-ratio: 4 / 5; } .espaco-strip { grid-template-columns: 1fr 1fr; } .espaco-strip > :nth-child(3) { grid-column: 1 / -1; } .espaco-strip > :nth-child(3) .espaco-fig__media { aspect-ratio: 16 / 10; } } /* ─── Mobile (≤767px) ─── */ @media (max-width: 767px) { .espaco-editorial { gap: clamp(2rem, 6vw, 2.75rem); padding-top: clamp(6rem, 18vw, 8rem); } .espaco-editorial__title { font-size: clamp(2rem, 8.5vw, 2.8rem); } .espaco-editorial__pull { font-size: clamp(.9rem, 4vw, 1rem); padding: 0 1.4rem; } .espaco-editorial__pull::before, .espaco-editorial__pull::after { width: 18px; } .espaco-feature, .espaco-strip, .espaco-pair { grid-template-columns: 1fr; grid-template-rows: auto; gap: clamp(1.6rem, 5vw, 2rem); } .espaco-feature__hero, .espaco-feature__top, .espaco-feature__bot { grid-column: 1; grid-row: auto; } .espaco-strip > :nth-child(3) { grid-column: 1; } .espaco-feature__hero .espaco-fig__media, .espaco-feature__top .espaco-fig__media, .espaco-feature__bot .espaco-fig__media, .espaco-strip .espaco-fig__media, .espaco-strip > :nth-child(3) .espaco-fig__media, .espaco-pair .espaco-fig__media { aspect-ratio: 4 / 5; border-radius: 16px; } .espaco-fig__cap { flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .9rem; } .espaco-fig__name { font-size: clamp(1rem, 4.6vw, 1.2rem); } .espaco-fig__hint { font-size: .68rem; letter-spacing: 0.2em; } .espaco-narrative__quote { font-size: clamp(1.05rem, 5vw, 1.25rem); line-height: 1.55; } } /* ═══════════════ CONTACT ═══════════════ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .info-block { padding: 2rem 0; border-top: 1px solid var(--line); } .info-block:last-child { border-bottom: 1px solid var(--line); } .info-block__label { display: block; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); margin-bottom: .9rem; } .info-block__value { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--moss-deep); line-height: 1.25; } .info-block__value a:hover { color: var(--gold); } /* "Sunday closed" inside contact info block — readable, subordinate */ .info-block__day-off { display: inline-block; margin-top: .35rem; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; color: var(--moss); } .info-block__day-off::before { content: '·'; margin-right: .5rem; color: var(--gold); } /* Form */ .form { background: var(--cream-warm); padding: clamp(2rem, 4vw, 3.5rem); border-radius: 280px 280px 8px 8px / 60px 60px 8px 8px; } .form__field { margin-bottom: 1.5rem; } .form__label { display: block; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mute); margin-bottom: .5rem; } .form__input, .form__textarea, .form__select { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .75rem 0; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); outline: none; transition: border-color .3s ease; } .form__textarea { resize: vertical; min-height: 110px; } .form__input:focus, .form__textarea:focus, .form__select:focus { border-color: var(--moss); } .form__msg { margin-top: 1rem; font-style: italic; color: var(--moss); font-family: var(--font-display); min-height: 1.6em; } /* Map placeholder */ .map-arch { position: relative; aspect-ratio: 5 / 3; border-radius: 999px 999px 8px 8px / 240px 240px 8px 8px; overflow: hidden; background: var(--cream-warm); } .map-arch img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(0.95); } .map-arch__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--moss-deep); color: var(--cream); padding: 1rem 1.5rem; border-radius: 999px; font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: .55rem; box-shadow: 0 10px 40px rgba(44, 69, 50, 0.35); } /* ═══════════════ PHILOSOPHY ═══════════════ */ .philosophy { padding-block: clamp(7rem, 14vw, 11rem); } .philosophy__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; } .philosophy__heading { position: sticky; top: 7rem; } .philosophy__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12; color: var(--moss-deep); margin: 1rem 0 0; letter-spacing: -0.012em; } .philosophy__title em { font-style: italic; font-weight: 500; color: var(--gold); } .philosophy__body { display: flex; flex-direction: column; gap: 1.6rem; } .philosophy__body .lede { max-width: none; font-size: clamp(1.2rem, 1.6vw, 1.45rem); } .philosophy__terms { margin: 1.5rem 0 0; padding-top: 2.25rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-style: italic; color: var(--moss-deep); font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.6; letter-spacing: 0.01em; } .philosophy__terms em { color: var(--gold); font-style: italic; } @media (max-width: 880px) { .philosophy__grid { grid-template-columns: 1fr; gap: 2.25rem; } .philosophy__heading { position: static; } } /* ═══════════════ MAISON · 35 ans ═══════════════ */ .maison { padding-block: 0 clamp(7rem, 14vw, 11rem); margin-top: clamp(-3rem, -4vw, -1rem); } .maison__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); } .maison__heading { position: sticky; top: 7rem; } .maison__body { display: flex; flex-direction: column; gap: 1.6rem; } .maison__body .lede { max-width: none; font-size: clamp(1.2rem, 1.6vw, 1.45rem); } @media (max-width: 880px) { .maison__grid { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 2.5rem; } .maison__heading { position: static; } } /* ═══════════════ SPACE PREVIEW ═══════════════ */ .space-preview { padding-block: clamp(7rem, 14vw, 11rem); } .space-preview__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); } .space-preview__lede { max-width: 38ch; } .space-preview__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 1.75rem); margin-bottom: clamp(3rem, 5vw, 4rem); } .space-preview__cell { margin: 0; } .space-preview__cell:nth-child(1) { grid-row: span 2; grid-column: 1; } .space-preview__cell:nth-child(1) .arch { height: 100%; aspect-ratio: auto; min-height: 540px; } .space-preview__cell:nth-child(2) { grid-column: 2 / 4; grid-row: 1; } .space-preview__cell:nth-child(2) .arch { aspect-ratio: 16/9; } .space-preview__cell:nth-child(3) { grid-column: 2; grid-row: 2; } .space-preview__cell:nth-child(3) .arch { aspect-ratio: 1/1; } .space-preview__cell:nth-child(4) { grid-column: 3; grid-row: 2; } .space-preview__cell:nth-child(4) .arch { aspect-ratio: 1/1; } @media (max-width: 880px) { .space-preview__head { grid-template-columns: 1fr; gap: 1.25rem; } .space-preview__grid { grid-template-columns: 1fr 1fr; } .space-preview__cell:nth-child(1) { grid-column: 1 / -1; grid-row: auto; } .space-preview__cell:nth-child(1) .arch { min-height: 420px; } .space-preview__cell:nth-child(2) { grid-column: 1 / -1; grid-row: auto; } .space-preview__cell:nth-child(3), .space-preview__cell:nth-child(4) { grid-column: auto; grid-row: auto; } } /* ═══════════════ DISCIPLINES ═══════════════ */ .disciplines { padding-block: clamp(7rem, 14vw, 11rem); } .disciplines__head { margin-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; } .disciplines__intro { max-width: 36ch; } .disciplines__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(3rem, 5vw, 4rem); } .discipline { display: flex; flex-direction: column; margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .discipline:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(44, 69, 50, 0.08); border-color: var(--cream-dim); } .discipline .arch { aspect-ratio: 4/3; border-radius: 0; border-bottom: 1px solid var(--line); } .discipline__caption { padding: 1.4rem 1.4rem 1.6rem; } .discipline__num { display: block; font-family: var(--font-sans); font-weight: 500; color: var(--gold); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: .55rem; } .discipline__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.55vw, 1.35rem); line-height: 1.2; color: var(--moss-deep); margin: 0; letter-spacing: -0.005em; } .discipline__desc { font-size: 0.92rem; line-height: 1.7; color: var(--mute); margin: 1rem 0 0; max-width: 24ch; } /* Disciplines — uniform card grid (no editorial stagger) */ @media (max-width: 1100px) { .disciplines__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .disciplines__head { grid-template-columns: 1fr; } .disciplines__grid { grid-template-columns: 1fr; } } /* ═══════════════ EXPERIENCE — clear, light moss accents ═══════════════ */ .experience { background: var(--cream-warm); color: var(--ink); padding-block: clamp(6rem, 12vw, 9rem); position: relative; } .experience__head { text-align: center; margin-bottom: clamp(3.5rem, 6vw, 5rem); } .experience__head .eyebrow { color: var(--moss); } .experience__head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 4.5vw, 3.75rem); color: var(--moss-deep); line-height: 1.1; margin: 1.25rem 0 0; letter-spacing: -0.012em; } .experience__head h2 em { color: var(--gold); font-style: italic; font-weight: 500; } .experience__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3rem); position: relative; } .experience__list::before { content: ''; position: absolute; top: 1.4rem; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); z-index: 0; } .experience__step { position: relative; text-align: center; z-index: 1; } .experience__num { display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--gold); background: var(--cream); margin-bottom: 1.25rem; } .experience__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.65vw, 1.45rem); margin: 0 0 .75rem; color: var(--moss-deep); letter-spacing: -0.005em; } .experience__desc { font-size: 0.92rem; line-height: 1.7; color: var(--mute); max-width: 22ch; margin: 0 auto; } @media (max-width: 880px) { .experience__list { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; } .experience__list::before { display: none; } } @media (max-width: 540px) { .experience__list { grid-template-columns: 1fr; } } /* ═══════════════ CTA FINAL ═══════════════ */ .cta-final { padding-block: clamp(7rem, 14vw, 11rem); text-align: center; } .cta-final h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.12; color: var(--moss-deep); margin: 1.25rem 0 0; letter-spacing: -0.012em; } .cta-final h2 em { color: var(--gold); font-style: italic; font-weight: 500; } .cta-final .lede { margin: 1.75rem auto 0; max-width: 38ch; text-align: center; } .cta-final__action { margin-top: clamp(2.5rem, 5vw, 4rem); } /* ═══════════════ ANIM (subtle entrances) ═══════════════ */ /* Estados ocultos só são aplicados se o JS rodou — html.js. */ .js .fade-up { opacity: 0; transform: translateY(16px); } .js .fade-in { opacity: 0; } /* split-line agora apenas envolve o texto sem rotação dramática */ .split-line { display: inline-block; } .split-line > span { display: inline-block; } /* Reduce motion — accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .fade-up, .fade-in { opacity: 1; transform: none; } } /* ═══════════════ BACK TO TOP ═══════════════ */ .to-top { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; width: clamp(46px, 5vw, 52px); height: clamp(46px, 5vw, 52px); border: 0; border-radius: 50%; background: var(--moss-deep); color: var(--cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.05rem, 1.4vw, 1.2rem); box-shadow: 0 10px 24px rgba(31, 42, 36, 0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .25s ease, box-shadow .25s ease; } .to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { background: var(--moss); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(31, 42, 36, 0.22); } .to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .15s linear; transform: none; } .to-top:hover { transform: none; } } /* ═══════════════ ACCESSIBILITY ═══════════════ */ /* Skip-to-content link for keyboard users */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 200; padding: .75rem 1.25rem; background: var(--moss-deep); color: var(--cream); font-family: var(--font-sans); font-size: .85rem; letter-spacing: 0.06em; text-decoration: none; border-radius: 6px; transition: top .2s ease; } .skip-link:focus { top: .75rem; outline: 2px solid var(--gold); outline-offset: 2px; } /* Universal focus-visible */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* ═══════════════ UTILITIES ═══════════════ */ .text-moss { color: var(--moss); } .text-moss-deep { color: var(--moss-deep); } .text-gold { color: var(--gold); } .text-mute { color: var(--mute); } .bg-cream-warm { background: var(--cream-warm); } .bg-moss { background: var(--moss-deep); color: var(--cream); }