/* =========================================================================
/kop-salj-dodsbo/ — page-scoped design (Figma 2940:54 "D / Köp & Sälj-sida").
Loaded ONLY on this page (functions/page-kop-salj.php) and every selector
is prefixed with body.page-kop-salj-dodsbo, so the shared blocks keep their
own design everywhere else.
Only a desktop frame exists. All layout/spacing overrides therefore sit in
the min-width query below; at ≤900px each block keeps its existing mobile
styles. The first section holds typography fixes that come from the Figma
components themselves (buttons, text styles), not from a breakpoint.
========================================================================= */
/* -------------------------------------------------------------------------
Component typography (all widths).
"Neue Augenblick" maps to the REGULAR font file; at font-weight 700 the
browser fakes the bold. Figma uses the real Bold cut (Primary/Secondary
button components 2681:2190 / 2681:2187, form title 2940:542).
---------------------------------------------------------------------- */
body.page-kop-salj-dodsbo .circla-button,
body.page-kop-salj-dodsbo .circla-button-outline,
body.page-kop-salj-dodsbo .hero-block__subtag,
body.page-kop-salj-dodsbo .circla-cf__title,
body.page-kop-salj-dodsbo .contact-form-block__phone-heading {
font-family: "Neue Augenblick Bold", "Neue Augenblick", sans-serif;
}
/* Legacy dist/styles/index.css forces every to Open Sans 16px !important
and every
to black !important. These restore the sizes/colours the
contact-form block itself declares (and Figma 2940:542 / 2940:600 / 2940:601). */
body.page-kop-salj-dodsbo .circla-cf__title {
color: #233129 !important;
}
body.page-kop-salj-dodsbo .contact-form-block__phone-heading {
font-family: "Neue Augenblick Bold", "Neue Augenblick", sans-serif !important;
font-size: 20px !important;
}
body.page-kop-salj-dodsbo .contact-form-block__phone-sub {
font-size: 14px !important;
}
/* The Extra Bold font file has no weight descriptor, so .circla-heading's
font-weight:700 makes Safari/Firefox fake-bold it on top (+26% / +11% ink
measured). Weight 400 renders the real Extra Bold cut in every browser. */
body.page-kop-salj-dodsbo .banner-cta-block__heading {
font-weight: 400 !important;
}
/* Primary button arrow: the 20px stroked icon from the component, in place
of the "→" text glyph. Lives on ::after, so the button's hover background
change can never hide it. */
body.page-kop-salj-dodsbo .circla-button::after {
content: "";
flex: 0 0 20px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16667 10H15.8333' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 4.16667L15.8333 10L10 15.8333' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
/* -------------------------------------------------------------------------
Desktop (Figma frame is 1440 wide; content 1264 = 1440 − 2×88).
Blocks that use a 1264px inner with 32px padding get 1328px so the
content itself is 1264px wide at 1440.
---------------------------------------------------------------------- */
@media (min-width: 901px) {
/* --- Hero (2940:85) --------------------------------------------------- */
body.page-kop-salj-dodsbo .hero-block {
height: 564px;
padding: 1px 0;
}
body.page-kop-salj-dodsbo .hero-block::before {
background: rgba(21, 28, 21, 0.56);
}
/* Figma centres the content in a 589px box with 56px bottom padding,
i.e. in the top 533px of the hero. */
body.page-kop-salj-dodsbo .hero-block__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 533px;
}
body.page-kop-salj-dodsbo .hero-block__subtag {
margin: 0 0 24px;
padding: 6px 13px;
border-radius: 32px;
line-height: 19.5px;
}
/* Heading keeps the site's Bold cut (same as /dodsbo/). */
body.page-kop-salj-dodsbo .hero-block__heading {
margin: 0 0 16px;
line-height: 62px !important;
}
body.page-kop-salj-dodsbo .hero-block__subheading {
max-width: 769px;
margin: 0 0 24px;
letter-spacing: -0.25px;
}
body.page-kop-salj-dodsbo .hero-block__ctas {
margin: 0;
}
/* "Kontakta oss" keeps the site's secondary button as-is (same as /dodsbo/). */
/* --- Process steps / services-cards (2940:102) ---------------------- */
body.page-kop-salj-dodsbo .services-cards-block {
padding: 104px 0 80px;
}
body.page-kop-salj-dodsbo .services-cards-block__inner {
max-width: 1328px;
}
body.page-kop-salj-dodsbo .services-cards-block__header {
margin-bottom: 32px;
}
body.page-kop-salj-dodsbo .services-cards-block__heading {
max-width: none;
}
/* Three 358px cards, 16px apart, centred (row is 1106px in Figma). */
body.page-kop-salj-dodsbo .services-cards-block__grid {
grid-template-columns: repeat(3, minmax(0, 358px));
justify-content: center;
gap: 16px;
margin-bottom: 32px;
counter-reset: kop-salj-step;
}
body.page-kop-salj-dodsbo .services-cards-block__card {
counter-increment: kop-salj-step;
}
/* Step number 32/40 green, 4px above a 22/28 title in a 278px box. */
body.page-kop-salj-dodsbo .services-cards-block__card-title {
display: block;
max-width: 278px;
font-size: 22px !important;
line-height: 28px !important;
color: #2c3536 !important;
}
body.page-kop-salj-dodsbo .services-cards-block__card-title::before {
content: counter(kop-salj-step);
display: block;
margin-bottom: 4px;
font-size: 32px;
line-height: 40px;
color: #688d78;
}
/* In Figma the link continues the paragraph (no 12px gap above it). */
body.page-kop-salj-dodsbo .services-cards-block__card-link {
margin-top: -12px;
}
/* --- Testimonials (2947:913) ----------------------------------------- */
/* 928px card, no arrows; dots sit inside the card, 21px from its bottom. */
body.page-kop-salj-dodsbo .testimonials-block__viewport {
max-width: 928px;
padding: 0;
}
body.page-kop-salj-dodsbo .testimonials-block .circla-sub-heading {
font-family: "Neue Augenblick Bold", "Neue Augenblick", sans-serif !important;
}
body.page-kop-salj-dodsbo .testimonials-block__nav {
display: none;
}
body.page-kop-salj-dodsbo .testimonials-block__slide::before {
font-size: 114px;
line-height: 36.5px;
}
body.page-kop-salj-dodsbo .testimonials-block__name {
line-height: 22px;
letter-spacing: -0.32px;
}
body.page-kop-salj-dodsbo .testimonials-block__name::before {
content: "– ";
}
body.page-kop-salj-dodsbo .testimonials-block__pagination {
bottom: 21px;
gap: 4px;
}
body.page-kop-salj-dodsbo .testimonials-block__pagination .swiper-pagination-bullet {
width: 8px;
background-color: #e7e7e7;
opacity: 1;
}
body.page-kop-salj-dodsbo .testimonials-block__pagination .swiper-pagination-bullet-active {
width: 8px;
background-color: #688d78;
}
/* --- Banner CTA (2947:1008) ------------------------------------------ */
/* Card touches the section top; band above the white strip is cream. */
body.page-kop-salj-dodsbo .banner-cta-block {
padding: 0 88px;
background-color: #fffbf3;
}
/* Figma crops the photo at 235.32% height, −73.58% top → 54.36% y. */
body.page-kop-salj-dodsbo .banner-cta-block__card {
background-position: 50% 54.36%;
}
body.page-kop-salj-dodsbo .banner-cta-block__subtag {
line-height: 19.5px;
}
body.page-kop-salj-dodsbo .banner-cta-block__heading {
line-height: 46px !important;
}
/* --- Map + CTA (2947:961) -------------------------------------------- */
body.page-kop-salj-dodsbo .map-cta-block {
padding: 88px 0 56px;
}
/* 597px tall card: text column (fills) + 517px map. Text and button
are centred as one group between two flexible spacer rows. */
body.page-kop-salj-dodsbo .map-cta-block__inner {
max-width: 1328px;
height: 597px;
grid-template-columns: minmax(0, 1fr) 517px;
grid-template-rows: 1fr auto auto 1fr;
grid-template-areas:
". map"
"text map"
"cta map"
". map";
}
body.page-kop-salj-dodsbo .map-cta-block__inner::before {
grid-row: 1 / 5;
}
body.page-kop-salj-dodsbo .map-cta-block__text {
padding: 0 56px;
}
body.page-kop-salj-dodsbo .map-cta-block__cta {
margin: 18px 56px 0;
}
/* Paragraphs are separated by one empty 24px line in Figma. */
body.page-kop-salj-dodsbo .map-cta-block__body p {
margin: 0 0 24px;
line-height: 24px;
color: #233129;
}
body.page-kop-salj-dodsbo .map-cta-block__body p:last-child {
margin-bottom: 0;
}
/* --- FAQ (2940:501) -------------------------------------------------- */
body.page-kop-salj-dodsbo .faq-block__inner {
max-width: 1328px;
}
body.page-kop-salj-dodsbo .faq-block__heading {
max-width: 862px;
color: #000 !important;
}
/* Question text box is 542px next to the 24px icon (576 − 24 − 10). */
body.page-kop-salj-dodsbo .faq-block__question {
gap: 10px;
}
/* Icon / Add and Icon / Remove (2232:14, 2232:10) instead of text glyphs. */
body.page-kop-salj-dodsbo .faq-block__toggle::before {
content: "";
width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z' fill='%23161616'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
body.page-kop-salj-dodsbo .faq-block__item.is-open .faq-block__toggle::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z' fill='%23161616'/%3E%3C/svg%3E");
}
/* --- Contact form (2940:537) ----------------------------------------- */
/* 732px form card + 512px image, 20px apart (justify-between in Figma). */
body.page-kop-salj-dodsbo .contact-form-block__inner {
max-width: 1328px;
grid-template-columns: minmax(0, 732fr) minmax(0, 512fr);
gap: 20px;
}
/* Trust badges in one row, 16px apart; 24px icon box with a 16px mark. */
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__usps {
flex-direction: row;
gap: 16px;
}
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__usps li {
gap: 2px;
}
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__check {
width: 16px;
height: 16px;
margin: 4px;
}
/* Eyebrow is the Bold cut in this frame (2940:541). */
body.page-kop-salj-dodsbo .contact-form-block .circla-sub-heading {
font-family: "Neue Augenblick Bold", "Neue Augenblick", sans-serif !important;
}
/* The CF7 markup has no header/fields group wrappers, so every child is
24px apart. Figma: header→badges 16, badges→fields 24, fields 16 apart,
16 to the button. */
body.page-kop-salj-dodsbo .contact-form-block .circla-cf {
gap: 16px;
}
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__usps + .circla-cf__field,
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__usps + .circla-cf__phone + .circla-cf__field {
margin-top: 8px;
}
/* Label sits 4px above a 44px input (border inside, as in Figma). */
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__field > label {
margin-bottom: 0;
}
body.page-kop-salj-dodsbo .contact-form-block .circla-cf input[type="text"],
body.page-kop-salj-dodsbo .contact-form-block .circla-cf input[type="email"],
body.page-kop-salj-dodsbo .contact-form-block .circla-cf input[type="tel"],
body.page-kop-salj-dodsbo .contact-form-block .circla-cf textarea {
padding: 9px 15px;
}
body.page-kop-salj-dodsbo .contact-form-block .circla-cf textarea {
display: block;
}
/* Phone block stays (page copy). Keeps its usual 12px gap to the
badges now that the card gap is 16px instead of 24px. */
body.page-kop-salj-dodsbo .contact-form-block .circla-cf__phone {
margin-top: -4px;
}
/* Photo follows the form card's height (the page's phone block makes the
card taller than Figma's 553px). Phone card 16.5px from the bottom, as
in Figma (top edge 391.5px into a 550px photo). */
body.page-kop-salj-dodsbo .contact-form-block__phone-card {
bottom: 16.5px;
}
body.page-kop-salj-dodsbo .contact-form-block__phone-sub {
line-height: normal;
}
body.page-kop-salj-dodsbo .contact-form-block__phone-row {
gap: 4px;
}
body.page-kop-salj-dodsbo .contact-form-block__phone {
gap: 8px;
font-size: 26px;
line-height: normal;
}
body.page-kop-salj-dodsbo .contact-form-block__phone svg {
width: 20px;
height: 20px;
}
body.page-kop-salj-dodsbo .contact-form-block__phone-note {
line-height: 21px;
}
}