, no | ). .table-wrap = mobile horizontal scroll (added
around every table by a the_content filter in functions.php). */
.table-wrap { overflow-x: auto; margin: 0 0 26px; }
.table-wrap table { margin: 0; }
/* gap above a table = perceived paragraph gap (26px margin + line leading reads
as ~40): text -> table border = 40 (Mikelis 2026-07-03, "bigger, match paragraphs") */
.prose p:has(+ .table-wrap) { margin-bottom: var(--space-10); } /* 40 */
.prose table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
margin: 0 0 26px;
font-family: var(--font-sans);
}
.prose th, .prose td {
border: 1px solid var(--line);
padding: 12px 14px;
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--text);
vertical-align: middle; /* center all cell content vertically (Mikelis 2026-07-03) */
text-align: left;
}
/* center ALL columns horizontally (Mikelis 2026-07-03, incl. the first);
!important beats the legacy inline text-align:right the old markup carries. */
.prose td, .prose th { text-align: center !important; }
.prose td p {
margin: 0;
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--text);
text-align: inherit !important;
}
.prose th, .prose tr:first-child td { background: var(--card-bg); }
/* last block carries no trailing margin into the section padding, so the gap to
the next section (cta-circle) equals the rhythm used on every other page */
.prose > :last-child { margin-bottom: 0; }
.related h2 { margin-bottom: var(--space-12); } /* 48 */
/* ---------------- LEGAL / PROSE PAGE (privatuma-politika etc.) ----------------
No-hero page (gets the body.light-header nav hairline). Reuses .crumb-d
(light breadcrumb) + .prose. Section vertical (.legal) lives in the RHYTHM block. */
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } /* 44 / 1.16 -> 1.15 */
.legal-updated {
font-family: var(--font-sans);
font-size: var(--fs-caption); /* 12.5 -> 13 */
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 18px;
padding-bottom: 36px;
border-bottom: 1px solid var(--line);
}
.legal .prose { margin-top: 44px; }
/* ---------------- CTA CIRCLE ---------------- */
.cta-circle {
background: var(--green-900);
border-radius: var(--r-2xl);
padding: 60px 56px;
display: grid;
grid-template-columns: 440px 1fr;
align-items: center;
gap: 24px;
position: relative;
overflow: visible;
min-height: 260px;
}
.cta-portrait {
display: block;
width: 440px;
height: 440px;
border-radius: 50%;
object-fit: cover;
object-position: 60% center;
position: relative;
overflow: hidden;
margin-top: -90px;
margin-bottom: -90px;
margin-left: -20px;
box-shadow: var(--shadow-portrait);
}
.cta-circle-body {
text-align: center;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cta-circle-body h2 {
color: var(--on-dark-strong);
font-size: var(--fs-h2);
margin: 0 0 40px;
line-height: var(--lh-snug);
}
.cta-circle-body .btn { margin: 0; }
/* ---------------- TEAM ---------------- */
.team h2 { margin-bottom: 0; text-align: left; font-size: var(--fs-h1); line-height: var(--lh-h1); flex-shrink: 0; }
.team-intro-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 48px;
}
.team-intro-row p {
max-width: 520px;
font-size: var(--fs-body);
}
.team-grid-8 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px; /* unified card gap (was 24) to match why/certs/blog on desktop (Mikelis 2026-06-17) */
}
/* birojs page: 6 employees read better as 3-per-row (2 clean rows) than the
homepage 4-col. Scoped to .team--page; a matching-specificity override at
<=760 (below) stops this from leaking past the mobile breakpoint. */
.team--page .team-grid-8 { grid-template-columns: repeat(3, 1fr); }
.team-card {
aspect-ratio: 3 / 4;
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
}
.team-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.team-card-name {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 16px 18px 18px;
color: var(--on-dark-strong);
font-weight: 500;
font-size: var(--fs-body);
background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.team-card-name .nm { font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-heading); display: block; }
.team-card-name .rl { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--on-photo-muted); margin-top: 3px; display: block; }
.team-card-cta {
background: transparent;
color: var(--green-900);
padding: 0;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
text-align: center;
gap: 0;
overflow: visible;
border-radius: 0;
}
.team-card-cta-top {
flex: 3;
background: var(--orange);
color: var(--on-dark-strong);
padding: 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 36px;
font-family: 'Inter', sans-serif;
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
font-weight: 400;
border-radius: var(--r-lg);
}
.team-card-cta-text {
margin: 0;
color: var(--on-dark-strong);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
}
.team-card-cta-bottom {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
padding: 0;
}
.team-card-cta .btn {
height: 44px;
padding: 0 28px;
font-size: var(--fs-body-sm);
background: transparent;
color: var(--on-dark-strong);
border: 1.5px solid #fff;
}
.team-card-cta .btn:hover {
background: #fff;
color: var(--orange);
border-color: var(--on-dark-strong);
}
/* birojs blog-CTA card: gray (like blog cards) instead of orange. Text -> dark
prose; button -> the standard solid orange (white-outline only read on orange).
Scoped so the homepage orange CTA card is untouched. Mikelis 2026-06-17. */
.team-card-cta--blog .team-card-cta-top { background: var(--green-900); }
.team-card-cta--blog .team-card-cta-text { color: var(--on-dark-strong); }
.team-card-cta--blog .btn { background: var(--orange); color: var(--on-dark-strong); border: none; }
.team-card-cta--blog .btn:hover { background: var(--orange-hover); color: var(--on-dark-strong); border: none; }
.team h2 .accent { color: var(--orange); }
/* ---------------- WHY ---------------- */
.why h2 { margin-bottom: 56px; }
.why h2 .accent { color: var(--orange); }
.why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.why-card {
background: var(--card-bg);
border-radius: var(--r-xl);
padding: 40px 44px;
}
.why-card-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.why-check {
width: 36px;
height: 36px;
background: var(--green-900);
border-radius: var(--r-sm);
display: grid;
place-items: center;
flex-shrink: 0;
}
.why-check svg { width: 20px; height: 20px; color: var(--on-dark-strong); }
.why-card h3 {
font-size: var(--fs-h4);
line-height: var(--lh-heading);
color: var(--green-900);
flex: 1;
}
.why-card p { font-size: var(--fs-body-sm); }
/* ---------------- FAQ ---------------- */
.faq-wrap { max-width: 880px; margin: 0 auto; }
.faq h2 { margin-bottom: var(--space-16); } /* 36 -> 64: match the standard h2->content gap (e.g. other-services heading), all faq instances */
/* standalone FAQ page (BUJ): stacked groups, each its own list + optional
smaller sub-heading. (Mock's .faq-group-kicker is unused in the body - dropped.) */
.faq-group { margin-bottom: var(--space-20); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: var(--fs-h3); line-height: var(--lh-heading); } /* 28 = the .prose h2 of the privatuma template (was fs-h2 35; Mikelis 2026-07-15) */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%;
background: none;
border: none;
padding: 28px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
cursor: pointer;
text-align: left;
font-family: 'Lora', serif;
color: var(--green-900);
font-weight: 600;
font-size: var(--fs-faq-q);
line-height: var(--lh-snug);
transition: color .15s ease;
}
/* title + toggle light up orange on hover and while the item is open */
.faq-q:hover,
.faq-item.open .faq-q { color: var(--orange); }
.faq-toggle {
width: 22px;
height: 22px;
color: inherit;
flex-shrink: 0;
position: relative;
}
.faq-toggle::before, .faq-toggle::after {
content: "";
position: absolute;
background: currentColor;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 22px; height: 1.5px; }
.faq-toggle::after { width: 1.5px; height: 22px; transition: transform .2s ease; }
.faq-item.open .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.faq-a-inner {
padding: 0 0 28px;
}
.faq-a p { font-size: var(--fs-body-sm); max-width: 720px; }
.faq-item.open .faq-a { max-height: 400px; }
/* ---------------- BIG CTA ---------------- */
.big-cta-inner { max-width: 880px; margin: 0 auto; }
.big-cta {
background: var(--green-900);
border-radius: var(--r-2xl);
padding: 72px 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.big-cta h2 {
color: var(--on-dark-strong);
font-size: var(--fs-h2);
margin: 0 0 40px;
line-height: var(--lh-snug);
}
.big-cta .btn { margin: 0; }
/* ---------------- FOOTER ---------------- */
footer {
background: var(--green-900);
color: var(--on-dark);
position: relative;
}
/* Footer brand lockup - own classes, deliberately NOT .nav-logo
(header mobile styling once bled onto the footer via the shared class) */
.f-logo { display: flex; align-items: center; gap: 10px; padding: 0; }
.f-logo-mark { width: 22px; height: 28px; background: url('assets/logo-mark.svg') center / contain no-repeat; }
.f-logo-text {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: 0.08em;
font-size: var(--fs-h6);
color: var(--on-dark);
line-height: 1;
}
.f-logo-sub { font-size: var(--fs-micro); letter-spacing: 0.25em; color: var(--on-dark-label); margin-top: 3px; }
.f-tagline {
font-family: var(--font-sans); /* locked look is Inter (was an inline override in the mock) */
font-size: var(--fs-body-lg);
line-height: var(--lh-lead);
color: var(--on-dark);
font-weight: 400;
max-width: 360px;
margin: 0;
}
.f-assoc-row { display: flex; gap: 26px; align-items: center; }
.f-assoc {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
opacity: 0.92;
transition: opacity .15s ease;
}
.f-assoc:hover { opacity: 1; }
.f-assoc img { display: block; }
.f-assoc.circle img { height: 56px; width: auto; }
.f-assoc.wide img { height: 56px; width: auto; }
/* -------- VARIANT 1: Refined classic -------- */
footer.footer-v1 { background: var(--green-900); color: var(--on-dark); }
.f1-main {
padding: 80px 0; /* desktop: bottom gap (socials -> © bar) = top gap = 80, symmetric (was 56) (Mikelis 2026-06-18) */
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
gap: 56px;
}
.f1-brand { display: flex; flex-direction: column; gap: 22px; }
.f1-assoc-label {
font-family: 'Inter', sans-serif;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-label);
line-height: 1;
margin-top: 10px;
margin-bottom: -3px;
}
.f1-col-label {
font-family: 'Inter', sans-serif;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-label);
margin-bottom: 18px;
line-height: 1;
}
.f1-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.f1-col a {
font-size: var(--fs-body);
line-height: var(--lh-snug);
color: var(--on-dark);
transition: color .15s ease;
}
.f1-col a:hover { color: var(--orange); }
.f1-contact { display: flex; flex-direction: column; gap: 18px; font-size: var(--fs-body); }
.f1-contact .addr { color: var(--on-dark); font-size: var(--fs-body); line-height: var(--lh-lead); max-width: 240px; }
.f1-contact a { color: var(--on-dark); transition: color .15s ease; line-height: 1; display: inline-block; width: max-content; }
.f1-contact a:hover { color: var(--orange); }
.f1-socials { display: flex; gap: 10px; margin-top: 26px; }
.f1-socials a {
width: 38px; height: 38px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--on-dark-strong);
transition: background .15s, border-color .15s;
}
.f1-socials a:hover { background: var(--orange); border-color: var(--orange); }
.f1-socials svg { width: 16px; height: 16px; }
.f1-bottom {
background: var(--surface-dark);
color: var(--on-dark-label);
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.05);
}
.f1-bottom-inner {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-caption);
line-height: var(--lh-snug);
}
.f1-bottom a { color: var(--on-dark-label); }
.f1-bottom a:hover { color: var(--orange); }
.f1-bottom-links { display: flex; gap: 32px; }
.f1-credit { white-space: nowrap; }
.f1-credit-name { color: var(--orange); }
/* ---------------- COOKIE BAR (bottom, informational; Mikelis 2026-07-03) ---------------- */
.cookie-bar[hidden] { display: none; } /* display:flex below would defeat the hidden attribute (the Sapratu bug, Mikelis 2026-07-03) */
.cookie-bar {
position: fixed;
inset: auto 0 0 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 22px;
padding: 14px 32px; /* horizontal = .container padding, so the bar aligns with page content (Mikelis 2026-07-03) */
background: var(--bg); /* white (Mikelis 2026-07-03; was card-bg gray) */
color: var(--green-900); /* heading color (Mikelis 2026-07-03) */
border-top: 1px solid var(--line);
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}
.cookie-bar p { margin: 0; color: var(--green-900); font-size: var(--fs-body); } /* heading color at body size; the global p rule would paint it muted */
.cookie-bar-actions { display: flex; align-items: center; gap: 14px; }
/* both buttons share one size (Mikelis 2026-07-03) */
.cookie-ok, .cookie-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 122px;
height: 36px;
padding: 0 18px;
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
font-weight: 600;
border: 0;
border-radius: var(--r-md);
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease;
}
.cookie-ok { color: var(--on-dark-strong); background: var(--orange); }
.cookie-ok:hover { background: var(--orange-hover); }
.cookie-more { color: var(--on-dark-strong); background: var(--green-900); }
.cookie-more:hover { background: var(--green-800); }
/* ---------------- ALGU KALKULATORS (locked design export 2026-07-09;
page-scoped hero override .hero--calc = flat gray, dark text) ---------------- */
/* flat WHITE hero with dark text (Mikelis 2026-07-14; gray tried and reverted
same day) - no photo, no overlay; the same white continues through .calc so
hero + page read as one surface down to the footer */
.hero--calc { background: var(--bg); }
.hero--calc::before { background: none; }
.hero--calc .hero-content h1 { color: var(--green-900); }
.hero--calc .hero-content p { color: var(--text-muted); }
.hero--calc .crumb, .hero--calc .crumb a { color: var(--text-muted); }
.hero--calc .crumb a:hover { color: var(--orange); }
.hero--calc .crumb .here { color: var(--green-900); }
/* "Atjaunots" meta line right under the hero H1 - the legal-updated pattern
(selector outweighs .hero--inner .hero-content p so caption size wins) */
.hero--inner .hero-content .hero-updated {
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 22px;
}
/* hero + section are ONE gray surface, so the hero->card gap is measured ink to
ink (lead text -> bubble). Hero bottom already contributes 102px box (pb 80 +
line slack, pixel-measured 2026-07-14); +8 = 110 box, reading 120 ink with the
lead's ~10px bottom line-leading (the hero-lead comp used site-wide). */
/* desktop rhythm = the nav->breadcrumb gap, INK-measured (2026-07-14): the
crumb box carries ~7px above its text, so the reference reads 105+7 = 112.
Top: hero bottom contributes 102 box; the lead carries ~10px bottom leading
-> 102+10 reads the same 112. Bottom: hard edge to hard edge = flat 112. */
.calc { background: var(--bg); padding: 0 0 112px; }
.calc + footer { margin-top: 0; } /* gray runs straight into the footer; bubble->footer gap = the section padding alone */
.calc-grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 28px;
align-items: stretch;
}
/* two floating bubbles (Mikelis 2026-07-14): inputs card DARK GREEN (surface-dark),
orange result beside it; equal-height via the grid's stretch. The green LINKS to
the orange: a full-height extension (::after) runs from under the green's right
corners across the 28px gap to r-xl under the orange, so the green's right side
disappears beneath the orange bubble, which paints on top with its full outline. */
/* z-index 0 makes the card a stacking context so the -1 extension paints above
the section background but BELOW the card's text (a positioned ::after would
otherwise cover in-flow content - it clipped the mobile form note) */
/* interior top/bottom 59 (top = the kontakti Rekvizīti bubble, bottom matched
to it per Mikelis 2026-07-14), sides 42; align-self start stops the grid
stretch so the bottom padding is real (was a 186px stretch slack) */
.calc-card { position: relative; z-index: 0; background: var(--surface-dark); border-radius: var(--r-xl); padding: 59px 42px; align-self: start; }
.calc-card::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc(100% - var(--r-xl));
width: calc(28px + 2 * var(--r-xl));
background: var(--surface-dark);
}
/* orange runs to the footer (Mikelis 2026-07-14, "as before"): the stretched
grid item grows 112 down through the section's bottom padding via negative
margin - values stay exactly where they are, the growth is empty orange.
Bottom corners squared where it meets the footer. */
.calc-result { position: relative; z-index: 1; margin-bottom: -112px; }
.calc-card-title { font-size: var(--fs-h4); margin-bottom: 44px; color: var(--on-dark-strong); } /* heading -> first label = 44, the kontakti form-card gap (was 26; Mikelis 2026-07-14) */
.calc-form { display: flex; flex-direction: column; gap: 20px; }
.calc-field { display: flex; flex-direction: column; gap: 14px; }
.calc-label {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-accent);
}
.calc-input-wrap { position: relative; }
.calc-input {
width: 100%; height: var(--btn-height); padding: 0 64px 0 16px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
appearance: textfield; -moz-appearance: textfield;
}
.calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(223,60,39,0.12); }
.calc-input-unit {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-muted);
pointer-events: none;
}
.calc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-seg button {
height: 44px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--bg); color: var(--green-900);
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500;
cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.calc-seg button:hover { border-color: var(--orange); color: var(--orange); }
.calc-seg button.active { background: var(--orange); border-color: var(--orange); color: var(--on-dark-strong); }
/* longer seg labels (autoratlidzibas "Kolektīvā organizācija") may wrap */
.calc-seg--wrap button { height: auto; min-height: var(--btn-height); padding: 8px 12px; line-height: var(--lh-snug); }
/* mode-dependent blocks toggle via the hidden attribute - it must beat the
display:flex the calc classes set (autoratlidzibas two-mode UI) */
.calc [hidden] { display: none; }
.calc-step { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: stretch; }
.calc-step button {
height: 44px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--bg); color: var(--green-900);
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-tight);
cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.calc-step button:hover { border-color: var(--orange); color: var(--orange); }
.calc-step button:disabled { opacity: 0.35; pointer-events: none; }
.calc-step-val {
display: grid; place-items: center; height: 44px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; color: var(--green-900);
font-variant-numeric: tabular-nums;
}
.calc-form-note { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--on-dark-muted); margin-top: 5px; } /* = the kontakti .ck-consent top margin (same fine-print role; was the export's 2) */
.calc-result { background: var(--orange); border-radius: var(--r-xl); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 40px 42px 107px; display: flex; flex-direction: column; } /* bottom corners squared where it meets the footer (the shorthand would reset the earlier per-corner rule); pb 107 + the disclaimer's ~5px bottom leading = the 112 rhythm above the footer (2026-07-14) */
.calc-result-label {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-strong); margin-bottom: 14px;
}
.calc-neto {
font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em;
font-size: var(--fs-price-xl); line-height: var(--lh-tight); color: var(--on-dark-strong);
font-variant-numeric: tabular-nums;
}
.calc-neto .suf { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: 0.04em; color: var(--on-dark-strong); margin-left: 6px; vertical-align: 4px; }
.calc-rows { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,0.30); display: flex; flex-direction: column; gap: 14px; } /* symmetric around the divider (was 32/24); 0.30 white = the total-row divider, one divider color inside the bubble (was the export's 0.12, near-invisible on orange; Mikelis 2026-07-14) */
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.calc-row .k { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--on-dark-strong); }
.calc-row .v { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; color: var(--on-dark-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-employer { background: rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 22px 24px; margin-top: 28px; }
.calc-employer .lbl {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-strong); display: block; margin-bottom: 10px;
}
.calc-employer-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.calc-employer-row .k { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--on-dark-strong); }
.calc-employer-row .v { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; color: var(--on-dark-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-employer-row.total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.30); } /* symmetric around the divider (was 8/12; Mikelis 2026-07-14) */
.calc-employer-row.total .k { font-weight: 600; color: var(--on-dark-strong); }
.calc-employer-row.total .v { font-family: var(--font-serif); font-size: var(--fs-h4); letter-spacing: -0.01em; font-weight: 700; } /* Lora 700 IS loaded (header.php); first serif use of it - the rest of the scale sits at 600 */
.calc-disclaimer { margin-top: 24px; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--on-dark-strong); }
/* ---------------- ABOUT-SERVICE - editorial prose + process sidebar ---------------- */
.prose-h {
font-family: var(--font-serif);
font-weight: 600;
color: var(--green-900);
letter-spacing: -0.01em;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
}
.prose-body p {
font-family: var(--font-serif);
color: var(--text-prose);
font-size: var(--fs-lead);
line-height: var(--lh-prose);
font-weight: 400;
}
.prose-body p + p { margin-top: 1.1em; }
.aboutA { background: var(--bg); } /* verticals live in the RHYTHM block */
.aboutA-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 96px;
align-items: start;
}
.aboutA-left { max-width: 560px; }
.aboutA-intro { margin-bottom: 0; }
/* vertical process column (right side) */
.svc-process { position: relative; padding-top: 4px; }
.svc-process-eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 12px;
display: block;
}
.svc-process-title {
font-family: var(--font-serif);
color: var(--green-900);
font-weight: 600;
font-size: var(--fs-h3); /* 26 -> 28 snap (DESIGN-SYSTEM §2.1) */
line-height: var(--lh-heading);
letter-spacing: -0.01em;
margin-bottom: 36px;
}
.svc-steps { list-style: none; padding: 0; margin: 0; position: relative; }
.svc-steps::before {
content: "";
position: absolute;
left: 17px;
top: 14px;
bottom: 14px;
width: 1px;
background: var(--line);
}
.svc-step {
display: grid;
grid-template-columns: 36px 1fr;
gap: 22px;
align-items: start;
padding: 0 0 28px;
position: relative;
}
.svc-step:last-child { padding-bottom: 0; }
.svc-step .dot {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: var(--fs-caption-sm);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--orange);
position: relative;
z-index: 1;
flex-shrink: 0;
}
.svc-step .body { padding-top: 6px; }
.svc-step .verb {
font-family: var(--font-serif);
color: var(--green-900);
font-weight: 600;
font-size: var(--fs-h5);
line-height: var(--lh-heading);
letter-spacing: -0.01em;
margin-bottom: 6px;
display: block;
}
.svc-step .detail {
font-family: var(--font-sans);
color: var(--text-muted);
font-size: var(--fs-body-sm);
line-height: var(--lh-body); /* body-sm always 1.6 (Mikelis, 2026-06-11) */
display: block;
}
/* ---------------- ABOUT-SERVICE - crown variant (buvnieciba page) ----------------
Editorial prose beside a vertical green CTA card whose round portrait crowns
its top edge. Section vertical (.aboutA) lives in the RHYTHM block; only the
grid + card component rules here. Only the locked 'crown' variant is shipped -
the mock's rail/twin layouts + the .s3-switch chooser are discarded. */
.s3-crown-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
gap: var(--space-18);
align-items: start;
}
.vcta {
background: var(--green-900);
border-radius: var(--r-2xl); /* 18 -> token */
color: var(--on-dark-strong);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.vcta-portrait {
display: block;
border-radius: 50%;
object-fit: cover;
object-position: 60% center;
flex-shrink: 0;
box-shadow: var(--shadow-portrait);
}
.vcta h3 {
color: var(--on-dark-strong);
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--fs-h3); /* 27 -> 28 snap (DESIGN-SYSTEM §2.1) */
line-height: var(--lh-snug);
letter-spacing: -0.01em;
}
.vcta .btn { margin: 0; }
/* desktop: body wrapper dissolves so portrait/h3/btn are direct flex children
of .vcta (crown column, gap 26). On tablet/mobile it becomes the right/lower
text column so the card can mirror the homepage .cta-circle responsive look. */
.vcta-body { display: contents; }
/* crown geometry: portrait overhangs the card's top edge. Raw px is component
geometry (negative-margin overhang), not section rhythm or tokenizable
type/color/radius - same exception class as .cta-portrait. */
.vcta-crown {
align-self: start;
margin-top: 96px; /* reserves space above for the overhanging portrait */
padding: 0 40px 52px;
gap: 26px;
}
.vcta-crown .vcta-portrait {
width: 200px;
height: 200px;
margin-top: -96px; /* pulls the portrait up over the card's top edge */
margin-bottom: 6px;
}
/* ---------------- PRICING (service pages) ---------------- */
.pricing { background: var(--bg); } /* verticals live in the RHYTHM block */
.pxC-plinth { background: transparent; color: var(--green-900); padding: 0; }
.pxC-plinth .head { margin-bottom: 56px; max-width: 760px; }
.pxC-plinth .head h2 {
font-family: var(--font-serif);
color: var(--green-900);
font-weight: 600;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
margin-bottom: 22px;
letter-spacing: -0.01em;
}
.pxC-plinth .head p {
font-family: var(--font-serif);
color: var(--text-prose);
font-size: var(--fs-lead);
line-height: var(--lh-prose);
max-width: 720px;
font-weight: 400;
}
.pxC-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid var(--green-900);
}
.pricing-B .pxC-grid { grid-template-columns: repeat(5, 1fr) 1.2fr; }
.pxC-col {
padding: 48px 24px 48px;
border-right: 1px solid var(--line);
display: grid;
grid-template-rows: auto 1fr auto;
}
.pxC-col:last-child { border-right: none; }
.pxC-col .name {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
align-self: start;
}
.pxC-col .price {
font-family: var(--font-serif);
font-variant-numeric: tabular-nums;
color: var(--green-900);
letter-spacing: -0.01em;
font-weight: 500;
font-size: var(--fs-h1); /* tier-4's 46 absorbed into the 44 baseline (DESIGN-SYSTEM §2.3) */
line-height: 1;
align-self: center;
padding: 32px 0;
}
.pxC-col .price .suf {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow); /* 11.5 -> 11 snap */
color: var(--text-muted);
letter-spacing: 0.04em;
margin-left: 6px;
font-weight: 400;
vertical-align: 4px;
}
.pxC-col .meta { display: flex; flex-direction: column; gap: 16px; align-self: end; }
.pxC-col .meta .lbl {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
display: block;
margin-bottom: 6px;
}
.pxC-col .meta .val {
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
color: var(--green-900);
line-height: var(--lh-body); /* body-sm always 1.6 (Mikelis, 2026-06-11) */
min-height: 40px;
}
/* top-tier emphasis - by class, never :nth-child raw px (DESIGN-SYSTEM §2.3) */
.pxC-col--xl .price { font-size: var(--fs-price-xl); font-weight: 600; }
/* "Liels" - individually priced 6th column on orange */
.lielsB {
padding: 48px 28px 48px;
display: grid;
grid-template-rows: auto 1fr auto;
position: relative;
background: var(--orange);
}
.lielsB .name {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-strong);
align-self: start;
}
.lielsB .price-slot {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: var(--fs-h3); /* 30 -> 28 snap (DESIGN-SYSTEM §2.3) */
color: var(--on-dark-strong);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
align-self: center;
padding: 32px 0;
}
.lielsB .meta { display: flex; flex-direction: column; gap: 16px; align-self: end; }
.lielsB .meta .lbl {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
display: block;
margin-bottom: 6px;
color: var(--on-dark-strong);
}
.lielsB .meta .val {
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
line-height: var(--lh-body); /* body-sm always 1.6 (Mikelis, 2026-06-11) */
color: var(--on-dark-strong);
min-height: 40px;
}
.pxC-footnote {
margin-top: 56px;
color: var(--text-muted);
font-family: var(--font-sans);
font-size: var(--fs-body-sm); /* locked look is 14 (was an inline style in the mock over a 12.5 rule) */
/* body-sm text ALWAYS uses --lh-body 1.6 - no exceptions (Mikelis,
2026-06-11; extended same day to step details + pricing meta vals).
The mock's scattered 1.45/1.55 values were inconsistencies. */
line-height: var(--lh-body);
max-width: 880px;
}
/* ---------------- OTHER SERVICES (4-col cross-link grid, service pages) ---------------- */
.other-services .services-heading { max-width: 900px; margin-bottom: 64px; }
.services-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 56px 40px; /* separate case: text sits OUTSIDE the image bubble, needs a roomier gap (Mikelis 2026-06-17) */
}
.services-grid-4 .service h3 { margin-bottom: 16px; font-size: var(--fs-h5); }
.services-grid-4 .service p { max-width: 340px; }
.services-grid-4 .service-image {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
background-size: cover;
background-position: center;
margin-bottom: 28px;
}
/* service cards as links - shared hover, homepage grid AND service-page grid
(Mikelis, 2026-06-10: homepage cards react the same as inner-page ones) */
a.service { display: block; color: inherit; text-decoration: none; }
a.service .service-image { transition: transform .25s ease; }
a.service:hover .service-image { transform: translateY(-4px); }
a.service:hover h3 { color: var(--orange); }
/* ---------------- ABOUT (birojs) - prose + portrait ---------------- */
.about { background: var(--bg); } /* verticals live in the RHYTHM block */
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 88px;
align-items: start;
}
.about-left { max-width: 600px; }
.about-left h2, .aboutA-left h2 { margin-bottom: var(--space-6); } /* "Par mums" / "Par pilnu uzskaiti" heading -> prose gap (canonical 24px) */
/* figure is the positioning context for the name overlay; radius+overflow
here so the caption gradient clips to the rounded corners */
.about-figure { width: 100%; position: relative; border-radius: var(--r-lg); overflow: hidden; }
.about-portrait {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
/* name/role overlay reuses .team-card-name (same on-photo caption component) */
/* ---------------- QUOTE BAND (full-bleed pull-quote, birojs) ---------------- */
.quote-band {
position: relative;
min-height: 440px;
display: flex;
align-items: center;
overflow: hidden;
isolation: isolate;
background-image: url('assets/corsax-birojs-citats.jpg');
background-size: cover;
background-position: center 60%;
background-attachment: fixed; /* photo stays put while the page scrolls past (Mikelis 2026-07-15) */
}
/* touch devices: iOS Safari mis-renders fixed+cover (sizes the photo to the
whole document) - fall back to normal scroll there */
@media (hover: none) {
.quote-band { background-attachment: scroll; }
}
.quote-band::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(15,40,35,.82) 0%, rgba(15,40,35,.72) 100%);
}
.quote-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 56px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.quote-band .rule { width: 48px; height: 3px; background: var(--orange); margin-bottom: 30px; }
.quote-band .q {
font-family: var(--font-serif);
color: var(--on-dark-strong);
font-weight: 500;
letter-spacing: -0.01em;
max-width: 920px;
font-size: var(--fs-h3); /* 29 -> 28 snap (DESIGN-SYSTEM §2.1) */
line-height: var(--lh-lead);
}
/* ---------------- CERTIFICATES (birojs) ---------------- */
.certs-head { max-width: 720px; margin-bottom: 56px; }
.certs-head h2 { margin-bottom: 18px; }
.certs-head p {
font-family: var(--font-serif);
font-size: var(--fs-lead); /* 18 -> 19 snap (DESIGN-SYSTEM §2.2) */
line-height: var(--lh-prose); /* 1.7 -> 1.75 snap */
color: var(--text-prose);
}
.certs-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.cert { display: flex; flex-direction: column; gap: 18px; }
.cert-doc {
aspect-ratio: 3 / 4;
border: 1px solid var(--line);
border-radius: var(--r-md); /* 10 -> 8 snap (DESIGN-SYSTEM §5.1) */
/* paper tone behind the scan: mock's #fcfcfb absorbed into --card-bg */
background-color: var(--card-bg);
overflow: hidden;
}
.cert-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.cert-caption .ttl {
font-family: var(--font-serif);
font-size: var(--fs-h5);
font-weight: 600;
color: var(--green-900);
line-height: var(--lh-snug);
}
.cert-caption .org {
font-family: var(--font-sans);
font-size: var(--fs-body);
color: var(--text-muted);
margin-top: 6px;
}
/* ---------------- CONTACT (Kontakti page) ----------------
Source: clients/corsax/Kontakti.html (locked mock). Section vertical lives
in the RHYTHM block; only component rules here. Tokenized per DESIGN-SYSTEM.
Snaps: radius 10->8 (--r-md), line-height 1.45->1.55 (--lh-lead). */
.ck-contacts { display: flex; flex-direction: column; gap: 26px; }
.ck-contact { display: flex; align-items: flex-start; gap: 16px; }
.ck-contact > div { flex: 1 1 auto; min-width: 0; }
.ck-contact-ic {
width: 46px; height: 46px; flex-shrink: 0;
border-radius: var(--r-md); /* 10 -> 8 snap */
background: var(--bg); /* white tile + orange icon, on the orange info card (Mikelis 2026-06-17) */
display: grid; place-items: center; color: var(--orange);
}
.ck-contact-ic svg { width: 21px; height: 21px; }
.ck-contact-k {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.ck-contact-v { font-size: var(--fs-body); line-height: var(--lh-lead); color: var(--green-900); font-weight: 500; } /* lh 1.45 -> 1.55 snap */
.ck-contact-v a { transition: color .15s ease; }
.ck-contact-v a:hover { color: var(--orange); }
/* form (shared with template-parts/contact-form.php) */
.ck-form { display: flex; flex-direction: column; gap: 20px; }
.ck-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ck-field { display: flex; flex-direction: column; gap: 14px; } /* label->input gap 9->14 on DESKTOP (+5px, Mikelis 2026-06-17); tablet/mobile restored to 9 in the 1024 block. Shared form: applies to kontakti + kontaktforma. */
.ck-label {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
}
.ck-input, .ck-textarea {
width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ck-input { height: var(--btn-height); padding: 0 16px; }
.ck-textarea { min-height: 148px; padding: 14px 16px; line-height: var(--lh-lead); resize: vertical; } /* lh 1.55 */
.ck-input::placeholder, .ck-textarea::placeholder { color: var(--input-placeholder); }
.ck-input:focus, .ck-textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(223,60,39,0.12); }
.ck-form .btn { align-self: flex-start; margin-top: 4px; }
/* by-sending consent notice under the submit button (on the green bubble -> light) */
.ck-consent { margin-top: 5px; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--on-dark-label); max-width: 520px; } /* +5 over the form's 20px gap -> 25px button->notice; color matches the footer copyright strip (--on-dark-label) */
.ck-consent a { color: var(--on-dark-strong); text-decoration: underline; text-underline-offset: 2px; }
.ck-consent a:hover { color: var(--orange); }
/* honeypot: off-screen, NOT display:none (some bots skip those) */
.ck-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* inline submit error (handler PRG-redirects back with ?cf_error=...) */
.ck-form-error {
font-size: var(--fs-body); color: var(--orange); font-weight: 500;
padding: 14px 16px; border: 1px solid var(--orange); border-radius: var(--r-md);
background: rgba(223,60,39,0.06);
}
/* map */
.ck-map { width: 100%; border: 0; display: block; border-radius: var(--r-lg); background: var(--card-bg); }
/* requisites */
.ck-req-list { display: flex; flex-direction: column; }
.ck-req-item { display: grid; grid-template-columns: 160px 1fr; column-gap: 20px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.ck-req-item:last-child { border-bottom: none; }
.ck-req-k {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); line-height: var(--lh-lead); /* 1.45 -> 1.55 */
padding-top: 2px; /* optical midpoint between cap-top and baseline align (label 11 vs value 15) */
}
.ck-req-v { font-size: var(--fs-body); line-height: var(--lh-lead); color: var(--green-900); font-weight: 500; }
/* card shell */
.ck-card { background: var(--card-bg); border-radius: var(--r-xl); padding: 40px 42px; }
.ck-card-title { font-size: var(--fs-h4); margin-bottom: 26px; }
/* ---- Green form bubble (Kontakti + Kontaktforma FORM cards) ----
NET-NEW, freehand 2026-06-17 (Mikelis) - diverges from the locked white-card
mock. All viewports. Dark green bg -> heading + labels go light; inputs stay
white (high contrast); the orange Nosutit button pops on green (brand
contrast); inline error -> white box so it stays readable. */
.ck-card--form { background: var(--surface-dark); }
.ck-card--form .ck-card-title { color: var(--on-dark-strong); }
.ck-card--form .ck-label { color: var(--on-accent); }
/* Kontakti form heading -> first field: the form label sits at the top of its box while
the Rekvizīti rows sit theirs ~18px lower, so the shared 26 read tighter. 44 makes the
form's visual heading->content gap match Rekvizīti's 52. DESKTOP value here; tablet keeps
its own 44 override; mobile reverts to 26 below (Mikelis 2026-06-18). */
.contact .ck-card--form .ck-card-title { margin-bottom: 44px; }
/* soft off-white fields (warmer than pure white) on the green bubble */
.ck-card--form .ck-input, .ck-card--form .ck-textarea { background: var(--card-bg); }
.ck-card--form .ck-form-error { background: var(--on-dark-strong); color: var(--orange-hover); border-color: var(--on-dark-strong); }
/* layout - split (form + map left, info rail right) */
.ck-split-top { display: grid; grid-template-columns: 1.22fr 1fr; gap: 28px; align-items: stretch; }
.ck-main { display: flex; flex-direction: column; gap: 28px; }
.ck-main .ck-map { flex: 1 1 auto; min-height: 400px; } /* 2x desktop map height (was 200; tablet/mobile stay 320 in the 1024 block). Mikelis 2026-06-17. */
/* V2 flat composition (2026-07-15): the algu-kalkulators/kontaktforma look -
white surface, flat dark-text hero (.hero--calc), and all four bubbles
floating SEPARATED (no hero/footer connections). .contact.contact--v2
doubles specificity to beat the later v1 .contact connection rules. */
.contact.contact--v2 { padding: 0; } /* top: lead->bubbles reads 112 ink (hero slack 102 + lead leading, the calc recipe); bottom 0 - the form runs to the footer */
.contact.contact--v2 .ck-card--info { margin-top: 0; border-radius: var(--r-xl); }
/* form connected to the footer, the kontaktforma recipe: squared bottom, consent
-> footer = 107 + ~5px consent bottom leading = the 112 rhythm */
.contact.contact--v2 .ck-card--form { padding-top: 59px; padding-bottom: 107px; border-radius: var(--r-xl); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* rekviziti interior matches the info card (base 40; 56/48 on the responsive tiers below) */
/* office-photo bubble (the former hero image) - sized like the map bubble (400) */
.contact--v2 .ck-photo { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: var(--r-lg); }
/* map now lives in the right rail between info and the form - fills the middle */
.contact.contact--v2 .ck-side .ck-map { flex: none; height: 260px; } /* 400 - 35% = 260 (Mikelis 2026-07-15); rekviziti sits naturally below it */
/* V2 rekviziti bubble: brand orange, no separators, plain copy-friendly lines
("Label: value" in one text run, value font throughout) */
.contact--v2 .ck-card--req { background: var(--card-bg); } /* gray (Mikelis 2026-07-15; was orange) - title keeps the default green-900 */
.contact--v2 .ck-card--req .ck-req-list { gap: 0; } /* one paragraph - no inter-line gaps, the line-height IS the rhythm */
.contact--v2 .ck-req-line { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); } /* paragraph canonical: fs-body/lh-body/weight 400/text-muted */
.ck-split .ck-side { display: flex; flex-direction: column; gap: 28px; }
/* Orange info card (Kontakti info-rail TOP card). Orange + content recolor apply
at ALL viewports. DESKTOP only (>1024): pulled up by --section-y to butt the
hero with a squared top (the info sits naturally near the top); reverted in the
<=1024 block (stacked layout). Net-new, freehand, Mikelis 2026-06-17. */
.ck-card--info { background: var(--orange); margin-top: -112px; border-top-left-radius: 0; border-top-right-radius: 0; } /* pull-up mirrors the .contact 112 top padding exactly (card butts the hero) */
.ck-card--info .ck-contact-k { color: var(--on-accent); }
.ck-card--info .ck-contact-v { color: var(--on-dark-strong); }
.ck-card--info .ck-contact-v a:hover { color: var(--on-dark); }
/* Talrunis + E-pasts side by side (row 1); Birojs (3rd) spans full width below.
Stacks back to 1-col on small phones (<=460). Mikelis 2026-06-17. */
.ck-card--info .ck-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.ck-card--info .ck-contacts .ck-contact:nth-child(3) { grid-column: 1 / -1; }
/* ---------------- KONTAKTFORMA (split: header left, form right) ----------------
Source: clients/corsax/Kontaktforma.html. Reuses the shared .ck-card/.ck-form.
Section vertical lives in the RHYTHM block. */
/* light breadcrumb (on white, vs the on-dark .crumb in the hero) */
.crumb-d {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 28px;
}
.crumb-d a { color: var(--text-muted); transition: color .15s ease; }
.crumb-d a:hover { color: var(--orange); }
.crumb-d .sep { opacity: 0.45; }
.crumb-d .here { color: var(--green-900); }
.kf-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: start; }
.kf-split-head { padding-top: 4px; }
.kf-split-head h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); } /* 52 = the inner-hero h1, matching the kalkulators/service page family (was fs-h1 44; Mikelis 2026-07-15) */
.kf-split-head .lead {
font-size: var(--fs-hero-lead); line-height: var(--lh-lead); color: var(--text-muted); /* lh 1.55 */
margin-top: 22px; max-width: 420px;
}
.kf-meta { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.kf-meta-label {
font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
}
.kf-meta-rows { display: flex; flex-direction: column; gap: 12px; }
.kf-meta-rows a { font-size: var(--fs-body); line-height: var(--lh-lead); font-weight: 500; color: var(--green-900); transition: color .15s ease; width: max-content; } /* lh 1.45 -> --lh-lead */
.kf-meta-rows a:hover { color: var(--orange); }
/* ---------------- PALDIES (thank-you) ----------------
Source: clients/corsax/Kontaktforma-paldies.html. Centered confirmation.
Section vertical lives in the RHYTHM block. */
.ty-inner { max-width: 580px; margin: 0 auto; text-align: center; }
/* 404 numeral: decorative one-off, deliberately NOT on the type scale (DESIGN-SYSTEM §2.1) */
.ty-code {
font-family: var(--font-serif);
font-weight: 600;
font-size: 124px; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
line-height: 1;
letter-spacing: -0.02em;
color: var(--green-900);
margin-bottom: 14px;
}
.ty-mark { width: 80px; height: 80px; border-radius: 50%; background: var(--green-900); display: grid; place-items: center; margin: 0 auto 36px; }
.ty-mark svg { width: 34px; height: 34px; color: var(--on-dark-strong); }
.ty h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } /* 1.1 -> --lh-tight */
.ty .lead { font-size: var(--fs-hero-lead); line-height: var(--lh-lead); color: var(--text-muted); margin: 30px auto 0; max-width: 460px; } /* lh 1.55; h1->lead gap 20->30 on DESKTOP (+10px, Mikelis 2026-06-17). Tablet/mobile restored to 20 in the 1024 block below. */
/* margin-top 40 -> 36: -4px optical comp. The 17px lead above carries ~4px more
line-leading to its baseline than the 11px caps note below, so equal 40px
margins read top-heavy (baseline-measured: top 48 vs bottom 44px). Mikelis 2026-06-15. */
.ty-actions { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ty-note {
margin-top: 40px; font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
}
.ty-note a { color: var(--green-900); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: var(--fs-body); transition: color .15s ease; }
.ty-note a:hover { color: var(--orange); }
.ty-note .ty-note-row { margin-top: 10px; }
/* outline button variant (paldies secondary action) */
.btn.btn-outline { background: transparent; color: var(--green-900); border: 1px solid var(--line); }
.btn.btn-outline:hover { background: var(--card-bg); color: var(--orange); }
/* ---------------- NOZARES (industries archive: image tiles) ----------------
Source: clients/corsax/Nozares.html. Locked variant = TILES; the mock's
review switcher + grid/register variants are discarded (not in the body).
Section vertical lives in the RHYTHM block. Tile-num (01-08) was display:none
in the mock - omitted from markup. */
.ind-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
/* generic no-photo cards (Mikelis 2026-07-15, replaced the stock-photo tiles):
the blog-card family - gray surface, serif name, arrow that goes orange on hover */
.ind-tile {
display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
min-height: 200px; padding: 30px 28px;
background: var(--card-bg); border-radius: var(--r-lg);
transition: transform .15s ease;
}
.ind-tile:hover { transform: translateY(-2px); }
.ind-tile-name {
font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em;
font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--green-900);
}
.ind-tile-arrow { color: var(--green-900); align-self: flex-end; transition: color .15s ease; }
.ind-tile-arrow svg { width: 24px; height: 24px; display: block; }
.ind-tile:hover .ind-tile-arrow { color: var(--orange); }
/* ---------------- HELPERS ---------------- */
.accent { color: var(--orange); }
.page-fallback { padding-block: var(--section-y); } /* index.php minimal fallback only */
/* ============================================================
VERTICAL RHYTHM - the single owner of ALL inter-section spacing.
Every section's vertical padding lives HERE, in tokens - component
blocks never set section-level verticals. To retune the page
rhythm, change --section-y / --section-y-mobile in :root.
Exceptions are explicit and commented; do not add new ones
without adding the value to DESIGN-SYSTEM §3 first.
============================================================ */
.services { padding: var(--section-y) 0; } /* top = gap after the full-bleed cert band */
/* --- inner (service) pages --- */
.aboutA { padding: var(--section-y) 0; }
.pricing { padding: 0 0 var(--section-y); }
.other-services { padding: 0 0 var(--section-y); }
/* EXCEPTION - locked geometry: ~80px visible gap + 90px portrait overhang
(see .cta-portrait negative margins); DESIGN-SYSTEM §3.2 */
.cta-circle-wrap { padding: 50px 0 170px; }
.team { padding: 0 0 var(--section-y); }
/* birojs page order: hero -> Par mums -> team photos -> quote band.
.about--lead is the first section after the hero, so it owns the top gap
(top+bottom); the team grid follows and inherits .team's bottom-only
padding above. .about--lead must stay AFTER .about - source order decides. */
.about { padding: var(--section-y) 0; } /* birojs: prose+portrait, between the full-bleed quote (above) and the cta-circle (below) - owns top + bottom gaps. */
.about--lead { padding: var(--section-y) 0; }
/* birojs canonical order: team is the first section after the hero, so it owns
the top gap (base .team is bottom-only). Mikelis 2026-06-17. */
.team--lead { padding-top: var(--section-y); }
.certs { padding: 0 0 var(--section-y); } /* birojs: follows the cta-circle (which owns the gap above via its overhang geometry), so top 0; owns the bottom gap to big-cta. */
/* kontakti page: hero -> contact -> footer. DESKTOP (>1024): bottom padding -> 0
so the green form bubble (left col, pushed to the bottom by the map's flex-grow)
butts the footer; the bubble's --section-y bottom padding keeps the submit button
a standard section gap above the footer edge. Tablet/mobile restore the gap (the
1024 + RESPONSIVE 760 blocks). Net-new, freehand, Mikelis 2026-06-17. */
.contact { padding: 112px 0 0; } /* = the nav->crumb visible gap (112, ink-measured 2026-07-14): hero edge -> map bubble reads flat */
.contact .ck-card--form { padding-bottom: 107px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* squared bottom, flush on the footer; consent -> footer = 107 + the consent's ~5px bottom leading = the 112 rhythm (2026-07-14) */
/* kontaktforma page: single split section. DESKTOP (>1024): bottom padding -> 0 +
the form bubble (taller column) squared & extended so it butts the footer, like
the kontakti form bubble. Tablet/mobile restore the gap. Mikelis 2026-06-17. */
/* start height matched to the hero pages: nav->breadcrumb reads 106 there
(pixel-measured 2026-07-14); the crumb box carries ~7px above its text, so
99px padding reads the same 106 (was 120, read 127 - "page starts slightly
lower", Mikelis 2026-07-14). Background stays the default white. */
.kf { padding: 99px 0 0; }
.kf .ck-card--form { padding-top: 59px; padding-bottom: 107px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* top 59 = the Rekvizīti/calc-card interior; consent -> footer = 107 + ~5px consent bottom leading = the 112 rhythm (2026-07-14) */
/* paldies page: centered confirmation owns top+bottom (mock 128/88 -> 120/80 snap) */
.ty { padding: var(--section-y) 0; }
/* nozares: hero -> industries (image tiles) -> big-cta. Mock 96/110; bottom uses
the tight token (tiles are heavy images, like team-photo before its CTA). */
.industries { padding: 0 0 var(--section-y-tight); } /* flat hero: its bottom slack (102) + the lead's ~10px leading read the 112 rhythm (the calc recipe; was 112 under the photo hero) */
.why { padding: 0 0 var(--section-y); }
/* EXCEPTION - deliberate tight gap after the heavy group photo (Mikelis, 2026-06-09) */
.team-photo-wrap { padding: 0 0 var(--section-y-tight); }
.blog-teasers { padding: 0 0 var(--section-y); }
/* blog archive page (/blogs/): first section after the hero, owns both verticals.
Top 96 (mock 88 -> --space-24, matches nozares/BUJ after-hero); bottom uses the
tight token (card list is image-heavy, like team-photo before its CTA). */
.blog-archive { padding: 0 0 var(--section-y-tight); } /* flat hero: its bottom slack (102) + the lead's ~10px leading read the 112 rhythm (the calc recipe) */
/* single post: gray header band (mock 64/68 -> 64) + white article body (mock 88/96
-> 96). cta-circle/big-cta/related follow their own rules below. */
.article-head { padding: var(--space-16) 0; }
.article-body { padding: var(--space-24) 0 var(--section-y); } /* bottom = section rhythm so the gap above the cta-circle matches every other page (prev-section 120 + cta-wrap 50) */
.legal { padding: var(--section-y) 0; } /* legal/prose pages (privatuma-politika etc.) */
/* BUJ top = the privatuma template verbatim (Mikelis 2026-07-15): legal-inner
760 column, the real Atjaunots line carries the divider; the lead follows it
with the privatuma line->prose spacing */
.legal--faq { padding-bottom: 0; }
.legal-lead { margin-top: 44px; font-size: var(--fs-lead); line-height: var(--lh-prose); color: var(--green-900); } /* = .prose > p:first-of-type, the privatuma intro-paragraph style */
.faq--page .faq-wrap { max-width: 760px; } /* content column = the legal template width */
.related { padding: 0 0 var(--section-y-tight); } /* tight before footer/big-cta, like blog-archive */
.faq { padding: 0 0 var(--section-y); }
/* EXCEPTION - service pages close the FAQ tighter than the homepage:
96 in the locked Pilna mock vs homepage 120. Must stay AFTER the .faq
rule above (equal specificity - source order decides). */
.faq--svc { padding-bottom: var(--space-24); }
/* standalone FAQ page (BUJ): FAQ is the first section after the hero, so it owns
BOTH verticals - 96 top (like nozares .industries after its hero) + 96 bottom
(inner-page FAQ close, same as .faq--svc; big-cta adds its +7 comp below). */
.faq--page { padding: 48px 0 var(--space-24); } /* lead -> first group = the 48 content gap (privatuma-style top above; 2026-07-15) */
/* EXCEPTION - locked design closes tighter before the footer.
+7px top = optical comp: the big-cta is a hard-edged box between hard edges,
while the page's text-led gaps render ~127px (token + heading leading).
Below: 96 + footer 32 = 128 rendered, already on optical rhythm. Measured 2026-06-10. */
.big-cta-wrap { padding: 7px 0 var(--space-24); }
footer { margin-top: var(--space-8); }
/* kontakti: the green form bubble butts the footer (desktop) - drop the 32px
footer gap that sits after the contact section so there's no white strip; the
button's --section-y bubble padding becomes the exact gap to the footer edge.
Only kontakti has .contact, so this is page-scoped. Mikelis 2026-06-17. */
.contact + footer, .kf + footer { margin-top: 0; }
@media (max-width: 760px) {
.services { padding: var(--section-y-mobile) 0; }
.cta-circle-wrap { padding: 0 0 var(--section-y-mobile); }
/* Service-clone pages (gramatvedibas-/nodoklu-konsultacijas, sia-dibinasana,
mantisko-ieguldijumu): aboutA's svc-process butts the green cta-circle
directly - there's no .pricing block between them as on the pilna page. The
bare svc->card gap read 79 vs the card->why gap below at 87; +8 box lands it
at 87 optical so both read equal. Adjacency scopes it to the clones only:
pilna is .aboutA + .pricing, homepage is .services + .cta-circle - both
untouched (verified). Mikelis 2026-06-25. */
.aboutA + .cta-circle-wrap { padding-top: 8px; }
.team, .why, .blog-teasers { padding-bottom: var(--section-y-mobile); }
.blog-archive { padding: 59px 0 var(--section-y-mobile); } /* mobile: lead -> cards reads ~69 ink = the nav->crumb gap (Mikelis 2026-07-16) */
.pagination { margin-top: 48px; } /* mobile: cards -> pagination = 48, reads like the h2->content gap */
/* mobile: windowed pagination - only 3 page numbers visible, the rest hidden
behind ellipses (no wrapping; Mikelis 2026-07-16) */
.pagination .pg-far { display: none; }
.pagination .pg-dots { display: inline-flex; align-items: center; color: var(--text-muted); font-weight: 500; }
.article-head { padding: var(--space-12) 0; }
.article-body { padding: var(--section-y-mobile) 0; }
.legal { padding: 62px 0 60px; }
.legal--faq { padding-bottom: 0; }
.legal-lead { margin-top: 41px; font-size: var(--fs-hero-lead); } /* lead 19 -> 17 on phones, like .prose first-of-type */ /* mobile: top = nav -> breadcrumb 62px padding (reads 66, matching kontakti hero); bottom = 60px padding (reads 66, content -> footer) = same as the top gap (Mikelis 2026-06-19) */
.related { padding: 0 0 var(--section-y-mobile); }
.team-photo-wrap { padding-top: 6px; padding-bottom: var(--section-y-mobile); } /* 6px micro-clearance under why */
.faq { padding-bottom: var(--section-y-mobile); }
/* +5px top/bottom = optical comp: hard-edged box between hard edges; the
page's rendered mobile rhythm is 85-86px (token + heading leading). Measured 2026-06-10. */
.big-cta-wrap { padding-top: 5px; padding-bottom: calc(var(--section-y-mobile) + 5px); }
footer { margin-top: 0; }
/* --- inner (service) pages --- */
/* EXCEPTION - locked kit values 60/64; 60 is off-scale (between --space-14 and --space-16) */
.hero--inner .hero-inner { padding-top: 60px; padding-bottom: var(--space-16); }
/* -8px bottom = optical comp: pricing's 31px Lora h2 carries ~8px leading
above its cap, so a raw 80 rendered as 92. Measured 2026-06-11:
hero->prose 79 / prose->steps 84 / steps->pricing 84 rendered. */
.aboutA { padding: var(--section-y-mobile) 0 calc(var(--section-y-mobile) - 8px); } /* mobile top 72->80: hero -> aboutA heading = the standard section gap, like about-us hero->team (Mikelis 2026-06-19) */
/* buvnieciba: card->why gap uses the FULL mobile rhythm (no -8), so the green
CTA card sits on the page's canonical ~85-86 rhythm (matches the homepage
cta-circle: pixel-measured 87 here vs 85-88 on home). The -8 above is tuned
for Pilna's prose->pricing; this page ends .aboutA with the CTA card, not
prose. Must stay AFTER .aboutA (source order). Mikelis 2026-06-16. */
.aboutA--crown { padding-bottom: var(--section-y-mobile); }
.pricing { padding: 0 0 var(--section-y-mobile); }
.other-services { padding: 0 0 var(--section-y-mobile); }
.faq--svc { padding-bottom: var(--section-y-mobile); } /* mock 85 -> 80 canonical snap (same as homepage) */
.faq--page { padding: 44px 0 var(--section-y-mobile); } /* mobile: lead -> first item 44, the flat-hero standard (was the photo-hero 86 comp) */
/* birojs page (order: hero -> Par mums -> team -> quote band) */
.about { padding: var(--section-y-mobile) 0; }
.about--lead { padding: var(--section-y-mobile) 0; }
.team--lead { padding-top: var(--section-y-mobile); }
.certs { padding: 0 0 var(--section-y-mobile); }
.contact { padding: var(--section-y-mobile) 0; }
.kf { padding: 56px 0 0; } /* mobile: nav -> breadcrumb top gap = 56px padding -> reads 66 visible, matching the kontakti hero's nav->breadcrumb gap; bottom 0 so the form butts the footer (Mikelis 2026-06-19) */
.ty { padding: var(--section-y-mobile) 0; }
.industries { padding: 59px 0 var(--section-y-mobile); } /* mobile: lead -> cards reads ~69 ink = the nav->crumb gap (Mikelis 2026-07-16) */
}
/* ============================================================
RESPONSIVE (canonical homepage mobile kit: 1024 / 760 / 460)
Content-section reflow only. The desktop->burger nav swap, the
off-canvas drawer, dropdown and accordion live in assets/nav.css
(hand-built shared chrome) - intentionally NOT duplicated here.
============================================================ */
@media (max-width: 1024px) {
.container, .container-wide { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
/* light-header hairline on the responsive orange bar: only under the white
logo box, never under the orange itself (Mikelis 2026-07-14) */
body.light-header .nav { border-bottom: 0; }
body.light-header .nav .nav-logo { border-bottom: 1px solid var(--line); }
.ty .lead { margin-top: 20px; } /* paldies: the +10px desktop gap is desktop-only; tablet+mobile keep the mock's 20 */
.ck-field { gap: 19px; } /* responsive: label->input gap +10 over the base 9 (desktop is 14px) */
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 44px; }
.team-grid-8 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* tablet: match the .why-grid card gap (Mikelis 2026-06-17) */
.team-grid-8 > * { min-width: 0; }
.why-grid { grid-template-columns: 1fr 1fr; }
/* algu kalkulators tablet: the DESKTOP 2-column composition stays (Mikelis
2026-07-16); stacking now happens at <=760. Hero pb zeroed so the section
padding carries the 112 ink read. */
.hero--inner.hero--calc { min-height: 0; }
.hero--inner.hero--calc .hero-inner { padding-bottom: 0; }
.calc { padding: 102px 0 112px; } /* 102 box + lead leading = 112 ink on top; 112 below the green bubble (the orange's -112 margin still reaches the footer) */
.calc-field { gap: 19px; } /* label->input gap matches .ck-field responsive */
.cta-circle { grid-template-columns: 300px 1fr; }
.cta-portrait { width: 300px; height: 300px; margin-top: -60px; margin-bottom: -60px; }
.cta-circle-body h2 { font-size: var(--fs-h2-md); }
.f1-main { grid-template-columns: 1fr 1fr; }
/* --- inner (service) pages --- */
/* stacked intro->steps gap follows the section rhythm so it matches the gap
below the steps block (was 56px vs the 120 below it) - Mikelis, 2026-06-14.
Mobile (<=760) overrides to --space-18 in the later 760 block. */
.aboutA-grid { grid-template-columns: 1fr; gap: var(--section-y); }
/* stacked: prose drops its desktop cap so it spans the full container width,
matching the steps section below it (Mikelis, 2026-06-14) */
.aboutA-left { max-width: none; }
/* --- buvnieciba crown variant: on tablet/mobile the middle CTA mirrors the
homepage .cta-circle responsive look (Mikelis 2026-06-16; desktop crown
stays as-is). Grid goes 1-col + card full-width. Tablet = horizontal panel:
portrait left (300, overhanging top/bottom), text right - matching .cta-circle
<=1024. Gap above the card = section rhythm, symmetric with the .aboutA bottom
gap to .why below, so the stacked card sits on the page's section rhythm. */
.s3-crown-grid { grid-template-columns: 1fr; gap: var(--section-y); }
.vcta { width: 100%; }
.vcta-crown {
display: grid;
grid-template-columns: 300px 1fr;
align-items: center;
gap: 24px;
padding: 60px 56px;
margin-top: 0;
min-height: 260px;
}
.vcta-crown .vcta-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 32px;
}
.vcta-crown .vcta-portrait {
width: 300px;
height: 300px;
margin: -60px 0 -60px -20px;
}
.vcta-crown h3 { font-size: var(--fs-h2-md); margin: 0 0 40px; }
.services-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 44px; }
/* --- birojs page (mock's 980/1100 stops collapsed here) --- */
/* stacked prose->portrait gap follows the section rhythm (was a flat 48px
that read tighter than every real section gap) - Mikelis, 2026-06-14 */
.about-grid { grid-template-columns: 1fr; gap: var(--section-y); }
/* stacked: prose drops its 600px desktop cap so it spans the full container
width, matching the portrait below it (Mikelis, 2026-06-14) */
.about-left { max-width: none; }
/* stacked layouts: portrait goes full container width, UNCROPPED - natural
photo proportions, no cover window (Mikelis, 2026-06-11) */
.about-portrait { aspect-ratio: auto; }
/* responsive: hide the about photo (Mikelis 2026-06-17). The .about section keeps
its own top/bottom padding, so prose still sits cleanly between the quote band
above and the cta-circle below - no section mashing. */
.about-figure { display: none; }
.certs-cards { grid-template-columns: repeat(2, 1fr); gap: 28px; } /* tablet: match the .why-grid card gap (Mikelis 2026-06-17) */
/* --- kontakti page (mock's 1000 stop collapsed here) --- */
.ck-split-top { grid-template-columns: 1fr; }
.ck-main .ck-map { min-height: 320px; }
/* responsive stack order (Mikelis 2026-06-17): info card -> map -> form -> requisites.
The two columns' children are promoted into the single grid (display:contents) so
they can be freely ordered (info card lives in the right column on desktop). */
.contact .ck-main, .contact .ck-side { display: contents; }
.contact .ck-card--info { order: 1; }
.contact .ck-main .ck-map { order: 2; }
.contact .ck-side > .ck-card:last-child { order: 3; } /* Rekviziti above the form (Mikelis 2026-06-17) */
/* V2 flat responsive: stacked floating bubbles, 44 after the lead; bottom 0 -
the form butts the footer (kontaktforma-style), interior pb 40 */
.contact.contact--v2 { padding: 102px 0 0; } /* tablet keeps the desktop 112 ink read (Mikelis 2026-07-16) */
.contact.contact--v2 .ck-card--form { padding-bottom: 40px; }
/* V2 stacked order (the v1 order rules assume the old DOM slots): info,
photo, rekviziti, map, form last (form butts the footer) */
.contact.contact--v2 .ck-card--req { padding-top: var(--space-14); padding-bottom: var(--space-14); } /* = the info-card tablet interior (56) */
.contact.contact--v2 .ck-card--info { order: 1; }
.contact.contact--v2 .ck-photo { order: 2; height: 320px; }
.contact.contact--v2 .ck-side .ck-map { order: 3; flex: none; min-height: 208px; height: 208px; } /* 320 - 35%, mirroring the desktop map reduction; stacked ABOVE rekviziti (Mikelis 2026-07-15) */
.contact.contact--v2 .ck-card--req { order: 4; }
.contact.contact--v2 .ck-card--form { order: 5; } /* location-independent - the form is ALWAYS last in the stack (it butts the footer) */
.contact .ck-card--form { order: 4; }
/* stacked: undo the desktop hero-butt + squared top on the orange info card (color stays) */
.ck-card--info { margin-top: 0; } /* responsive: first in stack -> keeps the squared top, butts the hero (like desktop) */
/* responsive (Mikelis 2026-06-17): the contact section's top+bottom gaps match the
46px inter-bubble gap (not the big 80/120 section rhythm) - tighter, consistent
stack. Wins over the RHYTHM <=760 .contact rule by source order. Form-bubble
bottom padding restored below (footer-touch is desktop-only). */
.contact { padding: 0; } /* responsive: info card butts the hero (top), form butts the footer (bottom); 46px gaps between the middle cards (grid gap) */
.contact .ck-card--form { padding-bottom: var(--space-10); } /* responsive: last in stack -> keeps the squared bottom, butts the footer (like desktop) */
/* kontaktforma: form butts the footer on responsive too (like kontakti) - keep .kf bottom 0
and the form's squared bottom (no rounding revert). Mikelis 2026-06-17. */
.kf .ck-card--form { padding-bottom: var(--space-10); }
.contact .ck-form-row { grid-template-columns: 1fr; } /* kontakti: form row stacks when the split stacks (scoped so kontaktforma keeps its own breakpoint) */
/* --- kontaktforma page (mock's 1000 stop collapsed here) --- */
.kf-split { grid-template-columns: 1fr; gap: 44px; }
/* --- nozares tiles: 4 -> 2 cols (mock's 1100 stop) --- */
.ind-tiles { grid-template-columns: repeat(2, 1fr); gap: 28px; } /* tablet: match the .why-grid card gap (Mikelis 2026-06-17) */
/* tablet + mobile: compact row cards - name left, arrow right (the 200px
stacked card wasted height on a 1-2 line label; Mikelis 2026-07-15) */
.ind-tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; min-height: 0; padding: 22px 24px; }
.ind-tile-arrow { align-self: auto; flex-shrink: 0; }
/* single post: header stacks, featured image on top (mock's 920 stop) */
.article-head-grid { grid-template-columns: 1fr; gap: var(--space-10); }
.article-figure { aspect-ratio: 16 / 9; order: -1; }
/* stacked bubble gap = service-field gap (46px), up from the 28px desktop split
gap, across the WHOLE stacked range (tablet + mobile) so it's never cramped
(Mikelis 2026-06-15). Section gaps stay canonical (120 tablet / 80 mobile). */
.ck-split-top, .ck-main, .ck-split .ck-side { gap: 46px; }
}
/* JUSTIFIED INTERMEDIATE STOP (DESIGN-SYSTEM §4): the 6-col pricing grid's
min-content fits only at >=1160px viewport (measured 2026-06-11: +130px
overflow at 1025, still +54px at 1101 - the mock's own 1100 reflow point
was itself short). Pricing-table scope only. */
@media (max-width: 1159px) {
/* pricing reflows 6 -> 3 columns: 6 tiers = 2 clean rows of 3, Liels flows
as the last cell. (Was grid-column:1/-1, which left an empty 6th slot and
pushed Liels to an oversized full-width row - Mikelis, 2026-06-14.) */
.pricing-B .pxC-grid { grid-template-columns: repeat(3, 1fr); }
.pxC-col { border-bottom: 1px solid var(--line); }
.pxC-col:nth-child(3n) { border-right: none; }
}
/* TABLET only (761-1024): kontakti contact gaps ~20% bigger, to match the homepage
h2->cards optical gap on tablet (boxes have no text leading, so the box gap = 56).
Inter-bubble gap, info-card top (under the hero) + form bottom (above footer).
Mobile (<=760) keeps the tighter gaps. Mikelis 2026-06-17. */
@media (min-width: 761px) and (max-width: 1024px) {
.contact .ck-split-top { gap: var(--space-14); }
.contact.contact--v2 .ck-split-top { gap: 28px; } /* V2 floating bubbles: the sitewide 28 card gap at every width (56/34 were the v1 CONNECTED-composition gaps) */
/* V2 tablet: keep the DESKTOP 2-column composition (Mikelis 2026-07-16) -
restore the columns the v1 stacking rules dissolve; stack at <=760 */
.contact.contact--v2 .ck-split-top { grid-template-columns: 1.22fr 1fr; }
.contact.contact--v2 .ck-main, .contact.contact--v2 .ck-side { display: flex; gap: 28px; }
.contact .ck-card--info { padding-top: var(--space-14); padding-bottom: var(--space-14); } /* info card interior top+bottom = bubble-gap size (56) */
.contact .ck-card--form { padding-top: var(--space-14); padding-bottom: var(--space-14); } /* form card interior: top above "Kontaktforma" h2 + bottom consent->footer = 56 */
.contact .ck-side > .ck-card:last-child { padding-top: var(--space-14); } /* gap above the "Rekvizīti" heading = 56 */
.contact .ck-card--form .ck-card-title { margin-bottom: 44px; } /* form heading -> first field: form label sits at the top while Rekvizīti rows sit theirs ~18px lower, so 26 read tighter; 44 makes the visual gap match Rekvizīti's 52 (Mikelis 2026-06-18) */
/* team-photo: tablet uses the full 120 rhythm (desktop keeps its intentional tight 110). */
/* OPTICAL EQUALIZATION (Mikelis 2026-06-17): text-led section gaps read ~8px bigger than
box-led ones because the heading's cap sits 8px below its line-box top (pixel-measured on
the fs-44 section h2). To make box-edge gaps (panel/photo/cards) read as big as the 120
text-led standard, grow them by +8 -> 128. Bottom gaps that meet a heading stay 120. */
.team-photo-wrap { padding-top: 8px; padding-bottom: var(--section-y); } /* top meets the photo (box) -> 128; bottom meets blog h2 -> 120 */
.cta-circle-wrap { padding-top: 8px; padding-bottom: var(--section-y); } /* top meets the panel (box) -> 128; bottom meets a heading -> 120 */
/* birojs hero -> team now lands on the "Mūsu komanda" h2 (text), not the card boxes, so it
takes the base 120 text-led gap (no +8) - the obsolete box-led override is removed (2026-06-19). */
.quote-band { margin-top: 8px; } /* birojs: team -> quote photo band (box) -> 128 (margin, since the band is full-bleed) */
/* Outlier pages normalized to the standard rhythm on tablet ONLY (desktop keeps the mock's
96/110). Nozares tiles + inner-page FAQ closes were 96/110; bring to 128 (box-led, after
hero) / 120 (text-led; -> big-cta's 127, matching every other page). Mikelis 2026-06-17. */
.industries { padding-top: 102px; padding-bottom: var(--section-y); } /* tablet keeps the DESKTOP 112 ink read (102 box + lead leading) - the other section gaps don't scale down until mobile, so neither does this one (Mikelis 2026-07-16) */
.blog-archive { padding-top: 102px; } /* tablet keeps the desktop 112 ink read (Mikelis 2026-07-16) */
.faq--svc { padding-bottom: var(--section-y); } /* service-page faq -> big-cta 127 (was 103) */
.faq--page { padding-top: 44px; padding-bottom: var(--section-y); } /* tablet: lead -> first item 44 (the kontaktforma-referenced flat-hero gap, like algu-kalkulators) */
.services-heading { margin-bottom: 64px; } /* home services h2->cards: 80 read too big vs other h2->content on tablet; 64 = the standard / other-services sibling (Mikelis 2026-06-18) */
/* unify all section h2->content gaps to 64 on tablet (Mikelis 2026-06-18). CTA panels
(cta-circle, big-cta) stay tight - they're heading->button, not section content. */
.team-intro-row { margin-bottom: 64px; } /* home team: was 48 */
.why h2 { margin-bottom: 64px; } /* why section: was 56 (also applies on buvnieciba/pilna-uzskaite) */
.blog-teasers h2 { margin-bottom: 64px; } /* home blog teasers: was 48 */
.certs-head h2 { margin-bottom: 54px; } /* about-us certs h2 -> its description: 64 minus ~10px text cap-leading, so it optically matches the 64 h2->cards gaps; description -> cards stays 56 */
.about-left h2, .aboutA-left h2 { margin-bottom: 54px; } /* "Par mums" / "Par pilnu uzskaiti" -> prose: 64 minus ~10px text cap-leading, so it optically matches the 64 h2->cards gaps */
.pxC-plinth .head h2 { margin-bottom: 54px; } /* service page pricing h2 -> description (text): was 22; 54 optically matches the 64 h2->cards gaps. desc -> table stays 56 */
.related h2 { margin-bottom: 64px; } /* blog post "Citi raksti" h2 -> post cards (box): was 48 (Mikelis 2026-06-18) */
.related { padding-bottom: var(--section-y); } /* gap above big-cta: was tight 110 (->117); 120 makes it the standard 127 like every other page (Mikelis 2026-06-18) */
.faq-group { margin-bottom: var(--section-y); } /* BUJ: each group is a mini-section starting with its own h2 -> 120 section gap between groups (was 80); last-child stays 0 (Mikelis 2026-06-18) */
.kf { padding-top: 64px; } /* kontaktforma: top gap nav -> page header = the 64 h2->content tablet value (was 120 section-top); bottom stays 0 so the form butts the footer (Mikelis 2026-06-18) */
.kf .ck-card--form { padding-top: 55px; padding-bottom: 64px; } /* kontaktforma tablet: top edge -> first label = 55px padding (reads 56, matching the kontakti info-card gap); consent -> footer 64 (Mikelis 2026-06-18/19) */
.f1-main { padding: 64px 0; } /* footer top gap (-> logo/columns) + bottom gap (socials -> © bar) = 64 on tablet (was 80 / 56) (Mikelis 2026-06-18) */
/* privatuma-politika (legal): top gap nav->breadcrumbs = 64 (like kontaktforma); bottom 64 +
butt the footer to "connect" the page to it, also like kontaktforma (Mikelis 2026-06-18). */
.legal { padding: 64px 0 61px; }
.legal--faq { padding-bottom: 0; }
.legal-lead { margin-top: 51px; } /* tablet: top = nav->breadcrumb (64 padding, reads 68); bottom = 61 padding (reads 68, content -> footer) = same as the top gap (Mikelis 2026-06-19) */
.legal + footer { margin-top: 0; }
/* tablet: equalize the gaps around the "Atjaunots" divider line - both read 56 visible, matching the kontakti info-card top gap (Mikelis 2026-06-19) */
.legal-updated { padding-bottom: 49px; } /* text -> line = 49 (reads 56) */
.legal .prose { margin-top: 51px; } /* line -> first prose = 51 (reads 56) */
}
/* DESKTOP only (>1024): gap above the Rekvizīti + Kontaktforma headings (card edge -> heading)
= the Rekvizīti card's visible BOTTOM gap (63px). The card padding is a symmetric 40, but the
requisite rows add ~19px below their text, so the bottom reads bigger; pt 59 + ~4px heading
cap-leading brings the top to a matching 63. Mikelis 2026-06-18. */
@media (min-width: 1025px) {
/* inner-page hero (all .hero--inner pages: kontakti, birojs, nozares + children,
pakalpojumi + children, BUJ, blogs archive). Drop the 420 min-height centering so
the hero is content-driven, then fix equal top/bottom padding -> nav->breadcrumb gap
AND last-element->hero-edge gap both read ~108 (the kontakti desktop value), constant
across pages regardless of content length. Inter-element gaps unchanged. Home (.hero)
+ single blog (no hero) + kontaktforma (.kf) are naturally excluded. (Mikelis 2026-06-20) */
.hero--inner { min-height: 0; }
.hero--inner .hero-inner { padding-top: 103px; padding-bottom: 102px; } /* nav->breadcrumb and last-element->edge both read ~109 ink (the kontakti target); pb is 1px under pt to optically offset the lead text's ~10px bottom line-leading (Mikelis 2026-06-20) */
.legal { padding-top: 105px; } /* privatuma-politika etc.: nav->breadcrumb gap reads ~109 ink, matching the kontakti hero's nav->breadcrumb gap (was 120, read 124); rest of the page (bottom, content) unchanged (Mikelis 2026-06-20) */
.contact .ck-side > .ck-card:last-child { padding-top: 59px; }
.contact .ck-card--form { padding-top: 59px; }
}
@media (max-width: 760px) {
h1 { font-size: var(--fs-display-md); }
h2 { font-size: var(--fs-h1-md); }
/* cookie bar: stacked + centered on mobile (Mikelis 2026-07-03) */
.cookie-bar { text-align: center; }
.cookie-bar-actions { width: 100%; justify-content: center; }
/* algu kalkulators mobile: 1-column stack (tablet keeps the 2-col desktop
composition since 2026-07-16); hero pb 0 cascades from the 1024 rule */
.calc { padding: 59px 0 0; } /* lead->bubble reads ~69 ink = the mobile nav->crumb gap (Mikelis 2026-07-16); bottom 0 - the stacked orange runs to the footer */
.calc-grid { grid-template-columns: 1fr; }
/* green->orange link rotated for the vertical stack: runs DOWN from under the
green's bottom corners, across the 28px gap, to r-xl under the orange */
.calc-card::after {
top: calc(100% - var(--r-xl));
bottom: auto;
left: 0;
right: 0;
width: auto;
height: calc(28px + 2 * var(--r-xl));
}
.calc-result { margin-bottom: 0; padding: 48px 26px; } /* stacked orange butts the footer (cancel the desktop -112 pull); interior = the kontakti info-card 48 */
.calc-card { padding: 48px 26px 20px; } /* mobile interior top = the kontakti info-card 48 (h2->content gap); bottom 20 + the 28px green-filled gap reads the same 48 */
.calc-card-title { margin-bottom: 28px; } /* = the kontakti form-card mobile title gap */
.calc-neto { font-size: var(--fs-price-xl-md); }
/* mobile: labels wrap to 2-3 lines - center the value against the label block
(desktop keeps baseline alignment on single-line rows) (Mikelis 2026-07-14) */
.calc-row, .calc-employer-row { align-items: center; }
.hero { min-height: 0; }
.ck-consent br { display: none; } /* mobile: let the consent line wrap naturally (the desktop | stranded a word) */ .contact .ck-card--form .ck-card-title { margin-bottom: 28px; } /* mobile: "Kontaktforma" heading -> form label = 28 (reads 34, matching the inter-bubble gap) (Mikelis 2026-06-19) */ .contact .ck-card--info { padding-top: 48px; padding-bottom: 48px; } /* mobile: info card interior top+bottom (card edge -> icon tiles, box->box) = 48, the h2->content gap (was 30) (Mikelis 2026-06-19) */ .contact.contact--v2 .ck-card--req { padding-top: 48px; padding-bottom: 48px; } /* V2 rekviziti = the info-card mobile interior */ .contact.contact--v2 { padding-top: 59px; } /* mobile: lead -> first bubble reads ~69 ink = the nav->crumb gap (Mikelis 2026-07-16) */ .contact .ck-split-top { gap: 34px; } /* mobile: inter-bubble gap 25% smaller (46 -> 34.5 -> 34) (Mikelis 2026-06-19) */ .contact.contact--v2 .ck-split-top { gap: 28px; grid-template-columns: 1fr; } /* V2: 28 here too; mobile = 1 column */ .contact.contact--v2 .ck-main, .contact.contact--v2 .ck-side { display: contents; } /* mobile: dissolve the columns again (tablet keeps them since 2026-07-16) */ /* mobile: Rekvizīti + Kontaktforma card interiors all read 48 (the h2->content gap). Raw values differ because the requisite rows / form fields carry different internal leading. */ .contact .ck-side > .ck-card:last-child { padding-top: 42px; padding-bottom: 27px; } /* Rekvizīti: above heading 42->48 visible; bottom buffer 27->48 (last row has 21px bottom leading) */ .contact .ck-side > .ck-card:last-child .ck-card-title { margin-bottom: 11px; } /* Rekvizīti heading -> table = 11 (reads 34, matching the inter-bubble gap) (Mikelis 2026-06-19) */ .contact .ck-card--form { padding-top: 42px; padding-bottom: 45px; } /* Kontaktforma: above heading 42->48; bottom buffer (consent->edge) 45->48 */ .kf .ck-card--form { padding-top: 47px; padding-bottom: 43px; } /* kontaktforma page: form-bubble interior - top edge -> first label 47->48 visible; consent -> footer 43->48 (consent carries 5px bottom leading) (Mikelis 2026-06-19) */ /* kontaktforma head: follow the kontakti inner-hero type logic on mobile - h1 36/lh-tight, breadcrumb->h1 = 22, h1->lead = 22, lead 16 (Mikelis 2026-06-19) */ .kf-split-head h1 { font-size: var(--fs-hero-md); } .kf-split-head .crumb-d { margin-bottom: 22px; } .kf-split-head .lead { font-size: var(--fs-body-lg); } /* equalized from the locked kit's 56/118 (Mikelis, 2026-06-10). -5px = optical compensation: Lora 38px/1.1 renders its cap height 5px below the line-box top, so equal paddings LOOK unequal. Gaps were pixel-measured to 80/80 rendered. Re-measure if hero h1 font/size changes. */ .hero-inner { padding-top: calc(var(--section-y-mobile) - 5px); padding-bottom: var(--section-y-mobile); } .hero-content p { font-size: var(--fs-body-lg); margin-bottom: 32px; } /* home hero lead->buttons = 32 to match the inner heroes' CTA gap (was 40); h1->lead stays 26 (Mikelis 2026-06-19) */ .cert-wrap { padding: 20px 0; } .cert-note { font-size: var(--fs-body-sm); } .cert-note-sep { display: none; } /* each cert value = exactly ONE centered row (Mikelis, 2026-06-10): items stack as centered single lines, never wrap internally. Font steps down at <=460 so the longest item fits small phones. */ .cert-note-item { display: block; text-align: center; white-space: nowrap; } .cert-note-item svg { display: inline-block; vertical-align: -2px; margin-right: 6px; } .services-heading { margin-bottom: 42px; } .services-grid { grid-template-columns: 1fr; gap: 46px 0; } .service p { max-width: none; } .service-image { aspect-ratio: 16 / 10; } .cta-circle { grid-template-columns: 1fr; text-align: center; padding: 36px 26px 42px; gap: 8px; min-height: 0; } .cta-portrait { width: 188px; height: 188px; margin: 0 auto 14px; } .cta-circle-body { padding: 0; } .cta-circle-body h2 { font-size: var(--fs-h3); margin-bottom: 26px; } .team-intro-row { margin-bottom: 42px; display: block; } .team h2 { font-size: var(--fs-h1-md); line-height: var(--lh-h1); flex-shrink: 1; } .team-grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* mobile: match the .why-grid card gap (Mikelis 2026-06-17) */ .team--page .team-grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* match specificity so the desktop 3-col override doesn't leak here */ .why h2 { margin-bottom: 42px; } .why-grid { grid-template-columns: 1fr; gap: 16px; } .blog-list { gap: 16px; } /* match the .why-grid card gap on mobile (Mikelis 2026-06-17) */ .ind-tiles { gap: 16px; } /* nozares tiles: match the .why-grid card gap on mobile (Mikelis 2026-06-17) */ .certs-cards { gap: 16px; } /* certs: match the .why-grid card gap on mobile (Mikelis 2026-06-17) */ .why-card { padding: 32px 28px; } .why-card h3 { font-size: var(--fs-h5); } .blog-teasers h2 { margin-bottom: 42px; } .article-title { font-size: var(--fs-h2); } /* 44 -> 35 (mock 34) */ .article-meta { margin-bottom: 40px; } /* mobile: meta -> h1 = 40 (reads 48 with the h1 cap-leading), matching the h2->content gap (was 22) (Mikelis 2026-06-19) */ .article-head-grid { gap: 48px; } /* mobile: figure -> meta (box->box) = 48, reads like the h2->content gap (was 40) (Mikelis 2026-06-19) */ .related h2 { margin-bottom: 42px; } /* mobile: "Citi raksti" -> cards = 42 (reads 48 with the h2 descender), matching the h2->content gap (was 48) (Mikelis 2026-06-19) */ .legal h1 { font-size: var(--fs-hero-md); line-height: var(--lh-tight); } /* mobile: 36 / lh-tight, matching the kontakti inner-hero h1 (was fs-h2 35 / lh-h1) (Mikelis 2026-06-19) */ .legal .crumb-d { margin-bottom: 22px; } /* mobile: breadcrumb -> h1 = 22, matching kontakti (was base 28) (Mikelis 2026-06-19) */ /* mobile: privatuma-politika prose gaps all read 48 (the standard content gap) - around the "Atjaunots" divider line and above each section heading (Mikelis 2026-06-19) */ .legal-updated { padding-bottom: 41px; } /* Atjaunots text -> line = 41 (reads 48) */ .legal .prose { margin-top: 41px; } /* line -> first prose element = 41 (reads 48) */ .legal .prose > p:first-of-type { margin-bottom: 33px; } /* intro -> first heading: 33 box so it collapses to the same gap as the other headings */ .legal .prose h2 { margin-top: 33px; } /* above each heading = 33 box (reads 48 with the h2 + preceding-text leading) */ .prose > p:first-of-type { font-size: var(--fs-hero-lead); } /* lead 19 -> 17 on phones */ .blog-card { grid-template-columns: 104px 1fr; align-items: stretch; } .blog-thumb { aspect-ratio: auto; height: 100%; min-height: 100%; align-self: stretch; } .blog-arrow { display: none; } .blog-body { padding: 18px 20px; } .blog-body h3 { font-size: var(--fs-h6); margin-bottom: 8px; } .blog-body p { font-size: var(--fs-body-sm); } .faq h2 { margin-bottom: 42px; } .faq-group h2 { font-size: var(--fs-h3); } /* BUJ group sub-heading 26 -> 28 snap */ .faq-q { font-size: var(--fs-h6); line-height: var(--lh-snug); } .f1-main { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; } /* mobile: footer top+bottom optically match the h2->content gap (42 margin + ~9px heading bottom-leading -> ~50 visible; minus the footer's ~2px content offset = 48) (Mikelis 2026-06-19) */ .f1-bottom-inner { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; } .f1-bottom-links { gap: 24px; flex-wrap: wrap; } .big-cta { padding: 56px 28px; } .big-cta h2 { font-size: var(--fs-h3); margin-bottom: 26px; } /* --- inner (service) pages --- */ .hero h1 { margin-bottom: 26px; } /* home hero h1->lead: 22 (inner) scaled to the bigger home h1 (fs35 vs 29); no breadcrumb here so no balance constraint (was 28) (Mikelis 2026-06-19) */ .hero--inner h1 { font-size: var(--fs-hero-md); line-height: var(--lh-tight); margin-bottom: 22px; } /* 1.12 -> 1.10 snap; h1->lead = 22 to balance the 22 breadcrumb->h1 gap, not exceed it (was 18 too tight / 28 out-gapped the breadcrumb) (Mikelis 2026-06-19) */ .hero--inner .hero-content p { font-size: var(--fs-body-lg); margin-bottom: 32px; } .crumb { margin-bottom: 22px; } /* steps read as their own block: gap matches the 80px mobile section rhythm optically (72 + aside pad 4 + text leading ~ 80 rendered; kit's 48 read neither-attached-nor-separate - Mikelis, 2026-06-11) */ .aboutA-grid { gap: var(--space-18); } .prose-body p { font-size: var(--fs-hero-lead); line-height: var(--lh-prose); } /* 17px step; 1.7 -> 1.75 snap */ .prose-h { font-size: var(--fs-h4); } /* buvnieciba middle CTA -> mirror homepage .cta-circle <=760: centered stack, portrait 188 on top (no overhang), text below (Mikelis 2026-06-16) */ /* prose->card gap, -5px optical comp: the prose's 17px/1.75 Lora last line carries ~11px trailing leading below its glyphs, so a raw 80 grid gap renders 91 optically. -5 (75 box) lands the top at ~86 - matching the page's canonical ~85-86 mobile rhythm and the card->why gap below (~87). Pixel-measured 2026-06-16 to match the homepage cta-circle (85-88). Mikelis 2026-06-16. */ .s3-crown-grid { gap: calc(var(--section-y-mobile) - 5px); } .vcta-crown { grid-template-columns: 1fr; text-align: center; padding: 36px 26px 42px; gap: 8px; min-height: 0; } .vcta-crown .vcta-portrait { width: 188px; height: 188px; margin: 0 auto 14px; } .vcta-crown .vcta-body { padding: 0; } .vcta-crown h3 { font-size: var(--fs-h3); margin-bottom: 26px; } .svc-process-title { font-size: var(--fs-h4); margin-bottom: 28px; } .pxC-plinth .head { margin-bottom: 42px; } .pxC-plinth .head h2 { font-size: var(--fs-h1-md); margin-bottom: 34px; } /* pricing h2 -> description: 34 (reads ~48) to match the aboutA h2->prose, was 22 (Mikelis 2026-06-19) */ .pxC-plinth .head p { font-size: var(--fs-hero-lead); line-height: var(--lh-prose); } /* pricing reflows 3 -> 2 columns; "Liels" becomes a normal cell */ .pricing-B .pxC-grid { grid-template-columns: 1fr 1fr; } .pxC-col { border-right: 1px solid var(--line); padding: 26px 18px; } .pxC-col:nth-child(2n+1) { border-right: 1px solid var(--line); } .pxC-col:nth-child(2n) { border-right: none; } .pxC-col .price { font-size: var(--fs-price-md); padding: 22px 0; } .pxC-col--xl .price { font-size: var(--fs-price-xl-md); } .lielsB { grid-column: auto; padding: 26px 18px; } .lielsB .price-slot { font-size: var(--fs-h5); padding: 20px 0; } /* equalized with the gap ABOVE the table (Mikelis, 2026-06-11): intro text renders 42box + ~6px descender slack = ~48 to the border; footnote glyph sits ~3px below its box top, so 45box renders the same ~48. */ .pxC-footnote { margin-top: calc(var(--space-12) - 3px); } .other-services .services-heading { margin-bottom: 42px; } .services-grid-4 { grid-template-columns: 1fr; gap: 46px 0; } .services-grid-4 .service h3 { font-size: var(--fs-h5); } .services-grid-4 .service p { max-width: none; } .services-grid-4 .service-image { aspect-ratio: 16 / 10; } /* --- birojs page --- */ .quote-wrap { padding: 0 28px; } .quote-band .q { font-size: var(--fs-h4); } .certs-head p { font-size: var(--fs-hero-lead); } /* lead prose steps 19->17 on phones, same as .prose-body */ .about-left h2, .aboutA-left h2 { margin-bottom: 34px; } /* "Par mums" / "Par pilnu uzskaiti" -> prose: 34 margin reads 48px visible (h2 descender 6 + prose top-leading 8), matching the team h2->cards box reference (Mikelis 2026-06-19) */ .certs-head h2 { margin-bottom: 35px; } /* "Sertifikāti un dalība" -> description: 35 reads 48px visible (was 18, too tight) (Mikelis 2026-06-19) */ .certs-head { margin-bottom: 42px; } /* certs description -> cards: 42 margin reads 48px visible (desc descender 6) = the team-cards reference (Mikelis 2026-06-19) */ .quote-band { margin-top: 6px; } /* team cards -> quote band: +6 box-led comp so it reads like the text-led 80 section gaps -> 86 (Mikelis 2026-06-19) */ /* prose->portrait gap to mobile section rhythm; must be in THIS 760 block (after the 1024 gap rule) so source order lets 80 win over 120 */ .about-grid { gap: var(--section-y-mobile); } /* +6px optical comp: team grid (hard card edge) -> quote band (hard edge) is box->box, which renders 6px tighter than the page's text-led 80px gaps (pixel-measured 80 vs 86 ink-to-ink, 2026-06-15). Must stay in this 760 block (after the shared .team padding-bottom rule) to win on source order. */ .team--page { padding-bottom: calc(var(--section-y-mobile) + 6px); } /* paldies: centered h1 steps down (mock's 720 stop -> 760; 34 -> 35 snap) */ .ty h1 { font-size: var(--fs-h2); } .ty-code { font-size: 88px; } /* stylelint-disable-line scale-unlimited/declaration-strict-value */ } @media (max-width: 460px) { h1 { font-size: var(--fs-h2); } .btn { padding: 0 26px; } /* longest cert item measured 336px @14px - wraps under 390px viewports; 13px renders ~312px, single-line down to 360px-wide phones (12px read too small on a real phone - Mikelis, 2026-06-11) */ .cert-note { font-size: var(--fs-caption); } .blog-card { grid-template-columns: 1fr; } .blog-thumb { aspect-ratio: 16 / 9; } .hero--inner h1 { font-size: var(--fs-hero-sm); } /* tighter card sides so every pricing val stays one line down to 360px-wide phones - asymmetric wraps misaligned the rows on-device (2026-06-11). Mock was drawn at 390 where 18px sides fit. */ .pxC-col, .lielsB { padding: 26px 10px; } /* --- kontakti page (mock's 600 stop collapsed here) --- requisites stack: mock's 1-col rule targeted .ck-req-list (a flex column - inert); applied the intent to .ck-req-item so the 160px label column doesn't cram the value on phones. */ .ck-req-item { grid-template-columns: 1fr; row-gap: 6px; } .ck-req-k { padding-top: 0; } /* stacked: no cap-align nudge needed */ .ck-card--info .ck-contacts { grid-template-columns: 1fr; } /* small phones: stack contacts back to 1-col */ .ck-card { padding: 30px 26px; } /* kontaktforma: form row stacks on phones (mock's 600 stop) */ .kf-split-head h1 { font-size: var(--fs-hero-md); } /* <=460: 36, matching the kontakti inner-hero h1 (Mikelis 2026-06-19) */ .kf .ck-form-row { grid-template-columns: 1fr; } /* nozares tiles go 1-col on phones: full-width tile so long single-word names (Telekomunikācijas, Informācijas tehnoloģijas) fit on one line instead of clipping in a cramped 2-col cell (Mikelis 2026-06-16, chose 1-col over hyphenation). */ .ind-tiles { grid-template-columns: 1fr; gap: 16px; } } |