/* Adba Labs — components/bundle.css
The component layer of assets/site.css (AdbaLabs/adba-website-v1 @ rebuild/gcp-static-site 3d9439e).
Colour, spacing, radius, shadow and size values live in tokens.json and arrive as tokens.css
custom properties under the same names; this file never restates them.
Brand colours and typeface follow the master logo: mustard, maroon and green leaves; Poppins.
Dark mode is the [data-theme="dark"] token set (the site maps prefers-color-scheme onto it).
The form section of site.css is omitted: the site ships no forms (contact is mailto + phone). */
/* Type variables site.css's rules read. tokens.css declares the family as --font-sans and the
sizes as .h1…/.body classes; these keep the stylesheet's own --name contract. */
:root {
--font: var(--font-sans);
--fs-body: 1rem;
--lh-body: 1.65;
--fw-body: 400;
--fw-head: 600;
--lh-head: 1.2;
--fs-nav: 0.9375rem;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.75rem;
--fs-h4: 1.375rem;
--fs-h5: 1.125rem;
--fs-h6: 1rem;
--fs-small: 0.875rem;
--btn-fs: 1.0625rem;
}
[data-theme="dark"] { color-scheme: dark; }
/* ---------------------------------------------------------------------------
2 · RESET + BASE
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
/* body paints an explicit token background (never a bare transparent body) */
background-color: var(--surface);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* the body must never scroll sideways; wide content scrolls in its own box */
overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
/* ---------------------------------------------------------------------------
3 · ACCESSIBILITY PRIMITIVES
Defects A4 and A6 from BRAND.md 6.3.
--------------------------------------------------------------------------- */
/* A6 — the site had no skip link anywhere in 24 pages. */
.skip {
position: absolute;
left: var(--sp-2);
top: var(--sp-2);
z-index: 1000;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
background: var(--surface);
color: var(--brand-text);
font-weight: 700;
text-decoration: none;
box-shadow: var(--shadow-ui);
transform: translateY(-200%);
}
.skip:focus-visible { transform: translateY(0); }
/* A4 — the real ring was #ffa513 (1.97:1). This clears 3:1 in both modes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 2px;
}
/* Never remove a ring without replacing it. */
:focus:not(:focus-visible) { outline: none; }
@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;
}
}
/* ---------------------------------------------------------------------------
4 · LAYOUT — mobile-first
--------------------------------------------------------------------------- */
.site-head, #main, .site-foot { width: 100%; }
#main {
/* [INFERRED] section rhythm from the measured 5px grid; 60px is the
largest measured section padding. */
padding: var(--sp-5) var(--sp-3);
}
#main > article { max-width: var(--container); margin-inline: auto; }
@media (min-width: 768px) {
#main { padding: var(--sp-7) var(--sp-4); }
}
@media (min-width: 1024px) {
#main { padding: var(--sp-8) var(--sp-4); }
}
/* ---------------------------------------------------------------------------
5 · HEADER / NAV
The real header was an Elementor section with
data-settings={"sticky":"top","sticky_on":["desktop","tablet","mobile"]}
-> sticky on ALL breakpoints (index.html:567). Reproduced.
--------------------------------------------------------------------------- */
.site-head {
position: sticky;
top: 0;
z-index: 100;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: var(--surface);
border-bottom: 1px solid var(--border-soft);
}
/* A3 — the logo was a bare with no link on all 24 pages.
.brand is a real link and carries an accessible name in the markup. */
.brand {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none;
color: var(--text);
font-weight: 700; /* Poppins 700, the logo wordmark weight */
font-size: 1.125rem;
}
/* [CUSTOMIZER] #logo img{max-height:100px;width:auto}. Intrinsic 145x95. */
.brand img {
max-height: 100px;
width: auto;
}
@media (max-width: 767px) {
/* [INFERRED] 100px is tall for a phone header; scaled on the 145:95 ratio. */
.brand img { max-height: 60px; }
}
/* G9 — only ONE logo asset ever existed; there is no inverse variant.
Rather than invent brand artwork, keep a light chip behind it in dark mode
so the existing file stays legible. Reversible when a real asset exists. */
[data-theme="dark"] .brand img {
background: #ffffff;
padding: 4px 6px;
border-radius: var(--radius);
}
.site-head nav {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
align-items: center;
}
@media (min-width: 768px) {
.site-head nav { flex: 1 1 auto; justify-content: flex-end; }
}
/* Nav links: Poppins 15px / 500 in --text, with an :after underline
in the logo mustard on hover+active. Reproduced; the underline is decorative
so it may use --brand, but it is paired with a text-colour change so colour
is never the sole indicator. */
.site-head nav a {
position: relative;
padding: var(--sp-1) 0;
color: var(--text);
font-size: var(--fs-nav);
font-weight: 500;
text-decoration: none;
}
.site-head nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--brand);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.18s ease;
}
.site-head nav a:hover,
.site-head nav a[aria-current] { color: var(--brand-text); }
.site-head nav a:hover::after,
.site-head nav a[aria-current]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.site-head nav a::after { transition: none; }
}
/* ---------------------------------------------------------------------------
6 · TYPOGRAPHY
Headings are Poppins 600, the weight of the logo's "Labs", and step by size
on a 1.25 ratio. Body copy is Poppins 400.
--------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--sp-3);
font-family: var(--font);
font-weight: var(--fw-head);
line-height: var(--lh-head);
color: var(--text);
text-wrap: balance;
}
/* A1/A2 — index.html had ZERO
; ma-integration.html had TWELVE. The
target markup mandates exactly one
per page, and it is styled here.
Per BRAND.md 2.5: same family + weight as
, one size step larger.
The measured .page-title h1 colour was #ffa513 (1.97:1) — NOT reproduced
for a heading on white. Use .h1-eyebrow below for the amber treatment. */
h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-4); }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-6); }
h3 { font-size: var(--fs-h3); margin-top: var(--sp-5); }
h4 { font-size: var(--fs-h4); margin-top: var(--sp-4); }
h5 { font-size: var(--fs-h5); margin-top: var(--sp-4); }
h6 { font-size: var(--fs-h6); margin-top: var(--sp-4); text-transform: uppercase; letter-spacing: 0.3px; }
h1 + *, h2 + *, h3 + * { margin-top: 0; }
/* The measured amber page-title treatment, kept available but only at
display size where 3:1 suffices, and using the boundary-safe variant. */
.h1-eyebrow {
display: block;
color: var(--brand-ui);
font-size: var(--fs-h5);
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
margin-bottom: var(--sp-1);
}
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
/* [CUSTOMIZER] a{color:#ffa513} measured 1.97:1 — the single highest-traffic
AA failure on the site. Same hue, darkened to 4.52:1. Underlined so colour
is not the only signal. */
a {
color: var(--brand-text);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover { color: var(--accent); }
strong, b { font-weight: 600; }
small, .small { font-size: var(--fs-small); color: var(--text-muted); }
/* lists — icon-list was the 2nd most common component (514 instances) */
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
li { margin-bottom: var(--sp-1); }
li::marker { color: var(--brand-ui); }
/* 2 blockquote instances measured (ma-integration.html) */
blockquote {
margin: var(--sp-4) 0;
padding: var(--sp-3) var(--sp-4);
border-left: 4px solid var(--brand-ui);
background: var(--surface-2);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
color: var(--text);
}
blockquote p:last-child { margin-bottom: 0; }
hr {
margin: var(--sp-6) 0;
border: 0;
border-top: 1px solid var(--border-soft);
}
figure { margin: var(--sp-5) 0; }
figure img { border-radius: var(--radius-card); }
figcaption {
margin-top: var(--sp-2);
font-size: var(--fs-small);
color: var(--text-muted);
}
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius); }
/* Wide content scrolls in its OWN container so the body never scrolls
sideways. Required by the brief; applies to anything that can overflow. */
pre, .scroll-x, .table-wrap {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
pre {
padding: var(--sp-3);
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius-card);
}
/* ---------------------------------------------------------------------------
7 · TABLES — wrap in .table-wrap so the page never scrolls sideways
--------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
caption { text-align: left; color: var(--text-muted); font-size: var(--fs-small); padding-bottom: var(--sp-2); }
th, td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border-soft); }
th { font-weight: 700; background: var(--surface-2); }
/* ---------------------------------------------------------------------------
8 · BUTTONS
Six measured variants: 3 shapes x 2 colours [CUSTOMIZER].
Geometry from [PLUGIN] (the only measured button geometry).
G6: the filled-button LABEL colour was unarchived. Theme convention is
white, but white on #ffa513 is 1.97:1 and fails. The measured palette
already contains the answer: #333333 on #ffa513 is 6.40:1. So the primary
fill keeps its exact measured amber and takes a dark label.
--------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--btn-h);
padding: 0 var(--btn-px);
border: 1px solid transparent;
border-radius: var(--radius);
font-size: var(--btn-fs);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* primary — measured amber fill, dark label (6.40:1) */
.btn-primary {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-on);
}
.btn-primary:hover { background: var(--brand-ui); border-color: var(--brand-ui); color: var(--surface); }
/* ghost primary — [CUSTOMIZER] .btn-ghost-primary{color+border:#ffa513},
:hover{background-color:#ffa513}. Label uses the text-safe amber; the
border uses the 3:1 boundary-safe amber. */
.btn-ghost {
background: transparent;
border-color: var(--brand-ui);
color: var(--brand-text);
}
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
/* accent — [CUSTOMIZER] #c33636; white label measures 5.38:1 and PASSES,
so this variant is reproduced exactly as the site had it. */
.btn-accent {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-on);
}
.btn-accent:hover { filter: brightness(0.92); }
.btn-ghost-accent {
background: transparent;
border-color: var(--accent);
color: var(--accent);
}
.btn-ghost-accent:hover { background: var(--accent); color: var(--accent-on); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ---------------------------------------------------------------------------
10 · COMPONENTS recovered from markup + CSS
--------------------------------------------------------------------------- */
/* Card — geometry from the flip-box, the only fully-measured card in the
corpus: white face, 5px radius, and the ambient 40px/10px/5% halo. */
.card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: var(--sp-4);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* Service block — the most-used theme component (92 instances, 10 pages).
[CUSTOMIZER] .elementor-widget-themo-service-block .elementor-icon{color:#ffa513}
in the default view, and background-color:#ffa513 in the stacked view. */
.service-block { text-align: center; padding: var(--sp-4) var(--sp-3); }
.service-block .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--icon-disc);
height: var(--icon-disc);
margin-bottom: var(--sp-3);
border-radius: var(--radius-pill);
color: var(--brand-text); /* default view: amber icon */
border: 2px solid var(--brand-ui); /* framed view: amber border */
}
.service-block.stacked .icon {
background: var(--brand); /* stacked view: amber fill */
color: var(--brand-on);
border-color: transparent;
}
.service-block h3 { margin-top: 0; }
/* Logo tones — the three leaves. Add .maroon or .green to a service block or icon list;
the default is mustard. Fills take the real logo colour; text and rings take the
contrast-safe variant of the same hue. */
.service-block.maroon .icon { color: var(--accent); border-color: var(--accent); }
.service-block.maroon.stacked .icon { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.service-block.green .icon { color: var(--green-text); border-color: var(--green-ui); }
.service-block.green.stacked .icon { background: var(--green); color: var(--green-on); border-color: transparent; }
/* Icon list — 514 instances, 2nd most common component. */
.icon-list { list-style: none; padding-left: 0; }
.icon-list li {
display: flex;
gap: var(--sp-2);
align-items: flex-start;
margin-bottom: var(--sp-2);
}
.icon-list li::before {
content: "";
flex: 0 0 auto;
width: 0.5em;
height: 0.5em;
margin-top: 0.5em;
border-radius: var(--radius-pill);
background: var(--brand); /* decorative only */
}
/* Flip-box — fully measured, 24/24 pages.
front: #fff + 5px + halo; back: #ffa412 + same radius + same shadow.
NOTE #ffa412 is one digit off the brand #ffa513 (ΔE ~0.4) and is almost
certainly a typo for it. Implemented as --brand per BRAND.md 1.3; collapsing
the duplicate is a founder decision. White text on it measured 1.99:1, so
the back face takes the dark label. */
.flip { perspective: 1000px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.5s ease; }
.flip:hover .flip-inner, .flip:focus-within .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
padding: var(--sp-4);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
backface-visibility: hidden;
}
.flip-front { background: var(--surface); color: var(--text); }
.flip-back {
position: absolute;
inset: 0;
background: var(--brand);
color: var(--brand-on); /* 6.40:1, not white at 1.99:1 */
transform: rotateY(180deg);
}
/* Headings on the amber back face take its label colour, not --text (which is light in dark). */
.flip-back :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
/* [INLINE] .elementor-flip-box__layer__description{font-size:21px;font-weight:500} */
.flip-front .desc, .flip-back .desc { font-size: 1.3125rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
.flip-inner { transition: none; }
.flip:hover .flip-inner, .flip:focus-within .flip-inner { transform: none; }
.flip-back { position: static; transform: none; margin-top: var(--sp-3); }
}
/* Testimonial — [INLINE] .elementor-testimonial__footer{margin-top:-60px}
gives the overlapping avatar/footer treatment. */
.testimonial { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-4); }
.testimonial blockquote { margin: 0; border: 0; background: none; padding: 0; }
.testimonial .footer { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); align-items: center; }
.testimonial .footer img { width: 48px; height: 48px; border-radius: var(--radius-pill); }
.testimonial cite { font-style: normal; font-weight: 700; }
/* Toggle / accordion — [CUSTOMIZER] title, active title and icon all #ffa513. */
details {
border-bottom: 1px solid var(--border-soft);
padding: var(--sp-3) 0;
}
details > summary {
cursor: pointer;
font-size: var(--fs-h5);
font-weight: 600;
color: var(--brand-text); /* measured amber, text-safe variant */
list-style: none;
display: flex;
justify-content: space-between;
gap: var(--sp-3);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; color: var(--brand-text); font-weight: 400; }
details[open] > summary::after { content: "\2013"; }
details > summary + * { margin-top: var(--sp-3); }
/* Deep-maroon heading treatment — [INLINE] #640000 at 13.62:1, used on
.service-card h3 and .adba-section-title h1. */
.heading-deep { color: var(--deep); }
/* Simple responsive grid for card/service collections */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
/* ---------------------------------------------------------------------------
11 · FOOTER — [INFERRED]
G5: