/* ============================================================ Skins — structural variants layered over styles.css. Selected per site in Site Settings ▸ Theme ▸ Site skin, applied as data-skin="…" on . "classic" is the base sheet and adds nothing here. Every rule is scoped to its skin so sites never affect one another. ============================================================ */ /* ------------------------------------------------------------ EDITORIAL — magazine feel: oversized serif headings, generous whitespace, rules instead of boxes, understated flat cards. ------------------------------------------------------------ */ [data-skin="editorial"] h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.02em; } [data-skin="editorial"] h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.015em; } [data-skin="editorial"] .section { padding-block: clamp(72px, 10vw, 150px); } [data-skin="editorial"] .eyebrow { letter-spacing: .22em; font-size: 11.5px; } [data-skin="editorial"] .service-card, [data-skin="editorial"] .quote-card, [data-skin="editorial"] .listing-card { border: 0; border-top: 2px solid var(--mkr-navy); border-radius: 0; box-shadow: none; background: transparent; padding-inline: 0; } [data-skin="editorial"] .service-card:hover, [data-skin="editorial"] .listing-card:hover { transform: none; box-shadow: none; border-top-color: var(--mkr-gold); } [data-skin="editorial"] .btn { border-radius: 0; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; } [data-skin="editorial"] .gold-rule { width: 120px; height: 2px; } [data-skin="editorial"] .page-hero { text-align: left; } [data-skin="editorial"] .media-frame { border-radius: 0; } /* ------------------------------------------------------------ BOLD — high-contrast, confident blocks, heavy weights, tight corners, colour-filled section headers. ------------------------------------------------------------ */ [data-skin="bold"] h1, [data-skin="bold"] h2, [data-skin="bold"] h3 { font-weight: 800; letter-spacing: -.03em; } [data-skin="bold"] h1 { font-size: clamp(38px, 5.4vw, 68px); } [data-skin="bold"] .section--ivory { background: var(--mkr-navy); color: #fff; } [data-skin="bold"] .section--ivory h2, [data-skin="bold"] .section--ivory h3 { color: #fff; } [data-skin="bold"] .section--ivory p { color: rgba(255,255,255,.82); } [data-skin="bold"] .service-card, [data-skin="bold"] .listing-card, [data-skin="bold"] .quote-card { border-radius: 2px; border: 2px solid var(--mkr-navy); box-shadow: none; background: #fff; color: var(--mkr-graphite); } [data-skin="bold"] .service-card:hover { background: var(--mkr-gold); border-color: var(--mkr-gold); } [data-skin="bold"] .btn { border-radius: 2px; font-weight: 800; padding-block: 15px; } [data-skin="bold"] .btn-gold { box-shadow: 4px 4px 0 var(--mkr-navy); } [data-skin="bold"] .eyebrow { background: var(--mkr-gold); color: var(--mkr-navy); display: inline-block; padding: 4px 12px; } [data-skin="bold"] .gold-rule { height: 6px; width: 64px; } /* ------------------------------------------------------------ MINIMAL — quiet, airy, hairline borders, no shadows, small type scale, lots of negative space. Good for premium/boutique brands. ------------------------------------------------------------ */ [data-skin="minimal"] { --shadow-card: none; --shadow-lift: none; } [data-skin="minimal"] h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -.01em; } [data-skin="minimal"] h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; } [data-skin="minimal"] .section { padding-block: clamp(64px, 9vw, 128px); } [data-skin="minimal"] .service-card, [data-skin="minimal"] .listing-card, [data-skin="minimal"] .quote-card { border: 1px solid var(--mkr-stone); box-shadow: none; border-radius: 2px; background: #fff; } [data-skin="minimal"] .service-card:hover, [data-skin="minimal"] .listing-card:hover { transform: none; border-color: var(--mkr-navy); box-shadow: none; } [data-skin="minimal"] .btn { border-radius: 2px; font-weight: 500; letter-spacing: .02em; } [data-skin="minimal"] .btn-gold { background: var(--mkr-navy); color: #fff; } [data-skin="minimal"] .gold-rule { width: 40px; height: 1px; opacity: .6; } [data-skin="minimal"] .eyebrow { color: var(--mkr-graphite); opacity: .55; letter-spacing: .18em; } [data-skin="minimal"] .trust-band { opacity: .75; } /* ------------------------------------------------------------ WARM — rounded, friendly, soft shadows and pill controls. Suits family-lettings and community-focused brands. ------------------------------------------------------------ */ [data-skin="warm"] .service-card, [data-skin="warm"] .listing-card, [data-skin="warm"] .quote-card, [data-skin="warm"] .media-frame { border-radius: 22px; } [data-skin="warm"] .service-card { box-shadow: 0 10px 30px rgba(6,26,46,.08); border: 0; } [data-skin="warm"] .service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(6,26,46,.13); } [data-skin="warm"] .btn { border-radius: 999px; padding-inline: 26px; } [data-skin="warm"] .section--ivory { background: color-mix(in srgb, var(--mkr-gold) 12%, #fff); } [data-skin="warm"] h1, [data-skin="warm"] h2 { letter-spacing: -.01em; } [data-skin="warm"] .eyebrow { border-radius: 999px; background: color-mix(in srgb, var(--mkr-gold) 22%, #fff); padding: 5px 14px; display: inline-block; } [data-skin="warm"] .gold-rule { border-radius: 999px; height: 4px; }