/* ========================================================================== Adventures in Colour Palette and typography carried over from the original Wix site. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- The original site used three commercially licensed fonts (Garet Book, Duase Light Display, Thesignature). Their EULAs don't permit shipping the binaries in a public repo, so these are open-licence stand-ins from Google Fonts, chosen to match the originals' structure: Garet Book -> Poppins geometric, single-storey 'a', circular 'o' Duase Light Display-> Julius Sans One light, wide, and unicase: its lowercase sit at cap height, the defining trait of Duase Thesignature -> Parisienne slanted signature script with clear, legible capitals. Great Vibes was tried first but its swash capitals obscure the initials, and this is a person's name. Loaded via the in each page's . See README for swapping these or moving to self-hosted files. ------------------------------------------------------------------------- */ /* --- Design tokens -------------------------------------------------------- */ :root { --indigo: #526098; /* site title, headings, lead text */ --indigo-dark: #3B466F; --periwinkle: #9CA8D8; /* signature, accents */ --button: #7B92EE; --button-hover: #5A6BB0; --panel: rgba(90, 107, 176, 0.28); /* tinted content panel */ --ink: #2A2A2A; --ink-soft: #55555A; --white: #FFFFFF; --font-display: 'Julius Sans One', 'Poppins', system-ui, sans-serif; --font-script: 'Parisienne', cursive; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Parisienne is optically smaller than Thesignature was, so the script lines need a nudge to hold the same presence. */ --script-scale: 1.08; /* Banner line — sized to sit on a single line at full width */ --banner-script-size: clamp(1.6rem, 0.6rem + 3.4vw, 3.75rem); --weight-bold: 600; /* Poppins 600 reads closer to Garet Book than 700 */ /* Signature placement, from the original's 129px offset in an 859px box */ --signature-offset: -9%; --signature-overlap: -0.32em; /* negative: title tucks under the script */ --measure: 1100px; /* max content width */ --gutter: clamp(1.25rem, 5vw, 3rem); } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* Containing block for the gradient columns. Without this they'd resolve against the viewport and only ever be one screen tall. */ position: relative; font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); /* ~16 -> 19px */ line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } figure { margin: 0; } a { color: var(--indigo); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--indigo); color: var(--white); padding: 0.75rem 1.25rem; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* --- Decorative gradient edges ------------------------------------------- The original Wix page bled a tall gradient artwork off both sides of its fixed 980px canvas. Here each strip fills the margin beside the centred content, so it can never sit underneath the text however wide the window gets, and spans the full height of the page body — anything less leaves a white gap at one end of the column. ------------------------------------------------------------------------- */ .gradient-edge { position: absolute; top: 0; bottom: 0; width: max(0px, calc((100vw - var(--measure)) / 2)); pointer-events: none; z-index: 0; opacity: 0.85; } .gradient-edge img { width: 100%; height: 100%; object-fit: cover; } .gradient-edge--left { left: 0; } .gradient-edge--right { right: 0; transform: scaleX(-1); } /* mirrored */ /* Not enough spare margin to be worth drawing */ @media (max-width: 1300px) { .gradient-edge { display: none; } } /* --- Header --------------------------------------------------------------- */ .site-header { position: relative; z-index: 2; text-align: center; padding: 2.5rem var(--gutter) 1.5rem; background: var(--white); /* Sits inside the content column so the gradient shows either side of it, rather than covering the gutter with a full-bleed white band. */ max-width: var(--measure); margin-inline: auto; } /* Duase was unicase — lowercase drawn at full cap height, so the original wordmark reads as evenly-sized capitals. Julius Sans One renders lowercase as *smaller* small-caps, which looks uneven, so force real capitals to get the original's single-height look. The name below is deliberately exempt. */ .site-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(2.25rem, 1.2rem + 4.5vw, 3.9375rem); /* -> 63px */ line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo); margin: 0; } .site-title a { color: inherit; text-decoration: none; } .site-title a:hover { color: var(--indigo-dark); } .site-tagline { font-family: var(--font-display); font-size: clamp(0.75rem, 0.65rem + 0.4vw, 1.125rem); /* -> 18px */ letter-spacing: 0.15em; text-transform: uppercase; color: var(--indigo); margin: 0.5rem 0 0; } /* In the original the signature shares a grid cell with the title, offset left:129px inside an 859px box — about 9% left of centre — and starting above it, so the script overlaps the top of the wordmark. Reproduced here by placing it first in source order and pulling the title up underneath it. Both offsets are tokens so they're easy to nudge. */ .site-signature { position: relative; left: var(--signature-offset); font-family: var(--font-script); font-weight: normal; font-size: calc(clamp(2rem, 1rem + 4vw, 3.6875rem) * var(--script-scale)); /* -> 59px */ line-height: 1; letter-spacing: 0.05em; color: var(--periwinkle); margin: 0 0 var(--signature-overlap); z-index: 2; } /* Straight stack on narrow screens — the offset only reads as intentional when there's room for it. */ @media (max-width: 700px) { .site-signature { left: 0; margin-bottom: 0.1em; } } /* --- Navigation ----------------------------------------------------------- */ .nav-toggle { display: none; margin: 1.25rem auto 0; font-family: var(--font-body); font-size: 0.9rem; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); background: transparent; border: 2px solid var(--periwinkle); border-radius: 60px; padding: 0.6rem 1.4rem; cursor: pointer; } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); margin: 1.5rem 0 0; padding: 0; } .site-nav a { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 0.8125rem; /* 13px, as original */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 0.3rem; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .site-nav a:hover { color: var(--indigo); border-bottom-color: var(--periwinkle); } .site-nav a[aria-current='page'] { color: var(--indigo); border-bottom-color: var(--indigo); } @media (max-width: 700px) { .nav-toggle { display: block; } .site-nav { display: none; } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; align-items: center; gap: 1.1rem; } .site-nav a { font-size: 0.9375rem; } } /* --- Script banner -------------------------------------------------------- "colourful things coming your way" — white script over the photo strip. The gradient underlay also acts as the fallback if the photo is missing. ------------------------------------------------------------------------- */ .banner { position: relative; z-index: 1; /* Matches the original's 980px canvas rather than bleeding full-width, so the gradient columns stay visible either side of it. */ max-width: var(--measure); margin-inline: auto; min-height: clamp(180px, 28vw, 348px); display: flex; align-items: flex-end; /* band sits on the bottom edge, not centred */ background-color: var(--indigo); /* Photo only — the tint belongs to the band, not the whole image. banner.jpg doesn't exist until you run tools/fetch-missing-images.sh. A background layer that 404s isn't painted, so until then the blurred placeholder shows through and the band's 28% tint is invisible against it. Once banner.jpg lands, both come right with no CSS change. */ background-image: url('/assets/img/banner.jpg'), url('/assets/img/banner-LOWRES.jpg'); background-size: cover; background-position: center; overflow: hidden; } /* Translucent periwinkle band across the bottom of the photo, carrying the script line. Alpha and colour are the original's exact values. */ .banner__band { width: 100%; background: rgba(90, 107, 176, 0.28); padding: 0.35em clamp(1.25rem, 4vw, 3rem) 0.5em; text-align: right; } .banner__band p { font-family: var(--font-script); font-weight: normal; font-size: calc(var(--banner-script-size) * var(--script-scale)); line-height: 1.05; letter-spacing: 0.02em; /* tighter than the wordmark, to help it fit */ color: var(--white); margin: 0; text-shadow: 0 2px 18px rgba(40, 48, 80, 0.35); } /* --- Page body ------------------------------------------------------------ */ .page { position: relative; } .content { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 5rem); } .lead { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: clamp(1.35rem, 0.9rem + 2vw, 2.0625rem); /* -> 33px */ line-height: 1.3; color: var(--indigo); margin: 0 0 1.5rem; } h1, h2, h3 { font-family: var(--font-body); color: var(--indigo); line-height: 1.2; } h1 { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 2.75rem); font-weight: var(--weight-bold); letter-spacing: 0.01em; margin: 0 0 1rem; } h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.0625rem); margin: 0 0 1rem; } h3 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem); margin: 2rem 0 0.75rem; } p { margin: 0 0 1.25rem; } .prose { margin-top: clamp(2rem, 5vw, 3.5rem); } /* Tinted panel, matching the original's translucent periwinkle block */ .panel { background: var(--panel); border-radius: 6px; padding: clamp(1.5rem, 4vw, 3rem); } /* --- Layout helpers ------------------------------------------------------- */ .split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 820px) { .split { grid-template-columns: 1fr minmax(0, 340px); } .split--media-first { grid-template-columns: minmax(0, 340px) 1fr; } } .figure-round img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 12px 40px rgba(82, 96, 152, 0.25); } .figure-soft img { border-radius: 10px; box-shadow: 0 10px 32px rgba(82, 96, 152, 0.2); } /* Small image floated into the running text, as the original had it at left:703px in the 980px canvas — i.e. hard right of the column. The source photo is portrait; the original cropped it to a near-square 168x172. */ .figure-inline { float: right; width: clamp(140px, 17vw, 200px); margin: 0.4rem 0 1.25rem clamp(1.25rem, 3vw, 2.5rem); } .figure-inline img { width: 100%; height: auto; aspect-ratio: 168 / 172; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 32px rgba(82, 96, 152, 0.2); } /* Contain the float so the buttons below can't ride up beside it */ .prose::after { content: ''; display: block; clear: both; } @media (max-width: 600px) { .figure-inline { float: none; width: min(60%, 220px); margin: 1.5rem auto; } } /* --- Buttons -------------------------------------------------------------- */ .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .btn { display: inline-block; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: var(--button); border: 0; border-radius: 60px; /* pill, as original */ padding: 0.95rem 2.2rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .btn:hover { background: var(--button-hover); color: var(--white); transform: translateY(-1px); } .btn:disabled { background: #E2E2E2; color: #8F8F8F; cursor: not-allowed; transform: none; } .btn--ghost { background: transparent; color: var(--indigo); border: 2px solid var(--button); padding: calc(0.95rem - 2px) calc(2.2rem - 2px); } .btn--ghost:hover { background: var(--button); color: var(--white); } /* --- Lists ---------------------------------------------------------------- */ .tick-list { list-style: none; margin: 0 0 1.5rem; padding: 0; } .tick-list li { position: relative; padding-left: 2rem; margin-bottom: 0.85rem; } .tick-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--periwinkle); } .price { font-weight: var(--weight-bold); color: var(--indigo); } /* --- Contact form --------------------------------------------------------- */ .contact-form { display: grid; gap: 1.25rem; } .field { display: grid; gap: 0.4rem; } .field label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo); } .field input, .field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--periwinkle); border-radius: 6px; padding: 0.8rem 1rem; width: 100%; } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(156, 168, 216, 0.4); } /* Honeypot — hidden from people, catches naive bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin: 0; font-weight: var(--weight-bold); color: var(--indigo); } .form-status[hidden] { display: none; } .form-status--error { color: #A52626; } .form-fallback { margin-top: 1.5rem; font-size: 0.95rem; color: var(--ink-soft); } /* --- Footer --------------------------------------------------------------- */ .site-footer { position: relative; z-index: 1; text-align: center; padding: 3rem var(--gutter); background: var(--white); border-top: 1px solid rgba(156, 168, 216, 0.4); max-width: var(--measure); margin-inline: auto; } .site-footer p { margin: 0 0 0.5rem; } .site-footer a { color: var(--indigo); } .site-footer .copyright { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 1.25rem; } /* --- Motion preference ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }