/* Kreate Spaces, main stylesheet. Phase 1 foundation: tokens + shell. */ /* Raleway, self-hosted (latin) */ @font-face{font-family:'Raleway';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/raleway-400.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/raleway-500.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/raleway-600.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/raleway-700.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/raleway-800.woff2') format('woff2');} :root{ /* Brand */ --kreate-green: #69bf28; --kreate-green-dark: #57a31e; --ink: #1b1f23; --ink-soft: #4a5158; --paper: #ffffff; --paper-soft: #f4f6f1; --line: rgba(27,31,35,.14); /* Fluid type scale */ --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.04rem + 0.7vw, 1.6rem); --step-2: clamp(1.5rem, 1.18rem + 1.4vw, 2.4rem); --step-3: clamp(2rem, 1.35rem + 2.9vw, 3.7rem); /* Layout. --wrap matches the Wix content guiderail (aligned to the header menu width). */ --wrap: 980px; --gut: clamp(1rem, 0.6rem + 2vw, 2.25rem); --space: clamp(2.75rem, 1.6rem + 4.5vw, 6.5rem); --radius: 10px; --header-h: 76px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:var(--step-0); line-height:1.6; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--kreate-green-dark); } .wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; } /* Skip link (a11y) */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100; } .skip-link:focus{ left:0; } .screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Header */ .site-header{ position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.08); } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); gap:1.5rem; } .site-brand{ display:inline-flex; align-items:center; } .site-brand img{ height:34px; width:auto; } /* Primary nav (two-level dropdowns) */ .site-nav{ display:none; } .nav-menu, .sub-menu{ list-style:none; margin:0; padding:0; } /* Mobile: revealed via the burger; submenus indented and always expanded */ @media (max-width:899px){ .site-header.nav-open .site-nav{ display:block; position:absolute; left:0; right:0; top:100%; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.08); padding:.25rem var(--gut) 1.25rem; max-height:calc(100vh - var(--header-h)); overflow:auto; } .site-header.nav-open .nav-menu a{ display:block; padding:.7rem 0; color:#fff; text-decoration:none; text-transform:uppercase; font-weight:600; font-size:var(--step--1); border-top:1px solid rgba(255,255,255,.1); } .site-header.nav-open .sub-menu{ padding-left:1rem; } .site-header.nav-open .sub-menu a{ text-transform:none; font-weight:500; color:rgba(255,255,255,.7); } } /* Desktop: horizontal bar with hover/focus dropdowns */ @media (min-width:900px){ .site-nav{ display:block; } .nav-menu{ display:flex; gap:1.6rem; align-items:center; } .nav-menu > li{ position:relative; } .nav-menu a{ display:block; color:var(--ink); text-decoration:none; font-size:var(--step--1); letter-spacing:.02em; text-transform:uppercase; font-weight:600; padding:.4rem 0; } .nav-menu a:hover{ color:var(--kreate-green-dark); } .nav-menu .menu-item-has-children > a::after{ content:""; display:inline-block; margin-left:.4em; border:.28em solid transparent; border-top-color:currentColor; transform:translateY(.15em); } .nav-menu .sub-menu{ position:absolute; top:100%; left:0; min-width:220px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 14px 34px rgba(0,0,0,.12); padding:.4rem 0; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease; z-index:60; } .nav-menu > li:hover > .sub-menu, .nav-menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .nav-menu .sub-menu a{ padding:.5rem 1.1rem; text-transform:none; font-weight:500; white-space:nowrap; } .nav-menu .sub-menu a:hover{ background:var(--paper-soft); color:var(--kreate-green-dark); } } .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; justify-content:center; width:44px; height:44px; padding:11px; background:none; border:0; cursor:pointer; } .nav-toggle span{ height:2px; background:#fff; display:block; transition:transform .2s ease, opacity .2s ease; } @media (min-width:900px){ .nav-toggle{ display:none; } } /* Hero (Phase 1 placeholder) */ .hero{ padding-block:var(--space); background:var(--paper-soft); } .hero__eyebrow{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--kreate-green-dark); font-weight:700; margin:0 0 1rem; } .hero__title{ font-size:var(--step-3); line-height:1.04; margin:0 0 1rem; font-weight:800; letter-spacing:-.01em; } .hero__lead{ font-size:var(--step-1); max-width:46ch; color:var(--ink-soft); margin:0 0 2rem; } .btn{ display:inline-block; background:#605e5e; color:#fff; text-decoration:none; font-weight:700; padding:.85rem 1.6rem; border-radius:var(--radius); letter-spacing:.02em; transition:background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover{ background:var(--kreate-green); color:#1b1f23; } /* Footer */ .site-footer{ background:var(--ink); color:#cfd3d6; padding-block:var(--space); font-size:var(--step--1); } .site-footer a{ color:#fff; } .site-footer__inner{ display:grid; justify-items:center; text-align:center; gap:1.5rem; } /* Top row: Made in Britain left, socials centre, CSG right (matches Wix). */ .site-footer__row{ width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; margin-bottom:.5rem; } .site-footer__mib{ justify-self:start; } .site-footer__social{ justify-self:center; } .site-footer__csg{ justify-self:end; } @media (max-width:640px){ .site-footer__row{ grid-template-columns:1fr; justify-items:center; gap:1.25rem; } } .site-footer__csg img{ height:100px; width:auto; } .site-footer__social{ list-style:none; display:flex; gap:1.15rem; padding:0; margin:0; } .site-footer__social img{ width:22px; height:22px; opacity:.8; transition:opacity .15s ease; } .site-footer__social a:hover img{ opacity:1; } .site-footer__mib{ display:inline-block; background:#fff; padding:.5rem .8rem; border-radius:6px; line-height:0; } .site-footer__mib img{ height:52px; width:auto; } .site-footer__nap{ line-height:1.7; } .site-footer__name{ margin:0 0 .6rem; } .site-footer__name img{ height:40px; width:auto; display:inline-block; } .site-footer__nap address{ font-style:normal; } .site-footer__nap a{ color:#cfd3d6; } .site-footer__nap a:hover{ color:#fff; } .site-footer__legal{ margin:.6rem 0 0; } .site-footer__legal a{ color:#fff; } .site-footer__meta{ margin:.25rem 0 0; color:#9aa0a5; letter-spacing:.03em; } .site-footer__meta a{ color:#cfd3d6; } .site-footer__social span{ display:none; } /* Homepage */ .home-hero{ position:relative; overflow:hidden; min-height:clamp(380px, 62vh, 660px); display:flex; align-items:flex-end; } .home-hero__slides{ position:absolute; inset:0; z-index:0; } /* own stacking context so per-slide z-index stays below the controls */ .home-hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 2.6s ease-in-out; } .home-hero__slide.is-active{ opacity:1; } .home-hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 55%); } .home-hero__inner{ position:absolute; left:0; right:0; bottom:clamp(1.5rem,4vw,3rem); z-index:2; text-align:center; color:#fff; padding-inline:1rem; } .home-hero__caption{ display:inline-block; font-size:var(--step-2); font-weight:400; text-transform:uppercase; letter-spacing:.18em; margin:0; padding:.5rem 1.5rem; border-radius:8px; background:rgba(20,22,25,.34); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 1px 10px rgba(0,0,0,.55); transition:opacity .9s ease; } .home-hero__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:clamp(48px,4.5vw,62px); height:clamp(48px,4.5vw,62px); padding:0; border:2px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; } .home-hero__arrow:hover{ background:var(--kreate-green); border-color:var(--kreate-green); color:#1b1f23; } .home-hero__arrow--prev{ left:clamp(.75rem,2vw,2rem); } .home-hero__arrow--next{ right:clamp(.75rem,2vw,2rem); } .home-hero__arrow span{ margin-top:-.18em; } .home-intro{ background:var(--kreate-green); color:#2b3035; padding-block:var(--space); } .home-intro__inner{ text-align:center; max-width:920px; margin-inline:auto; } .home-intro__title{ font-size:var(--step-2); margin:0 0 1.75rem; } .home-intro__icons{ margin:0 0 2.25rem; } .home-intro__icons img{ display:block; width:100%; max-width:680px; height:auto; margin-inline:auto; } .home-intro__body{ display:grid; gap:1.1rem; max-width:74ch; margin-inline:auto; font-size:var(--step-0); line-height:1.6; } /* Offering cards: full-bleed row, light Wix treatment (white-washed photo, grey text, ghost pill button). */ .home-offerings{ padding-block:clamp(1.5rem,3vw,2.5rem); } .offer-grid{ display:grid; grid-template-columns:1fr; gap:.5rem; padding-inline:clamp(.5rem,1.2vw,1rem); } @media (min-width:600px){ .offer-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .offer-grid{ grid-template-columns:repeat(5,1fr); } } .offer-card{ position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; min-height:clamp(420px,34vw,520px); padding:2rem 1.4rem; text-decoration:none; color:#605e5e; background-size:cover; background-position:center; overflow:hidden; transition:transform .2s ease; } .offer-card:hover{ transform:translateY(-2px); } .offer-card__shade{ position:absolute; inset:0; background:rgba(255,255,255,.64); transition:background .25s ease; } .offer-card:hover .offer-card__shade{ background:rgba(255,255,255,.53); } .offer-card__head{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; } .offer-card__title{ position:relative; font-size:var(--step-1); font-weight:700; line-height:1.12; text-transform:uppercase; letter-spacing:.06em; color:#605e5e; } .offer-card__desc{ font-size:var(--step--1); line-height:1.55; color:#605e5e; } .offer-card__cta{ position:relative; align-self:center; background:transparent; color:#605e5e; border:1px solid rgba(96,94,94,.55); padding:.6rem 1.2rem; border-radius:var(--radius); font-size:var(--step--1); font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .offer-card:hover .offer-card__cta{ background:var(--kreate-green); border-color:var(--kreate-green); color:#1b1f23; } /* Hex Shades band: show the full image height (like Wix), black heading on the sky, grey ghost button. */ .home-band{ position:relative; display:grid; min-height:clamp(380px,46vw,660px); background-size:cover; background-position:center top; } .home-band__inner{ position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:1.5rem; text-align:center; padding-block:1rem clamp(1.5rem,3vw,2.5rem); } .home-band__title{ font-size:var(--step-2); font-weight:400; color:#1b1f23; text-transform:uppercase; letter-spacing:.14em; margin:0; } .home-band .btn{ background:#605e5e; color:#fff; border:0; border-radius:var(--radius); font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .home-band .btn:hover{ background:var(--kreate-green); color:#1b1f23; } /* VIP: light Wix treatment, matching the cards (white-washed photo, grey text, ghost pill button). */ .home-vip{ position:relative; background-size:cover; background-position:center; } .home-vip__overlay{ position:absolute; inset:0; background:rgba(255,255,255,.78); } .home-vip__inner{ position:relative; color:#605e5e; padding-block:var(--space); max-width:920px; margin-inline:auto; text-align:center; } .home-vip__title{ font-size:var(--step-2); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .6rem; } .home-vip__sub{ font-size:var(--step-1); font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin:0 auto 1.5rem; } .home-vip__inner p{ margin:0 auto 1rem; max-width:72ch; } .home-vip .btn{ background:#605e5e; color:#fff; border:0; border-radius:var(--radius); font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .home-vip .btn:hover{ background:var(--kreate-green); color:#1b1f23; } .home-cta{ padding-block:var(--space); text-align:center; } .home-cta__text{ font-size:var(--step-1); max-width:52ch; margin:0 auto 1.5rem; color:var(--ink-soft); } /* Inner sections + product pages */ .section-title{ font-size:var(--step-2); font-weight:800; margin:0 0 1.5rem; } .prose{ max-width:68ch; } .prose p{ font-size:var(--step-1); line-height:1.6; margin:0 0 1.1rem; color:var(--ink-soft); } .product-hero{ position:relative; background-size:cover; background-position:center; min-height:clamp(320px,52vh,560px); display:flex; align-items:flex-end; } .product-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 55%); } .product-hero__inner{ position:relative; color:#fff; padding-block:clamp(2rem,5vw,3.5rem); } .product-hero__eyebrow{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 .5rem; } .product-hero__title{ font-size:var(--step-3); font-weight:800; line-height:1.05; margin:0; } /* Full-width section-background VIDEO band (sits between intro and specs, like Wix). */ .product-video-band{ width:100%; } .product-video-band__video{ display:block; width:100%; height:clamp(420px, 68vh, 720px); object-fit:cover; background:var(--ink); } /* matches the .product-hero height */ /* Product hero carousel — reuses the homepage slideshow pattern, scoped to .product-hero. */ .product-hero__slides{ position:absolute; inset:0; z-index:0; } .product-hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 2.6s ease-in-out; } .product-hero__slide.is-active{ opacity:1; } .product-hero__overlay{ z-index:1; } .product-hero__inner{ z-index:2; } .product-hero__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:clamp(44px,4vw,56px); height:clamp(44px,4vw,56px); padding:0; border:2px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:2.1rem; line-height:1; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; } .product-hero__arrow:hover{ background:var(--kreate-green); border-color:var(--kreate-green); color:#1b1f23; } .product-hero__arrow--prev{ left:clamp(.75rem,2vw,1.75rem); } .product-hero__arrow--next{ right:clamp(.75rem,2vw,1.75rem); } .product-hero__arrow span{ margin-top:-.16em; } /* Title scrim — matches the homepage caption scrim for legibility over the photos. */ .product-hero__title-scrim{ display:inline-block; background:rgba(20,22,25,.34); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:.3rem 1.1rem; border-radius:8px; text-shadow:0 1px 10px rgba(0,0,0,.55); } .product-intro{ padding-block:var(--space); } .product-specs{ padding-block:var(--space); background:var(--paper-soft); } .spec-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; } @media (min-width:680px){ .spec-grid{ grid-template-columns:repeat(2,1fr); } } .spec-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; } .spec-card__size{ font-size:var(--step-2); font-weight:800; color:var(--kreate-green-dark); margin:0 0 1rem; } .spec-list{ margin:0; } .spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-top:1px solid var(--line); } .spec-row dt{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; font-size:var(--step--1); } .spec-row dd{ margin:0; font-weight:700; } .product-gallery{ padding-block:var(--space); } .gallery-grid{ display:grid; gap:1rem; grid-template-columns:1fr; } @media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } } .gallery-item{ margin:0; } .gallery-item img{ width:100%; aspect-ratio:3 / 2; object-fit:cover; border-radius:var(--radius); display:block; } .gallery-item__cap{ margin-top:.5rem; text-align:center; font-size:var(--step--1); color:var(--ink-soft); letter-spacing:.02em; } /* Floor-plan examples (stretch/tipi): 3-up like Wix, show the whole plan (no crop), labelled. */ @media (min-width:760px){ .product-gallery--plans .gallery-grid{ grid-template-columns:repeat(3,1fr); } } .product-gallery--plans .gallery-item img{ aspect-ratio:auto; object-fit:contain; border-radius:0; } .product-gallery--plans .gallery-item__cap{ text-transform:uppercase; font-weight:600; } /* Single case study — Wix two-column magazine layout (text left, images right). Scoped to .cs* only; no global/.home-/.wrap/token edits. */ .cs{ padding-block:var(--space); } .cs__inner{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:start; } @media (min-width:880px){ .cs__inner{ grid-template-columns:1fr 1fr; } } .cs__title{ font-size:var(--step-2); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:1.1; color:#605e5e; margin:0 0 1.25rem; } .cs__h{ font-size:var(--step-1); font-weight:700; color:#605e5e; margin:1.5rem 0 .5rem; } .cs .prose p{ font-size:var(--step-0); line-height:1.7; color:var(--ink-soft); margin:0 0 1rem; } .cs__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; } .cs__media{ display:grid; gap:1rem; align-content:start; } .cs__img{ width:100%; height:auto; border-radius:var(--radius); display:block; } .cs__video{ position:relative; aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden; } .cs__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .product-cta{ padding-block:var(--space); background:var(--ink); color:#cfd3d6; text-align:center; } .product-cta .section-title{ color:#fff; } .app-list{ list-style:none; padding:0; margin:0 auto 1.75rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; justify-content:center; max-width:62ch; } .app-list li{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.4rem 1rem; font-size:var(--step--1); } .product-cta__text{ max-width:54ch; margin:0 auto 1.5rem; } /* Shared: page header, cards, chips, ghost button, plain hero */ .page-header{ padding-block:var(--space) calc(var(--space) * .55); border-bottom:1px solid var(--line); } .page-header__title{ font-size:var(--step-3); font-weight:800; line-height:1.05; margin:0 0 .75rem; } .page-header__lead{ font-size:var(--step-1); color:var(--ink-soft); max-width:56ch; margin:0; } .archive-list{ padding-block:var(--space); } .card-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; } @media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:980px){ .card-grid{ grid-template-columns:repeat(3,1fr); } } .card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.12); } .card__media{ display:block; aspect-ratio:3 / 2; background-size:cover; background-position:center; background-color:var(--paper-soft); } .card__body{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.25rem 1.35rem; } .card__title{ font-size:var(--step-1); font-weight:800; } .card__meta{ color:var(--ink-soft); font-size:var(--step--1); } .product-customise{ padding-block:var(--space); } .chip-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem .75rem; } .chip-list li{ background:var(--paper-soft); border:1px solid var(--line); border-radius:999px; padding:.45rem 1.05rem; font-size:var(--step--1); font-weight:600; } .btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); } .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; } .product-hero--plain{ min-height:auto; background:var(--ink); color:#fff; padding-block:var(--space); } .product-hero--plain .product-hero__title{ color:#fff; } /* Case study */ .cs-hero{ position:relative; background-size:cover; background-position:center; min-height:clamp(320px,52vh,560px); display:flex; align-items:flex-end; } .cs-hero--plain{ min-height:auto; background:var(--ink); color:#fff; padding-block:var(--space); align-items:stretch; } .cs-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05) 55%); } .cs-hero__inner{ position:relative; color:#fff; padding-block:clamp(2rem,5vw,3.5rem); } .cs-hero__eyebrow{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 .5rem; } .cs-hero__title{ font-size:var(--step-3); font-weight:800; line-height:1.05; margin:0; } .cs-hero__location{ font-size:var(--step-1); margin:.5rem 0 0; opacity:.9; } .cs-body{ padding-block:var(--space); } .cs-body .section-title{ margin-top:2.25rem; } .cs-body .prose > .section-title:first-child{ margin-top:0; } .cs-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; } /* Blog */ .wrap--narrow{ width:min(100% - (var(--gut) * 2), 760px); margin-inline:auto; } .post{ padding-block:var(--space); } .post-header__meta{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 .75rem; } .post-header__title{ font-size:var(--step-3); font-weight:800; line-height:1.06; margin:0; } .post-featured{ width:100%; height:auto; border-radius:var(--radius); margin:1.75rem 0 0; } .post-content{ margin-top:1.75rem; } .prose h2{ font-size:var(--step-2); font-weight:800; margin:2rem 0 .75rem; } .prose h3{ font-size:var(--step-1); font-weight:800; margin:1.6rem 0 .5rem; } .prose ul, .prose ol{ padding-left:1.25rem; margin:0 0 1.1rem; } .prose li{ margin:.35rem 0; } .prose img{ height:auto; border-radius:var(--radius); margin:1.25rem 0; } .prose blockquote{ margin:1.5rem 0; padding:.5rem 0 .5rem 1.25rem; border-left:3px solid var(--kreate-green); font-size:var(--step-1); color:var(--ink); } /* Generic page + contact */ .page-body{ padding-block:var(--space); } .contact-hero{ background:var(--kreate-green); color:#605e5e; padding-block:var(--space); } .contact-hero__eyebrow{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 .75rem; } .contact-hero__title{ font-size:var(--step-2); font-weight:800; margin:0 0 .75rem; } .contact-hero__lead{ font-size:var(--step-1); max-width:48ch; margin:0; } .contact-body{ padding-block:var(--space); } .contact-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; } @media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1.3fr; gap:3.5rem; } } .contact-address{ font-style:normal; font-size:var(--step-1); line-height:1.7; margin:0 0 1.25rem; } .contact-line{ font-size:var(--step-1); margin:.25rem 0; } .contact-line--muted{ color:var(--ink-soft); font-size:var(--step--1); margin-top:1.25rem; } /* v1 visual alignment to Wix typography (Raleway weights, wide tracking, greys, green nav) */ .home-hero__title, .product-hero__title{ font-weight:400; text-transform:uppercase; letter-spacing:.14em; } .cs-hero__title, .page-header__title, .post-header__title{ font-weight:700; } .home-intro__title, .home-vip__title, .section-title, .spec-card__size{ font-weight:700; } .card__title{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#605e5e; } .hero__title{ font-weight:400; text-transform:uppercase; letter-spacing:.14em; } .contact-hero__title{ font-weight:400; text-transform:uppercase; letter-spacing:.12em; } /* Wix centres hero overlay text */ .home-hero, .product-hero, .cs-hero{ align-items:center; } .home-hero__inner, .product-hero__inner, .cs-hero__inner, .contact-hero > .wrap{ text-align:center; margin-inline:auto; } .home-hero__title, .home-hero__lead{ max-width:28ch; margin-inline:auto; } .contact-hero__lead{ margin-inline:auto; } @media (min-width:900px){ .nav-menu > li > a{ color:var(--kreate-green); font-weight:500; } .nav-menu > li > a:hover{ color:var(--kreate-green-dark); } } /* Contact enquiry form on the green band (Wix style) */ .contact-form{ max-width:560px; margin:2.25rem auto 0; text-align:left; } .contact-form__fallback{ text-align:center; } .contact-form .gform_wrapper .gform_required_legend{ display:none; } .contact-form .gform_wrapper .gfield{ margin-bottom:.7rem; } .contact-form .gform_wrapper .gfield_label, .contact-form .gform_wrapper legend.gfield_label{ color:var(--ink); font-weight:700; font-size:var(--step--1); margin-bottom:.3rem; } /* dark-on-green (legible), not white */ /* Label-left, compact rows to match the live Wix layout (stacked on mobile). */ @media (min-width:680px){ .contact-form .gform_wrapper .gfield{ display:grid; grid-template-columns:130px 1fr; column-gap:1.25rem; align-items:center; } .contact-form .gform_wrapper .gfield_label, .contact-form .gform_wrapper legend.gfield_label{ grid-column:1; margin-bottom:0; align-self:center; } .contact-form .gform_wrapper .ginput_container, .contact-form .gform_wrapper .ginput_complex, .contact-form .gform_wrapper .gfield_checkbox, .contact-form .gform_wrapper .gfield_radio{ grid-column:2; } .contact-form .gform_wrapper .gfield_description{ grid-column:2; } .contact-form .gform_wrapper .gform_footer{ text-align:center; } } .contact-form .gform_wrapper .gfield_required{ color:var(--ink); } .contact-form .gform_wrapper input[type="text"], .contact-form .gform_wrapper input[type="email"], .contact-form .gform_wrapper input[type="tel"], .contact-form .gform_wrapper input[type="number"], .contact-form .gform_wrapper select, .contact-form .gform_wrapper textarea{ width:100%; background:#fff; border:0; border-radius:6px; padding:.6rem .8rem; font-family:inherit; font-size:var(--step--1); color:var(--ink); line-height:1.4; } .contact-form .gform_wrapper select option{ font-size:var(--step--1); } .contact-form .gform_wrapper .ginput_complex span{ display:block; } .contact-form .gform_wrapper .gchoice label, .contact-form .gform_wrapper .gfield_consent_description, .contact-form .gform_wrapper .gfield_description{ color:var(--ink); font-size:var(--step--1); } .contact-form .gform_wrapper .gform_footer{ margin-top:.5rem; } .contact-form .gform_wrapper .gform_footer input[type="submit"], .contact-form .gform_wrapper .gform_footer button{ background:#fff; color:var(--kreate-green-dark); border:0; border-radius:var(--radius); padding:.8rem 2.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; } .contact-form .gform_wrapper .gform_footer input[type="submit"]:hover{ background:var(--ink); color:#fff; } .contact-form .gform_wrapper .gform_validation_errors{ background:rgba(255,255,255,.14); color:#fff; border-radius:var(--radius); } .contact-details-section{ padding-block:var(--space); } /* Address (left) + map (right). */ .contact-grid{ display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:start; } @media (min-width:820px){ .contact-grid{ grid-template-columns:1fr 1fr; align-items:stretch; } } .contact-grid .contact-details{ max-width:46ch; } .contact-map{ display:flex; min-height:320px; } .contact-map__canvas{ flex:1; min-height:320px; border-radius:var(--radius); overflow:hidden; background:var(--paper-soft); } .contact-map__placeholder{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; min-height:320px; background:var(--paper-soft); border:1px dashed rgba(96,94,94,.4); border-radius:var(--radius); color:var(--ink-soft); } .contact-map__placeholder svg{ color:var(--kreate-green-dark); } .contact-map__placeholder span{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; font-weight:700; } /* The fallback placeholder must honour the [hidden] attribute — its display:flex above would otherwise override UA [hidden]{display:none}, leaving it in the flex row and squeezing the live map to half its column width. */ .contact-map__placeholder[hidden]{ display:none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ============================================================ PRODUCT PAGE OVERRIDES (template-product.php) Scoped to .product-* wrappers so the locked homepage (.home-*) cannot be affected. Append-only; do not reorder above. ============================================================ */ /* Legibility precedent: green-on-light recoloured to dark grey. .spec-card__size inherits --kreate-green-dark (#57a31e) which is ~2.9:1 on the .product-specs paper-soft card (fails AA). Scope the recolour to product specs only (homepage never renders .product-specs). */ .product-specs .spec-card__size{ color:#2b3035; } /* Legibility precedent: in-prose green links (#57a31e = 3.15:1 on white, fails normal-text AA) darkened to a legible dark grey. Scoped to the product intro prose so the global a{} colour and the homepage are untouched. .btn buttons keep their grey->green/black-text treatment. */ .product-intro .prose a{ color:#2b3035; text-decoration:underline; } .product-intro .prose a:hover{ color:var(--kreate-green-dark); } /* Parity (visual): Wix hero is a tall, full-scene image; the local letterbox crop only showed the dome roof tops. Raise min-height and lift the focal point so the garden scene shows like Wix. Scoped to .product-hero only (homepage uses .home-hero, so it is unaffected). */ .product-hero{ min-height:clamp(420px,68vh,720px); background-position:center 38%; } /* Parity: Wix shows a prominent green pill CTA ('Contact Us About Options') near the customise area. Rendered additively in the template as a legible .btn (grey->green/black-text precedent). Just spacing here, scoped to the product customise section. */ .product-customise__cta{ margin:1.75rem 0 0; } /* Sizes & specifications — mirror the Wix size diagrams (Option B): big diameter numeral + usable-space figure + height/width subline, with the dome illustration alongside, laid out across like Wix. The numeral uses --kreate-green-dark (#57a31e = 3.15:1 on white → passes WCAG AA large-text); Wix's brighter green (~2.9:1) fails, so this is the legible match, not a recolour to grey. Scoped to the .product-specs--diagram variant so template-dome-dining.php (plain .product-specs, old markup) is untouched. */ .product-specs--diagram{ background:var(--paper); } .product-specs--diagram .spec-grid{ grid-template-columns:1fr; gap:1.5rem 2rem; } @media (min-width:980px){ .product-specs--diagram .spec-grid{ grid-template-columns:repeat(var(--spec-cols, 3), minmax(0, 1fr)); } } .product-specs--diagram .spec-card{ display:flex; align-items:center; gap:1rem; min-width:0; background:transparent; border:0; border-radius:0; padding:.5rem 0; } .product-specs--diagram .spec-card__body{ flex:1 1 auto; min-width:0; } /* Illustration width is a per-size CSS var (--fig-w, set inline) but capped to a share of the card so it never forces the grid to overflow (1fr won't shrink past content); the subline is allowed to wrap (see below) so the text column can shrink too. */ .product-specs--diagram .spec-card__fig{ flex:0 0 auto; width:min(var(--fig-w, 180px), 46%); height:auto; align-self:center; } @media (max-width:979px){ .product-specs--diagram .spec-card__fig{ width:min(var(--fig-w, 180px), 42vw); } } .product-specs--diagram .spec-card__num{ font-size:clamp(2.3rem,5vw,3.2rem); font-weight:800; line-height:.92; color:var(--kreate-green-dark); margin:0; } .product-specs--diagram .spec-card__num small{ display:block; font-size:.30em; font-weight:600; letter-spacing:.05em; text-transform:lowercase; color:var(--ink-soft); margin-top:.15rem; } .product-specs--diagram .spec-card__space{ font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:800; line-height:1; color:var(--ink); margin:.55rem 0 0; } .product-specs--diagram .spec-card__space small{ display:block; font-size:.40em; font-weight:600; letter-spacing:.05em; text-transform:lowercase; color:var(--ink-soft); margin-top:.15rem; } .product-specs--diagram .spec-card__sub{ font-style:italic; color:var(--ink-soft); font-size:var(--step--1); margin:.7rem 0 0; } /* Customise with — parity with the Wix block, which is a CENTRED column: a small uppercase letter-spaced "CUSTOMISE WITH:" label, the options as a centred vertical text LIST (not chips), then a centred green pill CTA. Scoped entirely to .product-customise so the base .section-title, the shared .chip-list, the global .btn and the homepage are all untouched. Legibility deviations from Wix (intentional): - Wix renders the option list in a light lime green on white (~2.5:1, fails AA for normal-size text). The options are normal weight/size here, so they are recoloured to a legible dark grey (--ink-soft) rather than green; the centred uppercase letter-spaced LIST identity is preserved. - Wix's CTA is white-on-green (a fail); the .btn keeps the sanctioned grey -> green/black-text precedent and is simply centred to match Wix. */ .product-customise{ text-align:center; } .product-customise .section-title{ font-size:var(--step-0); font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--ink); margin:0 0 1.25rem; } /* Option list: left-justified, bulleted with kreate-green bullets, centred as a block. */ .product-customise .chip-list{ flex-direction:column; align-items:flex-start; gap:.35rem; width:fit-content; margin:0 auto; } .product-customise .chip-list li{ position:relative; background:transparent; border:0; border-radius:0; padding:.1rem 0 .1rem 1.4rem; font-size:var(--step-0); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); text-align:left; } .product-customise .chip-list li::before{ content:"\2022"; position:absolute; left:0; color:var(--kreate-green); font-weight:700; } .product-customise .product-customise__cta{ margin-top:1.75rem; } .product-customise .product-customise__cta .btn{ border-radius:999px; } /* ── Heading/logo block (below hero, on white) ─────────────────────────────── Wix shows a CENTRED heading block between the hero and the intro: 1. a grey uppercase letter-spaced product-type title ("WOODEN FRAME DOMES") 2. a green tagline subline ("HANDMADE. CUSTOMISABLE. LUXURY.") 3. a per-product oval wordmark logo (UNIDOME) Local v4 had none of this as a block (the tagline was folded into the hero eyebrow; the logo was dropped). Scoped entirely to .product-heading so the homepage and all global selectors stay byte-identical. Legibility deviation from Wix (intentional): Wix renders the subline in a light lime green on white (~1.9:1, fails AA). It is recoloured to --kreate-green-dark (#57a31e), which passes AA as LARGE text -- the subline is large/letter-spaced, so it qualifies. The grey title uses #605e5e for safe contrast rather than Wix's lighter ~#828284. */ .product-heading{ padding-block:var(--space) 0; } .product-heading__inner{ text-align:center; margin-inline:auto; } .product-heading__title{ font-size:var(--step-2); font-weight:400; text-transform:uppercase; letter-spacing:.14em; color:#605e5e; margin:0; } .product-heading__subline{ font-size:var(--step-1); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--kreate-green-dark); margin:.6rem 0 0; } .product-heading__logo{ display:block; height:auto; width:auto; max-width:200px; margin:1.75rem auto 0; } /* ============================================================ PRODUCT PAGE — WIX PARITY PASS (Unidome close-out) Goal: make the product page read as Wix's single CENTRED spine (hero -> heading -> intro -> specs -> customise), tighten the spec dome/number block, and align section spacing to Wix. Every rule below is scoped to .product-* / .product-specs--diagram selectors only — NEVER .wrap, .home-*, or any global element selector — so the byte-locked homepage stays untouched. Append-only; do not reorder above. Legibility deviations from Wix (no white/green-on-light failing contrast) are called out. ============================================================ */ /* G1 — CENTRE the intro column to match Wix's centred spine. Base .product-intro .prose was max-width:68ch with no auto margin, so the intro sat left-pinned against the wrap gutter while the hero, heading and customise blocks were already centred. Centre the block and narrow toward Wix's ~726px column, but keep the body text LEFT-aligned inside it (Wix left-aligns the intro paragraphs within the centred column). Scoped to .product-intro so the global .prose (blog/case-study) stays left. */ .product-intro .prose{ max-width:62ch; margin-inline:auto; } /* intro-fontsize / crit-03 — Wix intro body is ~16-17px with airy tracking; the local .prose p maxed at --step-1 (~25.6px) which made lines shorter, paragraphs taller and the whole page longer than Wix. Bring it to ~17-19px at 1440 and add a touch of tracking. Scoped to .product-intro only; the global .prose p (main.css L200) is untouched. Colour stays --ink-soft (the legible local choice; Wix's washed-out grey is a defect, not replicated). */ .product-intro .prose p{ font-size:clamp(0.9rem, 0.86rem + 0.2vw, 1rem); line-height:1.7; letter-spacing:.02em; } /* G3 — Wix shows the size diagrams with NO section heading; it jumps straight from the intro into the three spec cards. The generic template still needs the

for other products + screen readers, so visually suppress it on the --domes variant only (sr-only pattern) rather than deleting it. Scoped to .product-specs--diagram. */ .product-specs--diagram .section-title{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* G4 — Wix's spec trio spans ~x150-1185 (wider than the 980px wrap) and is balanced about the page centre. Widen the spec section's CONTAINER symmetrically (the inner .wrap, which already centres via margin-inline) so the trio matches Wix's width AND stays centred, rather than widening the grid alone (which pinned the left numeral and biased the trio right). Scoped to .product-specs--diagram only, so the global .wrap and every other section/page are untouched. */ .product-specs--diagram .wrap{ width:min(100% - var(--gut) * 2, 1100px); } /* spec-subline-wrap / crit-01 — Two spec-card refinements: (1) Wix's height/width subline is a SINGLE line ('2m height / 3.6m max width'); locally it wrapped to two lines because the flex body shares the grid cell with the fixed-px dome. Keep it on one line (text is short) and trim the card gap so the body keeps room. This also resolves the perceived dome 'gap' (taller card was the driver) and seats the dome tighter beside the text. (2) Wix renders the numerals in a LIGHT weight; the local 800 read chunky. Drop the diameter numeral + usable-space figure to 400 to match Wix's airy numerals. Colours kept (AA-large green / ink). Scoped to .product-specs--diagram only. */ .product-specs--diagram .spec-card{ gap:.6rem; } .product-specs--diagram .spec-card__sub{ white-space:normal; } .product-specs--diagram .spec-card__num, .product-specs--diagram .spec-card__space{ font-weight:400; } /* crit-02 — m² exponent: template now emits m2; scale the superscript down so it reads as a tidy exponent, not a second numeral. Scoped to .product-specs--diagram .spec-card__space. */ .product-specs--diagram .spec-card__space sup{ font-size:.5em; vertical-align:super; line-height:0; margin-left:.02em; } /* cta-02 — Restore Wix's brand-GREEN pill identity on the customise CTA, but with BLACK label text (Wix's white-on-green fails contrast and is a defect, not replicated — legibility precedent). The base .btn is grey->green/black on hover; here the rest state is already the green pill so it reads as Wix's green 'Contact Us About Options'. Scoped strictly to .product-customise__cta .btn so the global .btn and the homepage are untouched. */ .product-customise__cta .btn{ background:var(--kreate-green); color:#1b1f23; } .product-customise__cta .btn:hover{ background:var(--kreate-green-dark); color:#fff; } /* Standalone contact CTA band — Wix shows a green pill contact button on every product page (even those with no Customise list). Same legible green-pill/black-text treatment. */ .product-cta-band{ text-align:center; padding-block:0 clamp(2rem, 1.2rem + 3vw, 4rem); } .product-cta-band .btn{ background:var(--kreate-green); color:#1b1f23; border-radius:999px; } .product-cta-band .btn:hover{ background:var(--kreate-green-dark); color:#fff; } /* Secondary case-study CTA (green pill) after the intro, before the contextual image/specs. */ .product-cs-cta{ text-align:center; padding-block:0 clamp(1.5rem, 1rem + 2vw, 2.75rem); } .product-cs-cta .btn{ background:var(--kreate-green); color:#1b1f23; border-radius:999px; } .product-cs-cta .btn:hover{ background:var(--kreate-green-dark); color:#fff; } /* Intro lead line (a sub-tagline Wix shows above the body copy on some products). */ .product-intro__lead{ font-size:var(--step-1); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#605e5e; margin:0 0 1rem; } /* 2-column Customise block — image beside the list (Wix's eventdomes layout). */ .product-customise--media{ background:var(--paper-soft); } .product-customise--media .wrap{ display:grid; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; } @media (min-width:760px){ .product-customise--media .wrap{ grid-template-columns:1fr 1fr; } } .product-customise--media .product-customise__media img{ width:100%; border-radius:var(--radius); display:block; } .product-customise--media .product-customise__body{ text-align:left; } .product-customise--media .product-customise__body .section-title{ text-align:left; } .product-customise--media .chip-list{ width:auto; margin-inline:0; } /* sit left in its column (not centred) */ /* Grey-band spec rows (dining / wedding / glamping domes): [spec text | dome | floor-plan/scale diagram], stacked full-width like Wix. Faithful-but-legible: dark text on a LIGHT-grey band (Wix uses white text on a mid-grey band, which fails AA). */ .product-specs--band{ padding-block:clamp(2rem, 1.2rem + 3vw, 4rem); } .product-specs--band .section-title{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .spec-band-row{ display:grid; grid-template-columns:1fr; gap:1.25rem; align-items:center; background:var(--paper-soft); border-radius:var(--radius); padding:clamp(1.5rem, 3vw, 2.5rem); margin-bottom:1.25rem; text-align:center; } @media (min-width:760px){ .spec-band-row{ grid-template-columns:1.15fr .85fr 1fr; text-align:left; } } .spec-band-row__num{ font-size:var(--step-3); font-weight:800; line-height:1; color:var(--kreate-green-dark); margin:0 0 .6rem; } .spec-band-row__num small{ display:block; font-size:.26em; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:.3rem; } .spec-band-row__list{ list-style:none; padding:0; margin:0; display:grid; gap:.3rem; font-size:var(--step--1); color:var(--ink-soft); } .spec-band-row__list span{ display:inline-block; min-width:7.5em; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:#605e5e; } .spec-band-row__dome{ width:min(210px, 70%); height:auto; justify-self:center; } .spec-band-row__diagrams{ display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap; } .spec-band-row__diagrams img{ width:min(150px, 44%); height:auto; } /* G9 — Vertical rhythm: the global --space token (clamp 2.75-6.5rem) on every product section made the page ~1.6x taller than Wix's dense stack. Tighten the inter-section padding toward Wix, scoped to the product-* sections only. Do NOT touch the global --space token (the homepage depends on it). Heading block keeps its existing top space. */ .product-intro, .product-specs--diagram, .product-customise{ padding-block:clamp(2rem, 1.2rem + 3vw, 4rem); } /* ============================================================ CASE-STUDY / BLOG / CS-INDEX / NEWS — WIX PARITY PASS Faithful to the captured Wix page models (section order, grid columns, per-image captions), EXCEPT illegible green-on-light (recoloured to grey / --kreate-green-dark large-text only). Every rule is scoped to a template-own class (.cs-*, .post-*, .archive-list, .card-grid--index) — it touches ZERO global selectors (.wrap, .home-*, .btn base, bare elements, tokens), so the byte-locked homepage and shared product galleries stay untouched. Append-only; do not reorder above. ============================================================ */ /* ── CASE STUDY single (single-case_study.php) ───────────────── Gap #1 (grid): greenpeace.json has every image-grid block cols:1, so the case-study gallery is a single stacked column, NOT the 2-up product .gallery-grid. Force 1 column at all breakpoints, scoped to the case-study-only .cs-gallery wrapper so the shared product .gallery-grid 2-up rule (L222) is never touched. Gap #2 (crop): native ratios, no crop — mirror the existing .product-gallery--plans pattern (aspect-ratio:auto; object-fit: contain) so the 600x801 portrait dome artwork shows whole. Scoped to .cs-gallery only; the global L224 cover-crop is unchanged. */ .cs-gallery .gallery-grid{ grid-template-columns:1fr; } .cs-gallery .gallery-item img{ aspect-ratio:auto; object-fit:contain; } /* ── BLOG single (single.php) ────────────────────────────────── Body [gallery] shortcode (gap: cols + WP default styling). The WP inline