/* Generated by scripts/build-css.js. Edit the component CSS files, not this bundle. */
/* variables.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
DESIGN SYSTEM / GLOBAL VARIABLES
========================================================== */
:root {
/* ======================================================
BRAND COLORS
====================================================== */
--color-primary: #28AFCB;
--color-primary-dark: #167A98;
--color-primary-light: #E9F9FC;
--color-secondary: #73C66B;
--color-secondary-light: #EEF9EC;
--color-accent: #F4C542;
--color-accent-light: #FFF8DE;
--color-pink: #F3A6B8;
/* ======================================================
NEUTRAL COLORS
====================================================== */
--color-white: #FFFFFF;
--color-background: #F8FCFD;
--color-background-soft: #F1F9FA;
--color-surface: #FFFFFF;
--color-text: #173B48;
--color-text-soft: #607881;
--color-text-light: #84979D;
--color-border: #D9EBEF;
--color-border-light: #EAF3F5;
/* ======================================================
TYPOGRAPHY
====================================================== */
--font-heading: "Nunito", sans-serif;
--font-body: "Inter", sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.375rem;
--font-size-xl: 1.75rem;
--font-size-2xl: 2.25rem;
--font-size-3xl: 3rem;
--font-size-4xl: 4rem;
--line-height-tight: 1.15;
--line-height-normal: 1.6;
/* ======================================================
LAYOUT
====================================================== */
--container-width: 1200px;
--container-padding: 24px;
--section-spacing: 100px;
--section-spacing-mobile: 72px;
/* ======================================================
BORDER RADIUS
====================================================== */
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;
--radius-xl: 40px;
--radius-pill: 999px;
/* ======================================================
SHADOWS
====================================================== */
--shadow-sm:
0 8px 24px rgba(23, 59, 72, 0.08);
--shadow-md:
0 18px 50px rgba(23, 59, 72, 0.12);
--shadow-lg:
0 28px 80px rgba(23, 59, 72, 0.16);
/* ======================================================
TRANSITIONS
====================================================== */
--transition-fast: 180ms ease;
--transition-normal: 300ms ease;
--transition-slow: 700ms ease;
/* ======================================================
HEADER
====================================================== */
--header-height: 82px;
}
/* reset.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
CSS RESET
REMOVE DEFAULT BROWSER STYLES
========================================================== */
/* ==========================================================
BOX SIZING
========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ==========================================================
REMOVE DEFAULT SPACING
========================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
}
/* ==========================================================
HTML AND BODY
========================================================== */
html {
scroll-behavior: smooth;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
min-height: 100vh;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================
HTML5 ELEMENTS
========================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
/* ==========================================================
LISTS
========================================================== */
ol,
ul {
list-style: none;
}
/* ==========================================================
LINKS
========================================================== */
a {
color: inherit;
text-decoration: none;
}
/* ==========================================================
MEDIA
========================================================== */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* ==========================================================
FORM ELEMENTS
========================================================== */
button,
input,
textarea,
select {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
color: inherit;
font: inherit;
background: none;
}
button {
cursor: pointer;
}
textarea {
resize: vertical;
}
input,
textarea,
select {
width: 100%;
}
/* ==========================================================
TABLES
========================================================== */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================
QUOTES
========================================================== */
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
/* ==========================================================
REDUCED MOTION ACCESSIBILITY
========================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* global.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
GLOBAL STYLES
========================================================== */
/* ==========================================================
DOCUMENT
========================================================== */
html {
background-color: var(--color-background);
}
body {
overflow-x: hidden;
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
background-color: var(--color-background);
}
.icon {
width: 1em;
height: 1em;
display: inline-block;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.125em;
}
/* ==========================================================
TEXT SELECTION
========================================================== */
::selection {
color: var(--color-white);
background-color: var(--color-primary);
}
/* ==========================================================
FOCUS ACCESSIBILITY
========================================================== */
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 4px;
}
/* ==========================================================
TYPOGRAPHY
========================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-text);
font-family: var(--font-heading);
font-weight: 800;
line-height: var(--line-height-tight);
}
h1 {
font-size: clamp(2.5rem, 6vw, var(--font-size-4xl));
letter-spacing: -0.04em;
}
h2 {
font-size: clamp(2rem, 4vw, var(--font-size-3xl));
letter-spacing: -0.03em;
}
h3 {
font-size: clamp(1.4rem, 2.5vw, var(--font-size-xl));
}
h4 {
font-size: var(--font-size-lg);
}
p {
color: var(--color-text-soft);
}
strong {
color: var(--color-text);
font-weight: 700;
}
/* ==========================================================
LINKS
========================================================== */
a {
transition:
color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
opacity var(--transition-fast),
transform var(--transition-fast);
}
/* ==========================================================
PAGE CONTAINER
========================================================== */
.container {
width: min(
calc(100% - (var(--container-padding) * 2)),
var(--container-width)
);
margin-inline: auto;
}
/* ==========================================================
SECTIONS
========================================================== */
.section {
position: relative;
padding-block: var(--section-spacing);
}
.monthly-bulletin,
.visual-story,
.programs,
.daily-routine,
.learning,
.meals,
.our-space,
.educator,
.google-profile,
.local-area,
.final-tour,
.footer {
content-visibility: auto;
contain-intrinsic-size: auto 720px;
}
.section--soft {
background-color: var(--color-background-soft);
}
.section--white {
background-color: var(--color-white);
}
.section--primary-light {
background-color: var(--color-primary-light);
}
.section--secondary-light {
background-color: var(--color-secondary-light);
}
.section--accent-light {
background-color: var(--color-accent-light);
}
/* ==========================================================
SECTION HEADER
========================================================== */
.section-heading {
width: min(100%, 760px);
margin-bottom: 48px;
}
.section-heading--center {
margin-inline: auto;
text-align: center;
}
.section-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.section-heading__eyebrow::before {
width: 26px;
height: 3px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
content: "";
}
.section-heading--center .section-heading__eyebrow::after {
width: 26px;
height: 3px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
content: "";
}
.section-heading__title {
margin-bottom: 18px;
}
.section-heading__description {
max-width: 680px;
font-size: var(--font-size-md);
}
.section-heading--center .section-heading__description {
margin-inline: auto;
}
/* ==========================================================
BUTTONS
========================================================== */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 14px 24px;
border: 2px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--font-size-base);
font-weight: 800;
line-height: 1;
text-align: center;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.button:hover {
transform: translateY(-2px);
}
.button:active {
transform: translateY(0);
}
/* PRIMARY BUTTON */
.button--primary {
color: var(--color-white);
background-color: var(--color-primary);
box-shadow:
0 12px 30px rgba(40, 175, 203, 0.28);
}
.button--primary:hover {
background-color: var(--color-primary-dark);
box-shadow:
0 16px 36px rgba(40, 175, 203, 0.35);
}
/* SECONDARY BUTTON */
.button--secondary {
color: var(--color-text);
background-color: var(--color-accent);
box-shadow:
0 12px 30px rgba(244, 197, 66, 0.26);
}
.button--secondary:hover {
box-shadow:
0 16px 36px rgba(244, 197, 66, 0.34);
}
/* OUTLINE BUTTON */
.button--outline {
color: var(--color-primary-dark);
border-color: var(--color-border);
background-color: var(--color-white);
}
.button--outline:hover {
border-color: var(--color-primary);
background-color: var(--color-primary-light);
}
/* BUTTON GROUP */
.button-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
/* ==========================================================
CARDS
========================================================== */
.card {
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.card--interactive {
transition:
border-color var(--transition-normal),
box-shadow var(--transition-normal),
transform var(--transition-normal);
}
.card--interactive:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
/* ==========================================================
BADGES
========================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: 800;
background-color: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ==========================================================
IMAGE HELPERS
========================================================== */
.image-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-rounded {
overflow: hidden;
border-radius: var(--radius-lg);
}
.image-shadow {
box-shadow: var(--shadow-md);
}
/* ==========================================================
GRID HELPERS
========================================================== */
.grid {
display: grid;
gap: 24px;
}
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ==========================================================
VISUALLY HIDDEN
FOR ACCESSIBILITY
========================================================== */
.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important;
white-space: nowrap;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
}
/* ==========================================================
SKIP LINK
========================================================== */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 9999;
padding: 12px 18px;
border-radius: var(--radius-sm);
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 800;
background-color: var(--color-primary-dark);
transform: translateY(-150%);
transition: transform var(--transition-fast);
}
.skip-link:focus {
transform: translateY(0);
}
/* ==========================================================
DIVIDER
========================================================== */
.divider {
width: 100%;
height: 1px;
border: 0;
background-color: var(--color-border-light);
}
/* ==========================================================
UTILITY CLASSES
========================================================== */
.text-center {
text-align: center;
}
.text-primary {
color: var(--color-primary);
}
.text-primary-dark {
color: var(--color-primary-dark);
}
.text-accent {
color: var(--color-accent);
}
.text-white {
color: var(--color-white);
}
.background-white {
background-color: var(--color-white);
}
.no-scroll {
overflow: hidden;
}
/* header.css */
/* ==========================================================
HEADER STRUCTURE
========================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
border-bottom: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
border-color var(--transition-normal),
box-shadow var(--transition-normal),
background-color var(--transition-normal);
}
/* HEADER AFTER PAGE SCROLL */
.site-header.is-scrolled {
border-bottom-color: var(--color-border-light);
background-color: rgba(255, 255, 255, 0.98);
box-shadow:
0 10px 35px rgba(23, 59, 72, 0.08);
}
/* HEADER INNER CONTAINER */
.site-header__container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
min-height: var(--header-height);
}
/* ==========================================================
LOGO
========================================================== */
.site-header__logo {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 12px;
}
.site-header__logo:hover {
opacity: 0.92;
transform: translateY(-1px);
}
/* LOGO IMAGE */
.site-header__logo-image {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: contain;
}
/* LOGO TEXT */
.site-header__logo-text {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.site-header__business-name {
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-size: 1.00rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.site-header__business-type {
margin-top: 5px;
color: var(--color-text-soft);
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ==========================================================
DESKTOP NAVIGATION
========================================================== */
.site-navigation {
display: flex;
align-items: center;
justify-content: center;
}
.site-navigation__list {
display: flex;
align-items: center;
gap: 5px;
}
.site-navigation__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 13px;
color: var(--color-text-soft);
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 800;
border-radius: var(--radius-pill);
}
/* NAVIGATION LINK HOVER */
.site-navigation__link:hover {
color: var(--color-primary-dark);
background-color: var(--color-primary-light);
}
/* ACTIVE NAVIGATION LINK */
.site-navigation__link.is-active {
color: var(--color-primary-dark);
}
.site-navigation__link.is-active::after {
position: absolute;
right: 14px;
bottom: 5px;
left: 14px;
height: 3px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
content: "";
}
/* MOBILE CONTACT HIDDEN ON DESKTOP */
.site-navigation__mobile-contact {
display: none;
}
/* ==========================================================
HEADER ACTIONS
========================================================== */
.site-header__actions {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 12px;
}
.site-header__cta {
min-height: 46px;
padding: 12px 19px;
font-size: 0.92rem;
}
/* ==========================================================
LANGUAGE SELECTOR
========================================================== */
.language-selector {
position: relative;
}
.language-selector__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 76px;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-text);
background-color: var(--color-white);
transition:
border-color var(--transition-fast),
background-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.language-selector__button:hover {
border-color: var(--color-primary);
background-color: var(--color-primary-light);
}
.language-selector__icon {
font-size: 0.95rem;
}
.language-selector__current {
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 900;
}
.language-selector__arrow {
color: var(--color-text-soft);
font-size: 0.72rem;
transition: transform var(--transition-fast);
}
.language-selector.is-open .language-selector__arrow {
transform: rotate(180deg);
}
/* LANGUAGE DROPDOWN */
.language-selector__menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
display: grid;
gap: 4px;
min-width: 150px;
padding: 8px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
background-color: var(--color-white);
box-shadow: var(--shadow-md);
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition:
visibility var(--transition-fast),
opacity var(--transition-fast),
transform var(--transition-fast);
}
.language-selector.is-open .language-selector__menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.language-selector__option {
width: 100%;
padding: 11px 12px;
border-radius: var(--radius-sm);
color: var(--color-text-soft);
font-size: 0.88rem;
font-weight: 600;
text-align: left;
}
.language-selector__option:hover,
.language-selector__option.is-active {
color: var(--color-primary-dark);
background-color: var(--color-primary-light);
}
/* ==========================================================
MOBILE MENU BUTTON
========================================================== */
.mobile-menu-button {
display: none;
position: relative;
width: 46px;
height: 46px;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: 50%;
background-color: var(--color-white);
}
.mobile-menu-button__line {
position: absolute;
left: 12px;
display: block;
width: 20px;
height: 2px;
border-radius: var(--radius-pill);
background-color: var(--color-primary-dark);
transition:
top var(--transition-fast),
opacity var(--transition-fast),
transform var(--transition-fast);
}
.mobile-menu-button__line:nth-child(1) {
top: 15px;
}
.mobile-menu-button__line:nth-child(2) {
top: 21px;
}
.mobile-menu-button__line:nth-child(3) {
top: 27px;
}
/* MOBILE BUTTON OPEN STATE */
.mobile-menu-button.is-open
.mobile-menu-button__line:nth-child(1) {
top: 21px;
transform: rotate(45deg);
}
.mobile-menu-button.is-open
.mobile-menu-button__line:nth-child(2) {
opacity: 0;
}
.mobile-menu-button.is-open
.mobile-menu-button__line:nth-child(3) {
top: 21px;
transform: rotate(-45deg);
}
/* ==========================================================
MOBILE MENU OVERLAY
========================================================== */
.mobile-menu-overlay {
position: fixed;
inset: 0;
z-index: 900;
background-color: rgba(14, 40, 49, 0.46);
visibility: hidden;
opacity: 0;
transition:
visibility var(--transition-normal),
opacity var(--transition-normal);
}
.mobile-menu-overlay.is-visible {
visibility: visible;
opacity: 1;
}
/* ==========================================================
TABLET AND MOBILE
========================================================== */
@media (max-width: 1080px) {
.site-header__logo-text {
display: none;
}
.site-navigation__link {
padding-inline: 10px;
font-size: 0.86rem;
}
}
/* ==========================================================
MOBILE NAVIGATION
========================================================== */
@media (max-width: 860px) {
.site-header {
background-color: rgba(255, 255, 255, 0.98);
}
.site-header__container {
min-height: 74px;
}
.site-header__logo-image {
width: 56px;
height: 56px;
}
.site-header__logo-text {
display: flex;
}
.site-header__business-name {
font-size: 0.94rem;
}
.site-header__business-type {
font-size: 0.64rem;
}
/* MOBILE NAVIGATION PANEL */
.site-navigation {
position: fixed;
top: 74px;
right: 0;
z-index: 950;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
width: min(88%, 390px);
height: calc(100dvh - 74px);
padding: 24px;
border-left: 1px solid var(--color-border-light);
background-color: var(--color-white);
box-shadow: var(--shadow-lg);
visibility: hidden;
transform: translateX(105%);
transition:
visibility var(--transition-normal),
transform var(--transition-normal);
}
.site-navigation.is-open {
visibility: visible;
transform: translateX(0);
}
.site-navigation__list {
display: grid;
align-items: stretch;
gap: 7px;
}
.site-navigation__link {
justify-content: flex-start;
min-height: 50px;
padding: 13px 16px;
border-radius: var(--radius-md);
font-size: 1rem;
}
.site-navigation__link.is-active {
background-color: var(--color-primary-light);
}
.site-navigation__link.is-active::after {
top: 50%;
right: auto;
bottom: auto;
left: 5px;
width: 4px;
height: 22px;
transform: translateY(-50%);
}
/* MOBILE CONTACT */
.site-navigation__mobile-contact {
display: grid;
gap: 9px;
padding: 20px;
border-radius: var(--radius-md);
color: var(--color-text-soft);
font-size: 0.88rem;
background-color: var(--color-background-soft);
}
.site-navigation__mobile-phone {
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-weight: 900;
}
/* HEADER ACTIONS */
.site-header__cta {
display: none;
}
.language-selector {
display: flex;
}
.mobile-menu-button {
display: inline-flex;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width:480px){
.site-header__logo-text{
display:flex;
}
.site-header__business-name{
font-size:.86rem;
}
.site-header__business-type{
font-size:.58rem;
letter-spacing:.12em;
}
}
/* hero.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
HERO SECTION
========================================================== */
/* ==========================================================
HERO STRUCTURE
========================================================== */
.hero {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
min-height: 100svh;
padding-top: var(--header-height);
color: var(--color-white);
background-color: var(--color-primary-dark);
}
/* ==========================================================
IMAGE SLIDER
========================================================== */
.hero__slider {
position: absolute;
inset: 0;
}
.hero__slide {
position: absolute;
inset: 0;
visibility: hidden;
opacity: 0;
transition:
visibility 1.2s ease,
opacity 1.2s ease;
}
.hero__slide.is-active {
visibility: visible;
opacity: 1;
}
.hero__slide-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.03);
}
.hero__slide.is-active .hero__slide-image {
animation: hero-image-zoom 5s ease-out forwards;
}
@keyframes hero-image-zoom {
from {
transform: scale(1.03);
}
to {
transform: scale(1.09);
}
}
/* ==========================================================
DARK IMAGE OVERLAY
========================================================== */
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(8, 40, 54, 0.9) 0%,
rgba(8, 40, 54, 0.72) 42%,
rgba(8, 40, 54, 0.3) 72%,
rgba(8, 40, 54, 0.12) 100%
),
linear-gradient(
180deg,
rgba(8, 40, 54, 0.08) 0%,
rgba(8, 40, 54, 0.18) 70%,
rgba(8, 40, 54, 0.5) 100%
);
}
/* ==========================================================
DECORATIVE ELEMENTS
========================================================== */
.hero__decoration {
position: absolute;
z-index: 2;
border-radius: 50%;
pointer-events: none;
}
.hero__decoration--one {
top: 18%;
right: 8%;
width: 260px;
height: 260px;
background-color: rgba(244, 197, 66, 0.13);
}
.hero__decoration--two {
right: 26%;
bottom: -120px;
width: 340px;
height: 340px;
background-color: rgba(40, 175, 203, 0.17);
}
/* ==========================================================
MAIN CONTAINER
========================================================== */
.hero__container {
position: relative;
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
padding-top: 100px;
padding-bottom: 115px;
}
/* ==========================================================
HERO CONTENT
========================================================== */
.hero__content {
width: min(100%, 710px);
}
/* EYEBROW */
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
padding: 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-pill);
color: var(--color-white);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: 800;
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.hero__eyebrow::before {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: var(--color-accent);
box-shadow:
0 0 0 5px rgba(244, 197, 66, 0.16);
content: "";
}
/* TITLE */
.hero__title {
max-width: 700px;
margin-bottom: 24px;
color: var(--color-white);
font-size: clamp(3rem, 6.3vw, 5.5rem);
letter-spacing: -0.055em;
text-wrap: balance;
text-shadow:
0 10px 40px rgba(0, 0, 0, 0.2);
}
/* DESCRIPTION */
.hero__description {
max-width: 620px;
margin-bottom: 34px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.75;
}
/* ==========================================================
HERO BUTTONS
========================================================== */
.hero__buttons {
margin-bottom: 40px;
}
.button--hero-outline {
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.button--hero-outline:hover {
color: var(--color-primary-dark);
border-color: var(--color-white);
background-color: var(--color-white);
}
/* ==========================================================
TRUST INFORMATION
========================================================== */
.hero__trust-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
}
.hero__trust-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-sm);
font-weight: 600;
}
.hero__trust-icon {
display: block;
flex-shrink: 0;
min-width: 11px;
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 50%;
color: transparent;
background-color: var(--color-accent);
box-shadow:
0 0 0 6px rgba(244, 197, 66, 0.14);
}
/* ==========================================================
STORY CARD
========================================================== */
.hero__story-card {
width: min(100%, 315px);
padding: 22px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: var(--radius-lg);
background-color: rgba(255, 255, 255, 0.13);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.hero__story-label {
display: block;
margin-bottom: 9px;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hero__story-text {
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 800;
line-height: 1.45;
}
/* ==========================================================
SLIDER DOTS
========================================================== */
.hero__controls {
position: absolute;
right: var(--container-padding);
bottom: 34px;
z-index: 5;
}
.hero__dots {
display: flex;
align-items: center;
gap: 9px;
}
.hero__dot {
width: 9px;
height: 9px;
border: 0;
border-radius: var(--radius-pill);
background-color: rgba(255, 255, 255, 0.48);
transition:
width var(--transition-normal),
background-color var(--transition-normal),
transform var(--transition-normal);
}
.hero__dot:hover {
transform: scale(1.15);
}
.hero__dot.is-active {
width: 32px;
background-color: var(--color-accent);
}
/* ==========================================================
SCROLL INDICATOR
========================================================== */
.hero__scroll {
position: absolute;
bottom: 28px;
left: 50%;
z-index: 5;
display: flex;
justify-content: center;
width: 30px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: var(--radius-pill);
transform: translateX(-50%);
}
.hero__scroll-line {
width: 3px;
height: 10px;
margin-top: 9px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
animation:
hero-scroll-indicator 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-indicator {
0% {
opacity: 0;
transform: translateY(0);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(18px);
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 980px) {
.hero__container {
align-items: flex-start;
padding-top: 100px;
padding-bottom: 120px;
}
.hero__story-card {
display: none;
}
.hero__overlay {
background:
linear-gradient(
90deg,
rgba(8, 40, 54, 0.9) 0%,
rgba(8, 40, 54, 0.7) 70%,
rgba(8, 40, 54, 0.34) 100%
);
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 680px) {
.hero {
min-height: 100svh;
padding-top: 74px;
}
.hero__container {
align-items: center;
padding-top: 72px;
padding-bottom: 105px;
}
.hero__content {
width: 100%;
}
.hero__eyebrow {
margin-bottom: 18px;
font-size: 0.72rem;
}
.hero__title {
margin-bottom: 20px;
font-size: clamp(2.35rem, 13vw, 4rem);
}
.hero__description {
margin-bottom: 28px;
font-size: 1rem;
line-height: 1.1;
}
.hero__buttons {
display: grid;
}
.hero__buttons .button {
width: 100%;
}
.hero__trust-list {
display: grid;
gap: 12px;
}
.hero__trust-item {
font-size: 0.82rem;
}
.hero__controls {
right: 24px;
bottom: 28px;
}
.hero__scroll {
display: none;
}
.hero__overlay {
background:
linear-gradient(
180deg,
rgba(8, 40, 54, 0.5) 0%,
rgba(8, 40, 54, 0.84) 56%,
rgba(8, 40, 54, 0.95) 100%
);
}
.hero__features{
margin-top:30px;
display:flex;
padding-left:4px;
flex-direction:column;
gap:14px;
}
.hero__feature{
display:flex;
align-items:center;
gap:10px;
font-size:.95rem;
font-weight:600;
}
}
/* trust-strip.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
TRUST STRIP
========================================================== */
/* ==========================================================
SECTION
========================================================== */
.trust-strip {
position: relative;
z-index: 4;
padding-block: 58px;
background:
linear-gradient(
135deg,
var(--color-white) 0%,
var(--color-primary-light) 100%
);
border-bottom:
1px solid rgba(22, 122, 152, 0.10);
}
/* ==========================================================
CONTAINER
========================================================== */
.trust-strip__container {
display: grid;
grid-template-columns:
minmax(260px, 0.85fr)
minmax(0, 2fr);
align-items: center;
gap: clamp(40px, 6vw, 90px);
}
/* ==========================================================
INTRODUCTION
========================================================== */
.trust-strip__intro {
max-width: 390px;
}
.trust-strip__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.trust-strip__eyebrow::before {
display: block;
width: 28px;
height: 3px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
content: "";
}
.trust-strip__title {
margin: 0;
color: var(--color-text);
font-size:
clamp(1.65rem, 2.8vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.035em;
}
/* ==========================================================
TRUST ITEMS
========================================================== */
.trust-strip__items {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.trust-strip__item {
display: flex;
align-items: center;
gap: 16px;
min-height: 92px;
padding: 18px 20px;
border:
1px solid rgba(22, 122, 152, 0.12);
border-radius: 18px;
background-color:
rgba(255, 255, 255, 0.78);
box-shadow:
0 12px 34px rgba(22, 122, 152, 0.08);
transition:
transform var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal);
}
.trust-strip__item:hover {
transform: translateY(-3px);
border-color:
rgba(22, 122, 152, 0.24);
box-shadow:
0 18px 42px rgba(22, 122, 152, 0.13);
}
/* ==========================================================
COLOR DOTS
========================================================== */
.trust-strip__dot {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 50%;
box-shadow:
0 0 0 7px rgba(40, 175, 203, 0.08);
}
.trust-strip__dot--yellow {
background-color: var(--color-accent);
}
.trust-strip__dot--green {
background-color: var(--color-secondary);
}
.trust-strip__dot--blue {
background-color: var(--color-primary);
}
.trust-strip__dot--turquoise {
background-color: #4cc0b5;
}
/* ==========================================================
ITEM TEXT
========================================================== */
.trust-strip__item-title {
display: block;
margin-bottom: 4px;
color: var(--color-text);
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 900;
}
.trust-strip__item-text {
display: block;
color: var(--color-text-light);
font-size: 0.82rem;
line-height: 1.45;
}
.trust-strip__item-link {
display: inline-block;
margin-top: 7px;
color: var(--color-primary-dark);
font-size: 0.78rem;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.trust-strip__item-link:hover {
color: var(--color-primary);
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 980px) {
.trust-strip__container {
grid-template-columns: 1fr;
gap: 30px;
}
.trust-strip__intro {
max-width: 650px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 680px) {
.trust-strip {
padding-block: 42px;
}
.trust-strip__items {
grid-template-columns: 1fr;
gap: 12px;
}
.trust-strip__item {
min-height: 78px;
padding: 15px 17px;
}
.trust-strip__title {
font-size: 1.8rem;
}
}
/* bulletin.css */
/* ==================================================
MONTHLY BULLETIN
================================================== */
.monthly-bulletin{
position:relative;
overflow:hidden;
padding:90px 0;
background:
linear-gradient(
180deg,
#F8FDFF 0%,
#EDF9FC 100%
);
}
/* ==================================================
DECORATION
================================================== */
.monthly-bulletin__decoration{
position:absolute;
border-radius:50%;
pointer-events:none;
filter:blur(70px);
opacity:.45;
}
.monthly-bulletin__decoration--one{
top:-120px;
left:-120px;
width:320px;
height:320px;
background:#BFEFFF;
}
.monthly-bulletin__decoration--two{
right:-140px;
bottom:-140px;
width:340px;
height:340px;
background:#FFE7A9;
}
/* ==================================================
BOARD
================================================== */
.monthly-bulletin__board{
position:relative;
max-width:820px;
margin:0 auto;
}
/* ==================================================
DECORATIVE PAPERS
================================================== */
.monthly-bulletin__paper{
position:absolute;
border-radius:22px;
box-shadow:
0 25px 55px rgba(0,0,0,.08);
}
.monthly-bulletin__paper--yellow{
top:-18px;
left:-18px;
width:100%;
height:100%;
background:#FFF7D7;
transform:
rotate(-4deg);
}
.monthly-bulletin__paper--blue{
top:12px;
right:-18px;
width:100%;
height:100%;
background:#E8F8FF;
transform:
rotate(3deg);
}
.monthly-bulletin__paper--green{
bottom:-18px;
left:20px;
width:100%;
height:100%;
background:#EEFCEF;
transform:
rotate(1deg);
}
/* ==================================================
MAIN PAPER
================================================== */
.monthly-bulletin__main-paper{
position:relative;
z-index:5;
padding:
56px
42px;
border-radius:26px;
background:#FFFFFF;
box-shadow:
0 40px 80px rgba(24,57,72,.14);
}
/* ==================================================
TAPE
================================================== */
.monthly-bulletin__tape{
position:absolute;
top:-16px;
width:80px;
height:34px;
border-radius:6px;
background:
rgba(255,255,255,.45);
backdrop-filter:blur(3px);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.45);
}
.monthly-bulletin__tape--left{
left:60px;
transform:rotate(-8deg);
}
.monthly-bulletin__tape--right{
right:60px;
transform:rotate(8deg);
}
/* ==================================================
HEADER
================================================== */
.monthly-bulletin__header{
text-align:center;
}
.monthly-bulletin__badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:
9px
18px;
border-radius:999px;
background:
rgba(40,175,203,.10);
color:#178AA3;
font-size:.78rem;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.monthly-bulletin__badge::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
background:#67C56A;
}
.monthly-bulletin__eyebrow{
margin:
26px 0
8px;
color:var(--color-text-soft);
font-size:1rem;
letter-spacing:.08em;
text-transform:uppercase;
}
.monthly-bulletin__title{
margin:0;
}
.monthly-bulletin__month{
display:block;
color:var(--color-text);
font-size:
clamp(3rem,7vw,5rem);
font-weight:900;
line-height:1;
letter-spacing:-.05em;
}
.monthly-bulletin__year{
display:block;
margin-top:6px;
color:var(--color-accent);
font-size:
clamp(1.3rem,3vw,2rem);
font-weight:800;
letter-spacing:.20em;
}
/* ==================================================
DIVIDER
================================================== */
.monthly-bulletin__divider {
width: 76px;
height: 4px;
margin: 34px auto;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--color-accent),
var(--color-primary)
);
box-shadow:
0 0 24px rgba(40, 175, 203, 0.22);
}
/* ==================================================
NEWS LIST
================================================== */
.monthly-bulletin__news {
display: grid;
gap: 18px;
margin-top: 8px;
}
/* NEWS ITEM */
.monthly-bulletin__news-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border: 1px solid rgba(18, 73, 92, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
box-shadow:
0 14px 32px rgba(18, 73, 92, 0.06);
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
}
.monthly-bulletin__news-item:hover {
transform: translateY(-3px);
border-color: rgba(40, 175, 203, 0.18);
box-shadow:
0 20px 42px rgba(18, 73, 92, 0.1);
}
/* ==================================================
NEWS ICONS
================================================== */
.monthly-bulletin__news-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 50%;
font-size: 1rem;
}
.monthly-bulletin__news-icon--green {
color: #4fae55;
background: rgba(119, 195, 122, 0.18);
}
.monthly-bulletin__news-icon--yellow {
color: #cf9300;
background: rgba(245, 196, 81, 0.2);
}
.monthly-bulletin__news-icon--blue {
color: #249fc0;
background: rgba(73, 168, 216, 0.17);
}
/* ==================================================
NEWS CONTENT
================================================== */
.monthly-bulletin__news-content {
min-width: 0;
}
.monthly-bulletin__news-content h3 {
margin: 0 0 7px;
color: var(--color-text);
font-size: 1.06rem;
line-height: 1.35;
letter-spacing: -0.015em;
}
.monthly-bulletin__news-content p {
margin: 0;
color: var(--color-text-soft);
font-size: 0.92rem;
line-height: 1.6;
}
.monthly-bulletin__visit-hours {
display: grid;
gap: 3px;
}
/* ==================================================
ACTIONS
================================================== */
.monthly-bulletin__actions {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 32px;
text-align: center;
}
/* ==================================================
BUTTON
================================================== */
.monthly-bulletin__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 320px;
min-height: 56px;
padding: 14px 24px;
border-radius: 999px;
color: #ffffff;
background:
linear-gradient(
135deg,
var(--color-accent),
var(--color-primary)
);
box-shadow:
0 18px 38px rgba(40, 175, 203, 0.25);
font-family: var(--font-heading);
font-size: 0.98rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
transition:
transform 200ms ease,
box-shadow 200ms ease;
}
.monthly-bulletin__button:hover {
transform: translateY(-3px);
box-shadow:
0 24px 46px rgba(40, 175, 203, 0.34);
}
.monthly-bulletin__button:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 5px;
}
.monthly-bulletin__button .icon {
transition: transform 200ms ease;
}
.monthly-bulletin__button:hover .icon {
transform: translateY(4px);
}
/* ==================================================
NOTE
================================================== */
.monthly-bulletin__note {
max-width: 520px;
margin: 16px 0 0;
color: var(--color-text-soft);
font-size: 0.82rem;
line-height: 1.55;
}
/* ==================================================
MOBILE
================================================== */
@media (max-width: 699px) {
.monthly-bulletin {
padding: 72px 0;
}
.monthly-bulletin__board {
max-width: 100%;
}
.monthly-bulletin__paper--yellow {
top: -8px;
left: -6px;
transform: rotate(-2deg);
}
.monthly-bulletin__paper--blue {
top: 6px;
right: -6px;
transform: rotate(2deg);
}
.monthly-bulletin__paper--green {
bottom: -8px;
left: 4px;
transform: rotate(0.5deg);
}
.monthly-bulletin__main-paper {
padding: 42px 20px;
border-radius: 22px;
}
.monthly-bulletin__tape {
width: 64px;
height: 28px;
}
.monthly-bulletin__tape--left {
left: 28px;
}
.monthly-bulletin__tape--right {
right: 28px;
}
.monthly-bulletin__badge {
padding: 8px 13px;
font-size: 0.68rem;
letter-spacing: 0.09em;
}
.monthly-bulletin__eyebrow {
margin-top: 22px;
font-size: 0.82rem;
}
.monthly-bulletin__month {
font-size: clamp(2.9rem, 16vw, 4rem);
}
.monthly-bulletin__year {
font-size: 1.2rem;
}
.monthly-bulletin__divider {
margin: 28px auto;
}
.monthly-bulletin__news {
gap: 14px;
}
.monthly-bulletin__news-item {
gap: 13px;
padding: 16px;
}
.monthly-bulletin__news-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.monthly-bulletin__news-content h3 {
font-size: 0.98rem;
}
.monthly-bulletin__news-content p {
font-size: 0.86rem;
}
.monthly-bulletin__actions {
margin-top: 26px;
}
}
/* ==================================================
TABLET
================================================== */
@media (min-width: 700px) {
.monthly-bulletin {
padding: 105px 0;
}
.monthly-bulletin__main-paper {
padding:
64px
54px;
}
.monthly-bulletin__news {
gap: 20px;
}
.monthly-bulletin__news-item {
padding: 22px 24px;
}
}
/* ==================================================
DESKTOP
================================================== */
@media (min-width: 980px) {
.monthly-bulletin {
padding: 120px 0;
}
.monthly-bulletin__board {
max-width: 920px;
}
.monthly-bulletin__main-paper {
padding:
72px
70px;
}
.monthly-bulletin__news {
grid-template-columns:
repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.monthly-bulletin__news-item {
flex-direction: column;
min-height: 100%;
padding: 24px;
text-align: left;
}
.monthly-bulletin__news-icon {
width: 46px;
height: 46px;
flex-basis: 46px;
}
.monthly-bulletin__actions {
margin-top: 38px;
}
}
/* ==================================================
REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
.monthly-bulletin__news-item,
.monthly-bulletin__button,
.monthly-bulletin__button .icon {
transition: none;
}
}
/* visual-story.css */
/* ==========================================================
ESPAÇO DOS ANJOS CHILD CARE
VISUAL STORY — FULL SCREEN
========================================================== */
/* ==========================================================
SECTION
========================================================== */
.visual-story {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
min-height: 100svh;
margin: 0;
padding: 0;
color: var(--color-white);
background-color: var(--color-primary-dark);
}
/* ==========================================================
BACKGROUND IMAGE
========================================================== */
.visual-story__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.015);
transition:
transform 1.5s ease;
}
.visual-story:hover
.visual-story__image {
transform: scale(1.045);
}
/* ==========================================================
IMAGE OVERLAY
========================================================== */
.visual-story__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(7, 39, 53, 0.94) 0%,
rgba(7, 39, 53, 0.78) 42%,
rgba(7, 39, 53, 0.38) 72%,
rgba(7, 39, 53, 0.16) 100%
),
linear-gradient(
180deg,
rgba(7, 39, 53, 0.08) 0%,
rgba(7, 39, 53, 0.22) 55%,
rgba(7, 39, 53, 0.78) 100%
);
}
/* ==========================================================
DECORATIVE SHAPE
========================================================== */
.visual-story__decoration {
position: absolute;
right: 9%;
bottom: -180px;
z-index: 2;
width: 430px;
height: 430px;
border-radius: 50%;
background-color:
rgba(40, 175, 203, 0.14);
pointer-events: none;
}
/* ==========================================================
MAIN CONTAINER
========================================================== */
.visual-story__container {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100svh;
padding-top: 100px;
padding-bottom: 170px;
}
/* ==========================================================
CONTENT
========================================================== */
.visual-story__content {
width: min(100%, 760px);
}
.visual-story__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.visual-story__eyebrow::before {
display: block;
width: 30px;
height: 4px;
border-radius: var(--radius-pill);
background-color: var(--color-accent);
content: "";
}
.visual-story__title {
max-width: 760px;
margin-bottom: 24px;
color: var(--color-white);
font-size:
clamp(3rem, 6vw, 5.5rem);
line-height: 1.03;
letter-spacing: -0.055em;
text-wrap: balance;
text-shadow:
0 12px 44px rgba(0, 0, 0, 0.22);
}
.visual-story__description {
max-width: 620px;
color:
rgba(255, 255, 255, 0.88);
font-size:
clamp(1.05rem, 1.8vw, 1.25rem);
line-height: 1.75;
}
/* ==========================================================
FEATURE CARDS
========================================================== */
.visual-story__features {
position: absolute;
right: var(--container-padding);
bottom: 46px;
left: var(--container-padding);
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 14px;
}
.visual-story__feature {
display: flex;
align-items: center;
gap: 16px;
min-height: 82px;
padding: 18px 20px;
border:
1px solid rgba(255, 255, 255, 0.23);
border-radius: 18px;
background-color:
rgba(255, 255, 255, 0.13);
box-shadow:
0 20px 46px rgba(0, 0, 0, 0.14);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
transform var(--transition-normal),
background-color var(--transition-normal),
border-color var(--transition-normal);
}
.visual-story__feature:hover {
transform: translateY(-4px);
border-color:
rgba(255, 255, 255, 0.40);
background-color:
rgba(255, 255, 255, 0.20);
}
/* ==========================================================
BRAND COLOR DOTS
========================================================== */
.visual-story__feature-dot {
display: block;
flex-shrink: 0;
width: 13px;
height: 13px;
border-radius: 50%;
box-shadow:
0 0 0 7px rgba(255, 255, 255, 0.10);
}
.visual-story__feature-dot--yellow {
background-color:
var(--color-accent);
}
.visual-story__feature-dot--green {
background-color:
var(--color-secondary);
}
.visual-story__feature-dot--blue {
background-color:
var(--color-primary);
}
.visual-story__feature-dot--turquoise {
background-color:
#4cc0b5;
}
.visual-story__feature-text {
color: var(--color-white);
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 800;
line-height: 1.4;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 980px) {
.visual-story {
min-height: 900px;
}
.visual-story__container {
min-height: 900px;
padding-top: 90px;
padding-bottom: 310px;
}
.visual-story__features {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:680px){
.visual-story{
min-height:760px;
}
.visual-story__image{
object-position:center top;
}
.visual-story__container{
min-height:auto;
padding-top:200px;
padding-bottom:38px;
}
.visual-story__overlay {
background:
linear-gradient(
180deg,
rgba(7, 39, 53, 0.24) 0%,
rgba(7, 39, 53, 0.72) 40%,
rgba(7, 39, 53, 0.96) 72%,
rgba(7, 39, 53, 1) 100%
);
}
.visual-story__container {
min-height:760px;
padding-top: 180px;
padding-bottom: 38px;
}
.visual-story__content {
width: 100%;
}
.visual-story__eyebrow {
margin-bottom: 18px;
font-size: 0.7rem;
}
.visual-story__title {
margin-bottom: 20px;
font-size:
clamp(2.6rem, 12vw, 4rem);
}
.visual-story__description {
font-size: 1rem;
line-height: 1.65;
}
.visual-story__features {
position: relative;
right: auto;
bottom: auto;
left: auto;
grid-template-columns: 1fr;
margin-top: 34px;
}
.visual-story__feature {
min-height: 66px;
padding: 16px 18px;
}
.visual-story__decoration {
right: -180px;
bottom: -100px;
width: 330px;
height: 330px;
}
}
/* ==========================================================
REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion: reduce) {
.visual-story__image,
.visual-story__feature {
transition: none;
}
}
/* educator.css */
/* ==================================================
EDUCATOR V3
================================================== */
.educator{
padding:110px 0;
background:#fff;
}
.educator__wrapper{
display:grid;
grid-template-columns:430px 1fr;
gap:80px;
align-items:center;
}
/* PHOTO */
.educator__photo{
height:620px;
overflow:hidden;
border-radius:26px;
box-shadow:0 20px 55px rgba(0,0,0,.10);
}
.educator__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* CONTENT */
.educator__eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--color-accent);
font-size:.82rem;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.educator__eyebrow::before{
content:"";
width:34px;
height:3px;
border-radius:99px;
background:var(--color-accent);
}
.educator__title{
margin:22px 0;
font-size:3rem;
line-height:1.15;
max-width:620px;
color:var(--color-dark);
}
.educator__description{
max-width:680px;
font-size:1.08rem;
line-height:1.9;
color:#666;
}
/* LIST */
.educator__list{
display:flex;
flex-direction:column;
gap:18px;
margin:42px 0;
list-style:none;
padding:0;
}
.educator__list li{
display:flex;
align-items:flex-start;
gap:14px;
font-size:1.05rem;
font-weight:700;
color:var(--color-dark);
line-height:1.5;
}
/* QUOTE */
.educator__quote{
margin:0;
padding-left:22px;
border-left:4px solid var(--color-accent);
font-size:1.1rem;
font-style:italic;
line-height:1.8;
color:#666;
}
/* DOT */
.dot{
width:14px;
height:14px;
margin-top:5px;
border-radius:50%;
flex:none;
}
.yellow{background:#F5C451;}
.green{background:#77C37A;}
.blue{background:#49A8D8;}
.turquoise{background:#45C4C9;}
/* ==================================================
MOBILE
================================================== */
@media (max-width:768px){
.educator{
padding:70px 0;
}
/* ORDEM:
EYEBROW
TITLE
FOTO
DESCRIPTION
LIST
QUOTE
*/
.educator__wrapper{
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"eyebrow"
"title"
"photo"
"description"
"list"
"quote";
gap:0;
}
/* libera os elementos internos */
.educator__content{
display:contents;
}
/* EYEBROW */
.educator__eyebrow{
grid-area:eyebrow;
margin-bottom:20px;
}
/* TITLE */
.educator__title{
grid-area:title;
margin:0 0 30px;
font-size:2.35rem;
}
/* PHOTO */
.educator__photo{
grid-area:photo;
height:420px;
margin:0 0 34px;
border-radius:22px;
}
/* DESCRIPTION */
.educator__description{
grid-area:description;
margin:0 0 34px;
font-size:1rem;
}
/* LIST */
.educator__list{
grid-area:list;
margin:0;
gap:16px;
}
/* QUOTE */
.educator__quote{
grid-area:quote;
margin:34px 0 0;
}
}
/* programs.css */
/* ==================================================
PROGRAMS
================================================== */
.programs{
padding:140px 0;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f6fcff 55%,
#edf9ff 100%
);
overflow:hidden;
}
/* ==================================================
HEADER
================================================== */
.programs__header{
max-width:820px;
margin:0 auto 80px;
text-align:center;
}
.programs__eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--color-accent);
font-size:.82rem;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.programs__eyebrow::before{
content:"";
width:34px;
height:3px;
border-radius:20px;
background:var(--color-accent);
}
.programs__header h2{
margin:22px 0;
font-size:clamp(3rem,5vw,4.5rem);
line-height:1.08;
color:var(--color-dark);
}
.programs__header p{
max-width:700px;
margin:auto;
font-size:1.12rem;
line-height:1.9;
color:#667085;
}
/* ==================================================
GRID
================================================== */
.programs__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
/* ==================================================
CARD
================================================== */
.program-card{
padding:34px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(18,48,68,.05);
box-shadow:
0 20px 55px rgba(0,0,0,.05);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.program-card:hover{
transform:translateY(-8px);
box-shadow:
0 28px 70px rgba(0,0,0,.10);
}
/* ==================================================
DOT
================================================== */
.program-card__icon{
display:flex;
align-items:center;
gap:14px;
margin-bottom:24px;
font-size:1rem;
font-weight:700;
}
.program-card__icon::before{
content:"";
width:14px;
height:14px;
border-radius:50%;
flex:none;
}
/* cores */
.program-card:nth-child(1) .program-card__icon::before{
background:#F6BE3C;
}
.program-card:nth-child(2) .program-card__icon::before{
background:#72C96F;
}
.program-card:nth-child(3) .program-card__icon::before{
background:#46AEE7;
}
.program-card:nth-child(4) .program-card__icon::before{
background:#45C7C5;
}
.program-card:nth-child(5) .program-card__icon::before{
background:#F6BE3C;
}
.program-card:nth-child(6) .program-card__icon::before{
background:#46AEE7;
}
/* ==================================================
TITLE
================================================== */
.program-card h3{
margin-bottom:16px;
font-size:1.45rem;
font-weight:800;
color:var(--color-dark);
}
/* ==================================================
TEXT
================================================== */
.program-card p{
color:#667085;
line-height:1.8;
font-size:1rem;
}
/* ==================================================
TABLET
================================================== */
@media(max-width:980px){
.programs{
padding:110px 0;
}
.programs__header{
margin-bottom:60px;
}
.programs__grid{
grid-template-columns:repeat(2,1fr);
gap:24px;
}
}
/* ==================================================
MOBILE
================================================== */
@media(max-width:768px){
.programs{
padding:90px 0;
}
.programs__header{
text-align:left;
margin-bottom:42px;
}
.programs__header h2{
font-size:2.6rem;
}
.programs__header p{
font-size:1rem;
line-height:1.75;
}
.programs__grid{
grid-template-columns:1fr;
gap:20px;
}
.program-card{
padding:28px 24px;
border-radius:22px;
}
.program-card h3{
font-size:1.3rem;
}
}
/* daily-routine.css */
/* ==================================================
DAILY ROUTINE
================================================== */
.routine{
padding:120px 0;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f7fcff 45%,
#edf9ff 100%
);
}
/* ==================================================
HEADER
================================================== */
.routine__header{
max-width:760px;
margin:0 auto 80px;
text-align:center;
}
.routine__eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--color-accent);
font-size:.82rem;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.routine__eyebrow::before{
content:"";
width:34px;
height:3px;
border-radius:20px;
background:var(--color-accent);
}
.routine__header h2{
margin:22px 0;
color:var(--color-dark);
font-size:3.4rem;
line-height:1.1;
}
.routine__header p{
color:#6f7d87;
font-size:1.1rem;
line-height:1.8;
}
/* ==================================================
TIMELINE
================================================== */
.routine__timeline{
position:relative;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:34px 70px;
}
.routine__timeline::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
width:3px;
transform:translateX(-50%);
border-radius:20px;
background:
linear-gradient(
to bottom,
var(--color-primary),
rgba(73,168,216,.15)
);
}
/* ==================================================
ITEM
================================================== */
.routine__item{
position:relative;
display:flex;
align-items:flex-start;
gap:22px;
}
.routine__dot{
position:relative;
z-index:2;
flex:none;
width:16px;
height:16px;
margin-top:10px;
border-radius:50%;
box-shadow:
0 0 0 8px rgba(255,255,255,.95),
0 0 0 10px rgba(73,168,216,.08);
}
/* ==================================================
CARD
================================================== */
.routine__content{
flex:1;
padding:26px;
border-radius:22px;
background:#fff;
box-shadow:
0 18px 45px rgba(0,0,0,.07);
transition:.30s;
}
.routine__content:hover{
transform:translateY(-6px);
box-shadow:
0 28px 60px rgba(0,0,0,.12);
}
.routine__time{
display:inline-block;
margin-bottom:12px;
color:var(--color-primary);
font-size:.85rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.routine__content h3{
margin-bottom:12px;
color:var(--color-dark);
font-size:1.35rem;
}
.routine__content p{
color:#6e7a84;
line-height:1.7;
}
/* ==================================================
DOT COLORS
================================================== */
.yellow{
background:#F5C451;
}
.green{
background:#77C37A;
}
.blue{
background:#49A8D8;
}
.turquoise{
background:#45C4C9;
}
/* ==================================================
TABLET
================================================== */
@media (max-width:980px){
.routine{
padding:90px 0;
}
.routine__header h2{
font-size:2.8rem;
}
}
/* ==================================================
MOBILE
================================================== */
@media (max-width:768px){
.routine{
padding:80px 0;
}
.routine__header{
margin-bottom:50px;
text-align:left;
}
.routine__header h2{
font-size:2.35rem;
}
.routine__timeline{
grid-template-columns:1fr;
gap:24px;
}
.routine__timeline::before{
left:8px;
}
.routine__item{
gap:18px;
}
.routine__content{
padding:22px;
}
.routine__content h3{
font-size:1.2rem;
}
}
/* learning.css */
/* ==========================================================
LEARNING
========================================================== */
.learning{
padding:100px 0;
background:linear-gradient(
180deg,
#ffffff 0%,
#f7fbff 35%,
#eef7ff 70%,
#ffffff 100%
);
}
.learning .section-eyebrow{
color:#F4B400;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}
.section-eyebrow::before{
content:"";
width:42px;
height:2px;
background:#F4B400;
}
.learning .section-heading{
text-align:center;
max-width:720px;
margin:0 auto 60px;
}
.learning-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}
.learning-card{
display:flex;
align-items:flex-start;
gap:18px;
padding:34px;
background:#fff;
border-radius:22px;
border:1px solid #E8EEF5;
box-shadow:0 8px 24px rgba(18,52,86,.05);
transition:.25s;
}
.learning-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(18,52,86,.08);
}
.learning-dot{
width:16px;
height:16px;
border-radius:50%;
flex-shrink:0;
margin-top:8px;
}
.learning-dot.yellow{
background:#F9C74F;
}
.learning-dot.green{
background:#43AA8B;
}
.learning-dot.blue{
background:#4D96FF;
}
.learning-dot.turquoise{
background:#4CC9F0;
}
.learning-card h3{
font-size:1.30rem;
font-weight:700;
color:#16325C;
margin-bottom:10px;
}
.learning-card p{
font-size:1rem;
line-height:1.7;
color:#667892;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:768px){
.learning{
padding:80px 0;
}
.learning-grid{
grid-template-columns:1fr;
}
}
/* meals.css */
/* ==========================================================
MEALS
========================================================== */
.meals{
padding:140px 0;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f6fcff 55%,
#edf9ff 100%
);
overflow:hidden;
}
/* ==========================================================
GRID
========================================================== */
.meals__wrapper{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:70px;
}
/* ==========================================================
PHOTO
========================================================== */
.meals__photo{
position:relative;
overflow:hidden;
border-radius:30px;
box-shadow:
0 30px 70px rgba(18,48,68,.12);
}
.meals__photo img{
width:100%;
height:1100px;
object-fit:cover;
display:block;
transition:
transform .7s ease;
}
.meals__photo:hover img{
transform:scale(1.04);
}
/* ==========================================================
CONTENT
========================================================== */
.meals__content{
width:100%;
max-width:none;
}
.meals__eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:24px;
color:var(--color-accent);
font-size:.82rem;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.meals__eyebrow::before{
content:"";
width:34px;
height:3px;
border-radius:20px;
background:var(--color-accent);
}
.meals h2{
margin-bottom:24px;
color:var(--color-dark);
font-size:clamp(2.8rem,5vw,4.2rem);
line-height:1.08;
}
.meals__description{
max-width:620px;
font-size:1.05rem;
line-height:1.75;
}
/* ==========================================================
LIST
========================================================== */
.meals__list{
display:flex;
flex-direction:column;
gap:24px;
}
.meals__item{
display:flex;
align-items:flex-start;
gap:16px;
padding:18px 22px;
border-radius:22px;
background:#fff;
border:1px solid rgba(18,48,68,.06);
box-shadow:
0 15px 40px rgba(0,0,0,.05);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.meals__item:hover{
transform:translateY(-4px);
box-shadow:
0 22px 55px rgba(0,0,0,.10);
}
.meals__item strong{
display:block;
margin-bottom:6px;
color:var(--color-dark);
font-size:1.08rem;
}
.meals__item p{
margin:0;
color:#667085;
line-height:1.65;
}
/* ==========================================================
QUOTE
========================================================== */
.meals__quote{
margin-top:48px;
padding-left:28px;
border-left:4px solid var(--color-accent);
color:#5c6773;
font-size:1.12rem;
font-style:italic;
line-height:1.9;
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:980px){
.meals{
padding:110px 0;
}
.meals__wrapper{
gap:60px;
grid-template-columns:1fr;
}
.meals__photo{
max-width:700px;
margin:auto;
}
}
/* ==========================================================
MOBILE — MEALS ORDER
========================================================== */
@media(max-width:680px){
.meals{
padding:90px 0;
}
/* ORDEM MOBILE:
EYEBROW
H2
FOTO
DESCRIÇÃO
LISTA
FRASE
*/
.meals__wrapper{
display:grid;
grid-template-columns:minmax(0, 1fr);
grid-template-areas:
"eyebrow"
"title"
"photo"
"description"
"list"
"quote";
gap:0;
}
/* LIBERA OS ELEMENTOS INTERNOS NO GRID PRINCIPAL */
.meals__content{
display:contents;
}
/* EYEBROW */
.meals__eyebrow{
grid-area:eyebrow;
margin-bottom:20px;
}
/* TITLE */
.meals h2{
grid-area:title;
margin:0 0 30px;
font-size:2.5rem;
}
/* PHOTO AFTER H2 */
.meals__photo{
grid-area:photo;
width:100%;
max-width:none;
margin:0 0 34px;
border-radius:22px;
}
.meals__photo img{
width:100%;
height:280px;
object-fit:cover;
transform:scale(1.03);
}
/* DESCRIPTION */
.meals__description{
grid-area:description;
margin:0 0 34px;
font-size:1rem;
line-height:1.75;
}
/* LIST */
.meals__list{
grid-area:list;
gap:16px;
}
.meals__item{
padding:18px;
border-radius:18px;
}
.meals__item strong{
font-size:1rem;
}
/* QUOTE */
.meals__quote{
grid-area:quote;
margin:34px 0 0;
padding-left:18px;
font-size:1rem;
line-height:1.7;
}
}
/* our-space.css */
/* ==========================================================
OUR SPACE
========================================================== */
.space{
position:relative;
padding:140px 0;
overflow:hidden;
background:
linear-gradient(
135deg,
#ffffff 0%,
#fffef9 45%,
#f8fdff 100%
);
}
/* ==========================================================
BACKGROUND LIGHT
========================================================== */
.space::before{
content:"";
position:absolute;
top:-180px;
right:-120px;
width:520px;
height:520px;
border-radius:50%;
background:
rgba(73,168,216,.08);
filter:blur(120px);
pointer-events:none;
}
.space::after{
content:"";
position:absolute;
bottom:-180px;
left:-120px;
width:420px;
height:420px;
border-radius:50%;
background:
rgba(245,196,81,.10);
filter:blur(120px);
}
/* ==========================================================
HEADER
========================================================== */
.space__header{
position:relative;
z-index:2;
max-width:760px;
margin:auto;
margin-bottom:80px;
text-align:center;
}
.space__eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--color-accent);
font-size:.82rem;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.space__eyebrow::before{
content:"";
width:34px;
height:3px;
border-radius:20px;
background:var(--color-accent);
}
.space__header h2{
margin:24px 0;
color:var(--color-dark);
font-size:clamp(2.8rem,5vw,4.3rem);
line-height:1.08;
}
.space__header p{
color:#6d7b87;
font-size:1.08rem;
line-height:1.9;
}
/* ==========================================================
GRID
========================================================== */
.space__grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
/* ==========================================================
CARD
========================================================== */
.space__card{
overflow:hidden;
border-radius:26px;
background:#fff;
border:1px solid rgba(18,48,68,.05);
box-shadow:
0 18px 50px rgba(0,0,0,.06);
transition:.45s;
}
.space__card:hover{
transform:
translateY(-8px);
box-shadow:
0 35px 80px rgba(0,0,0,.10);
}
/* ==========================================================
IMAGE
========================================================== */
.space__card img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:1s;
}
.space__card:hover img{
transform:scale(1.08);
}
/* ==========================================================
CONTENT
========================================================== */
.space__card-content{
padding:28px;
}
.space__title{
display:flex;
align-items:center;
gap:14px;
margin-bottom:14px;
}
.space__title h3{
font-size:1.35rem;
color:var(--color-dark);
}
.space__card p{
color:#6f7d88;
line-height:1.75;
}
/* ==========================================================
FOOTER
========================================================== */
.space__footer{
position:relative;
z-index:2;
margin-top:80px;
text-align:center;
}
.space__footer p{
margin-bottom:24px;
color:#6d7b87;
font-size:1.08rem;
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:980px){
.space{
padding:110px 0;
}
.space__grid{
grid-template-columns:repeat(2,1fr);
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:680px){
.space{
padding:90px 0;
}
.space__header{
text-align:left;
margin-bottom:50px;
}
.space__header h2{
font-size:2.45rem;
}
.space__grid{
grid-template-columns:1fr;
gap:22px;
}
.space__card img{
height:240px;
}
.space__card-content{
padding:22px;
}
.space__footer{
margin-top:55px;
}
}
/* reviews.css */
/* ==================================================
GOOGLE BUSINESS PROFILE
================================================== */
.google-profile {
padding: 112px 0;
background:
radial-gradient(circle at 12% 18%, rgba(246, 190, 60, .18), transparent 26%),
linear-gradient(135deg, #f4fbfe 0%, #ffffff 58%, #eef9fc 100%);
}
.google-profile__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 64px;
padding: 64px 68px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(18, 48, 68, .08);
border-radius: 32px;
box-shadow: 0 28px 80px rgba(18, 48, 68, .10);
}
.google-profile__card::after {
content: "G";
position: absolute;
right: 32px;
bottom: -76px;
color: rgba(40, 175, 203, .07);
font-family: var(--font-heading);
font-size: 15rem;
font-weight: 900;
line-height: 1;
pointer-events: none;
}
.google-profile__content {
position: relative;
z-index: 1;
max-width: 720px;
}
.google-profile__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--color-accent);
font-size: .82rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.google-profile__eyebrow::before {
content: "";
width: 34px;
height: 3px;
border-radius: 20px;
background: #f6be3c;
}
.google-profile h2 {
max-width: 680px;
margin: 18px 0;
color: var(--color-dark);
font-size: clamp(2.5rem, 4.2vw, 4rem);
line-height: 1.08;
}
.google-profile p {
max-width: 650px;
margin: 0;
color: #667085;
font-size: 1.1rem;
line-height: 1.8;
}
.google-profile__location {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 24px;
color: var(--color-dark);
font-weight: 800;
}
.google-profile__pin {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: #eaf8fc;
color: var(--color-accent);
font-size: 1.2rem;
}
.google-profile__button {
position: relative;
z-index: 1;
display: inline-flex;
min-height: 58px;
align-items: center;
justify-content: center;
padding: 17px 30px;
border: 2px solid var(--color-accent);
border-radius: 999px;
background: var(--color-accent);
color: #ffffff;
font-weight: 800;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.google-profile__button:hover,
.google-profile__button:focus-visible {
transform: translateY(-3px);
background: #168eaa;
box-shadow: 0 16px 34px rgba(40, 175, 203, .26);
}
@media (max-width: 980px) {
.google-profile {
padding: 92px 0;
}
.google-profile__card {
grid-template-columns: 1fr;
gap: 36px;
padding: 54px;
}
.google-profile__button {
width: fit-content;
}
}
@media (max-width: 768px) {
.google-profile {
padding: 72px 0;
}
.google-profile__card {
gap: 30px;
padding: 38px 26px;
border-radius: 24px;
}
.google-profile__card::after {
right: -12px;
bottom: -38px;
font-size: 9rem;
}
.google-profile h2 {
font-size: clamp(2.25rem, 11vw, 3rem);
}
.google-profile p {
font-size: 1rem;
}
.google-profile__button {
width: 100%;
white-space: normal;
}
}
/* ==================================================
NEARBY COMMUNITIES
================================================== */
.local-area {
padding: 104px 0;
background: #ffffff;
}
.local-area__layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
align-items: center;
gap: 84px;
}
.local-area__content {
max-width: 640px;
}
.local-area__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--color-accent);
font-size: .82rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.local-area__eyebrow::before {
content: "";
width: 34px;
height: 3px;
border-radius: 20px;
background: #f6be3c;
}
.local-area h2 {
margin: 18px 0 22px;
color: var(--color-dark);
font-size: clamp(2.5rem, 4.2vw, 4rem);
line-height: 1.08;
}
.local-area__content p {
margin: 0;
color: #667085;
font-size: 1.08rem;
line-height: 1.8;
}
.local-area__communities {
padding: 38px;
border: 1px solid rgba(18, 48, 68, .08);
border-radius: 28px;
background: #f3fbfd;
}
.local-area__communities h3 {
margin: 0 0 24px;
color: var(--color-dark);
font-size: 1.25rem;
}
.local-area__communities ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.local-area__communities li {
position: relative;
padding: 13px 16px 13px 38px;
border-radius: 14px;
background: #ffffff;
color: #395363;
font-weight: 700;
}
.local-area__communities li::before {
content: "";
position: absolute;
top: 50%;
left: 17px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #f6be3c;
transform: translateY(-50%);
}
@media (max-width: 980px) {
.local-area__layout {
grid-template-columns: 1fr;
gap: 48px;
}
}
@media (max-width: 768px) {
.local-area {
padding: 72px 0;
}
.local-area__layout {
gap: 36px;
}
.local-area h2 {
font-size: clamp(2.25rem, 11vw, 3rem);
}
.local-area__communities {
padding: 24px 18px;
border-radius: 22px;
}
.local-area__communities ul {
gap: 9px;
}
.local-area__communities li {
padding: 11px 10px 11px 29px;
font-size: .9rem;
}
.local-area__communities li::before {
left: 12px;
width: 7px;
height: 7px;
}
}
/* final-cta.css */
/* ==================================================
FINAL TOUR CTA — MOBILE FIRST
================================================== */
.final-tour {
position: relative;
overflow: hidden;
padding: 72px 0;
background:
radial-gradient(
circle at 88% 10%,
rgba(40, 175, 203, 0.13),
transparent 34%
),
linear-gradient(
135deg,
#f7fcff 0%,
#eaf7fd 100%
);
}
/* ==================================================
MAIN LAYOUT
================================================== */
.final-tour__wrapper {
display: flex;
flex-direction: column;
gap: 34px;
}
/* ==================================================
LEFT CONTENT
================================================== */
.final-tour__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* EYEBROW */
.final-tour__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
width: fit-content;
margin-bottom: 18px;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 1.4;
text-transform: uppercase;
}
.final-tour__eyebrow::before {
width: 32px;
height: 3px;
flex: 0 0 32px;
border-radius: 999px;
background: var(--color-accent);
content: "";
}
/* TITLE */
.final-tour__title {
max-width: 680px;
margin: 0;
color: var(--color-text);
font-size: clamp(2.4rem, 11vw, 3.65rem);
line-height: 1.06;
letter-spacing: -0.045em;
text-wrap: balance;
}
/* DESCRIPTION */
.final-tour__description {
max-width: 620px;
margin: 24px 0 0;
color: var(--color-text-soft);
font-size: 1rem;
line-height: 1.75;
}
/* ==================================================
BENEFITS — HIDDEN ON MOBILE
================================================== */
.final-tour__list {
display: none;
margin: 34px 0 0;
padding: 0;
list-style: none;
}
.final-tour__list li {
position: relative;
min-height: 30px;
padding-left: 44px;
color: var(--color-text-soft);
font-size: 1rem;
line-height: 1.55;
}
.final-tour__list li::before {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: #ffffff;
background: var(--color-accent);
font-size: 0.75rem;
font-weight: 800;
box-shadow:
0 0 0 7px rgba(244, 197, 66, 0.14);
content: "✓";
}
/* ==================================================
CONTACT CARD
================================================== */
.final-tour__card {
overflow: hidden;
width: 100%;
padding: 26px 20px;
border: 1px solid rgba(40, 175, 203, 0.16);
border-radius: 26px;
background: rgba(255, 255, 255, 0.97);
box-shadow:
0 28px 70px rgba(18, 73, 92, 0.14);
}
/* ==================================================
CARD HEADER
================================================== */
.final-tour__card-header {
margin-bottom: 22px;
}
.final-tour__card-badge {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
color: #08748b;
background: rgba(40, 175, 203, 0.12);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.final-tour__card-badge::before {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #6ecb72;
box-shadow:
0 0 0 5px rgba(110, 203, 114, 0.14);
content: "";
}
.final-tour__card-header h3 {
margin: 0 0 10px;
color: var(--color-text);
font-size: 1.45rem;
line-height: 1.22;
letter-spacing: -0.02em;
}
.final-tour__card-header p {
margin: 0;
color: var(--color-text-soft);
font-size: 0.94rem;
line-height: 1.65;
}
.final-tour__primary-actions {
display: grid;
gap: 10px;
margin-bottom: 12px;
}
.final-tour__action {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 60px;
padding: 15px 22px;
border: 2px solid var(--color-primary-dark);
border-radius: 999px;
font-family: var(--font-heading);
font-size: 0.98rem;
font-weight: 900;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.final-tour__action--schedule {
color: #ffffff;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
box-shadow: 0 14px 30px rgba(40, 175, 203, 0.24);
}
.final-tour__action--text {
color: var(--color-primary-dark);
background: #ffffff;
}
.final-tour__action:hover {
transform: translateY(-2px);
}
.final-tour__action:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
/* ==================================================
CONTACT ITEMS
================================================== */
.final-tour__contact-item {
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
padding: 17px 0;
border-bottom: 1px solid rgba(18, 73, 92, 0.08);
color: inherit;
text-decoration: none;
transition:
transform 180ms ease,
opacity 180ms ease;
}
a.final-tour__contact-item:hover {
transform: translateX(4px);
}
a.final-tour__contact-item:focus-visible {
outline: 3px solid rgba(40, 175, 203, 0.35);
outline-offset: 4px;
border-radius: 10px;
}
/* ICONS */
.final-tour__contact-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 50%;
font-size: 0.95rem;
}
.final-tour__contact-icon--blue {
color: #249fc0;
background: rgba(73, 168, 216, 0.15);
}
.final-tour__contact-icon--green {
color: #53ae58;
background: rgba(119, 195, 122, 0.16);
}
.final-tour__contact-icon--yellow {
color: #d99b00;
background: rgba(245, 196, 81, 0.18);
}
.final-tour__contact-icon--pink {
color: #e46791;
background: rgba(241, 129, 167, 0.16);
}
/* CONTACT CONTENT */
.final-tour__contact-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.final-tour__contact-content strong {
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.35;
}
.final-tour__contact-content span {
overflow-wrap: anywhere;
color: var(--color-text-soft);
font-size: 0.9rem;
line-height: 1.45;
}
/* ==================================================
ONLINE BOOKING
================================================== */
.final-tour__booking {
margin-top: 24px;
padding: 20px;
border: 1px solid rgba(40, 175, 203, 0.18);
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(244, 197, 66, 0.15),
rgba(40, 175, 203, 0.15)
);
}
.final-tour__booking-label {
display: block;
margin-bottom: 6px;
color: #1689a3;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.4;
text-transform: uppercase;
}
.final-tour__booking-text strong {
display: block;
margin-bottom: 7px;
color: var(--color-text);
font-size: 1.05rem;
line-height: 1.35;
}
.final-tour__booking-text p {
margin: 0;
color: var(--color-text-soft);
font-size: 0.88rem;
line-height: 1.55;
}
/* BOOKING BUTTON */
.final-tour__booking-button {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 54px;
margin-top: 18px;
padding: 14px 20px;
border-radius: 999px;
color: #ffffff;
background:
linear-gradient(
135deg,
var(--color-accent),
var(--color-primary)
);
box-shadow:
0 16px 35px rgba(40, 175, 203, 0.25);
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
transform 200ms ease,
box-shadow 200ms ease;
}
.final-tour__booking-button:hover {
transform: translateY(-3px);
box-shadow:
0 22px 42px rgba(40, 175, 203, 0.34);
}
.final-tour__booking-button:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 4px;
}
.final-tour__booking-button .icon {
flex: 0 0 auto;
transition: transform 200ms ease;
}
.final-tour__booking-button:hover .icon {
transform: translateX(4px);
}
/* ==================================================
CARD FOOTER
================================================== */
.final-tour__footer {
display: block;
margin-top: 18px;
color: var(--color-text-soft);
font-size: 0.76rem;
line-height: 1.5;
text-align: center;
}
/* ==================================================
TABLET
================================================== */
@media (min-width: 700px) {
.final-tour {
padding: 90px 0;
}
.final-tour__wrapper {
gap: 42px;
}
.final-tour__card {
padding: 34px;
}
.final-tour__primary-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.final-tour__action {
gap: 8px;
padding-inline: 14px;
font-size: 0.9rem;
}
}
/* ==================================================
DESKTOP
================================================== */
@media (min-width: 980px) {
.final-tour {
padding: 110px 0;
}
.final-tour__wrapper {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(500px, 0.95fr);
column-gap: clamp(46px, 6vw, 90px);
align-items: center;
}
.final-tour__content {
max-width: 680px;
}
.final-tour__title {
font-size: clamp(3.4rem, 5vw, 5rem);
}
.final-tour__description {
margin-top: 28px;
font-size: 1.06rem;
}
.final-tour__list {
display: grid;
gap: 18px;
}
.final-tour__card {
padding: 40px;
}
.final-tour__action {
font-size: 0.94rem;
}
}
/* ==================================================
REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
.final-tour__contact-item,
.final-tour__action,
.final-tour__booking-button,
.final-tour__booking-button .icon {
transition: none;
}
}
/* floating-booking.css */
/* Booking-first floating contact component */
.floating-booking {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 1200;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.floating-booking__menu {
display: grid;
gap: 8px;
min-width: min(250px, calc(100vw - 36px));
padding: 10px;
border: 1px solid rgba(40, 175, 203, 0.18);
border-radius: 20px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 20px 55px rgba(23, 59, 72, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transform-origin: bottom right;
pointer-events: none;
transition:
opacity 180ms ease,
visibility 180ms ease,
transform 180ms ease;
}
.floating-booking.is-open .floating-booking__menu {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
.floating-booking__option {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 11px 14px;
border-radius: 14px;
color: var(--color-text);
background: var(--color-background-soft);
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease;
}
.floating-booking__option--schedule {
color: #ffffff;
background: var(--color-primary-dark);
}
.floating-booking__option:hover {
transform: translateX(-3px);
}
.floating-booking__option:focus-visible,
.floating-booking__toggle:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
.floating-booking__option .icon {
width: 20px;
color: var(--color-primary-dark);
text-align: center;
}
.floating-booking__option--schedule .icon {
color: #ffffff;
}
.floating-booking__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 0;
border: 0;
border-radius: 50%;
color: #ffffff;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
box-shadow: 0 12px 28px rgba(22, 122, 152, 0.3);
font-size: 1.08rem;
line-height: 1;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.floating-booking__toggle:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(22, 122, 152, 0.38);
}
@media (max-width: 480px) {
.floating-booking {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
}
.floating-booking__toggle {
width: 48px;
height: 48px;
font-size: 0.96rem;
}
}
@media (prefers-reduced-motion: reduce) {
.floating-booking__menu,
.floating-booking__option,
.floating-booking__toggle {
transition: none;
}
}
/* footer.css */
/*==================================================
FOOTER
==================================================*/
.footer {
background: #1D3557;
color: #fff;
padding: 90px 0 30px;
}
.footer a {
color: inherit;
text-decoration: none;
}
/*==================================================
GRID
==================================================*/
.footer__grid {
display: grid;
grid-template-columns:
1.6fr
1fr
1.2fr
.9fr;
align-items: start;
gap: 60px;
padding-bottom: 60px;
}
/*==================================================
BRAND
==================================================*/
.footer__brand p {
max-width: 340px;
margin: 0 0 20px;
color: rgba(255, 255, 255, .75);
line-height: 1.9;
}
/*==================================================
COMPANY NAME
==================================================*/
.footer__company {
margin: 0 0 22px;
color: #fff;
font-size: 2rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.5px;
}
.footer__company span {
display: block;
margin-top: 6px;
color: #8DD6FF;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
}
/*==================================================
SOCIAL
==================================================*/
.footer-social {
margin-top: 18px;
}
.footer-social a {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-radius: 50px;
background: rgba(255, 255, 255, .08);
color: #fff;
text-decoration: none;
transition: .3s ease;
}
.footer-social span {
font-size: .95rem;
font-weight: 600;
letter-spacing: .3px;
}
.footer-social a:hover {
background: #E1306C;
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(225, 48, 108, .35);
}
/*==================================================
TITLES
==================================================*/
.footer h4 {
margin: 0 0 24px;
color: #fff;
font-size: 1.05rem;
}
/*==================================================
LISTS
==================================================*/
.footer ul {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.footer li {
margin: 0;
color: rgba(255, 255, 255, .75);
line-height: 1.55;
}
.footer li a {
transition: color .25s ease;
}
.footer li a:hover {
color: #8DD6FF;
}
/*==================================================
CONTACT COLUMN
==================================================*/
/*
Remove a quebra duplicada criada pelo:
...
*/
.footer li strong + br {
display: none;
}
.footer li strong {
display: block;
margin: 0 0 2px;
color: #fff;
font-weight: 600;
line-height: 1.35;
}
/*
Deixa os itens de contato próximos,
sem grandes espaços verticais.
*/
.footer__grid > div:nth-child(3) ul {
gap: 14px;
}
.footer__grid > div:nth-child(3) li {
margin: 0;
}
/*==================================================
BOTTOM
==================================================*/
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.footer__bottom p {
margin: 0;
color: rgba(255, 255, 255, .65);
font-size: .92rem;
}
.footer__bottom a {
color: #8DD6FF;
font-weight: 600;
}
.footer__bottom a:hover {
color: #fff;
}
/*==================================================
TABLET
==================================================*/
@media (max-width: 992px) {
.footer__grid {
grid-template-columns: repeat(2, 1fr);
gap: 50px;
}
}
/*==================================================
MOBILE
==================================================*/
@media (max-width: 768px) {
.footer {
padding: 70px 0 25px;
}
.footer__grid {
grid-template-columns: 1fr;
gap: 45px;
text-align: center;
}
.footer__brand p {
margin-right: auto;
margin-left: auto;
}
.footer-social {
display: flex;
justify-content: center;
}
.footer ul {
align-items: center;
}
.footer__bottom {
flex-direction: column;
text-align: center;
}
}
/* legal.css */
/* ==========================================================
LEGAL PAGES
========================================================== */
.legal-page{
background:#F8FAFC;
padding:80px 0;
}
.legal-page .container{
max-width:900px;
}
/* ==========================================================
BADGE
========================================================== */
.section-badge{
display:inline-block;
background:#EAF4FF;
color:#1D3557;
font-size:.85rem;
font-weight:600;
padding:8px 18px;
border-radius:999px;
margin-bottom:24px;
}
/* ==========================================================
TITLE
========================================================== */
.legal-page h1{
font-size:2.8rem;
font-weight:700;
color:#1D3557;
margin-bottom:12px;
line-height:1.2;
}
.legal-updated{
color:#64748B;
font-size:.95rem;
margin-bottom:45px;
}
/* ==========================================================
CONTENT CARD
========================================================== */
.legal-content{
background:#fff;
padding:50px;
border-radius:20px;
box-shadow:0 10px 35px rgba(0,0,0,.06);
overflow-wrap:anywhere;
word-break:break-word;
}
/* ==========================================================
HEADINGS
========================================================== */
.legal-content h2{
font-size:1.35rem;
color:#1D3557;
margin-top:45px;
margin-bottom:18px;
}
.legal-content h2:first-child{
margin-top:0;
}
/* ==========================================================
TEXT
========================================================== */
.legal-content p{
color:#475569;
line-height:1.9;
margin-bottom:20px;
}
/* ==========================================================
LIST
========================================================== */
.legal-content ul{
margin-top:25px;
padding-left:22px;
}
.legal-content li{
color:#475569;
margin-bottom:14px;
line-height:1.8;
}
.legal-content strong{
color:#1D3557;
}
/* ==========================================================
LINKS
========================================================== */
.legal-content a{
color:#2563EB;
text-decoration:none;
transition:.25s;
}
.legal-content a:hover{
text-decoration:underline;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:768px){
.legal-page{
padding:60px 0;
}
.legal-page h1{
font-size:2rem;
}
.legal-content{
padding:30px 24px;
border-radius:16px;
}
}
/* cookie-consent.css */
.cookie-consent {
position: fixed;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 10000;
max-width: 760px;
margin: 0 auto;
color: var(--color-text);
}
.cookie-consent[hidden],
.cookie-settings-button[hidden] {
display: none;
}
.cookie-consent__content {
display: flex;
align-items: center;
gap: 24px;
padding: 20px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.cookie-consent__copy {
flex: 1;
}
.cookie-consent__title {
display: block;
margin-bottom: 6px;
font-family: var(--font-heading);
font-size: 1.05rem;
}
.cookie-consent__text {
margin: 0;
color: var(--color-text-soft);
font-size: .9rem;
line-height: 1.55;
}
.cookie-consent__text a {
color: var(--color-primary-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-consent__actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.cookie-consent__button,
.cookie-settings-button {
min-height: 44px;
padding: 10px 16px;
border: 2px solid var(--color-primary-dark);
border-radius: var(--radius-pill);
font: inherit;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
}
.cookie-consent__button--accept {
color: var(--color-white);
background: var(--color-primary-dark);
}
.cookie-consent__button--reject {
color: var(--color-primary-dark);
background: var(--color-white);
}
.cookie-settings-button {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 12px;
color: var(--color-text-soft);
background: rgba(255, 255, 255, .96);
border-color: var(--color-border);
font-size: .78rem;
box-shadow: none;
}
.footer .cookie-settings-button {
color: rgba(255, 255, 255, .78);
background: transparent;
border-color: rgba(255, 255, 255, .28);
}
.footer .cookie-settings-button:hover {
color: var(--color-white);
border-color: rgba(255, 255, 255, .7);
}
.cookie-consent__button:hover,
.cookie-settings-button:hover {
transform: translateY(-1px);
}
@media (max-width: 680px) {
.cookie-consent {
right: 12px;
bottom: 12px;
left: 12px;
}
.cookie-consent__content {
display: block;
padding: 18px;
}
.cookie-consent__actions {
margin-top: 16px;
}
.cookie-consent__button {
flex: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.cookie-consent__button,
.cookie-settings-button {
transition: none;
}
}