/* ============================================= PRESTIGE LEGAL — Design System CSS Dra. Sandra Montanhani Advocacia ============================================= */ /* ── Google Fonts are loaded in HTML ── */ /* ══ CSS Custom Properties (Design Tokens) ══ */ :root { /* Colors — Primary Palette */ --color-primary: #041627; --color-primary-container: #1a2b3c; --color-on-primary: #ffffff; --color-on-primary-container: #8192a7; --color-inverse-primary: #b7c8de; /* Colors — Secondary (Gold) */ --color-secondary: #775a19; --color-secondary-accent: #c5a059; --color-secondary-container: #fed488; --color-on-secondary: #ffffff; --color-on-secondary-container: #785a1a; /* Colors — Tertiary */ --color-tertiary: #211200; --color-tertiary-container: #38260b; --color-on-tertiary: #ffffff; --color-on-tertiary-container: #a88c69; /* Colors — Surface */ --color-surface: #f8f9fa; --color-surface-dim: #d9dadb; --color-surface-bright: #f8f9fa; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f3f4f5; --color-surface-container: #edeeef; --color-surface-container-high: #e7e8e9; --color-surface-container-highest: #e1e3e4; --color-surface-variant: #e1e3e4; --color-surface-tint: #4f6073; /* Colors — On-Surface */ --color-on-surface: #191c1d; --color-on-surface-variant: #44474c; --color-inverse-surface: #2e3132; --color-inverse-on-surface: #f0f1f2; /* Colors — Outline */ --color-outline: #74777d; --color-outline-variant: #c4c6cd; /* Colors — Background */ --color-background: #f8f9fa; --color-on-background: #191c1d; /* Colors — Utility */ --color-whatsapp: #25D366; --color-gold: #c5a059; --color-error: #ba1a1a; /* Typography — Font Families */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Typography — Display */ --text-display-lg-size: 56px; --text-display-lg-line: 1.1; --text-display-lg-weight: 700; --text-display-lg-spacing: -0.02em; --text-display-mobile-size: 36px; --text-display-mobile-line: 1.2; /* Typography — Headline */ --text-headline-md-size: 32px; --text-headline-md-line: 1.3; --text-headline-md-weight: 600; --text-headline-sm-size: 24px; --text-headline-sm-line: 1.4; --text-headline-sm-weight: 600; /* Typography — Body */ --text-body-lg-size: 18px; --text-body-lg-line: 1.6; --text-body-md-size: 16px; --text-body-md-line: 1.5; /* Typography — Label */ --text-label-caps-size: 12px; --text-label-caps-weight: 600; --text-label-caps-spacing: 0.1em; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-section: 120px; --space-gutter: 24px; /* Layout */ --container-max: 1280px; --margin-mobile: 16px; --margin-desktop: 64px; /* Border Radius */ --radius-sm: 0.125rem; /* 2px */ --radius: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(4, 22, 39, 0.05), 0 1px 2px rgba(4, 22, 39, 0.04); --shadow-md: 0 4px 16px rgba(4, 22, 39, 0.07), 0 2px 6px rgba(4, 22, 39, 0.04); --shadow-lg: 0 8px 32px rgba(4, 22, 39, 0.10), 0 4px 12px rgba(4, 22, 39, 0.06); --shadow-xl: 0 20px 60px rgba(4, 22, 39, 0.12), 0 8px 24px rgba(4, 22, 39, 0.08); /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-normal: 250ms ease-in-out; --transition-slow: 400ms ease-in-out; } /* ══ Reset & Base ══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-body-md-size); line-height: var(--text-body-md-line); color: var(--color-on-background); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.menu-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } ul, ol { list-style: none; } /* ══ Typography Utilities ══ */ .font-serif { font-family: var(--font-serif); } .font-sans { font-family: var(--font-sans); } .text-display { font-family: var(--font-serif); font-size: var(--text-display-mobile-size); font-weight: var(--text-display-lg-weight); line-height: var(--text-display-mobile-line); letter-spacing: var(--text-display-lg-spacing); color: var(--color-primary); } .text-headline-md { font-family: var(--font-serif); font-size: var(--text-headline-md-size); font-weight: var(--text-headline-md-weight); line-height: var(--text-headline-md-line); color: var(--color-primary); } .text-headline-sm { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: var(--text-headline-sm-weight); line-height: var(--text-headline-sm-line); color: var(--color-primary); } .text-body-lg { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); } .text-label-caps { font-family: var(--font-sans); font-size: var(--text-label-caps-size); font-weight: var(--text-label-caps-weight); letter-spacing: var(--text-label-caps-spacing); text-transform: uppercase; color: var(--color-secondary); } /* ══ Layout Utilities ══ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); } .section { padding-block: var(--space-section); } /* ══ Buttons ══ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-sans); font-size: var(--text-body-md-size); font-weight: 600; line-height: 1; padding: 16px 32px; border-radius: var(--radius); transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--color-primary-container); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { border: 1.5px solid var(--color-outline); color: var(--color-on-surface); background: transparent; } .btn-secondary:hover { border-color: var(--color-secondary-accent); color: var(--color-secondary); } .btn-whatsapp { background: var(--color-whatsapp); color: #ffffff; box-shadow: var(--shadow-md); } .btn-whatsapp:hover { background: #1da853; box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .btn-sm { padding: 12px 20px; font-size: 14px; } /* ══ Navigation ══ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--color-surface-container-lowest); border-bottom: 1px solid var(--color-outline-variant); transition: box-shadow var(--transition-normal); } .navbar.scrolled { box-shadow: var(--shadow-md); } .navbar__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); height: 80px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-gutter); } .navbar__logo { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 700; color: var(--color-primary); letter-spacing: -0.01em; flex-shrink: 0; } .navbar__logo:hover { color: var(--color-secondary); } .navbar__links { display: none; align-items: center; gap: var(--space-gutter); } .navbar__link { font-size: var(--text-body-md-size); font-weight: 500; color: var(--color-on-surface-variant); padding-block: var(--space-sm); position: relative; transition: color var(--transition-fast); } .navbar__link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--color-secondary-accent); transform: scaleX(0); transition: transform var(--transition-fast); } .navbar__link:hover, .navbar__link.active { color: var(--color-primary); } .navbar__link:hover::after, .navbar__link.active::after { transform: scaleX(1); } .navbar__cta { display: none; } .navbar__hamburger { display: flex; flex-direction: column; gap: 5px; padding: var(--space-sm); cursor: pointer; aria-label: "Menu"; } .navbar__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-primary); border-radius: var(--radius-full); transition: all var(--transition-fast); } .navbar__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Nav Drawer */ .mobile-nav { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 99; background: var(--color-surface-container-lowest); border-top: 1px solid var(--color-outline-variant); flex-direction: column; padding: var(--space-lg) var(--margin-mobile); gap: var(--space-md); overflow-y: auto; } .mobile-nav.open { display: flex; } .mobile-nav__link { font-size: var(--text-headline-sm-size); font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); padding-block: var(--space-md); border-bottom: 1px solid var(--color-outline-variant); transition: color var(--transition-fast); } .mobile-nav__link:hover { color: var(--color-secondary); } .mobile-nav__link:last-of-type { border-bottom: none; } .mobile-nav__cta { margin-top: auto; padding-top: var(--space-lg); } .mobile-nav__cta .btn { width: 100%; } /* ══ Hero Section ══ */ .hero { min-height: 90vh; display: flex; align-items: center; background: var(--color-surface-container-lowest); overflow: hidden; position: relative; padding-block: var(--space-2xl); padding-top: calc(80px + var(--space-2xl)); } .hero__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); display: grid; gap: var(--space-2xl); align-items: center; width: 100%; } .hero__content { display: flex; flex-direction: column; gap: var(--space-lg); } .hero__badge-group { display: flex; flex-direction: column; gap: var(--space-sm); } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--color-secondary-container); color: var(--color-on-secondary-container); padding: 6px 12px; border-radius: var(--radius); font-size: 14px; font-weight: 700; width: fit-content; } .hero__badge .material-symbols-outlined { font-size: 16px; } .hero__headline { font-family: var(--font-serif); font-size: var(--text-display-mobile-size); font-weight: 700; line-height: var(--text-display-mobile-line); color: var(--color-primary); letter-spacing: -0.01em; } .hero__subtext { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); color: var(--color-on-surface-variant); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); } .hero__trust { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg); width: fit-content; } .hero__trust-icon { width: 48px; height: 48px; background: var(--color-surface-container-high); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-secondary-accent); flex-shrink: 0; } .hero__trust-icon .material-symbols-outlined { font-size: 28px; } .hero__trust-title { font-weight: 700; font-size: 15px; color: var(--color-primary); } .hero__trust-sub { font-size: 13px; color: var(--color-on-surface-variant); margin-top: 2px; } .hero__image-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4/5; } .hero__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .hero__image-wrap:hover img { transform: scale(1.03); } .hero__image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 22, 39, 0.5) 0%, transparent 50%); pointer-events: none; } .hero__image-card { position: absolute; bottom: var(--space-lg); left: var(--space-md); right: var(--space-md); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; align-items: center; gap: var(--space-md); } .hero__image-card-icon { width: 44px; height: 44px; background: var(--color-primary); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-on-primary); flex-shrink: 0; } .hero__image-card-title { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 600; color: var(--color-primary); line-height: 1.2; } .hero__image-card-sub { font-size: 12px; color: var(--color-on-surface-variant); letter-spacing: 0.05em; margin-top: 2px; } /* Decorative background elements */ .hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; border-radius: var(--radius-full); background: radial-gradient(circle, rgba(197, 160, 89, 0.06) 0%, transparent 70%); pointer-events: none; } /* ══ Stats Strip ══ */ .stats { background: var(--color-primary); padding-block: var(--space-xl); } .stats__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .stat { text-align: center; padding: var(--space-md); border-right: 1px solid rgba(255,255,255,0.1); } .stat:last-child, .stat:nth-child(2) { border-right: none; } .stat__number { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--color-secondary-accent); line-height: 1; } .stat__label { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: var(--space-xs); line-height: 1.4; } /* ══ Areas de Atuação ══ */ .areas { background: var(--color-surface); } .section-header { text-align: center; margin-bottom: var(--space-2xl); max-width: 640px; margin-inline: auto; } .section-header .text-label-caps { display: block; margin-bottom: var(--space-sm); } .section-header .text-headline-md { margin-bottom: var(--space-md); } .section-header p { color: var(--color-on-surface-variant); font-size: var(--text-body-md-size); } .areas__grid { display: grid; gap: var(--space-gutter); } .area-card { background: var(--color-surface-container-low); border-radius: var(--radius-lg); border: 1px solid var(--color-outline-variant); border-left: 4px solid var(--color-secondary-accent); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .area-card:hover { transform: translateY(-4px); border-color: var(--color-secondary-accent); box-shadow: var(--shadow-lg); } .area-card__icon { width: 56px; height: 56px; background: var(--color-surface-container); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; } .area-card__icon .material-symbols-outlined { font-size: 32px; } .area-card__title { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 600; color: var(--color-primary); line-height: 1.3; } .area-card__desc { font-size: var(--text-body-md-size); color: var(--color-on-surface-variant); line-height: var(--text-body-md-line); flex-grow: 1; } .area-card .btn { padding: 12px 16px; font-size: 14px; margin-top: auto; } /* ══ Sobre ══ */ .sobre { background: var(--color-surface-container-lowest); } .sobre__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); display: grid; gap: var(--space-2xl); align-items: center; } .sobre__image-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-outline-variant); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; } .sobre__image-wrap img { width: 100%; height: 100%; object-fit: cover; } .sobre__content { display: flex; flex-direction: column; gap: var(--space-md); } .sobre__content .text-label-caps { display: block; margin-bottom: var(--space-sm); } /* Styles.css update */ .sobre__text { font-size: var(--text-body-md-size); color: var(--color-on-surface-variant); line-height: var(--text-body-md-line); } .sobre__text p + p { margin-top: 1rem; } .sobre__text strong { color: var(--color-primary); font-weight: 600; } .sobre__trust { background: var(--color-surface-container); padding: var(--space-md); border-radius: var(--radius-lg); border: 1px solid rgba(197, 160, 89, 0.2); border-left: 4px solid var(--color-secondary-accent); } .sobre__trust-title { font-weight: 700; color: var(--color-primary); font-size: 15px; margin-bottom: var(--space-xs); } .sobre__trust-text { font-size: 14px; color: var(--color-on-surface-variant); line-height: 1.5; } /* ══ FAQ ══ */ .faq { background: var(--color-surface-container-low); } .faq__list { max-width: 768px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-sm); } .faq-item { background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-fast); } .faq-item.open { box-shadow: var(--shadow-md); } .faq-item__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); gap: var(--space-md); cursor: pointer; text-align: left; background: none; border: none; font: inherit; color: var(--color-primary); font-weight: 700; font-size: 16px; transition: color var(--transition-fast); } .faq-item__trigger:hover { color: var(--color-secondary); } .faq-item__trigger .material-symbols-outlined { font-size: 22px; color: var(--color-secondary-accent); flex-shrink: 0; transition: transform var(--transition-fast); } .faq-item.open .faq-item__trigger .material-symbols-outlined { transform: rotate(180deg); } .faq-item__body { max-height: 0; overflow: hidden; transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.open .faq-item__body { max-height: 400px; } .faq-item__content { padding: 0 var(--space-lg) var(--space-lg); border-top: 1px solid var(--color-outline-variant); padding-top: var(--space-md); } .faq-item__content p { color: var(--color-on-surface-variant); line-height: 1.6; margin-bottom: var(--space-md); } .faq-item__cta { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-secondary); font-weight: 700; font-size: 14px; transition: gap var(--transition-fast); } .faq-item__cta:hover { gap: var(--space-sm); text-decoration: underline; } .faq-item__cta .material-symbols-outlined { font-size: 16px; } /* ══ Contato / Localização ══ */ .contato { background: var(--color-surface); } .contato__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); display: grid; gap: var(--space-gutter); } .contato__card { background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-md); } .contato__card-title { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 600; color: var(--color-primary); } .contato__card-text { color: var(--color-on-surface-variant); font-size: var(--text-body-md-size); line-height: 1.6; } .contato__card .btn { width: 100%; padding: 18px 24px; font-size: 16px; } .contato__map { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-outline-variant); min-height: 400px; background: var(--color-surface-container-low); } .contato__map img { width: 100%; height: 100%; object-fit: cover; } .contato__map-overlay { position: absolute; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(196, 198, 205, 0.4); border-radius: var(--radius-lg); padding: var(--space-md); } .contato__map-title { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 600; color: var(--color-primary); display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); } .contato__map-title .material-symbols-outlined { font-size: 22px; color: var(--color-secondary-accent); } .contato__map-text { font-size: 14px; color: var(--color-on-surface-variant); line-height: 1.5; } .contato__map-text strong { color: var(--color-primary); } /* ══ Footer ══ */ .footer { background: var(--color-primary); padding-block: var(--space-lg); padding-inline: var(--margin-mobile); } .footer__inner { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; } .footer__logo { font-family: var(--font-serif); font-size: var(--text-headline-sm-size); font-weight: 700; color: var(--color-on-primary); letter-spacing: -0.01em; } .footer__logo:hover { color: var(--color-secondary-accent); } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-gutter); } .footer__link { font-size: 14px; color: rgba(248, 249, 250, 0.7); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-secondary-accent); } .footer__copy { font-size: 13px; color: rgba(248, 249, 250, 0.5); max-width: 540px; line-height: 1.5; } /* ══ WhatsApp Float Button ══ */ .whatsapp-float { position: fixed; bottom: 32px; right: 32px; z-index: 200; width: 60px; height: 60px; border-radius: var(--radius-full); background: var(--color-whatsapp); color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(0,0,0,0.15); transition: transform var(--transition-fast), box-shadow var(--transition-fast); animation: pulse-ring 2.5s infinite, wa-bounce 6s infinite; } .whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0,0,0,0.2); animation: none; } .whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; } .whatsapp-float__badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: #4caf50; border-radius: var(--radius-full); border: 2px solid var(--color-surface-container-lowest); display: flex; align-items: center; justify-content: center; } .whatsapp-float__badge::after { content: ''; width: 6px; height: 6px; background: #a5d6a7; border-radius: var(--radius-full); } @keyframes pulse-ring { 0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4); } 70% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes wa-bounce { 0%, 20%, 35%, 100% { transform: translateY(0) scale(1); } 8% { transform: translateY(-14px) scaleX(0.9) scaleY(1.1); } 14% { transform: translateY(0) scaleX(1.1) scaleY(0.9); } 26% { transform: translateY(-7px) scaleX(0.95) scaleY(1.05); } 30% { transform: translateY(0) scaleX(1.02) scaleY(0.98); } } /* ══ Scroll Reveal Animations ══ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } .reveal-delay-5 { transition-delay: 500ms; } .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.revealed { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.revealed { opacity: 1; transform: translateX(0); } /* ══ Material Symbols ══ */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1; display: inline-block; vertical-align: middle; } /* ══ Utility ══ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ══ RESPONSIVE — Tablet (≥ 768px) ══ */ @media (min-width: 768px) { .container { padding-inline: var(--margin-desktop); } /* Navbar */ .navbar__inner { padding-inline: var(--margin-desktop); } .navbar__links { display: flex; } .navbar__cta { display: inline-flex; } .navbar__hamburger { display: none; } /* Hero */ .hero__inner { grid-template-columns: 1fr 1fr; padding-inline: var(--margin-desktop); } .hero__headline { font-size: var(--text-display-lg-size); line-height: var(--text-display-lg-line); letter-spacing: var(--text-display-lg-spacing); } /* Stats */ .stats__inner { grid-template-columns: repeat(4, 1fr); padding-inline: var(--margin-desktop); } .stat { border-right: 1px solid rgba(255,255,255,0.1); } .stat:last-child { border-right: none; } .stat:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.1); } /* Areas */ .areas .container, .faq .container, .contato__inner, .sobre__inner { padding-inline: var(--margin-desktop); } .areas__grid { grid-template-columns: repeat(2, 1fr); } /* Sobre */ .sobre__inner { grid-template-columns: 5fr 1fr 6fr; } .sobre__image-wrap { grid-column: 1; aspect-ratio: auto; height: 500px; } .sobre__content { grid-column: 3; } /* Contato */ .contato__inner { grid-template-columns: 1fr 2fr; } .contato__map { min-height: 450px; } /* Footer */ .footer__inner { padding-inline: var(--margin-desktop); flex-direction: row; justify-content: space-between; text-align: left; flex-wrap: wrap; } .footer__copy { width: 100%; text-align: center; } } /* ══ RESPONSIVE — Desktop (≥ 1024px) ══ */ @media (min-width: 1024px) { .areas__grid { grid-template-columns: repeat(3, 1fr); } } /* ══ Reduced Motion ══ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } }