/* =========================================================================== Elope Bridal - the website. The brand, from her own logo: a sage ground, a thin gold ring, the "El" monogram, Roman capitals, white roses and greenery. The site carries ONE motif, the ring (client baseline section 29), and keeps it for the moments that earn it: it frames the hero, closes the page, circles the date a bride picks in the checker, and is the focus ring on every control. It is not a bullet, a separator or a corner ornament. Tokens are measured (brand/BRAND.md): ink on mist 14.5:1, fern on mist 6.5:1 (quiet text, buttons), gilt-deep on mist 5.0:1 (small gold text). Plain gilt is for lines and rings only (3.1:1, graphics). On the dark grounds (ivy) the focus ring is gilt-soft. Resting states are the visible ones: anything that animates in plays from a class added by script, never hides content that has no script (section 27). One reduced-motion block at the end covers everything. ======================================================================== */ @font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Hanken"; src: url("../fonts/hanken-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken"; src: url("../fonts/hanken-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { --mist: #F3F3EC; --porcelain: #FAFAF6; --petal: #EEE7D9; --sage: #C3C4B2; --sage-soft: #DCDDD0; --leaf: #80876D; --fern: #4F5A48; --fern-deep: #3E4738; --ivy: #262D27; --ink: #1D221E; --gilt: #A08652; --gilt-deep: #7A6536; --gilt-soft: #CDBA8E; /* A "no" in the date checker (booked, away, too soon): a dusty rose from her roses, 4.6:1 on the porcelain card (text-safe), used for a ring. */ --rose: #946661; --display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif; --body: "Hanken", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* Type: four text steps and four display steps, nothing between. An inner page's title is its biggest line; the headings under it are a step below the front page's section headings. */ --t-display: clamp(2.9rem, 1.6rem + 5.2vw, 5.6rem); --t-page: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem); --t-h2: clamp(2.15rem, 1.55rem + 2.5vw, 3.4rem); --t-h2-in: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); --t-h3: clamp(1.5rem, 1.3rem + .7vw, 1.8rem); --t-lede: clamp(1.14rem, 1.05rem + .38vw, 1.32rem); --t-body: 1.0625rem; --t-small: .9375rem; --t-eyebrow: .8125rem; /* Two radii: cards and panels, and fields and steppers. Photos keep a small radius of their own; buttons are pills. */ --r-card: 16px; --r-field: 12px; --r-photo: 4px; --measure: 38rem; --col: 1200px; --gutter: clamp(20px, 5vw, 56px); --section: clamp(76px, 10vw, 148px); --head-h: 84px; --ease: cubic-bezier(.2, .7, .2, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); color-scheme: light; } /* ---- base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 28px); } /* Lining figures everywhere: Cormorant's default old-style figures made "7am", "20 miles" and "2026" dance (Hanken's are lining already). Only the faces the site loads are drawn: no fake italic or bold. */ body { margin: 0; background: var(--mist); color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.7; font-weight: 400; font-variant-numeric: lining-nums; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } .admin-bar { scroll-padding-top: calc(var(--head-h) + 60px); } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } p { margin: 0 0 1em; text-wrap: pretty; } h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; } ::selection { background: var(--sage); color: var(--ink); } .eb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The focus ring is the ring (the motif), in the deeper gold; on the dark grounds, the lighter gold (gilt-deep is 2.5:1 on ivy). Never removed without a replacement (section 27). */ :focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 3px; border-radius: 4px; } .eb-foot :focus-visible, .eb-venue :focus-visible, .eb-plan :focus-visible, .eb-lightbox :focus-visible, .eb-offer :focus-visible { outline-color: var(--gilt-soft); } .eb-btn:focus-visible, .eb-nav__toggle:focus-visible { border-radius: 999px; } .eb-skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ivy); color: var(--mist); border-radius: 999px; text-decoration: none; } .eb-skip:focus { top: 12px; } .eb-wrap-in { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; } /* ---- type ---------------------------------------------------------------- */ .eb-display, .eb-h2, .eb-h3, .eb-page-title { font-family: var(--display); font-weight: 500; color: var(--ink); letter-spacing: -.005em; } .eb-display { font-size: var(--t-display); line-height: 1.02; } .eb-h2 { font-size: var(--t-h2); line-height: 1.08; } .eb-page-title { font-size: var(--t-page); line-height: 1.04; } .eb-h3 { font-size: var(--t-h3); line-height: 1.2; } .eb-display em, .eb-h2 em, .eb-h3 em, .eb-page-title em { font-style: italic; color: var(--fern); } .eb-eyebrow { font-family: var(--body); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-deep); margin: 0 0 1.1rem; } .eb-lede { font-size: var(--t-lede); line-height: 1.6; color: var(--fern-deep); max-width: var(--measure); } .eb-prose { max-width: var(--measure); } .eb-prose p:last-child { margin-bottom: 0; } .eb-small { font-size: var(--t-small); } .eb-credit { display: block; font-size: .8125rem; color: var(--fern); letter-spacing: .01em; } .eb-num { font-variant-numeric: tabular-nums; } /* A hyphenated word kept whole (eb_nobreak(), inc/render.php). */ .eb-nw { white-space: nowrap; } /* ---- buttons and links ---------------------------------------------------- Filled and quiet share one box (front-end baseline section 7): the same min-height, the quiet one's border inside its padding. */ .eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.7em; border: 1px solid var(--fern); border-radius: 999px; background: var(--fern); color: var(--porcelain); text-decoration: none; cursor: pointer; font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: .02em; line-height: 1.2; text-align: center; transition: background-color .25s var(--ease-soft), border-color .25s var(--ease-soft), color .25s var(--ease-soft), box-shadow .35s var(--ease), transform .2s var(--ease); box-shadow: 0 12px 24px -16px rgba(38, 45, 39, 0); } .eb-btn .eb-icon { width: 1.25em; height: 1.25em; flex: none; } /* Hover: the filled button deepens to ivy and lifts on a soft shadow of its own colour; the quiet one takes the fern edge and a breath of sage. The gold ring stays the focus ring's alone, so a hover never looks focused. */ @media (hover: hover) { .eb-btn:hover { background: var(--ivy); border-color: var(--ivy); box-shadow: 0 12px 24px -16px rgba(38, 45, 39, .6); } } .eb-btn:active { transform: translateY(1px); box-shadow: 0 6px 14px -12px rgba(38, 45, 39, .55); } .eb-btn--quiet { background: transparent; color: var(--fern-deep); border-color: var(--leaf); } @media (hover: hover) { .eb-btn--quiet:hover { background: rgba(195, 196, 178, .28); border-color: var(--fern); color: var(--ink); box-shadow: none; } } .eb-btn--quiet:active { box-shadow: none; } .eb-btn--small { min-height: 44px; padding: 0 1.25em; font-size: .9375rem; } .eb-btn--light { background: var(--petal); color: var(--ivy); border-color: var(--petal); } @media (hover: hover) { .eb-btn--light:hover { background: #fff; border-color: #fff; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .55); } } .eb-link { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; color: var(--fern-deep); font-weight: 500; text-decoration: none; letter-spacing: .01em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; transition: background-size .35s var(--ease), color .2s; } .eb-link .eb-icon { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); } @media (hover: hover) { .eb-link:hover .eb-icon { transform: translateX(4px); } .eb-link:hover { color: var(--ink); } } .eb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 2rem; } .eb-actions--centre { justify-content: center; } .eb-icon { width: 1.25em; height: 1.25em; flex: none; } /* ---- header --------------------------------------------------------------- Sticky, on the mist; a hairline under it once the page has moved. No transform, filter or backdrop-filter on it (front-end baseline section 7: any of them would make it the containing block for the phone menu). Her full name is in it at every width; "Check your date" is in it at every width but a phone's (where the hero's button is on the first screen). */ .eb-head { position: sticky; top: 0; z-index: 40; background: var(--mist); transition: box-shadow .3s; } .admin-bar .eb-head { top: 32px; } @media (max-width: 782px) { .admin-bar .eb-head { top: 46px; } } @media (max-width: 600px) { .admin-bar .eb-head { top: 0; } } .eb-head.is-scrolled { box-shadow: 0 1px 0 rgba(128, 135, 109, .28); } .eb-head__in { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; } .eb-head__mark { display: flex; align-items: center; min-height: 44px; flex: none; } .eb-head__logo { width: 214px; height: auto; } .eb-head__cta { display: none; } .eb-nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; } .eb-nav__list a:not(.eb-btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9688rem; letter-spacing: .015em; color: var(--ink); background: linear-gradient(var(--gilt), var(--gilt)) 50% calc(100% - 8px) / 0 1px no-repeat; transition: background-size .35s var(--ease); } @media (hover: hover) { .eb-nav__list a:not(.eb-btn):hover { background-size: 100% 1px; } } .eb-nav__list a[aria-current="page"]:not(.eb-btn) { background-size: 100% 1px; } /* The focus ring round a word is a pill, like the buttons', not a box. */ .eb-nav__list a:not(.eb-btn):focus-visible { border-radius: 999px; outline-offset: 4px; } .eb-nav__toggle { display: none; } /* How to reach them, at the foot of the phone menu only (header.php). */ .eb-nav__reach { display: none; } /* On the front page the header's "Check your date" steps aside while the hero's own button is on screen, and comes back (a fade and 6px) once that has scrolled away. The class is added by site.js, so without script the button is simply there. */ .eb-head__cta, .eb-nav__cta .eb-btn { transition: background-color .25s var(--ease-soft), border-color .25s var(--ease-soft), color .25s var(--ease-soft), box-shadow .35s var(--ease), transform .2s var(--ease), opacity .3s var(--ease-soft), translate .3s var(--ease-soft), visibility 0s linear 0s; } .eb-cta-still .eb-head__cta, .eb-cta-still .eb-nav__cta .eb-btn { transition: none !important; } @media (min-width: 1081px) { .eb-hero-cta-in .eb-nav__cta .eb-btn { opacity: 0; translate: 0 6px; visibility: hidden; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, .3s; } } @media (min-width: 641px) and (max-width: 1080px) { .eb-hero-cta-in body:not(.eb-menu-open) .eb-head__cta { opacity: 0; translate: 0 6px; visibility: hidden; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, .3s; } } @media (max-width: 1080px) { .eb-head__logo { width: 190px; } .eb-head__cta { display: inline-flex; margin-left: auto; } .eb-nav__toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--leaf); border-radius: 999px; background: transparent; cursor: pointer; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; } .eb-nav__toggle-close { display: none; } .eb-nav.is-open .eb-nav__toggle-open { display: none; } .eb-nav.is-open .eb-nav__toggle-close { display: inline; } .eb-nav__list { position: fixed; inset: var(--menu-top, var(--head-h)) 0 0 0; z-index: 39; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 18px var(--gutter) 40px; background: var(--mist); overflow-y: auto; overscroll-behavior: contain; } .admin-bar .eb-nav__list { inset-block-start: var(--menu-top, calc(var(--head-h) + 46px)); } .eb-nav.is-open .eb-nav__list { display: flex; } .eb-nav__list li { border-bottom: 1px solid rgba(128, 135, 109, .25); } .eb-nav__list a:not(.eb-btn) { width: 100%; min-height: 64px; font-family: var(--display); font-size: 1.9rem; background: none; } /* The page you are on, in the accent's italic and fern. */ .eb-nav__list a[aria-current="page"]:not(.eb-btn) { font-style: italic; color: var(--fern); } .eb-nav__list .eb-nav__cta { border: 0; padding-top: 24px; } .eb-nav__list .eb-nav__cta .eb-btn { width: 100%; min-height: 56px; font-size: 1.05rem; } body.eb-menu-open { overflow: hidden; } /* The menu has its own "Check your date": the header's would be a second one a hand's width above it. Hidden, not removed, so Close stays put. */ body.eb-menu-open .eb-head__cta { visibility: hidden; } /* The foot of the open menu: how to reach them without the form. */ .eb-nav__list .eb-nav__reach { display: block; margin-top: auto; padding-top: 36px; border: 0; } .eb-nav__reach .eb-nav__h { margin: 0 0 .5rem; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-deep); } .eb-nav__reach ul { list-style: none; display: grid; gap: 2px; } .eb-nav__list .eb-nav__reach li { border: 0; } .eb-nav__list .eb-nav__reach a { display: inline-flex; align-items: center; gap: .6em; width: auto; min-height: 44px; font-family: var(--body); font-size: 1rem; font-style: normal; color: var(--fern-deep); text-decoration: underline; text-decoration-color: rgba(79, 90, 72, .35); overflow-wrap: anywhere; } .eb-nav__reach .eb-icon { color: var(--gilt-deep); } } @media (max-width: 640px) { .eb-head__in { min-height: 68px; } .eb-head__logo { width: 168px; } .eb-head__cta { display: none; } } /* ---- the hero --------------------------------------------------------------- Words on the left, her photograph on the right inside the ring: the gold circle frames the arched photo, passing behind its shoulders, broken at the top left by a spray from the logo. The ring stays within the photo's own column, clear of the words. */ .eb-hero { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: center; padding-block: clamp(28px, 5vw, 64px) clamp(64px, 9vw, 120px); } .eb-hero__text { position: relative; z-index: 2; } .eb-hero .eb-display { max-width: 11ch; } .eb-hero .eb-lede { margin-top: 1.6rem; max-width: 25rem; } .eb-hero__note { margin: 2.2rem 0 0; max-width: 34rem; font-size: var(--t-small); color: var(--fern); display: flex; align-items: flex-start; gap: .7em; } /* The rule sits on the first line's middle, so a wrapped note still reads as one line and a second, not a rule floating between two. */ .eb-hero__note::before { content: ""; width: 28px; height: 1px; margin-top: .85em; background: var(--gilt); flex: none; } .eb-hero__note a { text-decoration-color: rgba(79, 90, 72, .35); transition: text-decoration-color .25s; } @media (hover: hover) { .eb-hero__note a:hover { text-decoration-color: currentColor; } } .eb-hero__art { position: relative; justify-self: end; width: min(88%, 520px); } .eb-hero__photo { position: relative; z-index: 2; margin: 0; border-radius: 999px 999px var(--r-photo) var(--r-photo); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sage-soft); box-shadow: 0 30px 60px -38px rgba(38, 45, 39, .55); } .eb-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .eb-hero__ring { position: absolute; z-index: 1; width: 120%; max-width: none; aspect-ratio: 1; left: -10%; top: 50%; translate: 0 -50%; color: var(--gilt); pointer-events: none; } .eb-hero__spray { position: absolute; z-index: 3; width: 44%; left: -19%; top: -3%; pointer-events: none; } /* The ring draws itself round once, by a sweeping mask rather than a stroke dash (a dash on a non-scaling stroke is measured in screen pixels in Chrome, and drew a third of the circle). Without @property the ring simply appears. */ @property --eb-sweep { syntax: ""; inherits: false; initial-value: 360deg; } .js .eb-hero__ring { --eb-sweep: 0deg; -webkit-mask: conic-gradient(from 200deg, #000 var(--eb-sweep), transparent 0); mask: conic-gradient(from 200deg, #000 var(--eb-sweep), transparent 0); animation: eb-sweep 2.4s var(--ease) .2s forwards; } @keyframes eb-sweep { to { --eb-sweep: 360deg; } } .js .eb-hero__spray { animation: eb-bloom 1.4s var(--ease) 1.2s both; } @keyframes eb-draw { to { stroke-dashoffset: 0; } } @keyframes eb-bloom { from { opacity: 0; transform: scale(.92) rotate(-6deg); } to { opacity: 1; transform: none; } } /* A short laptop screen (1280 x 720 and the like): the headline, the words and the button fit above the fold with the offer band showing, and the photo is sized from the screen's height. */ @media (min-width: 901px) and (max-height: 860px) { .eb-hero { padding-block: 32px 72px; } .eb-hero .eb-display { font-size: min(var(--t-display), 9.2vh); } .eb-hero .eb-eyebrow { margin-bottom: .8rem; } .eb-hero .eb-lede { margin-top: 1.1rem; } .eb-hero .eb-actions { margin-top: 1.5rem; } .eb-hero__note { margin-top: 1.4rem; } .eb-hero__art { width: min(88%, 520px, calc((100svh - 220px) * .8)); } } /* Phones and tablets: the words first, so her name, the headline and the button are on the first screen; the photo follows, its arch in view. */ @media (min-width: 720px) and (max-width: 900px) { .eb-hero { gap: 36px; padding-top: 28px; } .eb-hero__art { width: min(94%, 340px); } .eb-hero__spray { width: 42%; left: -16%; } } @media (max-width: 719px) { .eb-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 20px; } .eb-hero__art { justify-self: center; width: min(78%, 380px); } .eb-hero__spray { width: 40%; left: -15%; top: -4%; } .eb-hero .eb-display { max-width: 12ch; } } @media (max-width: 640px) { /* A wrapped line and a rule hanging off its first line read as a slip. */ .eb-hero__note { display: block; } .eb-hero__note::before { display: none; } } /* ---- bands and sections ---------------------------------------------------- */ .eb-section { padding-block: var(--section); } .eb-section--petal { background: var(--petal); } .eb-band--sage { background: var(--sage); } /* Two plain sections in a row share one gap. After a coloured band the next section keeps its own top padding. */ .eb-section:not(.eb-section--petal):not(.eb-band--sage) + .eb-section:not(.eb-section--petal):not(.eb-band--sage) { padding-top: 0; } .eb-section .eb-h2 { max-width: 16ch; } /* ---- "Is your date free?" ---------------------------------------------------- The signature moment. A calendar on the logo's sage; the chosen day is circled in gold, drawn like a pen round a date. */ .eb-check-band { padding-block: clamp(64px, 8vw, 112px); position: relative; overflow: hidden; } .eb-check-band .eb-wrap-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .eb-check-band__text { max-width: 30rem; color: var(--ink); margin-top: 1.1rem; } /* The words sit level with the calendar's middle, not at its top with the sage empty below them. */ .eb-check-band__head { align-self: center; } /* Below 1081px two months beside the words were squeezed to 190px each: the words go above the calendar instead. */ @media (max-width: 1080px) { .eb-check-band .eb-wrap-in { grid-template-columns: 1fr; } .eb-check-band__head { align-self: start; } } .eb-check { background: var(--porcelain); border-radius: var(--r-card); padding: clamp(20px, 3vw, 32px); box-shadow: 0 24px 48px -36px rgba(38, 45, 39, .6); } .eb-check__label { display: block; font-weight: 500; margin-bottom: .5rem; } .eb-check__row { display: flex; flex-wrap: wrap; gap: 10px; } .eb-check__row .eb-input { flex: 1 1 200px; } .eb-check.is-enhanced .eb-check__form { display: none; } .eb-check__answer { margin-top: 18px; min-height: 1.5em; display: grid; gap: 14px; justify-items: start; } .eb-check__answer:empty, .eb-check__answer:not(:has(*)) { margin: 0; min-height: 0; } /* The answer reads as a sentence in the display face, led by a small ring in its state's colour (the ring is the motif; the words are ink, so the colour never carries the meaning alone): fern for free, gold for "ask us", the rose for a no. */ .eb-check__says { margin: 0; display: flex; align-items: baseline; gap: .5em; border: 0; padding: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.3; color: var(--ink); text-wrap: pretty; } .eb-check__says::before { content: ""; flex: none; width: .6em; height: .6em; border-radius: 50%; border: 1.5px solid var(--gilt-deep); translate: 0 .04em; } .eb-check__says.is-free::before { border-color: var(--fern); background: rgba(79, 90, 72, .14); } .eb-check__says.is-booked::before, .eb-check__says.is-away::before, .eb-check__says.is-past::before, .eb-check__says.is-closed::before, .eb-check__says.is-error::before { border-color: var(--rose); } .eb-check__says:not([class*="is-"])::before { visibility: hidden; } .eb-check__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .eb-check__more .eb-link { min-height: 44px; } .eb-check__retry { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 500; color: var(--fern-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } .eb-check__key { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin-top: 16px; font-size: .875rem; color: var(--fern-deep); } .eb-check__key li { display: flex; align-items: center; gap: 5px; } /* Each swatch is a small day, drawn the way the calendar draws that state: free an ink number, "ask us" the tinted day in its gold ring, booked struck through, too soon faded. The number is decoration (alt ""). */ .eb-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .eb-dot::before { content: "14"; content: "14" / ""; } .eb-dot.is-limited { background: rgba(205, 186, 142, .38); box-shadow: inset 0 0 0 1.5px var(--gilt-deep); } .eb-dot.is-booked::before { color: var(--fern); text-decoration: line-through; text-decoration-thickness: 1.5px; } .eb-dot.is-closed { color: rgba(29, 34, 30, .34); } /* The arrows sit at the calendar's top right, over the last month's header, and every month's header is the arrows' height: both titles share one line (only the first header had the arrows, and the two were 4px apart). */ .eb-cal { position: relative; display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .eb-cal { grid-template-columns: 1fr; } .eb-cal__month:nth-child(n+2) { display: none; } } .eb-cal__top { display: flex; align-items: center; min-height: 44px; margin-bottom: 8px; padding-right: 104px; } .eb-cal__month:first-child:not(:last-child) .eb-cal__top { padding-right: 0; } @media (max-width: 640px) { .eb-cal__month:first-child .eb-cal__top { padding-right: 104px; } } .eb-cal__title { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; margin: 0; } .eb-cal__nav { position: absolute; top: 0; right: 0; display: flex; gap: 6px; } /* The first month's title is also a way to jump to a month (site.js): her date next summer is two taps away, not nine. It reads as the title, with a small caret. */ .eb-cal__jump { max-width: 100%; min-height: 44px; margin: 0 0 0 -8px; padding: 0 30px 0 8px; border: 1px solid transparent; border-radius: var(--r-field); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; field-sizing: content; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%237A6536'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; transition: border-color .2s, background-color .2s; } @media (hover: hover) { .eb-cal__jump:hover { border-color: rgba(128, 135, 109, .45); } } .eb-cal__jump:focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 2px; } .eb-cal__jump option { font-family: var(--body); font-size: 1rem; } .eb-cal__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--leaf); background: transparent; cursor: pointer; display: grid; place-items: center; } .eb-cal__nav button:disabled { opacity: .35; cursor: default; } .eb-cal__nav .eb-icon { width: 18px; height: 18px; } .eb-cal table { width: 100%; border-collapse: collapse; table-layout: fixed; } .eb-cal th { font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--fern); padding: 4px 0 8px; text-transform: uppercase; } .eb-cal td { padding: 1px; text-align: center; } .eb-cal__day { position: relative; width: 100%; aspect-ratio: 1; max-width: 48px; margin: 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--ink); transition: background-color .2s; } @media (hover: hover) { .eb-cal__day:not(:disabled):hover { background: rgba(195, 196, 178, .45); } } .eb-cal__day:disabled { cursor: default; color: rgba(29, 34, 30, .3); } /* "Ask us" days: a tint and a gold ring, so the state is not the tint alone (the tint is 1.25:1 against the card). */ .eb-cal__day.is-limited, .eb-cal__day.is-held, .eb-cal__day.is-soon, .eb-cal__day.is-far { background: rgba(205, 186, 142, .38); box-shadow: inset 0 0 0 1.5px var(--gilt-deep); } .eb-cal__day.is-booked, .eb-cal__day.is-away { color: var(--fern); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--fern); } .eb-cal__day[aria-current="date"]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gilt); } .eb-cal__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); color: var(--gilt-deep); pointer-events: none; overflow: visible; } .eb-cal__ring path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: eb-draw .7s var(--ease) forwards; } /* The picked day wears the pen ring alone: an "ask us" day's own inset ring under it doubled the line. Its tint stays. */ .eb-cal__day[aria-pressed="true"] { font-weight: 500; box-shadow: none; } /* A phone: the card on the column like everything else (it stood 8px proud of it on both sides), with a slim inner edge so each day is still a full 44px at 360px wide. */ @media (max-width: 400px) { .eb-check { padding: 18px 4px; } .eb-cal td { padding: 0; } .eb-cal__top { padding-left: 8px; } .eb-cal__jump { margin-left: -6px; } .eb-check__key, .eb-check__answer { padding-inline: 8px; } } /* ---- the duo: their photos first, the words beside -------------------------------- */ .eb-duo__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .eb-duo__photos { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; } .eb-duo__text .eb-prose { margin: 1.4rem 0 1.2rem; } .eb-duo__photo { margin: 0; } .eb-duo__photo--hair { margin-top: clamp(40px, 7vw, 96px); } .eb-duo__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); } /* Her candid phone photos, graded a touch quieter so they sit with the hero's editorial one: a little less saturation and contrast, no colour cast (skin stays skin). */ .eb-duo__photo img, .eb-about__photo img, .eb-party-photo img { filter: saturate(.9) contrast(.97); } .eb-duo__photo figcaption { display: flex; align-items: baseline; gap: .6em; margin-top: .8rem; } .eb-duo__role { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-deep); font-weight: 500; } .eb-duo__name { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; } @media (max-width: 900px) { .eb-duo__grid { grid-template-columns: 1fr; } } /* ---- the bridal book teaser and the carousel ----------------------------------- */ /* Centred, like the photo in front, its caption and its controls below: a left heading over a centred stage read as two layouts. */ .eb-teaser__head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: clamp(28px, 4vw, 48px); } .eb-teaser__text { max-width: 32rem; margin: 0; color: var(--fern-deep); } .eb-teaser__foot { margin-top: clamp(24px, 3vw, 40px); display: flex; justify-content: center; } /* The resting state: a CSS scroll-snap strip that works with no script. */ .eb-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: clamp(12px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gutter), calc((100vw - var(--col)) / 2)) 18px; list-style: none; scrollbar-width: thin; scrollbar-color: var(--leaf) transparent; } .eb-strip__slide { scroll-snap-align: center; } .eb-strip figure { margin: 0; } .eb-strip__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); } .eb-strip figcaption { margin-top: .7rem; font-size: var(--t-small); color: var(--fern-deep); } /* The React carousel (carousel.js) once it has taken over. The photo in front at full strength; its neighbours a touch smaller and softer. */ .eb-carousel.is-live .eb-strip { display: none; } .eb-rc { position: relative; } .eb-rc__viewport { overflow: hidden; padding-block: 8px 12px; } .eb-rc__track { display: flex; touch-action: pan-y pinch-zoom; margin-left: calc(-1 * clamp(12px, 2vw, 22px)); } .eb-rc__slide { flex: 0 0 min(72vw, 380px); min-width: 0; padding-left: clamp(12px, 2vw, 22px); } .eb-rc__fig { margin: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); transform: scale(.95); opacity: .85; transform-origin: 50% 60%; } .eb-rc__slide.is-snapped .eb-rc__fig { transform: none; opacity: 1; } .eb-rc__fig button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-photo); overflow: hidden; } .eb-rc__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .eb-rc__cap { margin: .9rem auto 0; padding-inline: var(--gutter); max-width: 44rem; font-size: var(--t-small); color: var(--fern-deep); text-align: center; min-height: 1.5em; text-wrap: balance; } .eb-rc__cap a { text-decoration: none; } @media (hover: hover) { .eb-rc__cap a:hover { color: var(--ink); text-decoration: underline; } } /* One row under the caption: an arrow either side of "No. 03 of 10", set like a plate number in a book (Cormorant italic, lining figures of one width, so the row never shifts as the number changes). */ .eb-rc__controls { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 28px); margin-top: 16px; } .eb-rc__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--leaf); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s; } @media (hover: hover) { .eb-rc__arrow:hover { background: rgba(195, 196, 178, .45); border-color: var(--fern); } } .eb-rc__arrow:active { transform: translateY(1px); } .eb-rc__arrow svg { width: 20px; height: 20px; } .eb-rc__count { margin: 0; min-width: 7.2em; text-align: center; font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1; color: var(--fern-deep); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } /* The larger view (a ), fading in and out (section 35). */ .eb-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(29, 34, 30, .94); color: var(--petal); opacity: 0; transition: opacity .3s, overlay .3s allow-discrete, display .3s allow-discrete; touch-action: pan-y pinch-zoom; } .eb-lightbox[open] { opacity: 1; display: grid; place-items: center; } @starting-style { .eb-lightbox[open] { opacity: 0; } } .eb-lightbox::backdrop { background: transparent; } .eb-lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; padding: 64px 16px 24px; max-height: 100dvh; } .eb-lightbox img { max-width: min(92vw, 1100px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 3px; } .eb-lightbox figcaption { text-align: center; font-size: var(--t-small); } .eb-lightbox .eb-credit { color: rgba(238, 231, 217, .78); } .eb-lightbox__close, .eb-lightbox__prev, .eb-lightbox__next { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(238, 231, 217, .4); background: rgba(29, 34, 30, .5); color: var(--petal); display: grid; place-items: center; cursor: pointer; } .eb-lightbox__close { top: 14px; right: 14px; } .eb-lightbox__prev { left: 14px; top: 50%; translate: 0 -50%; } .eb-lightbox__next { right: 14px; top: 50%; translate: 0 -50%; } .eb-lightbox svg { width: 22px; height: 22px; } .eb-lightbox :focus-visible { border-radius: 50%; } /* ---- the front page's services, and the price lists ------------------------------ */ /* The photo's top edge level with the heading's capitals (the line's half-leading and Cormorant's ascender, about .22em of the heading), rather than centred against a list that is taller than it. */ .eb-services__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .eb-services:not(.has-photo) .eb-services__grid { grid-template-columns: minmax(0, 1fr); max-width: 46rem; } .eb-services__photo { margin: calc(var(--t-h2) * .22) 0 0; } .eb-services__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); } .eb-services__intro { margin: 1.1rem 0 clamp(18px, 2.4vw, 28px); max-width: 34rem; color: var(--fern-deep); } .eb-services__body > .eb-link { margin-top: 1.2rem; } @media (max-width: 900px) { .eb-services__grid { grid-template-columns: 1fr; } .eb-services__photo { margin-top: 0; } .eb-services__photo img { aspect-ratio: 3 / 2; } } .eb-price-list { list-style: none; max-width: 46rem; } .eb-price-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid rgba(128, 135, 109, .3); align-items: baseline; } .eb-price-list li:last-child { border-bottom: 0; } .eb-price-list__name { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; } .eb-price-list__price { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } .eb-price-list__note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--fern-deep); margin: 0; } .eb-price-list--summary li { padding: 16px 0; } .eb-price-list--summary li:first-child { padding-top: 4px; } /* A phone: the price on its own line under the name. Side by side, a long name lost its last word to a line of its own ("Early start, before / 7am"). */ @media (max-width: 480px) { .eb-price-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .eb-price-list__price { font-size: 1.25rem; color: var(--fern-deep); } } /* The bridal party: who, hair, make-up. */ .eb-price-table { width: 100%; max-width: 46rem; border-collapse: collapse; } .eb-price-table th, .eb-price-table td { padding: 16px 0 16px 24px; border-bottom: 1px solid rgba(128, 135, 109, .3); text-align: right; vertical-align: baseline; font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.25; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } .eb-price-table th:first-child, .eb-price-table td:first-child { padding-left: 0; text-align: left; white-space: normal; } .eb-price-table thead th { padding-top: 0; padding-bottom: 10px; font-family: var(--body); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fern); } .eb-price-table tbody tr:last-child > * { border-bottom: 0; } .eb-price-table tbody th small { display: block; margin-top: 2px; font-family: var(--body); font-size: .875rem; color: var(--fern); letter-spacing: 0; } @media (max-width: 400px) { .eb-price-table th, .eb-price-table td { font-size: 1.35rem; padding-left: 14px; } } .eb-party-photo { margin: 1.6rem 0 0; border-radius: var(--r-photo); overflow: hidden; } .eb-party-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .eb-services-note { margin-top: 1.1rem; color: var(--fern-deep); } .eb-extras .eb-offer-card { margin: clamp(28px, 3vw, 40px) 0 0; } .eb-extras .eb-price-list + .eb-offer-card { margin-top: clamp(20px, 2.4vw, 32px); } /* ---- venue ------------------------------------------------------------------------------ */ /* Three columns on a laptop: the badge, the words, and the venue's own arched photo on the right (the Glasshouse arch, in a gilt hairline), so the ivy is a room with something in it, not a wall with words at one end. The photo goes below 1100px; the words and badge stack on a phone. */ .eb-venue { background: var(--ivy); color: var(--petal); padding-block: var(--section); position: relative; overflow: hidden; } .eb-venue .eb-wrap-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .eb-venue .eb-h2 { color: var(--petal); max-width: 18ch; } .eb-venue .eb-h2 em { color: var(--gilt-soft); } /* The venue's name on one line under "Recommended at", once there is room. */ @media (min-width: 700px) { .eb-venue .eb-h2 { max-width: 22ch; } .eb-venue .eb-h2 em { white-space: nowrap; } } .eb-venue .eb-prose { color: rgba(238, 231, 217, .88); margin: 1.2rem 0 .6rem; } /* The badge on her petal, its white multiplied away, so its art sits on the warm ground instead of a bright white disc. */ .eb-venue__badge { width: clamp(112px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(205, 186, 142, .6), 0 0 0 8px rgba(205, 186, 142, .08); background: var(--petal); } .eb-venue__badge img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .eb-venue__photo { display: none; margin: 0; border-radius: 999px 999px var(--r-photo) var(--r-photo); overflow: hidden; background: var(--fern-deep); box-shadow: 0 0 0 1px rgba(205, 186, 142, .5); } .eb-venue__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 1100px) { .eb-venue.has-photo .eb-wrap-in { grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); } .eb-venue__photo { display: block; } } @media (min-width: 1300px) { .eb-venue.has-photo .eb-wrap-in { grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); } } .eb-venue .eb-link { color: var(--petal); } .eb-venue .eb-link:hover { color: #fff; } @media (max-width: 700px) { .eb-venue .eb-wrap-in { grid-template-columns: 1fr; } } /* About's short version: the badge, one line, and the way to the venue's page (the full band is the front page's; About said it word for word). */ .eb-venue-line { margin-top: clamp(56px, 8vw, 104px); padding-block: 26px; border-block: 1px solid rgba(128, 135, 109, .3); display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 3vw, 32px); } .eb-venue-line .eb-venue__badge { width: 76px; box-shadow: 0 0 0 1px rgba(160, 134, 82, .55); } .eb-venue-line__text { margin: 0; flex: 1 1 18rem; font-family: var(--display); font-size: var(--t-h3); line-height: 1.25; } .eb-venue-line__text em { font-style: italic; color: var(--fern); } /* ---- Instagram ----------------------------------------------------------------------------- */ .eb-insta__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 40px; margin-bottom: 28px; } .eb-insta__head .eb-link { overflow-wrap: anywhere; } .eb-insta__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); list-style: none; } .eb-insta__grid a { display: block; overflow: hidden; border-radius: var(--r-photo); } .eb-insta__grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); } @media (hover: hover) { .eb-insta__grid a:hover img { transform: scale(1.045); } } @media (max-width: 700px) { .eb-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- the last invitation ---------------------------------------------------------------------- */ .eb-cta { padding-block: calc(var(--section) + clamp(20px, 4vw, 60px)); text-align: center; position: relative; overflow: hidden; } .eb-cta__in { position: static; display: grid; justify-items: center; } .eb-cta__in > :not(.eb-cta__ring) { position: relative; z-index: 1; } .eb-cta .eb-h2 { max-width: 14ch; margin-inline: auto; } .eb-cta .eb-lede { margin: 1.3rem auto 0; max-width: 24rem; } /* The ring is as tall as its section allows, so it is never cut off. */ .eb-cta__ring { position: absolute; height: min(600px, calc(100% - 120px)); width: auto; max-width: 118vw; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; color: var(--gilt); opacity: .55; pointer-events: none; } /* On a phone it is wider than the screen on purpose: its top arc stands over the heading like the Glasshouse arch and runs off both edges (sized to the section's height, it was clipped at both sides by accident). */ @media (max-width: 480px) { .eb-cta__ring { width: 160vw; height: auto; max-width: none; top: 22px; translate: -50% 0; } } /* ---- inner pages ------------------------------------------------------------------------------- */ .eb-page-head { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 6vw, 96px); align-items: center; } .eb-page-head--solo { grid-template-columns: minmax(0, 1fr); } .eb-page-head .eb-page-title { max-width: 18ch; } .eb-page-head .eb-lede { margin-top: 1.4rem; } .eb-page-head__photo { margin: 0; border-radius: var(--r-photo); overflow: hidden; background: var(--sage-soft); } .eb-page-head__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .eb-page-head__photo--portrait img { aspect-ratio: 4 / 5; } /* The arched portrait (the Glasshouse's arch), beside the words. */ .eb-page-head--arch .eb-page-head__photo { border-radius: 999px 999px var(--r-photo) var(--r-photo); } @media (min-width: 1200px) { .eb-page-the-buttery-and-glasshouse .eb-page-head .eb-page-title { max-width: none; } } /* "Rather talk first?": the way to them without the form (Enquire, Questions). */ .eb-talk { display: flex; flex-wrap: wrap; align-items: center; column-gap: .45em; margin: 1.2rem 0 0; font-size: var(--t-small); color: var(--fern-deep); } .eb-talk a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 500; color: var(--fern-deep); text-decoration-color: rgba(79, 90, 72, .4); } .eb-talk .eb-icon { width: 1.15em; height: 1.15em; color: var(--gilt-deep); } @media (hover: hover) { .eb-talk a:hover { color: var(--ink); text-decoration-color: currentColor; } } .eb-page-head--arch > .eb-page-head__photo, .eb-page-head__art { justify-self: end; width: min(100%, 440px); } .eb-page-head__art { position: relative; } /* A short laptop screen: the inner pages' title, words and button in view beside a photo sized from the screen's height. */ @media (min-width: 861px) and (max-height: 860px) { .eb-page-head { padding-block: 28px 48px; } .eb-page-head .eb-page-title { font-size: min(var(--t-page), 8.4vh); } .eb-page-head--arch > .eb-page-head__photo, .eb-page-head__art { width: min(100%, 440px, calc((100svh - 190px) * .8)); } } @media (max-width: 860px) { .eb-page-head { grid-template-columns: 1fr; align-items: start; } .eb-page-head--arch > .eb-page-head__photo, .eb-page-head__art { justify-self: center; width: min(100%, 400px); } } .eb-page-body { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: var(--section); } .eb-page-body .eb-h2 { font-size: var(--t-h2-in); } .eb-split .eb-h2 + .eb-prose, .eb-split .eb-h2 + p { margin-top: 1.1rem; } .eb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; } @media (max-width: 860px) { .eb-split { grid-template-columns: 1fr; } } .eb-rule { border: 0; height: 1px; background: rgba(128, 135, 109, .35); margin-block: clamp(40px, 6vw, 72px); } /* The venue's badge as a seal on the corner of the venue page's photo. */ .eb-venue__seal { position: absolute; z-index: 2; left: -34px; bottom: 30px; width: 124px; box-shadow: 0 0 0 1px rgba(160, 134, 82, .7), 0 0 0 6px var(--mist), 0 14px 30px -14px rgba(38, 45, 39, .5); } .eb-venue__badge--solo { margin-top: 2rem; } /* Stacked, the seal keeps to the photo's own left edge, which is the text's on a phone (at -8px it sat in the gutter). */ @media (max-width: 860px) { .eb-venue__seal { left: 0; bottom: 16px; width: 100px; } } /* Questions: native
, a line of rule above the first and between each. From 1080px a card sits beside them ("Still wondering?"), so the page is not half empty with a lone button at its foot. */ .eb-faq-wrap { display: grid; gap: clamp(40px, 6vw, 64px); } @media (min-width: 1080px) { .eb-faq-wrap { grid-template-columns: minmax(0, 46rem) minmax(0, 22rem); justify-content: space-between; gap: clamp(40px, 6vw, 96px); align-items: start; } .eb-still { position: sticky; top: calc(var(--head-h) + 24px); } } .eb-still { padding: clamp(24px, 3vw, 32px); border-radius: var(--r-card); border: 1px solid rgba(128, 135, 109, .3); background: var(--porcelain); } .eb-still .eb-h3 { margin-bottom: .6rem; } .eb-still p { color: var(--fern-deep); } .eb-still .eb-actions { margin-top: 1.2rem; } .eb-still .eb-talk { margin-top: .6rem; } .eb-faq { max-width: 46rem; } .eb-faq details { border-bottom: 1px solid rgba(128, 135, 109, .35); } .eb-faq details:first-child { border-top: 1px solid rgba(128, 135, 109, .35); } .eb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 64px; padding-block: 14px; font-family: var(--display); font-size: 1.5rem; line-height: 1.25; } .eb-faq summary::-webkit-details-marker { display: none; } .eb-faq summary .eb-icon { width: 22px; height: 22px; color: var(--gilt-deep); transition: transform .3s var(--ease); } .eb-faq details[open] summary .eb-icon { transform: rotate(45deg); } .eb-faq__a { padding: 0 0 22px; max-width: var(--measure); color: var(--fern-deep); } /* ---- the enquiry form (client baseline section 26) -------------------------------------------- Fields are porcelain on the mist; with the grounds this close, the border carries the whole edge, so it is the leaf green at 3.4:1 against the field. Every type= in the markup is in the rule. 16px floor, border-box. Focus draws a gold line along the bottom edge, the ring's colour. */ .eb-form { display: grid; gap: clamp(26px, 3vw, 36px); } .eb-form:focus, .eb-sent:focus { outline: none; } /* Send sits one form-gap under the privacy line above it, not two. */ .eb-form > .eb-actions { margin-top: 0; } /* Arriving at #form shows the heading above it too. */ #form { scroll-margin-top: 88px; } .eb-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; } .eb-fieldset legend { font-family: var(--display); font-size: var(--t-h3); padding: 0; margin-bottom: 14px; } .eb-fieldset legend .eb-legend-n { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--gilt); color: var(--gilt-deep); font-family: var(--body); font-weight: 500; font-size: .875rem; margin-right: .6rem; vertical-align: .2em; } .eb-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; } @media (max-width: 640px) { .eb-fgrid { grid-template-columns: 1fr; } } .eb-f { display: grid; gap: 7px; min-width: 0; align-content: start; } .eb-f--wide { grid-column: 1 / -1; } .eb-f label, .eb-f .eb-f__label { font-weight: 500; font-size: .9688rem; } .eb-f .eb-opt { font-weight: 400; color: var(--fern); } .eb-f__hint { font-size: .875rem; color: var(--fern); margin: 0; } .eb-f:focus-within > label { color: var(--gilt-deep); } .eb-f ::placeholder { color: var(--fern); opacity: 1; } .eb-input, .eb-f input[type="text"], .eb-f input[type="email"], .eb-f input[type="tel"], .eb-f input[type="date"], .eb-f input[type="time"], .eb-f input[type="number"], .eb-f input[type="url"], .eb-f input[type="search"], .eb-f select, .eb-f textarea { width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--porcelain) linear-gradient(var(--gilt), var(--gilt)) 50% 100% / 0 2px no-repeat; border: 1px solid var(--leaf); border-radius: var(--r-field); appearance: none; -webkit-appearance: none; transition: background-size .35s var(--ease-soft), border-color .2s; } .eb-f select { padding-right: 44px; background-image: linear-gradient(var(--gilt), var(--gilt)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234F5A48'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 50% 100%, right 14px center; background-size: 0 2px, 18px; } .eb-f textarea { min-height: 128px; line-height: 1.6; resize: vertical; border-bottom-right-radius: 4px; } /* It grows with her words where the browser can, so there is no grip in the round corner at all; elsewhere the grip sits in a square one. */ @supports (field-sizing: content) { .eb-f textarea { field-sizing: content; max-height: 28rem; resize: none; border-bottom-right-radius: var(--r-field); } } /* The date and time pickers' icons, quieter than the words. */ .eb-f input::-webkit-calendar-picker-indicator, .eb-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; transition: opacity .2s; } .eb-f input::-webkit-calendar-picker-indicator:hover, .eb-input::-webkit-calendar-picker-indicator:hover { opacity: .9; } .eb-input:focus, .eb-f input:focus, .eb-f select:focus, .eb-f textarea:focus { background-size: 100% 2px; border-color: var(--fern); outline: none; } .eb-f select:focus { background-size: 100% 2px, 18px; } .eb-input:focus-visible, .eb-f input:focus-visible, .eb-f select:focus-visible, .eb-f textarea:focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 3px; } .eb-f input[aria-invalid="true"], .eb-f select[aria-invalid="true"], .eb-f textarea[aria-invalid="true"] { border-color: #9B2F2F; } .eb-f__err { color: #8E2A2A; font-size: .875rem; margin: 0; } .eb-f input[type="file"] { font-size: .95rem; color: var(--fern-deep); max-width: 100%; } .eb-f input[type="file"]::file-selector-button { font: inherit; font-weight: 500; margin-right: 14px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--leaf); background: transparent; color: var(--fern-deep); cursor: pointer; } @media (hover: hover) { .eb-f input[type="file"]::file-selector-button:hover { background: rgba(195, 196, 178, .35); } } /* Inspiration photos: with script, the file box is a quiet "Add photos" button and a line saying how many are in (enquiry.js); the real input stays focusable under it, and its focus draws the ring on the button. Without script it is the plain file box. */ .eb-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .eb-file__btn, .eb-file__status { display: none; } .js .eb-file__btn { display: inline-flex; } .js .eb-file__status { display: block; margin: 0; font-size: var(--t-small); color: var(--fern-deep); } .js .eb-file__status:empty { display: none; } .js .eb-file__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } .eb-file__input:focus-visible + .eb-file__btn { outline: 2px solid var(--gilt-deep); outline-offset: 3px; } .eb-file__input[aria-invalid="true"] + .eb-file__btn { border-color: #9B2F2F; } .eb-f:focus-within > .eb-f__label { color: var(--gilt-deep); } /* Ticks and choices as rounds, like the steppers beside them: a porcelain circle in the leaf line; chosen, fern with a white tick (a box) or a fern dot (a choice of one). Windows' high-contrast mode keeps its own. */ .eb-check-inline { display: flex; gap: 10px; align-items: flex-start; font-size: .9688rem; cursor: pointer; } .eb-check-inline input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--fern); flex: none; } .eb-check-inline input[type="radio"], .eb-check-inline input[type="checkbox"], .eb-stepper input[type="checkbox"] { appearance: none; -webkit-appearance: none; border: 1px solid var(--leaf); border-radius: 50%; background: #fff no-repeat center; cursor: pointer; transition: background-color .2s var(--ease-soft), border-color .2s var(--ease-soft), background-size .2s var(--ease); } .eb-check-inline input[type="radio"] { background-image: radial-gradient(circle, var(--fern) 0 4.5px, transparent 5.5px); background-size: 0 0; } .eb-check-inline input[type="radio"]:checked { border-color: var(--fern); background-size: 100% 100%; } .eb-check-inline input[type="checkbox"]:checked, .eb-stepper input[type="checkbox"]:checked { border-color: var(--fern); background-color: var(--fern); background-size: 62%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); } @media (hover: hover) { .eb-check-inline:hover input:not(:checked), .eb-stepper input[type="checkbox"]:not(:checked):hover { border-color: var(--fern); } } .eb-check-inline input:focus-visible, .eb-stepper input[type="checkbox"]:focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 3px; border-radius: 50%; } @media (forced-colors: active) { .eb-check-inline input, .eb-stepper input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; } } .eb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* The party builder: who is getting ready, and what each is having. */ .eb-party { display: grid; gap: 12px; } .eb-party__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(148px, auto)); gap: 12px 22px; align-items: center; padding: 14px 18px; border-radius: var(--r-card); background: var(--porcelain); border: 1px solid rgba(128, 135, 109, .3); } .eb-party__who { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; } .eb-party__who small { display: block; font-family: var(--body); font-size: .8125rem; color: var(--fern); margin-top: 2px; } /* Each stepper: its label above, then minus, the number and plus. Nothing in the row may shrink (a squeezed button lost its icon). */ .eb-stepper { display: grid; grid-template-columns: 44px 48px 44px; grid-template-rows: auto 44px; column-gap: 6px; row-gap: 4px; align-items: center; justify-content: start; } .eb-stepper__label { grid-column: 1 / -1; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fern); } .eb-stepper input[type="number"] { width: 48px; min-height: 44px; height: 44px; padding: 4px; text-align: center; font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--ink); border-radius: var(--r-field); border: 1px solid var(--leaf); background: #fff; -moz-appearance: textfield; appearance: textfield; } .eb-stepper input[type="number"]:focus { border-color: var(--fern); outline: 2px solid var(--gilt-deep); outline-offset: 2px; } .eb-stepper input[type="number"]::-webkit-inner-spin-button, .eb-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .eb-stepper input[type="checkbox"] { width: 26px; height: 26px; margin: 0; grid-column: 1; justify-self: center; accent-color: var(--fern); } .eb-stepper button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--leaf); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--fern-deep); padding: 0; } .eb-stepper button:disabled { opacity: .35; cursor: default; } .eb-stepper .eb-icon { width: 16px; height: 16px; } @media (max-width: 640px) { .eb-party__row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; } .eb-party__who { grid-column: 1 / -1; } .eb-stepper { grid-template-columns: 44px 44px 44px; column-gap: 4px; } .eb-stepper input[type="number"] { width: 44px; } } /* The estimate and the morning plan, which fill in as she types: straight after the party, where the numbers are being chosen. */ .eb-plan { border-radius: var(--r-card); background: var(--ivy); color: var(--petal); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; } .eb-plan[hidden] { display: none; } .eb-plan h3 { font-family: var(--display); font-size: var(--t-h3); line-height: 1.2; color: var(--petal); } .eb-plan__total { font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--gilt-soft); font-variant-numeric: lining-nums tabular-nums; } .eb-plan__total small { display: block; margin-top: .45rem; font-family: var(--body); font-size: .875rem; line-height: 1.4; color: rgba(238, 231, 217, .82); } .eb-plan__lines { list-style: none; display: grid; gap: 6px; font-size: .9375rem; } .eb-plan__lines li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(238, 231, 217, .14); padding-bottom: 6px; } .eb-plan__lines span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .eb-plan__note { font-size: .875rem; color: rgba(238, 231, 217, .8); margin: 0; } .eb-plan__time { display: flex; align-items: center; gap: 10px; font-size: 1rem; } .eb-plan__time .eb-icon { color: var(--gilt-soft); } /* The heading and the form on the left; on the right the arched photo, then "What happens next" and the offer, which from 1200px keep up with her as she scrolls the long form (the photo scrolls away; the two cards are shorter than a laptop screen, so nothing is out of reach). On a phone: the heading, what happens next, then the form. */ .eb-enquire { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(28px, 5vw, 72px); align-items: start; } .eb-enquire__h { grid-column: 1; grid-row: 1; } .eb-enquire__form { grid-column: 1; grid-row: 2; } .eb-enquire__aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: grid; gap: 20px; align-content: start; } .eb-enquire__stick { display: grid; gap: 20px; } @media (min-width: 1200px) and (min-height: 700px) { .eb-enquire__stick { position: sticky; top: calc(var(--head-h) + 24px); } } @media (max-width: 960px) { .eb-enquire { grid-template-columns: minmax(0, 1fr); } .eb-enquire__h, .eb-enquire__form, .eb-enquire__aside { grid-column: 1; grid-row: auto; } .eb-enquire__aside { margin-bottom: clamp(32px, 6vw, 48px); } .eb-enquire__aside > .eb-enquire__photo { display: none; } } .eb-sent { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-card); background: var(--porcelain); border: 1px solid var(--sage); } .eb-sent .eb-h2 { font-size: var(--t-h2-in); margin-bottom: 1rem; } /* What she sent, in short: her date, who is getting ready, where. */ .eb-sent__list { margin: 1.4rem 0 0; display: grid; } .eb-sent__list > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 2px 20px; padding-block: 12px; border-top: 1px solid rgba(128, 135, 109, .25); } .eb-sent__list dt { font-size: var(--t-small); color: var(--fern); padding-top: .15em; } .eb-sent__list dd { margin: 0; } .eb-sent__more { display: block; font-size: var(--t-small); color: var(--fern-deep); } @media (max-width: 640px) { .eb-sent__list > div { grid-template-columns: minmax(0, 1fr); } } /* After a Back to the form she has already sent (enquiry.js). */ .eb-sent--again .eb-actions { margin-top: 1.4rem; } .eb-errors { padding: 16px 20px; border-radius: var(--r-card); background: #F4E6E3; color: #6E2323; border: 1px solid #D9B2AB; } .eb-errors ul { margin: .4em 0 0 1.2em; } .eb-errors:focus { outline: none; } /* ---- the offer bar, the status line and the WhatsApp button ------------------------------------ */ .eb-offer { background: var(--ivy); color: var(--petal); text-align: center; font-size: .9375rem; padding: 10px var(--gutter); } .eb-offer a { color: var(--gilt-soft); font-weight: 500; } .eb-offer strong { font-weight: 500; color: #fff; } .eb-status { background: var(--petal); color: var(--ink); text-align: center; padding: 10px var(--gutter); font-size: .9375rem; border-bottom: 1px solid rgba(160, 134, 82, .35); } .eb-status p { margin: 0; } .eb-status--away, .eb-status--full { background: var(--sage-soft); } .eb-wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--fern); color: var(--porcelain); text-decoration: none; font-weight: 500; box-shadow: 0 14px 30px -14px rgba(38, 45, 39, .7); } .eb-wa-float .eb-icon { width: 26px; height: 26px; } @media (max-width: 480px) { .eb-wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .eb-wa-float { padding: 0 13px; } } /* ---- footer ------------------------------------------------------------------------------------ */ .eb-foot { background: var(--ivy); color: rgba(238, 231, 217, .9); padding-top: clamp(64px, 8vw, 104px); } .eb-foot__in { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px clamp(32px, 5vw, 80px); padding-bottom: clamp(48px, 6vw, 72px); } /* Its viewBox is cropped to the art, so its left edge is the column's (it sat 30px in); 190px draws the art at the size 250px of the old box did. */ .eb-foot__logo { width: min(190px, 100%); height: auto; } .eb-foot__line { margin-top: 1.4rem; max-width: 22rem; color: rgba(238, 231, 217, .75); font-size: var(--t-small); } .eb-foot__h { font-family: var(--body); font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-soft); font-weight: 500; margin-bottom: .8rem; } .eb-foot__list { list-style: none; display: grid; gap: 2px; font-size: var(--t-small); } .eb-foot__list--pages { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(24px, 3vw, 40px); } /* 34px rows for a mouse; a finger gets the full 44. */ .eb-foot__list a { display: inline-flex; align-items: center; gap: .6em; min-height: 34px; text-decoration: none; color: rgba(238, 231, 217, .9); } .eb-foot__list a:hover { color: #fff; text-decoration: underline; } .eb-foot__list .eb-icon { color: var(--gilt-soft); width: 1.15em; height: 1.15em; } .eb-foot__small { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding-block: 22px 28px; border-top: 1px solid rgba(238, 231, 217, .15); font-size: .875rem; color: rgba(238, 231, 217, .7); } .eb-foot__small p { margin: 0; } .eb-foot__small a { color: inherit; text-decoration: none; display: inline-flex; min-height: 34px; align-items: center; } .eb-foot__small a:hover { color: #fff; text-decoration: underline; } @media (pointer: coarse) { .eb-foot__list a, .eb-foot__small a { min-height: 44px; } } .eb-byline { margin-left: auto !important; opacity: .8; } @media (max-width: 860px) { .eb-foot__in { grid-template-columns: 1fr; } .eb-byline { margin-left: 0 !important; } } /* ---- the Enquire page ---------------------------------------------------------------------------- */ /* The checker as the front page draws it: the words beside a porcelain card (full width on the sage it was a slab with 80px between days). */ .eb-enq-check { margin-bottom: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .eb-enq-check__text { margin: 1.1rem 0 0; max-width: 30rem; color: var(--fern-deep); } .eb-enq-check .eb-check { border: 1px solid rgba(128, 135, 109, .22); } @media (max-width: 1080px) { .eb-enq-check { grid-template-columns: minmax(0, 1fr); gap: 22px; } } .eb-enquire__h { margin-bottom: clamp(20px, 3vw, 32px); } .eb-enquire__photo { margin: 0; border-radius: 999px 999px var(--r-photo) var(--r-photo); overflow: hidden; } .eb-enquire__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .eb-next { padding: 24px; border-radius: var(--r-card); border: 1px solid rgba(128, 135, 109, .3); background: var(--porcelain); } .eb-next .eb-h3 { font-size: 1.5rem; margin-bottom: 12px; } .eb-next__list { list-style: none; counter-reset: next; display: grid; gap: 12px; } .eb-next__list li { counter-increment: next; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: var(--t-small); color: var(--fern-deep); } .eb-next__list[start="2"] { counter-reset: next 1; } .eb-next__list li::before { content: counter(next); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gilt); display: grid; place-items: center; font-family: var(--body); font-weight: 500; font-size: .875rem; color: var(--gilt-deep); } .eb-radios { display: flex; flex-wrap: wrap; gap: 10px 26px; } .eb-f__hint.is-free { color: var(--fern-deep); } .eb-f__hint.is-booked, .eb-f__hint.is-away { color: #7E2E2E; } /* ---- About ----------------------------------------------------------------------------------------- */ /* Who they are, under the heading: the first line a step up, in the display face; the rest as the page's lede. */ .eb-about__text { margin-top: 1.6rem; font-size: var(--t-lede); line-height: 1.65; color: var(--fern-deep); } .eb-about__text p:first-child { font-family: var(--display); font-size: clamp(1.55rem, 1.3rem + 1vw, 2.05rem); line-height: 1.26; color: var(--ink); text-wrap: balance; margin-bottom: .75em; } .eb-about__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: start; } .eb-about__photo { margin: 0; border-radius: var(--r-photo); overflow: hidden; } .eb-about__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .eb-about__role { margin: 1.3rem 0 .2rem; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-deep); } .eb-about__name { margin: 1.3rem 0 .7rem; } .eb-about__role + .eb-about__name { margin-top: 0; } @media (max-width: 700px) { .eb-about__duo { grid-template-columns: 1fr; } } /* The artist herself: a round photo in the ring (a mist gap, then a gilt hairline, the site's one motif) over the foot of her photo at work, her name beside it. Half the ring hangs below the photo, so her heading lands about where the other card's does. */ .eb-about__meet { --face: clamp(92px, 8vw, 112px); position: relative; display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 20px); margin-top: 1.3rem; } .eb-about__photo + .eb-about__meet { margin-top: calc(var(--face) / -2); padding-left: clamp(14px, 2vw, 24px); align-items: flex-start; } /* Her role and name start 1.3rem under the photo, as on a card with no round photo, so the two names line up across the page. */ .eb-about__photo + .eb-about__meet .eb-about__who { margin-top: calc(var(--face) / 2 + 1.3rem); } .eb-about__face { flex: none; width: var(--face); aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; background: var(--sage-soft); box-shadow: 0 0 0 4px var(--mist), 0 0 0 5px var(--gilt), 0 16px 30px -16px rgba(38, 45, 39, .55); } .eb-about__face img { display: block; width: 100%; height: 100%; object-fit: cover; } .eb-about__who { min-width: 0; padding-bottom: .1rem; } .eb-about__meet .eb-about__role, .eb-about__meet .eb-about__name { margin-top: 0; } .eb-about__meet .eb-about__name { margin-bottom: 0; } .eb-about__meet + .eb-prose { margin-top: .7rem; } /* ---- booking terms, privacy ------------------------------------------------------------------------ */ .eb-legal h2 { margin: 2rem 0 .6rem; } .eb-legal h2:first-child { margin-top: 0; } /* Lead-ins are her *stars*: upright and a little heavier, since only the upright Hanken is loaded. */ .eb-legal em, .eb-terms em { font-style: normal; font-weight: 500; } .eb-terms { max-width: 62rem; } .eb-terms__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 6px clamp(24px, 5vw, 72px); padding-block: 24px; border-top: 1px solid rgba(128, 135, 109, .3); } .eb-terms__row:first-child { border-top: 0; padding-top: 0; } .eb-terms__name { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--ink); } .eb-terms__text p { margin-bottom: .8em; } .eb-terms__text { max-width: var(--measure); } .eb-terms__text p:last-child, .eb-terms__wide p:last-child { margin-bottom: 0; } .eb-terms__wide { max-width: var(--measure); padding-block: 24px; border-top: 1px solid rgba(128, 135, 109, .3); } .eb-terms__wide:first-child { border-top: 0; padding-top: 0; } @media (max-width: 700px) { .eb-terms__row { grid-template-columns: 1fr; padding-block: 20px; } } /* ---- 404 ------------------------------------------------------------------------------------------- */ .eb-404 { text-align: center; padding-block: var(--section); display: grid; justify-items: center; } .eb-404__mark { width: 96px; height: auto; margin-bottom: 28px; } .eb-404 .eb-page-title { margin-bottom: 1.4rem; max-width: 16ch; } .eb-404 .eb-lede { margin-inline: auto; } .eb-404 ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 1.4rem; } /* ---- an arched photo's first appearance ------------------------------------------------------ The first time an arched photo below the fold scrolls into view it rises out of its own foot, like a door opening upward: the class is added by script to photos not yet on screen (never the hero or a page's first photo, so the largest paint is not held back), and clip-path moves no layout. Without script, and with motion off, the photo is simply there. */ .eb-veil { clip-path: inset(100% 0 0 0); } .eb-veil.is-shown { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease); } /* ---- motion off --------------------------------------------------------------------------------- One block covers every transition and animation on the site, including ones added later (section 27). The JS side reads the same query once (site.js, carousel.js, book.js). Feedback stays; movement goes. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js .eb-hero__ring { -webkit-mask: none; mask: none; } .eb-veil { clip-path: none !important; } .eb-cal__ring path { stroke-dashoffset: 0 !important; } } /* ---- print --------------------------------------------------------------------------------------- */ @media print { .eb-head, .eb-foot__pages, .eb-wa-float, .eb-offer, .eb-status, .eb-carousel, .eb-rc, .eb-hero__ring, .eb-hero__spray, .eb-cta__ring, .eb-skip { display: none !important; } body { background: #fff; color: #000; } .eb-foot, .eb-venue, .eb-plan { background: #fff !important; color: #000 !important; } .eb-foot *, .eb-venue *, .eb-plan * { color: #000 !important; } .eb-foot__logo { filter: invert(1); } a { text-decoration: none; } } /* --------------------------------------------------------------------------- * The travel map (inc/area-map.php, drawn by brand/area-map.py): a plate in * the manner of an old county map. The sea is a pale wash with three * water-lines along the coast; Kent is washed in sage inside a fern edge, * and the wash carries on over the border into Surrey and East Sussex and * fades, which is what "the Surrey and Sussex borders" means. The names are * HTML over the drawing, sized in rem, so they read on a phone; the smaller * towns step aside when the map is narrow. The rings are the gilt ring from * her logo, one for each venue in the list beside it. * ------------------------------------------------------------------------ */ /* Beside the map, the words and the list sit together in the middle of its height; on a phone the map comes between them, so it is seen first. */ .eb-travel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". map" "text map" "list map" ". map"; row-gap: 0; } .eb-travel__text { grid-area: text; } .eb-travel .eb-venues { grid-area: list; } .eb-travel .eb-map { grid-area: map; align-self: center; } @media (max-width: 860px) { .eb-travel { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "text" "map" "list"; row-gap: 2.2rem; } .eb-travel .eb-venues { margin-top: 0; } } .eb-travel__text .eb-prose { margin-top: 1rem; } .eb-venues { margin: 1.6rem 0 0; } .eb-venues ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .eb-venues__head { margin: 0 0 .8rem; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-deep); } @media (max-width: 860px) { .eb-venues__head { display: none; } } .eb-venues li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: .75rem; align-items: baseline; } .eb-venues__ring { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--gilt); transform: translateY(1px); transition: background-color .25s var(--ease-soft), transform .25s var(--ease); } .eb-venues li.is-lit .eb-venues__ring { background: var(--gilt); transform: translateY(1px) scale(1.2); } .eb-venues__name { color: var(--ivy); font-weight: 500; } .eb-venues__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--gilt-soft); text-decoration-thickness: 1px; text-underline-offset: .22em; } .eb-venues__name a:hover { text-decoration-color: var(--gilt); } .eb-venues__where { color: var(--fern); } .eb-venues__where::before { content: "\00B7\00A0"; } .eb-map { --ebm-sea: #E6EAE0; --ebm-land: #FAF9F3; --ebm-kent: #CDD3BA; --ebm-glow: #D3D8C2; margin: 0; container-type: inline-size; min-width: 0; } .eb-map__plate { position: relative; overflow: hidden; border-radius: var(--r-photo); background: var(--ebm-sea); box-shadow: 0 0 0 1px rgba(160, 134, 82, .55), 0 0 0 5px var(--mist), 0 0 0 6px rgba(160, 134, 82, .28), 0 26px 50px -32px rgba(38, 45, 39, .5); } .eb-map__plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/book-paper.webp?v=2") center / 480px; mix-blend-mode: multiply; opacity: .6; } .eb-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ebm-sea { fill: var(--ebm-sea); } .ebm-water use { fill: none; stroke-linejoin: round; } .ebm-w1 { stroke: rgba(128, 135, 109, .46); stroke-width: 10; } .ebm-w2 { stroke: rgba(128, 135, 109, .32); stroke-width: 21; } .ebm-w3 { stroke: rgba(128, 135, 109, .2); stroke-width: 33; } .ebm-water .is-cut { stroke: var(--ebm-sea); } .ebm-w1.is-cut { stroke-width: 8.3; } .ebm-w2.is-cut { stroke-width: 19.3; } .ebm-w3.is-cut { stroke-width: 31.3; } .ebm-landfill { fill: var(--ebm-land); } /* Lighter than Kent's own wash, so it reads as Kent carrying on and fading. */ .ebm-glow { fill: none; stroke: var(--ebm-glow); stroke-width: 130; stroke-linejoin: round; } .ebm-kent { fill: var(--ebm-kent); } .ebm-lines use { fill: none; stroke: rgba(79, 90, 72, .5); stroke-width: .9; stroke-dasharray: 1.4 3.4; stroke-linecap: round; } .ebm-coast { fill: none; stroke: rgba(62, 71, 56, .6); stroke-width: .9; stroke-linejoin: round; } .ebm-edge { fill: none; stroke: var(--fern); stroke-width: 1.8; stroke-linejoin: round; } .eb-map__marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .eb-map__area { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--display); color: rgba(62, 71, 56, .82); } .eb-map__area.county { font-size: clamp(.66rem, 1.9cqi, .86rem); font-weight: 600; letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; } .eb-map__area.is-kent { font-size: clamp(1.1rem, 3.6cqi, 1.95rem); letter-spacing: .36em; padding-left: .36em; color: var(--fern-deep); } .eb-map__area.sea { font-size: clamp(.8rem, 2.3cqi, 1.1rem); font-style: italic; letter-spacing: .1em; color: rgba(79, 90, 72, .78); } .eb-map__town { position: absolute; width: 0; height: 0; } .eb-map__town::before { content: ""; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ivy); } .eb-map__town > span { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; font-size: clamp(.66rem, 1.8cqi, .8rem); letter-spacing: .02em; color: var(--ivy); text-shadow: 0 0 2px var(--ebm-land), 0 0 5px var(--ebm-land), 0 0 9px var(--ebm-land); } .eb-map__town.is-r > span, .eb-map__town.is-r-t > span { left: 7px; } .eb-map__town.is-l > span { right: 7px; } .eb-map__town.is-b > span { top: 7px; left: 0; transform: translateX(-50%); } /* A venue's ring sits on the town: no dot, and the name stands clear of the ring. */ .eb-map__town.is-ringed::before { display: none; } .eb-map__town.is-ringed.is-r > span { left: 11px; } .eb-map__town.is-ringed.is-l > span { right: 11px; } .eb-map__town.is-ringed.is-b > span { top: 10px; } @container (max-width: 560px) { .eb-map .is-minor { display: none; } /* Canterbury's name would run off the right edge: above its dot instead. */ .eb-map__town.is-r-t > span { left: 0; top: auto; bottom: 6px; transform: translateX(-50%); } .eb-map__north { top: 4%; right: 2.6%; } .eb-map__north svg { height: 18px; } } .eb-map__ring { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; pointer-events: auto; } @container (max-width: 560px) { .eb-map__ring { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } } .eb-map__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid var(--gilt); background: rgba(250, 249, 243, .92); box-shadow: 0 0 0 2px rgba(250, 249, 243, .55); transition: background-color .25s var(--ease-soft), transform .3s var(--ease); } .eb-map__ring:hover, .eb-map__ring.is-lit { z-index: 2; } .eb-map__ring:hover::before, .eb-map__ring.is-lit::before { background: var(--gilt); transform: scale(1.3); } .eb-map__tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 4px); opacity: 0; white-space: nowrap; pointer-events: none; padding: .32rem .7rem; border-radius: 999px; background: var(--ivy); color: var(--porcelain); font-size: .75rem; letter-spacing: .02em; transition: opacity .2s var(--ease-soft), transform .25s var(--ease); } .eb-map__ring.is-tip-l .eb-map__tip { left: auto; right: -6px; transform: translate(0, 4px); } .eb-map__ring.is-tip-r .eb-map__tip { left: -6px; transform: translate(0, 4px); } .eb-map__ring:hover .eb-map__tip, .eb-map__ring.is-lit .eb-map__tip { opacity: 1; transform: translate(-50%, 0); } .eb-map__ring.is-tip-l:hover .eb-map__tip, .eb-map__ring.is-tip-l.is-lit .eb-map__tip, .eb-map__ring.is-tip-r:hover .eb-map__tip, .eb-map__ring.is-tip-r.is-lit .eb-map__tip { transform: translate(0, 0); } .eb-map__north { position: absolute; top: 5.5%; right: 3.6%; display: grid; justify-items: center; gap: 2px; font: 600 .7rem/1 var(--body); letter-spacing: .12em; color: var(--gilt-deep); } .eb-map__north svg { width: 10px; height: 24px; fill: var(--gilt); } .eb-map__scale { display: inline-block; height: 7px; margin-right: .55rem; border: 1.2px solid var(--gilt-deep); border-top: 0; vertical-align: 1px; } .eb-map__key ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; margin: 1.15rem 0 0; padding: 0; font-size: var(--t-small); color: var(--fern); } .eb-key { display: inline-block; vertical-align: -1px; width: 20px; height: 12px; margin-right: .55rem; border-radius: 2px; } .eb-key--kent { background: var(--ebm-kent); box-shadow: inset 0 0 0 1.3px var(--fern); } .eb-key--border { background: linear-gradient(90deg, var(--ebm-glow), rgba(190, 196, 166, 0)); } .eb-key--ring { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--gilt); vertical-align: -1px; } .eb-map__credit { margin: .7rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--fern); opacity: .85; } /* Drawn when it scrolls into view (site.js): the edge of Kent first, then its wash, the wash over the borders, and the rings one by one. Without script, or with motion off, it is simply there. */ .eb-map.is-waiting .ebm-edge { stroke-dashoffset: var(--ebm-len, 0); } .eb-map.is-waiting .ebm-kent, .eb-map.is-waiting .ebm-glow { opacity: 0; } .eb-map.is-waiting .eb-map__ring::before { transform: scale(0); } .eb-map.is-drawn .ebm-edge { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-soft); } .eb-map.is-drawn .ebm-kent { transition: opacity 1.1s var(--ease-soft) 1s; } .eb-map.is-drawn .ebm-glow { transition: opacity 1.6s var(--ease-soft) 1.5s; } .eb-map.is-drawn .eb-map__ring::before { transition: transform .5s var(--ease) calc(1.9s + var(--i, 0) * 110ms), background-color .25s var(--ease-soft); }