/* Theme Name: Mur & Puts GBG Theme URI: https://murochputsgbg.se Author: Mur & Puts i Göteborg AB Author URI: https://murochputsgbg.se Description: Custom WordPress theme for Mur & Puts i Göteborg AB. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 Text Domain: mur-puts-gbg */ :root { --radius: 0.5rem; --background: oklch(0.985 0.008 80); --foreground: oklch(0.22 0.02 60); --card: oklch(1 0 0); --card-foreground: oklch(0.22 0.02 60); --primary: oklch(0.27 0.03 60); --primary-foreground: oklch(0.985 0.008 80); --secondary: oklch(0.94 0.02 75); --secondary-foreground: oklch(0.27 0.03 60); --muted: oklch(0.95 0.015 80); --muted-foreground: oklch(0.45 0.02 60); --accent: oklch(0.62 0.13 45); --accent-foreground: oklch(0.985 0.008 80); --border: oklch(0.9 0.015 75); --shadow: 0 24px 70px rgb(55 43 28 / 12%); --font-serif: "Instrument Serif", ui-serif, Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Dark mode — triggered by data-theme="dark" on Set automatically from system preference or manually via toggle button */ :root[data-theme="dark"] { --background: oklch(0.16 0.018 60); --foreground: oklch(0.92 0.012 75); --card: oklch(0.2 0.018 60); --card-foreground: oklch(0.92 0.012 75); --primary: oklch(0.88 0.015 75); --primary-foreground: oklch(0.16 0.018 60); --secondary: oklch(0.22 0.018 62); --secondary-foreground: oklch(0.88 0.015 75); --muted: oklch(0.2 0.016 62); --muted-foreground: oklch(0.62 0.018 68); --accent: oklch(0.68 0.13 45); --accent-foreground: oklch(0.98 0.006 80); --border: oklch(0.28 0.018 62); --shadow: 0 24px 70px rgb(0 0 0 / 35%); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 200ms ease, color 200ms ease; } body.menu-open { overflow: hidden; } img, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; } h1 { max-width: 820px; font-size: clamp(3rem, 8vw, 4.8rem); } h2 { font-size: clamp(2.35rem, 5vw, 3.25rem); } h3 { font-size: 1.55rem; } ul { margin: 0; padding: 0; } .container { width: min(100% - 2.5rem, 72rem); margin-inline: auto; } .narrow { width: min(100% - 2.5rem, 52rem); } .section { padding-block: clamp(4.5rem, 9vw, 7rem); } .section-muted, .page-hero, .site-footer, .usp-bar { background: color-mix(in oklab, var(--secondary) 40%, transparent); } .text-center { text-align: center; } .skip-link { position: absolute; left: -999px; top: 1rem; z-index: 100; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); } .skip-link:focus { left: 1rem; } .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(16px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; width: min(100% - 2.5rem, 72rem); height: 4rem; margin-inline: auto; gap: 1.25rem; } .site-logo { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; } .site-logo__main { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1; color: var(--foreground); } .site-logo__tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-foreground); } .desktop-nav .menu, .mobile-menu .menu { list-style: none; } .desktop-nav .menu { display: flex; align-items: center; gap: 2rem; } .desktop-nav a { color: var(--muted-foreground); font-size: 0.9rem; transition: color 160ms ease; } .desktop-nav a:hover, .desktop-nav :is(.current-menu-item, .current_page_item) > a, .desktop-nav a.is-active { color: var(--foreground); } .phone-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.9rem; font-weight: 500; line-height: 1; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease; } .phone-button { padding: 0.75rem 1rem; background: var(--accent); color: var(--accent-foreground); } .button { min-height: 3rem; padding: 0.8rem 1.45rem; } .button:hover, .phone-button:hover { opacity: 0.9; transform: translateY(-1px); } .button--primary { background: var(--accent); color: var(--accent-foreground); } .button--outline { border-color: var(--border); background: var(--background); color: var(--foreground); } .button--outline:hover { background: var(--secondary); } .button--secondary { border-color: var(--border); background: var(--card); color: var(--foreground); } .button--ghost { border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); color: var(--primary-foreground); } .button--ghost:hover { background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 1rem; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; flex-shrink: 0; } .theme-toggle:hover { background: var(--secondary); color: var(--foreground); } .menu-toggle { display: none; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--foreground); cursor: pointer; } .menu-toggle span { display: block; width: 1.45rem; height: 2px; margin: 5px auto; border-radius: 999px; background: currentColor; } .mobile-menu { border-top: 1px solid var(--border); background: var(--background); } .mobile-menu__nav { width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: 0.8rem 1.2rem; } .mobile-menu a:not(.phone-button) { display: block; padding-block: 0.8rem; color: var(--foreground); font-size: 1rem; } .mobile-phone { width: 100%; margin-top: 0.5rem; padding-block: 1rem; } .hero-section { overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); align-items: center; gap: clamp(3rem, 8vw, 5rem); padding-block: clamp(4rem, 9vw, 7rem); } .hero-copy p, .page-hero p, .body-copy, .service-article p, .cta-section p, .cta-card p { color: var(--muted-foreground); } .hero-copy p { max-width: 34rem; margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.75; } .hero-copy em { color: var(--accent); font-style: italic; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } .star, .stars { color: var(--accent); } .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; } .button-row.centered { justify-content: center; } .hero-media { position: relative; } .image-frame, .service-card__image, .map-frame { overflow: hidden; border-radius: 1rem; background: var(--secondary); } .image-frame { aspect-ratio: 4 / 3; } .image-frame--portrait { aspect-ratio: 4 / 5; border-radius: 1rem; } .image-frame img, .service-card__image img { width: 100%; height: 100%; object-fit: cover; } .floating-review { position: absolute; left: -1.5rem; bottom: -1.5rem; max-width: 14rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); box-shadow: var(--shadow); } .floating-review .stars { letter-spacing: 0.05em; } .floating-review p { margin-top: 0.4rem; color: var(--card-foreground); font-size: 0.86rem; line-height: 1.35; } .floating-review span { display: block; margin-top: 0.3rem; color: var(--muted-foreground); font-size: 0.75rem; } .usp-bar { border-block: 1px solid var(--border); } .usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-block: 2.5rem; } .usp-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; line-height: 1.45; } .usp-item span, .check-list li::before { color: var(--accent); font-weight: 600; } .section-heading { margin-bottom: 3rem; } .split-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; } .eyebrow { margin-bottom: 0.8rem; color: var(--accent); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; } .text-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted-foreground); font-size: 0.9rem; } .text-link:hover { color: var(--foreground); } .card-grid { display: grid; gap: 1.5rem; } .three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-card, .value-card, .review-card, .form-card { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); } .service-card { display: block; overflow: hidden; transition: box-shadow 180ms ease, transform 180ms ease; } .service-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .service-card:hover img { transform: scale(1.05); } .service-card__image { aspect-ratio: 4 / 3; border-radius: 0; } .service-card__image img { transition: transform 520ms ease; } .service-card__body { padding: 1.5rem; } .service-card__body p, .value-card p { margin-top: 0.6rem; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.65; } .service-card__body span { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 1rem; color: var(--accent); font-size: 0.9rem; font-weight: 500; } .cta-section { background: var(--primary); color: var(--primary-foreground); padding-block: clamp(4.5rem, 8vw, 6rem); } .cta-section p { max-width: 40rem; margin: 1.25rem auto 0; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } .page-hero { border-bottom: 1px solid var(--border); padding-block: clamp(4rem, 8vw, 6rem); } .page-hero p:not(.eyebrow) { max-width: 42rem; margin-top: 1.25rem; font-size: 1.08rem; } .service-articles { display: grid; gap: clamp(4rem, 9vw, 6rem); } .service-article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(2.5rem, 7vw, 4rem); } .service-article--reverse .image-frame { order: 2; } .service-article p { margin-top: 1rem; } .check-list { display: grid; gap: 0.65rem; margin-block: 1.5rem 1.75rem; list-style: none; } .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; } .check-list li::before { content: "✓"; flex: 0 0 auto; } .body-copy { display: grid; gap: 1.5rem; font-size: 1.08rem; line-height: 1.75; } .lead-mark { color: var(--foreground); font-family: var(--font-serif); font-size: 1.55rem; } .value-grid { margin-top: 2.75rem; } .value-card { padding: 1.5rem; } .value-card > span { display: inline-flex; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; color: var(--accent); font-size: 1.35rem; } .value-card h3 { margin-top: 1rem; font-size: 1.3rem; } .bottom-action { margin-top: 4rem; } .rating-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; } .rating-block .stars { font-size: 1.1rem; letter-spacing: 0.08em; } .rating-block p { margin-top: 0.45rem; color: var(--muted-foreground); font-size: 0.9rem; } .rating-block strong { color: var(--foreground); } .review-card { display: flex; flex-direction: column; min-height: 100%; padding: 1.75rem; } .review-card blockquote { flex: 1; margin: 1rem 0 0; color: var(--card-foreground); font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.25; } .review-card figcaption { margin-top: 1.5rem; font-size: 0.9rem; } .review-card figcaption span { display: block; color: var(--muted-foreground); } .cta-card { margin-top: 4rem; padding: clamp(3rem, 6vw, 4rem); border-radius: 1rem; background: var(--primary); color: var(--primary-foreground); } .cta-card p { max-width: 36rem; margin: 0.8rem auto 1.75rem; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 4rem); } .contact-list { display: grid; gap: 1.1rem; margin-top: 1.25rem; list-style: none; } .contact-list li { display: flex; align-items: flex-start; gap: 0.85rem; } .contact-list li > span { color: var(--accent); font-size: 1.2rem; line-height: 1.3; } .contact-list small { display: block; color: var(--muted-foreground); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } .contact-list a, .contact-list address, .contact-list strong { color: var(--foreground); font-size: 1rem; font-style: normal; font-weight: 500; } .contact-list a:hover { color: var(--accent); } .map-frame { margin-top: 2rem; border: 1px solid var(--border); } .map-frame iframe { width: 100%; height: 16rem; border: 0; } .form-card { padding: clamp(1.5rem, 4vw, 2rem); } .wpcf7-form { margin-top: 1.5rem; } .wpcf7-form p { margin: 0 0 1rem; } .wpcf7-form label { display: block; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .wpcf7-form-control-wrap { display: block; margin-top: 0.4rem; } .wpcf7 input:not([type="submit"]), .wpcf7 textarea, .entry-content input, .entry-content textarea { width: 100%; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--background); color: var(--foreground); font: inherit; padding: 0.75rem 0.9rem; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .wpcf7 textarea { min-height: 9rem; resize: vertical; } .wpcf7 input:focus, .wpcf7 textarea:focus, .entry-content input:focus, .entry-content textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } .wpcf7 input[type="submit"] { display: inline-flex; min-height: 3rem; margin-top: 0.35rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 500; padding: 0.8rem 1.45rem; } .form-note { color: var(--muted-foreground); font-size: 0.8rem; } .form-note a { color: var(--foreground); font-weight: 500; } .content-area { min-height: 30vh; } .entry-content > * + * { margin-top: 1rem; } .site-footer { border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; padding-block: 3.5rem; } .footer-brand { grid-column: span 2; } .footer-brand p { max-width: 28rem; margin-top: 1rem; color: var(--muted-foreground); font-size: 0.9rem; } .footer-heading { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .footer-list { display: grid; gap: 0.75rem; margin-top: 1rem; color: var(--muted-foreground); font-size: 0.9rem; list-style: none; } .footer-list li { display: flex; align-items: flex-start; gap: 0.5rem; } .footer-links li { display: block; } .footer-list a:hover { color: var(--foreground); } .copyright-bar { border-top: 1px solid var(--border); } .copyright-bar__inner { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; color: var(--muted-foreground); font-size: 0.78rem; } @media (max-width: 900px) { .desktop-nav, .desktop-phone { display: none; } .menu-toggle { display: block; } .hero-grid, .service-article, .contact-grid { grid-template-columns: 1fr; } .service-article--reverse .image-frame { order: 0; } .three-columns, .four-columns, .usp-grid, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: span 2; } } @media (max-width: 640px) { .container, .narrow, .site-header__inner, .mobile-menu__nav { width: min(100% - 2rem, 72rem); } h1 { font-size: clamp(2.8rem, 13vw, 3.6rem); } .hero-grid { padding-block: 3.25rem 4rem; } .floating-review { position: static; max-width: none; margin-top: 1rem; } .split-heading { align-items: start; } .hide-mobile { display: none; } .three-columns, .four-columns, .usp-grid, .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .copyright-bar__inner { flex-direction: column; } .button-row, .button-row.centered { align-items: stretch; justify-content: stretch; } .button-row .button { width: 100%; } }