/* ============================================================ homehogs marketing shopfront — the whole design system. ONE global (non-scoped) stylesheet, linked from MarketingLayout so it only loads on the shopfront. Global on purpose: the reveal engine gates on a class the script adds to (js-on / mk-motion), which scoped CSS cannot target, and the brand-graphics kit is shared byte-for-byte across home, features and about. Everything is mk- prefixed so nothing here can reach the app. THE TWO SWITCHES, and nothing else: html.js-on marketing.js is present. The ONLY thing this turns on is the start-hidden state for [data-reveal]. The reveal itself runs for everyone, reduced motion included, so under js-on the page is never dead: elements fade in as they scroll into view. html.mk-motion js-on AND the visitor allows motion. This is the ONLY switch for richer movement: reveal translate/scale, parallax drift, the scattered story chips, and the pinned horizontal features. Without it those degrade to static / normal-scroll, still fully readable. With no JS at all neither class lands: every [data-reveal] is visible, nothing is pinned, nothing is transformed. That static form is the SEO surface. Type scale is deliberately modest. No single line ever fills the viewport. ============================================================ */ /* ---- Page shell ------------------------------------------------------- */ .mk-page { position: relative; /* overflow-x clip so a drifting blob or a pinned track can never widen the document; the horizontal feature track contains its own overflow too. */ overflow-x: clip; } .mk-section { position: relative; z-index: 1; max-width: 68rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); box-sizing: border-box; width: 100%; } /* The accent gradient on a heading's last word (components wrap it in .mk-grad). */ .mk-grad { background: linear-gradient(100deg, var(--hc-accent), var(--hc-highlight)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mk-section-head { max-width: 44rem; margin: 0 auto var(--hc-space-6); text-align: center; } .mk-section-head h2 { margin: 0 0 var(--hc-space-3); /* Same scale as the story intro, so every major home heading carries the same weight and the hierarchy reads as one system. */ font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-section-intro { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } /* ====================================================================== REVEAL ENGINE (works for EVERYONE, including reduced motion) ====================================================================== */ /* js-on: start hidden, fade in on .is-in. Opacity only, so reduced-motion visitors still get the reveal, just without movement. Stagger via --i. */ html.js-on [data-reveal] { opacity: 0; transition: opacity 0.6s ease; transition-delay: calc(var(--i, 0) * 70ms); } html.js-on [data-reveal].is-in { opacity: 1; } /* mk-motion: add the translate (and optional slight scale) on top. */ html.mk-motion [data-reveal] { transform: translateY(24px) scale(var(--reveal-scale, 1)); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); } html.mk-motion [data-reveal].is-in { transform: none; } /* ====================================================================== BRAND GRAPHICS KIT: blobs, floating motifs, wave dividers ====================================================================== */ /* Soft colour blobs sit behind the content, low opacity, decorative. JS sets --mk-drift (px) on each when motion is allowed for a gentle parallax; without it they simply rest. */ .mk-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .mk-blob { position: absolute; border-radius: 50%; filter: blur(36px); opacity: 0.5; transform: translateY(var(--mk-drift, 0px)); } /* Only hold a compositor layer for the blobs when they actually drift. */ html.mk-motion .mk-blob { will-change: transform; } .mk-blob--blossom { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hc-blossom) 55%, transparent), transparent 70%); } .mk-blob--sunshine { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hc-sunshine) 55%, transparent), transparent 70%); } @media (prefers-color-scheme: dark) { .mk-blob { opacity: 0.35; } } /* Floating motif chips (house, key, paper, bill, warranty, spark). Calm CSS bob, disabled under reduced motion. Sized by the container that places them. */ .mk-motif { display: inline-flex; align-items: center; justify-content: center; color: var(--hc-accent); } .mk-motif svg { width: 100%; height: 100%; display: block; overflow: visible; } .mk-float { animation: mk-bob 4.5s ease-in-out infinite; } .mk-float--slow { animation-duration: 6s; } .mk-float--delay { animation-delay: -1.6s; } .mk-float--delay2 { animation-delay: -3s; } @keyframes mk-bob { 0%, 100% { transform: translateY(0) rotate(var(--mk-tilt, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--mk-tilt, 0deg)); } } /* Wave / hill divider between sections so they flow rather than hard-stack. */ .mk-divider { position: relative; z-index: 1; display: block; width: 100%; height: clamp(40px, 6vw, 80px); margin: 0; color: var(--hc-surface); pointer-events: none; } .mk-divider svg { display: block; width: 100%; height: 100%; } .mk-divider--sunken { color: var(--hc-surface-sunken); } .mk-divider--soft { color: var(--hc-accent-soft); } .mk-divider--bg { color: var(--hc-bg); } .mk-divider--flip { transform: scaleY(-1); } /* When a divider caps the BOTTOM of a coloured section, its own strip carries that colour so the plain section below appears to rise up through it. */ .mk-divider--from-sunken { background: var(--hc-surface-sunken); } /* ====================================================================== HERO ====================================================================== */ .mk-hero { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4) var(--hc-space-7); box-sizing: border-box; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--hc-space-7); } /* Desktop: the opening view owns the whole first screen, copy and scene centred in it (the subtraction is the sticky topbar's two rows). Mobile keeps its natural height, which reads better on small screens. */ @media (min-width: 960px) { .mk-hero { min-height: calc(100vh - 8.5rem); align-content: center; justify-content: center; } } .mk-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hc-space-4); } .mk-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--hc-space-2); margin: 0; padding: 0.3em 0.85em; border-radius: var(--hc-radius-full); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: var(--hc-font-size-sm); font-weight: 600; } .mk-hero-headline { margin: 0; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--hc-text); } .mk-hero-sub { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-hero-actions { display: flex; gap: var(--hc-space-3); flex-wrap: wrap; } /* Oversized-but-sensible primary on the hero and CTA. */ .mk-btn-lg { font-size: var(--hc-font-size-lg); padding: var(--hc-space-3) var(--hc-space-5); min-height: 46px; } /* ---- The friendly brand scene (pig + house + bobbing motifs) ---- */ .mk-hero-scene { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 30rem; margin: 0 auto; justify-self: center; } /* A soft stage disc behind the scene. */ .mk-hero-scene::before { content: ""; position: absolute; inset: 8% 6% 4%; border-radius: 50%; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--hc-blossom) 20%, transparent), color-mix(in srgb, var(--hc-sunshine) 10%, transparent) 60%, transparent 72%); } .mk-scene-house { position: absolute; left: 6%; bottom: 6%; width: 52%; color: var(--hc-accent); filter: drop-shadow(0 8px 18px rgba(22, 35, 58, 0.12)); } .mk-scene-pig { position: absolute; right: 2%; bottom: 2%; width: 58%; filter: drop-shadow(0 10px 20px rgba(22, 35, 58, 0.14)); } .mk-scene-motif { position: absolute; width: 20%; filter: drop-shadow(0 6px 12px rgba(22, 35, 58, 0.12)); } .mk-scene-motif--bill { top: 4%; left: 30%; --mk-tilt: -6deg; } .mk-scene-motif--warranty { top: 20%; right: 4%; width: 22%; --mk-tilt: 7deg; } .mk-scene-motif--key { top: 46%; left: 2%; width: 17%; --mk-tilt: -10deg; } /* ====================================================================== STORY: everything a home scatters, gathered Chips are a tidy readable group by default (the settled state). Under mk-motion they START scattered (per-chip transform) and settle on reveal. ====================================================================== */ /* ---------------------------------------------------------------------- HOME STORY: full-screen pinned phrase parade ---------------------------------------------------------------------- */ .mk-parade { position: relative; z-index: 1; } /* Default (no JS / reduced motion): a plain, centred, readable stack. No pin, no absolute slides, everything visible. This is the SEO and reduced-motion form: heading and intro first, the lines in order, the resolve last. */ .mk-parade-pin { max-width: 52rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); } .mk-parade-sticky { display: flex; flex-direction: column; align-items: center; gap: var(--hc-space-6); text-align: center; } .mk-parade-slide { margin: 0; width: 100%; } .mk-parade-intro h2 { margin: 0 0 var(--hc-space-4); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-parade-intro p { margin: 0 auto; max-width: 42rem; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-parade-phrase { margin: 0; font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--hc-text); text-align: center; } /* The icon sits ABOVE the line on every screen size: a long phrase crowds an inline icon, and the stacked form gives each slide one calm centre line. */ .mk-parade-phrase-line { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hc-space-4); margin: 0; } .mk-parade-phrase i { display: inline-flex; align-items: center; justify-content: center; /* Sized against the phrase, not the page: the lines run up to 3.25rem, and a small chip above type that big read as an afterthought. */ width: clamp(4.25rem, 10vw, 5.5rem); height: clamp(4.25rem, 10vw, 5.5rem); border-radius: var(--hc-radius-full); /* A deeper mix than accent-soft, with a faint ring: the 12% soft tint vanished into the pale page and its own pink glow in light mode. */ background: color-mix(in srgb, var(--hc-accent) 17%, var(--hc-surface)); border: 1px solid color-mix(in srgb, var(--hc-accent) 32%, transparent); color: var(--hc-accent); font-size: clamp(1.9rem, 4.5vw, 2.5rem); box-shadow: var(--hc-shadow-sm); } /* The price of losing that scrap: small, quiet, and pointed. */ .mk-parade-cost { margin: var(--hc-space-3) 0 0; font-size: clamp(0.95rem, 1.6vw, 1.2rem); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--hc-accent); } .mk-parade-cost--resolve { color: var(--hc-text-muted); font-weight: 500; } .mk-parade-final { display: flex; flex-direction: column; align-items: center; gap: var(--hc-space-4); } .mk-parade-hog { width: clamp(12rem, 26vw, 18rem); filter: drop-shadow(0 10px 20px rgba(22, 35, 58, 0.14)); } .mk-parade-resolve { margin: 0; font-size: clamp(1.6rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } /* Pinned, full-screen form: motion only. The section grows tall (roughly one viewport of scroll per slide), the sticky wrapper pins for its length, and marketing.js fades/scales/drifts each slide through centre-screen as you scroll. The last slide holds because the reading position never passes it. */ html.mk-motion .mk-parade-pin { height: calc(var(--mk-slides, 7) * 80vh); max-width: none; margin: 0; padding: 0; } html.mk-motion .mk-parade-sticky { position: sticky; top: 0; height: 100vh; display: block; overflow: hidden; } /* A soft focal glow so the centred line has presence against the page. */ html.mk-motion .mk-parade-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 40% at 50% 46%, var(--hc-accent-soft), transparent 72%); pointer-events: none; } html.mk-motion .mk-parade-slide { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--hc-space-6) var(--hc-space-5); box-sizing: border-box; opacity: 0; will-change: opacity, transform; } /* The phrases get a touch more room to breathe when they own the whole screen. */ html.mk-motion .mk-parade-phrase { font-size: clamp(1.75rem, 5vw, 3.25rem); } html.mk-motion .mk-parade-resolve { font-size: clamp(1.9rem, 5.5vw, 3.5rem); } /* ====================================================================== FEATURES: a pad of Post-it notes. Motion peels them off one by one; otherwise they lay out as a plain, readable grid of tilted paper. ====================================================================== */ .mk-notes { position: relative; z-index: 1; /* Generous top breathing room so the heading clears the wave above it instead of crowding it. */ padding-top: clamp(3.5rem, 8vw, 6.5rem); } .mk-notes .mk-section-head { padding: 0 var(--hc-space-4); } /* Default (no JS / reduced motion): a grid of notes, all visible. */ .mk-notes-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: var(--hc-space-6); max-width: 72rem; margin: var(--hc-space-7) auto 0; padding: 0 var(--hc-space-5) var(--hc-space-7); } /* The handwriting. Caveat, self-hosted (SIL Open Font Licence, fetched from Google Fonts), latin subset only. Declared here rather than tokens.css because only the notes are handwritten; the product stays on the system stack. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* One Post-it: an outer note and an inner sheet. The OUTER carries position, tilt and the drop shadow; the INNER carries the paper and, during a peel, the fold clip-path. The split is load-bearing: clip-path clips everything an element paints, its shadow included, so folding a one-layer note's corner would erase its shadow whole. */ .mk-note { /* Physical paper is the one thing on this page that does NOT follow the site theme: a real Post-it in a dark room is the same colour, just lit less, and re-inking the paper navy broke the illusion completely. So the paper and ink are fixed daylight colours, deliberately not tokens, and only the page around the pad changes with the scheme. */ --note-ink: #272c34; position: relative; aspect-ratio: 1 / 1.02; border-radius: 4px 6px 10px 5px; box-shadow: 0 1px 2px rgba(15, 20, 30, 0.10), 0 10px 24px rgba(15, 20, 30, 0.13); transform: rotate(var(--note-tilt, 0deg)); } .mk-note-sheet { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: var(--hc-space-2); padding: clamp(var(--hc-space-5), 4.5vw, var(--hc-space-7)); /* Children clip to the ROUNDED box: the flap and its shadow are square shapes that otherwise poke past the paper's rounded corners, drawing a hard-cornered shadow under a soft-cornered sheet. */ overflow: hidden; /* Paper, not a UI card: barely-rounded corners, one slightly softer where real notes wear. */ border-radius: 4px 6px 10px 5px; background: /* paper fibre: monochrome turbulence noise, whisper quiet */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.045'/%3E%3C/svg%3E"), /* natural colour drift: a faint warm patch and a cooler wash, the way pulp paper never dyes perfectly evenly */ radial-gradient(90% 70% at 74% 82%, rgba(150, 118, 34, 0.05), transparent 62%), radial-gradient(70% 60% at 16% 66%, rgba(255, 255, 255, 0.30), transparent 64%), /* the room's light falling across the sheet from the top left */ radial-gradient(130% 105% at 28% 12%, rgba(255, 255, 255, 0.5), transparent 58%), var(--note-tint, #fdf3c6); /* Edge wear: a hairline of darker fibre round the rim, a bright catch of light along the top edges, and a whisper of ambient occlusion at the bottom where the sheet meets the pad. */ box-shadow: inset 0 0 0 1px rgba(120, 104, 58, 0.07), inset 1px 1px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(60, 55, 40, 0.05); } /* The glue strip where the pad was bound: a slightly darker band at the top. */ .mk-note-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 12%; border-radius: 4px 6px 0 0; background: linear-gradient(180deg, rgba(90, 80, 50, 0.075), rgba(90, 80, 50, 0.02) 70%, transparent); pointer-events: none; } /* A light band that sweeps the sheet while it bends during the peel. Only the motion script raises --mk-sheen; the static forms never show it. */ .mk-note-sheet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.35) 48%, transparent 60%); opacity: var(--mk-sheen, 0); pointer-events: none; } /* The fold: the paper's back face, revealed as the top-right corner folds over. The box is note-sized and square, clipped to the lower-left triangle, and scaled from the top-right corner; its diagonal then always lies exactly on the fold line the script cuts into the sheet's clip-path, so the front of the paper disappears under the fold precisely where the back appears, travelling over the written content the way a real fold does. The gradient runs perpendicular to the crease: a bright catch of light on the crease itself (the 50% stop IS the diagonal), then the back of the sheet shading toward the folded-over tip. */ .mk-note-flap { position: absolute; top: 0; right: 0; width: 100%; aspect-ratio: 1; pointer-events: none; clip-path: polygon(0 0, 100% 100%, 0 100%); transform-origin: 100% 0; transform: scale(var(--mk-fold, 0)); opacity: min(calc(var(--mk-fold, 0) * 8), 1); background: linear-gradient(225deg, transparent 49.4%, rgba(255, 255, 255, 0.95) 50%, color-mix(in srgb, var(--note-tint, #fdf3c6) 30%, #ffffff) 53%, color-mix(in srgb, var(--note-tint, #fdf3c6) 52%, #ffffff) 68%, color-mix(in srgb, var(--note-tint, #fdf3c6) 58%, #c9ccd4) 100%); } /* The shadow the lifted fold casts on the paper still lying flat: the flap's own shape, blurred soft and nudged past its loose edges, painted BENEATH the flap so only the spill beyond the fold shows. Blur gives it a real penumbra (no hard line anywhere), and because the blur is applied before the scale, a small young fold casts a tight shadow that softens and spreads as the fold grows, exactly as a lifting sheet does. The sheet's overflow keeps it inside the rounded paper. Replaces the flap's old flat drop-shadow, which doubled up with everything else and had a hard edge. */ .mk-note-foldshadow { position: absolute; top: 0; right: 0; width: 100%; aspect-ratio: 1; pointer-events: none; clip-path: polygon(0 0, 100% 100%, 0 100%); transform-origin: 100% 0; transform: translate(-9px, 10px) scale(var(--mk-fold, 0)); opacity: min(calc(var(--mk-fold, 0) * 5), 0.55); background: rgba(18, 23, 33, 0.30); filter: blur(10px); } /* Three daylight paper tints and a scatter of tilts, cycling however many notes the content file provides. Sunshine is the classic pad; blossom and mist keep the stack unmistakably ours. Mixed against white, never the surface: paper does not change colour with the site theme. */ .mk-note:nth-child(3n + 1) { --note-tint: color-mix(in srgb, var(--hc-sunshine) 28%, #ffffff); } .mk-note:nth-child(3n + 2) { --note-tint: color-mix(in srgb, var(--hc-blossom) 15%, #ffffff); } .mk-note:nth-child(3n) { --note-tint: color-mix(in srgb, var(--hc-mist) 52%, #ffffff); } .mk-note:nth-child(4n + 1) { --note-tilt: -1.6deg; } .mk-note:nth-child(4n + 2) { --note-tilt: 1.1deg; } .mk-note:nth-child(4n + 3) { --note-tilt: -0.7deg; } .mk-note:nth-child(4n) { --note-tilt: 1.8deg; } /* Fine-liner ink throughout: the sketched icon and the handwriting are the same pen. Caveat is neat, upright and legible; the sizes run larger than the old set text because handwriting needs the room. */ .mk-note-icon { display: block; width: clamp(2.5rem, 6vw, 3.25rem); color: var(--note-ink); } .mk-note-icon svg { display: block; width: 100%; height: auto; } .mk-note h3 { margin: 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; font-size: clamp(1.8rem, 4.2vw, 2.4rem); letter-spacing: 0.01em; color: var(--note-ink); line-height: 1.05; } .mk-note p { margin: 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 500; font-size: clamp(1.3rem, 2.8vw, 1.65rem); line-height: 1.25; /* The body sits a touch lighter than the heading, one pen pressed less hard, so the note keeps a hierarchy without changing colour. */ color: color-mix(in srgb, var(--note-ink) 84%, #ffffff); } /* A pencilled page mark in the corner, the way a person numbers a pad. Ink pressed lightly, tilted a touch off square. */ .mk-note-page { position: absolute; right: clamp(0.9rem, 3vw, 1.4rem); bottom: clamp(0.6rem, 2.4vw, 1.1rem); font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.25rem); color: color-mix(in srgb, var(--note-ink) 45%, #ffffff); transform: rotate(-3deg); pointer-events: none; } .mk-notes-hint { display: none; text-align: center; margin-top: var(--hc-space-4); font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: var(--hc-text-muted); } /* ---- Pinned form: whenever the script runs ----------------------------- Keyed off js-on, NOT mk-motion: a phone with "reduce motion" switched on must still see the same stacked pad as everyone else, it simply gets a quiet crossfade between notes instead of the peel (the script chooses per preference). Only the no-JS page keeps the flat grid above. The section grows one screen per note, the sticky stage pins for its length, and the stage is the 3D room: perspective lives here so the peel rotates in real depth rather than flatly skewing. */ html.js-on .mk-notes-pin { /* One screen per peel PLUS a 0.6-peel dwell: the section keeps hold of the scroll for a beat after the last note surfaces, so the visitor reads it revealed rather than watching it arrive mid-unpin. The 0.6 must match the dwell constant in marketing.js, which stops the peel position at the last note while the dwell plays out. */ height: calc(100vh + (var(--mk-notes, 6) - 1 + 0.6) * 90vh); } html.js-on .mk-notes-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* The same soft focal glow the story parade sits in, so the two full-screen scenes feel like rooms of one house. */ html.js-on .mk-notes-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 40% at 50% 46%, var(--hc-accent-soft), transparent 72%); pointer-events: none; } html.js-on .mk-notes-stage { display: block; position: relative; /* Above the hint: a peeling sheet leaves down and to the left, straight over the hint's line, and paper passing OVER the words reads as a real object on the page; sliding underneath them broke the illusion. */ z-index: 2; width: min(27rem, 88vw, 74vh); aspect-ratio: 1 / 1.02; max-width: none; margin: 0; padding: 0; perspective: 1500px; } html.js-on .mk-note { position: absolute; inset: 0; /* First note on top of the pad; the script owns the transform from here. */ z-index: calc(var(--mk-notes, 6) - var(--note-i, 0)); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; } html.js-on .mk-notes-hint { display: block; position: relative; z-index: 1; } /* ====================================================================== AUDIENCE: light, lively cards ====================================================================== */ .mk-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hc-space-4); margin-top: var(--hc-space-2); } .mk-aud { position: relative; display: flex; flex-direction: column; gap: var(--hc-space-3); padding: var(--hc-space-6); background: var(--hc-surface); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-sm); overflow: hidden; } .mk-aud-head { display: flex; align-items: center; gap: var(--hc-space-3); } .mk-aud-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--hc-radius); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 1.25rem; flex: 0 0 auto; } .mk-aud h3 { margin: 0; font-size: var(--hc-font-size-xl); color: var(--hc-text); } .mk-aud > p { margin: 0; color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-aud ul { margin: 0; padding-inline-start: var(--hc-space-5); display: flex; flex-direction: column; gap: var(--hc-space-2); font-size: var(--hc-font-size-base); line-height: var(--hc-line-height); } .mk-aud li::marker { color: var(--hc-accent); } /* A faint icon in the corner of each card, echoing the audience. */ .mk-aud-motif { position: absolute; right: -0.4rem; bottom: -0.8rem; font-size: 4.5rem; line-height: 1; color: var(--hc-accent); opacity: 0.08; pointer-events: none; } /* ====================================================================== CTA BAND ====================================================================== */ .mk-cta { position: relative; overflow: hidden; text-align: center; /* Full-bleed pink band: no width cap, no rounded card edges, so the colour runs the whole width and the wave above flows straight into it. The flex column centres every child, homehog included. */ max-width: none; /* Overlap the wave divider above by 1px so no hairline shows at the join. */ margin: -1px 0 0; padding: var(--hc-space-7) var(--hc-space-5); /* A roomy band with the whole group dead-centre vertically, so the space above the hog and below the button reads as equal. */ min-height: clamp(26rem, 62vh, 40rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hc-space-4); background: var(--hc-accent-soft); border: none; border-radius: 0; box-sizing: border-box; } /* Glow that swells on entry (JS sets --mk-glow when motion allowed). */ .mk-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Centred low and kept clear of the top edge so the band's top row stays flat accent-soft, matching the wave divider above it (no colour line at the join). */ background: radial-gradient(46% 44% at 50% 62%, color-mix(in srgb, var(--hc-accent) 30%, transparent), transparent 72%); opacity: var(--mk-glow, 0); transform: scale(calc(0.7 + var(--mk-glow, 0) * 0.5)); transition: opacity 0.25s linear; } .mk-cta > * { position: relative; z-index: 1; } .mk-cta-hog { width: clamp(13rem, 30vw, 20rem); /* Belt to the flex centring: the hog block sits dead centre of the band. */ margin-inline: auto; filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.14)); } /* The homehog SVG has no intrinsic size, so left alone it overflows its wrapper (and drifts off-centre). Pin it to the box so it fills the wrapper exactly. */ .mk-cta-hog .hc-pig, .mk-parade-hog .hc-pig, .mk-scene-pig .hc-pig { width: 100%; /* The app pins .hc-pig to a fixed 200px height; the marketing pig is sized by width instead, so the wrapper must grow to the (square) svg or the pig overflows below its box and lands on the text underneath it. */ height: auto; } .mk-cta-hog svg, .mk-parade-hog svg, .mk-scene-pig svg { display: block; width: 100%; height: auto; } /* Its tail pads the right side, so the drawn content sits ~1.3% right of centre; nudge the artwork left by that much so it reads centred above the heading. */ .mk-cta-hog svg, .mk-parade-hog svg { transform: translateX(-1.3%); } /* CROP THE BOX TO THE PIG. The svg is a 300x300 square but the drawn pig only occupies roughly y 87-268 of it, so left alone the box carries a third of its height as invisible air and shoves the heading below it. The wrapper becomes the artwork's own aspect (300 wide by ~180 of drawn pig) and clips; the pig inside is pulled up by the blank top band. Percentage margins resolve against width, and the svg is square, so -29% of width removes 29% of the svg's height: the blank sky above the ears. */ .mk-cta-hog, .mk-parade-hog { aspect-ratio: 300 / 180; overflow: hidden; } .mk-cta-hog .hc-pig, .mk-parade-hog .hc-pig { margin-top: -29%; } /* pig.js ages the pig from the member's level and scales a level-1 baby right down, which would leave the marketing hog tiny inside its cropped box. These hogs are decorative brand characters, not the member's own pig, so pin them at full drawn size regardless of what the script sets inline. */ .mk-cta-hog [data-p$="Age"], .mk-parade-hog [data-p$="Age"], .mk-scene-pig [data-p$="Age"] { transform: none !important; } .mk-cta h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-cta p { margin: 0; max-width: 40rem; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } /* ====================================================================== FEATURES PAGE: alternating reveal rows ====================================================================== */ .mk-features .mk-intro { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4) var(--hc-space-6); } .mk-features .mk-intro h1 { margin: 0 0 var(--hc-space-3); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--hc-text); } .mk-features .mk-intro p { margin: 0; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-areas { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto; padding: var(--hc-space-4) var(--hc-space-4) var(--hc-space-8); display: flex; flex-direction: column; gap: var(--hc-space-7); } .mk-area { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hc-space-6); align-items: center; } .mk-area:nth-of-type(even) .mk-area-copy { order: 2; } .mk-area-head { display: flex; align-items: center; gap: var(--hc-space-3); margin-bottom: var(--hc-space-3); flex-wrap: wrap; } .mk-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: var(--hc-radius); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 1.35rem; flex: 0 0 auto; } .mk-area-head h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--hc-text); } .mk-tag { font-size: var(--hc-font-size-xs); font-weight: 700; color: var(--hc-on-highlight); background: var(--hc-highlight-soft); border: 1px solid color-mix(in srgb, var(--hc-sunshine) 40%, transparent); border-radius: var(--hc-radius-full); padding: 0.2em 0.7em; } .mk-area-copy > p { margin: 0 0 var(--hc-space-3); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-area-copy ul { margin: 0; padding-inline-start: var(--hc-space-5); display: flex; flex-direction: column; gap: var(--hc-space-2); font-size: var(--hc-font-size-base); line-height: var(--hc-line-height); } .mk-area-copy li::marker { color: var(--hc-accent); } /* The art side: a soft tile carrying a big motif, instead of a flat box. */ .mk-area-art { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--hc-surface-sunken); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); overflow: hidden; } /* A real app capture, framed as a small browser window: title bar with three dots, then the screenshot. All shots share the same 16:10 capture ratio, so the cards line up identically down the page. */ .mk-area-shot { margin: 0; border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); overflow: hidden; background: var(--hc-surface); box-shadow: var(--hc-shadow-md, 0 12px 32px rgba(22, 35, 58, 0.12)); } .mk-area-shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--hc-surface-sunken); border-bottom: 1px solid var(--hc-border-subtle); } .mk-area-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--hc-accent) 45%, var(--hc-border-subtle)); } .mk-area-shot img { display: block; width: 100%; height: auto; } .mk-area-art::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--hc-blossom) 16%, transparent), transparent 70%); } .mk-area-art .mk-motif { position: relative; width: 42%; color: var(--hc-accent); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } /* The feature's own icon, shown large on the art tile. */ .mk-area-art > i { position: relative; font-size: clamp(3rem, 8vw, 5rem); color: var(--hc-accent); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } /* A faint brand motif tucked in the corner of the art tile. */ .mk-area-art .mk-motif--corner { position: absolute; right: 8%; bottom: 8%; width: 22%; opacity: 0.35; filter: none; } /* Alternating slide-in for the areas (motion only). */ html.mk-motion .mk-area[data-reveal] { --reveal-scale: 1; } html.mk-motion .mk-area:nth-of-type(odd)[data-reveal] { transform: translateX(-40px); } html.mk-motion .mk-area:nth-of-type(even)[data-reveal] { transform: translateX(40px); } html.mk-motion .mk-area[data-reveal].is-in { transform: none; } /* ====================================================================== ABOUT PAGE: reading column with reveals and a homehog ====================================================================== */ .mk-about-wrap { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); display: flex; flex-direction: column; gap: var(--hc-space-6); color: var(--hc-text); } .mk-about-intro { text-align: center; } .mk-about-hog { width: clamp(6rem, 16vw, 9rem); margin: 0 auto var(--hc-space-4); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } .mk-about-intro h1 { margin: 0 0 var(--hc-space-3); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; } .mk-about-intro p { margin: 0; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-about-section { position: relative; padding-left: var(--hc-space-5); } /* A small brand rule marking each belief. */ .mk-about-section::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 4px; border-radius: var(--hc-radius-full); background: linear-gradient(var(--hc-accent), var(--hc-highlight)); } .mk-about-section h2 { margin: 0 0 var(--hc-space-3); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; } .mk-about-section p { margin: 0 0 var(--hc-space-3); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-about-section p:last-child { margin-bottom: 0; } /* ====================================================================== RESPONSIVE ====================================================================== */ @media (max-width: 959px) { .mk-hero { grid-template-columns: 1fr; text-align: center; gap: var(--hc-space-5); } .mk-hero-copy { align-items: center; } .mk-hero-actions { justify-content: center; } .mk-hero-scene { max-width: 22rem; order: -1; } } @media (max-width: 639px) { .mk-audience-grid { grid-template-columns: 1fr; } .mk-area { grid-template-columns: 1fr; gap: var(--hc-space-4); } .mk-area:nth-of-type(even) .mk-area-copy { order: 0; } .mk-section { padding: var(--hc-space-7) var(--hc-space-4); } } /* ====================================================================== REDUCED MOTION belt. The script never adds mk-motion here, so the motion rules above already do not apply. This refuses any residual movement and stops the decorative bob and blob drift. ====================================================================== */ @media (prefers-reduced-motion: reduce) { .mk-float { animation: none !important; } .mk-blob { transform: none !important; } html.js-on [data-reveal] { transition: opacity 0.4s ease !important; transform: none !important; } }