/* ============================================================
Boulangerie by Hania — landing page
Aesthetic: warm-cream paper, watercolor blush washes,
Fraunces (soft / wonky serif) + Jost. Delicate, artisanal.
Fonts are loaded via in the HTML .
============================================================ */
:root{
/* ---- palette ---- */
--cream: #fdf4ef; /* warm paper background */
--cream-2: #fbeee7; /* slightly deeper paper */
--blush: #fbe4ea; /* soft pink section band */
--blush-2: #f8d6e0;
--petal: #f4b9c7; /* watercolor mid pink */
--rose: #ea8aa1;
--rose-ink: #b0395b; /* accents + buttons (5.8:1 on white = AA) */
--rose-deep: #93304c; /* hover */
--wine: #2c1c22; /* dramatic dark footer */
--ink: #33272a; /* warm near-black body text */
--muted: #6f5c60; /* warm taupe */
--line: #f0dbe1; /* hairline */
/* ---- type ---- */
--font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
--font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
--soft: "SOFT" 45, "WONK" 1; /* Fraunces personality */
--soft-italic: "SOFT" 80, "WONK" 1; /* romantic flourish */
/* ---- metrics ---- */
--container: 1140px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--radius: 22px;
--radius-sm: 14px;
--nav-h: 74px;
--shadow-card: 0 18px 40px -26px rgba(135, 40, 70, .40);
--shadow-soft: 0 28px 60px -34px rgba(135, 40, 70, .55);
}
/* ============================================================
Base / reset
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--font-body);
font-weight:400;
font-size:clamp(1rem, .96rem + .2vw, 1.05rem);
line-height:1.7;
color:var(--ink);
background:var(--cream);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* fine paper-grain overlay for texture */
body::after{
content:"";
position:fixed; inset:0; z-index:9998; pointer-events:none;
opacity:.05; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
:focus-visible{ outline:2.5px solid var(--rose-ink); outline-offset:3px; border-radius:6px; }
/* ============================================================
Typography
============================================================ */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:600;
line-height:1.1;
margin:0;
font-variation-settings:var(--soft);
letter-spacing:.2px;
}
.h2{ font-size:clamp(2rem, 1.3rem + 2.8vw, 3.1rem); }
.h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.45rem); }
.eyebrow{
display:inline-flex; align-items:center; gap:.7em;
font-family:var(--font-body);
text-transform:uppercase;
letter-spacing:.28em;
font-size:.72rem;
font-weight:500;
color:var(--rose-ink);
margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background:currentColor; opacity:.55; }
.lead{ font-size:clamp(1.05rem, 1rem + .5vw, 1.22rem); color:var(--muted); }
.script{
font-family:var(--font-display);
font-style:italic;
font-variation-settings:var(--soft-italic);
}
/* ============================================================
Layout helpers
============================================================ */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4rem, 2.5rem + 6vw, 7.5rem); position:relative; }
.section--blush{ background:var(--blush); }
.section-head{ max-width:48ch; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head .lead{ margin:.4rem 0 0; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
position:absolute; left:.75rem; top:-3.5rem; z-index:10000;
background:var(--rose-ink); color:#fff; padding:.65em 1.1em;
border-radius:0 0 12px 12px; transition:top .2s ease;
}
.skip-link:focus{ top:0; }
/* scalloped "pie-crust" transition sitting on top of a band */
.scallop-top::before{
content:""; position:absolute; left:0; right:0; top:-25px; height:26px;
background:radial-gradient(circle at 13px 26px, var(--blush) 13px, transparent 14px) repeat-x;
background-size:26px 26px;
}
/* ============================================================
Buttons
============================================================ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.6em;
font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:.01em;
padding:.85em 1.6em; border-radius:999px; cursor:pointer;
border:1.5px solid transparent;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-primary{ background:var(--rose-ink); color:#fff; box-shadow:0 14px 26px -14px rgba(176,57,91,.85); }
.btn-primary:hover{ background:var(--rose-deep); transform:translateY(-2px); box-shadow:0 18px 30px -14px rgba(176,57,91,.95); }
.btn-ghost{ background:rgba(255,255,255,.4); color:var(--rose-ink); border-color:var(--petal); }
.btn-ghost:hover{ background:#fff; border-color:var(--rose-ink); transform:translateY(-2px); }
.btn-sm{ padding:.6em 1.15em; font-size:.92rem; }
/* ============================================================
Header / navigation
============================================================ */
.site-header{
position:sticky; top:0; z-index:100;
background:rgba(253,244,239,.8);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:1px solid transparent;
transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled{
background:rgba(253,244,239,.94);
border-color:var(--line);
box-shadow:0 10px 30px -22px rgba(135,40,70,.5);
}
.nav{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:46px; width:auto; }
.nav-links{
display:flex; align-items:center; gap:clamp(1rem, .4rem + 1.6vw, 2.2rem);
list-style:none; margin:0; padding:0;
}
.nav-links a:not(.btn){ position:relative; font-size:.95rem; color:var(--ink); padding:.35em 0; }
.nav-links a:not(.btn)::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
background:var(--rose-ink); transition:right .3s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after{ right:0; }
.nav-toggle{
display:none; align-items:center; justify-content:center;
width:46px; height:46px; border:0; background:transparent; cursor:pointer;
color:var(--ink); border-radius:12px;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after{
content:""; display:block; width:24px; height:2px; background:currentColor;
border-radius:2px; transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle .bars{ position:relative; }
.nav-toggle .bars::before{ position:absolute; top:-7px; }
.nav-toggle .bars::after{ position:absolute; top:7px; }
body.nav-open .nav-toggle .bars{ background:transparent; }
body.nav-open .nav-toggle .bars::before{ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .bars::after{ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:860px){
.nav-toggle{ display:inline-flex; }
.nav-links{
position:absolute; top:var(--nav-h); left:0; right:0;
flex-direction:column; align-items:stretch; gap:.1rem;
background:var(--cream); border-bottom:1px solid var(--line);
padding:1rem var(--gutter) 1.6rem; box-shadow:var(--shadow-soft);
transform:translateY(-12px); opacity:0; visibility:hidden;
transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
body.nav-open .nav-links{ opacity:1; visibility:visible; transform:none; }
.nav-links a:not(.btn){ font-size:1.1rem; padding:.7em 0; }
.nav-links .nav-cta{ margin-top:.8rem; }
.nav-links .btn{ width:100%; }
}
/* ============================================================
Watercolor blobs (decorative)
============================================================ */
.blob{
position:absolute; border-radius:50%; filter:blur(48px);
opacity:.55; z-index:0; pointer-events:none; mix-blend-mode:multiply;
}
.blob--1{ width:clamp(220px,32vw,360px); aspect-ratio:1; top:-50px; left:-60px;
background:radial-gradient(circle, #f7bccb, rgba(247,188,203,0) 70%);
animation:float 16s ease-in-out infinite alternate; }
.blob--2{ width:clamp(180px,26vw,300px); aspect-ratio:1; bottom:-40px; right:-50px;
background:radial-gradient(circle, #fcd2c1, rgba(252,210,193,0) 70%);
animation:float 21s ease-in-out infinite alternate-reverse; }
.blob--3{ width:clamp(150px,20vw,230px); aspect-ratio:1; top:30%; right:8%;
background:radial-gradient(circle, #f8c7da, rgba(248,199,218,0) 70%);
animation:float 18s ease-in-out infinite alternate; }
@keyframes float{ to{ transform:translate(22px,-26px) scale(1.08); } }
/* ============================================================
Hero
============================================================ */
.hero{
position:relative; text-align:center; overflow:hidden;
padding-block:clamp(3.5rem, 2rem + 7vw, 6rem) clamp(5rem, 3rem + 9vw, 8.5rem);
background:
radial-gradient(72% 60% at 50% 20%, var(--blush) 0%, rgba(251,228,234,0) 62%),
linear-gradient(180deg, var(--cream-2), var(--cream));
}
.hero .container{ position:relative; z-index:2; }
.hero-logo{ max-width:min(80vw, 430px); margin:0 auto 1.5rem; }
.hero-logo img{ margin-inline:auto; filter:drop-shadow(0 22px 30px rgba(176,57,91,.18)); }
.hero-tagline{
font-family:var(--font-display); font-style:italic; font-weight:400;
font-variation-settings:var(--soft-italic);
font-size:clamp(1.6rem, 1rem + 3.4vw, 2.7rem); line-height:1.18;
max-width:20ch; margin:0 auto .9rem;
}
.hero-sub{ max-width:46ch; margin:0 auto 2.2rem; color:var(--muted); }
.hero-cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.scroll-cue{
display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
margin-top:clamp(2.5rem,6vw,4rem); color:var(--muted);
font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
}
.scroll-cue .dot{
width:24px; height:38px; border:1.5px solid var(--petal); border-radius:999px;
position:relative;
}
.scroll-cue .dot::before{
content:""; position:absolute; left:50%; top:7px; width:4px; height:8px;
border-radius:4px; background:var(--rose-ink); transform:translateX(-50%);
animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 70%{ opacity:0; transform:translate(-50%,12px); } }
/* hero load-in (pure CSS; content ends visible even without JS) */
.hero-logo{ animation:logo-in 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-tagline{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both .14s; }
.hero-sub{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both .26s; }
.hero-cta{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both .38s; }
.scroll-cue{ animation:rise .9s ease both .6s; }
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes logo-in{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }
/* ============================================================
About / our story
============================================================ */
.about .container{ display:grid; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
@media (min-width:840px){ .about .container{ grid-template-columns:.92fr 1.08fr; } }
.about-media{ position:relative; }
.about-media::before{ /* offset paper card behind, for depth */
content:""; position:absolute; inset:14px -14px -14px 14px;
background:var(--blush); border-radius:var(--radius); transform:rotate(-3deg);
z-index:0;
}
.about-photo{
position:relative; z-index:1; aspect-ratio:4/5; border-radius:var(--radius);
background:linear-gradient(150deg, #f9d6df 0%, #f6c3b5 55%, #f3b6c6 100%);
box-shadow:var(--shadow-soft); overflow:hidden;
display:flex; align-items:flex-end; justify-content:center; padding:1.1rem;
}
/* when the placeholder is replaced by ![]()
, fill the 4:5 frame cleanly */
img.about-photo{ padding:0; object-fit:cover; object-position:center; }
.about-body p{ margin:0 0 1.1rem; }
.about-body p:first-of-type::first-letter{
font-family:var(--font-display); font-variation-settings:"SOFT" 60, "WONK" 1;
font-size:3.5em; line-height:.72; float:left; padding:.08em .12em 0 0;
color:var(--rose-ink);
}
.about-sign{
font-family:var(--font-display); font-style:italic; font-variation-settings:var(--soft-italic);
font-size:1.7rem; color:var(--rose-ink); margin-top:.5rem;
}
/* placeholder caption shown on stand-in image blocks */
.ph-label{
font-family:var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
color:rgba(255,255,255,.92); background:rgba(176,57,91,.45);
padding:.45em .8em; border-radius:999px; backdrop-filter:blur(2px);
}
/* ============================================================
Links (link-in-bio)
============================================================ */
.links-list{ max-width:560px; margin:clamp(2rem,5vw,3rem) auto 0; display:grid; gap:1rem; }
.link-row{
display:flex; align-items:center; gap:1.1rem; padding:1rem 1.3rem;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.link-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--petal); }
.link-row .ic{
flex:none; width:44px; height:44px; border-radius:50%; background:var(--blush);
color:var(--rose-ink); display:grid; place-items:center;
}
.link-row .ic svg{ width:22px; height:22px; }
.link-row .lk-text{ display:flex; flex-direction:column; line-height:1.3; }
.link-row .lk-text b{ font-weight:600; font-size:1.05rem; }
.link-row .lk-text span{ color:var(--muted); font-size:.85rem; }
.link-row .arrow{ margin-left:auto; color:var(--rose-ink); opacity:.45; transition:transform .25s ease, opacity .25s ease; }
.link-row .arrow svg{ width:20px; height:20px; }
.link-row:hover .arrow{ transform:translateX(4px); opacity:1; }
/* ============================================================
Instagram feed
============================================================ */
.gram-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem;
margin-block:clamp(2.2rem,5vw,3rem);
}
@media (min-width:640px){ .gram-grid{ grid-template-columns:repeat(3,1fr); } }
.gram-tile{
position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
display:block; box-shadow:var(--shadow-card);
}
.gram-tile .wash{ position:absolute; inset:0; transition:transform .5s ease; }
.gram-tile:nth-child(1) .wash{ background:linear-gradient(135deg,#f9d3dd,#f3b6c6); }
.gram-tile:nth-child(2) .wash{ background:linear-gradient(135deg,#fcdcc8,#f4b6b0); }
.gram-tile:nth-child(3) .wash{ background:linear-gradient(135deg,#f7c8dd,#eaa1c0); }
.gram-tile:nth-child(4) .wash{ background:linear-gradient(135deg,#fbe0d2,#f6c3cf); }
.gram-tile:nth-child(5) .wash{ background:linear-gradient(135deg,#f5c4cf,#efa9bd); }
.gram-tile:nth-child(6) .wash{ background:linear-gradient(135deg,#fcd6e0,#f3b9b0); }
.gram-tile .ig-mark{
position:absolute; inset:0; display:grid; place-items:center;
color:#fff; opacity:.6; transition:opacity .3s ease;
}
.gram-tile .ig-mark svg{ width:34px; height:34px; }
.gram-tile::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 45%, rgba(147,48,76,.55));
opacity:0; transition:opacity .3s ease;
}
.gram-tile:hover .wash{ transform:scale(1.08); }
.gram-tile:hover::after{ opacity:1; }
.gram-tile:hover .ig-mark{ opacity:1; }
.gram-cta{ text-align:center; }
/* ============================================================
Contact ("say hello")
============================================================ */
.contact{ text-align:center; }
.contact .container{ max-width:640px; }
.contact-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:clamp(1.6rem,4vw,2.2rem); }
/* ============================================================
Footer (dark)
============================================================ */
.site-footer{
background:var(--wine); color:#f7e7ec;
padding-block:clamp(3rem,6vw,5rem) 2rem; position:relative;
}
.site-footer :focus-visible{ outline-color:var(--petal); }
.footer-inner{ display:grid; gap:1.8rem; justify-items:center; text-align:center; }
.footer-word{
font-family:var(--font-display); font-style:italic; font-variation-settings:var(--soft-italic);
font-size:clamp(2rem,6vw,2.6rem); color:#fff; line-height:1;
}
.footer-word small{
display:block; font-style:normal; font-variation-settings:"SOFT" 0;
font-family:var(--font-body); font-size:.78rem; letter-spacing:.4em; text-transform:uppercase;
color:var(--petal); margin-top:.7rem;
}
.socials{ display:flex; gap:.8rem; justify-content:center; }
.socials a{
width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
display:grid; place-items:center; color:#fff;
transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.socials a svg{ width:22px; height:22px; }
.socials a:hover{ background:var(--rose-ink); border-color:var(--rose-ink); transform:translateY(-3px); }
.footer-nav{ display:flex; gap:clamp(1rem,3vw,1.6rem); flex-wrap:wrap; justify-content:center; font-size:.92rem; }
.footer-nav a{ color:rgba(247,231,236,.78); }
.footer-nav a:hover{ color:#fff; }
.footer-meta{ font-size:.82rem; color:rgba(247,231,236,.5); margin:0; line-height:1.8; }
.footer-meta .heart{ color:var(--petal); }
.footer-meta a{ color:rgba(247,231,236,.7); text-decoration:underline; text-underline-offset:2px; }
/* ============================================================
Scroll reveal (progressive enhancement — only when JS adds .js)
============================================================ */
.js [data-reveal]{
opacity:0; transform:translateY(28px);
transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.js [data-reveal].in-view{ opacity:1; transform:none; }
.js [data-reveal="1"]{ transition-delay:.08s; }
.js [data-reveal="2"]{ transition-delay:.16s; }
.js [data-reveal="3"]{ transition-delay:.24s; }
.js [data-reveal="4"]{ transition-delay:.32s; }
/* ============================================================
404 error page (S3 error document)
============================================================ */
.error-page{
min-height:100vh; display:grid; place-items:center; text-align:center;
padding:2rem; position:relative; overflow:hidden;
background:
radial-gradient(72% 60% at 50% 32%, var(--blush) 0%, rgba(251,228,234,0) 62%),
linear-gradient(180deg, var(--cream-2), var(--cream));
}
.error-inner{ position:relative; z-index:2; max-width:34rem; }
.error-code{
font-family:var(--font-display); font-variation-settings:"SOFT" 60, "WONK" 1;
font-weight:600; font-size:clamp(5rem,22vw,12rem); line-height:.85; color:var(--rose-ink); margin:0;
}
.error-inner h1{ font-size:clamp(1.5rem,5vw,2.3rem); margin:.5rem 0 .7rem; }
.error-inner p{ color:var(--muted); margin:0 auto 2rem; max-width:40ch; }
.error-logo{ height:54px; width:auto; margin:0 auto 2rem; opacity:.92; }
/* ============================================================
Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.js [data-reveal]{ opacity:1; transform:none; }
.blob{ animation:none; }
}