/* ============================================================ Kokkoma Oy - Nordic Clean × Trust & Authority Linkki "betoni työt" -kuvahakuun: https://www.google.com/search?q=betoni+ty%C3%B6t&udm=2 ============================================================ */ /* Fonttien lataus on siirretty app/layout.js:n -lohkoon. */ :root { --bone: #F9F9F9; --surface: #FFFFFF; --ink: #1A1A1A; --slate: #5A6470; --hairline: #D9D4C9; --rust: #6F9DC6; --rust-hover: #527FA8; --serif: 'Newsreader', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1240px; --gutter: 20px; /* Frosted glass - käytössä mm. .path-card-bodyssa ja .hero-statsissa. Toimii vain kuvan tai muun kuvioidun taustan päällä. */ --glass-bg: rgba(16, 26, 43, 0.52); --glass-blur: blur(16px) saturate(120%); --glass-border: rgba(255, 255, 255, 0.16); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ============================================================ TEKSTIROOLIT - kevyt design system. Seitsemän roolia. Uutta tekstityyliä ei kirjoiteta käsin: valitaan lähin rooli ja käytetään sitä. Näin fonttikokojen määrä pysyy kurissa ja ilme yhtenäisenä. ============================================================ */ /* --- KOKOPORTAIKKO. Näiden ulkopuolelta ei oteta fonttikokoja. --- Kiinteät seitsemän askelta pienille teksteille ja UI:lle, neljä juoksevaa ramppia otsikoille. */ --fs-xs: 0.75rem; /* miniotsikot, tagit */ --fs-sm: 0.875rem; /* meta, pikkutekstit */ --fs-md: 1rem; /* napit, UI */ --fs-base: 1.0625rem; /* leipäteksti */ --fs-h3: 1.125rem; /* korttiotsikko */ --fs-lead: 1.3125rem; /* ingressi */ --fs-xl: 1.5rem; /* iso nosto */ --fs-h3r: clamp(1.375rem, 2.6vw, 1.875rem); --fs-h2r: clamp(1.75rem, 4vw, 2.75rem); --fs-h1r: clamp(2.25rem, 5vw, 3.5rem); --fs-display: clamp(2.75rem, 7vw, 6rem); /* otsikot - Oswald, versaali */ --t-h1: 700 var(--fs-h1r)/1.04 'Oswald', var(--sans); --t-h2: 600 var(--fs-h2r)/1.1 'Oswald', var(--sans); --t-h3: 600 var(--fs-h3)/1.3 'Oswald', var(--sans); /* miniotsikko / eyebrow - Inter, versaali, harva välistys */ --t-eyebrow: 500 var(--fs-xs)/1.4 var(--sans); /* tekstit - Inter */ --t-lead: 400 var(--fs-lead)/1.55 var(--sans); --t-body: 400 var(--fs-base)/1.7 var(--sans); --t-meta: 400 var(--fs-sm)/1.5 var(--sans); /* kirjainvälistys rooleittain */ --ls-heading: 0.03em; --ls-eyebrow: 0.12em; /* --- TEKSTIVÄRIT. Kolme väriä, ei muuta. --- Hierarkia tulee kokoportaikosta ja lihavuudesta, ei harmaan sävyistä. */ --c-body: var(--ink); /* musta - otsikot ja leipäteksti */ --c-accent: var(--rust); /* sininen - miniotsikot, linkit, korostukset */ --c-on-dark: #FFFFFF; /* valkoinen - tekstit tummalla taustalla */ /* aliakset vanhoille nimille, jotta harmaa ei palaa takaovesta */ --c-heading: var(--c-body); --c-muted: var(--c-body); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--fs-base); line-height: 1.6; color: var(--c-body); background: var(--bone); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 768px) { body { font-size: var(--fs-h3); } } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ============================================================ Layout primitives ============================================================ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } @media (min-width: 768px) { .container { padding: 0 32px; } } .section { padding: 64px 0; } .section-lg { padding: 96px 0; } .section-sm { padding: 40px 0; } @media (min-width: 768px) { .section { padding: 96px 0; } .section-lg { padding: 140px 0; } .section-sm { padding: 56px 0; } } .hairline { height: 1px; background: var(--hairline); border: 0; width: 100%; } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4 { font-family: 'Oswald', var(--sans); font-weight: 600; color: var(--c-body); text-transform: uppercase; letter-spacing: 0.03em; } h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: 0.02em; font-weight: 700; } /* Puhelimella pitkä yksittäinen sana ("KOKONAISRATKAISUT") oli ruutua leveämpi. Koko sidotaan leveyteen, jotta sana mahtuu kokonaisena. */ @media (max-width: 480px) { h1 { font-size: min(var(--fs-display), 9.5vw); } } h2 { font-size: var(--fs-h2r); line-height: 1.1; letter-spacing: 0.015em; margin-bottom: 24px; font-weight: 600; } h3 { font-family: 'Oswald', var(--sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.03em; } p { color: var(--c-body); } p + p { margin-top: 16px; } .lead { font-size: var(--fs-h3); line-height: 1.55; color: var(--c-body); max-width: 56ch; } @media (min-width: 768px) { .lead { font-size: var(--fs-lead); } } .eyebrow { font-family: var(--sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-body); margin-bottom: 24px; display: inline-block; } .muted { color: var(--c-body); } em, .serif-italic { font-family: var(--serif); font-style: italic; } .accent { color: var(--c-accent); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); letter-spacing: 0.01em; border: 1px solid var(--ink); /* pillimuoto, sama kuin .btn-pill ja .cta-band .btn */ border-radius: 999px; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); cursor: pointer; min-height: 48px; } .btn-primary { background: var(--ink); color: var(--c-on-dark); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--rust); border-color: var(--rust); } .btn-secondary { background: transparent; color: var(--c-body); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--ink); color: var(--c-on-dark); } .btn-link { display: inline-flex; align-items: baseline; gap: 8px; color: var(--c-accent); font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); padding-bottom: 2px; position: relative; } .btn-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--rust); transition: right 250ms var(--ease); } .btn-link:hover::after, .btn-link:focus-visible::after { right: 0; } :focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } /* ============================================================ Top navigation ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bone); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease); } .nav.scrolled { border-bottom-color: var(--hairline); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--c-body); display: inline-flex; align-items: baseline; gap: 6px; } .brand-sup { font-family: var(--sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-body); } .nav-links { display: none; gap: 32px; list-style: none; align-items: center; } .nav-links a { font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); color: var(--c-body); padding: 8px 0; position: relative; } .nav-links a:hover { color: var(--c-accent); } .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); } .nav-dropdown { position: relative; } /* Näkymätön "silta" linkin ja alasvetovalikon välisen raon yli: pitää .nav-dropdown:hoverin päällä kun kursori liikkuu linkistä valikkoon, jolloin valikko ei ehdi sulkeutua. */ .nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-dropdown-menu { position: absolute; top: calc(100% + 8px); left: -16px; background: var(--surface); border: 1px solid var(--hairline); min-width: 260px; padding: 8px; list-style: none; border-radius: 18px; box-shadow: 0 16px 40px rgba(13, 22, 38, 0.14); /* Animoidaan opacity + transform (ei display), jotta hover-avaus "rullaa alas" ja häivyttyy esiin. transform-origin ylhäällä = laskeutuu alaspäin. */ opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top center; transition: opacity 130ms ease, transform 170ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 170ms; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 130ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .nav-dropdown-menu li a { display: block; padding: 10px 16px; font-size: var(--fs-sm); border-radius: 10px; opacity: 0; transform: translateY(-5px); transition: opacity 130ms ease, transform 130ms ease, background 150ms ease, color 150ms ease; } .nav-dropdown:hover .nav-dropdown-menu li a, .nav-dropdown:focus-within .nav-dropdown-menu li a { opacity: 1; transform: none; } /* Nopea porrastus: vaihtoehdot ilmestyvät peräkkäin häivytyksellä. */ .nav-dropdown:hover .nav-dropdown-menu li:nth-child(1) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(1) a { transition-delay: 30ms; } .nav-dropdown:hover .nav-dropdown-menu li:nth-child(2) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(2) a { transition-delay: 50ms; } .nav-dropdown:hover .nav-dropdown-menu li:nth-child(3) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(3) a { transition-delay: 70ms; } .nav-dropdown:hover .nav-dropdown-menu li:nth-child(4) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(4) a { transition-delay: 90ms; } .nav-dropdown:hover .nav-dropdown-menu li:nth-child(5) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(5) a { transition-delay: 110ms; } .nav-dropdown:hover .nav-dropdown-menu li:nth-child(6) a, .nav-dropdown:focus-within .nav-dropdown-menu li:nth-child(6) a { transition-delay: 130ms; } .nav-dropdown-menu li a:hover { background: var(--bone); color: var(--c-accent); } @media (prefers-reduced-motion: reduce) { .nav-dropdown-menu, .nav-dropdown-menu li a { transition: opacity 80ms linear; transform: none; } .nav-dropdown:hover .nav-dropdown-menu li a, .nav-dropdown:focus-within .nav-dropdown-menu li a { transition-delay: 0s; } } .nav-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); color: var(--c-body); } .nav-phone svg { width: 16px; height: 16px; flex-shrink: 0; } .nav-phone:hover { color: var(--c-accent); } /* Kenelle numero kuuluu: nimi pienenä numeron yläpuolella, ikoni pysyy sivussa. */ .nav-phone-text { display: flex; flex-direction: column; line-height: 1.2; } .nav-phone-name { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--c-muted, var(--slate)); } .nav-phone-number { font-weight: 600; } .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 12px; margin-right: -12px; } .nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 200ms var(--ease), opacity 200ms var(--ease); } .nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile { position: fixed; inset: 72px 0 0 0; background: var(--bone); z-index: 49; padding: 40px var(--gutter); transform: translateX(100%); transition: transform 300ms var(--ease); overflow-y: auto; } .nav-open .nav-mobile { transform: translateX(0); } .nav-mobile ul { list-style: none; } .nav-mobile > ul > li { border-bottom: 1px solid var(--hairline); } .nav-mobile > ul > li > a, .nav-mobile > ul > li > span { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3r); letter-spacing: -0.015em; display: block; padding: 20px 0; color: var(--c-body); } .nav-mobile-sub { padding-bottom: 16px; } .nav-mobile-sub a { display: block; font-family: var(--sans); font-size: var(--fs-md); padding: 8px 0 8px 16px; color: var(--c-body); } .nav-mobile-sub a:hover { color: var(--c-accent); } .nav-mobile-cta { margin-top: 32px; } @media (min-width: 1024px) { .nav-links { display: flex; } .nav-toggle, .nav-mobile { display: none; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); } .hero-image { position: absolute; inset: 0; background-image: url('../images/hero-concrete-repair.jpg'); background-size: cover; background-position: center; filter: saturate(0.85) brightness(0.78); } .hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0.15) 0%, rgba(26,26,26,0.55) 100%); } .hero-content { position: relative; z-index: 2; color: var(--c-on-dark); padding: 80px 0 64px; width: 100%; } .hero-content h1 { color: var(--c-on-dark); max-width: 18ch; } .hero-content h1 .accent { color: var(--c-accent); } .hero-content .lead { color: var(--c-on-dark); opacity: 0.92; margin-top: 24px; max-width: 52ch; } .hero-eyebrow { font-family: var(--sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-on-dark); opacity: 0.7; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: inline-block; width: 32px; height: 1px; background: var(--bone); opacity: 0.6; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; } .hero-ctas .btn-primary { background: var(--bone); color: var(--c-body); border-color: var(--bone); } .hero-ctas .btn-primary:hover { background: var(--rust); color: var(--c-on-dark); border-color: var(--rust); } .hero-ctas .btn-secondary { border-color: var(--bone); color: var(--c-on-dark); } .hero-ctas .btn-secondary:hover { background: var(--bone); color: var(--c-body); } .hero-meta { position: absolute; bottom: 32px; right: 0; left: 0; z-index: 2; display: none; } @media (min-width: 1024px) { .hero-meta { display: block; } .hero-meta .container { display: flex; justify-content: flex-end; } .hero-meta-card { background: var(--bone); padding: 24px 32px; max-width: 320px; } .hero-meta-card .eyebrow { margin-bottom: 8px; } .hero-meta-card .num { font-family: var(--serif); font-size: var(--fs-h1r); line-height: 1; color: var(--c-body); } .hero-meta-card .label { font-family: var(--sans); font-size: var(--fs-sm); color: var(--c-body); margin-top: 8px; } } /* Hero variant for sub-pages */ .hero-sub { background: var(--bone); min-height: 0; padding: 80px 0 48px; border-bottom: 1px solid var(--hairline); } .hero-sub h1 { color: var(--c-body); max-width: 22ch; } /* Referenssien listaussivu: sama otsikkokoko kuin kohdesivujen .rt-hero-title, jotta koko referenssiosio on yhtenäinen. */ .hero-sub--refs h1 { font-size: var(--fs-h2r); line-height: 1.08; } .hero-sub .lead { color: var(--c-body); margin-top: 24px; } @media (min-width: 768px) { .hero-sub { padding: 120px 0 80px; } } /* ============================================================ Credibility strip ============================================================ */ .credstrip { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 24px 0; } .credstrip-inner { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-body); text-align: center; } .credstrip-inner span:not(:last-child)::after { content: '·'; margin-left: 32px; display: none; } @media (min-width: 768px) { .credstrip-inner span:not(:last-child)::after { display: inline; } .credstrip-inner { gap: 0; } } /* ============================================================ Section header ============================================================ */ .section-header { margin-bottom: 56px; max-width: 720px; } .section-header .lead { margin-top: 16px; color: var(--c-body); } /* ============================================================ Services grid (homepage) ============================================================ */ /* ===== Services list (horizontal cards) ===== */ .services-list { display: flex; flex-direction: column; margin-top: 48px; border-top: 1px solid var(--hairline); } .service-row { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--hairline); align-items: center; } .service-row-image { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; background: var(--hairline); } .service-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); } .service-row-image:hover img { transform: scale(1.03); } .service-row-body { display: flex; flex-direction: column; gap: 12px; } .service-row-body h3 { margin: 0; font-size: var(--fs-xl); text-transform: none; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: var(--c-body); } .service-row-meta { margin: 0; font-size: var(--fs-sm); color: var(--c-body); font-family: var(--sans); } .service-row-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--c-body); } .service-row-specs li { display: inline-flex; align-items: center; gap: 6px; } .service-row-specs svg { color: var(--c-body); flex-shrink: 0; } .service-row-desc { margin: 0; color: var(--c-body); font-size: var(--fs-sm); line-height: 1.55; max-width: 52ch; } .service-row-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .btn-solid { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; background: var(--ink); color: var(--c-on-dark); font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; border-radius: 4px; text-decoration: none; transition: background 200ms var(--ease); } .btn-solid:hover { background: #000; color: var(--c-on-dark); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; background: transparent; color: var(--c-body); font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--hairline); border-radius: 4px; text-decoration: none; transition: border-color 200ms var(--ease), background 200ms var(--ease); } .btn-outline:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); } .service-row-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 0 0; border-top: 1px solid var(--hairline); } .service-row-stat { display: flex; flex-direction: column; gap: 2px; } .service-row-stat .val { font-family: 'Oswald', var(--sans); font-size: var(--fs-xl); font-weight: 600; color: var(--c-body); letter-spacing: 0.01em; line-height: 1; } .service-row-stat .lbl { font-size: var(--fs-xs); color: var(--c-body); text-transform: uppercase; letter-spacing: 0.05em; } /* ===== Desktop: 3-column horizontal layout ===== */ @media (min-width: 900px) { .service-row { grid-template-columns: 280px 1fr auto; gap: 40px; padding: 40px 0; align-items: center; } .service-row-image { aspect-ratio: 4/3; } .service-row-stats { grid-template-columns: 1fr; border-top: none; padding: 0; gap: 24px; min-width: 140px; } .service-row-stat .val { font-size: var(--fs-h3r); } .service-row-body h3 { font-size: var(--fs-h3r); } } @media (min-width: 1100px) { .service-row { grid-template-columns: 320px 1fr 180px; gap: 56px; } } /* ============================================================ Services section variants (B: Grid, C: Tabs) ============================================================ */ .services-variant { display: none; margin-top: 48px; } [data-services="a"] .services-variant[data-services-variant="a"], [data-services="b"] .services-variant[data-services-variant="b"], [data-services="c"] .services-variant[data-services-variant="c"], [data-services="d"] .services-variant[data-services-variant="d"] { display: block; } /* ===== Variant D: Icon strip ===== */ .services-iconstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: start; padding: 32px 0; } .service-icon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; padding: 16px 8px; text-decoration: none; color: var(--c-body); } .service-icon-art { color: var(--c-body); transition: color 220ms var(--ease), transform 220ms var(--ease); } .service-icon-art svg { width: 56px; height: 56px; display: block; } .service-icon-label { font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; color: var(--c-body); transition: color 220ms var(--ease); } .service-icon:hover .service-icon-art { color: var(--c-accent); transform: translateY(-4px); } .service-icon:hover .service-icon-label { color: var(--c-accent); } @media (max-width: 900px) { .services-iconstrip { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } } @media (max-width: 480px) { .services-iconstrip { grid-template-columns: 1fr; } } [data-services="a"] .services-variant[data-services-variant="a"] .services-list { margin-top: 0; } /* ===== Variant B: Card grid ===== */ .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .service-card { display: flex; flex-direction: column; flex: 1 1 100%; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); } .service-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.06); transform: translateY(-2px); } /* Image sits as its own inset "card" inside the service card, so a thin sliver of the card shows on its left, right and top edges. */ .service-card-image { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--hairline); margin: 10px 10px 0; border-radius: 10px; } .service-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); } .service-card-image:hover img { transform: scale(1.04); } .service-card-num { position: absolute; top: 12px; left: 12px; font-family: 'Oswald', var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; color: var(--c-on-dark); background: rgba(26,26,26,0.7); padding: 4px 10px; border-radius: 999px; } .service-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; } .service-card-body h3 { margin: 0; font-size: var(--fs-lead); text-transform: none; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: var(--c-body); } /* .service-card-meta poistettu: se toisti työlajilistan sisällön kauttaviivoin eroteltuna, ja kortissa oli kolme lähes samannäköistä tummaa tekstilohkoa peräkkäin. */ .service-card-desc { margin: 0; color: var(--c-body); font-size: var(--fs-sm); line-height: 1.6; } /* "Työlajit" alkaa kaikissa korteissa samalta korkeudelta. Kuvaukset ovat eri mittaisia, joten niille varataan neljän rivin tila, mikä on pisimmän kuvauksen rivimäärä kapeimmalla monipalstaisella leveydellä. min-height vain täyttää eikä katkaise, joten pidempi teksti saa jatkaa normaalisti. Vain monipalstaisilla leveyksillä: yhdessä palstassa kortit ovat allekkain eikä tasauksella ole merkitystä, jolloin varaus tuottaisi vain turhaa tyhjää. */ @media (min-width: 640px) { .service-card-desc { min-height: calc(4 * 1.6em); } } /* Työlajilistan pikkuotsikko. Sivuston eyebrow-konventio: versaalit, harva kirjainväli ja aksenttiväri. Tämä tekee listasta selvästi eri rekisterin kuin yllä oleva leipäteksti. */ .service-card-tags-label { margin: 0; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); } .service-card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; } .service-card-tags li { font-size: var(--fs-xs); color: var(--c-body); background: var(--paper, #F5F2EC); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px; } /* Kaikki työlajit näkyvissä. Palluramuoto ei skaalaudu tähän: kolme palluraa on kevyt, mutta kahdestatoista tulee neljä riviä laatikoita ja kortti kasvaa hallitsemattomasti. Sama tieto ladotaan siksi tiiviiksi välimerkein erotetuksi listaksi, joka vie noin kolmasosan tilasta ja kestää myös sen, että työlajeja tulee lisää. Semantiikka säilyy: elementti on yhä