/* ===================================================================== Adielle & Mathew — 26 September 2027 — Mill Neck Manor Every colour, font and space below is a token. To restyle the site, change the tokens; never hard-code a value on an element. Palette: Doodles: Names: ===================================================================== */ /* ---- PALETTE TOKENS — the only place colors are defined ---- */ :root{ /* palette 1 · Warmed up (default) */ --bg:#F5EAD0; --ink:#8E2F1E; --names:#C98A7E; --names-shadow:#7F2A1C; --rsvp-fill:#E3B7A8; --rsvp-ink:#7F2A1C; --scallop:#3B4A66; --reg-fill:#CDD5DF; --reg-ink:#2E3F5C; --card:#EBCFC4; --panel:#A3A065; --panel-ink:#2E3F5C; --panel-line:#8E2F1E; --panel-deep:#7C7A45; --foot:#8E2F1E; --foot-ink:#FBEFE6; --foot-line:#E2A995; --monogram:#8E2F1E; /* ---- TYPE ---- */ --font-script:'Moister','Lobster Two',cursive; --script-slant:normal; --script-weight:400; --font-serif:'Playfair Display',Georgia,serif; --font-fancy:'Holy River','Pinyon Script',cursive; --font-sans:'Instrument Sans',system-ui,sans-serif; /* ---- SPACING ---- */ --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px; --radius:14px; --tilt:-2.5deg; } [data-namefont="lobster"]{ --font-script:'Lobster Two',cursive; --script-slant:italic; --script-weight:400; } [data-namefont="yellowtail"]{ --font-script:'Yellowtail',cursive; --script-slant:normal; --script-weight:400; } [data-namefont="yesteryear"]{ --font-script:'Yesteryear',cursive; --script-slant:normal; --script-weight:400; } [data-palette="current"]{ --bg:#FDF6D7; --ink:#B5361C; --names:#EC9F9A; --names-shadow:#C0473A; --rsvp-fill:#F4B7B0; --rsvp-ink:#B5361C; --scallop:#C1E1FC; --reg-fill:#C1E1FC; --reg-ink:#0054AC; --card:#F9DEDF; --panel:#CCD096; --panel-ink:#0054AC; --panel-line:#B5361C; --panel-deep:#9AA25C; --foot:#C31E00; --foot-ink:#FFF4EE; --foot-line:#F6B9B3; --monogram:#B5361C; } [data-palette="harvest"]{ --bg:#F4EBDA; --ink:#5E1A1D; --names:#C08A2E; --names-shadow:#5E1A1D; --rsvp-fill:#E8C77E; --rsvp-ink:#5E1A1D; --scallop:#B8862B; --reg-fill:#E8C77E; --reg-ink:#5E1A1D; --card:#EAD9B8; --panel:#7B7A3E; --panel-ink:#F7EEDC; --panel-line:#F0D9A0; --panel-deep:#7B7A3E; --foot:#5E1A1D; --foot-ink:#F7EEDC; --foot-line:#D9A55A; --monogram:#5E1A1D; } [data-palette="manor"]{ --bg:#F3EEE1; --ink:#25402F; --names:#B5552B; --names-shadow:#25402F; --rsvp-fill:#25402F; --rsvp-ink:#F3EEE1; --scallop:#25402F; --reg-fill:#25402F; --reg-ink:#F3EEE1; --card:#E3DCC8; --panel:#3E5A45; --panel-ink:#F3EEE1; --panel-line:#D9905F; --panel-deep:#B5552B; --foot:#1F3527; --foot-ink:#F3EEE1; --foot-line:#C9794A; --monogram:#25402F; } /* ---- DOODLE SETS — each slot is a token, so one attribute swaps all 40 ---- */ :root{--dd-1:url('assets/doodles/flute.svg');--dd-2:url('assets/doodles/arrangement.svg');--dd-3:url('assets/doodles/envelope-heart.svg');--dd-4:url('assets/doodles/bow.svg');--dd-5:url('assets/doodles/candlestick.svg');--dd-6:url('assets/doodles/key-heart.svg');--dd-7:url('assets/doodles/coupe.svg');--dd-8:url('assets/doodles/flowers-vase.svg');--dd-9:url('assets/doodles/envelope-heart.svg');--dd-10:url('assets/doodles/vase-sprigs.svg');--dd-11:url('assets/doodles/bow.svg');--dd-12:url('assets/doodles/heart-scallop.svg');--dd-13:url('assets/doodles/key-heart.svg');--dd-14:url('assets/doodles/envelope.svg');--dd-15:url('assets/doodles/heart-scallop.svg');--dd-16:url('assets/doodles/candlestick.svg');--dd-17:url('assets/doodles/key-heart.svg');--dd-18:url('assets/doodles/envelope.svg');--dd-19:url('assets/doodles/set-table.svg');--dd-20:url('assets/doodles/bunting.svg');--dd-21:url('assets/doodles/set-table.svg');--dd-22:url('assets/doodles/bunting.svg');--dd-23:url('assets/doodles/cookie-rings.svg');--dd-24:url('assets/doodles/gift-flat.svg');--dd-25:url('assets/doodles/plate.svg');--dd-26:url('assets/doodles/flatware.svg');--dd-27:url('assets/doodles/pot.svg');--dd-28:url('assets/doodles/french-press.svg');--dd-29:url('assets/doodles/flute.svg');--dd-30:url('assets/doodles/bunting.svg');--dd-31:url('assets/doodles/plate.svg');--dd-32:url('assets/doodles/flatware.svg');--dd-33:url('assets/doodles/arrangement.svg');--dd-34:url('assets/doodles/coupe.svg');--dd-35:url('assets/doodles/whisk-bowl.svg');--dd-36:url('assets/doodles/set-table.svg');--dd-37:url('assets/doodles/frame-oval.svg');--dd-38:url('assets/doodles/watering-can.svg');--dd-39:url('assets/doodles/cookie-rings.svg');--dd-40:url('assets/doodles/moka.svg')} [data-doodles="classic"]{--dd-1:url('assets/doodles/flute.svg');--dd-2:url('assets/doodles/vase-sprigs.svg');--dd-3:url('assets/doodles/bow.svg');--dd-4:url('assets/doodles/fruit-bowl.svg');--dd-5:url('assets/doodles/candelabra.svg');--dd-6:url('assets/doodles/key-heart.svg');--dd-7:url('assets/doodles/flute.svg');--dd-8:url('assets/doodles/vase-sprigs.svg');--dd-9:url('assets/doodles/teacups.svg');--dd-10:url('assets/doodles/fruit-bowl.svg');--dd-11:url('assets/doodles/bow.svg');--dd-12:url('assets/doodles/heart-scallop.svg');--dd-13:url('assets/doodles/candelabra.svg');--dd-14:url('assets/doodles/vase-sprigs.svg');--dd-15:url('assets/doodles/bow.svg');--dd-16:url('assets/doodles/flute.svg');--dd-17:url('assets/doodles/candelabra.svg');--dd-18:url('assets/doodles/vase-sprigs.svg');--dd-19:url('assets/doodles/fruit-bowl.svg');--dd-20:url('assets/doodles/teacups.svg');--dd-21:url('assets/doodles/fruit-bowl.svg');--dd-22:url('assets/doodles/teacups.svg');--dd-23:url('assets/doodles/cookie-rings.svg');--dd-24:url('assets/doodles/bunting.svg');--dd-25:url('assets/doodles/flute.svg');--dd-26:url('assets/doodles/teacups.svg');--dd-27:url('assets/doodles/candelabra.svg');--dd-28:url('assets/doodles/bow.svg');--dd-29:url('assets/doodles/flute.svg');--dd-30:url('assets/doodles/toast-glasses.svg');--dd-31:url('assets/doodles/flute.svg');--dd-32:url('assets/doodles/teacups.svg');--dd-33:url('assets/doodles/vase-sprigs.svg');--dd-34:url('assets/doodles/flute.svg');--dd-35:url('assets/doodles/teacups.svg');--dd-36:url('assets/doodles/flute.svg');--dd-37:url('assets/doodles/candelabra.svg');--dd-38:url('assets/doodles/vase-sprigs.svg');--dd-39:url('assets/doodles/bow.svg');--dd-40:url('assets/doodles/fruit-bowl.svg')} [data-doodles="table"]{--dd-1:url('assets/doodles/coupe.svg');--dd-2:url('assets/doodles/decanter.svg');--dd-3:url('assets/doodles/plate.svg');--dd-4:url('assets/doodles/flatware.svg');--dd-5:url('assets/doodles/candlestick.svg');--dd-6:url('assets/doodles/teacups.svg');--dd-7:url('assets/doodles/coupe.svg');--dd-8:url('assets/doodles/decanter.svg');--dd-9:url('assets/doodles/set-table.svg');--dd-10:url('assets/doodles/teacups.svg');--dd-11:url('assets/doodles/plate.svg');--dd-12:url('assets/doodles/flatware.svg');--dd-13:url('assets/doodles/decanter.svg');--dd-14:url('assets/doodles/set-table.svg');--dd-15:url('assets/doodles/plate.svg');--dd-16:url('assets/doodles/candlestick.svg');--dd-17:url('assets/doodles/teacups.svg');--dd-18:url('assets/doodles/coupe.svg');--dd-19:url('assets/doodles/set-table.svg');--dd-20:url('assets/doodles/toast-glasses.svg');--dd-21:url('assets/doodles/set-table.svg');--dd-22:url('assets/doodles/toast-glasses.svg');--dd-23:url('assets/doodles/plate.svg');--dd-24:url('assets/doodles/flatware.svg');--dd-25:url('assets/doodles/pot.svg');--dd-26:url('assets/doodles/pan.svg');--dd-27:url('assets/doodles/whisk-bowl.svg');--dd-28:url('assets/doodles/measuring-cup.svg');--dd-29:url('assets/doodles/coupe.svg');--dd-30:url('assets/doodles/toast-glasses.svg');--dd-31:url('assets/doodles/pot.svg');--dd-32:url('assets/doodles/pan.svg');--dd-33:url('assets/doodles/decanter.svg');--dd-34:url('assets/doodles/coupe.svg');--dd-35:url('assets/doodles/whisk-bowl.svg');--dd-36:url('assets/doodles/set-table.svg');--dd-37:url('assets/doodles/plate.svg');--dd-38:url('assets/doodles/pot.svg');--dd-39:url('assets/doodles/moka.svg');--dd-40:url('assets/doodles/french-press.svg')} [data-doodles="garden"]{--dd-1:url('assets/doodles/arrangement.svg');--dd-2:url('assets/doodles/flowers-vase.svg');--dd-3:url('assets/doodles/vase-sprigs.svg');--dd-4:url('assets/doodles/urn-flowers.svg');--dd-5:url('assets/doodles/bud-vase.svg');--dd-6:url('assets/doodles/jar-floral.svg');--dd-7:url('assets/doodles/arrangement.svg');--dd-8:url('assets/doodles/flowers-vase.svg');--dd-9:url('assets/doodles/vase-striped.svg');--dd-10:url('assets/doodles/vase-sprigs.svg');--dd-11:url('assets/doodles/urn-flowers.svg');--dd-12:url('assets/doodles/watering-can.svg');--dd-13:url('assets/doodles/bud-vase.svg');--dd-14:url('assets/doodles/jar-floral.svg');--dd-15:url('assets/doodles/arrangement.svg');--dd-16:url('assets/doodles/candlestick.svg');--dd-17:url('assets/doodles/flowers-vase.svg');--dd-18:url('assets/doodles/vase-sprigs.svg');--dd-19:url('assets/doodles/urn-flowers.svg');--dd-20:url('assets/doodles/bunting.svg');--dd-21:url('assets/doodles/urn-flowers.svg');--dd-22:url('assets/doodles/bunting.svg');--dd-23:url('assets/doodles/watering-can.svg');--dd-24:url('assets/doodles/jar-floral.svg');--dd-25:url('assets/doodles/watering-can.svg');--dd-26:url('assets/doodles/vase-striped.svg');--dd-27:url('assets/doodles/urn-flowers.svg');--dd-28:url('assets/doodles/bud-vase.svg');--dd-29:url('assets/doodles/arrangement.svg');--dd-30:url('assets/doodles/bunting.svg');--dd-31:url('assets/doodles/flowers-vase.svg');--dd-32:url('assets/doodles/vase-sprigs.svg');--dd-33:url('assets/doodles/arrangement.svg');--dd-34:url('assets/doodles/urn-flowers.svg');--dd-35:url('assets/doodles/watering-can.svg');--dd-36:url('assets/doodles/flowers-vase.svg');--dd-37:url('assets/doodles/frame-oval.svg');--dd-38:url('assets/doodles/urn-flowers.svg');--dd-39:url('assets/doodles/arrangement.svg');--dd-40:url('assets/doodles/jar-floral.svg')} [data-doodles="romance"]{--dd-1:url('assets/doodles/key-heart.svg');--dd-2:url('assets/doodles/bow.svg');--dd-3:url('assets/doodles/envelope-heart.svg');--dd-4:url('assets/doodles/heart-scallop.svg');--dd-5:url('assets/doodles/candlestick.svg');--dd-6:url('assets/doodles/key-heart.svg');--dd-7:url('assets/doodles/bow-tails.svg');--dd-8:url('assets/doodles/bow-ribbon.svg');--dd-9:url('assets/doodles/envelope-heart.svg');--dd-10:url('assets/doodles/heart-scallop.svg');--dd-11:url('assets/doodles/bow.svg');--dd-12:url('assets/doodles/cookie-rings.svg');--dd-13:url('assets/doodles/key-heart.svg');--dd-14:url('assets/doodles/envelope.svg');--dd-15:url('assets/doodles/heart-scallop.svg');--dd-16:url('assets/doodles/candlestick.svg');--dd-17:url('assets/doodles/key-heart.svg');--dd-18:url('assets/doodles/envelope-heart.svg');--dd-19:url('assets/doodles/cookie-rings.svg');--dd-20:url('assets/doodles/bunting.svg');--dd-21:url('assets/doodles/cookie-rings.svg');--dd-22:url('assets/doodles/bunting.svg');--dd-23:url('assets/doodles/gift.svg');--dd-24:url('assets/doodles/gift-flat.svg');--dd-25:url('assets/doodles/gift.svg');--dd-26:url('assets/doodles/bow-tails.svg');--dd-27:url('assets/doodles/cookie-rings.svg');--dd-28:url('assets/doodles/frame-oval.svg');--dd-29:url('assets/doodles/bow.svg');--dd-30:url('assets/doodles/bunting.svg');--dd-31:url('assets/doodles/gift.svg');--dd-32:url('assets/doodles/bow-ribbon.svg');--dd-33:url('assets/doodles/bow-tails.svg');--dd-34:url('assets/doodles/heart-scallop.svg');--dd-35:url('assets/doodles/cookie-rings.svg');--dd-36:url('assets/doodles/heart-scallop.svg');--dd-37:url('assets/doodles/frame-oval.svg');--dd-38:url('assets/doodles/bow.svg');--dd-39:url('assets/doodles/key-heart.svg');--dd-40:url('assets/doodles/envelope-heart.svg')} @font-face{font-family:'Moister';src:url('fonts/moister.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Holy River';src:url('fonts/holy-river.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} /* ---- reset ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans); font-size:clamp(17px,1.15vw + 13px,20px);line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden;text-wrap:pretty} img{max-width:100%;height:auto;display:block} a{color:var(--ink);text-decoration:none} a:hover{color:var(--names-shadow)} :focus-visible{outline:3px solid var(--names-shadow);outline-offset:3px} /* ---- layout ---- */ .wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(20px,5vw,var(--sp-5))} .band{position:relative;padding-block:var(--sp-4)} .stack{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)} .center{text-align:center} /* ---- the A&M monogram · one token recolours every instance ---- */ .monogram{background:var(--monogram); -webkit-mask:url('assets/am-monogram.png') center/contain no-repeat; mask:url('assets/am-monogram.png') center/contain no-repeat; width:clamp(66px,9vw,96px);aspect-ratio:393/241} .monogram--footer{background:var(--foot-line);width:min(400px,72vw)} /* ---- names · retro script with a thin offset outline ---- */ .names{margin:0;font-family:var(--font-script);font-style:var(--script-slant); font-weight:var(--script-weight);line-height:1.04;color:var(--names); -webkit-text-stroke:clamp(1.2px,.16vw,1.8px) var(--names-shadow);paint-order:stroke fill; font-size:clamp(42px,9vw,84px)} .names--amp{font-size:clamp(28px,4.4vw,46px);margin-block:var(--sp-1)} .names--lg{font-size:clamp(44px,8vw,76px)} /* ---- formal serif lines ---- */ .formal{font-family:var(--font-serif);letter-spacing:.06em;line-height:1.4; font-size:clamp(19px,1.6vw + 13px,26px);margin:0} .fancy{font-family:var(--font-fancy);font-size:clamp(26px,2.6vw,34px);margin:0;line-height:1.2} .lede{margin:0 auto;max-width:34ch;font-size:clamp(17px,1.1vw + 13px,21px)} /* ---- garland ---- */ .garland{width:min(190px,48vw);aspect-ratio:160/46;background:var(--ink); -webkit-mask:url('assets/doodles/swag-garland.svg') center/contain no-repeat; mask:url('assets/doodles/swag-garland.svg') center/contain no-repeat} /* ---- scattered doodles · art comes from a --dd-N slot token ---- */ .doodle{position:absolute;background:var(--ink);pointer-events:none; width:var(--dsz,42px);height:var(--dsz,42px); -webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat} .doodle--green{background:var(--panel-deep)} .doodle--blush{background:var(--names)} /* ---- tilted photo mount ---- */ .card{background:var(--card);border:1px solid var(--ink);padding:clamp(8px,1.2vw,14px); box-shadow:8px 10px 0 rgb(0 0 0 / .08);transform:rotate(var(--tilt))} .card img{border:1px solid var(--ink);width:100%} .card--right{--tilt:2deg} .note{background:var(--card);border:1px solid var(--ink);padding:var(--sp-3);transform:rotate(-1.5deg)} .note--panel{background:var(--panel);color:var(--panel-ink);border-color:var(--panel-line);transform:rotate(1.4deg)} .note--panel a{color:var(--panel-ink)} /* ---- wavy badge · rotates into place, straightens on hover ---- */ .badge{position:relative;display:grid;place-items:center;background:none;border:0;padding:0; cursor:pointer;transform:rotate(-3deg);transition:transform .25s ease; width:var(--bw,200px);aspect-ratio:132/76;min-height:44px} .badge:hover,.badge:focus-visible{transform:rotate(0deg) scale(1.05)} .badge svg{position:absolute;inset:0;width:100%;height:100%} .badge span{position:relative;font-family:var(--font-serif);letter-spacing:.08em; color:var(--rsvp-ink);font-size:clamp(19px,1.5vw + 12px,26px)} .badge--registry{aspect-ratio:280/160;width:var(--bw,280px)} .badge--registry span{font-family:var(--font-script);font-style:var(--script-slant); font-weight:var(--script-weight);color:var(--reg-ink);font-size:clamp(34px,4vw,48px)} .badge--sm{--bw:132px} .badge--sm span{font-size:clamp(17px,1.2vw + 11px,20px)} /* ---- scalloped edge between sections ---- */ .scallop{height:clamp(14px,1.6vw,18px);background-color:var(--bg);background-repeat:repeat-x; background-image:radial-gradient(circle at 16px 18px,var(--scallop) 15px,transparent 15.5px); background-size:32px 18px} .scallop + .rule{height:clamp(6px,.6vw,7px);background:var(--scallop)} /* ---- footer ---- */ .footer{background:var(--foot);color:var(--foot-ink);padding:var(--sp-4) 0;overflow:hidden} .footer a{color:var(--foot-ink);text-decoration:underline} .footer-in{display:grid;gap:var(--sp-3);justify-items:center;text-align:center} .footer h2{margin:0;font-family:var(--font-serif);font-weight:400; font-size:clamp(28px,3vw,40px)} .footer .sign{font-family:var(--font-fancy);color:var(--foot-line); font-size:clamp(24px,2.4vw,30px);margin:0} @media (min-width:860px){ .footer-in{grid-template-columns:1fr 1fr;align-items:center;justify-items:start;text-align:left; gap:var(--sp-4)} .footer-in .monogram--footer{justify-self:center} } /* ---- password form ---- */ .gate{min-height:100svh;display:grid;place-items:center;position:relative} .field{display:flex;flex-direction:column;gap:var(--sp-1);text-align:left; width:min(360px,100%);margin-inline:auto} .field span{font-size:15px;letter-spacing:.12em;text-transform:uppercase} .field input{font:inherit;font-size:20px;padding:14px 16px;background:var(--bg); border:1px solid var(--ink);border-radius:4px;color:var(--ink);width:100%;min-height:48px} .gate-msg{margin:var(--sp-2) 0 0;min-height:1.4em;font-size:16px} .gate-msg[data-state="bad"]{color:var(--names-shadow);font-weight:600} /* ---- registry grid · tiles grow gently on hover ---- */ .tiles{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .tile{display:block;padding:8px;background:var(--card);border:1px solid var(--ink); transition:transform .3s ease,box-shadow .3s ease} .tile:hover,.tile:focus-visible{transform:scale(1.05);box-shadow:0 8px 18px rgb(0 0 0 / .14)} .tile-art{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--ink); background-color:var(--bg); background-image:repeating-linear-gradient(135deg,transparent 0 8px,var(--card) 8px 16px)} .tile-art > i{width:44px;height:44px;background:var(--ink);display:block; -webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat} .tile p{margin:8px 0 2px;text-align:center;font-family:var(--font-serif);font-size:18px} /* ===================================================================== MOTION 1. Sections fade and rise once, when 15% enters the viewport 2. Doodles follow, staggered 90ms, each from its own small rotation 3. Badges rotate into place; the registry badge spins a full turn All of it is opt-in: .reveal is only hidden once JS adds .js to , so the page is readable with JS off or blocked. ===================================================================== */ .js .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)} .js .reveal.in{opacity:1;transform:none} .js .reveal .doodle{opacity:0;transform:scale(.8) rotate(var(--spin,-10deg)); transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.44,1)} .js .reveal.in .doodle{opacity:1;transform:none} .js .reveal .doodle:nth-of-type(1){transition-delay:.25s} .js .reveal .doodle:nth-of-type(2){transition-delay:.34s} .js .reveal .doodle:nth-of-type(3){transition-delay:.43s} .js .reveal .doodle:nth-of-type(4){transition-delay:.52s} .js .reveal .badge{animation:badge-in .6s cubic-bezier(.2,.9,.3,1.3) both;animation-play-state:paused} .js .reveal.in .badge{animation-play-state:running} .js .reveal .badge--registry{animation:badge-spin .95s cubic-bezier(.18,.7,.24,1.02) both; animation-play-state:paused} .js .reveal.in .badge--registry{animation-play-state:running} @keyframes badge-in{from{opacity:0;transform:rotate(-14deg) scale(.86)} to{opacity:1;transform:rotate(-3deg) scale(1)}} @keyframes badge-spin{from{opacity:0;transform:rotate(-320deg) scale(.4)} 60%{opacity:1}to{opacity:1;transform:rotate(-2deg) scale(1)}} @media (prefers-reduced-motion:reduce){ .js .reveal,.js .reveal .doodle{opacity:1;transform:none;transition:none} .js .reveal .badge,.js .reveal .badge--registry{animation:none;opacity:1} .badge{transition:none} .tile{transition:none} .badge:hover,.tile:hover{transform:rotate(-3deg)} .tile:hover{transform:none} }