/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.35s}
.nav::before{content:"";position:absolute;inset:0 0 -46px 0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(247,244,236,.92) 0%,rgba(247,244,236,.6) 46%,rgba(247,244,236,0) 100%)}.nav.solid::before{opacity:0}
/* Above the sheet, which is its sibling: otherwise the close button is behind the panel it opens. */
.nav .wrap{position:relative;z-index:61;
display:flex;align-items:center;justify-content:space-between;gap:44px;height:104px}
/*
The wordmark must not be squeezed.
The header is a flex row and every other item has a hard minimum — Sign in, the gold CTA, the
hamburger — so the logo was the only thing that could give. `img{max-width:100%}` let it lose
width while the height stayed pinned, which flattens the letterforms rather than scaling them:
at 320px it rendered at 46% of its correct width. flex:0 0 auto takes it out of the negotiation.
*/
.nav .wrap > a{flex:0 0 auto}
.nav .logo{height:51px;width:auto;max-width:none;transition:.25s;filter:drop-shadow(0 1px 1px rgba(247,244,236,.9))}
.navlinks{display:flex;gap:40px;align-items:center}
.navlinks a.lnk{position:relative;font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:#383b32;transition:color .25s;white-space:nowrap;padding:6px 0}
.navlinks a.lnk::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.navlinks a.lnk:hover{color:var(--sage)}
.navlinks a.lnk:hover::after{transform:scaleX(1)}
.navtools{display:flex;align-items:center;gap:22px}
/*
Sign in leaves the header on a phone. It only ever matched .navlinks a.lnk, so out here it had no
uppercase, no tracking and a 21px tap target — and the room it took is what was squeezing the
wordmark. The menu sheet carries it (site-nav), which is where it belongs at this width.
*/
@media(max-width:820px){ .navtools > .lnk{display:none} }
.lang{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:500;letter-spacing:.1em;color:#383b32;cursor:pointer;transition:color .25s}
.lang:hover{color:var(--sage)}
.lang svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}
/*
The one gold thing in the bar.
Sage on cream is the page's own palette, so the single action in the header sat inside the background
rather than on top of it. Gold is the brand's accent and is spent nowhere else at this size — and it
takes ink, not ivory: white on champagne is under 3:1 and unreadable at this weight. Same recipe as
the top step of the pricing stair, so the two read as one decision.
*/
.navcta{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:#1F2A20;background:var(--gold-hi, #C4A968);
padding:14px 26px;border-radius:8px;transition:background .25s,transform .25s,box-shadow .25s;white-space:nowrap}
.navcta:hover{background:#D6BC7C;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(172,146,76,.65)}
@media(max-width:1160px){.navlinks{display:none}}
/* ---------- the small-screen menu ---------- */
.navburger{display:none;position:relative;width:38px;height:38px;border:0;background:none;cursor:pointer;
padding:0;flex:0 0 auto}
.navburger i{position:absolute;left:9px;width:20px;height:1.5px;background:#38463C;border-radius:2px;
transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.navburger i:first-child{top:16px}
.navburger i:last-child{top:22px}
.navburger.is-on i:first-child{transform:translateY(3px) rotate(45deg)}
.navburger.is-on i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(max-width:1160px){ .navburger{display:block} }
/* While the sheet is open the bar keeps only the mark and the close button. */
.nav.menu-open .navtools > :not(.navburger){display:none}
.nav.menu-open::before{opacity:0}
/*
The [hidden] attribute does not survive a class that sets display: an author rule beats the user
agent's regardless of specificity, so .navsheet{display:flex} kept the panel open on every screen,
desktop included. It is closed here explicitly, and the wide viewport closes it whatever the state.
*/
.navsheet[hidden]{display:none}
/*
The list starts under the bar and the air falls below it. Centring a short list inside a tall panel
that also carried a 110px top padding pushed everything into the bottom half, which reads as a
layout accident rather than a choice.
*/
.navsheet{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;
gap:clamp(26px,4vw,38px);padding:clamp(98px,15vh,128px) clamp(26px,7vw,64px) clamp(36px,7vw,56px);
overflow-y:auto;background:var(--ivory);
animation:navsheet-in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes navsheet-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* Placed after the base rule on purpose: at equal specificity the later block wins. */
@media(min-width:1161px){ .navsheet{display:none} }
.navsheet__links{display:flex;flex-direction:column}
.navsheet__links a{display:block;padding:clamp(13px,2.2vw,18px) 0;text-decoration:none;
border-bottom:1px solid var(--line);
font-family:"Cormorant Garamond","Baskerville",Georgia,serif;
font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.1;color:var(--sage)}
.navsheet__links a:first-child{border-top:1px solid var(--line)}
.navsheet__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.navsheet__in{font-size:.86rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.navsheet .navcta{padding:15px 24px}
@media(prefers-reduced-motion:reduce){ .navsheet{animation:none} }
/*
On a phone the header had no rules of its own: a 46px wordmark, a 44px gap and three tools laid out
for a desk. The flexbox resolved it by crushing the logo to nothing and letting the button run off the
right edge. So the bar is sized for the hand — shorter, tighter, and the language chip (which repeats
what the page already is) gives up its room to the two things that are actually actions.
*/
@media(max-width:820px){
.nav .wrap{gap:12px;height:76px}
.nav .logo{height:36px}
.navtools{gap:15px}
.navtools .lang{display:none}
.navcta{font-size:.6rem;letter-spacing:.09em;padding:11px 15px;border-radius:7px}
.navcta:hover{transform:none;box-shadow:none}
}
@media(max-width:400px){
.nav .wrap{gap:9px}
.nav .logo{height:31px}
.navtools{gap:11px}
.navtools .lnk{font-size:.8rem}
.navcta{font-size:.55rem;padding:10px 12px}
}
.nav.solid{background:rgba(249,247,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* ---------- footer ----------
A sign-off, not a directory.
It was four thin columns of twelve links, eight of which pointed at "#": Our story, Contact, FAQ,
Order samples, For planners, Privacy, Terms, Refunds. A footer full of links that go nowhere is worse
than a short one, so this carries only destinations that exist, in one row, under the mark and the
two ways to actually reach a person.
*/
footer.ft{background:var(--sage);color:rgba(249,247,242,.72);
padding:clamp(56px,6vw,82px) 0 clamp(26px,3vw,34px)}
/* The floating stack is fixed to this corner; the last links need a lane it does not cover. */
@media(max-width:900px){ footer.ft{padding-bottom:calc(clamp(26px,3vw,34px) + 66px)} }
.ft__top{display:grid;gap:clamp(30px,4vw,64px);
padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid rgba(249,247,242,.16)}
@media(min-width:820px){ .ft__top{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:start} }
.ft__mark{height:29px;width:auto;margin-bottom:18px}
.ft__say{max-width:36ch;margin:0;font-size:.94rem;line-height:1.65}
.ft__line{margin:14px 0 0;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic;
font-size:1.3rem;color:var(--sand)}
/* The same labelled rows the contact page uses, so the two read as one voice. */
.ft__reach{list-style:none;margin:0;padding:0}
.ft__reach li{padding:13px 0;border-top:1px solid rgba(249,247,242,.16)}
.ft__reach li:last-child{border-bottom:1px solid rgba(249,247,242,.16)}
.ft__reach span{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(249,247,242,.5);margin-bottom:4px}
.ft__reach a{display:inline-block;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;
font-size:1.1rem;color:var(--sand);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.ft__reach a:hover{color:var(--ivory);border-bottom-color:var(--sand)}
.ft__nav{display:flex;flex-wrap:wrap;gap:10px clamp(20px,2.6vw,38px);
padding:clamp(22px,2.6vw,32px) 0}
.ft__nav a{font-size:.84rem;letter-spacing:.02em;color:rgba(249,247,242,.72);text-decoration:none;
transition:color .25s}
/*
Touch targets in the site's densest tap area: the footer link list was 21.8px tall with a 10px
row gap, and the reach links 28.5px. The visible type is unchanged.
*/
@media(max-width:900px){
.ft__nav a,.ft__reach a{display:inline-flex;align-items:center;min-height:44px}
.ft__nav{gap:2px clamp(20px,2.6vw,38px)}
}
.ft__nav a:hover{color:var(--ivory)}
/* The policies sit quieter than the nav above them, on their own line above the copyright. */
.ft__legal{display:flex;flex-wrap:wrap;gap:4px clamp(16px,2vw,28px);padding-bottom:clamp(14px,1.8vw,20px)}
.ft__legal a{font-size:.78rem;color:rgba(249,247,242,.5);text-decoration:none;transition:color .25s}
.ft__legal a:hover{color:rgba(249,247,242,.85)}
@media(max-width:900px){.ft__legal a{display:inline-flex;align-items:center;min-height:44px}}
.ft__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;
padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(249,247,242,.16);
font-size:.76rem;color:rgba(249,247,242,.5)}
.ft__end b{font-weight:400;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic;
font-size:.95rem;color:var(--sand)}
/* ---------- the phone ----------
One device, everywhere.
The site had seven: the hero's (9/19.3, gradient bezel, notch), the guest-journey one (9/17.6), the
film band's (9/18.6), the collection card's pair (9/18.4, flat #20221c, no notch), the detail page's
(390/844, radius 52), the checkout summary's and the style strip's. Different proportions, different
corners, different bezels — the same product photographed on seven handsets.
This is the one. Its proportions are the invitation's own (390x844), so nothing a guest would see is
cropped, and every measurement derives from a single width so the same rule draws a 52px thumbnail
and a 760px hero without a second definition.
*/
.ph{--ph-w:320px;display:block;position:relative;width:var(--ph-w);aspect-ratio:390/844;
padding:calc(var(--ph-w) * .031);border-radius:calc(var(--ph-w) * .142);
background:linear-gradient(155deg,#6C7A6E 0%,#2B342E 42%,#1D241F 72%,#55624F 100%);
box-shadow:0 1px 2px rgba(20,26,22,.4),
0 calc(var(--ph-w) * .15) calc(var(--ph-w) * .26) calc(var(--ph-w) * -.12) rgba(20,26,22,.55),
inset 0 0 0 1px rgba(255,255,255,.15)}
.ph__s{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--sand-2);
border-radius:calc(var(--ph-w) * .112)}
.ph__s > img,.ph__s > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:top center;display:block}
.ph__s > iframe{width:100%;height:100%;border:0;display:block}
/* The cut-out. Below ~90px wide it is a speck that reads as dirt, so it stops being drawn. */
.ph__n{position:absolute;top:calc(var(--ph-w) * .062);left:50%;transform:translateX(-50%);z-index:4;
width:calc(var(--ph-w) * .237);height:calc(var(--ph-w) * .064);border-radius:99px;background:#12170F}
.ph--bare .ph__n{display:none}
/*
Touch targets. A finger needs about 44px; these were 30-38px, which on a phone means a tap that
lands next to the control instead of on it. Sized by width rather than by pointer:coarse, so a
narrow window gets the same rule and a test can measure it.
*/
@media(max-width:900px){
.navburger{width:44px;height:44px}
.navcta{min-height:44px}
.navsheet a{min-height:44px;display:flex;align-items:center}
}
/* The two side buttons, drawn only once the device is big enough to have earned them. */
.ph--keys::before,.ph--keys::after{content:"";position:absolute;left:calc(var(--ph-w) * -.006);
width:calc(var(--ph-w) * .008);border-radius:2px;
background:linear-gradient(180deg,#7C8A7E,#2C352F);opacity:.9}
.ph--keys::before{top:calc(var(--ph-w) * .19);height:calc(var(--ph-w) * .085)}
.ph--keys::after{top:calc(var(--ph-w) * .30);height:calc(var(--ph-w) * .135)}
These are the terms you agree to when you order. They are written to be read once, not to be
survived.
What you are buying
A digital invitation, designed for your celebration by a person, hosted by us at a web address you
share with your guests, with a reply form whose answers come back to your panel. It is not a printed
card and nothing is posted to you.
Your plan says how many revision rounds are included. A round is one set of
changes, sent together. Your panel shows how many you have used and how many are left. More can be
bought if you want them.
How an order runs
You choose a design and a plan, and pay.
You write your details into your panel. Nothing can be designed until that is done, so the
time it takes is yours, not ours.
We send you a proof. You approve it, or you ask for changes within your rounds.
We publish it, and you send the link to your guests.
We will tell you our current turnaround before you order. It starts when your details are
complete, not when you pay.
What you give us, and what you promise about it
Photographs, music, names, wording. You keep all of it — we take no ownership of anything you
upload. You are telling us you have the right to use it: that the photographs are yours or licensed,
and that you may share the details of the people on your guest list. If someone tells us you did not,
we may take the invitation down while we work out what happened.
What stays ours
The design itself, the templates, the code and the typography. You are buying the use of your
invitation for your celebration. You may not resell it, copy the design for someone else's event, or
pass the template on.
We may show your invitation in our portfolio. If you would rather we did not, say so and we will
not — before or after, and you do not need a reason.
Hosting
Your invitation stays online for twelve months from the day we publish it, which
covers the run-up, the day, and the thank-yous. After that you can ask us to keep it up for longer.
We will write to you before it comes down; it will not simply vanish on your guests.
When it goes wrong
We aim to keep your invitation reachable at all times and we cannot promise perfection: hosting,
networks and the wider internet occasionally fail. If your invitation is unreachable through our
fault for a meaningful stretch, tell us and we will put it right and extend your hosting by at least
the time it was down.
What we owe you, if it comes to that, is capped at what you paid us. We are not liable for the
cost of your celebration itself. Nothing here limits anything the law does not let us limit.
Ending it
Cancelling and refunds have their own page — read it before
you order, because a bespoke digital product is treated differently from a boxed one.
We may end an order if it is used for something unlawful, if the content breaks the promises
above, or if an invoice goes unpaid. We will tell you why, and refund anything we have not earned.
Law
These terms are governed by the law of the country our company is registered in, named at the
foot of this page. If you are a consumer in the EU or the UK, this does not take away the protection
of your own country's consumer law, and you can bring a claim where you live.
Changes
We may change these terms for future orders. The terms that apply to your order are the ones
published on the day you placed it, and we will send you a copy if you ask.
Who you are dealing with
Our registered company details are not published on this page yet. Write to
support@briyd.com and we will send them to you.
We use cookies to see how this site is found and used. Nothing is measured until you say yes, and saying no changes nothing about how the site works for you. What we would collect.