/* _ ____ ____ _ ______ _ (_) |_ \ / _| / |_ |_ _ `. (_) __ | \/ | ,--. .--. `| |-'.---. _ .--. | | `. \ .---. .--. __ .--./) _ .--. [ | | |\ /| | `'_\ : ( (`\] | | / /__\\[ `/'`\]| | | |/ /__\\( (`\] [ | / /'`\;[ `.-. | | | _| |_\/_| |_ // | |, `'.'. | |,| \__., | | _| |_.' /| \__., `'.'. | | \ \._// | | | | [___]|_____||_____|\'-;__/[\__) )\__/ '.__.'[___] |______.' '.__.'[\__) )[___].',__` [___||__] ( ( __)) @@%((((((((((((((((((((((((((((((((((((((((# @@ %((#&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%((( ((&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%(( (&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#( (&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%( (&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%( (&@@@@@&((((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%( (&@@@@@%((((&@@&(((((@@@@@@@@@@#((((%@%%#%@@@%( (&@@@@@@@@@@@@@&(((((%@@@@@@@@%(((((%@@@@@@@@%( (&@@@@@&(((%@@@&((((((&@@@@@@&((((((%@@@@@@@@%( (&@@@@@&((/#@@@&(((((((@@@@@@#((((((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#(((#@@@@%(((#(((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#&(((%@@&(((%%(((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#@%(((&@(((#@%(((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#@@(((##(((&@%(((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#@@&((((((%@@%(((%@@@@@@@@%( (&@@@@@&((/#@@@&(((#@@@%((((#@@@%(((%@@@@@@@@%( (&@@@@@&(((#@@@&(((#@@@@#(((&@@@%(((%@@@@@@@@%( (&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%( (&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%( (%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#( /(%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#(* ,((#&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(/ @ ((((((((((((# %((((((((((#& ((((((((((((((((((((((( ((((((***(((((# (((((((((((((((((((( ( ( ((((((((((((((# (, (((((((((((((((((((( ( ( (( (# %(( (( (( ((((((((((((((((((/ ( ( (( (# %(( (( (( (@ ****, # ( ( (( (# (( (( *(( (((((((((((((((((((( ( ( (( (# (( (( &(( /((((((((((((((( (#####################( (( (# (( (( &(( (((& #(( ((((((((((((((((((((((( (( (# (( (( &(( /((((((((((((((((((( ((((((((((((((((((((((( (( (# (* # *((((((/* ((((((( (((((( ((((((# (( ((((((((#####((((((( (((((( #(((((, ((((((((((((((((( @iMasterDesign Brazil [ ©1998-2077 ] iMasterDesign™ | iNet Solutions CORPORATION™ Web . App . Developer . DBA . Social Marketing Marcelo Rocha Main | Founder and CEO by iMasterDesign™ Full-Stack Developer, imasterdesign@imasterdesign.com.br REDE VITÓRIA SPA - Main Stylesheet (im-main.css) | iMasterDesign */ /* ========================================================= 0. SELF-HOSTED FONTS (no external CDN — local assets only) Fraunces — display (warm elegant serif) Manrope — body text JetBrains Mono — technical / accent details ========================================================= */ @font-face { font-family:'Fraunces'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/Fraunces/Fraunces-300-normal.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Fraunces/Fraunces-400-normal.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:400; font-style:italic; font-display:swap; src:url('../fonts/Fraunces/Fraunces-400-italic.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Fraunces/Fraunces-500-normal.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:500; font-style:italic; font-display:swap; src:url('../fonts/Fraunces/Fraunces-500-italic.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/Fraunces/Fraunces-600-normal.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Fraunces/Fraunces-700-normal.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-300.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-400.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-500.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-600.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-700.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:800; font-style:normal; font-display:swap; src:url('../fonts/Manrope/Manrope-800.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/JetBrainsMono/JetBrainsMono-400.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/JetBrainsMono/JetBrainsMono-500.woff2') format('woff2'); } /* ========================================================= 1. GLOBAL CSS VARIABLES (--im-global-*) Same token NAMES across all iMasterDesign clones; only the VALUES change per brand. Palette: brown / gold / sage. ========================================================= */ :root { /* Global Colors */ --im-global-color-primary: #4a3324; /* marrom profundo */ --im-global-color-secondary: #c2a06a; /* dourado */ --im-global-color-accent: #a8854f; /* dourado escuro */ --im-global-color-text: #2b211a; --im-global-color-muted: #8a7a6c; --im-global-color-silver: #e7ddcf; /* warm hairline */ --im-global-color-white: #ffffff; --im-global-color-black: #000000; --im-global-color-sage: #8c9b82; /* verde sálvia */ --im-global-color-bg-page: #fdfaf5; /* warm white (page) */ --im-global-color-bg-soft: #f5ece0; /* creme */ --im-global-color-bg-deeper: #2d1e14; /* marrom escuro */ /* Gold gradient (reusable accent) */ --im-global-gold-grad: linear-gradient(135deg, #d8bd8a 0%, #c2a06a 45%, #a8854f 100%); /* Global Typography */ --im-global-typography-primary-font: 'Fraunces', Georgia, 'Times New Roman', serif; --im-global-typography-secondary-font: 'Manrope', system-ui, -apple-system, sans-serif; --im-global-typography-text-font: 'Manrope', system-ui, -apple-system, sans-serif; --im-global-typography-accent-font: 'JetBrains Mono', ui-monospace, monospace; /* Spacing scale */ --im-space-xxs: 4px; --im-space-xs: 8px; --im-space-sm: 16px; --im-space-md: 24px; --im-space-lg: 48px; --im-space-xl: 80px; --im-space-xxl: 120px; /* Layout */ --im-container: 1200px; --im-radius: 22px; /* Easings */ --im-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --im-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ========================================================= 2. RESET / BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--im-global-typography-text-font); font-size: 16px; line-height: 1.65; color: var(--im-global-color-text); background: var(--im-global-color-bg-page); overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; transition: color .3s var(--im-ease-out-expo); } button { font-family: inherit; cursor: pointer; border: 0; background: transparent; } h1, h2, h3, h4, h5, h6 { font-family: var(--im-global-typography-primary-font); } ::selection { background: var(--im-global-color-secondary); color: var(--im-global-color-bg-deeper); } .im-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; } /* ========================================================= 3. LAYOUT PRIMITIVES ========================================================= */ .im-section { position: relative; width: 100%; padding: var(--im-space-xxl) 0; } .im-section--sm { padding: var(--im-space-xl) 0; } .im-section--xs { padding: var(--im-space-lg) 0; } .im-section--soft { background: var(--im-global-color-bg-soft); } .im-section--deep { background: var(--im-global-color-bg-deeper); color: #f3e9da; } .im-container { width: 100%; max-width: var(--im-container); margin: 0 auto; padding: 0 var(--im-space-md); } .im-container-wide { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 32px; } @media (max-width: 560px) { .im-container-wide { padding: 0 20px; } } .im-flex { display: flex; gap: var(--im-space-md); } .im-flex--between { justify-content: space-between; align-items: center; } .im-flex--center { align-items: center; justify-content: center; } /* Section heading block (eyebrow + title + intro), reused across sections */ .im-shead { max-width: 760px; } .im-shead--center { margin: 0 auto; text-align: center; } .im-shead .im-heading { margin-top: 18px; } .im-shead .im-text { margin-top: 20px; } /* ========================================================= 4. TYPOGRAPHY ========================================================= */ .im-heading { font-family: var(--im-global-typography-primary-font); color: var(--im-global-color-primary); line-height: 1.08; letter-spacing: -0.015em; margin: 0; font-weight: 400; } .im-heading--xl { font-size: clamp(40px, 6.4vw, 84px); } .im-heading--lg { font-size: clamp(32px, 4.6vw, 58px); } .im-heading--md { font-size: clamp(26px, 3.2vw, 40px); } .im-heading--sm { font-size: clamp(21px, 2.2vw, 28px); } .im-heading em { font-style: italic; color: var(--im-global-color-accent); } .im-heading--inverse { color: #fbf3e7; } .im-heading--inverse em { color: var(--im-global-color-secondary); } .im-text { font-family: var(--im-global-typography-text-font); font-size: 16px; line-height: 1.75; color: var(--im-global-color-text); margin: 0; } .im-text--lg { font-size: 18px; } .im-text--xl { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; } .im-text--muted { color: var(--im-global-color-muted); } .im-text--soft { color: rgba(251,243,231,.78); } .im-eyebrow { font-family: var(--im-global-typography-accent-font); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--im-global-color-accent); display: inline-flex; align-items: center; gap: 12px; } .im-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; display: inline-block; } .im-eyebrow--light { color: var(--im-global-color-secondary); } /* ========================================================= 5. BUTTONS ========================================================= */ .im-button { display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; border-radius: 999px; font-family: var(--im-global-typography-text-font); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; transition: all .35s var(--im-ease-out-expo); white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; } /* Backlink "Guia" nas paginas de unidade: rotulos longos (nome de bairro/cidade) podem quebrar linha e nunca estouram no mobile */ .im-unit-guide .im-button { white-space: normal; text-align: center; max-width: 100%; } @media (max-width: 560px) { .im-unit-guide .im-button { width: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; } } .im-button--primary { background: var(--im-global-gold-grad); color: var(--im-global-color-bg-deeper); box-shadow: 0 12px 26px -12px rgba(168,133,79,.6); } .im-button--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(168,133,79,.7); color: var(--im-global-color-bg-deeper); } .im-button--solid { background: var(--im-global-color-primary); color: #fbf3e7; } .im-button--solid:hover { background: var(--im-global-color-bg-deeper); color: var(--im-global-color-secondary); transform: translateY(-2px); } .im-button--outline { background: transparent; color: var(--im-global-color-primary); border-color: var(--im-global-color-silver); } .im-button--outline:hover { background: var(--im-global-color-primary); color: #fbf3e7; border-color: var(--im-global-color-primary); } .im-button--outline-light { background: transparent; color: #fbf3e7; border-color: rgba(251,243,231,.4); } .im-button--outline-light:hover { background: #fbf3e7; color: var(--im-global-color-primary); border-color: #fbf3e7; } .im-button--wa { background: #25d366; color: #073d22; } .im-button--wa:hover { background: #1ebe5a; color: #073d22; transform: translateY(-2px); } .im-button--lg { padding: 19px 36px; font-size: 16px; } .im-button--block { width: 100%; justify-content: center; } .im-button .im-icon { transition: transform .35s var(--im-ease-out-expo); } .im-button:hover .im-icon { transform: translateX(4px); } /* small pill / tag */ .im-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--im-global-typography-accent-font); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--im-global-color-accent); background: var(--im-global-color-bg-soft); border: 1px solid var(--im-global-color-silver); padding: 7px 14px; border-radius: 100px; } /* ========================================================= 6. TOPBAR ========================================================= */ .im-topbar { background: var(--im-global-color-bg-deeper); color: rgba(251,243,231,.72); font-size: 13px; padding: 10px 0; } .im-topbar a { color: rgba(251,243,231,.72); } .im-topbar a:hover { color: var(--im-global-color-secondary); } .im-topbar__info { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .im-topbar__info span, .im-topbar__info a { display: inline-flex; align-items: center; gap: 8px; } .im-topbar__info .im-icon { color: var(--im-global-color-secondary); font-size: 13px; } .im-topbar__socials { display: flex; gap: 14px; } .im-topbar__socials a { font-size: 15px; } @media (max-width: 768px) { .im-topbar__info span:not(.im-topbar__always) { display: none; } .im-topbar__socials { display: none; } .im-topbar .im-flex--between { justify-content: center; } .im-topbar__info { justify-content: center; width: 100%; text-align: center; } } /* ========================================================= 7. HEADER / NAV (solid deep-brown bar — premium, white logo) ========================================================= */ .im-header { position: sticky; top: 0; z-index: 100; background: var(--im-global-color-primary); border-bottom: 1px solid rgba(194,160,106,.22); transition: box-shadow .3s var(--im-ease-out-expo), background .3s var(--im-ease-out-expo); } .im-header--scrolled { box-shadow: 0 12px 30px -16px rgba(45,30,20,.55); background: var(--im-global-color-bg-deeper); } .im-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; gap: 24px; } .im-header__logo { flex-shrink: 0; display: inline-flex; } .im-header__logo img { width: 210px; height: auto; max-width: 56vw; } .im-header__nav { display: flex; gap: 22px; } .im-header__nav a { position: relative; color: #f3e9da; font-weight: 500; font-size: 15px; padding: 6px 0; white-space: nowrap; } .im-header__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--im-global-color-secondary); transition: width .35s var(--im-ease-out-expo); } .im-header__nav a:hover { color: #fff; } .im-header__nav a:hover::after { width: 100%; } .im-header__cta { display: flex; align-items: center; gap: 14px; } .im-header__burger { display: none; font-size: 24px; color: #f3e9da; padding: 4px; } .im-header__nav-socials { display: none; } .im-header__nav-cta { display: none; } @media (max-width: 1080px) { .im-header__nav { display: none; } .im-header__cta .im-button--outline-light { display: none; } .im-header__burger { display: inline-flex; position: relative; z-index: 300; } .im-header--menu-open .im-header__burger { color: #fff; } .im-header__nav.im-nav-open { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--im-global-color-bg-deeper); z-index: 200; align-items: center; justify-content: center; gap: 34px; } .im-header__nav.im-nav-open a { color: #f3e9da; font-size: 24px; font-weight: 400; font-family: var(--im-global-typography-primary-font); } .im-header__nav.im-nav-open .im-header__nav-socials { display: flex; gap: 16px; margin-top: 8px; } .im-header__nav.im-nav-open .im-header__nav-socials a { width: 52px; height: 52px; padding: 14px; font-size: 0; border: 1px solid rgba(194,160,106,.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all .3s var(--im-ease-out-expo); } .im-header__nav.im-nav-open .im-header__nav-socials a .im-icon { width: 24px; height: 24px; } .im-header__nav.im-nav-open .im-header__nav-socials a::after { display: none; } .im-header__nav.im-nav-open .im-header__nav-socials a:hover { background: var(--im-global-color-secondary); border-color: var(--im-global-color-secondary); color: var(--im-global-color-bg-deeper); } .im-header__nav.im-nav-open .im-header__nav-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; padding: 14px 34px; border-radius: 999px; background: var(--im-global-gold-grad); color: var(--im-global-color-bg-deeper); font-family: var(--im-global-typography-text-font); font-size: 17px; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(168,133,79,.6); } .im-header__nav.im-nav-open .im-header__nav-cta::after { display: none; } } /* ===== Menu dropdown (desktop hover + flyout aninhado / mobile acordeão) ===== */ .im-nav-drop { position: relative; } .im-nav-drop__head { display: inline-flex; align-items: center; gap: 3px; } .im-nav-drop__toggle { display: inline-flex; align-items: center; background: none; border: 0; padding: 3px; cursor: pointer; color: #f3e9da; } .im-nav-drop__toggle .im-icon { width: 13px; height: 13px; transition: transform .25s var(--im-ease-out-expo); } .im-nav-drop__menu a::after { display: none !important; } @media (min-width: 1081px) { .im-nav-drop__toggle { pointer-events: none; } .im-nav-drop__toggle .im-icon { transform: rotate(90deg); } .im-nav-drop__menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px); min-width: 216px; background: var(--im-global-color-bg-deeper); border: 1px solid rgba(194,160,106,.25); border-radius: 12px; box-shadow: 0 26px 55px -22px rgba(45,30,20,.8); padding: 8px; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 250; } .im-nav-drop > .im-nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .im-nav-drop:hover > .im-nav-drop__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .im-nav-drop__menu > a, .im-nav-drop--nested > .im-nav-drop__head > a { color: #f3e9da; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 8px; white-space: nowrap; } .im-nav-drop__menu > a:hover { background: rgba(194,160,106,.16); color: #fff; } .im-nav-drop--nested > .im-nav-drop__head { display: flex; align-items: center; justify-content: space-between; } .im-nav-drop--nested > .im-nav-drop__head > a { flex: 1; } .im-nav-drop--nested > .im-nav-drop__head .im-nav-drop__toggle .im-icon { transform: rotate(0deg); } .im-nav-drop--nested:hover > .im-nav-drop__head > a { background: rgba(194,160,106,.16); color: #fff; } .im-nav-drop--nested > .im-nav-drop__menu { top: -9px; left: calc(100% + 5px); transform: translate(0, 8px); } .im-nav-drop--nested:hover > .im-nav-drop__menu { opacity: 1; visibility: visible; transform: translate(0, 0); } .im-nav-drop--nested > .im-nav-drop__menu::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; } } @media (max-width: 1080px) { .im-header__nav.im-nav-open { justify-content: flex-start; overflow-y: auto; padding: 84px 20px 130px; gap: 4px; } .im-header__nav.im-nav-open .im-nav-drop { display: flex; flex-direction: column; align-items: center; width: 100%; } .im-header__nav.im-nav-open .im-nav-drop__head { display: inline-flex; align-items: center; gap: 6px; } .im-header__nav.im-nav-open .im-nav-drop__toggle { pointer-events: auto; padding: 8px; } .im-header__nav.im-nav-open .im-nav-drop__toggle .im-icon { width: 18px; height: 18px; transform: rotate(90deg); } .im-header__nav.im-nav-open .im-nav-drop.is-open > .im-nav-drop__head .im-nav-drop__toggle .im-icon { transform: rotate(-90deg); } .im-header__nav.im-nav-open .im-nav-drop__menu { display: none; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 8px; width: 100%; } .im-header__nav.im-nav-open .im-nav-drop.is-open > .im-nav-drop__menu { display: flex; } .im-header__nav.im-nav-open .im-nav-drop__menu a { font-size: 17px; font-weight: 400; color: rgba(243,233,218,.82); padding: 7px; } .im-header__nav.im-nav-open .im-nav-drop--nested .im-nav-drop__menu a { font-size: 15px; } } /* ========================================================= 8. HERO (warm welcome — copy + sticky "schedule a visit" card) ========================================================= */ .im-hero { position: relative; background: var(--im-global-color-bg-page); overflow: hidden; padding: 88px 0 96px; } .im-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(720px 380px at 88% 6%, rgba(194,160,106,.20), transparent 62%), radial-gradient(560px 320px at 4% 96%, rgba(140,155,130,.16), transparent 66%); } .im-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; } .im-hero__grid > * { min-width: 0; } .im-hero__rating { display: inline-flex; align-items: center; gap: 12px; background: var(--im-global-color-white); border: 1px solid var(--im-global-color-silver); padding: 8px 16px 8px 12px; border-radius: 100px; box-shadow: 0 10px 26px -18px rgba(74,51,36,.5); margin-bottom: 24px; } .im-hero__stars { display: inline-flex; gap: 2px; color: var(--im-global-color-secondary); font-size: 14px; } .im-hero__rating small { font-size: 13px; color: var(--im-global-color-muted); } .im-hero__rating strong { color: var(--im-global-color-primary); } .im-hero__title { font-family: var(--im-global-typography-primary-font); font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 26px; font-weight: 400; color: var(--im-global-color-primary); } .im-hero__title em { font-style: italic; color: var(--im-global-color-accent); } .im-hero__lead { font-size: clamp(16px, 1.45vw, 19px); color: var(--im-global-color-muted); line-height: 1.75; margin-bottom: 34px; max-width: 560px; } .im-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } .im-hero__trust { margin-top: 40px; display: flex; gap: 30px; flex-wrap: wrap; border-top: 1px solid var(--im-global-color-silver); padding-top: 26px; } .im-hero__trust-item { display: flex; flex-direction: column; gap: 2px; } .im-hero__trust-num { font-family: var(--im-global-typography-primary-font); font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--im-global-color-primary); font-style: italic; } .im-hero__trust-label { font-family: var(--im-global-typography-accent-font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--im-global-color-muted); margin-top: 8px; } /* Hero "schedule a visit" card (compact form) */ .im-hero__aside { position: sticky; top: 96px; } .im-visit { position: relative; background: var(--im-global-color-white); border: 1px solid var(--im-global-color-silver); border-radius: var(--im-radius); padding: 30px; box-shadow: 0 40px 80px -42px rgba(74,51,36,.5); } .im-visit::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--im-global-gold-grad); } .im-visit__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--im-global-typography-accent-font); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--im-global-color-accent); } .im-visit__tag .im-icon { color: var(--im-global-color-secondary); } .im-visit h3 { font-family: var(--im-global-typography-primary-font); font-size: 26px; color: var(--im-global-color-primary); margin: 12px 0 4px; font-weight: 500; } .im-visit > p { margin: 0 0 18px; color: var(--im-global-color-muted); font-size: 14px; } .im-visit__hours { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--im-global-color-accent); background: var(--im-global-color-bg-soft); border-radius: 100px; padding: 6px 14px; margin-bottom: 18px; } /* ========================================================= 9. FORM (shared by hero card + bottom CTA) ========================================================= */ .im-form { display: flex; flex-direction: column; gap: 8px; } .im-form__field { display: flex; flex-direction: column; gap: 6px; } .im-form__field label { font-family: var(--im-global-typography-accent-font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--im-global-color-muted); } .im-form__field input, .im-form__field select, .im-form__field textarea { border: 0; border-bottom: 1.5px solid var(--im-global-color-silver); padding: 11px 0; font-family: var(--im-global-typography-text-font); font-size: 15px; color: var(--im-global-color-primary); background: transparent; outline: none; transition: border-color .3s var(--im-ease-out-expo); width: 100%; accent-color: var(--im-global-color-secondary); } /* Tint native date/time picker indicators in the brand gold (custom picker overlays these too) */ .im-form__field input[type="date"]::-webkit-calendar-picker-indicator, .im-form__field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(58%) sepia(28%) saturate(560%) hue-rotate(2deg) brightness(92%); cursor: pointer; } .im-form__field input::placeholder, .im-form__field textarea::placeholder { color: #bcae9f; } .im-form__field input:focus, .im-form__field select:focus, .im-form__field textarea:focus { border-color: var(--im-global-color-secondary); } .im-form__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8854f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; cursor: pointer; } .im-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .im-form__button { margin-top: 6px; justify-content: center; } .im-form__note { font-size: 12px; color: var(--im-global-color-muted); text-align: center; margin: 2px 0 0; } .im-form__feedback { font-size: 14px; font-weight: 600; text-align: center; margin: 2px 0 0; min-height: 0; } .im-form__feedback.is-ok { color: #2e7d4f; } .im-form__feedback.is-error { color: #c0392b; } /* --- Multi-step wizard (shared component; used by the unit form + the hero contact form) --- */ .im-steps__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 16px; } .im-steps__progress { display: flex; gap: 6px; flex: 1; max-width: 130px; } .im-steps__progress span { height: 4px; border-radius: 4px; flex: 1; background: var(--im-global-color-silver); transition: background .35s var(--im-ease-out-expo); } .im-steps__progress span.is-active { background: var(--im-global-gold-grad); } .im-steps__count { font-family: var(--im-global-typography-accent-font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--im-global-color-muted); white-space: nowrap; } .im-steps__count b { color: var(--im-global-color-accent); } .im-step { display: none; flex-direction: column; gap: 8px; } .im-step.is-active { display: flex; animation: im-step-in .35s var(--im-ease-out-expo); } @keyframes im-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .im-step > .im-button { margin-top: 6px; } .im-steps__nav { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; } .im-steps__nav .im-form__button { flex: 1; margin-top: 0; } .im-step__back { background: transparent; border: 1.5px solid var(--im-global-color-silver); color: var(--im-global-color-primary); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all .3s var(--im-ease-out-expo); } .im-step__back:hover { border-color: var(--im-global-color-primary); transform: translateX(-2px); } @media (prefers-reduced-motion: reduce) { .im-step.is-active { animation: none; } } /* --- Custom themed date / time picker (replaces native popups) --- */ .im-picker { position: relative; width: 100%; } .im-picker__input { cursor: pointer; padding-right: 24px !important; } .im-picker__icon { position: absolute; right: 0; bottom: 9px; color: var(--im-global-color-accent); cursor: pointer; font-size: 17px; } .im-picker__pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 264px; background: var(--im-global-color-white); border: 1px solid var(--im-global-color-silver); border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(74,51,36,.5); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--im-ease-out-expo), transform .22s var(--im-ease-out-expo), visibility .22s; } .im-picker__pop.is-open { opacity: 1; visibility: visible; transform: none; } /* dentro de um row 2-col (data/hora), o popover da coluna da direita abre p/ a esquerda p/ não vazar o dialog do modal (senão vira scroll horizontal — não é premium) */ .im-form__row .im-form__field:last-child .im-picker__pop { left: auto; right: 0; } .im-picker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .im-picker__title { font-family: var(--im-global-typography-primary-font); font-weight: 500; color: var(--im-global-color-primary); font-size: 15px; } .im-picker__nav { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--im-global-color-primary); border: 1px solid var(--im-global-color-silver); font-size: 13px; transition: all .25s var(--im-ease-out-expo); } .im-picker__nav:hover { background: var(--im-global-gold-grad); color: var(--im-global-color-bg-deeper); border-color: transparent; } .im-picker__wd { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; } .im-picker__wd span { text-align: center; font-size: 10px; letter-spacing: .06em; color: var(--im-global-color-muted); font-family: var(--im-global-typography-accent-font); } .im-picker__days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .im-picker__days > span { height: 34px; } .im-picker__day { height: 34px; border-radius: 8px; font-size: 13px; color: var(--im-global-color-primary); cursor: pointer; transition: all .2s var(--im-ease-out-expo); } .im-picker__day:hover:not(:disabled) { background: var(--im-global-color-bg-soft); } .im-picker__day.is-sel { background: var(--im-global-gold-grad); color: var(--im-global-color-bg-deeper); font-weight: 700; } .im-picker__day:disabled { color: #c9bba8; opacity: .5; cursor: not-allowed; } .im-picker__slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .im-picker__slot { padding: 10px 6px; border-radius: 10px; border: 1px solid var(--im-global-color-silver); font-size: 13px; color: var(--im-global-color-primary); cursor: pointer; transition: all .2s var(--im-ease-out-expo); } .im-picker__slot:hover { border-color: var(--im-global-color-secondary); background: var(--im-global-color-bg-soft); } .im-picker__slot.is-sel { background: var(--im-global-gold-grad); border-color: transparent; color: var(--im-global-color-bg-deeper); font-weight: 700; } /* --- Custom themed