) inherited the
default green link color, backwards from "current language is bold". */
.site-header__menu-lang .is-current { font-weight: 700; color: var(--ink); }
.site-header__menu-lang a { color: var(--ink-soft); }
.site-header__menu-lang a:hover { color: var(--forest-700); }
@media (min-width: 1024px) {
.site-header__menu { display: none !important; } /* desktop never shows the mobile panel */
}
/* ===== 10. FOOTER ===== */
.site-footer {
background: var(--forest-900);
color: rgba(251, 249, 243, .8);
padding-block: clamp(3rem, 6vw, 4rem) var(--s-8);
}
/* Below 1024px: two columns (brand | nav, nav stacked vertically) instead of
the desktop's single wrapping row - 7 nav links wrapping to two uneven
lines read messy at tablet/mobile widths (Armands' report). grid-column
and flex-basis on __bottom below are both declared unconditionally since
each is simply ignored by whichever layout mode isn't active - no need
to repeat the property inside the 1024px override. */
.site-footer__inner {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--s-6);
row-gap: var(--s-8);
}
@media (min-width: 1024px) {
.site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--s-8);
}
}
.site-footer__logo { display: block; height: 26px; width: auto; }
@media (min-width: 1024px) {
.site-footer__logo { height: 28px; }
}
.site-footer__brand p {
font-size: 0.875rem;
line-height: 1.6;
margin-top: var(--s-2);
max-width: 28ch;
}
.site-footer__links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-3);
}
@media (min-width: 1024px) {
.site-footer__links {
flex-direction: row;
flex-wrap: wrap;
align-content: start;
align-items: center;
gap: var(--s-2) var(--s-8);
}
}
.site-footer__links a { font-size: 0.9375rem; font-weight: 500; color: rgba(251,249,243,.85); }
.site-footer__links a:hover { color: var(--amber-500); }
.site-footer__bottom {
grid-column: 1 / -1;
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-6);
padding-top: var(--s-6);
border-top: 1px solid rgba(251,249,243,.15);
font-size: 0.875rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: clamp(0.625rem, 0.24rem + 1.57vw, 1.5rem); }
.site-footer__legal a { color: rgba(251,249,243,.7); }
.site-footer__legal a:hover { color: var(--ivory); }
.site-footer__copyright { font-size: clamp(0.8125rem, 0.785rem + 0.1124vw, 0.875rem); color: rgba(251,249,243,.5); } /* 13px mobile (own explicit doc value) -> 14px desktop (inherited there) */
/* ===== 11. HERO (the one bold moment) =====
Fluid across the whole range, calibrated against the 390/768/1280 docs as
anchors rather than hard breakpoints (devplan §5 rule zero). */
.hero {
position: relative;
overflow: hidden;
background: radial-gradient(120% 90% at 70% 10%, var(--forest-800), var(--forest-900));
color: var(--ivory);
/* capped at 720px (the desktop doc's own rendered pixel height) - the
.dc.html preview tool renders 88svh against its own fixed-height canvas
(~800-860px), so the docs' approved look is really "~720-760px tall",
not a literal 88% of every real viewport. On a genuinely tall monitor,
uncapped 88svh grows far beyond what was ever actually seen/approved -
confirmed too tall by Armands, capping to match intent. */
min-height: min(88vh, 720px);
min-height: min(88svh, 720px);
display: flex;
align-items: center;
padding-block: clamp(4.5rem, 3.84rem + 2.7vw, 6rem);
}
.hero__glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
animation: glowBreath 9s ease-in-out infinite alternate;
will-change: opacity;
pointer-events: none;
}
.hero__glow--halo {
width: clamp(420px, 40vw, 640px);
height: clamp(420px, 40vw, 640px);
background: var(--glow-halo);
top: -5%;
left: -8%;
}
.hero__glow--core {
width: clamp(260px, 25vw, 340px);
height: clamp(260px, 25vw, 340px);
background: var(--glow-core);
bottom: 5%;
right: -6%;
}
@keyframes glowBreath {
from { opacity: .75; }
to { opacity: 1; }
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
/* --s-5 doesn't exist (scale skips 4->6) - this was a bug: an invalid
var() with no fallback computes gap to its initial value (normal, i.e.
0), which is exactly the "no spacing between hero text/button" report.
Fluid 20px (doc's mobile value) -> 24px (doc's desktop value = --s-6). */
gap: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
justify-items: start;
}
.hero__title {
max-width: 18ch;
font-size: clamp(2.25rem, 1.7rem + 2.25vw, 3.5rem);
line-height: 1.08;
}
.hero__accent { color: var(--amber-500); }
.hero__subtitle {
max-width: 60ch;
color: rgba(251,249,243,.85);
font-size: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);
line-height: 1.6;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1rem, 3vw, 1.75rem);
margin-top: var(--s-1);
}
.hero__cta {
box-shadow: 0 0 24px rgba(240,138,36,.25);
}
.hero__cta:hover {
box-shadow: var(--shadow-hover), 0 0 24px rgba(240,138,36,.25);
}
.hero__link {
font-size: 1rem; /* flat 16px in all 3 docs - inherited body size is 17px at desktop, off by 1px */
font-weight: 500;
color: var(--ivory);
text-decoration: underline;
text-underline-offset: 3px;
}
.hero__link:hover { color: var(--ivory); opacity: .85; }
.hero__trust {
font-size: clamp(0.8125rem, 0.785rem + 0.11vw, 0.875rem);
font-weight: 500;
line-height: 1.7;
color: rgba(251,249,243,.72);
margin-top: var(--s-2);
}
.hero__scroll-cue {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
opacity: 1;
transition: opacity var(--dur-med) var(--ease-out);
}
.hero__scroll-cue span {
display: block;
width: 12px;
height: 12px;
border-right: 2px solid rgba(251,249,243,.55);
border-bottom: 2px solid rgba(251,249,243,.55);
transform: rotate(45deg);
}
.hero.is-scrolled .hero__scroll-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.hero__glow { animation: none; opacity: .9; }
}
/* ===== 12. METHOD (SEKCIJA 2, #problema) - staggered rail, NO numerals ===== */
.method__title { max-width: 20ch; margin-top: var(--s-2); }
.method__intro { max-width: 65ch; color: var(--ink-soft); margin-top: var(--s-4); }
.method__rail {
max-width: 860px;
margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.method__step { display: flex; gap: clamp(1rem, 2vw, 1.5rem); }
.method__marker {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.method__diamond {
width: clamp(0.8125rem, 0.7rem + 0.5vw, 0.9375rem);
height: clamp(0.8125rem, 0.7rem + 0.5vw, 0.9375rem);
background: var(--forest-700);
border-radius: 3px;
transform: rotate(45deg);
margin-top: 7px;
flex-shrink: 0;
}
.method__line {
width: 2px;
flex: 1;
background: var(--sage-200);
margin: 8px 0;
}
.method__content { padding-bottom: clamp(1.5rem, 3vw, 2.125rem); }
.method__step--last .method__content { padding-bottom: 0.5rem; }
.method__step-title {
font-size: clamp(1.125rem, 1.043rem + 0.337vw, 1.3125rem); /* 18px -> 21px */
color: var(--forest-700);
font-weight: 700;
margin-bottom: var(--s-2);
}
.method__content p { font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; } /* 15px -> 16px */
.method__panel {
max-width: 860px;
margin-top: var(--s-1);
background: var(--sage-100);
border: 1px solid var(--sage-200);
border-radius: var(--radius-l);
padding: clamp(1.25rem, 3vw, 1.75rem);
display: flex;
gap: clamp(0.875rem, 2vw, 1.125rem);
align-items: flex-start;
}
.method__diamond--amber { background: var(--amber-500); margin-top: 7px; flex-shrink: 0; }
.method__panel-tag {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--amber-700-text);
margin-bottom: 5px;
}
.method__panel p { font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); line-height: 1.6; color: var(--ink-soft); margin: 0; } /* 15px -> 16px */
/* ===== 13. SERVICES (#pakalpojumi) ===== */
/* 75ch (was 65ch) - EN's current intro sentence needs ~704px, the old cap held
it to 674px and forced an unnecessary wrap with room to spare; widened the
same way niche-intro was. Doesn't affect LV, which already fit under 65ch. */
.services__intro { max-width: 75ch; color: var(--ink-soft); margin-top: var(--s-4); }
.services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1.25rem, 3vw, 1.5rem);
margin-top: clamp(1.75rem, 4vw, 2.25rem);
align-items: stretch;
}
.service-card {
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
padding: clamp(1.5rem, 4vw, 2rem);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.service-card__title { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.375rem); font-weight: 600; line-height: 1.35; }
.service-card__price {
font-weight: 700;
background: var(--amber-100);
border-radius: 6px;
padding: 2px 10px;
white-space: nowrap;
}
.service-card__desc { font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); line-height: 1.6; color: var(--ink-soft); margin-top: var(--s-4); } /* 15px -> 16px */
.service-card__included-label {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--forest-700);
margin: clamp(1.125rem, 3vw, 1.375rem) 0 0.75rem;
}
.service-card__checklist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem 1.25rem;
list-style: none;
padding: 0;
margin: 0;
}
.service-card__checklist li { display: flex; gap: 10px; font-size: 0.9375rem; line-height: 1.5; }
.service-card__check { color: var(--forest-700); font-weight: 700; }
.service-card__note {
font-size: 0.8125rem;
line-height: 1.5;
font-weight: 500;
color: var(--ink-soft);
margin-top: auto;
padding-top: clamp(1.125rem, 3vw, 1rem);
border-top: 1px solid var(--sage-200);
}
.care-bar {
margin-top: clamp(1.25rem, 3vw, 1.5rem);
background: var(--surface);
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
padding: clamp(1.5rem, 4vw, 2rem);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(1rem, 3vw, 2.5rem);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.care-bar:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.care-bar__title { flex: 0 0 auto; min-width: 200px; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.375rem); font-weight: 600; }
.care-bar__desc { flex: 1 1 320px; font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); line-height: 1.6; color: var(--ink-soft); margin: 0; } /* 15px -> 16px */
.services__footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
margin-top: clamp(1.25rem, 3vw, 1.5rem);
}
.services__hosting-note { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); margin: 0; }
/* nowrap only once there's comfortably enough row width (EN's sentence needs
~598px natural) - unconditional nowrap would overflow at mobile/tablet widths.
At >=1024px this makes the sentence hold one line if space allows; flex-wrap
on .services__footer then drops .services__cta to its own row instead of
squeezing this text, rather than the text wrapping while the button stays
put. LV already fits without needing this, unaffected either way. */
@media (min-width: 1024px) {
.services__hosting-note { white-space: nowrap; }
}
.services__cta { font-size: 1rem; font-weight: 600; white-space: nowrap; } /* flat 16px in both docs - inherited body size is 17px at desktop */
/* ===== 14. NICHE CARDS (#kam-es-buveju) - fronts only this step =====
auto-fit minmax(280px,1fr): 1 col below ~600px viewport, 2 cols ~600-950,
3 cols above ~950 - fluid, no hard breakpoints. 6 cards divide evenly at
every stage (6/1, 6/2, 6/3), so there's never an orphaned trailing card. */
/* 78ch (was 65ch) - widened so the current LV/EN intro sentence fits one line
at desktop widths as requested, instead of wrapping with room to spare. */
.niche-intro { max-width: 78ch; color: var(--ink-soft); margin-top: var(--s-4); }
.niche-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1.25rem, 3vw, 1.5rem);
margin-top: clamp(1.75rem, 4vw, 2.25rem);
}
.niche-card {
position: relative;
perspective: 1200px;
}
.niche-card__inner {
position: relative;
height: 100%;
cursor: pointer;
border-radius: var(--radius-l); /* shapes the focus ring */
transform-style: preserve-3d;
transition: transform var(--dur-flip) var(--ease-out);
}
/* click/tap-triggered flip (any width) - no lift, that's hover-only below */
.niche-card.is-flipped .niche-card__inner { transform: rotateY(180deg); }
@media (min-width: 1024px) {
/* hover flips + lifts together (design-system §6.3: "rest state
shadow-rest, hover pre-flip lifts 2px") - mouse-leave reverts both
automatically, pure CSS, no JS involved. Same specificity as the
.is-flipped rule above; coming later in source order lets it win when
both apply (e.g. clicked, then still hovering). */
.niche-card:hover .niche-card__inner { transform: translateY(-2px) rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.niche-card__inner { transition: none; } /* instant swap, not an animated flip */
}
.niche-card__front, .niche-card__back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
transition: box-shadow var(--dur-med) var(--ease-out);
}
@media (min-width: 1024px) {
.niche-card:hover .niche-card__front,
.niche-card:hover .niche-card__back { box-shadow: var(--shadow-hover); }
}
.niche-card__front {
display: flex;
flex-direction: column;
height: 100%;
background: var(--surface);
overflow: hidden; /* clips the image to the rounded top corners */
}
/* height:auto is required alongside aspect-ratio here - the ![]()
HTML
height="600" attribute is a presentational hint that otherwise wins as a
literal pixel height, fighting the aspect-ratio-computed height and
making the image render far taller than 4:3 (the "images too high" bug). */
.niche-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.niche-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(1.25rem, 3vw, 1.375rem) clamp(1.375rem, 3vw, 1.5rem) clamp(1.375rem, 3vw, 1.5rem);
}
.niche-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; margin: 0 0 6px; }
/* explicit 15px (doc value) - without this it inherited the base rule's
16-17px body size, the "some texts too big" report. */
.niche-card__line { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1rem; }
.niche-card__affordance {
align-self: flex-end;
margin-top: auto;
font-size: 0.875rem;
font-weight: 500;
color: var(--forest-700);
background: var(--sage-100);
border-radius: 8px;
padding: 6px 12px;
}
.niche-card__back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
background: var(--forest-700);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
padding: clamp(1.5rem, 1.445rem + 0.225vw, 1.625rem) clamp(1.375rem, 1.32rem + 0.225vw, 1.5rem);
}
.niche-card__back p {
font-size: 0.9375rem; /* flat 15px both breakpoints, confirmed against docs */
line-height: 1.65;
color: rgba(251, 249, 243, .92);
margin: 0;
}
.niche-card__back a {
align-self: flex-start;
color: var(--amber-on-forest-text);
font-weight: 600;
font-size: 0.9375rem;
}
.niche-card__back a:hover { opacity: .85; }
/* ===== 15. SECONDARY BUTTON (design-system §6.1) ===== */
.btn--secondary {
background: transparent;
color: var(--forest-700);
border: 1.5px solid var(--forest-700);
}
.btn--secondary:hover { background: var(--sage-100); }
/* ===== 16. PORTFOLIO (#darbi) - unified single gallery (post-launch
restructure: the old "Klientu projekti" / "Dizaina un tehniskie darbi"
two-section split is gone; every card is visually identical, honesty is
carried only by the .portfolio-card__badge - see darbi-update.md) ===== */
/* heading has no intro paragraph beneath it any more (dropped along with the
old two-section split), so it needs its own deliberate gap before the
grid starts - without this it reads as cramped straight into the cards. */
.darbi__heading { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.darbi__cta-line { font-weight: 500; margin-top: clamp(1.5rem, 3vw, 2rem); }
.darbi__cta-line a { font-weight: 600; }
.portfolio-card {
background: var(--surface);
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
overflow: hidden;
}
.portfolio-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.25rem, 3vw, 1.5rem);
}
@media (min-width: 1024px) {
/* align-items:start (grid default is stretch) - without this, a card gets
stretched to match its row-mate's height (e.g. Lebedev next to the much
longer Bērnu Basketbola komandas card), which throws off the min-height
alignment below by adding extra space the .portfolio-card__stack's own
margin-top:auto then eats unevenly. Each card sizes to its own content
instead, so the fixed-height cards line up purely via the rule below,
independent of whichever card happens to share their grid row. */
.portfolio-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.portfolio-card__media {
position: relative;
aspect-ratio: 16 / 10;
border-bottom: 1px solid var(--sage-200);
}
.portfolio-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: top;
}
/* url() in CSS resolves relative to the STYLESHEET's location
(assets/css/styles.css), not the HTML page - so it must be "../img/...",
not "assets/img/..." (which would resolve to the non-existent
assets/css/assets/img/ and 404 - exactly the phantom-404 trap this
project explicitly guards against, just via a different mechanism than
the templated-src case). Every image before this step was a plain ![]()
in the HTML, which resolves relative to the page, so this is the first
place the distinction actually mattered.
Latvijas Cimdi/Basketball/YelpCamp/Zeltiņi/Lebedev: always the desktop
capture set, every breakpoint, no mobile/desktop swap - a locked client
choice for lc (handoff CLAUDE.md m0071). The other four originally swapped
to a separate mobile-captured set below 1024px (Step 8), but that set is
lower resolution and looked visibly soft on phones/tablets - Armands asked
for the desktop set everywhere instead, so all five now share one rule
shape. The mobile-*.webp files stay in assets/img/ unused rather than
deleted, in case this needs reverting. */
.portfolio-slide--lc { background-image: url('../img/latvijascimdi-desktop-1.webp'); }
.portfolio-slide--bb { background-image: url('../img/basketballteams-desktop-1.webp'); }
.portfolio-slide--yc { background-image: url('../img/yelpcamp-desktop-1.webp'); }
.portfolio-slide--za { background-image: url('../img/zeltini-autoserviss-desktop-1.webp'); }
.portfolio-slide--lb { background-image: url('../img/lebedev-boxing-desktop-1.webp'); }
.portfolio-slide--trb { background-image: url('../img/the-riga-brief-desktop-1.webp'); }
.portfolio-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(251, 249, 243, .9);
box-shadow: var(--shadow-rest);
display: grid;
place-items: center;
border: none;
cursor: pointer;
}
.portfolio-arrow:hover { background: var(--ivory); }
.portfolio-arrow--prev { left: 12px; }
.portfolio-arrow--next { right: 12px; }
.portfolio-arrow span { display: block; width: 10px; height: 10px; border: 0 solid var(--ink); }
.portfolio-arrow--prev span { border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-left: 3px; }
.portfolio-arrow--next span { border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); margin-right: 3px; }
.portfolio-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
/* visual dot stays 8px per docs; button itself is a 24px WCAG touch target
(invisible padding around the dot) so it's tappable without looking bigger */
.portfolio-dot {
width: 24px; height: 24px;
display: grid; place-items: center;
background: none; border: none; padding: 0; cursor: pointer;
}
.portfolio-dot::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(251, 249, 243, .45);
}
.portfolio-dot.is-active::before { background: var(--ivory); }
.portfolio-card__body { padding: clamp(1.5rem, 4vw, 2rem); display: flex; flex-direction: column; }
/* One shared typography scale for every card now (visual-equality rule,
darbi-update.md §2.2) - previously the client card ran larger type via
.portfolio-card--main; that distinction is gone along with the section
split, so this is now the only scale. */
.portfolio-card__title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.portfolio-card__result { font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); margin-top: clamp(0.5rem, 2vw, 0.75rem); }
/* Button + stack-line alignment (desktop only) for the four cards that carry
a live/demo link (Latvijas Cimdi, The Riga Brief, Zeltiņi, Lebedev -
.portfolio-card--aligned-cta). Their result lines vary from 2 to 4 lines;
reserving 4 lines' worth of height (this element's own font-size/line-height,
so it stays correct even if either changes) means the button - which sits
directly below via normal flow, then the stack line via margin-top:auto -
lands at the same Y on all four regardless of how short their own text is.
Measured across 1024-1920px - none of the four ever exceeds 4 lines in that
range, so 6.4em holds with no overflow. */
@media (min-width: 1024px) {
.portfolio-card--aligned-cta .portfolio-card__result { min-height: 6.4em; }
}
/* Bērnu Basketbola komandas/YelpCamp have no button, so they use a separate
modifier (.portfolio-card--aligned-text) rather than joining the class above -
requested by Armands specifically for this pair, so their stack line (with
nothing else to align against) still lands at a matching Y and both cards
end up the same height. Needs a TALLER reservation than the aligned-cta
group: measured across 1024-1920px, Bērnu Basketbola komandas' own text
(the longer of the pair) hits 5 lines right at the 1024px edge - the
narrowest column width just after the grid switches to 2 columns - while
both cards stay at 4 lines from ~1040px up. 8em (5 lines) covers the full
range with no overflow at any width; don't shrink this back to 6.4em to
"match" the other group without re-testing 1024px specifically, since that's
exactly where it broke. If a future card joins either group, give it the
matching modifier - don't put all six cards under one shared selector, since
a plain-text card added later with much shorter copy shouldn't inherit a
5-line reservation it doesn't need. */
@media (min-width: 1024px) {
.portfolio-card--aligned-text .portfolio-card__result { min-height: 8em; }
}
/* Same alignment problem one level up: at exactly 1024px (narrowest 2-column
width), "Bērnu Basketbola komandas" is long enough that its title wraps to
2 lines inside .portfolio-card__head (measured: 63px, vs 29-31px for
YelpCamp's one-line head) - which alone was enough to throw off the whole
card's height/button/stack alignment even after the __result fix above,
since .portfolio-card__head sits above __result in the same flex column.
4rem (measured 2-line height ≈63px + margin) reserves enough for either
title to wrap without the other card needing to match it. English titles
don't hit this at 1024px, but the reservation is harmless there too. */
@media (min-width: 1024px) {
.portfolio-card--aligned-text .portfolio-card__head { min-height: 4rem; }
}
@media (min-width: 1024px) {
.portfolio-card__title { font-size: 1.1875rem; }
}
/* Title + badge share one row, directly under the image - badge is the
ONLY differentiator between cards (darbi-update.md §2.2), so it sits at
title level rather than overlaid on the image. Deliberate vertical
breathing room above (from __body's own padding-top, i.e. the gap below
the image) and below (margin-bottom here, on top of __result's own
margin-top) so the badge never reads as cramped against the image or the
result line. */
.portfolio-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(0.75rem, 2vw, 1rem);
margin-bottom: clamp(0.375rem, 1.5vw, 0.5rem);
}
.portfolio-card__badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.portfolio-card__badge--concept,
.portfolio-card__badge--technical {
background: var(--sage-200);
color: var(--ink-soft);
}
.portfolio-card__badge--client {
background: var(--forest-700);
color: var(--ivory);
}
/* smaller than the generic .btn (which is sized for primary CTAs like the
hero/header) - the docs use a distinctly more compact secondary link
here: 15px font, 11-12px/20-22px padding vs .btn's 16px/14px/28px. */
.portfolio-card__link {
align-self: flex-start;
margin-top: clamp(1rem, 3vw, 1.25rem);
padding: 11px 20px;
font-size: 0.9375rem;
}
@media (min-width: 1024px) {
.portfolio-card__link { padding: 12px 22px; }
}
.portfolio-card__stack { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); margin-top: auto; padding-top: clamp(0.875rem, 2vw, 1.25rem); }
/* YelpCamp's locked "Js·" never separates across a line break at desktop
width (handoff CLAUDE.md m0073) - a nowrap span achieves the same result
as the docs' literal without duplicating the text for one weight. */
@media (min-width: 1024px) {
.stack-nowrap { white-space: nowrap; }
}
/* ===== 17. PROCESS (#process, "The Engagement") - numbered 1-5, horizontal
desktop / vertical mobile. Deliberately different shape from Method's
diamond rail: numbers vs none, grid-of-columns vs always-vertical. ===== */
.process__timeline {
margin-top: clamp(1.75rem, 4vw, 2.5rem);
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.process__timeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(1rem, 2vw, 1.25rem);
position: relative;
}
.process__timeline::before {
content: '';
position: absolute;
top: 20px;
left: 10%;
right: 10%;
height: 2px;
background: var(--sage-200);
}
}
.process__step { display: flex; gap: clamp(1rem, 2vw, 1.5rem); }
.process__marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.process__circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--forest-700);
color: var(--ivory);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.125rem;
flex-shrink: 0;
}
.process__line { width: 2px; flex: 1; background: var(--sage-200); margin: 7px 0; }
.process__step:last-child .process__line { display: none; }
.process__content { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.process__step:last-child .process__content { padding-bottom: 0; }
.process__step-title {
font-size: clamp(1.0625rem, 1.152rem - 0.1124vw, 1.125rem); /* 18px -> 17px (docs shrink slightly at desktop) */
margin: 8px 0 4px;
line-height: 1.4; /* required per design-system §6.7b - computed "normal" is non-deterministic here */
}
.process__content p {
font-size: clamp(0.875rem, 0.965rem - 0.1124vw, 0.9375rem); /* 15px -> 14px */
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
@media (min-width: 1024px) {
/* unwraps marker/content so circle+line+title+desc become flat grid
children of .process__step, matching the docs' actual desktop
structure - needed for align-content:start (below) to do its job. */
.process__marker, .process__content { display: contents; }
.process__step {
display: grid;
gap: 0; /* the mobile flex rule's gap carries over when display switches
to grid (gap isn't reset just by changing display) - left unset, it
added ~24px between every row (circle->title->desc) on top of the
title's own 4px margin, the reported "extra vertical space" bug */
justify-items: center;
text-align: center;
align-content: start; /* required per design-system §6.7b - default grid
stretch inflates the shortest cell's circle->title gap */
position: relative;
}
.process__line { display: none; } /* desktop uses .process__timeline::before instead */
.process__step-title { margin: 14px 0 4px; }
}
.process__note {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
font-size: 0.875rem; /* flat 14px both breakpoints */
font-weight: 500;
line-height: 1.6;
color: var(--ink-soft);
background: var(--sage-100);
border: 1px solid var(--sage-200);
border-radius: var(--radius-m);
padding: 1rem 1.125rem;
}
@media (min-width: 1024px) {
.process__note { max-width: 640px; margin-inline: auto; text-align: center; padding: 1rem 1.375rem; }
}
/* ===== 18. PAR MANI (#par-mani) ===== */
.about__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 1024px) {
.about__grid { grid-template-columns: 2fr 3fr; }
}
.about__portrait {
width: 100%;
height: auto; /* same bug as the niche cards - the height="800" attribute
otherwise wins as a literal pixel height once width is 100%, stretching
the portrait instead of scaling it proportionally */
/* Below 1024px .about__grid is single-column, so width:100% alone means
the portrait fills the ENTIRE container width - fine on a narrow phone,
but by 768-1023px (still single-column) that's a portrait rendering
near 700-960px wide/1000-1280px tall, dwarfing the viewport (Armands'
report - "especially tablet, but also mobile"). Capped with a fluid
clamp instead of a fixed size so it still scales smoothly, just within
a sane range, and centered since it no longer spans the full column. */
max-width: clamp(240px, 46vw, 340px);
margin-inline: auto;
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
}
@media (min-width: 1024px) {
.about__portrait {
max-width: none;
margin-inline: 0;
position: sticky;
top: 96px;
}
}
.about__bio p {
font-size: var(--text-body-size);
line-height: clamp(1.65, 1.628 + 0.0056vw, 1.7);
margin-top: var(--s-4);
}
.about__bio p:first-child { margin-top: clamp(1.5rem, 3vw, 1.5rem); }
.about__facts {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-top: clamp(1.5rem, 3vw, 1.75rem);
}
.about__fact {
font-size: 0.8125rem; /* flat 13px both */
font-weight: 600;
color: var(--forest-700);
background: var(--ivory);
border: 1px solid var(--sage-200);
border-radius: var(--radius-s);
padding: 7px 12px;
}
/* ===== 19. FAQ (#faq) accordion - one open at a time, answers stay in the
DOM at all times (collapsed via max-height, never removed) so the
FAQPage schema always has real content to read. ===== */
.faq__list { max-width: 760px; margin: clamp(2rem, 4vw, 2rem) auto 0; display: grid; gap: 0.75rem; }
.faq__item {
background: var(--surface);
border-radius: var(--radius-m);
box-shadow: var(--shadow-rest);
overflow: hidden;
}
.faq__item-heading { margin: 0; } /* neutralize the generic h3 size - the button carries its own explicit styles */
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
text-align: left;
font-family: var(--font-body);
font-size: clamp(1rem, 0.9453rem + 0.2247vw, 1.125rem); /* 16px -> 18px */
font-weight: 600;
line-height: 1.4;
color: var(--ink);
padding: clamp(1.125rem, 3vw, 1.375rem) clamp(1.25rem, 3vw, 1.625rem);
cursor: pointer;
}
.faq__chevron {
flex-shrink: 0;
width: 10px;
height: 10px;
border-right: 2px solid var(--forest-700);
border-bottom: 2px solid var(--forest-700);
transform: rotate(45deg);
transition: transform var(--dur-med) var(--ease-out);
}
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(-135deg); }
.faq__panel {
max-height: 0;
overflow: hidden;
transition: max-height var(--dur-med) var(--ease-out);
}
.faq__panel.is-open { max-height: 400px; } /* concrete end value required for the
transition (max-height:auto doesn't animate) - 400px matches the reference
implementation, comfortably larger than any actual answer */
@media (prefers-reduced-motion: reduce) {
.faq__chevron, .faq__panel { transition: none; }
}
.faq__answer {
font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); /* 15px -> 16px */
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
padding: 0 clamp(1.25rem, 3vw, 1.625rem) clamp(1.125rem, 3vw, 1.375rem);
}
/* ===== 20. KONTAKTI (#kontakti) - static form, validation/submit JS is
Step 16. Field states (default/focus/error) all styled here; only
default/focus are actually reachable without JS - error is a class ready
for Step 16 to toggle, not a fake example. ===== */
.contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 1024px) {
.contact__grid { grid-template-columns: 2fr 3fr; }
}
.contact__intro {
font-size: var(--text-body-size);
line-height: var(--text-body-lh);
color: var(--ink-soft);
margin-top: clamp(0.875rem, 2vw, 1.25rem);
}
.contact__intro a { font-weight: 600; }
.contact__links {
display: grid;
gap: 0.625rem;
margin-top: clamp(1.25rem, 3vw, 1.75rem);
font-size: clamp(0.9375rem, 0.91rem + 0.1124vw, 1rem); /* 15px -> 16px */
font-weight: 500;
}
.contact__links a { font-weight: 600; }
.form {
background: var(--surface);
border-radius: var(--radius-l);
box-shadow: var(--shadow-rest);
padding: clamp(1.5rem, 4vw, 2rem);
display: grid;
gap: clamp(1.125rem, 3vw, 1.125rem);
}
@media (min-width: 1024px) {
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
}
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; } /* flat 14px both */
.field input,
.field textarea,
.field select {
font-family: var(--font-body);
font-size: 1rem; /* flat 16px both - also avoids iOS Safari zoom-on-focus */
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--sage-200);
border-radius: var(--radius-s);
padding: 13px 14px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: 0.55; }
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--forest-700);
box-shadow: 0 0 0 3px rgba(28, 74, 56, .12);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { cursor: pointer; }
.field--error input,
.field--error textarea,
.field--error select { border-color: var(--error); }
.field__error {
display: none;
font-size: 0.8125rem; /* flat 13px both */
font-weight: 500;
color: var(--error);
}
.field--error .field__error { display: block; }
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { width: 100%; }
@media (min-width: 1024px) {
.form__submit { width: auto; justify-self: start; }
}
/* ===== 21. BACK TO TOP ===== */
.back-to-top {
position: fixed;
right: var(--s-4);
bottom: var(--s-4);
width: clamp(48px, 46.25px + 0.45vw, 52px); /* 48px mobile -> 52px desktop, per docs */
height: clamp(48px, 46.25px + 0.45vw, 52px);
border-radius: 50%;
background: var(--forest-700);
display: grid;
place-items: center;
box-shadow: var(--shadow-hover);
z-index: 20;
transition: background var(--dur-fast) var(--ease-out);
}
.back-to-top:hover { background: var(--forest-500); }
/* explicit override - without this, .back-to-top's own display:grid (equal
specificity, but author styles win ties against the UA stylesheet) would
beat the browser's native [hidden]{display:none}, and the button would
never actually hide. */
.back-to-top[hidden] { display: none; }
.back-to-top span {
display: block;
width: 11px;
height: 11px;
border-top: 2px solid var(--ivory);
border-left: 2px solid var(--ivory);
transform: rotate(45deg);
margin-top: 4px;
}
/* ===== 22. COOKIE CONSENT (launch blocker: GA4 must not load before
Piekrītu - see assets/js/main.js) ===== */
.cookie-bar {
position: fixed;
left: var(--s-4);
right: var(--s-4);
bottom: var(--s-4);
z-index: 30;
max-width: 1140px;
margin-inline: auto;
border-radius: var(--radius-l);
}
.cookie-bar[hidden] { display: none; }
.cookie-prompt {
background: var(--surface);
box-shadow: var(--shadow-hover);
padding: clamp(1.25rem, 3vw, 1.375rem) clamp(1.375rem, 3vw, 1.75rem);
display: grid;
gap: 1rem;
}
@media (min-width: 700px) {
.cookie-prompt { display: flex; align-items: center; gap: 2rem; }
}
.cookie-prompt__text {
font-size: 0.875rem; /* text-small, per design-system §6.10 */
line-height: 1.6;
color: var(--ink);
margin: 0;
}
@media (min-width: 700px) { .cookie-prompt__text { flex: 1 1 460px; } }
.cookie-prompt__text a { font-weight: 600; }
.cookie-prompt__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (min-width: 700px) {
.cookie-prompt__actions { display: flex; gap: 14px; flex-shrink: 0; }
}
/* two EQUAL buttons - same size, same weight class, no dark patterns
(design-system §6.10) */
.cookie-prompt__decline, .cookie-prompt__accept {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--radius-m);
padding: 12px 26px;
min-height: 46px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.cookie-prompt__decline {
background: transparent;
color: var(--forest-700);
border: 1.5px solid var(--forest-700);
}
.cookie-prompt__decline:hover { background: var(--sage-100); }
.cookie-prompt__accept {
background: var(--amber-500);
color: var(--ink);
border: none;
}
.cookie-prompt__accept:hover { background: var(--amber-600); }
.cookie-saved {
background: var(--sage-100);
border: 1px solid var(--sage-200);
padding: 1rem 1.125rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
opacity: 1;
transition: opacity var(--dur-med) var(--ease-out);
}
.cookie-saved.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.cookie-saved { transition: none; }
}
.cookie-saved__text { font-size: 0.875rem; color: var(--ink-soft); }
.cookie-saved__label { color: var(--ink); }
.cookie-saved__reset {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.8125rem;
color: var(--forest-700);
background: none;
border: none;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 8px;
}
.cookie-saved__reset:hover { color: var(--forest-500); }
/* ===== 23. SYSTEM PAGES (privacy policy / paldies / 404) ===== */
.system-page__inner {
max-width: 640px;
text-align: center;
display: grid;
gap: var(--s-6);
justify-items: center;
}
.system-page h1 { color: var(--ink); }
.system-page p { color: var(--ink-soft); }
/* 404.html only: single shared page for both languages (no /en/404 in the
site's URL architecture), so the LV and EN messages stack with a divider
instead of picking one language for a visitor arriving from either side. */
.system-page__lang-block {
display: grid;
gap: var(--s-6);
justify-items: center;
}
.system-page__divider {
width: 48px;
height: 1px;
background: var(--sage-200);
}
.legal__inner { max-width: 720px; }
.legal h1 { margin-bottom: var(--s-6); }
.legal h2 {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.125rem;
margin-top: var(--s-12);
margin-bottom: var(--s-2);
}
.legal p { color: var(--ink-soft); max-width: none; }
/* only used for the "Spēkā no ..." line directly under h1 now - item 8's
date sentence is a normal h2+p pair matching items 1-7 */
.legal__date { margin-top: 0; font-size: 0.875rem; }
.legal-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--s-2);
font-size: 0.9375rem;
}
.legal-table th, .legal-table td {
text-align: left;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--sage-200);
}
.legal-table th { background: var(--sage-100); font-weight: 700; color: var(--ink); }
.legal-table td { color: var(--ink-soft); }