/* ======================================================================== CEDIMA UI v2 – scoped styles Scope everything to .page-cedima so other brands stay untouched. Font: Open Sans (loaded in ) ======================================================================== */ /* --- Base typography on Cedima pages --- */ .page-cedima { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Body text sizing – only inside Cedima content blocks, not header/footer */ .page-cedima .cedima-summary p, .page-cedima .cedima-summary li, .page-cedima .cedima-summary td, .page-cedima .cedima-main-content p, .page-cedima .cedima-main-content li, .page-cedima .cedima-main-content td, .page-cedima .cedima-recommended-blades p, .page-cedima .cedima-recommended-blades li, .page-cedima .cedima-recommended-blades td, .page-cedima .cedima-faq-block p, .page-cedima .cedima-faq-block li, .page-cedima .cedima-faq-block td, .page-cedima .related-links p, .page-cedima .related-links li, .page-cedima .related-links td, .page-cedima .product-price-box p { font-size: 1.55rem; line-height: 1.6; color: #232323; } /* Headings (only inside Cedima main area) */ .page-cedima h1, .page-cedima h2, .page-cedima h3, .page-cedima h4 { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1f1f1f; margin-top: 0; } /* Hero H1 – main page title on product pages */ .page-cedima section.page-header h1.cedimayellow { font-size: 2.8rem; font-weight: 600; line-height: 1.25; max-width: 90%; /* keeps distance from Cedima logo */ color: #EDEEEF; border: none; padding-bottom: 10px; margin-top: 5px; } /* Content section headings (Ominaisuudet, Lisävarusteet, FAQ, etc.) */ .page-cedima h3 { font-size: 2.4rem; font-weight: 700; letter-spacing: 0.01em; margin-top: 1.6rem; margin-bottom: 0.9rem; line-height: 1.25; } /* Lead paragraph */ .page-cedima p.lead { font-size: 1.8rem; line-height: 1.55; max-width: 95%; margin-bottom: 2rem; } /* --- Generic spacing helpers --- */ .page-cedima .cedima-section { margin-top: 2.4rem; margin-bottom: 2.4rem; } .page-cedima .cedima-narrow { max-width: 760px; } /* --- Price box under lead text --- */ .page-cedima .product-price-box { display: inline-block; background: #f7f7f7; border-left: 4px solid #ffcc00; /* Cedima yellow */ padding: 0.6rem 1.4rem; margin: 0.8rem 0 1.8rem; } .page-cedima .product-price { font-size: 1.8rem; font-weight: 600; color: #222; margin: 0; } .page-cedima .product-price .price-value { font-size: 1.8rem; font-weight: 700; } .page-cedima .product-price .price-vat { font-size: 1.4rem; color: #555; margin-left: 0.4rem; } /* Contact line under CTA */ .page-cedima .cedima-contact { margin-top: 1.2rem; } /* --- CTA button – modern look --- */ .page-cedima .cedima-cta-wrapper { margin: 2.4rem 0 3.0rem; } .page-cedima .cedima-cta-button { display: inline-block; background: #ffcc00; color: #2a2e2f; padding: 1.4rem 2.6rem; font-size: 1.6rem; font-weight: 600; border-radius: 0.6rem; border: 2px solid #e6b800; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .page-cedima .cedima-cta-button:hover { background: #ffd633; border-color: #e6c300; box-shadow: 0 4px 10px rgba(0,0,0,0.22); transform: translateY(-2px); text-decoration: none; color: #2a2e2f; } .page-cedima .cedima-cta-button:active { background: #e6b800; transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.15); } /* Generic Cedima info box */ .cedima-info-box { background: #f7f7f7; padding: 16px 20px; margin: 25px 0; border-radius: 4px; font-size: 1.45rem; line-height: 1.6; } /* Variant: yellow border on the left (Cedima signature) */ .cedima-info-box--yellow { border-left: 6px solid #ffc400; } /* --- Recommended blades block --- */ .page-cedima .cedima-recommended-blades { background: #f8f8f8; border-left: 4px solid #ffcc00; padding: 1.8rem 2.2rem; margin: 2.6rem 0 3rem; } .page-cedima .cedima-recommended-title { font-size: 2.0rem; font-weight: 700; margin: 0 0 0.8rem; } .page-cedima .cedima-recommended-intro { margin: 0 0 1.4rem; font-size: 1.5rem; line-height: 1.5; color: #444; } .page-cedima .cedima-blade-row { margin-bottom: 0.8rem; } .page-cedima .cedima-blade-card { display: block; text-align: center; background: #ffffff; border: 1px solid #e3e3e3; border-radius: 4px; padding: 0.8rem 1.0rem 1.0rem; margin-bottom: 1.0rem; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease; } .page-cedima .cedima-blade-card img { max-width: 120px; margin: 0 auto 0.6rem; } .page-cedima .cedima-blade-name { display: block; font-weight: 600; font-size: 1.35rem; color: #2a2e2f; line-height: 1.3; } .page-cedima .cedima-blade-use { display: block; font-size: 1.25rem; color: #666; } .page-cedima .cedima-blade-card:hover { border-color: #ffcc00; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); } .page-cedima .cedima-blade-card:hover .cedima-blade-name { color: #003366; } .page-cedima .cedima-recommended-note { margin: 0.6rem 0 0; font-size: 1.35rem; color: #444; } /* --- Band saw blade recommendation table --- */ .cedima-bandblade-table-wrapper { width: 100%; overflow: hidden; } .cedima-bandblade-table th { white-space: nowrap; font-weight: 700; } /* MOBILE STACKED CARD MODE */ @media (max-width: 768px) { .cedima-bandblade-table thead { display: none; } .cedima-bandblade-table tr { display: block; margin-bottom: 22px; padding: 14px; background: #f8f9fb; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.09); } .cedima-bandblade-table td { display: flex; justify-content: space-between; padding: 6px 0; border: none !important; font-size: 1.5rem; } .cedima-bandblade-table td::before { content: attr(data-label); font-weight: 600; color: #333; margin-right: 10px; flex-basis: 50%; text-align: left; } .cedima-bandblade-table td:last-child { font-weight: 700; color: #000; } } /* --- FAQ section --- */ .page-cedima .faq-block p, .page-cedima .cedima-faq-block p { font-size: 1.5rem; margin-bottom: 0.8rem; } /* --- Specs table --- */ .page-cedima .table.table-striped th, .page-cedima .table.table-striped td { padding: 1.0rem 1.0rem; white-space: normal; } /* Specs tables that have a single cell per row: keep text left */ .page-cedima .table.table-striped td:only-child, .page-cedima .table.table-striped th:only-child { text-align: left !important; white-space: normal; } /* --- “Tutustu myös” list --- */ .page-cedima .related-links ul { font-size: 1.5rem; margin-left: 1.5rem; } /* --- Small utilities --- */ .page-cedima .boldblue { font-weight: 600; color: #004080; } /* --- Breadcrumb slightly tighter on Cedima pages --- */ .page-cedima .breadcrumb { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0.9rem; } /* ======================================================================== IMAGE GALLERY: main image + thumbnails (product pages) ======================================================================== */ .page-cedima .cedima-top-row { margin-top: 1.8rem; align-items: flex-start; } .page-cedima .cedima-gallery { margin: 2.0rem 0 2.8rem; } /* Main image: large but constrained */ .page-cedima .cedima-main-image { display: block; margin: 0 auto; max-width: 100%; max-height: 520px; object-fit: contain; } /* Thumb row under the main image */ .page-cedima .cedima-thumb-row { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } /* Each thumb clickable card */ .page-cedima .cedima-thumb-link { display: inline-block; border-radius: 4px; border: 2px solid transparent; padding: 2px; background: #fff; cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease; } .page-cedima .cedima-thumb { display: block; width: 96px; /* desktop thumb size */ height: auto; } /* Hover + active state (current image) */ .page-cedima .cedima-thumb-link:hover { border-color: #ffcc00; box-shadow: 0 3px 8px rgba(0,0,0,0.15); transform: translateY(-1px); } .page-cedima .cedima-thumb-link.is-active { border-color: #ffcc00; box-shadow: 0 0 0 1px #ffcc00; } .cedima-main-link { display: block; aspect-ratio: 1 / 1; /* or 4/3 depending on what looks best */ background: #fff; } .cedima-main-image { width: 100%; height: 100%; object-fit: contain; } /* Summary column (right side) */ .page-cedima .cedima-summary .lead { margin-top: 1.6rem; /* breathing room above the lead text */ } .page-cedima .intro-extra { font-size: 1.55rem; line-height: 1.6; margin-top: 1.2rem; margin-bottom: 2rem; max-width: 760px; color: #343434; } /* Main content row (Ominaisuudet + Lisävarusteet) */ .page-cedima .cedima-main-content { margin-bottom: 3rem; } /* ======================================================================== CEDIMA CATEGORY PAGE ELEMENTS (tiilisahat list page) ======================================================================== */ /* --- Hero banner ------------------------------------------------------- */ .page-cedima .cedima-hero-banner { position: relative; margin: 0; background: #f3f3f3; overflow: hidden; } .page-cedima .cedima-hero-banner > img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; } /* Panel on top of the hero image (right side on desktop) */ .page-cedima .cedima-hero-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; } .page-cedima .cedima-hero-panel { pointer-events: auto; background: rgba(255, 255, 255, 0.96); max-width: 430px; padding: 2rem 2.4rem; margin-right: 4%; border-left: 4px solid #ffcc00; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .page-cedima .cedima-hero-title { font-size: 2.4rem; font-weight: 700; margin: 0 0 0.8rem; } .page-cedima .cedima-hero-subtitle { font-size: 1.55rem; line-height: 1.55; margin: 0 0 1.6rem; } /* CTA area inside hero */ .page-cedima .cedima-hero-cta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; } .page-cedima .cedima-cta-btn { display: inline-block; background: #ffcc00; color: #2a2e2f; padding: 1.2rem 2.4rem; font-size: 1.6rem; font-weight: 600; border-radius: 0.6rem; border: 2px solid #e6b800; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .page-cedima .cedima-cta-btn:hover { background: #ffd633; border-color: #e6c300; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22); transform: translateY(-2px); color: #2a2e2f; } .page-cedima .cedima-cta-phone { font-size: 1.4rem; line-height: 1.5; } /* --- Feature band (“Miksi Cedima-työmaasahat?”) ------------------------ */ .page-cedima .cedima-feature-band { background: #f8f8f8; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 3rem 0 3.4rem; margin: 0 0 3rem; } .page-cedima .cedima-feature-headline { font-size: 2.4rem; font-weight: 700; margin: 0 0 2rem; } /* Equal-height rows/columns for feature boxes */ .page-cedima .cedima-feature-band .row { display: flex; flex-wrap: wrap; } .page-cedima .cedima-feature-band .row > [class*="col-"] { display: flex; } /* The white cards themselves */ .page-cedima .cedima-feature-box { background: #ffffff; border-radius: 6px; padding: 1.6rem 1.8rem; margin-bottom: 1.8rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; height: 100%; /* makes all eight boxes the same height in each row */ } .page-cedima .cedima-feature-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 0.6rem 1.4rem; border-radius: 4px; background: #ffcc00; color: #1f1f1f; font-weight: 700; font-size: 1.6rem; margin-bottom: 1.0rem; } .page-cedima .cedima-feature-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; } .page-cedima .cedima-feature-text { font-size: 1.45rem; margin: 0; } /* Vertical spacing between rows inside the feature band */ .page-cedima .cedima-feature-band .row + .row { margin-top: 2.4rem; /* adjust as needed */ } /* --- Product cards grid ------------------------------------------------ */ .page-cedima .cedima-product-section { margin: 3rem 0 3.4rem; } .page-cedima .cedima-product-headline { font-size: 2.4rem; font-weight: 700; margin: 0 0 0.8rem; } .page-cedima .cedima-product-intro { max-width: 760px; font-size: 1.55rem; margin-bottom: 2.2rem; } /* Overlay on portfolio tiles */ .page-cedima .cedima-card-overlay { background: linear-gradient( to top, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.0) 100% ); } .page-cedima .cedima-card-title { color: #f0f0f0; /* Cedima yellow */ font-size: 1.7rem; font-weight: 700; letter-spacing: 0.1px; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); } .page-cedima .cedima-card-subtitle { font-size: 1.35rem; line-height: 1.45; } /* Cedima-only default title background with transparency */ .page-cedima .thumb-info-title { background: rgba(58, 58, 58, 0.70) !important; /* tweak opacity as needed */ color: #fff !important; padding: 8px 14px; } /* Make sure images fill cards nicely */ .page-cedima .cedima-product-section .thumb-info-wrapper img { width: 100%; height: auto; object-fit: cover; } /* --- Trust block at bottom -------------------------------------------- */ .page-cedima .cedima-trust-block { background: #f3f3f3; padding: 3rem 0 3.4rem; margin-top: 0; border-top: 1px solid #e1e1e1; } .page-cedima .cedima-trust-headline { font-size: 2.2rem; font-weight: 700; margin: 0 0 1rem; } .page-cedima .cedima-trust-text { font-size: 1.55rem; margin: 0; } .page-cedima .cedima-trust-contact { font-size: 1.5rem; line-height: 1.7; } /* Cedima download box */ .page-cedima .cedima-download-box { display: flex; align-items: center; gap: 1.2rem; background: #f7f7f7; border-left: 4px solid #ffcc00; padding: 1.4rem 1.8rem; margin: 2rem 0 1rem; border-radius: 6px; } /* Unicode download icon */ .page-cedima .cedima-download-icon { font-size: 2.6rem; line-height: 1; margin-top: -2px; color: #1f1f1f; } /* Label above the link */ .page-cedima .cedima-download-label { font-size: 1.55rem; font-weight: 600; margin-bottom: 0.3rem; color: #1f1f1f; } /* PDF link */ .page-cedima .cedima-download-link { font-size: 1.45rem; color: #004080; text-decoration: none; } .page-cedima .cedima-download-link:hover { text-decoration: underline; } /* Cedima: Always show internal links as blue, even after visiting */ .page-cedima a, .page-cedima a:visited { color: #1a5fb4; /* your current link blue */ text-decoration: none; } .page-cedima a:hover { text-decoration: underline; } /* ============================================================================ CEDIMA UI – Timanttilaikka pages ============================================================================ */ .page-cedima .webshopbutton { display: inline-block; background: #ffcc00; color: #222; padding: 1.2rem 1.8rem; border-radius: 999px; font-size: 1.5rem; /* bigger text */ font-weight: 700; text-transform: uppercase; /* ← better CTA presence */ border: 2px solid #e6b800; box-shadow: 0 3px 6px rgba(0,0,0,0.15); text-decoration: none; } .page-cedima .webshopbutton:hover { background: #ffd633; border-color: #e6c300; text-decoration: none; } /* Quote/contact line under Kuiva/Märkä in blade panels */ .page-cedima .panel-body p.mt-xs.small { margin-top: 1.4rem; /* space from row above */ margin-bottom: 0; font-size: 1.4rem; /* override Bootstrap .small */ line-height: 1.5; } .page-cedima .panel-body .quote-line { display: block; font-weight: 600; /* bold "Yritysmyynti…" line */ color: #222; } .page-cedima .panel-body .quote-line a { font-weight: 600; /* stronger phone number */ color: #0056b3; /* same blue as other links */ text-decoration: none; } .page-cedima .panel-body .quote-line a:hover { text-decoration: underline; } .page-cedima .panel-body p.mt-xs.small { margin-top: 2.2rem !important; /* ← increase this freely */ margin-bottom: 0; font-size: 1.45rem; line-height: 1.55; } /* Highlighted Cedima-style business sales box */ .page-cedima .cedima-sales-box { margin-top: 2.4rem; margin-bottom: 0; padding: 1.0rem 1.6rem; background: #f8f8f8; border-left: 4px solid #ffcc00; /* Cedima yellow */ font-size: 1.55rem; line-height: 1.55; color: #222; } .page-cedima .cedima-sales-box a { font-weight: 700; color: #004c99; text-decoration: none; } .page-cedima .cedima-sales-box a:hover { text-decoration: underline; } /* Ensure icons inside the pictograms row align perfectly in the middle */ .page-cedima #pictos img { display: inline-block; vertical-align: middle; } /* ======================================================================== RESPONSIVE TWEAKS - MEDIA QUERIES - DON'T ADD HERE! ======================================================================== */ /* Tablet and below */ @media (max-width: 991px) { .page-cedima .cedima-summary { margin-top: 1.8rem; } .page-cedima .cedima-main-image { max-height: 420px; } /* Hero overlay becomes block under image */ .page-cedima .cedima-hero-content { position: static; } .page-cedima .cedima-hero-panel { max-width: none; margin: 0; border-left-width: 0; border-top: 4px solid #ffcc00; border-radius: 0; box-shadow: none; } } /* Phone */ @media (max-width: 767px) { .page-cedima section.page-header h1.cedimayellow { max-width: 100%; font-size: 2.1rem; } .page-cedima .cedima-recommended-blades { padding: 1.4rem 1.6rem; } .page-cedima .cedima-cta-wrapper { text-align: center; } .page-cedima .cedima-cta-button { width: 100%; max-width: 320px; } .page-cedima .cedima-gallery { text-align: center; } .page-cedima .cedima-thumb-row { justify-content: center; } .page-cedima .cedima-thumb { width: 80px; /* smaller thumbs on phones */ } .page-cedima .cedima-main-image { max-height: 360px; } .page-cedima .cedima-feature-band { padding: 2.2rem 0 2.6rem; } .page-cedima .cedima-product-section { margin-top: 2.4rem; } }