/* ========================================================================== WeCare - homepage revamp Systedo, 2026 Loaded on top of the recoded Disco template. Everything here is scoped to the homepage via Shoptet's own body class, so the rest of the shop is left untouched and no JavaScript is needed to apply it. All colours below are eyeballed from the design screenshots and MUST be replaced with the exact Figma values. ========================================================================== */ :root { /* Brand colours - PROVISIONAL, replace from Figma */ --wc-green-dark: #4a5c54; /* headings, primary buttons */ --wc-green-mid: #6b7f76; /* secondary text */ --wc-green-pale: #c3d2ac; /* newsletter band */ --wc-grey-bg: #eef0ee; /* pills, light section backgrounds */ --wc-white: #ffffff; --wc-text: #4a5c54; --wc-header-bg: var(--wc-white); /* Space between full-width sections and the edge of the window */ --wc-gutter: clamp(1rem, 2.5vw, 2.5rem); /* Which part of the hero photo stays visible when it is cropped to the slide. 50% is dead centre; lower values keep more of the top, which is where the hands and the product are. Tune per artwork. */ --wc-hero-focus: 30%; /* Radii */ --wc-radius-section: 24px; --wc-radius-card: 16px; --wc-radius-pill: 999px; } /* -------------------------------------------------------------------------- Header The recoded template sets `#header { background-color: transparent; }` globally, which makes the hero run underneath it. The new homepage design has a solid white header with the hero sitting below it, so the header is made opaque here - on the homepage only, via Shoptet's `type-index` class. Three states have to be covered or the header flickers between two looks while scrolling: the default state and the template's two scroll states. -------------------------------------------------------------------------- */ /* STAGED: applies only when also carries .wc-preview, so customers keep seeing the current transparent header while the revamp is being built. Add the class in devtools to check it, and drop `.wc-preview` from these three selectors when the new homepage goes live. Do not disable this with /* ... *\/ - CSS comments cannot nest, and the inner comments in this file would end the block early and swallow whatever rule follows. */ body.wc-preview.type-index #header, body.wc-preview.type-index.is-scrolling #header, body.wc-preview.type-index.is-header-fixed.is-header-scrolling #header { background-color: var(--wc-header-bg); } /* The admin bar pushes the header down by 25px. That offset is the template's and stays as it is - only the colour is overridden, so the preview inside the administration keeps working. */ @media (min-width: 768px) { html:not(.scrolled) body.wc-preview.type-index.admin-logged #header { background-color: var(--wc-header-bg); } } /* -------------------------------------------------------------------------- Page layout The template pulls the header out of the flow, so the content starts at the top of the window and runs underneath it. The new design has the hero start below the header, so the content is pushed down by the header's measured height. The fallback of 0 keeps the page usable if the script fails. The banner row is deliberately left alone: it is full-bleed through the row's negative margins, and cancelling those breaks the layout. The new hero will handle its own width instead. -------------------------------------------------------------------------- */ body.type-index #content-wrapper { padding-top: var(--wc-header-offset, 0px); } /* -------------------------------------------------------------------------- Shared building blocks Deliberately generic: the pill and the buttons come back on the category and product detail pages in the next phase, so they are not tied to the hero. -------------------------------------------------------------------------- */ .wc-pill { display: inline-block; margin: 0; padding: 0.75em 1.5em; border-radius: var(--wc-radius-pill); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } .wc-pill--light { background-color: rgba(255, 255, 255, 0.22); color: var(--wc-white); } .wc-pill--grey { background-color: var(--wc-grey-bg); color: var(--wc-green-mid); } .wc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.15em 2.75em; border-radius: var(--wc-radius-pill); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; } .wc-btn--light { background-color: var(--wc-white); color: var(--wc-text); } .wc-btn--light:hover, .wc-btn--light:focus-visible { background-color: rgba(255, 255, 255, 0.85); color: var(--wc-text); } .wc-btn--ghost { background-color: rgba(255, 255, 255, 0.22); color: var(--wc-white); } .wc-btn--ghost:hover, .wc-btn--ghost:focus-visible { background-color: rgba(255, 255, 255, 0.34); color: var(--wc-white); } /* -------------------------------------------------------------------------- Hero Built on Shoptet's own carousel banner rather than hand-written markup, so the client can keep editing the image, headline, text and link from the administration. Markup the template produces: .item > a > img span.extended-banner-texts span.extended-banner-title (accepts inline HTML) span.extended-banner-text span.extended-banner-link (a span, not a link) The whole banner is one anchor, so there can only ever be one call to action - a second button would mean an anchor inside an anchor. While the other six banners are still live, add the promo id to the scope to style this one only: body.type-index #carousel a[data-ec-promo-id='319'] ... -------------------------------------------------------------------------- */ body.type-index #carousel { margin: 0 var(--wc-gutter); border-radius: var(--wc-radius-section); overflow: hidden; } /* The template leaves the slide height to the artwork, which makes the text block taller than its own container and clips the top of it. The slide is therefore given an explicit height and the image is stretched to fill it. */ body.type-index #carousel .item { position: relative; min-height: min(80vh, 780px); } body.type-index #carousel .item > a { position: absolute; inset: 0; display: block; } body.type-index #carousel .item img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--wc-hero-focus); } /* Headline on the left, paragraph and buttons on the right, both sitting on the bottom edge - as in the design. */ body.type-index .extended-banner-texts { position: absolute; inset: auto 0 0 0; /* The template centres the block vertically by translating it upwards, which pulls it off the bottom edge and clips the top against the slide. The new design anchors it to the bottom instead. */ transform: none; /* !important is needed here and nowhere else in this file: the template forces `display` on this block with !important of its own, so the grid below has no effect without it. */ display: grid !important; /* The template caps this block at 670px, which squeezes both columns into a third of the banner. The new design uses the full width. */ max-width: none; grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2rem, 4vw, 3.5rem); color: var(--wc-white); } body.type-index .extended-banner-title { display: contents; } body.type-index .extended-banner-title > .wc-title { grid-column: 1; grid-row: 2 / span 2; margin: 0; font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; color: var(--wc-white); } /* Pill above the headline. Typed into the title field in the administration as: Prémiové doplňky stravy, ověřené odborníky followed by the headline itself. */ body.type-index .extended-banner-title .wc-badge { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: clamp(1.5rem, 4vw, 2rem); padding: 0.75em 1.5em; border-radius: var(--wc-radius-pill); background-color: rgba(255, 255, 255, 0.22); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } /* Second half of the headline, typed in the administration as a plain inside the title field. */ body.type-index .wc-title > span { color: rgba(255, 255, 255, 0.58); } body.type-index .extended-banner-text { grid-column: 2; grid-row: 2; display: block; margin: 0 0 1.5rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: var(--wc-white); } body.type-index .wc-hero__actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Quiet link in the bottom corner, added by the script. */ body.type-index .wc-hero__skip { grid-column: 1 / -1; grid-row: 4; justify-self: end; margin-top: 1.5rem; font-size: 1.125rem; color: var(--wc-white); text-decoration: none; } body.type-index .wc-hero__skip strong { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; } body.type-index .wc-hero__skip-arrow { display: inline-block; margin-left: 0.4em; transition: transform 200ms ease; } body.type-index .wc-hero__skip:hover .wc-hero__skip-arrow, body.type-index .wc-hero__skip:focus-visible .wc-hero__skip-arrow { transform: translateX(0.25em); } /* Styled the same whether it is still the template's span or the real link the script puts in its place. */ body.type-index .extended-banner-link { /* Same story as the text block above: the template forces `display` with !important, so without this the button never becomes a flex container and its label sits at the top instead of being centred. */ display: inline-flex !important; align-items: center; justify-content: center; /* Fixed height rather than vertical padding, so both buttons line up even though their labels differ in length. */ height: 3.25rem; padding: 0 2rem; line-height: 1; border: 0; /* The template sets its own 15px radius, so the pill shape has to be forced. */ border-radius: var(--wc-radius-pill) !important; background-color: var(--wc-white); color: var(--wc-text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 200ms ease; } body.type-index .extended-banner-link--primary:hover, body.type-index .extended-banner-link--primary:focus-visible { background-color: rgba(255, 255, 255, 0.85); color: var(--wc-text); } /* The template draws a 1px outline with an ::after pseudo-element whose inset values do not line up with the button, which is what makes the fill look smaller than the shape. The design has no outline at all. */ body.type-index .extended-banner-link::after { content: none !important; } /* Sits on the photo as a soft translucent panel. */ body.type-index .extended-banner-link--secondary { background-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); color: var(--wc-white); } body.type-index .extended-banner-link--secondary:hover, body.type-index .extended-banner-link--secondary:focus-visible { background-color: rgba(255, 255, 255, 0.3); color: var(--wc-white); } /* Matches the supplied mobile design: the banner runs edge to edge, the columns stack, the two buttons stay side by side and the quiet link keeps to the right. */ @media (max-width: 767px) { body.type-index #carousel { margin: 0; border-radius: 0; } body.type-index #carousel .item { min-height: 70vh; } body.type-index .extended-banner-texts { grid-template-columns: 1fr; } body.type-index .extended-banner-title > .wc-title, body.type-index .extended-banner-text, body.type-index .wc-hero__actions, body.type-index .wc-hero__skip { grid-column: 1; grid-row: auto; } body.type-index .extended-banner-text { margin-top: 1.5rem; } body.type-index .wc-hero__skip { justify-self: end; } }