/* ==========================================================================
Atamm — base styles. Mobile-first; logical properties throughout so RTL
(Arabic, via dir="rtl" set from Polylang in base.twig) works without a
separate stylesheet.
========================================================================== */
/* Webfonts (Fraunces / Manrope) are loaded via in views/base.twig
— no local woff2 files or @font-face needed. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-base);
line-height: 1.5;
}
/* Prevents the page behind the mobile sidebar from scrolling while it's
open — toggled on by assets/js/nav-dropdown.js. */
body.atamm-nav-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0 0 var(--space-2); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--space-2);
}
.atamm-section { padding-block: var(--space-6); }
.atamm-section--alt { background: var(--color-surface); }
.atamm-section__head { max-width: 640px; margin-block-end: var(--space-4); }
.atamm-section__head--center { margin-inline: auto; text-align: center; }
.atamm-section__head p { color: var(--color-text-muted); font-size: var(--text-lg); }
.atamm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: 0.9rem 1.75rem;
border-radius: 999px;
font-weight: 700;
font-size: var(--text-sm);
border: 2px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
cursor: pointer;
}
.atamm-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.atamm-btn--primary { background: var(--color-primary); color: var(--color-base); }
.atamm-btn--accent { background: var(--color-accent); color: var(--color-primary-dark); }
.atamm-btn--outline { background: transparent; border-color: currentColor; }
.atamm-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: var(--color-base); }
.atamm-btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); }
.atamm-btn--lg { padding: 1.1rem 2.25rem; font-size: var(--text-base); }
.atamm-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
/* -------------------------------------------------------------------------
Header
------------------------------------------------------------------------- */
.atamm-header {
border-block-end: 1px solid var(--color-border);
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 30;
}
.atamm-header__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding-block: var(--space-2);
}
.atamm-header__logo { display: inline-flex; align-items: center; }
/* Controls the rendered logo size regardless of the uploaded file's native
dimensions — adjust the height value here to resize it. */
.atamm-header__logo img { height: 2.25rem; width: auto; max-width: 160px; object-fit: contain; }
@media (min-width: 768px) {
.atamm-header__logo img { height: 2.75rem; max-width: 200px; }
}
.atamm-header__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.375rem; color: var(--color-primary); }
.atamm-header__menu-toggle {
/* The sidebar nav is position: fixed (out of normal flow) on mobile, so
.atamm-header__row's `justify-content: space-between` only sees the
logo, this button, and the (often-empty) actions div as its 3 flex
items — it centers the button between logo and that invisible div
instead of flushing it right. An auto start-margin consumes all the
free space before it, pushing it (and the empty actions div after
it) flush to the row's end regardless of whether actions has content. */
margin-inline-start: auto;
background: var(--color-surface);
border: 0;
border-radius: var(--radius-sm);
width: 2.75rem;
height: 2.75rem;
padding: 0;
color: var(--color-primary);
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.atamm-header__menu-bar {
display: block;
width: 1.25rem;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.atamm-header__menu-toggle[aria-expanded="true"] .atamm-header__menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.atamm-header__menu-toggle[aria-expanded="true"] .atamm-header__menu-bar:nth-child(2) { opacity: 0; }
.atamm-header__menu-toggle[aria-expanded="true"] .atamm-header__menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile: the nav is a fixed, full-height sidebar sliding in from the
inline-end edge (right in LTR, left in RTL). `position: fixed` anchors
to the viewport regardless of ancestor positioning, so no positioned
parent is needed the way an absolutely-positioned panel would require. */
.atamm-nav-backdrop {
position: fixed;
inset: 0;
background: rgba(7, 26, 51, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 40;
}
.atamm-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
.atamm-header__nav {
position: fixed;
top: 0;
inset-inline-end: 0;
width: min(340px, 88vw);
height: 100vh;
height: 100svh;
display: flex;
flex-direction: column;
overflow-y: auto;
background: var(--color-base);
box-shadow: var(--shadow-lg);
padding: 0 var(--space-3) var(--space-3);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 50;
}
/* transform has no logical (inline-aware) equivalent — :dir(rtl) flips
the slide-in direction to match inset-inline-end, which resolves to
the left edge in RTL. */
:dir(rtl) .atamm-header__nav { transform: translateX(-100%); }
.atamm-header__nav.is-open { transform: translateX(0); }
.atamm-header__nav-head {
position: sticky;
top: 0;
background: var(--color-base);
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-3) var(--space-2);
margin-block-end: var(--space-2);
border-block-end: 1px solid var(--color-border);
}
.atamm-header__nav-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: var(--text-lg); }
.atamm-header__nav-close {
background: var(--color-surface);
border: 0;
border-radius: var(--radius-sm);
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
cursor: pointer;
}
/* Direct child only — a plain descendant selector here would also match
the nested .atamm-dropdown and force it permanently visible, since
it'd out-specificity .atamm-dropdown's own `display: none`. */
.atamm-header__nav > ul { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.atamm-header__nav a { font-weight: 600; }
.atamm-header__nav > ul > li > a {
display: block;
padding: 0.9rem var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-lg);
color: var(--color-text);
transition: background-color 0.15s ease, color 0.15s ease;
}
.atamm-header__nav > ul > li > a:hover,
.atamm-header__nav > ul > li > a:focus-visible {
background: var(--color-accent-soft);
color: var(--color-primary);
}
.atamm-header__nav > ul > li:not(:last-child) { border-block-end: 1px solid var(--color-border); }
/* flex-wrap lets .atamm-dropdown (flex-basis: 100%, below) drop onto its
own full-width row on mobile, while staying a normal inline row of
label + caret on desktop where the dropdown is taken out of flow. */
.atamm-nav-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.atamm-nav-item > a { flex: 1; }
.atamm-nav-item__toggle {
background: var(--color-surface);
border: 0;
border-radius: 50%;
width: 2rem;
height: 2rem;
margin-inline-end: 0.25rem;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.atamm-nav-item__toggle svg { transition: transform 0.15s ease; }
.atamm-nav-item.is-open .atamm-nav-item__toggle svg { transform: rotate(180deg); }
/* Mobile-first: inline panel that wraps onto its own row (flex-basis:
100% on the .atamm-nav-item flex-wrap parent above) instead of an
overlay — an absolute overlay would need its own viewport-relative
positioning math to avoid clipping inside the mobile nav panel. */
.atamm-dropdown {
display: none;
flex-basis: 100%;
width: 100%;
background: var(--color-surface);
border-radius: var(--radius-sm);
padding: var(--space-1) 0;
margin-block-end: var(--space-1);
}
.atamm-dropdown li a {
display: block;
padding: 0.65rem var(--space-3);
font-weight: 500;
font-size: var(--text-base);
color: var(--color-text-muted);
border-radius: var(--radius-sm);
}
.atamm-dropdown li a:hover { background: var(--color-accent-soft); color: var(--color-primary); }
.atamm-nav-item.is-open .atamm-dropdown {
display: block;
}
.atamm-header__nav-footer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
margin-block-start: var(--space-3);
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--color-border);
}
.atamm-btn--block { width: 100%; }
.atamm-lang-switcher--nav { justify-content: center; font-size: var(--text-sm); }
@media (min-width: 768px) {
/* Desktop reverts to an absolute-positioned overlay. No margin-top here:
a gap between the "Services" label and the dropdown box is dead space
the mouse can cross without touching any element, which drops the
:hover state before the cursor reaches the dropdown. padding-top on
the dropdown itself gives the same visual spacing while staying
inside the hoverable box. */
.atamm-dropdown {
position: absolute;
top: 100%;
inset-inline-start: 0;
min-width: 12rem;
background: var(--color-base);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
padding-top: 0.5rem;
z-index: 20;
}
}
/* Hover-to-open is gated to real mouse/trackpad input (hover: hover) and
(pointer: fine) so it can't fire on touch — mobile browsers simulate a
":hover" state on first tap, and without this gate a wide touchscreen
(e.g. a tablet in landscape, which already clears the 768px breakpoint)
would pop the dropdown open just from tapping the "Services" link.
Touch devices instead rely solely on the explicit caret-tap toggle
(.atamm-nav-item.is-open, unconditional above, not gated by any media
query) — never on hover. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.atamm-nav-item:hover .atamm-dropdown,
.atamm-nav-item:focus-within .atamm-dropdown {
display: block;
}
}
/* Hidden on mobile — the same CTA + language switcher live in
.atamm-header__nav-footer inside the slide-in panel instead, so they're
not duplicated in the cramped header row next to the hamburger. */
.atamm-header__actions { display: none; align-items: center; gap: var(--space-2); }
.atamm-lang-switcher { display: flex; gap: var(--space-1); font-size: 0.875rem; }
.atamm-lang-switcher a[aria-current="true"] { font-weight: 700; color: var(--color-accent); }
@media (min-width: 768px) {
.atamm-header__menu-toggle,
.atamm-header__nav-close,
.atamm-header__nav-head,
.atamm-header__nav-footer,
.atamm-nav-backdrop {
display: none;
}
.atamm-header__actions { display: flex; }
.atamm-header__nav {
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
box-shadow: none;
padding: 0;
transform: none;
transition: none;
}
.atamm-header__nav > ul {
display: flex;
flex-direction: row;
gap: var(--space-3);
}
.atamm-header__nav > ul > li > a {
padding: 0.5rem 0;
font-size: var(--text-base);
border-radius: 0;
}
.atamm-header__nav > ul > li > a:hover,
.atamm-header__nav > ul > li > a:focus-visible { background: none; color: var(--color-accent); }
.atamm-header__nav > ul > li:not(:last-child) { border-block-end: 0; }
}
/* -------------------------------------------------------------------------
Hero
------------------------------------------------------------------------- */
.atamm-hero {
min-height: 92svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-base);
background-color: var(--color-primary);
background-image: radial-gradient(ellipse at top, var(--color-primary-dark), var(--color-primary) 70%);
background-size: cover;
background-position: center;
position: relative;
padding-block: var(--space-6);
overflow: hidden;
}
.atamm-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 26, 51, 0.35) 0%, rgba(7, 26, 51, 0.55) 55%, rgba(7, 26, 51, 0.85) 100%);
}
.atamm-hero::after {
content: "";
position: absolute;
inset-inline-end: -10%;
top: -20%;
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 70%);
pointer-events: none;
}
.atamm-hero__inner { position: relative; max-width: 760px; padding-inline: var(--space-2); }
.atamm-hero .atamm-kicker { color: var(--color-accent); }
.atamm-hero h1 { font-size: var(--text-4xl); color: var(--color-base); }
.atamm-hero p { font-size: var(--text-lg); opacity: 0.9; margin-block-end: var(--space-3); max-width: 560px; margin-inline: auto; }
.atamm-hero--sm { min-height: auto; padding-block: var(--space-6) var(--space-5); }
/* -------------------------------------------------------------------------
Trust bar
------------------------------------------------------------------------- */
.atamm-trust-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
text-align: center;
background: var(--color-base);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-block-start: calc(-1 * var(--space-6));
position: relative;
z-index: 2;
padding: var(--space-4) var(--space-3);
}
.atamm-trust-bar__item { padding-inline: var(--space-1); position: relative; }
.atamm-trust-bar__item:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-end: calc(-1 * var(--space-3) / 2);
top: 10%;
bottom: 10%;
width: 1px;
background: var(--color-border);
display: none;
}
.atamm-trust-bar__item svg { color: var(--color-accent); width: 2rem; height: 2rem; margin-bottom: var(--space-1); }
.atamm-trust-bar__item strong { display: block; font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); }
.atamm-trust-bar__item span { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 768px) {
.atamm-trust-bar { grid-template-columns: repeat(4, 1fr); }
.atamm-trust-bar__item:not(:last-child)::after { display: block; }
}
/* -------------------------------------------------------------------------
Service cards / grid
------------------------------------------------------------------------- */
.atamm-services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 640px) { .atamm-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .atamm-services-grid { grid-template-columns: repeat(4, 1fr); } }
.atamm-service-card {
display: flex;
flex-direction: column;
background: var(--color-base);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.atamm-service-card:hover {
box-shadow: var(--shadow-lg);
border-color: var(--color-accent);
transform: translateY(-6px);
}
.atamm-service-card__image {
aspect-ratio: 4 / 3;
object-fit: cover;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark) 55%, var(--color-accent) 130%);
}
.atamm-service-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.atamm-service-card__body h3 { font-size: var(--text-lg); }
.atamm-service-card__excerpt { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-end: var(--space-2); flex: 1; }
.atamm-service-card__link { color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); }
/* -------------------------------------------------------------------------
Why Atamm — icon cards
------------------------------------------------------------------------- */
.atamm-why { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.atamm-why__row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
text-align: start;
background: var(--color-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.atamm-why__row:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.atamm-why__icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent);
}
.atamm-section--alt .atamm-why__row { background: var(--color-base); }
@media (min-width: 640px) { .atamm-why { grid-template-columns: repeat(2, 1fr); } }
/* -------------------------------------------------------------------------
Testimonials — lightweight auto-scroll, no library
------------------------------------------------------------------------- */
.atamm-testimonials {
display: flex;
gap: var(--space-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block-end: var(--space-2);
scrollbar-width: none;
}
.atamm-testimonials::-webkit-scrollbar { display: none; }
.atamm-testimonial {
flex: 0 0 85%;
scroll-snap-align: start;
background: var(--color-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
position: relative;
}
.atamm-testimonial::before {
content: "\201C";
font-family: var(--font-heading);
font-size: 3.5rem;
line-height: 1;
color: var(--color-accent-soft);
display: block;
margin-block-end: -0.5rem;
}
.atamm-testimonial p { position: relative; }
.atamm-testimonial cite {
display: flex;
align-items: center;
gap: var(--space-1);
margin-block-start: var(--space-2);
font-style: normal;
font-weight: 700;
color: var(--color-primary);
font-size: var(--text-sm);
}
.atamm-testimonial cite::before {
content: attr(data-initial);
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-base);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
}
@media (min-width: 768px) { .atamm-testimonial { flex-basis: 45%; } }
@media (min-width: 1024px) { .atamm-testimonial { flex-basis: 30%; } }
/* -------------------------------------------------------------------------
CTA section
------------------------------------------------------------------------- */
.atamm-cta {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%);
color: var(--color-base);
text-align: center;
padding-block: var(--space-6);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.atamm-cta::before {
content: "";
position: absolute;
inset-inline-end: -15%;
top: -30%;
width: 50%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
pointer-events: none;
}
.atamm-cta > .container { position: relative; }
.atamm-cta h2 { color: var(--color-base); }
.atamm-cta p { color: rgba(255, 255, 255, 0.85); font-size: var(--text-lg); max-width: 480px; margin-inline: auto; margin-block-end: var(--space-3); }
/* -------------------------------------------------------------------------
Certification badges (About page)
------------------------------------------------------------------------- */
.atamm-badge-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.atamm-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-accent-soft);
color: var(--color-primary);
border-radius: 999px;
padding: 0.6rem 1.1rem;
font-weight: 700;
font-size: var(--text-sm);
}
.atamm-badge svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex-shrink: 0; }
/* -------------------------------------------------------------------------
Breadcrumbs
------------------------------------------------------------------------- */
.atamm-breadcrumbs { padding-block-start: var(--space-2); }
.atamm-breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.atamm-breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.atamm-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--color-border); }
.atamm-breadcrumbs a:hover { color: var(--color-accent); }
.atamm-breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }
/* -------------------------------------------------------------------------
Single service — icon grid + horizontal timeline
------------------------------------------------------------------------- */
.atamm-kicker {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
margin-block-end: var(--space-1);
}
/* Alternates a subtle background tint between sections for visual rhythm,
instead of every section sitting flush on the same white background. */
.atamm-section--tint {
background: var(--color-surface);
border-radius: var(--radius-lg);
}
.atamm-service-hero {
display: grid;
gap: var(--space-4);
align-items: center;
padding-block: var(--space-5);
}
.atamm-service-hero img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.atamm-service-hero p { color: var(--color-text-muted); font-size: var(--text-lg); }
@media (min-width: 768px) { .atamm-service-hero { grid-template-columns: 1fr 1fr; } }
.atamm-included-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
}
@media (min-width: 768px) { .atamm-included-grid { grid-template-columns: repeat(4, 1fr); } }
.atamm-included-item {
text-align: center;
background: var(--color-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-2);
}
.atamm-included-item img { width: 2.5rem; height: 2.5rem; margin-inline: auto; margin-block-end: var(--space-1); }
.atamm-included-item p { margin: 0; font-weight: 600; font-size: var(--text-sm); }
/* "What's Included" — single-column modern checklist (distinct from the
photo .atamm-included-grid the Gallery section still uses). */
.atamm-included-list {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 640px) { .atamm-included-list { grid-template-columns: repeat(2, 1fr); } }
.atamm-included-list__item {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--color-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.atamm-included-list__item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-accent);
transform: translateX(4px);
}
:dir(rtl) .atamm-included-list__item:hover { transform: translateX(-4px); }
.atamm-included-list__icon {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
}
.atamm-included-list__icon img { width: 1.5rem; height: 1.5rem; }
.atamm-included-list__label { font-weight: 600; }
.atamm-timeline {
display: flex;
flex-direction: column;
gap: var(--space-3);
counter-reset: step;
}
@media (min-width: 768px) {
.atamm-timeline { flex-direction: row; }
.atamm-timeline__step { flex: 1; text-align: center; position: relative; }
.atamm-timeline__step:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-start: 55%;
inset-inline-end: -45%;
top: 1.25rem;
height: 2px;
background: var(--color-border);
}
}
.atamm-timeline__step { display: flex; gap: var(--space-2); align-items: flex-start; }
@media (min-width: 768px) { .atamm-timeline__step { flex-direction: column; align-items: center; } }
.atamm-timeline__num {
counter-increment: step;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
position: relative;
z-index: 1;
}
.atamm-timeline__num::before { content: counter(step); }
/* -------------------------------------------------------------------------
WhatsApp floating button
------------------------------------------------------------------------- */
.wa-float {
position: fixed;
bottom: 1.5rem;
inset-inline-end: 1.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-base);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
opacity: 0;
transform: scale(0.8);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 999;
}
.wa-float.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa-float__icon { width: 1.75rem; height: 1.75rem; }
.wa-float::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--color-accent);
animation: wa-pulse 2.4s ease-out infinite;
z-index: -1;
}
@keyframes wa-pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
.wa-float::after { animation: none; }
.wa-float { transition: none; }
}
/* -------------------------------------------------------------------------
Footer
------------------------------------------------------------------------- */
.atamm-footer { background: var(--color-primary); color: var(--color-base); padding-block-start: var(--space-5); }
.atamm-footer__grid {
display: grid;
gap: var(--space-3);
padding-block-end: var(--space-4);
}
@media (min-width: 768px) { .atamm-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.atamm-footer h3 { color: var(--color-accent); font-size: 1rem; }
.atamm-footer a:hover { color: var(--color-accent); }
.atamm-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
.atamm-footer__social-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--color-base);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.atamm-footer__social-icon svg { width: 1.1rem; height: 1.1rem; }
/* Extra .atamm-footer prefix beats the generic `.atamm-footer a:hover`
color rule below, which would otherwise turn the icon gold-on-gold. */
.atamm-footer .atamm-footer__social-icon:hover {
background: var(--color-accent);
color: var(--color-primary-dark);
transform: translateY(-3px);
}
.atamm-footer__bottom {
border-block-start: 1px solid rgba(255, 255, 255, 0.15);
padding-block: var(--space-2);
font-size: 0.875rem;
text-align: center;
}
.atamm-footer__bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 768px) {
.atamm-footer__bottom-inner { flex-direction: row; justify-content: space-between; }
}
.atamm-footer__credit { opacity: 0.7; }
.atamm-footer__credit a { color: inherit; text-decoration: underline; }
.atamm-footer__credit a:hover { color: var(--color-accent); }
/* -------------------------------------------------------------------------
Contact page — two-column: intro/CTA/info (start) + hours/map card (end)
------------------------------------------------------------------------- */
.atamm-contact-grid {
display: grid;
gap: var(--space-4);
align-items: start;
}
@media (min-width: 900px) { .atamm-contact-grid { grid-template-columns: 3fr 2fr; gap: var(--space-5); } }
.atamm-contact__intro h1 { font-size: var(--text-3xl); }
.atamm-contact__intro > *:not(:last-child) { margin-block-end: var(--space-2); }
.atamm-contact__intro .atamm-btn { margin-block: var(--space-2); }
.atamm-contact__info {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block-start: var(--space-3);
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--color-border);
}
.atamm-contact__info-row {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
}
.atamm-contact__info-row svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--color-accent); }
.atamm-contact__info-row:hover a,
.atamm-contact__info-row a:hover { color: var(--color-accent); }
.atamm-contact__social {
margin-block-start: var(--space-3);
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--color-border);
}
.atamm-contact__social h2 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.atamm-social-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.atamm-social-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--color-surface);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.atamm-social-icon svg { width: 1.25rem; height: 1.25rem; }
.atamm-social-icon:hover {
background: var(--color-accent-soft);
color: var(--color-accent);
transform: translateY(-3px);
}
.atamm-contact__card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3);
}
.atamm-contact__card h2 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.atamm-contact__hours-row {
display: flex;
justify-content: space-between;
gap: var(--space-2);
padding-block: 0.6rem;
font-size: var(--text-sm);
}
.atamm-contact__hours-row:not(:last-child) { border-block-end: 1px solid var(--color-border); }
.atamm-contact__hours-row span:first-child { color: var(--color-text-muted); }
.atamm-contact__hours-row span:last-child { font-weight: 700; color: var(--color-primary); }
.atamm-contact__map { margin-block-start: var(--space-3); border-radius: var(--radius-md); overflow: hidden; }
.atamm-contact__map iframe { width: 100%; border: 0; aspect-ratio: 4 / 3; display: block; }
/* Shown in the info card in place of the map when no address is configured
yet, so the page still looks finished rather than leaving a gap. */
.atamm-placeholder-panel {
margin-block-start: var(--space-3);
border-radius: var(--radius-md);
aspect-ratio: 4 / 3;
background-image:
radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent 55%),
linear-gradient(135deg, var(--color-primary), var(--color-primary-dark) 70%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.85);
}
.atamm-placeholder-panel svg { width: 2.5rem; height: 2.5rem; }
/* -------------------------------------------------------------------------
Reusable image placeholder — used wherever an ACF image field is empty
(hero/service/gallery), so unset media never renders as a blank box.
------------------------------------------------------------------------- */
.atamm-placeholder-bg {
background-color: var(--color-primary);
background-image:
radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 50%),
linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 60%, var(--color-accent) 160%);
}