/* ===================================================================== THE HERITAGE KALYANAM — stylesheet ONETONE STUDIO Art direction: Paati's house in wedding week. Red oxide floors, a freshly drawn pulli kolam, brass, jasmine, banana leaves, lime-washed walls, old family albums and vintage film light. Contents 01 Tokens & textures 09 Celebrations (invitation cards) 02 Base & section heads 10 Family contacts 03 Buttons & small parts 11 Wishlist + moi envelope 04 Intro: Paati's doors 12 Guestbook notebook 05 Top bar, menu, thread 13 Memories 06 Hero: the kolam hall 14 Footer: the feast 07 Calendar countdown 15 Music player, cursor (+ upload page) 08 Album + Meet the couple 16 Motion & reduced motion ===================================================================== */ /* ---------- 01 TOKENS ------------------------------------------------ */ :root { /* Palette — js/config.js `theme` overrides these at runtime */ --oxide: #873F32; --maroon: #602C30; --turmeric: #E2AD38; --leaf: #536B3D; --brass: #B28A4E; --coconut: #594333; --ivory: #F1E3C8; --kolam: #F8F1E3; /* Derived tones */ --maroon-deep: #47201F; --ink: #3A2620; --paper: #F6ECD8; --lime: #ECE2C2; /* lime-washed wall */ --album: #3B2A20; /* old album page */ --line: rgba(96, 44, 48, .35); --line-soft: rgba(96, 44, 48, .16); --muted: rgba(58, 38, 32, .74); /* Type */ --f-display: "Playfair Display", Georgia, serif; --f-script: "Allura", cursive; --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-tamil-display: "Playfair Display", Georgia, serif; /* kept as an alias: a few English elements still use it */ --f-tamil: "Inter", system-ui, sans-serif; /* Layout */ --gutter: clamp(16px, 5vw, 56px); --max: 1160px; --section-y: clamp(84px, 12vw, 156px); --radius: 4px; --topbar-h: 64px; /* Motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-silk: cubic-bezier(.65, 0, .35, 1); /* Hand-made textures (inline SVG, no downloads) */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --kolam-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F8F1E3' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M36 6c12 10 20 18 30 30-10 12-18 20-30 30C24 56 16 48 6 36 16 24 24 16 36 6z'/%3E%3Cpath d='M36 22c5 4 10 9 14 14-4 5-9 10-14 14-5-4-10-9-14-14 4-5 9-10 14-14z'/%3E%3C/g%3E%3Cg fill='%23F8F1E3' opacity='.55'%3E%3Ccircle cx='36' cy='36' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='72' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='72' r='1.6'/%3E%3Ccircle cx='72' cy='72' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --kolam-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'%3E%3Cg fill='%23873F32'%3E%3Ccircle cx='56' cy='14' r='1.8'/%3E%3Ccircle cx='80' cy='4' r='1.8'/%3E%3Ccircle cx='80' cy='24' r='1.8'/%3E%3Ccircle cx='104' cy='14' r='1.8'/%3E%3Ccircle cx='80' cy='14' r='1.8'/%3E%3C/g%3E%3Cpath d='M0 14h44M116 14h44M80 0c10 6 20 10 30 14-10 4-20 8-30 14-10-6-20-10-30-14 10-4 20-8 30-14z' fill='none' stroke='%23873F32' stroke-width='1.1'/%3E%3C/svg%3E"); } /* ---------- 02 BASE -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--topbar-h); } body { margin: 0; font-family: var(--f-sans); font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* A whisper of film grain over everything */ body::after { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; background: var(--grain); opacity: .14; mix-blend-mode: multiply; } body.is-locked { overflow: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } [hidden] { display: none !important; } :lang(ta) { letter-spacing: 0 !important; text-transform: none !important; } :focus-visible { outline: 2px solid var(--turmeric); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ivory); color: var(--maroon); padding: 10px 16px; border-radius: var(--radius); transition: top .2s; } .skip-link:focus { top: 12px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); } /* Section heads */ .section-head { max-width: 44rem; margin: 0 auto clamp(44px, 7vw, 84px); text-align: center; } .section-head::after { content: ""; display: block; width: 150px; height: 26px; margin: 28px auto 0; background: var(--kolam-orn) center / contain no-repeat; } .chapter { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--oxide); } .chapter::before, .chapter::after { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); } .chapter__num { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; } .section-title { font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: clamp(2.6rem, 7.6vw, 5rem); line-height: 1.05; letter-spacing: -.01em; color: var(--maroon); text-wrap: balance; } .section-intro { margin-top: 20px; font-size: clamp(1rem, 2.3vw, 1.12rem); color: var(--muted); text-wrap: pretty; } /* Surfaces */ .lime { background: radial-gradient(60% 40% at 15% 10%, rgba(255, 255, 255, .45), transparent 70%), radial-gradient(50% 50% at 90% 80%, rgba(178, 138, 78, .14), transparent 70%), var(--lime); } /* ---------- 03 COMPONENTS ------------------------------------------- */ .btn { --bg: transparent; --fg: var(--maroon); --bd: var(--maroon); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border: 1.5px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--fg); font-family: var(--f-sans); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center; transition: color .35s var(--ease-out), border-color .35s, transform .35s var(--ease-out); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); } .btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); } .btn:hover, .btn:focus-visible { color: var(--bg-hover, var(--ivory)); } .btn svg { width: 18px; height: 18px; flex: none; } .btn--solid { --bg: var(--maroon); --fg: var(--kolam); --bd: var(--maroon); color: var(--kolam); box-shadow: 0 3px 0 var(--maroon-deep); } .btn--solid::before { background: var(--oxide); } .btn--solid:hover { color: var(--kolam); } .btn--small { min-height: 44px; padding: 10px 16px; font-size: .72rem; letter-spacing: .1em; } .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn[aria-disabled="true"]::before { display: none; } .btn[aria-disabled="true"]:hover { color: var(--fg); } .btn--solid[aria-disabled="true"]:hover { color: var(--kolam); } .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; } .icon-btn svg { width: 18px; height: 18px; } .switch { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px; min-height: 44px; color: var(--maroon); } .switch__track { width: 40px; height: 22px; border-radius: 99px; border: 1.5px solid var(--maroon); position: relative; transition: background .3s; } .switch__thumb { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--maroon); transition: transform .35s var(--ease-out); } .switch[aria-checked="true"] .switch__track { background: rgba(226, 173, 56, .4); } .switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); } .switch__label { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); } .js [data-reveal].is-in, .is-fallback [data-reveal] { opacity: 1; transform: none; } /* ---------- 04 INTRO: PAATI'S DOORS --------------------------------- */ .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 64px var(--gutter) 28px; overflow: hidden auto; } .no-js .intro { display: none; } .doors { position: fixed; inset: 0; perspective: 1700px; perspective-origin: 50% 45%; overflow: hidden; background: #1c120d; } .door { position: absolute; top: 0; bottom: 0; width: 50.15%; background-size: cover; background-repeat: no-repeat; transform-style: preserve-3d; will-change: transform; transition: transform 2.5s cubic-bezier(.66, 0, .18, 1), filter 2.5s; } .door--l { left: 0; background-position: right center; transform-origin: 0 50%; } .door--r { right: 0; background-position: left center; transform-origin: 100% 50%; } .door__shade { position: absolute; inset: 0; opacity: 0; transition: opacity 2.5s; } .door--l .door__shade { background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.8)); } .door--r .door__shade { background: linear-gradient(270deg, rgba(0,0,0,.15), rgba(0,0,0,.8)); } .doors::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 1s; background: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(28, 18, 13, .6)); } .doors__light { /* morning sun spilling through as the doors part */ position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 22% 70% at 50% 50%, rgba(255, 238, 200, .95), rgba(226, 173, 56, .3) 55%, transparent 80%); } .intro.is-opening { pointer-events: none; } .intro.is-opening .doors { background: transparent; } .intro.is-opening .door--l { transform: rotateY(-100deg); transition-delay: .5s; } .intro.is-opening .door--r { transform: rotateY(100deg); transition-delay: .5s; } .intro.is-opening .door__shade { opacity: 1; transition-delay: .5s; } .intro.is-opening .doors::after { opacity: 0; } .intro.is-opening .doors__light { animation: sunIn 2.6s .35s ease-out forwards; } .intro.is-opening .tag { opacity: 0; transform: translateY(-30px) rotate(-6deg); } .intro.is-opening .intro__skip { opacity: 0; } .intro.is-gone { visibility: hidden; } @keyframes sunIn { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } .intro__skip { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: var(--gutter); min-height: 44px; padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(28, 18, 13, .45); color: var(--kolam); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: opacity .4s; } .intro__stage { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; } /* The invitation tag, tied on with string */ .tag { position: relative; width: min(23rem, 100%); padding: 46px clamp(22px, 6vw, 38px) 30px; text-align: center; color: var(--maroon); background: var(--grain), linear-gradient(170deg, #fbf3e2, #efdfbd); clip-path: polygon(0 3%, 6% 0, 94% 0, 100% 3%, 100% 97%, 97% 99%, 92% 97.5%, 86% 100%, 79% 98%, 72% 100%, 64% 97.8%, 57% 100%, 50% 98%, 43% 100%, 36% 97.6%, 29% 100%, 22% 98.2%, 15% 100%, 8% 97.8%, 3% 99.4%, 0 97%); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); transform-origin: 50% -40px; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); } .intro.is-playing .tag { animation: tagSwing 5s ease-in-out both; } @keyframes tagSwing { 0% { transform: rotate(-4deg); } 30% { transform: rotate(2.4deg); } 55% { transform: rotate(-1.2deg); } 80% { transform: rotate(.6deg); } 100% { transform: rotate(0); } } .tag__hole { position: absolute; top: 16px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #2a1a12; box-shadow: 0 0 0 4px rgba(178, 138, 78, .8); } .tag__string { display: none; } .tag__kolam { width: 120px; height: 40px; margin: 0 auto 10px; color: var(--oxide); } .intro .draw { stroke-dasharray: 1; stroke-dashoffset: 1; } .intro.is-playing .draw { animation: draw 2.4s .3s var(--ease-silk) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .intro__lines { display: flex; flex-direction: column; font-family: var(--f-display); font-style: italic; font-size: clamp(1.05rem, 4vw, 1.25rem); line-height: 1.45; color: var(--coconut); } .intro__line, .intro__names, .intro__date, .intro__actions { opacity: 0; transform: translateY(10px); } .intro.is-playing .intro__line { animation: rise 1s var(--ease-out) forwards; } .intro.is-playing .intro__line:nth-child(1) { animation-delay: .9s; } .intro.is-playing .intro__line:nth-child(2) { animation-delay: 1.3s; } .intro.is-playing .intro__line:nth-child(3) { animation-delay: 1.7s; } .intro.is-playing .intro__names { animation: rise 1.3s 2.2s var(--ease-out) forwards; } .intro.is-playing .intro__date { animation: rise 1s 2.7s var(--ease-out) forwards; } .intro.is-playing .intro__actions { animation: rise 1s 3.1s var(--ease-out) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } @keyframes fade { to { opacity: 1; } } .intro__names { display: flex; flex-direction: column; align-items: center; margin-top: 10px; font-family: var(--f-script); font-weight: 400; font-size: clamp(3.4rem, 15vw, 4.6rem); line-height: .95; color: var(--maroon); } .intro__amp { font-size: .55em; color: var(--oxide); } .intro__date { margin-top: 12px; font-size: .74rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--oxide); padding-left: .3em; } .intro__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; } .intro__music { display: flex; flex-direction: column; align-items: center; } .intro__hint { font-size: .72rem; color: var(--muted); } /* ---------- 05 TOP BAR / MENU / THREAD ------------------------------ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--topbar-h); padding: max(0px, env(safe-area-inset-top)) var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--kolam); transition: transform .5s var(--ease-out), background .4s, color .4s, box-shadow .4s; } .topbar.is-solid { background: rgba(43, 23, 13, .93); color: #fffaf0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(240, 207, 126, .3); } .topbar.is-hidden { transform: translateY(-100%); } .topbar__mark { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .topbar__mono { font-family: var(--f-script); font-size: 1.9rem; line-height: 1; white-space: nowrap; } .topbar__nav { display: none; } .topbar__nav ul { display: flex; gap: clamp(14px, 1.8vw, 26px); } .topbar__nav a { position: relative; text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 10px 0; opacity: .9; } .topbar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--turmeric); transform: scaleX(0); transition: transform .4s var(--ease-out); } .topbar__nav a:hover, .topbar__nav a.is-active { opacity: 1; } .topbar__nav a:hover::after, .topbar__nav a.is-active::after { transform: scaleX(1); } .topbar__tools { display: flex; align-items: center; gap: 10px; } .lang { display: inline-flex; border: 1px solid currentColor; border-radius: 99px; padding: 3px; } .lang__btn { min-height: 36px; min-width: 44px; padding: 4px 12px; border: 0; border-radius: 99px; background: transparent; font-size: .72rem; font-weight: 600; letter-spacing: .1em; transition: background .3s, color .3s; } .lang__btn--ta { font-family: var(--f-tamil); letter-spacing: 0; font-size: .8rem; } .lang__btn[aria-pressed="true"] { background: var(--turmeric); color: var(--maroon-deep); } .menu-btn { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; display: grid; place-items: center; } .menu-btn__lines { display: grid; gap: 6px; width: 18px; } .menu-btn__lines span { display: block; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out); } .menu-btn[aria-expanded="true"] .menu-btn__lines span:first-child { transform: translateY(3.75px) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__lines span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 80; background: var(--maroon) var(--kolam-tile); color: var(--kolam); display: grid; place-items: center; padding: calc(var(--topbar-h) + 24px) var(--gutter) 40px; overflow-y: auto; animation: menuIn .6s var(--ease-out); } @keyframes menuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .menu__inner { width: 100%; max-width: 30rem; padding: 26px; background: rgba(71, 32, 31, .9); border-radius: 6px; } .menu__list li { border-bottom: 1px dashed rgba(248, 241, 227, .25); } .menu__list a { display: flex; align-items: baseline; gap: 18px; padding: 12px 0; text-decoration: none; font-family: var(--f-display); font-style: italic; font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.2; } .menu__list a:hover { color: var(--turmeric); } .menu__num { font-family: var(--f-sans); font-style: normal; font-size: .7rem; letter-spacing: .2em; color: var(--turmeric); } .menu__orn { width: 140px; height: 14px; color: var(--turmeric); margin: 28px 0 14px; } .menu__date { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } .thread { position: fixed; z-index: 85; pointer-events: none; top: 0; left: 0; right: 0; height: 3px; } .thread__fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--turmeric) 0 10px, transparent 10px 14px); transform-origin: left; transform: scaleX(var(--p, 0)); } .thread__bead { display: none; } @media (min-width: 1200px) { .topbar__nav { display: block; } .menu-btn { display: none; } } /* ---------- 06 HERO: THE KOLAM HALL --------------------------------- */ /* Pinned while scrolling. js/main.js sets --hp (walk), --kp (kolam drawn) and --hw (welcome). */ .hero { --hp: 0; --kp: 0; --hw: 0; position: relative; height: 230vh; height: 230svh; background: var(--coconut); color: var(--kolam); text-align: center; } .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; } .hero__scene { position: absolute; inset: 0; z-index: -1; } .hero__photo { position: absolute; inset: 0; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 55% 42%; transform: scale(calc(1.04 + var(--hp) * .28)); filter: saturate(1.04) contrast(1.03); } .is-entered .hero__photo img { animation: photoIn 2.6s var(--ease-out) both; } @keyframes photoIn { from { filter: sepia(.4) brightness(1.25) saturate(.7); } } .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 20, 16, .78) 0%, rgba(42, 20, 16, .42) 30%, transparent 55%, rgba(42, 20, 16, .3) 100%), radial-gradient(ellipse 80% 70% at 50% 55%, transparent 50%, rgba(28, 18, 13, .45)); } .hero__fade { /* hand-off to the lime-washed wall below */ position: absolute; inset: 0; background: #E6DDCB; opacity: calc((var(--hp) - .82) * 5.5); } /* The pulli kolam, laid flat on the red oxide floor */ .hero__floor { position: absolute; left: 50%; bottom: max(-8vh, -60px); width: min(94vw, 96vh); aspect-ratio: 1; transform: translateX(-50%) perspective(1100px) rotateX(63deg) scale(calc(1 + var(--hp) * .25)); transform-origin: 50% 100%; } @media (max-aspect-ratio: 4/5) { .hero__floor { bottom: 2vh; width: 118vw; } } .kolam { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(255, 250, 235, .7)); } .kolam__dots { fill: var(--kolam); opacity: .92; } .kolam__lines { stroke: var(--kolam); stroke-width: 3.4; } .kolam__lines path, .kolam__lines circle { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--kp) - var(--s, 0)) * 3.5, 1)); } .hero__motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mote { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 240, 205, .9); box-shadow: 0 0 6px 1px rgba(255, 230, 180, .6); opacity: 0; animation: mote var(--t) linear var(--dl) infinite; } @keyframes mote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 15%, 85% { opacity: .7; } 100% { opacity: 0; transform: translate3d(var(--dx), -26vh, 0); } } .hero__grain { position: absolute; inset: -20%; background: var(--grain); opacity: .28; mix-blend-mode: overlay; animation: grain 1.2s steps(4) infinite; } @keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } } .hero__content { position: absolute; left: 0; right: 0; top: calc(var(--topbar-h) + clamp(28px, 11vh, 120px)); padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; opacity: calc(1 - var(--hp) * 2.4); transform: translate3d(0, calc(var(--hp) * -14vh), 0); text-shadow: 0 2px 18px rgba(28, 18, 13, .55); } .hero__tamil { font-family: var(--f-tamil-display); font-size: clamp(.95rem, 3vw, 1.15rem); color: var(--turmeric); } .hero__names { margin: 6px 0 10px; font-family: var(--f-script); font-weight: 400; font-size: clamp(4rem, min(15vw, 15svh), 8.4rem); line-height: .92; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; } .hero__name { display: inline-block; } .hero__amp { font-size: .6em; color: var(--turmeric); } .hero__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; } .dot { width: 5px; height: 5px; background: var(--turmeric); transform: rotate(45deg); } .hero__welcome { position: absolute; left: 0; right: 0; top: 30%; padding: 0 var(--gutter); display: grid; gap: 8px; justify-items: center; pointer-events: none; opacity: var(--hw); transform: translate3d(0, calc((1 - var(--hw)) * 20px), 0); text-shadow: 0 2px 22px rgba(28, 18, 13, .7); } .hero__welcome-ta { font-family: var(--f-tamil-display); font-weight: 600; font-size: clamp(2.4rem, 9vw, 4.6rem); line-height: 1.25; color: var(--kolam); } .hero__welcome-en { font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 3.4vw, 1.6rem); max-width: 26em; } .scroll-cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--kolam); min-height: 44px; opacity: calc(1 - var(--hp) * 5); } .scroll-cue__line { width: 1px; height: 38px; background: linear-gradient(var(--kolam), transparent); position: relative; overflow: hidden; } .scroll-cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--turmeric); animation: cue 2.2s var(--ease-silk) infinite; } @keyframes cue { to { top: 100%; } } /* ---------- 07 CALENDAR COUNTDOWN ---------------------------------- */ .calendar { position: relative; padding-block: clamp(72px, 11vw, 130px); } .calendar, .couple { background: radial-gradient(60% 40% at 15% 10%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(50% 50% at 90% 85%, rgba(178, 138, 78, .16), transparent 70%), var(--lime); } .calendar__wrap { display: grid; gap: 40px; justify-items: center; text-align: center; } .cal { position: relative; width: min(290px, 78vw); margin-top: 34px; transform-origin: 50% -30px; } .cal.is-in { animation: calSwing 2.8s ease-out; } @keyframes calSwing { 0% { transform: rotate(5deg); } 35% { transform: rotate(-3deg); } 60% { transform: rotate(1.4deg); } 80% { transform: rotate(-.6deg); } 100% { transform: rotate(0); } } .cal__nail { position: absolute; top: -34px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8c98a, #7a5a2c); box-shadow: 0 2px 3px rgba(0,0,0,.35); } .cal__nail::after { content: ""; position: absolute; top: 5px; left: 50%; width: 130px; height: 31px; margin-left: -65px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 31' preserveAspectRatio='none'%3E%3Cpath d='M4 31 65 1 126 31' fill='none' stroke='%236b4c35' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; z-index: -1; } .cal__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--oxide); color: var(--kolam); font-size: 13.12px; font-weight: 600; border-radius: 4px 4px 0 0; box-shadow: inset 0 -3px 0 var(--turmeric); } .cal__head span:last-child { font-family: var(--f-display); font-size: 16px; } .cal__sheet { position: relative; padding: 18px 18px 20px; background: var(--grain), #fdf8ee; box-shadow: 0 1px 0 #e3d6bb, 0 2px 0 #f6efe0, 0 3px 0 #e3d6bb, 0 4px 0 #f6efe0, 0 5px 0 #e0d2b5, 0 24px 30px -12px rgba(58, 38, 32, .45); } .cal__sheet::before { /* perforation where yesterday was torn off */ content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 6px; background: radial-gradient(circle at 5px 0, transparent 3px, #fdf8ee 3.5px) 0 0 / 10px 6px repeat-x; } .cal__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(80px, 22vw, 118.4px); line-height: 1; color: var(--oxide); font-variant-numeric: lining-nums tabular-nums; } .cal__label { margin-top: 4px; font-size: 12.16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon); } .cal__small { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; } .cal__small span { display: grid; } .cal__small b { font-family: var(--f-display); font-size: 24px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .cal__small i { font-style: normal; font-size: 9.92px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .cal__under { display: none; } .countdown__done { margin-top: 16px; padding: 16px; background: #fdf8ee; font-family: var(--f-display); font-style: italic; color: var(--maroon); } .calendar__date { font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.15; color: var(--maroon); } .calendar__note { margin-top: 8px; font-family: var(--f-script); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.2; color: var(--oxide); } @media (min-width: 800px) { .calendar__wrap { grid-template-columns: auto minmax(0, 26rem); justify-content: center; align-items: center; gap: clamp(48px, 8vw, 120px); text-align: left; } } /* ---------- 08 THE FAMILY ALBUM ------------------------------------ */ .story { position: relative; color: var(--kolam); background: var(--grain), radial-gradient(70% 60% at 30% 40%, #4a3628, var(--album) 70%); } .album { position: relative; } .album__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; } .album__track { display: flex; align-items: center; gap: clamp(36px, 6vw, 84px); padding: var(--topbar-h) max(var(--gutter), 6vw) 24px; will-change: transform; } .album__cover { flex: none; width: min(25rem, 78vw); } .album__cover .chapter { color: var(--turmeric); } .album__cover .section-title { color: var(--kolam); } .album__cover .section-intro { color: rgba(248, 241, 227, .78); } .album__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--turmeric); } .album__hint svg { width: 18px; height: 18px; animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateX(6px); } } .album__list { display: flex; align-items: center; gap: clamp(36px, 6vw, 84px); } .moment { flex: none; display: grid; gap: 16px; width: min(64vw, 330px, 40vh); transform: rotate(var(--r, 0deg)); } .moment--landscape { width: min(84vw, 500px, 80vh); } .moment__media { position: relative; padding: 10px 10px 12px; background: #fbf7ee; box-shadow: 0 2px 0 #e6dcc6, 0 26px 40px -18px rgba(0, 0, 0, .7); } .moment__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); filter: sepia(.18) contrast(1.03) saturate(.92); } .moment--landscape .moment__media img { aspect-ratio: 16 / 10; } .moment__media::before, .moment__media::after { /* black paper photo corners */ content: ""; position: absolute; width: 30px; height: 30px; background: #1d140f; z-index: 1; } .moment__media::before { top: -6px; left: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); } .moment__media::after { bottom: -6px; right: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .moment__tape { display: none; } .moment__body { padding: 0 4px; } .moment__year { font-family: var(--f-script); font-size: 2.6rem; line-height: 1; color: var(--turmeric); } .moment__title { margin: 2px 0 6px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 3.6vw, 1.55rem); line-height: 1.2; color: var(--kolam); } .moment__text { font-size: .9rem; line-height: 1.6; color: rgba(248, 241, 227, .76); } @media (max-height: 720px) { .moment__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } .album__end { flex: none; width: min(22rem, 76vw); text-align: center; } .album__end svg { width: 34px; height: 34px; margin: 0 auto 18px; color: var(--turmeric); } .album__end p { font-family: var(--f-display); font-style: italic; font-size: clamp(1.5rem, 4.4vw, 2.2rem); line-height: 1.3; color: var(--kolam); text-wrap: balance; } .no-js .album__pin { position: relative; height: auto; overflow-x: auto; padding-block: 60px; } /* ---------- 08b MEET THE COUPLE: PORTRAITS ON THE WALL ------------- */ .profiles { display: grid; gap: clamp(64px, 10vw, 90px); } .profile { display: grid; gap: 26px; justify-items: center; text-align: center; } .profile__photo { position: relative; width: min(20rem, 80vw); margin-top: 70px; padding: 14px; background: linear-gradient(135deg, #6e4a30, #3e2718 60%, #5b3b25); border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 220, 160, .18), 0 22px 30px -16px rgba(58, 38, 32, .6); transform: rotate(var(--r, -1.2deg)); transform-origin: 50% -60px; transition: transform .8s var(--ease-out); } .profile:nth-child(2) .profile__photo { --r: 1.4deg; } .profile:hover .profile__photo { transform: rotate(0); } .profile__photo::before { /* string and nail */ content: ""; position: absolute; left: 50%; top: -62px; width: 60%; height: 62px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 62' preserveAspectRatio='none'%3E%3Cpath d='M2 62 60 6 118 62' fill='none' stroke='%236b4c35' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='6' r='5' fill='%23a8834a'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .profile__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 10px solid #f3ead6; filter: sepia(.12) saturate(.95); } .profile__nick { position: absolute; right: -14px; bottom: 26px; padding: 6px 14px 6px 18px; background: var(--turmeric); color: var(--maroon-deep); font-family: var(--f-script); font-size: 1.6rem; line-height: 1.1; clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); transform: rotate(-5deg); } .profile:nth-child(2) .profile__nick { background: var(--leaf); color: var(--kolam); } .profile__text { max-width: 30rem; } .profile__role { font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--oxide); } .profile__name { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; color: var(--maroon); margin: 6px 0 14px; } .profile__bio { color: var(--muted); } .profile__fav-title { margin: 20px 0 10px; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf); } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .chips li { padding: 6px 14px; border: 1px dashed rgba(83, 107, 61, .6); border-radius: 99px; font-size: .86rem; color: var(--leaf); background: rgba(255, 255, 255, .45); transition: background .3s, color .3s; } .chips li:hover { background: var(--leaf); color: var(--kolam); } @media (min-width: 768px) { .profiles { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); } } .likely { margin-top: clamp(90px, 13vw, 150px); } .likely__head { text-align: center; margin-bottom: 36px; } .likely__title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 3.2rem); color: var(--maroon); line-height: 1.1; } .likely__hint { margin-top: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oxide); } .likely__grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 560px) { .likely__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .likely__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .flip { perspective: 1200px; } .flip__btn { position: relative; display: block; width: 100%; min-height: 210px; padding: 0; border: 0; background: none; text-align: left; transform-style: preserve-3d; transition: transform .9s var(--ease-out); } .flip__btn[aria-pressed="true"] { transform: rotateY(180deg); } .flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border-radius: 8px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 16px 30px -22px rgba(58, 38, 32, .7); } .flip__front { background: var(--grain), #fbf4e4; } .flip__front::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 5px; pointer-events: none; } .flip__front::after { content: ""; position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; opacity: .6; background: var(--kolam-orn) center / 160% auto no-repeat; } .flip__back { transform: rotateY(180deg); color: var(--kolam); background: var(--oxide) var(--kolam-tile); } .flip:nth-child(3n+2) .flip__back { background-color: var(--leaf); } .flip:nth-child(3n+3) .flip__back { background-color: var(--maroon); } .flip__num { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--oxide); } .flip__q { font-family: var(--f-display); font-size: clamp(1.4rem, 4vw, 1.65rem); line-height: 1.25; color: var(--maroon); padding-right: 30px; } .flip__tap { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; } .flip__tap::before { content: ""; width: 18px; height: 1px; background: currentColor; } .flip__a { font-family: var(--f-script); font-size: clamp(3rem, 10vw, 3.8rem); line-height: 1; } .flip__aside { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; line-height: 1.35; } .flip__btn:hover:not([aria-pressed="true"]) { transform: rotateY(-8deg) translateY(-4px); } /* ---------- 15 MUSIC PLAYER + CURSOR ------------------------------- */ .music { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .music__toggle { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--brass); background: var(--maroon-deep); color: var(--brass); display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); transition: transform .4s var(--ease-out); } .music__toggle:hover { transform: scale(1.06); } .music__bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; } .music__bars i { display: block; width: 3px; height: 30%; background: currentColor; border-radius: 2px; transition: height .3s; } .music.is-playing .music__bars i { animation: bars 1s ease-in-out infinite alternate; } .music.is-playing .music__bars i:nth-child(2) { animation-delay: -.3s; } .music.is-playing .music__bars i:nth-child(3) { animation-delay: -.6s; } .music.is-playing .music__bars i:nth-child(4) { animation-delay: -.15s; } @keyframes bars { from { height: 20%; } to { height: 100%; } } .music.needs-tap .music__toggle { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(178, 138, 78, .25); } } .music__panel { order: -1; width: min(290px, calc(100vw - 32px)); padding: 14px; background: var(--maroon-deep); color: var(--ivory); border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); animation: panelIn .5s var(--ease-out); } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } } .music__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .music__head .icon-btn { width: 36px; height: 36px; color: var(--brass); border-color: var(--line-soft); } .music__now { display: flex; flex-direction: column; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); } .music__now strong { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ivory); font-weight: 500; } /* YouTube requires the embedded player to be visible at 200×200 or larger */ .music__player { width: 100%; height: 200px; min-width: 200px; background: #000; border-radius: 4px; overflow: hidden; } .music__player iframe { width: 100%; height: 100%; border: 0; } .music__vol { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(248, 241, 227, .7); } .music__vol input { flex: 1; accent-color: var(--brass); min-height: 32px; } .music__status { font-size: .8rem; color: var(--turmeric); margin-top: 6px; } .music__status:empty { display: none; } .music__alt { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; color: var(--ivory); min-height: 36px; } .music__alt svg { width: 16px; height: 16px; } .cursor { display: none; } @media (hover: hover) and (pointer: fine) { .has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--brass); border-radius: 50%; transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1)); transition: transform .18s var(--ease-out), opacity .3s, background .3s; mix-blend-mode: normal; opacity: .9; } .has-cursor .cursor.is-hover { --cs: 1.7; background: rgba(178, 138, 78, .12); } } /* No-JS fallback block */ .noscript { padding: 120px var(--gutter) 60px; background: var(--maroon); color: var(--ivory); text-align: center; } .noscript h2 { font-family: var(--f-display); font-size: 3rem; } .noscript ul { margin: 24px auto; max-width: 40rem; text-align: left; display: grid; gap: 10px; } /* ---------- 17 GUEST UPLOAD PAGE (upload.html) --------------------- */ .up-page { min-height: 100svh; background: var(--maroon); color: var(--ink); } .up-page::before { /* same silk texture as the intro */ content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 40% at 50% 0%, rgba(233, 181, 76, .22), transparent 70%), repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px); } .up-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px; color: var(--ivory); } .up-main { position: relative; padding: 8px 12px 40px; } .up-card { max-width: 34rem; margin: 0 auto; padding: 36px clamp(18px, 6vw, 40px) 32px; background: var(--paper); border-radius: 180px 180px 10px 10px; text-align: center; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); } .up-arch { width: 56px; height: 70px; margin: 0 auto 14px; color: var(--brass); } .up-names { font-family: var(--f-display); font-size: 1.3rem; color: var(--turmeric); } .up-names em { color: var(--brass); } .up-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.05; color: var(--maroon); margin: 6px 0 12px; } .up-intro { color: var(--muted); margin-bottom: 26px; } .up-closed { padding: 16px; margin-bottom: 20px; border-radius: 6px; background: var(--oxide); color: var(--ivory); } .up-form { display: grid; gap: 16px; text-align: left; } .up-field { display: grid; gap: 6px; } .up-field__label { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon); } .up-field input, .up-field textarea { min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); } .up-field input:focus, .up-field textarea:focus { outline: 2px solid var(--turmeric); outline-offset: 1px; border-color: transparent; } .up-field__hint { font-size: .8rem; color: var(--muted); } .up-drop { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; cursor: pointer; text-align: center; border: 1.5px dashed var(--brass); border-radius: 12px; background: rgba(233, 181, 76, .12); transition: background .3s, border-color .3s, transform .3s var(--ease-out); } .up-drop:hover, .up-drop.is-over { background: rgba(233, 181, 76, .25); border-color: var(--turmeric); } .up-drop:active { transform: scale(.98); } .up-form input[type="file"]:focus-visible + .up-drop { outline: 2px solid var(--turmeric); outline-offset: 3px; } .up-drop.is-disabled { opacity: .5; pointer-events: none; } .up-drop svg { width: 44px; height: 44px; color: var(--maroon); } .up-drop__label { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--maroon); } .up-drop__hint { font-size: .8rem; color: var(--muted); } .up-list { display: grid; gap: 8px; } .up-list:empty { display: none; } .up-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px; background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; } .up-item__thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--ivory-2); color: var(--maroon); font-size: 1.1rem; } .up-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .up-item__body { display: grid; gap: 3px; min-width: 0; } .up-item__name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-item__meta { font-size: .76rem; color: var(--muted); } .up-item__bar { height: 3px; background: var(--ivory-2); border-radius: 3px; overflow: hidden; } .up-item__bar i { display: block; height: 100%; background: var(--turmeric); transform-origin: left; transition: transform .3s; } /* Indeterminate shimmer while a file is on its way (Apps Script can't report progress) */ .up-item[data-state="sending"] .up-item__bar i { width: 40%; transform: none !important; animation: upSlide 1.1s var(--ease-silk) infinite; } @keyframes upSlide { from { margin-left: -40%; } to { margin-left: 100%; } } .up-item__x { width: 40px; height: 40px; border: 0; background: none; font-size: 1.4rem; color: var(--muted); border-radius: 50%; } .up-item__x:hover { background: var(--ivory-2); } .up-item[data-state="done"] .up-item__meta { color: var(--oxide); font-weight: 700; } .up-item[data-state="done"] .up-item__bar i { background: var(--oxide); } .up-item[data-state="error"] .up-item__meta, .up-item[data-state="skipped"] .up-item__meta { color: #a3341f; font-weight: 600; } .up-item[data-state="skipped"] { opacity: .75; } .up-send { width: 100%; min-height: 56px; font-size: .9rem; } .up-send:disabled { opacity: .45; cursor: not-allowed; } .up-send:disabled::before { display: none; } .up-status { min-height: 1.5em; text-align: center; font-size: .92rem; color: var(--maroon); font-weight: 600; } .up-back { display: inline-block; margin-top: 22px; font-size: .85rem; color: var(--maroon); text-underline-offset: 4px; min-height: 44px; line-height: 44px; } .up-credit { position: relative; text-align: center; margin-top: 28px; } .up-noscript { position: relative; color: var(--ivory); text-align: center; padding: 20px; } /* Embedded uploader inside the Memories section */ .memories__panel { display: grid; gap: 28px; justify-items: center; width: 100%; } .up-card--embed { width: 100%; max-width: 30rem; padding: 44px clamp(18px, 5vw, 34px) 26px; border-radius: 160px 160px 10px 10px; position: relative; } .up-card--embed::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--brass); border-radius: inherit; pointer-events: none; } .up-card__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 6vw, 2.3rem); color: var(--maroon); margin: 18px 0 20px; } .memories__alt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(96, 44, 48, .25); font-size: .84rem; color: var(--muted); text-align: left; } .uploader .up-status { margin-top: -4px; } /* Mini QR: "on a computer? continue on your phone" — pointless on a phone itself */ .qr-card--mini { flex-direction: row; gap: 16px; max-width: 30rem; text-align: left; } .qr-card--mini .qr-card__frame { padding: 10px; border-radius: 10px; flex: none; } .qr-card--mini .qr-card__frame::before { inset: 4px; } .qr-card--mini .qr-card__code { width: 96px; height: 96px; margin: 0; padding: 4px; } .qr-card--mini .qr-card--mini figcaption { font-size: .78rem; letter-spacing: .08em; line-height: 1.5; max-width: 16rem; } @media (max-width: 899px) { .qr-card--mini { display: none; } } @media (min-width: 900px) { .memories__wrap { grid-template-columns: 1fr 1fr; align-items: start; } .memories__intro { position: sticky; top: calc(var(--topbar-h) + 32px); } } /* Guestbook wish form — a letter on the ivory table */ .wish-form { position: relative; display: grid; gap: 18px; max-width: 44rem; margin: 0 auto clamp(56px, 8vw, 88px); padding: clamp(26px, 5vw, 44px); background: var(--paper); border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(96, 44, 48, .6); } .wish-form::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-soft); pointer-events: none; } .wish-form::after { /* washi tape, like the wish cards */ content: ""; position: absolute; top: -10px; left: 50%; width: 90px; height: 22px; margin-left: -45px; background: rgba(233, 181, 76, .55); transform: rotate(-2deg); } .wish-form__title { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 5vw, 2.2rem); color: var(--maroon); text-align: center; } .wish-form__row { display: grid; gap: 18px; } @media (min-width: 700px) { .wish-form__row { grid-template-columns: 1fr 1fr; } } .up-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .wish-form__count { text-align: right; font-variant-numeric: tabular-nums; } .wish-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wish-form .up-send { justify-self: center; width: auto; min-width: 14rem; } /* ---------- 09 CELEBRATIONS: INVITATION CARDS ON THE RED OXIDE FLOOR */ .events { overflow: hidden; color: var(--kolam); background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 40%, rgba(255, 255, 255, .05) 60%, transparent 75%), var(--grain), var(--oxide); } .events .wrap { max-width: 980px; position: relative; } .events .section-head::after { filter: brightness(0) invert(1); opacity: .7; } .events .chapter { color: var(--turmeric); } .events .section-title, .events .contacts__title { color: var(--kolam); } .events .section-intro, .events .contacts__intro { color: rgba(248, 241, 227, .82); } .events__bells, .events__pillar { display: none; position: absolute; pointer-events: none; z-index: 0; } @media (min-width: 1240px) { .events__bells { display: block; top: -10px; left: max(10px, calc(50% - 720px)); width: 170px; filter: drop-shadow(0 14px 14px rgba(0,0,0,.35)); } .events__pillar { display: block; top: 90px; right: max(-30px, calc(50% - 760px)); width: 260px; filter: drop-shadow(-10px 20px 24px rgba(0,0,0,.35)); } .events__bells { animation: ring 5s ease-in-out infinite; transform-origin: 50% 0; } } @keyframes ring { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } } .days { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 auto 36px; max-width: 40rem; padding: 4px; background: var(--paper); border-radius: 8px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); color: var(--maroon); } .days a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px; border-radius: 6px; text-decoration: none; transition: background .35s, color .35s; } .days__d { font-family: var(--f-display); font-size: 1.35rem; line-height: 1; } .days__w { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .days a.is-active { background: var(--maroon); color: var(--kolam); } .event-list { display: grid; gap: clamp(22px, 3vw, 34px); } .event { --e-accent: #A8781B; --e-bg: var(--paper); --e-fg: var(--ink); --e-line: var(--line); position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 26px; padding: clamp(34px, 5.4vw, 64px); background: var(--grain), var(--e-bg); color: var(--e-fg); border-radius: 3px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); scroll-margin-top: calc(var(--topbar-h) + 84px); } .event::before { /* printed double border, like a wedding invitation */ content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none; border: 1.5px solid var(--e-accent); box-shadow: inset 0 0 0 4px var(--e-bg), inset 0 0 0 5px var(--e-line); } .event::after { /* little kolam crown on the top border */ content: ""; position: absolute; top: 2px; left: 50%; width: 92px; height: 18px; margin-left: -46px; background: var(--e-bg) var(--kolam-orn) center / 80% auto no-repeat; } .event--nalungu2 { --e-accent: var(--oxide); } .event--kalyanam { --e-bg: var(--maroon); --e-fg: var(--kolam); --e-accent: var(--turmeric); --e-line: rgba(226, 173, 56, .45); } .event--kalyanam::after { filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg); background-color: transparent; } .event--reception { --e-accent: var(--leaf); } .event__head { display: grid; gap: 8px; align-content: start; } .event__day { display: flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--e-accent); } .event__day::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .event__date-big { font-family: var(--f-display); font-size: clamp(4.4rem, 16vw, 7rem); line-height: .85; font-weight: 500; color: var(--e-accent); } .event__date-big small { font-family: var(--f-sans); font-size: .22em; letter-spacing: .2em; text-transform: uppercase; margin-left: .5em; font-weight: 600; vertical-align: top; position: relative; top: .6em; color: var(--e-fg); } .event__name { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.05; text-wrap: balance; } .event__date { font-size: .95rem; opacity: .8; } .event__desc { font-size: 1.02rem; line-height: 1.75; max-width: 36rem; } .event__more { margin-top: 12px; } .event__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--e-fg); text-decoration: underline; text-decoration-color: var(--e-accent); text-underline-offset: 6px; } .event__toggle::after { content: "+"; font-size: 1.1rem; transition: transform .4s var(--ease-out); } .event__toggle[aria-expanded="true"]::after { transform: rotate(45deg); } .event__extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); } .event__extra > div { overflow: hidden; } .event__extra.is-open { grid-template-rows: 1fr; } .event__extra p { padding-top: 10px; font-size: .95rem; } .event__extra strong { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; margin-right: 8px; } .event__sides { display: grid; gap: 14px; } .venue { display: grid; gap: 12px; padding: 20px; border: 1px dashed var(--e-accent); border-radius: 4px; background: rgba(255, 255, 255, .28); } .event--kalyanam .venue { background: rgba(0, 0, 0, .12); } .venue__side { font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--e-accent); } .venue__row { display: flex; gap: 12px; align-items: flex-start; } .venue__row svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--e-accent); } .venue__time { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; } .venue__place { font-weight: 600; line-height: 1.45; } .venue__private { display: block; font-size: .82rem; opacity: .78; margin-top: 2px; font-weight: 400; } .venue__links { display: flex; flex-wrap: wrap; gap: 8px; } .venue__links .btn { --fg: var(--e-fg); --bd: var(--e-accent); --bg-hover: var(--e-bg); flex: 1 1 130px; } .event__note { font-size: .84rem; opacity: .8; font-style: italic; } .event__body { display: flex; flex-direction: column; } .event__venues { margin-top: 22px; } @media (max-width: 899px) { .event__venues { order: -1; margin: 0 0 24px; } } @media (min-width: 900px) { .event { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 64px); } .event__sides--two { grid-template-columns: 1fr 1fr; } } /* ---------- 10 FAMILY CONTACTS ------------------------------------- */ .contacts { margin-top: clamp(64px, 9vw, 110px); } .contacts__head { text-align: center; max-width: 34rem; margin: 0 auto 30px; } .contacts__coffee { width: 130px; height: auto; margin: 0 auto 8px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); } .contacts__title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 5.5vw, 2.8rem); line-height: 1.1; } .contacts__intro { margin-top: 10px; } .contacts__grid { display: grid; gap: 16px; } .contacts__side { padding: clamp(22px, 4vw, 30px); border-radius: 3px; background: var(--grain), var(--paper); color: var(--ink); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .7); } .contacts__label { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--oxide); } .person { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px dashed var(--line); } .person:last-child { border-bottom: 0; padding-bottom: 0; } .person__name { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--maroon); } .person__relation { font-size: .86rem; color: var(--muted); } .person__phone { margin-top: 4px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .person__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .person__links .btn { flex: 1 1 120px; } @media (min-width: 720px) { .contacts__grid { grid-template-columns: 1fr 1fr; } } /* ---------- 11 WISHLIST (paper tags) + MOI ENVELOPE ---------------- */ .wishlist { background: repeating-linear-gradient(45deg, rgba(120, 84, 40, .09) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(120, 84, 40, .09) 0 6px, transparent 6px 12px), #E4CFA3; } .wishlist .section-intro { color: var(--ink); } .wish-grid { display: grid; gap: 30px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); padding-top: 20px; } .wish { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 46px 22px 24px; background: var(--grain), #FBF4E4; color: var(--ink); clip-path: polygon(16% 0, 84% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); filter: drop-shadow(0 12px 12px rgba(58, 38, 32, .25)); transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease-out); } .wish:nth-child(3n+1) { --r: -1.6deg; } .wish:nth-child(3n+2) { --r: 1.1deg; } .wish:nth-child(3n) { --r: -.5deg; } .wish:hover { transform: rotate(0) translateY(-6px); } .wish::before { content: ""; position: absolute; top: 16px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #c9a978; box-shadow: inset 0 0 0 3px #FBF4E4, 0 0 0 1.5px var(--brass); } .wish__icon { width: 50px; height: 50px; color: var(--oxide); } .wish__icon svg { width: 100%; height: 100%; } .wish__name { font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; color: var(--maroon); } .wish__note { font-size: .9rem; color: var(--muted); } .gift { position: relative; display: grid; gap: 30px; align-items: center; margin-top: clamp(70px, 10vw, 110px); padding: clamp(60px, 8vw, 84px) clamp(24px, 5vw, 56px) clamp(30px, 5vw, 52px); background: var(--grain), #FDF8EC; color: var(--ink); border-radius: 4px; box-shadow: 0 30px 50px -30px rgba(58, 38, 32, .7); border: 10px solid transparent; border-image: repeating-linear-gradient(45deg, var(--oxide) 0 10px, var(--turmeric) 10px 20px) 10; } .gift::before { /* envelope flap */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; background: linear-gradient(#f3e7cd, #efe0c0); clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: 0 2px 0 rgba(0,0,0,.06); } .gift::after { /* kumkum seal */ content: "Moi"; position: absolute; top: 34px; left: 50%; width: 60px; height: 60px; margin-left: -30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b4473a, var(--maroon)); color: var(--kolam); font-family: var(--f-tamil-display); font-size: .9rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); } .gift__title { margin-top: 18px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 2.8rem); color: var(--maroon); margin-bottom: 10px; } .gift__text > p { color: var(--muted); max-width: 30rem; } .gift__details { display: grid; gap: 12px; margin-top: 24px; } .gift__details div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); } .gift__details dt { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oxide); } .gift__details dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.05rem; word-break: break-word; } .copy-btn { flex: none; min-height: 36px; padding: 4px 14px; border: 1px solid var(--maroon); border-radius: 6px; background: none; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); } .gift__qr { justify-self: center; width: min(230px, 70vw); padding: 10px; background: #fff; border: 1px solid var(--line); } @media (min-width: 860px) { .gift { grid-template-columns: 1.4fr 1fr; } } /* ---------- 12 GUESTBOOK: THE VISITORS' NOTEBOOK ------------------- */ .guestbook { background: var(--paper); } .guestbook__book { position: relative; display: grid; gap: 0; max-width: 1060px; margin: 0 auto; background: var(--grain), linear-gradient(90deg, transparent 54px, rgba(176, 48, 42, .35) 54px, rgba(176, 48, 42, .35) 56px, transparent 56px), repeating-linear-gradient(180deg, transparent 0 33px, rgba(70, 110, 150, .2) 33px 34px), #FCF8EE; box-shadow: 0 2px 0 #e9dfc8, 0 4px 0 #f6f0e2, 0 6px 0 #e3d8bf, 0 40px 60px -40px rgba(58, 38, 32, .7); border-radius: 3px; } .guestbook__cta { display: flex; justify-content: center; padding: 40px 20px; } .wish-form { margin: 0; max-width: none; padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 48px) clamp(28px, 4vw, 40px) clamp(70px, 8vw, 90px); background: none; box-shadow: none; border-radius: 0; } .wish-form::before, .wish-form::after { display: none; } .wish-form__title { font-family: var(--f-script); font-style: normal; font-size: clamp(2.4rem, 6vw, 3rem); color: var(--maroon); text-align: left; } .up-field input, .up-field textarea { background: rgba(255, 255, 255, .6); } .wishes { padding: clamp(10px, 3vw, 30px) clamp(20px, 5vw, 48px) clamp(30px, 4vw, 44px) clamp(70px, 8vw, 90px); display: grid; gap: 0; } .wishes .wish-card { margin: 0; } .wish-card { position: relative; padding: 22px 0; background: none; box-shadow: none; transform: none; border-bottom: 1px dashed var(--line); } .wish-card:last-child { border-bottom: 0; } .wish-card::before { content: "“"; position: absolute; left: -38px; top: 6px; font-family: var(--f-display); font-size: 3.6rem; line-height: 1; color: var(--oxide); } .wish-card__text { font-family: var(--f-display); font-style: italic; font-size: 1.22rem; line-height: 1.6; color: var(--ink); } .wish-card__by { margin-top: 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .wish-card__name { font-family: var(--f-script); font-size: 2rem; line-height: 1; color: var(--maroon); } .wish-card__rel { font-size: .8rem; color: var(--muted); } .wishes__empty { padding: 30px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1.2rem; color: var(--muted); } @media (min-width: 1000px) { .guestbook__book { grid-template-columns: 1fr 1fr; } .guestbook__book::after { /* the fold of a two-page spread */ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(58, 38, 32, .14) 45%, rgba(58, 38, 32, .2) 50%, rgba(58, 38, 32, .14) 55%, transparent); } .wishes { max-height: 760px; overflow-y: auto; } } /* ---------- 13 MEMORIES: PRINTS ON A BANANA LEAF ------------------- */ .memories { color: var(--kolam); overflow: hidden; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px), linear-gradient(180deg, transparent 49.6%, rgba(220, 230, 170, .35) 49.8%, rgba(220, 230, 170, .35) 50.2%, transparent 50.4%), radial-gradient(80% 60% at 30% 20%, #647e48, var(--leaf) 60%, #3f5530); } .memories .chapter { color: var(--turmeric); } .memories .section-title { color: var(--kolam); } .memories .section-intro { color: rgba(248, 241, 227, .86); } .memories .section-head::after { filter: brightness(0) invert(1); } .memories__wrap { position: relative; display: grid; gap: 44px; align-items: center; } .memories__intro { text-align: center; } .memories__intro .section-intro { margin-inline: auto; max-width: 34rem; } .memories__tag { margin-top: 16px; font-family: var(--f-script); font-size: 2.2rem; color: var(--turmeric); } .memories__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; } .memories__buttons .btn { --fg: var(--kolam); --bd: var(--kolam); --bg-hover: var(--leaf); } .memories__buttons .btn--solid { --bg: var(--turmeric); --fg: var(--maroon-deep); --bd: var(--turmeric); color: var(--maroon-deep); box-shadow: none; } .share-steps { margin: 30px auto 0; padding: 20px 22px; max-width: 34rem; text-align: left; background: rgba(0, 0, 0, .14); border: 1px dashed rgba(248, 241, 227, .35); border-radius: 6px; } .share-steps__title { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--turmeric); margin-bottom: 12px; } .share-steps ol { counter-reset: step; display: grid; gap: 10px; } .share-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; font-size: .95rem; } .share-steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--turmeric); color: var(--maroon-deep); font-family: var(--f-display); font-weight: 600; } .share-steps__alt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(248, 241, 227, .3); font-size: .85rem; opacity: .8; } .qr-card { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .qr-card__frame { position: relative; padding: 16px; background: #fbf7ee; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); } .qr-card__code { width: 200px; height: 200px; display: grid; place-items: center; background: #fff; padding: 8px; } .qr-card__code img, .qr-card__code canvas { width: 100% !important; height: 100% !important; } .qr-card__code .qr-fallback { font-size: .8rem; text-align: center; color: var(--muted); padding: 12px; } .qr-card figcaption { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--kolam); } .up-card--embed { border-radius: 4px; background: var(--grain), var(--paper); } .up-card--embed::before { inset: 8px; border: 1px dashed var(--line); border-radius: 2px; } .up-card__title { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3rem); color: var(--maroon); margin: 4px 0 18px; } @media (min-width: 900px) { .memories__wrap { grid-template-columns: 1fr 1fr; align-items: start; } .memories__intro { text-align: left; position: sticky; top: calc(var(--topbar-h) + 32px); } .memories__intro .section-intro { margin-inline: 0; } .memories__buttons { justify-content: flex-start; } .share-steps { margin-inline: 0; } } .wall { margin-top: clamp(56px, 8vw, 90px); columns: 2 160px; column-gap: 16px; } @media (min-width: 900px) { .wall { columns: 3; column-gap: 24px; } } .wall--embed { columns: auto; } .wall iframe { display: block; width: 100%; height: min(720px, 80svh); border: 0; background: #fff; } .wall__title { margin-top: clamp(56px, 8vw, 90px); margin-bottom: 20px; text-align: center; font-family: var(--f-script); font-weight: 400; font-size: clamp(2.4rem, 6vw, 3.2rem); color: var(--turmeric); } .wall__title:not([hidden]) + .wall { margin-top: 0; } .polaroid { position: relative; break-inside: avoid; margin-bottom: 22px; padding: 9px 9px 14px; background: #fbf7ee; box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .7); transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease-out); } .polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(226, 173, 56, .7); transform: rotate(-3deg); } .polaroid:hover { transform: rotate(0) scale(1.02); } .polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.15); } .polaroid figcaption { padding-top: 8px; font-family: var(--f-display); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: var(--ink); } .polaroid small { display: block; font-family: var(--f-sans); font-style: normal; font-size: .72rem; color: var(--muted); margin-top: 4px; } /* ---------- 14 FOOTER: THE FEAST ----------------------------------- */ .footer { position: relative; overflow: hidden; color: var(--kolam); text-align: center; background: var(--maroon-deep); } .footer__feast { height: clamp(260px, 46vw, 520px); background: url("../assets/images/home/feast.webp") center / cover no-repeat; } .footer__feast::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(260px, 46vw, 520px); background: linear-gradient(180deg, rgba(71, 32, 31, .15) 40%, var(--maroon-deep)); } .footer__inner { position: relative; margin-top: clamp(-110px, -10vw, -60px); padding: 0 var(--gutter) calc(110px + env(safe-area-inset-bottom)); } .footer__feast-line { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 4vw, 2rem); color: var(--turmeric); } .footer__names { margin-top: 18px; font-family: var(--f-script); font-size: clamp(3.4rem, 12vw, 6rem); line-height: 1; } .footer__names .amp { color: var(--turmeric); font-size: .7em; } .footer__date { margin-top: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--turmeric); } .footer__line { margin-top: 22px; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; opacity: .85; } .footer__credit { margin-top: 52px; font-size: .74rem; letter-spacing: .06em; opacity: .6; } .footer__credit a { text-underline-offset: 4px; } .footer__credit a:hover { color: var(--turmeric); } /* No-JS fallback block */ .noscript { padding: 120px var(--gutter) 60px; background: var(--maroon); color: var(--kolam); text-align: center; } .noscript h2 { font-family: var(--f-display); font-size: 3rem; } .noscript ul { margin: 24px auto; max-width: 40rem; text-align: left; display: grid; gap: 10px; } /* ---------- 15b RICH LAYERS: jasmine strands, urlis, event photos -- */ /* Foreground jasmine and tuberose urlis frame the verandah; they part as you walk in */ .hero__jasmine { position: absolute; top: -8vh; width: clamp(96px, 17vw, 270px); max-width: none; transform-origin: 50% 0; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); } .hero__jasmine--l { left: -2vw; transform: translate3d(calc(var(--hp) * -30%), calc(var(--hp) * -50vh), 0); } .hero__jasmine--r { right: -2vw; transform: translate3d(calc(var(--hp) * 30%), calc(var(--hp) * -50vh), 0) scaleX(-1); } .is-entered .hero__jasmine { animation: strand 6s ease-in-out infinite alternate; } .is-entered .hero__jasmine--r { animation-delay: -2.5s; } @keyframes strand { from { rotate: -1.2deg; } to { rotate: 1.2deg; } } .hero__urli { display: none; position: absolute; bottom: -5vh; width: clamp(200px, 24vw, 380px); max-width: none; pointer-events: none; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); } .hero__urli--l { left: -4vw; transform: translate3d(calc(var(--hp) * -40%), calc(var(--hp) * 25%), 0); } .hero__urli--r { right: -4vw; transform: translate3d(calc(var(--hp) * 40%), calc(var(--hp) * 25%), 0) scaleX(-1); } @media (min-width: 900px) and (min-height: 600px) { .hero__urli { display: block; } } /* Jasmine strands hung at the top of the lighter rooms */ .hang { position: absolute; top: -36px; z-index: 1; width: clamp(54px, 8vw, 130px); pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 10px 12px rgba(58, 38, 32, .22)); } .hang--l { left: max(4px, 2vw); } .hang--r { right: max(4px, 2vw); transform: scaleX(-1); } .hang.is-swaying { animation: strand 7s ease-in-out infinite alternate; } .calendar, .couple, .guestbook, .wishlist { position: relative; overflow: hidden; } @media (max-width: 600px) { .hang { width: 44px; top: -24px; opacity: .95; } } .calendar__urli { display: none; } @media (min-width: 800px) { .calendar__urli { display: block; position: absolute; right: max(10px, calc(50% - 640px)); bottom: -20px; width: clamp(180px, 20vw, 300px); filter: drop-shadow(0 16px 20px rgba(58, 38, 32, .35)); } } /* Each celebration carries an editorial photo, arched like a temple doorway */ .event__photo { position: relative; z-index: 0; margin: 0; overflow: hidden; border-radius: 999px 999px 4px 4px / 34% 34% 4px 4px; box-shadow: 0 0 0 1px var(--e-accent), 0 0 0 6px var(--e-bg), 0 0 0 7px var(--e-line); } .event__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.6s var(--ease-out); } .event.is-in .event__photo img { transform: scale(1.04); } .event__main { display: grid; gap: 26px; } @media (min-width: 900px) { .event--photo { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: stretch; } .event__photo img { height: 100%; min-height: 460px; aspect-ratio: auto; } .event--photo:nth-child(even) .event__photo { order: 2; } } /* ---------- 18 RICH ROOMS: matched to the photographs -------------- */ :root { --rose: #8B1E22; /* rose & cockscomb red */ --teak: #3B2316; --gold-hi: #F0CF7E; --tex-teak: url("../assets/images/home/tex-teak.webp"); --tex-silk: url("../assets/images/home/tex-silk.webp"); --tex-leaf: url("../assets/images/home/tex-leaf.webp"); --kolam-orn-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'%3E%3Cg fill='%23E3A72F'%3E%3Ccircle cx='56' cy='14' r='1.8'/%3E%3Ccircle cx='80' cy='4' r='1.8'/%3E%3Ccircle cx='80' cy='24' r='1.8'/%3E%3Ccircle cx='104' cy='14' r='1.8'/%3E%3Ccircle cx='80' cy='14' r='1.8'/%3E%3C/g%3E%3Cpath d='M0 14h44M116 14h44M80 0c10 6 20 10 30 14-10 4-20 8-30 14-10-6-20-10-30-14 10-4 20-8 30-14z' fill='none' stroke='%23E3A72F' stroke-width='1.1'/%3E%3C/svg%3E"); } body { background: var(--teak); } /* Opener: doors + jasmine curtain + bells + carved welcome sign */ .curtain { position: fixed; left: 0; right: 0; top: -2vh; height: min(48vh, 430px); z-index: 1; pointer-events: none; display: flex; } .curtain__half { flex: 1; background: url("../assets/images/home/jasmine.webp") repeat-x 0 0 / auto 100%; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); transition: transform 1.9s cubic-bezier(.6, 0, .2, 1), opacity 1.9s; } .curtain__half--l { background-position: right top; transform-origin: 0 0; } .curtain__half--r { background-position: left top; transform-origin: 100% 0; } .intro.is-playing .curtain__half { animation: curtainSway 6s ease-in-out infinite alternate; } @keyframes curtainSway { from { transform: skewX(-1deg); } to { transform: skewX(1deg); } } .intro.is-opening .curtain__half { animation: none; } .intro.is-opening .curtain__half--l { transform: translateX(-75%) skewX(8deg); opacity: .6; } .intro.is-opening .curtain__half--r { transform: translateX(75%) skewX(-8deg); opacity: .6; } .intro__bells { position: fixed; top: -6px; z-index: 2; width: clamp(80px, 12vw, 170px); transform-origin: 50% 0; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); pointer-events: none; } .intro__bells--l { left: clamp(6px, 4vw, 70px); } .intro__bells--r { right: clamp(6px, 4vw, 70px); scale: -1 1; } .intro.is-playing .intro__bells { animation: ring 3.6s ease-in-out infinite; } .intro.is-playing .intro__bells--r { animation-delay: -1.8s; } .intro.is-opening .intro__bells { animation: ringHard .5s ease-in-out 4; } @keyframes ringHard { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } } .doors::after { background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(20, 10, 6, .2), rgba(20, 10, 6, .78)); } .intro__stage { flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 18px); padding-top: clamp(20px, 6vh, 60px); } .tag { display: none; } .sign { position: relative; height: min(66vh, 124vw, 700px); aspect-ratio: 678 / 900; transform-origin: 50% 0; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .intro.is-playing .sign { animation: signIn 2.4s var(--ease-out) both; } @keyframes signIn { 0% { opacity: 0; transform: translateY(-40px) rotate(-3deg); } 50% { opacity: 1; transform: translateY(0) rotate(1.4deg); } 75% { transform: rotate(-.6deg); } 100% { transform: none; } } .intro.is-opening .sign { opacity: 0; transform: translateY(-50px) scale(.96); animation: none; } .sign__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)); } .sign__glass { position: absolute; z-index: 1; left: 29%; right: 28.5%; top: 25%; bottom: 30.5%; display: grid; align-content: center; justify-items: center; text-align: center; padding: 6% 5%; container-type: inline-size; background: linear-gradient(125deg, rgba(255, 240, 210, .16) 0%, transparent 30%, transparent 62%, rgba(255, 240, 210, .1) 78%, transparent 90%), radial-gradient(ellipse at 50% 40%, #6b4a2c, #3a2416 70%, #24160d); box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); } .sign__welcome { font-size: 6.4cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(251, 246, 236, .85); line-height: 1.5; } .intro .intro__names { margin: 6% 0 4%; font-size: 27cqw; line-height: .92; color: transparent; background: linear-gradient(180deg, #fff6df, var(--gold-hi) 55%, #c79a45); -webkit-background-clip: text; background-clip: text; } .intro .intro__amp { font-size: .6em; } .intro .intro__date { margin-top: 2%; font-size: 5.6cqw; letter-spacing: .22em; color: var(--gold-hi); padding-left: .22em; } .intro__lines { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 .4em; max-width: 30rem; text-align: center; color: rgba(251, 246, 236, .92); font-size: clamp(1rem, 3.6vw, 1.2rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); } .intro.is-playing .intro__line:nth-child(1) { animation-delay: 1.4s; } .intro.is-playing .intro__line:nth-child(2) { animation-delay: 1.8s; } .intro.is-playing .intro__line:nth-child(3) { animation-delay: 2.2s; } .intro.is-playing .intro__names { animation-delay: 1s; } .intro.is-playing .intro__date { animation-delay: 1.5s; } .intro.is-playing .intro__actions { animation-delay: 2.6s; } .intro.is-opening .intro__line, .intro.is-opening .intro__actions { animation: none; opacity: 0; transition: opacity .35s; } .intro__actions { margin-top: 0; } .intro .switch { color: var(--kolam); } .intro .switch__track { border-color: var(--gold-hi); } .intro .switch__thumb { background: var(--gold-hi); } .intro__hint { color: rgba(251, 246, 236, .7); } .btn--brass { --bg: linear-gradient(180deg, #e7c47a, #b8893c); --fg: #3a1d12; --bd: #f3d48f; background: linear-gradient(180deg, #ecca82, #b8893c); color: #3a1d12; border-color: #f3d48f; box-shadow: 0 2px 0 #7a5524, 0 12px 26px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); } .btn--brass::before { background: var(--rose); } .btn--brass:hover, .btn--brass:focus-visible { color: var(--kolam); } /* Hero text: one clear hierarchy, lifted off the photo by a soft halo */ .hero__content { top: calc(var(--topbar-h) + clamp(14px, 7vh, 80px)); text-shadow: none; } .hero__content::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(980px, 130vw); height: 190%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse closest-side, rgba(24, 10, 6, .72), rgba(24, 10, 6, .4) 55%, transparent); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-hi); padding-left: .42em; } .hero__eyebrow::before, .hero__eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); } .hero__eyebrow::after { transform: scaleX(-1); } .hero__names { margin: 8px 0 14px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(3.3rem, min(12vw, 12svh), 7.6rem); line-height: 1; color: #fffaf0; text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 10px 40px rgba(0, 0, 0, .65); } .hero__amp { font-family: var(--f-script); font-style: normal; color: var(--gold-hi); font-size: .8em; } .hero__meta { padding: 9px 20px; border: 1px solid rgba(240, 207, 126, .55); border-radius: 99px; background: rgba(24, 10, 6, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fffaf0; font-size: .72rem; letter-spacing: .22em; } @media (max-width: 480px) { .hero__meta { flex-direction: column; gap: 2px; border-radius: 18px; } .hero__meta .dot { display: none; } } .hero__welcome { top: 26%; text-shadow: none; } .hero__welcome::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(900px, 130vw); height: 200%; transform: translate(-50%, -50%); background: radial-gradient(ellipse closest-side, rgba(24, 10, 6, .7), transparent); } .hero__welcome-big { font-family: var(--f-display); font-style: italic; font-size: clamp(2.6rem, 8.6vw, 5rem); line-height: 1.15; color: #fffaf0; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); } .hero__welcome-small { font-size: clamp(.9rem, 2.6vw, 1.05rem); font-weight: 500; letter-spacing: .12em; color: var(--gold-hi); } /* Rooms: teak, red silk, banana leaf and jasmine ivory, taken from the photos */ .room { position: relative; isolation: isolate; } .room--teak { background: linear-gradient(rgba(28, 12, 6, .42), rgba(28, 12, 6, .62)), var(--tex-teak) center / 760px auto repeat; color: var(--kolam); } .room--silk { background: radial-gradient(90% 70% at 50% 30%, rgba(60, 4, 10, .2), rgba(40, 2, 6, .62)), var(--tex-silk) center / 460px auto repeat; color: var(--kolam); } .room--leaf { background: linear-gradient(rgba(10, 26, 8, .5), rgba(8, 20, 6, .66)), var(--tex-leaf) center / 760px auto repeat; color: var(--kolam); } .room--jasmine { color: var(--ink); background: radial-gradient(60% 50% at 50% 0%, rgba(227, 167, 47, .18), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23C49A4A' stroke-width='1' opacity='.35'%3E%3Cpath d='M32 8c9 8 15 14 24 24-9 10-15 16-24 24C23 48 17 42 8 32 17 22 23 16 32 8z'/%3E%3C/g%3E%3Cg fill='%23C49A4A' opacity='.45'%3E%3Ccircle cx='32' cy='32' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='64' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='64' r='1.6'/%3E%3Ccircle cx='64' cy='64' r='1.6'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #F7EFDF, #EEDFC2); } /* a jasmine fringe hangs from the top of every textured room */ .room--teak::before, .room--silk::before, .room--leaf::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: clamp(66px, 9vw, 120px); z-index: 3; pointer-events: none; background: url("../assets/images/home/jasmine.webp") repeat-x 0 0 / auto 100%; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .4)); } .story.room::before { z-index: 5; } .on-dark .section-title { color: #fffaf0; } .on-dark .section-intro { color: rgba(251, 246, 236, .84); } .on-dark .chapter { color: var(--gold-hi); } .on-dark .section-head::after, .events .section-head::after, .memories .section-head::after { background-image: var(--kolam-orn-gold); filter: none; opacity: 1; } .room--jasmine .chapter, .room--jasmine .profile__role { color: var(--rose); } .room--jasmine .section-title, .room--jasmine .likely__title, .room--jasmine .profile__name { color: var(--maroon); } /* Calendar on the teak wall */ .calendar__wrap { position: relative; z-index: 2; } .calendar__date { color: #fffaf0; } .calendar__note { color: var(--gold-hi); } .cal__head { background: linear-gradient(rgba(60, 4, 10, .35), rgba(60, 4, 10, .35)), var(--tex-silk) center / 220px auto; color: var(--gold-hi); box-shadow: inset 0 -3px 0 var(--turmeric), inset 0 3px 0 rgba(240, 207, 126, .6); letter-spacing: .08em; } .cal__num { color: var(--rose); } .cal__label { color: var(--teak); } .cal__sheet { box-shadow: 0 1px 0 #e3d6bb, 0 2px 0 #f6efe0, 0 3px 0 #e3d6bb, 0 4px 0 #f6efe0, 0 5px 0 #e0d2b5, 0 30px 40px -14px rgba(0, 0, 0, .7); } .cal__nail::after { filter: brightness(2.2); } .calendar__bells { display: none; } @media (min-width: 800px) { .calendar__bells { display: block; position: absolute; left: max(10px, calc(50% - 640px)); top: 0; width: clamp(110px, 12vw, 170px); transform-origin: 50% 0; animation: ring 5s ease-in-out infinite; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); z-index: 1; } } /* Album on red silk */ .story .album__cover .section-title { color: #fffaf0; } .moment__media { box-shadow: 0 2px 0 #e6dcc6, 0 30px 46px -18px rgba(0, 0, 0, .85); } .moment__year { color: var(--gold-hi); } /* Portraits on jasmine ivory: teak frames */ .profile__photo { background: linear-gradient(135deg, #5a3420, #2d180d 55%, #4a2a18); box-shadow: inset 0 0 0 2px rgba(240, 207, 126, .35), inset 0 0 0 6px #2d180d, inset 0 0 0 7px rgba(240, 207, 126, .4), 0 26px 36px -18px rgba(40, 18, 8, .65); } .profile__nick { background: var(--rose); color: #fffaf0; } .profile:nth-child(2) .profile__nick { background: var(--leaf); } .chips li { border-color: rgba(139, 30, 34, .4); color: var(--rose); } .chips li:hover { background: var(--rose); color: #fffaf0; } .flip__front { background: var(--grain), #FFFBF2; } .flip__front::before { border: 1px solid var(--brass); box-shadow: inset 0 0 0 3px #FFFBF2, inset 0 0 0 4px rgba(196, 154, 74, .5); } .flip__q { color: var(--maroon); } .flip__back { background: linear-gradient(rgba(60, 4, 10, .3), rgba(60, 4, 10, .5)), var(--tex-silk) center / 260px auto; } .flip:nth-child(3n+2) .flip__back { background: linear-gradient(rgba(10, 26, 8, .45), rgba(10, 26, 8, .6)), var(--tex-leaf) center / 400px auto; } .flip:nth-child(3n+3) .flip__back { background: linear-gradient(rgba(28, 12, 6, .35), rgba(28, 12, 6, .5)), var(--tex-teak) center / 400px auto; } /* Celebrations: invitation cards on a teak wall of bells */ .events.room--teak { background: repeating-linear-gradient(90deg, transparent 0 118px, rgba(240, 207, 126, .07) 118px 120px), repeating-linear-gradient(0deg, transparent 0 118px, rgba(240, 207, 126, .07) 118px 120px), linear-gradient(rgba(28, 12, 6, .5), rgba(28, 12, 6, .7)), var(--tex-teak) center / 760px auto repeat; } .days { background: rgba(251, 246, 236, .96); } .days a.is-active { background: linear-gradient(180deg, #ecca82, #b8893c); color: #3a1d12; } .event { --e-accent: #A86F14; } .event--nalungu2 { --e-accent: var(--rose); } .event--kalyanam { --e-bg: var(--maroon); } .event--kalyanam { background: linear-gradient(rgba(60, 4, 10, .55), rgba(40, 2, 6, .7)), var(--tex-silk) center / 300px auto; } .event--reception { --e-accent: var(--leaf); } .venue__links .btn { border-width: 1.5px; } .contacts__side { border-top: 4px solid var(--turmeric); } /* Wishlist on banana leaf: paper tags with brass eyelets, icons in brass medallions */ .wishlist .section-intro { color: rgba(251, 246, 236, .86); } .wish { background: var(--grain), #FFFBF2; } .wish::before { background: radial-gradient(circle at 40% 40%, #f3dca0, #9c7432); box-shadow: inset 0 0 0 3px #FFFBF2, 0 0 0 1.5px #9c7432; } .wish__icon { width: 66px; height: 66px; padding: 12px; border-radius: 50%; color: var(--maroon); background: radial-gradient(circle at 35% 30%, #fff1c9, #e3bf73 55%, #b0833a); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 6px 12px -6px rgba(0, 0, 0, .5); } .wish__name { color: var(--maroon); } .gift::after { display: none; } .gift__seal { position: absolute; top: 30px; left: 50%; width: 66px; height: 66px; margin-left: -33px; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c4473a, var(--rose) 60%, #5e1012); color: #fffaf0; font-family: var(--f-display); font-style: italic; font-size: 1rem; box-shadow: 0 0 0 4px rgba(139, 30, 34, .25), 0 6px 14px rgba(0, 0, 0, .35); } .gift { border-image: repeating-linear-gradient(45deg, var(--rose) 0 10px, var(--turmeric) 10px 20px) 10; } /* Guestbook: the notebook on red silk */ .guestbook__book { box-shadow: 0 2px 0 #e9dfc8, 0 4px 0 #f6f0e2, 0 6px 0 #e3d8bf, 0 50px 70px -40px rgba(0, 0, 0, .9); } .guestbook .section-head { position: relative; z-index: 4; } /* Memories on teak */ .memories .section-intro { color: rgba(251, 246, 236, .86); } .memories__tag { color: var(--gold-hi); } /* Footer */ .footer { background: var(--teak); } .footer__feast::after { background: linear-gradient(180deg, rgba(59, 35, 22, .1) 40%, var(--teak)); } /* ---------- 19 PLAYFUL PASS --------------------------------------- */ /* Light and heavy rooms alternate: paper, brown, jasmine, teak, turmeric, blush, leaf */ .room--paper { background: radial-gradient(70% 60% at 50% 30%, #FFFDF8, #F3E9D6); color: var(--ink); } .room--brown { background: #4A231C; color: var(--kolam); } .room--turmeric { background: radial-gradient(80% 60% at 50% 0%, #FFF4D9, #F6E2B2); color: var(--ink); } .room--blush { background: radial-gradient(80% 60% at 50% 0%, #FFF3EE, #F3D9D1); color: var(--ink); } .room--turmeric .section-title, .room--blush .section-title { color: var(--maroon); } .room--turmeric .chapter, .room--blush .chapter { color: var(--rose); } .room--turmeric .section-intro, .room--blush .section-intro { color: var(--muted); } /* ---- Hero: centred, with the kolam monogram */ .hero__content { top: 50%; transform: translate3d(0, calc(-50% + var(--hp) * -10vh), 0) scale(calc(1 - var(--hp) * .06)); } .hero__content::before { height: 150%; width: min(1100px, 150vw); } .mono { position: relative; width: clamp(150px, min(24vh, 38vw), 250px); aspect-ratio: 1; margin-bottom: clamp(6px, 1.6vh, 16px); transform: perspective(700px) rotateX(var(--my, 0deg)) rotateY(var(--mx, 0deg)) rotate(calc(var(--hp) * 45deg)); transition: transform .4s var(--ease-out); } .mono__kolam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px rgba(255, 240, 200, .7)) drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); } .mono__kolam .kolam__dots { fill: var(--gold-hi); opacity: 0; } .mono__kolam .kolam__lines { stroke: #fffaf0; stroke-width: 3.6; } .mono__kolam .kolam__lines path, .mono__kolam .kolam__lines circle { stroke-dasharray: 1; stroke-dashoffset: 1; } .is-entered .mono__kolam .kolam__dots { animation: fade .8s .9s forwards; } .is-entered .mono__kolam .kolam__lines path, .is-entered .mono__kolam .kolam__lines circle { animation: draw 1.1s var(--ease-silk) forwards; animation-delay: calc(1.1s + var(--s, 0) * 2.2s); } .mono__letters { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .04em; font-family: var(--f-display); font-style: italic; font-size: clamp(2.2rem, min(6.4vh, 10vw), 4rem); line-height: 1; color: var(--gold-hi); opacity: 0; transform: scale(.7); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); } .mono__letters i { font-family: var(--f-script); font-style: normal; font-size: .62em; color: #fffaf0; margin: 0 .04em; } .is-entered .mono__letters { animation: monoIn 1.2s 2.6s var(--ease-out) forwards; } @keyframes monoIn { to { opacity: 1; transform: none; } } .hero__names { margin: 6px 0 12px; } @media (max-height: 700px) { .mono { width: 120px; } .hero__eyebrow { display: none; } } /* ---- Calendar: a Tamil daily-calendar page */ .calendar { padding-block: clamp(70px, 10vw, 120px); } .calendar__wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: left; } .cal { position: relative; width: min(920px, 100%); margin: 26px 0 0; animation: none !important; } .cal__clip { position: absolute; z-index: 3; top: -26px; left: 50%; width: 120px; height: 44px; margin-left: -60px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #d7b46a, #8f6a2e); box-shadow: 0 6px 10px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .5); } .cal__clip::after { content: ""; position: absolute; left: 50%; top: 12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #5b3f19; box-shadow: inset 0 2px 2px rgba(0,0,0,.4); } .cal__stack { position: absolute; inset: 6px -4px -10px 4px; background: #f1ead9; box-shadow: 0 2px 0 #ddd3bd, 4px 6px 0 #ece3cf, 8px 12px 0 #e2d7bf, 0 30px 50px -20px rgba(58, 38, 32, .45); transform: rotate(1.2deg); } .cal__sheet { position: relative; z-index: 1; display: grid; gap: 0; padding: clamp(18px, 3vw, 30px); background: #fffdf6; color: #1b1b1f; font-family: var(--f-tamil), var(--f-sans); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); } .cal__sheet::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 8px; background: radial-gradient(circle at 6px 0, transparent 4px, #fffdf6 4.5px) 0 0 / 12px 8px repeat-x; } .cal__big { font-family: "Anton", "Impact", sans-serif; font-weight: 400; font-size: clamp(70.4px, 17vw, 176px); line-height: .9; letter-spacing: .01em; color: #18181c; display: flex; justify-content: center; gap: .08em; padding-bottom: 12px; border-bottom: 2px solid #18181c; } .cal__big i { font-style: normal; color: var(--rose); } .cal__body { display: grid; gap: 12px; padding-top: 14px; } .cal__boxes { display: grid; grid-template-columns: 1fr 1.25fr 1fr; border: 2px solid #18181c; } .cal__box { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px 6px; text-align: center; } .cal__box + .cal__box { border-left: 2px solid #18181c; } .cal__k { font-size: 11.84px; font-weight: 600; letter-spacing: .06em; color: #3a3a40; } .cal__n { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(41.6px, 9vw, 67.2px); line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums; } .cal__wk { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(25.6px, 5.6vw, 41.6px); line-height: 1; letter-spacing: .02em; } .cal__hms { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(22.4px, 5vw, 35.2px); line-height: 1; font-variant-numeric: tabular-nums; } .cal__quote { padding: 8px 4px; border-bottom: 1px solid #18181c; font-size: 15.68px; font-weight: 600; text-align: center; } .cal__neram { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 10px 14px; border: 2px solid #18181c; } .cal__neram b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 25.6px; color: var(--rose); } .cal__neram #cal-venue { grid-column: 1 / -1; font-size: 13.76px; color: #3a3a40; } .cal__side { margin-top: 12px; border: 2px solid #18181c; } .cal__side-title { padding: 6px 12px; background: #18181c; color: #fffdf6; font-weight: 700; text-align: center; letter-spacing: .06em; } .cal__forecast { display: grid; gap: 0; padding: 6px 12px; } .cal__forecast li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14.72px; border-bottom: 1px dotted rgba(0, 0, 0, .25); } .cal__forecast li:last-child { border-bottom: 0; } .cal__forecast b { font-weight: 700; color: var(--rose); } @media (min-width: 760px) { .cal__sheet { grid-template-columns: 1fr 240px; column-gap: 16px; } .cal__big { grid-column: 1 / -1; } .cal__side { margin-top: 14px; } } .cal__torn { position: absolute; z-index: 4; inset: 0; pointer-events: none; transform-origin: 50% 0; animation: tear 1.3s cubic-bezier(.4, 0, .6, 1) forwards; } @keyframes tear { 0% { transform: none; } 18% { transform: rotate(-2deg) translateY(4px); } 100% { transform: translate(var(--tx), 120vh) rotate(var(--tr)); opacity: .6; } } .cal__tear { min-height: 44px; padding: 8px 18px; border: 1.5px dashed var(--rose); border-radius: 99px; background: #fff; color: var(--rose); font-size: 12.48px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .cal__tear:hover { background: var(--rose); color: #fff; } .countdown__done { text-align: center; } /* ---- Album: polaroid collage on deep brown */ .story .album__cover .chapter { color: var(--gold-hi); } .album__track { gap: 0; } .album__list { gap: 0; padding-left: 4vw; } .moment { position: relative; width: min(62vw, 300px, 36vh); margin: 0 -18px; gap: 12px; transform: rotate(var(--r)) translateY(var(--y, 0)); z-index: 1; transition: transform .6s var(--ease-out), z-index 0s; } .moment--landscape { width: min(80vw, 430px, 62vh); } .moment:nth-child(odd) { --y: -7vh; } .moment:nth-child(even) { --y: 6vh; } .moment:hover { z-index: 3; transform: rotate(0) translateY(var(--y, 0)) scale(1.03); } .moment__media { padding: 12px 12px 54px; background: #fbf8f1; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .75); } .moment__media::before, .moment__media::after { display: none; } .moment__media img { filter: sepia(.28) saturate(.85) contrast(1.02) brightness(1.02); } .moment__cap { position: absolute; left: 14px; right: 14px; bottom: 10px; font-family: var(--f-script); font-size: 2.2rem; line-height: 1; color: var(--maroon); } .moment__body { padding: 0 10px; max-width: 26rem; } .moment__title { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; color: var(--gold-hi); } .moment__text { font-size: .84rem; color: rgba(251, 246, 236, .78); } .moment__year { display: none; } .album__end { margin-left: 6vw; } /* ---- Meet the couple: cut-outs on temple arches */ .profiles { gap: clamp(70px, 10vw, 110px); } .pc { display: grid; gap: 22px; justify-items: center; text-align: center; } .pc__stage { position: relative; width: min(19rem, 78vw); height: clamp(380px, 52vh, 520px); } .pc__arch { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; border-radius: 999px 999px 18px 18px; background: radial-gradient(circle, rgba(255, 255, 255, .55) 1.4px, transparent 1.8px) 0 0 / 22px 22px, linear-gradient(180deg, var(--arch-1), var(--arch-2)); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .35), inset 0 0 0 8px var(--arch-2), 0 24px 36px -20px rgba(58, 38, 32, .5); } .pc--1 { --arch-1: #6F8E52; --arch-2: #3E5B2C; } .pc--2 { --arch-1: #C24C45; --arch-2: #8B1E22; } .pc__cut { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 16px 18px rgba(40, 18, 8, .35)); } .pc__strand { position: absolute; top: 18%; width: 56px; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); } .pc--1 .pc__strand { left: -10px; } .pc--2 .pc__strand { right: -10px; transform: scaleX(-1); } .pc__nick { position: absolute; z-index: 3; bottom: 18px; right: -16px; padding: 6px 16px; border-radius: 99px; background: #fffaf0; color: var(--maroon); font-family: var(--f-script); font-size: 1.8rem; line-height: 1.1; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .4); transform: rotate(-6deg); } .pc--2 .pc__nick { right: auto; left: -16px; transform: rotate(5deg); } .pc__text { max-width: 28rem; } .beads { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .beads li { position: relative; padding: 6px 14px 6px 26px; border-radius: 99px; background: #fffaf0; box-shadow: 0 2px 0 rgba(58, 38, 32, .12); font-size: .86rem; color: var(--maroon); } .beads li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50% 50% 50% 0; background: #fff; box-shadow: 0 0 0 1.5px #d9cdb2; transform: rotate(-45deg); } @media (min-width: 768px) { .profiles { grid-template-columns: 1fr 1fr; } .pc--2 { margin-top: clamp(80px, 10vw, 140px); } .pc { grid-template-columns: 1fr; } } /* ---- Who is more likely: guess who */ .likely__score { margin-top: 10px; min-height: 1.5em; font-weight: 700; color: var(--leaf); } .likely__grid { gap: 18px; } .guess { position: relative; display: grid; gap: 14px; padding: 22px 20px 20px; border-radius: 22px; background: #fffaf0; box-shadow: 0 2px 0 rgba(58, 38, 32, .08), 0 22px 34px -24px rgba(58, 38, 32, .5); transition: transform .4s var(--ease-out), background .4s; } .guess:nth-child(3n+1) { background: #FFF3D6; } .guess:nth-child(3n+2) { background: #FDE7E2; } .guess:nth-child(3n+3) { background: #E9F1DD; } .guess__num { position: absolute; top: 14px; right: 18px; font-family: var(--f-display); font-style: italic; color: rgba(58, 38, 32, .35); } .guess__q { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--maroon); padding-right: 30px; } .guess__opts { display: flex; gap: 10px; } .guess__pick { flex: 1; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 16px; background: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 600; color: var(--ink); transition: transform .25s var(--ease-out), border-color .25s, background .25s; } .guess__pick:hover:not(:disabled) { transform: translateY(-3px) rotate(-1deg); border-color: var(--brass); } .guess__face { width: 54px; height: 54px; border-radius: 50%; background: var(--face) 50% 3% / 330% auto no-repeat, #f1e1c0; box-shadow: inset 0 0 0 2px #fff, 0 4px 8px -4px rgba(0, 0, 0, .4); } .guess__face--both { display: grid; place-items: center; background: linear-gradient(135deg, #C24C45, #6F8E52); color: #fff; font-size: 1.4rem; } .guess__pick:disabled { cursor: default; opacity: .55; } .guess__pick.is-answer { opacity: 1; border-color: var(--leaf); background: #fff; transform: scale(1.06); } .guess__pick.is-chosen:not(.is-answer) { opacity: 1; border-color: var(--rose); animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .guess__result { min-height: 1.4em; font-size: .9rem; color: var(--ink); } .guess__result b { color: var(--leaf); } .guess.is-wrong .guess__result b { color: var(--rose); } .guess__result i { display: block; color: var(--muted); } .guess.is-right { animation: pop .5s var(--ease-out); } @keyframes pop { 50% { transform: scale(1.03); } } /* ---- Celebrations: one simple card per day */ .event.day { display: grid; gap: 18px; padding: clamp(22px, 4vw, 34px); border-radius: 26px; background: #fffaf0; color: var(--ink); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); grid-template-columns: 1fr; } .event.day::before, .event.day::after { display: none; } .day__badge { display: flex; align-items: center; gap: 14px; } .day__badge img { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); } .day__num { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--day-c); } .day__mon { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .day--nalungu { --day-c: #B07A10; } .day--nalungu2 { --day-c: var(--rose); } .day--kalyanam { --day-c: var(--maroon); } .day--reception { --day-c: var(--leaf); } .day__label { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--day-c); } .day__name { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.1; color: var(--maroon); margin: 2px 0 8px; } .day__desc { font-size: .95rem; color: var(--muted); max-width: 40rem; margin-bottom: 16px; } .day__sides { display: grid; gap: 12px; } .side { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: #f6eee0; } .side--bride { background: #FBE4DF; } .side--groom { background: #E5EEDA; } .side--both { background: #FFF1CF; } .side__who { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .side--bride .side__who { color: var(--rose); } .side--groom .side__who { color: var(--leaf); } .side--both .side__who { color: #946100; } .side__time { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.1; color: var(--ink); } .side__place { font-weight: 600; line-height: 1.4; } .side__private { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); } .side__links { display: flex; gap: 8px; margin-top: 8px; } .side__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 99px; background: #fff; text-decoration: none; font-size: .8rem; font-weight: 600; color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); } .side__links a:hover { background: var(--maroon); color: #fff; } .side__links svg { width: 16px; height: 16px; } @media (min-width: 760px) { .event.day { grid-template-columns: 170px 1fr; gap: 28px; } .day__badge { flex-direction: column; align-items: flex-start; gap: 8px; } .day__badge img { width: 110px; height: 110px; } .day__sides--two { grid-template-columns: 1fr 1fr; } } /* ---- Need a hand: a family chat */ .contacts__grid.chat { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; } .bubble { display: flex; align-items: flex-end; gap: 10px; max-width: 34rem; } .bubble--bride { align-self: flex-start; } .bubble--groom { align-self: flex-end; flex-direction: row-reverse; } .bubble__av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-family: var(--f-display); font-size: 1.3rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); } .bubble--bride .bubble__av { background: var(--rose); } .bubble--groom .bubble__av { background: var(--leaf); } .bubble__body { padding: 14px 16px 12px; border-radius: 20px 20px 20px 6px; background: #fffaf0; color: var(--ink); box-shadow: 0 16px 26px -18px rgba(0, 0, 0, .7); } .bubble--groom .bubble__body { border-radius: 20px 20px 6px 20px; background: #EAF3DC; } .bubble__who { display: flex; flex-direction: column; } .bubble__who b { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; color: var(--maroon); } .bubble__who span { font-size: .76rem; color: var(--muted); } .bubble__msg { margin-top: 6px; font-size: .95rem; } .bubble__num { margin-top: 4px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; } .bubble__btns { display: flex; gap: 8px; margin-top: 10px; } .ibtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 99px; background: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); transition: transform .25s; } .ibtn img { width: 34px; height: 34px; } .ibtn:hover { transform: translateY(-2px); } .contacts__head .contacts__coffee { width: 120px; } /* ---- Wishlist: tiles with 3D icons */ .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 40px; } @media (min-width: 900px) { .wish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } } .tile { list-style: none; } .tile__btn { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; height: 100%; padding: 64px 14px 18px; border: 0; border-radius: 24px; text-align: center; background: #fffaf0; box-shadow: 0 2px 0 rgba(58, 38, 32, .08), 0 20px 30px -22px rgba(58, 38, 32, .55); transition: transform .35s var(--ease-out); } .tile:nth-child(4n+1) .tile__btn { background: #FFFBEF; } .tile:nth-child(4n+2) .tile__btn { background: #FDECE7; } .tile:nth-child(4n+3) .tile__btn { background: #EEF4E4; } .tile:nth-child(4n) .tile__btn { background: #FFF1CF; } .tile__btn:hover { transform: translateY(-6px) rotate(-1deg); } .tile__icon { position: absolute; top: -38px; left: 50%; width: 104px; height: 104px; margin-left: -52px; filter: drop-shadow(0 12px 12px rgba(58, 38, 32, .3)); transition: transform .4s var(--ease-out); } .tile__btn:hover .tile__icon { transform: translateY(-6px) rotate(6deg) scale(1.06); } .tile__name { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; color: var(--maroon); } .tile__note { font-size: .84rem; color: var(--muted); } .tile__heart { position: absolute; top: 12px; right: 14px; font-size: 1.2rem; color: rgba(139, 30, 34, .25); transition: color .3s, transform .3s; } .tile__btn[aria-pressed="true"] .tile__heart { color: var(--rose); animation: heart .5s var(--ease-out); } @keyframes heart { 40% { transform: scale(1.8); } } .wish { display: none; } /* ---- Digital gift: a moi envelope that opens */ .gift { display: block; margin: clamp(80px, 10vw, 120px) auto 0; padding: 0; max-width: 640px; background: none; border: 0; box-shadow: none; border-image: none; } .gift::before, .gift::after { display: none; } .env { position: relative; display: flex; flex-direction: column; align-items: stretch; } .env__letter { position: relative; z-index: 1; margin: 0 22px; padding: 26px clamp(18px, 4vw, 30px) 120px; border-radius: 14px 14px 0 0; background: #fffdf6; box-shadow: 0 -6px 20px -10px rgba(58, 38, 32, .3); max-height: 70px; overflow: hidden; transform: translateY(70px); transition: max-height 1s var(--ease-out), transform 1s var(--ease-out); } .env.is-open .env__letter { max-height: 900px; transform: none; } .gift__title { margin: 0 0 8px; font-family: var(--f-display); font-style: italic; font-size: 2rem; color: var(--maroon); } .gift__intro { color: var(--muted); } .gift__grid { display: grid; gap: 20px; margin-top: 16px; align-items: center; } @media (min-width: 640px) { .gift__grid { grid-template-columns: 1.3fr 1fr; } } .env__pocket { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; gap: 6px; height: 230px; margin-top: -110px; border: 0; border-radius: 16px; cursor: pointer; background: linear-gradient(160deg, #FFF8EA, #F1E1C2); box-shadow: inset 0 0 0 10px #fffaf0, inset 0 0 0 12px var(--rose), inset 0 0 0 16px #fffaf0, inset 0 0 0 18px var(--turmeric), 0 30px 46px -24px rgba(58, 38, 32, .6); } .env__flap { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(#F4E5C6, #EAD6AE); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .7s var(--ease-out); } .env.is-open .env__flap { transform: rotateX(180deg); opacity: .4; } .env__icon { position: relative; width: 84px; height: 84px; margin-top: 30px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); } .gift__seal { position: absolute; top: 88px; left: 50%; margin-left: -33px; } .env__icon { display: none; } .env__hint { margin-top: 70px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); } .env.is-open .env__hint { opacity: 0; } /* ---- Guestbook: a postcard and sticky notes */ .guestbook__book { display: block; max-width: 1100px; background: none; box-shadow: none; } .guestbook__book::after { display: none; } .wish-form { position: relative; max-width: 46rem; margin: 0 auto clamp(46px, 7vw, 70px); padding: clamp(26px, 5vw, 40px); border-radius: 6px; background: #fffdf6; box-shadow: 0 2px 0 rgba(58, 38, 32, .08), 0 30px 44px -26px rgba(58, 38, 32, .5); } .wish-form::before { content: ""; display: block; position: absolute; inset: 16px 16px auto auto; width: 70px; height: 84px; background: radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 8px 8px, url("../assets/images/icons/jasmine-heart.webp") center / 70% auto no-repeat, #8B1E22; border: 4px solid #fffdf6; outline: 1px dashed var(--rose); } .wish-form::after { display: none; } .wish-form__title { padding-right: 90px; } .wishes { columns: 1; column-gap: 22px; padding: 0; display: block; max-height: none; overflow: visible; } @media (min-width: 700px) { .wishes { columns: 2; } } @media (min-width: 1000px) { .wishes { columns: 3; } } .wishes .wish-card { break-inside: avoid; margin: 0 0 26px; } .wish-card { padding: 30px 22px 20px; border: 0; border-radius: 4px; background: #FFF3C9; transform: rotate(var(--r, -1deg)); box-shadow: 0 18px 26px -18px rgba(58, 38, 32, .55); } .wish-card:nth-child(4n+2) { background: #FFE1DA; --r: 1.2deg; } .wish-card:nth-child(4n+3) { background: #E6F0D8; --r: -.6deg; } .wish-card:nth-child(4n) { background: #FFFDF6; --r: .8deg; } .wish-card::before { content: ""; left: 50%; top: -10px; width: 80px; height: 22px; margin-left: -40px; background: rgba(226, 173, 56, .55); transform: rotate(-3deg); } .wish-card__text { font-size: 1.12rem; } /* ---- Memories */ .up-card__icon { width: 96px; height: 96px; margin: -10px auto 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); } /* ---------- 20 ENTRANCE, CALENDAR, ENVELOPE, CHALK ---------------- */ /* Opener: Paati's front door. .entrance is sized like the photo ("cover"), so the door leaves can be placed in % of the photo. Wide photo: 2400×1357. */ .intro { padding: 0; display: block; overflow: hidden; background: #2b1a10; } .entrance { --ar: 2400 / 1357; --L: 39%; --T: 21.7%; --W: 22.1%; --H: 54.4%; --mx: 50.06%; --my: 47.6%; position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 2400 / 1357)); aspect-ratio: var(--ar); transform: translate(-50%, -50%); perspective: 1400px; perspective-origin: 50% 45%; transition: transform 2.6s cubic-bezier(.6, 0, .2, 1) .9s, opacity 1s ease 2.2s; transform-origin: 50% 48%; } @media (max-aspect-ratio: 4/5) { .entrance { --ar: 1244 / 2200; --L: 30.5%; --T: 23.25%; --W: 38.9%; --H: 47.25%; --mx: 49.9%; --my: 44.08%; width: max(100vw, calc(100vh * 1244 / 2200)); } } .entrance picture, .entrance__scene { display: block; width: 100%; height: 100%; } .entrance__scene { object-fit: cover; } /* The doorway is cut out of the photo, so the real verandah (the hero, underneath) shows through as the doors open */ .entrance > picture { -webkit-mask: linear-gradient(#000 0 0) var(--mx) var(--my) / var(--W) var(--H) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .entrance__light { /* what's behind the door: warm morning light from inside the house */ position: absolute; left: var(--L); top: var(--T); width: var(--W); height: var(--H); background: transparent; box-shadow: inset 0 0 50px rgba(20, 10, 4, .65); pointer-events: none; } .leaf { position: absolute; top: var(--T); width: calc(var(--W) / 2); height: var(--H); transform-style: preserve-3d; will-change: transform; transition: transform 2.2s cubic-bezier(.62, 0, .2, 1) .35s; } .leaf--l { left: var(--L); transform-origin: 0 50%; } .leaf--r { left: calc(var(--L) + var(--W) / 2); transform-origin: 100% 50%; } .leaf__cut { position: absolute; inset: 0; overflow: hidden; } .leaf__cut picture { position: absolute; top: calc(var(--T) / var(--H) * -100%); height: calc(100% / var(--H) * 100%); width: calc(100% / var(--W) * 200%); } .leaf--l .leaf__cut picture { left: calc(var(--L) / var(--W) * -200%); } .leaf--r .leaf__cut picture { left: calc((var(--L) + var(--W) / 2) / var(--W) * -200%); } .leaf__img { width: 100%; height: 100%; object-fit: cover; } .leaf__shade { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s .35s; } .leaf--l .leaf__shade { background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.75)); } .leaf--r .leaf__shade { background: linear-gradient(270deg, rgba(0,0,0,.1), rgba(0,0,0,.75)); } .intro.is-opening { pointer-events: none; background: transparent; } .intro.is-opening .leaf--l { transform: rotateY(-96deg); } .intro.is-opening .leaf--r { transform: rotateY(96deg); } .intro.is-opening .leaf__shade { opacity: 1; } .intro.is-opening .entrance { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } .intro.is-opening .intro__panel, .intro.is-opening .intro__skip { opacity: 0; transition: opacity .5s; } /* The door is the button: it glows softly at the seam, and leans in a touch on hover */ .entrance { cursor: pointer; } .intro.is-playing .leaf--l { animation: doorBreathe 3.2s ease-in-out 1.2s infinite; } .intro.is-playing .leaf--r { animation: doorBreatheR 3.2s ease-in-out 1.2s infinite; } @keyframes doorBreathe { 50% { transform: rotateY(-4deg); } } @keyframes doorBreatheR { 50% { transform: rotateY(4deg); } } .intro.is-opening .leaf { animation: none; } .intro__skip { z-index: 4; } .intro__panel { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 70px var(--gutter) max(26px, env(safe-area-inset-bottom)); text-align: center; color: #fffaf0; background: linear-gradient(180deg, transparent, rgba(30, 14, 6, .72) 42%, rgba(30, 14, 6, .9)); display: flex; flex-direction: column; align-items: center; } .intro__welcome { font-size: .74rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); } .intro .intro__panel .intro__names { opacity: 1; transform: none; animation: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 .2em; margin: 4px 0 2px; font-family: var(--f-script); font-size: clamp(3rem, 9vw, 4.8rem); line-height: 1.05; color: transparent; background: linear-gradient(180deg, #fff6df, var(--gold-hi) 60%, #c79a45); -webkit-background-clip: text; background-clip: text; } .intro .intro__panel .intro__date { opacity: 1; transform: none; animation: none; margin-top: 0; font-size: .74rem; letter-spacing: .3em; color: #fffaf0; } .intro__hint-latch { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 20px 8px 12px; border: 1px solid rgba(240, 207, 126, .6); border-radius: 99px; background: rgba(30, 14, 6, .55); color: #fffaf0; font-size: .84rem; font-weight: 500; } .intro__hint-latch:hover { background: rgba(240, 207, 126, .2); } .intro__knock { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 0 rgba(240, 207, 126, .7); animation: knock 1.8s ease-out infinite; } @keyframes knock { 0% { box-shadow: 0 0 0 0 rgba(240, 207, 126, .7); } 100% { box-shadow: 0 0 0 12px rgba(240, 207, 126, 0); } } .intro__arrow { display: inline-block; color: var(--gold-hi); animation: nudgeL 1.4s ease-in-out infinite; } @keyframes nudgeL { 50% { transform: translateX(-6px); } } .intro__panel .intro__music { margin-top: 6px; } .intro__panel .switch { color: #fffaf0; } /* ---- Calendar: printed board + tear-off pad, as it hangs in every Tamil kitchen */ .cal-board { position: relative; width: min(940px, 100%); margin-top: 30px; padding: clamp(14px, 2.4vw, 22px); padding-top: 0; border-radius: 6px; background: linear-gradient(160deg, #9a2a24, #6e1418); box-shadow: inset 0 0 0 6px #6e1418, inset 0 0 0 8px #d9b25e, 0 30px 50px -24px rgba(58, 38, 32, .6); } .cal-board__nail { position: absolute; top: -22px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #555); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); } .cal-board__nail::after { content: ""; position: absolute; left: 50%; top: 7px; width: 130px; height: 24px; margin-left: -65px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 24' preserveAspectRatio='none'%3E%3Cpath d='M2 24 65 1 128 24' fill='none' stroke='%23555' stroke-width='1.3'/%3E%3C/svg%3E") center / 100% 100%; } .cal-board__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 10px 12px; color: #f3d58f; } .cal-board__mono { font-family: var(--f-display); font-style: italic; font-size: 25.6px; } .cal-board__mono i { font-family: var(--f-script); font-style: normal; margin: 0 .12em; } .cal-board__year { font-family: "Anton", sans-serif; font-size: 25.6px; letter-spacing: .08em; } .cal { width: 100%; margin: 0; } .cal__binding { position: absolute; z-index: 3; left: -2px; right: -2px; top: -6px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #d9d9d9, #8a8a8a 60%, #b5b5b5); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); } .cal__clip { display: none; } .cal__stack { inset: 4px -3px -8px 3px; transform: rotate(.6deg); background: #ece7da; box-shadow: 0 1px 0 #d8d1c0, 2px 3px 0 #e8e2d4, 3px 5px 0 #d6cfbe, 4px 7px 0 #e4ddcd, 0 20px 30px -14px rgba(0, 0, 0, .5); } .cal__sheet { background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(160, 130, 70, .14)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), #f6f2e7; color: #1c1c22; text-shadow: 0 0 .6px rgba(28, 28, 34, .55); } .cal__sheet::before { /* ragged stubs of yesterday's torn pages */ content: ""; top: 6px; height: 10px; background: radial-gradient(ellipse 7px 6px at 50% 0, #f6f2e7 60%, transparent 62%) 0 0 / 11px 10px repeat-x; } .cal__sheet::after { /* a soft curl at the bottom corner */ content: ""; position: absolute; right: 0; bottom: 0; width: 70px; height: 70px; pointer-events: none; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .08) 50%, #ece6d8 62%, #fbf8f0 100%); border-radius: 0 0 0 30px; } .cal__big { color: #141418; font-size: clamp(49.6px, 13.5vw, 168px); } .cal__sheet, .cal__body, .cal__boxes, .cal__box { min-width: 0; } @media (max-width: 480px) { .cal-board { padding-inline: 10px; } .cal__sheet { padding: 16px 14px; } .cal__box { padding: 8px 4px; } .cal__k { font-size: .66rem; } } .cal__slip { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: 100% 50%; font-size: 9.92px; font-weight: 700; letter-spacing: .08em; color: #2c5c9c; text-shadow: none; white-space: nowrap; } @media (max-width: 759px) { .cal__slip { display: none; } } /* ---- Moi envelope: red paper, scalloped flap, gold foil, printed liner */ .gift { max-width: 600px; } .env { --liner: url("../assets/images/home/tex-liner.webp"); --red: #8e1d22; --red-2: #74161b; position: relative; display: block; box-sizing: content-box; height: min(370px, 66vw); padding-top: 0; transition: padding-top 1s var(--ease-out); perspective: 1600px; } .env.is-open { padding-top: min(520px, 118vw); } .env__back, .env__front { position: absolute; left: 0; right: 0; bottom: 0; height: min(370px, 66vw); border-radius: 8px; } .env__back { z-index: 0; background: var(--liner) center top / 260px auto, var(--red-2); box-shadow: 0 34px 54px -26px rgba(58, 38, 32, .7); } .env__front { z-index: 2; pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(0, 0, 0, .14) 50%, transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(0, 0, 0, .14) 50%, transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat, var(--grain), linear-gradient(170deg, #a1262c, var(--red)); clip-path: polygon(0 9%, 50% 46%, 100% 9%, 100% 100%, 0 100%); } .env__letter { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 14px; margin: 0; max-height: calc(min(370px, 66vw) - 40px); transform: none; padding: 30px clamp(18px, 4vw, 28px) 40px; border-radius: 6px; overflow: hidden; color: #fdf8ec; background: linear-gradient(#5f7a52, #4e6844); box-shadow: inset 0 0 0 8px #5f7a52, inset 0 0 0 9px #e3c27a, 0 -10px 20px -10px rgba(0, 0, 0, .3); transition: max-height 1.1s var(--ease-out) .25s; } .env.is-open .env__letter { max-height: 1200px; } .env__letter .gift__title { color: #f6dc99; } .env__letter .gift__intro { color: rgba(253, 248, 236, .85); } .env__letter .gift__details dt { color: #f6dc99; } .env__letter .gift__details div { border-bottom-color: rgba(246, 220, 153, .35); } .env__letter .copy-btn { border-color: #f6dc99; color: #f6dc99; } .env__letter .gift__qr { background: #fff; border: 0; } .env__flap { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(min(370px, 66vw) * .38); height: calc(min(370px, 66vw) * .62); padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform-origin: 50% 0; transition: transform .9s var(--ease-out), z-index 0s .45s; } /* the flap hangs from the top edge of the envelope */ .env__flap { bottom: auto; top: auto; } .env__flap { position: absolute; bottom: calc(min(370px, 66vw) - min(370px, 66vw) * .62); width: 100%; } .env__flap-out, .env__flap-in { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V22C96 30 86 33 78 36C66 40 58 44 54 54Q50 62 46 54C42 44 34 40 22 36C14 33 4 30 0 22Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V22C96 30 86 33 78 36C66 40 58 44 54 54Q50 62 46 54C42 44 34 40 22 36C14 33 4 30 0 22Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; } .env__flap-out { display: grid; justify-items: center; align-content: start; padding-top: 9%; background: var(--grain), linear-gradient(175deg, #a8292f, #8e1d22 70%); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); } .env__flap-out::after { /* gold dotted scallop just inside the edge */ content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' preserveAspectRatio='none'%3E%3Cpath d='M3 22C7 29 15 31.5 23 34C35 38 44 42 48 51M97 22C93 29 85 31.5 77 34C65 38 56 42 52 51' fill='none' stroke='%23E9C77F' stroke-width='.6' stroke-dasharray='1.4 1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .env__flap-in { transform: rotateX(180deg); background: var(--liner) center / 220px auto, #f4ecdc; } .env__names { font-family: var(--f-script); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; background: linear-gradient(180deg, #fff0c4, #e3b968 55%, #b98a3c); -webkit-background-clip: text; background-clip: text; color: transparent; } .env__names i { font-style: normal; } .env__seal { position: absolute; left: 50%; bottom: 14%; width: 54px; height: 54px; margin-left: -27px; display: grid; place-items: center; grid-auto-flow: column; border-radius: 50%; font-family: var(--f-display); font-style: italic; font-size: .95rem; color: #5a1012; background: radial-gradient(circle at 35% 30%, #fff2c6, #e0b562 50%, #a9792f); box-shadow: 0 0 0 2px rgba(255, 240, 200, .5), 0 4px 10px rgba(0, 0, 0, .35); } .env__seal i { font-family: var(--f-script); font-style: normal; font-size: .8em; } .env__hint { position: absolute; left: 0; right: 0; top: calc(100% + min(370px, 66vw) * .42); transform: translateZ(1px); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f6dc99; } .env.is-open .env__flap { transform: rotateX(180deg); z-index: 0; } /* closed: the inside is plain red and the card waits out of sight, so no edge can peek through */ .env:not(.is-open) .env__back { background: var(--red-2); } .env__letter { visibility: hidden; transition: max-height 1.1s var(--ease-out) .25s, visibility 0s 1.2s; } .env.is-open .env__letter { visibility: visible; transition: max-height 1.1s var(--ease-out) .25s, visibility 0s; } .env__flap-in { visibility: hidden; transition: visibility 0s .4s; } .env.is-open .env__flap-in { visibility: visible; } .env.is-open .env__hint { opacity: 0; } .env__pocket, .env__icon, .gift__seal { display: none; } /* ---- Guestbook: wishes chalked on maroon, framed in kolam */ .room--chalk { color: #fbf4e6; background: radial-gradient(60% 40% at 20% 20%, rgba(120, 30, 30, .55), transparent 70%), radial-gradient(50% 50% at 80% 70%, rgba(40, 6, 8, .6), transparent 70%), var(--grain), #5a1416; } .room--chalk .section-head::after { background-image: none; height: 0; margin: 0; } .guestbook { padding-block: clamp(120px, 14vw, 180px); } .guestbook .wish-form { background: transparent; color: #fbf4e6; box-shadow: none; border: 2px dashed rgba(251, 244, 230, .55); border-radius: 10px; } .guestbook .wish-form::before { display: none; } .guestbook .wish-form__title { padding-right: 0; text-align: center; color: #fbf4e6; font-family: "Kalam", var(--f-script); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.4rem); } .guestbook .up-field__label { color: rgba(251, 244, 230, .8); font-family: "Kalam", var(--f-sans); letter-spacing: .06em; text-transform: none; font-size: .95rem; } .guestbook .up-field input, .guestbook .up-field textarea { background: rgba(255, 255, 255, .04); border: 0; border-bottom: 2px dashed rgba(251, 244, 230, .6); border-radius: 0; color: #fbf4e6; font-family: "Kalam", var(--f-sans); font-size: 1.1rem; } .guestbook .up-field textarea { border: 2px dashed rgba(251, 244, 230, .45); border-radius: 8px; } .guestbook .up-field input::placeholder, .guestbook .up-field textarea::placeholder { color: rgba(251, 244, 230, .45); } .guestbook .up-field__hint { color: rgba(251, 244, 230, .6); } .guestbook .up-send { --bg: transparent; --fg: #fbf4e6; --bd: #fbf4e6; box-shadow: none; color: #fbf4e6; font-family: "Kalam", var(--f-sans); letter-spacing: .08em; } .guestbook .up-send::before { background: #fbf4e6; } .guestbook .up-send:hover { color: #5a1416; } .guestbook .up-status { color: #f6dc99; } .guestbook .wish-card { background: transparent; box-shadow: none; transform: none; padding: 34px 26px 26px; border: 0; } .guestbook .wish-card::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; background: url("../assets/images/kolam-band.svg") center top / auto 26px no-repeat, url("../assets/images/kolam-band.svg") center bottom / auto 26px no-repeat; opacity: .8; } .guestbook .wish-card::after { content: ""; position: absolute; inset: 18px 0; border-left: 2px dotted rgba(251, 244, 230, .4); border-right: 2px dotted rgba(251, 244, 230, .4); pointer-events: none; } .guestbook .wish-card__text { font-family: "Kalam", var(--f-display); font-style: normal; font-weight: 300; font-size: 1.22rem; line-height: 1.55; color: #fbf4e6; text-shadow: 0 0 1px rgba(255, 255, 255, .7), 0 0 6px rgba(255, 255, 255, .15); } .guestbook .wish-card__name { font-family: "Kalam", var(--f-script); font-weight: 400; font-size: 1.3rem; color: #f6dc99; } .guestbook .wish-card__rel { color: rgba(251, 244, 230, .65); } /* ---- Memories on light paper */ .memories.room--paper .chapter { color: var(--rose); } .memories.room--paper .section-title { color: var(--maroon); } .memories.room--paper .section-intro { color: var(--muted); } .memories.room--paper .memories__tag { color: var(--rose); } .memories.room--paper .memories__buttons .btn { --fg: var(--maroon); --bd: var(--maroon); --bg-hover: #fff; } .memories.room--paper .share-steps { background: #fff; border-color: var(--line); color: var(--ink); } .memories.room--paper .share-steps__title { color: var(--rose); } .memories.room--paper .qr-card figcaption, .memories.room--paper .wall__title { color: var(--maroon); } .memories.room--paper::before { display: none; } /* ---------- 21 HERO: THE COUPLE ON THE SWING --------------------- */ /* The two of them sit on the oonjal in the upper half; their names sit just below, on the floor */ /* shown at natural size so the couple stay small; scrolling walks gently toward the swing */ .hero__photo img { object-position: 50% 50%; transform-origin: 50% 55%; transform: scale(calc(1.02 + var(--hp) * .2)); } .hero__shade { background: linear-gradient(180deg, rgba(30, 14, 8, .45) 0%, transparent 22%, transparent 56%, rgba(30, 14, 8, .55) 88%, rgba(30, 14, 8, .7) 100%); } .hero__content { top: auto; bottom: 10vh; transform: translate3d(0, calc(var(--hp) * -6vh), 0); } .hero__content::before { top: 55%; height: 170%; } .hero__names { font-size: clamp(3rem, min(10vw, 10svh), 6.6rem); margin: 4px 0 10px; } .hero__urli { display: none !important; } .hero__welcome { top: auto; bottom: 16vh; } .scroll-cue { bottom: 12px; } @media (max-aspect-ratio: 4/5) { .hero__content { bottom: 5vh; } .scroll-cue { display: none; } .hero__names { font-size: clamp(2.8rem, 13vw, 4rem); line-height: 1; } .hero__floor { bottom: -12vh; } } @media (max-height: 640px) { .hero__eyebrow { display: none; } } /* ---------- 22 HERO DATE BLOCK ------------------------------------- */ .hero__amp { font-family: var(--f-script); font-style: normal; color: var(--gold-hi); font-size: .8em; } .when { display: grid; justify-items: center; gap: 6px; margin-top: 2px; color: #fffaf0; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); } .when__month { display: flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-hi); padding-left: .38em; } .when__month::before, .when__month::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); } .when__month::after { transform: scaleX(-1); } .when__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(360px, 82vw); } .when__row span { padding: 6px 0; border-top: 1px solid rgba(240, 207, 126, .6); border-bottom: 1px solid rgba(240, 207, 126, .6); font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; } .when__row span:first-child { text-align: right; padding-right: 16px; } .when__row span:last-child { text-align: left; padding-left: 16px; } .when__row b { font-family: var(--f-display); font-weight: 400; font-size: 3.4rem; line-height: 1; padding: 0 4px; } .when__venue { display: block; max-width: min(34rem, 90vw); text-align: center; text-wrap: balance; margin-top: 4px; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; } .when__venue::before { content: ""; display: inline-block; vertical-align: -1px; margin-right: 7px; width: 13px; height: 13px; background: var(--gold-hi); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Zm0-9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Zm0-9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 480px) { .when__row b { font-size: 2.8rem; } .when__venue { font-size: .92rem; text-align: center; max-width: 92vw; } } .intro .intro__panel .intro__name { padding: 0 .18em; } .hero .scroll-cue { display: none; } /* Wide screens use the same scene, expanded sideways (AI outpaint) so it fills the width */ @media (min-aspect-ratio: 4/5) { .hero__photo img { object-position: 50% 55%; } .hero__jasmine { display: none; } .hero__floor { width: min(70vw, 80vh); } } @media (min-width: 900px) { .when__row { width: 400px; } .when__row span { font-size: .8rem; } .when__row b { font-size: 3.8rem; } .when__venue { font-size: 1.2rem; } .hero__content::before { height: 200%; top: 50%; } } /* ---------- 23 CALENDAR: A REAL DAILY-SHEET -------------------------- */ /* Black ink on off-grey newsprint, torn off the pad and pinned to a lime-plastered wall */ .calendar.room--paper { background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .35), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 600px 600px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), #E9E3D6; } .cal-board { --ink: #1b1b1b; background: none; box-shadow: none; padding: 0; width: min(800px, 100%); transform: rotate(-.8deg); } .cal-board__top, .cal-board__nail, .cal__binding, .cal__stack { display: none; } .cal { filter: drop-shadow(0 16px 18px rgba(40, 32, 24, .26)) drop-shadow(0 1px 2px rgba(40, 32, 24, .3)); } .cal__sheet { font-family: var(--f-sans); color: var(--ink); text-shadow: 0 0 .45px rgba(20, 20, 20, .8); padding: clamp(32px, 4vw, 42px) clamp(16px, 3vw, 26px) clamp(18px, 3vw, 24px); background: linear-gradient(96deg, transparent 49.6%, rgba(60, 55, 45, .09) 50%, rgba(255, 255, 255, .45) 50.35%, transparent 51%), linear-gradient(181deg, transparent 63.5%, rgba(60, 55, 45, .08) 64%, rgba(255, 255, 255, .4) 64.35%, transparent 65%), radial-gradient(35% 25% at 82% 88%, rgba(150, 120, 70, .13), transparent 70%), radial-gradient(25% 20% at 12% 18%, rgba(150, 120, 70, .08), transparent 70%), radial-gradient(120% 100% at 50% 50%, transparent 65%, rgba(90, 85, 75, .14)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .28 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), #DEDBD3; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l8 2 7-4 9 3 6-2 10 4 8-3 7 2 9-4 6 3 11-1 7 3 8-4 10 2 6-1 9 4 7-3 10 2 8-4 6 3 11-2 7 3 9-3 8 2 6-4 10 3 7-1 9 4 6-3 10 1 8-2 7 4 9-3 6 2 10-3 8 3 7-2 9 3 6-4 10 3 7-1 8 4 9-3 6 2 9-2V14Z'/%3E%3C/svg%3E") top / 100% 14px no-repeat, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l8 2 7-4 9 3 6-2 10 4 8-3 7 2 9-4 6 3 11-1 7 3 8-4 10 2 6-1 9 4 7-3 10 2 8-4 6 3 11-2 7 3 9-3 8 2 6-4 10 3 7-1 9 4 6-3 10 1 8-2 7 4 9-3 6 2 10-3 8 3 7-2 9 3 6-4 10 3 7-1 8 4 9-3 6 2 9-2V14Z'/%3E%3C/svg%3E") top / 100% 14px no-repeat, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; } .cal__sheet::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 18px; background: radial-gradient(ellipse 8px 7px at 9% 45%, #b8b1a3 0 55%, rgba(60, 50, 40, .5) 70%, transparent 100%), radial-gradient(ellipse 8px 7px at 91% 45%, #b8b1a3 0 55%, rgba(60, 50, 40, .5) 70%, transparent 100%); } .cal__sheet::after { background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .08) 50%, #cfccc4 62%, #e8e6e0 100%); } .cal__big { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 600; font-style: normal; color: var(--ink); border: 0; padding: 0 0 4px; line-height: .95; font-size: clamp(3.4rem, 14vw, 9.5rem); letter-spacing: -.01em; text-shadow: 0 0 1px rgba(20, 20, 20, .7); font-variant-numeric: lining-nums; } .cal__n, .cal__hms { font-variant-numeric: lining-nums tabular-nums; } .cal__big i { color: var(--ink); font-style: normal; } .cal__quote { grid-column: 1 / -1; margin: 0 0 12px; padding: 6px 4px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 16px; text-align: center; color: var(--ink); } .cal__body { padding-top: 0; gap: 10px; } .cal__boxes { border: 1.5px solid var(--ink); } .cal__box + .cal__box { border-left: 1.5px solid var(--ink); } .cal__k { font-family: var(--f-sans); font-size: 11.52px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .cal__n { font-family: var(--f-display); font-weight: 600; font-size: clamp(41.6px, 8vw, 57.6px); color: var(--ink); } .cal__wk { font-family: var(--f-display); font-weight: 600; font-size: clamp(22.4px, 4.4vw, 32px); line-height: 1.05; color: var(--ink); } .cal__wd { font-family: var(--f-display); font-style: italic; font-size: clamp(16px, 3vw, 20px); color: var(--ink); } .cal__hms { font-family: var(--f-display); font-weight: 600; font-size: clamp(22.4px, 4.4vw, 32px); color: var(--ink); } .cal__neram { display: block; padding: 0 2px; border: 0; font-size: 14.72px; line-height: 1.55; color: var(--ink); } .cal__neram b { font-family: var(--f-sans); font-size: 14.72px; font-weight: 700; color: var(--ink); } .cal__neram span { color: var(--ink); } .cal__table { width: 100%; border-collapse: collapse; font-size: 13.76px; color: var(--ink); } .cal__table td { padding: 4px 8px; border: 1px solid var(--ink); } .cal__table td:first-child { white-space: nowrap; font-weight: 600; width: 1%; } .cal__table td:last-child { white-space: nowrap; text-align: right; width: 1%; } .cal__side { border: 1.5px solid var(--ink); } .cal__side-title { background: none; color: var(--ink); border-bottom: 1.5px solid var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 16.8px; letter-spacing: 0; padding: 6px 10px; } .cal__forecast li { border-bottom: 1px dotted rgba(27, 27, 27, .4); color: var(--ink); font-size: 14.4px; } .cal__forecast b { color: var(--ink); font-weight: 600; } .cal__slip { color: var(--ink); opacity: .7; } .cal-board .countdown__done { color: var(--ink); } @media (min-width: 760px) { .cal__sheet { grid-template-columns: 1fr 224px; column-gap: 16px; } .cal__side { margin-top: 0; } } /* ---------- 24 CALENDAR: REAL TEXTURES, BOLD DATE, MUHURTHAM PANEL --- */ .calendar.room--paper { background: radial-gradient(80% 70% at 50% 40%, transparent 55%, rgba(80, 60, 30, .18)), url("../assets/images/home/tex-plaster.webp") center / 900px auto repeat, #E9E1D0; } .cal__sheet { background: linear-gradient(96deg, transparent 49.6%, rgba(60, 55, 45, .1) 50%, rgba(255, 255, 255, .4) 50.35%, transparent 51%), radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(90, 85, 75, .16)), url("../assets/images/home/tex-paper.webp") center / 640px auto repeat, #d9d6ce; } .cal__big { font-family: "Anton", "Impact", "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: .005em; line-height: .9; font-size: clamp(4rem, 17vw, 11.5rem); text-shadow: 0 0 1.2px rgba(20, 20, 20, .75); padding-bottom: 6px; } .cal__neram { display: grid; grid-template-columns: auto 1fr; padding: 0; border: 1.5px solid var(--ink); font-size: inherit; } .cal__neram-time, .cal__neram-place { display: grid; align-content: center; gap: 2px; padding: 10px 14px; } .cal__neram-time { border-right: 1.5px solid var(--ink); text-align: center; } .cal__neram-time b { font-family: "Anton", "Impact", sans-serif; font-weight: 400; font-size: 32px; line-height: 1; color: var(--ink); } .cal__neram-place #cal-venue { font-family: var(--f-display); font-size: 16.8px; line-height: 1.35; color: var(--ink); } @media (max-width: 480px) { .cal__neram { grid-template-columns: 1fr; } .cal__neram-time { border-right: 0; border-bottom: 1.5px solid var(--ink); } } /* ---------- 25 CALENDAR: BRIGHTER PAPER + A QUIET WEDDING MARK ------- */ .cal { position: relative; } .cal__sheet { background: /* bottom corners dipped in turmeric, as on a wedding invitation */ radial-gradient(56px 50px at 0 100%, rgba(226, 158, 18, .9) 32%, rgba(226, 158, 18, .4) 60%, transparent 80%), radial-gradient(56px 50px at 100% 100%, rgba(226, 158, 18, .9) 32%, rgba(226, 158, 18, .4) 60%, transparent 80%), linear-gradient(96deg, transparent 49.6%, rgba(60, 55, 45, .08) 50%, rgba(255, 255, 255, .5) 50.35%, transparent 51%), linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)), url("../assets/images/home/tex-paper.webp") center / 640px auto repeat, #eceae4; } .cal { filter: drop-shadow(0 22px 24px rgba(40, 28, 16, .38)) drop-shadow(0 2px 3px rgba(40, 28, 16, .35)); } /* A big pulli kolam printed faintly in red ink across the sheet */ .cal__sheet { background: url("../assets/images/wm-kolam.svg") 50% 58% / min(118%, 900px) auto no-repeat, radial-gradient(56px 50px at 0 100%, rgba(226, 158, 18, .9) 32%, rgba(226, 158, 18, .4) 60%, transparent 80%), radial-gradient(56px 50px at 100% 100%, rgba(226, 158, 18, .9) 32%, rgba(226, 158, 18, .4) 60%, transparent 80%), linear-gradient(96deg, transparent 49.6%, rgba(60, 55, 45, .08) 50%, rgba(255, 255, 255, .5) 50.35%, transparent 51%), linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)), url("../assets/images/home/tex-paper.webp") center / 640px auto repeat, #eceae4; } @media (max-width: 760px) { .cal__sheet { background-size: 135% auto, auto, auto, auto, auto, 640px auto, auto; background-position: 50% 45%, 0 0, 0 0, 0 0, 0 0, center, 0 0; } } /* ---------- 26 CALENDAR: ALWAYS LANDSCAPE --------------------------- */ /* The sheet is laid out at a fixed 800px width (like the printed original) and js/main.js shrinks it with `zoom` to fit narrower screens, so phones see the same landscape sheet. */ .calendar .cal-board { width: 800px; max-width: none; padding: 0; } .calendar .cal-board .cal__sheet { grid-template-columns: 1fr 224px; column-gap: 16px; padding: 40px 26px 24px; background-size: min(118%, 900px) auto, auto, auto, auto, auto, 640px auto, auto; background-position: 50% 58%, 0 0, 0 0, 0 0, 0 0, center, 0 0; } .calendar .cal-board .cal__big { font-size: 152px; } .calendar .cal-board .cal__box { padding: 10px 6px; } .calendar .cal-board .cal__k { font-size: 11.52px; } .calendar .cal-board .cal__n { font-size: 54.4px; } .calendar .cal-board .cal__wk, .calendar .cal-board .cal__hms { font-size: 30.4px; } .calendar .cal-board .cal__wd { font-size: 19.2px; } .calendar .cal-board .cal__neram { grid-template-columns: auto 1fr; } .calendar .cal-board .cal__neram-time { border-right: 1.5px solid var(--ink); border-bottom: 0; } .calendar .cal-board .cal__side { margin-top: 0; } .calendar .cal-board .cal__slip { display: block; } .calendar .calendar__wrap { align-items: center; } /* ---------- 27 LOVE STORY: PHOTOS HUNG ON JASMINE STRINGS ----------- */ /* Each print hangs on its own string threaded with jasmine buds, at its own height, size and tilt, and sways gently at its own pace. */ .story .album__track { gap: clamp(60px, 7vw, 110px); align-items: center; } .story .album__list { position: relative; align-items: flex-start; gap: clamp(46px, 5.5vw, 90px); padding: 0 6vw 0 2vw; } .story .moment { position: relative; margin: 0; width: min(66vw, 270px, 29vh); gap: 0; transform: translateY(var(--drop, 0)) scale(var(--size, 1)); transform-origin: 50% -70vh; animation: none; } .story .moment--landscape { width: min(82vw, 400px, 48vh); } .story .moment:nth-child(5n+1) { --drop: 2vh; --size: 1; --sway: 6.4s; } .story .moment:nth-child(5n+2) { --drop: 11vh; --size: .94; --sway: 7.2s; } .story .moment:nth-child(5n+3) { --drop: -2vh; --size: 1.04; --sway: 5.8s; } .story .moment:nth-child(5n+4) { --drop: 8vh; --size: .97; --sway: 6.9s; } .story .moment:nth-child(5n+5) { --drop: 0vh; --size: 1.02; --sway: 6.1s; } .story .moment.is-swaying { animation: sway var(--sway, 6s) ease-in-out infinite alternate; } @keyframes sway { from { rotate: -.9deg; } to { rotate: .9deg; } } /* the string, with jasmine buds threaded along it, disappearing up out of frame */ .story .moment::before { content: ""; position: absolute; z-index: 0; bottom: calc(100% - 4px); left: 50%; width: 10px; height: 80vh; margin-left: -5px; pointer-events: none; background: radial-gradient(ellipse 4px 5.5px at 50% 50%, #fffaf0 60%, transparent 100%) 50% 100% / 10px 30px repeat-y, radial-gradient(circle 1.6px at 50% 50%, #7a9a52 80%, transparent 100%) 50% calc(100% - 15px) / 10px 30px repeat-y, linear-gradient(#cbb894, #cbb894) center / 1.5px 100% no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); } .story .album__list::before { display: none; } .story .moment__media { z-index: 1; transform: rotate(var(--r, 0deg)); transform-origin: 50% 0; transition: transform .8s var(--ease-out); } .story .moment:hover .moment__media { transform: rotate(calc(var(--r, 0deg) * -1)); } /* a small knot of jasmine where the string meets the photo */ .story .moment__media::before { content: ""; display: block; position: absolute; z-index: 2; top: -12px; left: 50%; width: 26px; height: 20px; margin-left: -13px; clip-path: none; border-radius: 50%; background: radial-gradient(ellipse 5px 6px at 30% 55%, #fffaf0 60%, transparent 100%), radial-gradient(ellipse 5px 6px at 70% 55%, #fffaf0 60%, transparent 100%), radial-gradient(ellipse 5px 6px at 50% 30%, #fffdf6 60%, transparent 100%), radial-gradient(circle 3px at 50% 62%, #c0392b 70%, transparent 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); box-shadow: none; } .story .moment__media::after { display: none; } /* the story, on a note tucked under a corner of the photo */ .story .moment__body { position: relative; z-index: 2; width: 92%; margin-top: 12px; padding: 16px 18px 18px; background: #f6efe0; color: var(--ink); border-radius: 2px; box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .7); transform: rotate(var(--nr, 2deg)); } .story .moment:nth-child(odd) .moment__body { margin-left: 14%; --nr: 2.4deg; } .story .moment:nth-child(even) .moment__body { margin-left: -6%; --nr: -2deg; } .story .moment:nth-child(3n) .moment__body { background: #f3e6cf; } .story .moment__body::before { content: ""; position: absolute; top: -9px; left: 22px; width: 58px; height: 18px; margin: 0; background: rgba(226, 173, 56, .55); transform: rotate(-6deg); } .story .moment:nth-child(even) .moment__body::before { left: auto; right: 22px; transform: rotate(5deg); } .story .moment__title { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--maroon); margin: 0 0 6px; } .story .moment__text { font-size: .9rem; line-height: 1.6; color: var(--ink); display: block; -webkit-line-clamp: unset; overflow: visible; } @media (max-height: 760px) { .story .moment { width: min(66vw, 230px, 26vh); } .story .moment--landscape { width: min(82vw, 340px, 42vh); } .story .moment__text { font-size: .84rem; } } .story .album__cover, .story .album__end { align-self: center; } /* Story text sits straight on the album page, no card */ .story .moment__body { width: 100%; margin: 18px 0 0; padding: 0 4px; background: none; box-shadow: none; transform: none; border-radius: 0; } .story .moment:nth-child(n) .moment__body { margin-left: 0; background: none; } .story .moment__body::before, .story .moment:nth-child(even) .moment__body::before { display: none; } .story .moment__title { color: var(--gold-hi); font-size: 1.2rem; margin-bottom: 6px; } .story .moment__text { color: rgba(251, 246, 236, .86); font-size: .92rem; line-height: 1.65; } /* ---------- 28 SECTION RHYTHM: ONE LIGHT WALL, ONE DEEP BROWN ------- */ /* Light rooms share one plaster wall; dark rooms share one deep brown. Every join is stitched with a Kanchipuram "temple border": gold gopuram triangles woven on maroon. */ .room--teak::before, .room--silk::before, .room--leaf::before { display: none; } .couple.room--jasmine, .wishlist.room--turmeric, .memories.room--paper { background: linear-gradient(rgba(250, 246, 238, .5), rgba(250, 246, 238, .5)), url("../assets/images/home/tex-plaster.webp") center / 900px auto repeat, #EDE4D2; } .story.room--brown, .events.room--teak { background: var(--grain), #3F1E17; } .couple .hang { display: none; } .hero__fade { background: #3F1E17; } /* Kolam borders drawn in rice flour along the edges of the dark rooms; they draw themselves in */ .story, .events, .footer { position: relative; } .kedge { position: absolute; z-index: 6; left: 0; right: 0; height: clamp(30px, 3.4vw, 44px); pointer-events: none; color: #F3EBDD; opacity: .85; } .kedge--top { top: clamp(14px, 2vw, 26px); } .kedge--bottom { bottom: clamp(14px, 2vw, 26px); } .kedge svg { display: block; width: 100%; height: 100%; overflow: visible; } .kedge .kedge__dots { fill: currentColor; } .kedge .kedge__lines { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .kedge use { stroke-dasharray: 1; stroke-dashoffset: 1; } .kedge.is-drawn use { animation: draw 1.1s var(--ease-silk) forwards; animation-delay: var(--d, 0s); } .footer .kedge--top { top: 8px; } /* ---------- 29 CALENDAR ROOM: WOVEN LINEN WITH MAROON BORDERS -------- */ .calendar.room--paper { padding-block: clamp(120px, 13vw, 170px); background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .06) 0 1px, transparent 1px 3px), var(--grain), #EEE6D8; } .calendar.room--paper::before, .calendar.room--paper::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 64px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64' viewBox='0 0 48 64' fill='none' stroke='%238E2A22' stroke-linecap='round'%3E %3Cpath d='M0 2.5H48' stroke-width='3'/%3E %3Cpath d='M0 15C6 6 18 6 24 15C30 24 42 24 48 15' stroke-width='2.4'/%3E %3Ccircle cx='12' cy='19' r='2.2' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='36' cy='11' r='2.2' fill='%238E2A22' stroke='none'/%3E %3Cpath d='M0 29H48' stroke-width='3.4'/%3E %3Cpath d='M0 32A12 11 0 0 0 24 32A12 11 0 0 0 48 32' stroke-width='2.4'/%3E %3Ccircle cx='12' cy='50' r='4.6' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='12' cy='59' r='2.6' fill='%238E2A22' stroke='none'/%3E %3Ccircle cx='36' cy='50' r='4.6' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='36' cy='59' r='2.6' fill='%238E2A22' stroke='none'/%3E %3C/svg%3E") center top / 48px 64px repeat-x; } .calendar.room--paper::before { top: 22px; } .calendar.room--paper::after { bottom: 22px; transform: scaleY(-1); } .hero__fade { background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .06) 0 1px, transparent 1px 3px), var(--grain), #EEE6D8 !important; } /* No blank screen between hero and calendar: the photo stays until the calendar slides up over it */ .hero__fade { display: none !important; } .hero { height: 200vh; height: 200svh; } /* Love story: deep mottled oxblood wall */ .story.room--brown { background: url("../assets/images/home/tex-maroon.webp") center / cover, #4A1010; } /* ---------- 30 MEET THE TWO OF US: BIO-DATA SHEETS ON A KORAI MAT ---- */ .couple.room--jasmine { --type: "Courier Prime", "Courier New", monospace; /* warm sand linen (a cousin of the calendar room) with a faint pulli-kolam dot grid */ background: radial-gradient(90% 70% at 50% 35%, rgba(255, 248, 232, .45), transparent 70%), radial-gradient(circle, rgba(142, 42, 34, .16) 1.3px, transparent 1.8px) 0 0 / 30px 30px, repeating-linear-gradient(0deg, rgba(110, 85, 50, .08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110, 85, 50, .07) 0 1px, transparent 1px 3px), var(--grain), #E3D3B6; } .couple .section-title, .couple .likely__title { color: #4A1012; text-shadow: 0 1px 0 rgba(255, 236, 190, .5); } .couple .section-intro, .couple .likely__hint { color: #3B2316; } @media (max-width: 600px) { .couple .bd__sheet { padding-top: 52px; } .couple .bd__role { top: 14px; } } .couple .chapter { color: #7A1F1A; } .couple .profiles { display: grid; gap: clamp(48px, 8vw, 70px); max-width: 1080px; margin-inline: auto; } @media (min-width: 900px) { .couple .profiles { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(36px, 4vw, 56px); } .bd--2 { margin-top: 70px; } } .bd__sheet { position: relative; padding: 30px clamp(20px, 4vw, 34px) 36px; color: #1b1b1b; font-family: var(--type); background: linear-gradient(rgba(255, 253, 246, .55), rgba(255, 253, 246, .55)), url("../assets/images/home/tex-paper.webp") center / 700px auto, #F4EDDC; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 26px 40px -18px rgba(40, 20, 6, .55); transform: rotate(var(--tilt, -1.6deg)); } .bd--2 .bd__sheet { --tilt: 1.4deg; } /* old fold lines */ .bd__sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 33%, rgba(90, 60, 30, .08) 33.3%, rgba(255, 255, 255, .25) 33.6%, transparent 34%, transparent 66%, rgba(90, 60, 30, .08) 66.3%, rgba(255, 255, 255, .25) 66.6%, transparent 67%); } .bd__invoke { text-align: center; font-size: .78rem; letter-spacing: .12em; color: #7A1F1A; } .bd__title { margin-top: 6px; text-align: center; font-family: var(--type); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; } .bd__role { position: absolute; top: 18px; left: clamp(16px, 3vw, 26px); font-family: "Kalam", var(--f-sans); font-size: 1.15rem; color: #8B1E22; transform: rotate(-6deg); } .bd__top { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; } .bd__top .bd__rows { align-self: center; margin-top: 18px; } .bd__rows { grid-template-columns: 9.5em 1fr !important; } .bd__photo { position: relative; width: clamp(100px, 24vw, 128px); aspect-ratio: 4 / 5; margin: 22px 0 0; padding: 6px 6px 16px; background: #fbf8f1; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45); transform: rotate(3deg); } .bd--2 .bd__photo { transform: rotate(-2.5deg); } .bd__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: sepia(.25) contrast(1.04) saturate(.9); background: radial-gradient(ellipse at 50% 30%, #C9D6D9, #8FA7AE); } .bd--2 .bd__photo img { background: radial-gradient(ellipse at 50% 30%, #E4C9BF, #B98D82); } /* the cut-out is full length; zoom in to head and shoulders */ .bd__photo { overflow: hidden; } .bd__photo img { transform: scale(1.9); transform-origin: 50% 2%; } .bd__clip { position: absolute; z-index: 2; top: -10px; left: 22%; width: 16px; height: 46px; border: 2.5px solid #9a9a9a; border-radius: 8px; border-bottom-color: transparent; box-shadow: 1px 1px 1px rgba(0, 0, 0, .2); } .bd__clip::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 26px; border: 2.5px solid #b5b5b5; border-top: 0; border-radius: 0 0 6px 6px; } .bd__rows { display: grid; grid-template-columns: auto 1fr; gap: 12px 10px; margin-top: 24px; font-size: .92rem; line-height: 1.55; } .bd__rows dt { font-weight: 700; white-space: nowrap; } .bd__rows dt::after { content: " :"; } .bd__rows dd { margin: 0; } .bd__name { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .bd__stamp { clear: both; display: table; margin: 26px 0 0 auto; padding: 8px 14px; border: 3px double rgba(166, 28, 28, .8); border-radius: 6px; color: rgba(166, 28, 28, .85); font-family: var(--type); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-8deg); mix-blend-mode: multiply; -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .55) 61%) 0 0 / 7px 7px; mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .55) 61%) 0 0 / 7px 7px; } @media (max-width: 520px) { .bd__rows { grid-template-columns: 1fr !important; gap: 2px; } .bd__rows dd { margin-bottom: 10px; } .bd__rows dt::after { content: ""; } } /* Who is more likely: coloured chits, like old ration-card paper */ .couple .likely__head { padding: 22px 18px; } /* Who is more likely: little letterpress invitation cards, double-ruled with kolam corners */ .couple .likely__grid { gap: clamp(18px, 2.4vw, 26px); } .couple .guess { --rule: #8B1E22; --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 20C13 13 13 5 20 4C27 5 27 13 20 20C27 13 35 13 36 20C35 27 27 27 20 20C27 27 27 35 20 36C13 35 13 27 20 20C13 27 5 27 4 20C5 13 13 13 20 20Z'/%3E%3C/g%3E%3Cg fill='%238B1E22'%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Ccircle cx='31' cy='9' r='1.6'/%3E%3Ccircle cx='9' cy='31' r='1.6'/%3E%3Ccircle cx='31' cy='31' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --paper: #FBF5E6; --wash: rgba(253, 248, 236, .72); position: relative; gap: 16px; padding: 34px 26px 26px; border-radius: 3px; text-align: center; transform: none; background: linear-gradient(var(--wash), var(--wash)), url("../assets/images/home/tex-paper.webp") center / 600px auto, var(--paper); box-shadow: inset 0 0 0 8px var(--paper), inset 0 0 0 10px var(--rule), inset 0 0 0 13px var(--paper), inset 0 0 0 14px var(--rule), 0 1px 1px rgba(0, 0, 0, .1), 0 18px 28px -18px rgba(60, 30, 10, .55); } .couple .guess:nth-child(3n+2) { --wash: rgba(250, 232, 178, .78); --rule: #3E5B2C; --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%233E5B2C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 20C13 13 13 5 20 4C27 5 27 13 20 20C27 13 35 13 36 20C35 27 27 27 20 20C27 27 27 35 20 36C13 35 13 27 20 20C13 27 5 27 4 20C5 13 13 13 20 20Z'/%3E%3C/g%3E%3Cg fill='%233E5B2C'%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Ccircle cx='31' cy='9' r='1.6'/%3E%3Ccircle cx='9' cy='31' r='1.6'/%3E%3Ccircle cx='31' cy='31' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --paper: #F7E9C2; } .couple .guess:nth-child(3n+3) { --paper: #F8E2D8; --wash: rgba(250, 226, 214, .78); } /* a kolam flower sitting on each corner of the frame */ .couple .guess::before { content: ""; position: absolute; inset: 2px; pointer-events: none; background: var(--flower) 0 0 / 30px 30px no-repeat, var(--flower) 100% 0 / 30px 30px no-repeat, var(--flower) 0 100% / 30px 30px no-repeat, var(--flower) 100% 100% / 30px 30px no-repeat; } .couple .guess__num { position: static; order: -1; justify-self: center; font-family: var(--f-display); font-style: italic; font-size: .9rem; letter-spacing: .08em; color: var(--rule); } .couple .guess__num::before { content: "~ "; } .couple .guess__num::after { content: " ~"; } .couple .guess__q { padding: 0 6px; font-size: clamp(1.2rem, 1.6vw, 1.38rem); line-height: 1.3; color: #2A160C; } .couple .guess__opts { justify-content: center; gap: 6px; } .couple .guess__pick { flex: 0 1 88px; padding: 6px 2px; border: 0; border-radius: 0; background: none; font-family: var(--f-display); font-size: .9rem; color: #2A160C; } .couple .guess__pick:hover:not(:disabled) { transform: translateY(-3px); } /* faces in brass rings, like old framed photos on the wall */ .couple .guess__face:not(.guess__face--both) { background: var(--face) 50% .8% / 190% auto no-repeat, radial-gradient(ellipse at 50% 30%, #E9DCC2, #C9B48E); } .couple .guess__face { width: 58px; height: 58px; filter: sepia(.25); box-shadow: 0 0 0 2px #FBF5E6, 0 0 0 5px #C49A4A, 0 0 0 6px #8A6A2C, 0 6px 10px -2px rgba(60, 30, 10, .45); } .couple .guess__face--both { filter: none; background: radial-gradient(circle at 35% 30%, #B23A33, #6E1518); color: #F3D58A; font-size: 1.35rem; } .couple .guess__pick.is-answer { background: none; transform: scale(1.08); } .couple .guess__pick.is-answer .guess__face { box-shadow: 0 0 0 2px #FBF5E6, 0 0 0 5px #3E5B2C, 0 0 0 6px #23361a, 0 6px 10px -2px rgba(60, 30, 10, .45); } .couple .guess__pick.is-chosen:not(.is-answer) .guess__face { box-shadow: 0 0 0 2px #FBF5E6, 0 0 0 5px #A61C1C, 0 0 0 6px #6E1518; } .couple .guess__result { font-size: .92rem; } .couple .guess__result b { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border: 2px double currentColor; border-radius: 4px; font-family: var(--type); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); } /* ---------- 31 CELEBRATIONS: POSTAGE STAMPS, STACKED AS YOU SCROLL ---- */ .events .days { display: none; } .events { overflow: clip; } /* hidden would break the sticky stamp pile */ .events .event-list { display: grid; gap: clamp(70px, 12vw, 120px); padding-top: 10px; } .stampset { position: relative; } .stampset__inner { position: relative; display: grid; max-width: 940px; margin-inline: auto; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); } /* a stamp: drop shadow on the outside, perforated paper inside */ .stamp { margin: 0; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); } .stamp__paper { --r: 6px; --s: 18px; padding: 10px; background: #F6EEDC; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round; } .stamp--pic { transform: rotate(-2.2deg); } .stamp--pic .stamp__paper { background: linear-gradient(rgba(255, 252, 244, .5), rgba(255, 252, 244, .5)), url("../assets/images/home/tex-paper.webp") center / 500px auto, #F6EEDC; } .stamp--pic .stamp__face { position: relative; margin: 6px; overflow: hidden; background: #5A1418; } .stamp--pic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .stamp--pic .stamp__face::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(226, 186, 110, .55); outline: 1px solid rgba(226, 186, 110, .3); outline-offset: 3px; pointer-events: none; } .stamp__cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1rem; letter-spacing: .06em; color: #F0D493; text-shadow: 0 1px 6px rgba(40, 0, 4, .9); } .stamp--text { position: relative; z-index: 1; transform: rotate(1.4deg); } .stamp--text .stamp__paper { --s: 20px; padding: 10px; background: linear-gradient(rgba(255, 249, 232, .62), rgba(255, 249, 232, .62)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #F8EFD6; } .stamp--text .stamp__face { margin: 8px; padding: clamp(22px, 3.4vw, 34px) clamp(18px, 3vw, 32px); color: #3A1D12; text-align: center; box-shadow: inset 0 0 0 1px rgba(122, 31, 26, .5), inset 0 0 0 4px rgba(248, 239, 214, 0), inset 0 0 0 5px rgba(122, 31, 26, .3); } .stampset .day__label { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8B1E22; } .stampset .day__name { margin: 10px 0 14px; font-family: var(--f-display); font-style: normal; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; color: #5E1A1D; text-wrap: balance; } .stampset .day__desc { margin: 0 auto 12px; max-width: 34rem; font-family: var(--f-display); font-size: 1.02rem; line-height: 1.7; letter-spacing: .01em; color: #6B4A2E; } .day__wear { font-size: .88rem; color: #6B4A2E; } .day__wear b { margin-right: 6px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #8B1E22; } /* venue rows: printed, not boxed */ .stampset .day__sides { display: grid; gap: 0; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(122, 31, 26, .35); } .stampset .day__sides--two { grid-template-columns: 1fr 1fr; } .stampset .day__sides--two .side + .side { border-left: 1px dashed rgba(122, 31, 26, .35); } .stampset .side { gap: 2px; padding: 4px 10px; border-radius: 0; background: none; justify-items: center; } .stampset .side__who { font-size: .66rem; letter-spacing: .18em; color: #8B1E22 !important; } .stampset .side__time { font-family: "Anton", var(--f-sans); font-size: 1.5rem; letter-spacing: .03em; color: #2A160C; } .stampset .side__place { font-weight: 500; font-size: .9rem; color: #3A1D12; } .stampset .side__private { font-size: .76rem; color: #8a6d55; } .stampset .side__links { justify-content: center; gap: 4px; margin-top: 6px; } .stampset .side__links a { min-height: 36px; padding: 4px 10px; border: 1px solid rgba(122, 31, 26, .35); background: transparent; color: #5E1A1D; font-size: .78rem; } .stampset .side__links a:hover { background: #5E1A1D; color: #F8EFD6; } /* postmark: inked on when the stamp lands */ .postmark { position: absolute; z-index: 2; width: clamp(170px, 22vw, 230px); height: auto; color: rgba(42, 22, 22, .78); font-family: var(--f-sans); pointer-events: none; opacity: 0; transform: rotate(-14deg) scale(1.5); transition: opacity .35s ease-out .25s, transform .45s cubic-bezier(.2, 1.4, .4, 1) .25s; } .postmark text { fill: currentColor; } .stampset.is-landed .postmark { opacity: 1; transform: rotate(-14deg) scale(1); } /* phones: picture on top (cropped wider), details below, postmark across the join */ .stampset__inner { grid-template-columns: 1fr; } .stamp--pic { width: 88%; justify-self: center; } .stamp--pic img { aspect-ratio: 5 / 4; object-position: 50% 45%; } .stamp--text { margin-top: -26px; } .postmark { top: calc(88vw * .8 - 125px); right: -4px; } @media (max-width: 520px) { .stampset .day__sides--two { grid-template-columns: 1fr; } .stampset .day__sides--two .side + .side { border-left: 0; border-top: 1px dashed rgba(122, 31, 26, .35); margin-top: 10px; padding-top: 12px; } } /* wider screens: side by side, and the stamps pile up on each other as you scroll */ @media (min-width: 900px) { .stampset__inner { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: center; } .stamp--pic { width: auto; } .stamp--pic img { aspect-ratio: 4 / 5; } .stamp--text { margin: 0 0 0 -34px; } .postmark { top: -38px; right: auto; left: calc(36% - 110px); } } /* every screen: each pair slides up and lands on the pile; JS sets --top so tall cards stick by their bottom edge and can still be read in full */ .events .event-list { gap: 30vh; padding-bottom: 4vh; } .stampset { position: sticky; top: var(--top, 76px); } .stampset__inner { transform: rotate(var(--tilt, 0deg)) translateX(var(--nudge, 0px)); } .stampset:nth-child(2) { --tilt: 1.4deg; --nudge: 10px; } .stampset:nth-child(3) { --tilt: -1.1deg; --nudge: -8px; } .stampset:nth-child(4) { --tilt: .8deg; --nudge: 6px; } .stampset.is-buried .stampset__inner { transform: rotate(var(--tilt, 0deg)) translateX(var(--nudge, 0px)) scale(.96); filter: brightness(.86) saturate(.9); } @media (min-width: 900px) { .stampset:nth-child(2) { --nudge: 18px; } .stampset:nth-child(3) { --nudge: -14px; } .stampset:nth-child(4) { --nudge: 10px; } } @media (prefers-reduced-motion: reduce) { .stampset, .stampset.is-landed { opacity: 1; transform: none; transition: none; } .postmark { opacity: 1; transform: rotate(-14deg); transition: none; } } /* Celebrations sit on the calendar's linen, with the same maroon borders */ .events.room--linen { padding-block: clamp(120px, 13vw, 170px); background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .06) 0 1px, transparent 1px 3px), var(--grain), #EEE6D8; } .events.room--linen::before, .events.room--linen::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 64px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64' viewBox='0 0 48 64' fill='none' stroke='%238E2A22' stroke-linecap='round'%3E %3Cpath d='M0 2.5H48' stroke-width='3'/%3E %3Cpath d='M0 15C6 6 18 6 24 15C30 24 42 24 48 15' stroke-width='2.4'/%3E %3Ccircle cx='12' cy='19' r='2.2' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='36' cy='11' r='2.2' fill='%238E2A22' stroke='none'/%3E %3Cpath d='M0 29H48' stroke-width='3.4'/%3E %3Cpath d='M0 32A12 11 0 0 0 24 32A12 11 0 0 0 48 32' stroke-width='2.4'/%3E %3Ccircle cx='12' cy='50' r='4.6' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='12' cy='59' r='2.6' fill='%238E2A22' stroke='none'/%3E %3Ccircle cx='36' cy='50' r='4.6' fill='%238E2A22' stroke='none'/%3E%3Ccircle cx='36' cy='59' r='2.6' fill='%238E2A22' stroke='none'/%3E %3C/svg%3E") center top / 48px 64px repeat-x; } .events.room--linen::before { top: 22px; } .events.room--linen::after { bottom: 22px; transform: scaleY(-1); } .events.room--linen { color: var(--ink); } .events.room--linen .section-title, .events.room--linen .contacts__title { color: #5E1A1D; } .events.room--linen .section-intro, .events.room--linen .contacts__intro { color: #5a4636; } .events.room--linen .section-head::after { filter: none; opacity: 1; } .stamp { filter: drop-shadow(0 18px 22px rgba(60, 30, 10, .32)) drop-shadow(0 2px 2px rgba(60, 30, 10, .2)); } .stamp--text .stamp__paper { background: linear-gradient(rgba(255, 252, 242, .8), rgba(255, 252, 242, .8)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #FBF4E2; } .stamp--pic .stamp__face::after { border-color: rgba(243, 234, 216, .5); outline-color: rgba(243, 234, 216, .25); } .stamp__cap { color: #F3EAD8; } /* ---------- 32 SECTION JOINS: ONE WOVEN RIBBON AT EVERY SEAM ---------- */ /* Every section opens with the same saree-border ribbon: maroon, edged with a fine double zari rule, with a rice-flour kolam drawing itself along it. One device, used everywhere, so the page reads like one long cloth sewn together. */ .calendar.room--paper::before, .calendar.room--paper::after, .events.room--linen::before, .events.room--linen::after { content: none; } .kedge.seam { top: 0; bottom: auto; z-index: 6; height: clamp(38px, 3.6vw, 50px); padding: 9px 0; box-sizing: border-box; opacity: 1; color: #F3EAD8; background: linear-gradient(180deg, transparent 4px, rgba(226, 186, 110, .75) 4px 5px, transparent 5px calc(100% - 5px), rgba(226, 186, 110, .75) calc(100% - 5px) calc(100% - 4px), transparent calc(100% - 4px)), var(--grain), #5E1A1D; border-block: 1.5px solid #9C7432; box-shadow: 0 8px 14px -8px rgba(30, 10, 4, .45), 0 -6px 12px -8px rgba(30, 10, 4, .3); } .kedge.seam svg { opacity: .92; } .footer .kedge.seam { top: 0; } .section, .footer, .calendar { position: relative; } /* ---------- 33 SECTIONS STACK LIKE SHEETS ------------------------------- */ /* Each section stops once its end is on screen; the next slides up over it, casting a shadow, while the one underneath sinks back a little and dims. */ body { background: #1A0C07; } .stack-sec { position: sticky; top: var(--stick, 0px); transform-origin: 50% 100%; transform: scale(calc(1 - var(--cover, 0) * .06)); border-radius: calc(var(--cover, 0) * 28px); box-shadow: 0 -22px 50px -14px rgba(20, 8, 4, .55); will-change: transform; } .stack-top { position: relative; z-index: 1; box-shadow: 0 -22px 50px -14px rgba(20, 8, 4, .55); } .stack-shade { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: #140805; opacity: calc(var(--cover, 0) * .62); border-radius: inherit; } /* ---------- 34 NEED A HAND: THE ENQUIRIES PANEL OF AN INVITATION ------- */ .help { padding-block: clamp(110px, 12vw, 160px); color: #F3EAD8; background: url("../assets/images/home/tex-maroon.webp") center / cover, #4A1010; } .help .wrap { max-width: 900px; } .help .section-title { color: #F3EAD8; } .help .section-intro { color: rgba(243, 234, 216, .82); } .help .section-head::after { filter: brightness(0) invert(.92) sepia(.3); opacity: .8; } .help-card { max-width: 820px; margin-inline: auto; --f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 20C13 13 13 5 20 4C27 5 27 13 20 20C27 13 35 13 36 20C35 27 27 27 20 20C27 27 27 35 20 36C13 35 13 27 20 20C13 27 5 27 4 20C5 13 13 13 20 20Z'/%3E%3C/g%3E%3Cg fill='%238B1E22'%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Ccircle cx='31' cy='9' r='1.6'/%3E%3Ccircle cx='9' cy='31' r='1.6'/%3E%3Ccircle cx='31' cy='31' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); position: relative; display: grid; grid-template-columns: 1fr; gap: 30px; padding: clamp(38px, 6vw, 58px) clamp(24px, 5vw, 56px); color: #3A1D12; background: linear-gradient(rgba(255, 250, 236, .72), rgba(255, 250, 236, .72)), url("../assets/images/home/tex-paper.webp") center / 700px auto, #F8EFD6; box-shadow: inset 0 0 0 10px #F8EFD6, inset 0 0 0 12px #8B1E22, inset 0 0 0 16px #F8EFD6, inset 0 0 0 17px #8B1E22, 0 30px 60px -24px rgba(10, 2, 2, .7); } .help-card::before { content: ""; position: absolute; inset: 4px; pointer-events: none; background: var(--f) 0 0 / 38px 38px no-repeat, var(--f) 100% 0 / 38px 38px no-repeat, var(--f) 0 100% / 38px 38px no-repeat, var(--f) 100% 100% / 38px 38px no-repeat; } .help-col { text-align: center; } .help-side { margin-bottom: 18px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.9rem); color: #5E1A1D; } .help-side::after { content: ""; display: block; width: 90px; height: 8px; margin: 10px auto 0; background: radial-gradient(circle, #8B1E22 2px, transparent 2.5px) center / 8px 8px no-repeat, linear-gradient(#8B1E22, #8B1E22) left center / 38px 1px no-repeat, linear-gradient(#8B1E22, #8B1E22) right center / 38px 1px no-repeat; } .help-list { display: grid; gap: 22px; } .help-p + .help-p { padding-top: 22px; border-top: 1px dashed rgba(139, 30, 34, .3); } .help-p__name { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; color: #2A160C; } .help-p__rel { margin-top: 2px; font-family: var(--f-display); font-style: italic; font-size: .92rem; color: #7A5A42; } .help-p__num { margin-top: 8px; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .08em; color: #5E1A1D; } .help-p__btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; } .help-p__btns a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 16px; border: 1px solid rgba(139, 30, 34, .45); border-radius: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #5E1A1D; transition: background .25s, color .25s; } .help-p__btns a:hover, .help-p__btns a:focus-visible { background: #5E1A1D; color: #F8EFD6; } .help-p__btns svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .help-rule { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 30, 34, .5) 20%, rgba(139, 30, 34, .5) 80%, transparent); } @media (min-width: 760px) { .help-card { grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 48px); } .help-rule { width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(139, 30, 34, .5) 12%, rgba(139, 30, 34, .5) 88%, transparent); } } /* Need a hand, bolder: a maroon tab per family, each person in their own panel, relation as a label, a big readable number and two clear buttons */ .help-side { display: inline-block; margin-bottom: 22px; padding: 9px 26px; background: #5E1A1D; color: #F8EFD6; font-family: var(--f-display); font-style: normal; font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.2rem); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 3px #5E1A1D, inset 0 0 0 4px rgba(226, 186, 110, .7); } .help-side::after { content: none; } .help-list { gap: 16px; } .help-p + .help-p { padding-top: 22px; border-top: 1px solid rgba(139, 30, 34, .22); } .help-p { display: flex; flex-direction: column; align-items: center; padding: 22px 18px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(139, 30, 34, .22); } .help-p__rel { order: -1; margin: 0 0 6px; font-family: var(--f-sans); font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8B1E22; } .help-p__name { font-size: clamp(1.4rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.15; color: #2A160C; } .help-p__num { margin-top: 10px; font-family: "Anton", var(--f-sans); font-size: clamp(1.45rem, 2.6vw, 1.7rem); letter-spacing: .05em; color: #2A160C; } .help-p__btns { width: 100%; max-width: 320px; gap: 10px; margin-top: 16px; } .help-p__btns a { flex: 1; justify-content: center; min-height: 46px; border: 1.5px solid #5E1A1D; font-size: .78rem; font-weight: 700; } .help-p__btns a:first-child { background: #5E1A1D; color: #F8EFD6; } .help-p__btns a:first-child:hover, .help-p__btns a:first-child:focus-visible { background: #3E0F11; } .help-p__btns svg { width: 17px; height: 17px; stroke-width: 1.8; } /* Need a hand, organic: no frame or boxes. Each family gets a temple-arch panel crowned with a kolam flower; people are separated by three rice-flour dots; pill buttons. */ .help-card { max-width: 860px; padding: 0; background: none; box-shadow: none; gap: clamp(36px, 5vw, 56px); } .help-card::before, .help-rule { display: none; } @media (min-width: 760px) { .help-card { grid-template-columns: 1fr 1fr; } } .help-col { position: relative; padding: clamp(96px, 11vw, 118px) clamp(22px, 4vw, 40px) 44px; color: #3A1D12; border-radius: 50% 50% 40px 40px / 170px 170px 40px 40px; background: linear-gradient(rgba(255, 250, 236, .74), rgba(255, 250, 236, .74)), url("../assets/images/home/tex-paper.webp") center / 700px auto, #F8EFD6; box-shadow: 0 30px 60px -26px rgba(10, 2, 2, .75); } .help-col::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(139, 30, 34, .4); border-radius: 50% 50% 32px 32px / 160px 160px 32px 32px; pointer-events: none; } .help-col::after { content: ""; position: absolute; top: 40px; left: 50%; width: 42px; height: 42px; margin-left: -21px; background: var(--f) center / contain no-repeat; } .help-side { display: block; margin-bottom: 26px; padding: 0; background: none; box-shadow: none; color: #5E1A1D; font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.1rem); letter-spacing: 0; text-transform: none; } .help-list { gap: 0; } .help-p { padding: 0; background: none; border: 0; } .help-p + .help-p { margin-top: 26px; padding-top: 34px; border: 0; position: relative; } .help-p + .help-p::before { content: ""; position: absolute; top: 0; left: 50%; width: 51px; height: 8px; margin-left: -25.5px; background: radial-gradient(circle, #8B1E22 2.6px, transparent 3px) 0 50% / 17px 8px repeat-x; } .help-p__btns a { border-radius: 999px; } /* ---------- 35 BRAND-COLOURED ACTION BUTTONS ------------------------------ */ /* Call, WhatsApp, Google Maps and Waze in their own colours and marks, so anyone recognises them at a glance. */ a.brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0 !important; border-radius: 999px; font-family: var(--f-sans); font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: none; text-decoration: none; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45); transition: filter .2s, transform .2s; } a.brand:hover, a.brand:focus-visible { filter: brightness(.94); transform: translateY(-1px); } a.brand svg { flex: none; width: 19px; height: 19px; stroke: none; } .help-p__btns a.brand--call, a.brand--call { background: #1A73E8; color: #fff; } .help-p__btns a.brand--wa, a.brand--wa { background: #25D366; color: #fff; text-shadow: 0 1px 1px rgba(0, 60, 25, .35); } a.brand--gmaps, .stampset .side__links a.brand--gmaps { background: #fff; color: #202124; box-shadow: inset 0 0 0 1px #DADCE0, 0 6px 14px -8px rgba(0, 0, 0, .35); } a.brand--waze, .stampset .side__links a.brand--waze { background: #33CCFF; color: #0A2A3A; } .stampset .side__links a.brand:hover { background-color: inherit; } .stampset .side__links a.brand--gmaps:hover { background: #fff; color: #202124; } .stampset .side__links a.brand--waze:hover { background: #33CCFF; color: #0A2A3A; } .stampset .side__links { gap: 6px; flex-wrap: wrap; } a.brand { white-space: nowrap; } .stampset .side__links a.brand { min-height: 36px; padding: 5px 11px; gap: 6px; font-size: .74rem; } .stampset .side__links a.brand svg { width: 16px; height: 16px; } .stampset .side { padding-inline: 6px; } /* ---------- 36 WISHLIST: A SCRAPBOOK COLLAGE ON OLD PAPER ------------------ */ /* Textured paper, a huge faint "with love" behind, a coral rangoli line drawing, and the wishes pasted on as a mix of red perforated stamps, bordered photo prints and cut-outs. */ .wishlist.room--turmeric { background: linear-gradient(rgba(236, 228, 212, .55), rgba(236, 228, 212, .55)), url("../assets/images/home/tex-paper.webp") center / 1100px auto, #E6DCC8; } .wish-wm { position: absolute; z-index: 0; top: clamp(40px, 5vw, 70px); left: 50%; transform: translateX(-50%) rotate(-4deg); margin: 0; white-space: nowrap; pointer-events: none; font-family: var(--f-script); font-size: clamp(7rem, 24vw, 19rem); line-height: 1; color: rgba(150, 112, 62, .2); } .wish-rangoli { position: absolute; z-index: 0; left: max(-120px, -8vw); top: 46%; width: clamp(300px, 34vw, 480px); aspect-ratio: 1; pointer-events: none; background: url("../assets/images/wm-rangoli.svg") center / contain no-repeat; opacity: .75; } .wishlist .wish-grid { position: relative; } .wishlist .wish-grid::after { content: ""; position: absolute; z-index: -1; right: -6%; top: -60px; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; background: url("../assets/images/wm-rangoli.svg") center / contain no-repeat; opacity: .45; pointer-events: none; } .wishlist .wrap { position: relative; z-index: 1; } .wishlist .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 18px; padding-top: 56px; align-items: start; } @media (min-width: 900px) { .wishlist .wish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 70px 34px; } } .wishlist .tile { --tilt: -4deg; rotate: var(--tilt); translate: 12px 0; position: relative; } .wishlist .tile:nth-child(4n+2) { --tilt: 3deg; translate: -14px 46px; z-index: 2; } .wishlist .tile:nth-child(4n+3) { --tilt: -2deg; translate: 10px -14px; } .wishlist .tile:nth-child(4n) { --tilt: 4.5deg; translate: -18px 30px; z-index: 2; } @media (max-width: 899px) { .wishlist .tile:nth-child(odd) { translate: 8px 0; } .wishlist .tile:nth-child(even) { translate: -8px 34px; } } .wishlist .tile__btn { gap: 4px; padding: 0; border-radius: 0; background: none !important; box-shadow: none; text-align: center; } .wishlist .tile__btn:hover { transform: translateY(-6px) rotate(calc(var(--tilt) * -.6)); } .wishlist .tile__icon { position: relative; top: auto; left: auto; margin: 0 auto 14px; box-sizing: content-box; width: clamp(92px, 12vw, 128px); height: auto; aspect-ratio: 1; object-fit: contain; } .wishlist .tile__btn:hover .tile__icon { transform: none; } /* 1 · red perforated postage stamp */ .wishlist .tile:nth-child(3n+1) .tile__icon { padding: 30px; background: #F1E2C4; box-shadow: inset 0 0 0 12px #9E1B1F, inset 0 0 0 17px #F6EEDC, inset 0 0 0 18px #9E1B1F; -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle 5px, #0000 96%, #000) -7px -7px / 14px 14px round; mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle 5px, #0000 96%, #000) -7px -7px / 14px 14px round; filter: drop-shadow(0 10px 12px rgba(60, 30, 10, .3)); } /* 2 · old photo print with a thin red border */ .wishlist .tile:nth-child(3n+2) .tile__icon { padding: 22px; background: radial-gradient(circle at 50% 40%, #F4F1EA, #D4CCBD); border: 3px solid #9E1B1F; box-shadow: inset 0 0 0 5px #FBF8F1, 0 12px 18px -8px rgba(60, 30, 10, .4); } /* 3 · cut out and pasted straight on */ .wishlist .tile:nth-child(3n) .tile__icon { width: clamp(120px, 16vw, 170px); filter: drop-shadow(0 14px 14px rgba(60, 30, 10, .35)); } .wishlist .tile__name { font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #6E1518; } .wishlist .tile__note { font-size: .84rem; color: #6B5A48; } .wishlist .tile__heart { top: -10px; right: calc(50% - clamp(72px, 9vw, 92px)); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FBF5E6; color: rgba(158, 27, 31, .35); font-size: 1rem; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); } .wishlist .tile__btn[aria-pressed="true"] .tile__heart { background: #9E1B1F; color: #FBF5E6; } /* Wishlist pieces are vintage prints now, not 3D icons */ .wishlist .tile__icon { object-fit: cover; width: clamp(110px, 14vw, 150px); } .wishlist .tile:nth-child(3n+1) .tile__icon { padding: 24px; } .wishlist .tile:nth-child(3n+2) .tile__icon { padding: 9px; background: #FBF8F1; filter: sepia(.35) contrast(1.02); } .wishlist .tile:nth-child(3n) .tile__icon { width: clamp(140px, 17vw, 190px); object-fit: contain; filter: drop-shadow(0 12px 12px rgba(60, 30, 10, .3)); } /* ---------- 37 MOI: A NOTE FROM THE FAMILIES + A SILK MOI ENVELOPE -------- */ .moi { max-width: 760px; margin: clamp(90px, 12vw, 140px) auto 0; } .moi[hidden] { display: none; } .moi__intro { text-align: center; } .moi__title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); color: #6E1518; } /* the note: a handwritten slip, taped on */ .moi__note { position: relative; max-width: 560px; margin: 26px auto 0; padding: 30px clamp(22px, 4vw, 36px) 24px; text-align: left; transform: rotate(-1.2deg); background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(110, 21, 24, .12) 31px 32px) 0 18px, linear-gradient(rgba(255, 252, 242, .82), rgba(255, 252, 242, .82)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #FBF4E2; box-shadow: 0 18px 30px -18px rgba(60, 30, 10, .45); } .moi__note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(226, 186, 110, .55); transform: rotate(2deg); } .moi__note p { font-family: "Kalam", var(--f-sans); font-size: clamp(1.02rem, 1.8vw, 1.15rem); line-height: 1.75; color: #3A1D12; } .moi__note p + p { margin-top: 10px; } .moi__sign { text-align: right; color: #8B1E22 !important; } .moi__stage { display: grid; justify-items: center; margin-top: clamp(54px, 7vw, 70px); } /* the envelope: red Kanchipuram silk, a zari temple border, a gold-rimmed flap and a brass seal */ .moi__env { --w: min(520px, 90vw); position: relative; display: block; width: var(--w); aspect-ratio: 1.62; padding: 0; border: 0; border-radius: 6px; cursor: pointer; perspective: 1200px; background: radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .06), rgba(30, 0, 4, .35)), var(--tex-silk) center / 420px auto, #8E1D22; box-shadow: 0 30px 50px -24px rgba(40, 10, 4, .7), 0 2px 3px rgba(0, 0, 0, .25); transition: transform .5s var(--ease-out), box-shadow .5s; } .moi__env:hover { transform: translateY(-4px) rotate(-.6deg); } .moi__env::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(226, 186, 110, .85); outline: 1px solid rgba(226, 186, 110, .45); outline-offset: 4px; border-radius: 3px; pointer-events: none; } .moi__back { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), var(--tex-silk) center / 420px auto, #74161B; opacity: 0; transition: opacity .3s; } .moi__zari { position: absolute; left: 12px; right: 12px; bottom: 22px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cg fill='none' stroke='%23E2BA6E' stroke-width='1.4'%3E%3Cpath d='M0 3.5H28M0 30.5H28'/%3E%3Cpath d='M2 30.5L14 9L26 30.5'/%3E%3Cpath d='M7 30.5L14 18L21 30.5'/%3E%3C/g%3E%3Cg fill='%23E2BA6E'%3E%3Ccircle cx='14' cy='6.5' r='1.6'/%3E%3Ccircle cx='14' cy='26' r='1.4'/%3E%3Crect x='0' y='32' width='28' height='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 34px repeat-x; opacity: .95; } .moi__label { position: absolute; left: 0; right: 0; bottom: 64px; font-family: var(--f-display); font-size: .78rem; letter-spacing: .5em; text-transform: uppercase; color: #E9C77F; } .moi__names { position: absolute; left: 0; right: 0; bottom: 82px; font-family: var(--f-script); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; background: linear-gradient(180deg, #FFF0C4, #E3B968 55%, #B98A3C); -webkit-background-clip: text; background-clip: text; color: transparent; } .moi__names i { font-style: normal; } .moi__flap { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 46%; transform-origin: 50% 0; transition: transform .65s var(--ease-out); transform-style: preserve-3d; background: #D9B266; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); } .moi__flap-face { position: absolute; inset: 0 3px 4px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(30, 0, 4, .3)), var(--tex-silk) center / 420px auto, #8E1D22; } .moi__seal { position: absolute; z-index: 3; top: calc(46% - 30px); left: 50%; width: 58px; height: 58px; margin-left: -29px; display: grid; place-items: center; grid-auto-flow: column; border-radius: 50%; font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; color: #6E1518; transition: opacity .3s, transform .5s; background: radial-gradient(circle at 35% 30%, #FFF0C4, #E0B45C 45%, #A87A2E); box-shadow: inset 0 0 0 3px rgba(110, 21, 24, .25), inset 0 0 0 5px rgba(255, 240, 196, .5), 0 6px 10px rgba(0, 0, 0, .35); } .moi__seal i { font-family: var(--f-script); font-style: normal; font-size: .8em; margin: 0 1px; } .moi__hint { margin-top: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8B1E22; animation: moiHint 2.4s ease-in-out infinite; } @keyframes moiHint { 50% { opacity: .45; } } /* opening: the seal lifts, the flap folds back, then the slip rises out */ .moi.is-open .moi__seal { opacity: 0; transform: translateY(-10px) scale(.8); } .moi.is-open .moi__flap { transform: rotateX(180deg); } .moi.is-open .moi__back { opacity: 1; } .moi.is-open .moi__hint { visibility: hidden; } .moi.is-out .moi__env { transform: scale(.82); pointer-events: none; margin-top: -40px; } /* the moi slip */ .moi__letter { --f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 20C13 13 13 5 20 4C27 5 27 13 20 20C27 13 35 13 36 20C35 27 27 27 20 20C27 27 27 35 20 36C13 35 13 27 20 20C13 27 5 27 4 20C5 13 13 13 20 20Z'/%3E%3C/g%3E%3Cg fill='%238B1E22'%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Ccircle cx='31' cy='9' r='1.6'/%3E%3Ccircle cx='9' cy='31' r='1.6'/%3E%3Ccircle cx='31' cy='31' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); position: relative; z-index: 4; display: none; width: min(620px, 94vw); padding: clamp(34px, 5vw, 46px) clamp(22px, 4vw, 40px) 30px; text-align: center; color: #3A1D12; background: linear-gradient(rgba(255, 251, 238, .8), rgba(255, 251, 238, .8)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #FBF4E2; box-shadow: inset 0 0 0 9px rgba(251, 244, 226, .9), inset 0 0 0 10.5px #8B1E22, inset 0 0 0 14px rgba(251, 244, 226, .9), inset 0 0 0 15px #8B1E22, 0 30px 50px -22px rgba(40, 10, 4, .6); } .moi__letter::before { content: ""; position: absolute; inset: 3px; pointer-events: none; background: var(--f) 0 0 / 34px 34px no-repeat, var(--f) 100% 0 / 34px 34px no-repeat, var(--f) 0 100% / 34px 34px no-repeat, var(--f) 100% 100% / 34px 34px no-repeat; } .moi.is-out .moi__letter { display: block; animation: moiRise .8s var(--ease-out) both; } @keyframes moiRise { from { transform: translateY(120px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } .moi__letter:focus { outline: none; } .moi__letter-label { font-family: var(--f-display); font-size: .74rem; letter-spacing: .5em; text-transform: uppercase; color: #8B1E22; } .moi__letter-title { margin-top: 4px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.3rem); color: #5E1A1D; } .moi__letter-intro { max-width: 30rem; margin: 6px auto 0; font-size: .95rem; color: #6B5A48; } .moi__grid { display: grid; gap: 22px; margin-top: 22px; align-items: center; text-align: left; } @media (min-width: 620px) { .moi__grid { grid-template-columns: 1.3fr 1fr; } } .moi .gift__details { margin: 0; gap: 14px; } .moi .gift__details div { padding-bottom: 12px; border-bottom: 1px dashed rgba(139, 30, 34, .3); } .moi .gift__details dt { color: #8B1E22; } .moi .gift__details dd { font-family: var(--f-display); font-size: 1.1rem; color: #2A160C; } .moi .copy-btn { border: 0; border-radius: 999px; background: #5E1A1D; color: #F8EFD6; font-weight: 700; padding: 6px 16px; } .moi .gift__qr { margin: 0; justify-self: center; width: min(210px, 60vw); padding: 10px; background: #fff; border: 1px solid rgba(139, 30, 34, .25); transform: rotate(1.5deg); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .4); } .moi__thanks { margin-top: 22px; font-family: "Kalam", var(--f-sans); font-size: 1.08rem; color: #8B1E22; } .moi__close { margin-top: 14px; min-height: 40px; padding: 6px 18px; border: 1px solid rgba(139, 30, 34, .45); border-radius: 999px; background: none; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5E1A1D; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .moi__flap, .moi__env { transition: none; } .moi.is-out .moi__letter { animation: none; } .moi__hint { animation: none; } } /* Moi, quieter: one line, and the envelope simply sits there; the brass seal opens it */ .moi__line { max-width: 34rem; margin: 0 auto; text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.6; color: #6E1518; } .moi__stage { margin-top: clamp(30px, 4vw, 40px); } .moi__env { cursor: default; text-align: center; } .moi__env:hover { transform: none; } button.moi__seal { padding: 0; border: 0; cursor: pointer; transition: transform .35s var(--ease-out), filter .35s, opacity .3s; } button.moi__seal:hover, button.moi__seal:focus-visible { transform: scale(1.08) rotate(-8deg); filter: brightness(1.08); } button.moi__seal:focus-visible { outline: 2px solid #E9C77F; outline-offset: 4px; } .moi.is-open button.moi__seal { opacity: 0; transform: translateY(-10px) scale(.8); pointer-events: none; } .moi.is-out .moi__env { margin-top: -40px; } /* Moi envelope, take three: a plain cream paper envelope with soft fold lines and a red lotus wax seal; breaking the seal opens it */ .moi__env { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 100L50 50L100 100' stroke='%23B89878' stroke-opacity='.45' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 99L50 49L100 99' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, radial-gradient(120% 90% at 50% 40%, rgba(255, 246, 236, .35), rgba(170, 110, 70, .1)), linear-gradient(rgba(246, 218, 196, .62), rgba(246, 218, 196, .62)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #F1DFCB; box-shadow: 0 30px 50px -22px rgba(70, 30, 10, .55), 0 1px 2px rgba(60, 30, 10, .2); border-radius: 4px; } .moi__env::before, .moi__zari, .moi__label, .moi__names { display: none; } .moi__back { background: linear-gradient(rgba(200, 150, 120, .45), rgba(200, 150, 120, .45)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #E8D2BA; } .moi__flap { height: 54%; background: rgba(150, 110, 70, .35); filter: drop-shadow(0 3px 3px rgba(80, 50, 20, .18)); } .moi__flap-face { inset: 0 1px 1px; background: radial-gradient(120% 100% at 50% 0, rgba(255, 250, 242, .45), rgba(170, 110, 70, .08)), linear-gradient(rgba(248, 224, 204, .6), rgba(248, 224, 204, .6)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #F3E3D0; } button.moi__seal { top: calc(54% - 66px); width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; font-size: 0; color: transparent; background: url("../assets/images/home/wax-seal.webp") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(80, 10, 10, .3)); } button.moi__seal > * { display: none; } button.moi__seal:hover, button.moi__seal:focus-visible { transform: scale(1.05) rotate(-6deg); filter: drop-shadow(0 8px 10px rgba(80, 10, 10, .4)) brightness(1.05); } button.moi__seal:focus-visible { outline: 2px solid #9E1B1F; outline-offset: 2px; } .moi.is-open button.moi__seal { opacity: 0; transform: translateY(-16px) scale(.7) rotate(-20deg); } @media (max-width: 560px) { button.moi__seal { width: 88px; height: 88px; margin-left: -44px; top: calc(54% - 44px); } } /* ---------- 38 MOI ROOM: THE ENVELOPE OVER A SOFT-FOCUS LOTUS STILL LIFE --- */ .moi-room { position: relative; overflow: hidden; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: clamp(110px, 12vw, 150px); background: #2A1608; color: #FBF2DE; } .moi-room__bg { position: absolute; inset: -24px; z-index: 0; pointer-events: none; background: url("../assets/images/home/moi-lotus.webp") 38% 50% / cover no-repeat; filter: blur(3px) saturate(.95); } .moi-room__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(30, 14, 4, .15), rgba(30, 14, 4, .62)), linear-gradient(rgba(30, 14, 4, .25), rgba(30, 14, 4, .35)); } .moi-room .wrap { position: relative; z-index: 1; } .moi-room .moi { margin: 0 auto; } .moi-room .moi__line { max-width: 30rem; color: #FBF2DE; font-size: clamp(1.15rem, 2vw, 1.35rem); text-shadow: 0 2px 14px rgba(20, 8, 2, .7); } .moi-room .moi__env { box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .3); } .moi-room .moi__letter { box-shadow: inset 0 0 0 9px rgba(251, 244, 226, .9), inset 0 0 0 10.5px #8B1E22, inset 0 0 0 14px rgba(251, 244, 226, .9), inset 0 0 0 15px #8B1E22, 0 40px 70px -26px rgba(0, 0, 0, .75); } /* ---------- 39 MOI ENVELOPE, BUILT LIKE A REAL ONE ---------------------- */ /* back · moi card inside · folded front pocket · top flap (hinged, two-sided) · wax seal */ .menv { position: relative; width: min(520px, 88vw); aspect-ratio: 1.6; margin: 0 auto; transition: transform .8s var(--ease-out), margin .8s var(--ease-out); animation: menvFloat 5s ease-in-out infinite; } @keyframes menvFloat { 50% { transform: translateY(-5px) rotate(-.4deg); } } .moi.is-open .menv { animation: none; } .menv__back { position: absolute; inset: 0; z-index: 0; border-radius: 4px; background: linear-gradient(rgba(170, 120, 85, .38), rgba(170, 120, 85, .38)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #E2C7AE; box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .3); } /* the moi card tucked inside */ .menv__card { position: absolute; z-index: 2; left: 6%; right: 6%; top: 6%; height: 84%; display: grid; place-content: center; gap: 8px; text-align: center; border-radius: 2px; background: linear-gradient(rgba(255, 251, 238, .85), rgba(255, 251, 238, .85)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #FBF4E2; box-shadow: inset 0 0 0 7px rgba(251, 244, 226, .9), inset 0 0 0 8px #8B1E22, 0 -2px 6px rgba(0, 0, 0, .12); transition: transform .9s cubic-bezier(.2, .9, .3, 1.15), opacity .5s; } .menv__card-label { font-family: var(--f-display); font-size: .74rem; letter-spacing: .5em; text-transform: uppercase; color: #8B1E22; } .menv__card-names { font-family: var(--f-script); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; color: #5E1A1D; } .menv__card-names i { font-style: normal; } /* the front pocket: everything below the V, with the bottom-flap folds */ .menv__pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 -2px 3px rgba(60, 30, 10, .22)); } .menv__pocket-face { position: absolute; inset: 0; border-radius: 4px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L50 54L100 100' fill='none' stroke='%23A88566' stroke-opacity='.5' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 99L50 53L100 99' fill='none' stroke='%23FFFFFF' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, linear-gradient(100deg, rgba(150, 100, 60, .1), transparent 30%, transparent 70%, rgba(150, 100, 60, .1)), linear-gradient(rgba(246, 218, 196, .62), rgba(246, 218, 196, .62)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #F1DFCB; } /* the top flap: outside face, then the darker inside once it has swung past halfway */ .menv__flap { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 56%; transform-origin: 50% 0; transform: perspective(1100px) rotateX(0); filter: drop-shadow(0 3px 3px rgba(60, 30, 10, .25)); transition: transform .7s cubic-bezier(.45, .05, .25, 1), z-index 0s .35s; } .menv__flap-out, .menv__flap-in { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 4px 4px 0 0; transition: opacity 0s .35s; } .menv__flap-out { background: radial-gradient(120% 100% at 50% 0, rgba(255, 250, 242, .45), rgba(170, 110, 70, .06)), linear-gradient(rgba(248, 224, 204, .6), rgba(248, 224, 204, .6)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #F3E3D0; } .menv__flap-in { opacity: 0; background: linear-gradient(rgba(170, 120, 85, .3), rgba(170, 120, 85, .3)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #E6CFB8; } .moi.is-open .menv__flap { z-index: 1; transform: perspective(1100px) rotateX(180deg); } .moi.is-open .menv__flap-out { opacity: 0; } .moi.is-open .menv__flap-in { opacity: 1; } /* the wax seal: wobbles now and then; cracks in two when pressed */ .menv__seal { position: absolute; z-index: 6; left: 50%; top: 56%; width: clamp(92px, 24vw, 124px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform: translate(-50%, -50%); animation: sealWobble 4.5s ease-in-out 2s infinite; } @keyframes sealWobble { 0%, 86%, 100% { transform: translate(-50%, -50%) rotate(0); } 89% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.04); } 93% { transform: translate(-50%, -50%) rotate(7deg) scale(1.04); } 96% { transform: translate(-50%, -50%) rotate(-3deg); } } .menv__seal:hover, .menv__seal:focus-visible { animation: none; transform: translate(-50%, -50%) scale(1.07) rotate(-5deg); } .menv__seal:focus-visible { outline: 2px solid #F3D58A; outline-offset: 3px; } .menv__half { position: absolute; inset: 0; background: url("../assets/images/home/wax-seal.webp") center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(80, 10, 10, .35)); transition: transform .7s cubic-bezier(.3, .6, .4, 1), opacity .5s .25s; } .menv__half--l { clip-path: polygon(0 0, 53% 0, 47% 22%, 55% 41%, 46% 63%, 53% 81%, 48% 100%, 0 100%); } .menv__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 53% 81%, 46% 63%, 55% 41%, 47% 22%); } .moi.is-cracked .menv__seal { animation: none; pointer-events: none; } .moi.is-cracked .menv__half--l { transform: translate(-34px, 46px) rotate(-28deg); opacity: 0; } .moi.is-cracked .menv__half--r { transform: translate(38px, 58px) rotate(32deg); opacity: 0; } /* the moi card peeks out, petals spill, then it opens up into the details */ .moi.is-peek .menv__card { transform: translateY(-58%); } .moi.is-out .menv__card { opacity: 0; transition: opacity .3s; } .menv__petals { position: absolute; z-index: 5; left: 50%; top: 18%; width: 0; height: 0; pointer-events: none; } .menv__petals i { position: absolute; left: 0; top: 0; width: calc(11px * var(--s)); height: calc(15px * var(--s)); border-radius: 70% 0 70% 0; background: var(--c); box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .15); opacity: 0; animation: petal 1.9s var(--d) cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes petal { 0% { transform: translate(0, 20px) rotate(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 45% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .5)) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--x) * 1.15), calc(var(--y) + var(--fall))) rotate(var(--r)) scale(.9); opacity: 0; } } .moi.is-out .menv { animation: none; transform: scale(.74); margin-top: -50px; } .moi.is-out .moi__letter { animation: moiUnfold .75s cubic-bezier(.2, .9, .3, 1.1) both; } @keyframes moiUnfold { from { transform: translateY(170px) scale(.55) rotate(-2deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .menv, .menv__seal { animation: none; } .menv__flap, .menv__flap-out, .menv__flap-in, .menv__card, .menv__half { transition: none; } .moi.is-out .moi__letter { animation: none; } } /* ---------- 40 MOI ROOM, DRESSED: TITLE, WARM GLOW, THE ENVELOPE ON A THAMBULAM ---- */ .moi__head { text-align: center; } .moi__title { margin: 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(4.4rem, 11vw, 7rem); line-height: .9; background: linear-gradient(180deg, #FFF0C4, #E3B968 55%, #B98A3C); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(20, 8, 2, .6)); } .moi-room .moi__line { margin-top: 10px; } .moi__head::after { content: ""; display: block; width: 120px; height: 10px; margin: 18px auto 0; background: radial-gradient(circle, #E3B968 2.4px, transparent 3px) center / 10px 10px no-repeat, linear-gradient(#E3B968, #E3B968) left center / 50px 1px no-repeat, linear-gradient(#E3B968, #E3B968) right center / 50px 1px no-repeat; opacity: .85; } .moi-room .moi__stage { position: relative; margin-top: clamp(40px, 6vw, 60px); padding-bottom: calc(min(520px, 88vw) * .42 + 30px); } .moi-room .moi__stage::before { content: ""; position: absolute; left: 50%; top: 45%; width: min(900px, 140vw); aspect-ratio: 1.6; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 196, 120, .38), rgba(255, 170, 90, .12) 55%, transparent); } /* the envelope rests on a brass thambulam with betel leaves, bananas and jasmine */ .menv { animation: none; transform: rotate(-2deg); } .menv__tray { position: absolute; z-index: -1; left: -17%; width: 134%; max-width: none; height: auto; top: 46%; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(10, 4, 0, .55)); } .menv__back { box-shadow: 0 18px 22px -10px rgba(40, 18, 4, .55), 0 2px 3px rgba(0, 0, 0, .3); } .moi.is-out .menv { transform: scale(.74) rotate(-2deg); } /* a handwritten nudge pointing at the seal */ .menv__tap { position: absolute; z-index: 7; left: calc(100% + 14px); top: 30%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; width: 150px; pointer-events: none; font-family: "Kalam", var(--f-sans); font-size: 1.15rem; line-height: 1.2; color: #FBF2DE; text-shadow: 0 2px 10px rgba(20, 8, 2, .8); transform: rotate(4deg); transition: opacity .3s; } .menv__tap svg { order: 2; width: 70px; height: 46px; margin-left: -40px; fill: none; stroke: #FBF2DE; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(20, 8, 2, .7)); } .moi.is-cracked .menv__tap { opacity: 0; } @media (max-width: 900px) { .menv__tap { left: 50%; top: auto; bottom: calc(-66% - 92px); width: max-content; align-items: center; transform: translateX(-50%); flex-direction: column-reverse; } .menv__tap svg { order: 0; margin: 0 0 2px; transform: rotate(150deg) scaleX(-1); width: 54px; height: 36px; } .moi-room .moi__stage { padding-bottom: calc(min(520px, 88vw) * .42 + 110px); } } /* ---------- 41 MOI, CALMER: DECKLED CARD, ORNATE CORNERS, GENTLE MOTION ------ */ /* the card: hand-made deckled paper, maroon corner ornaments, a maroon roundel with gold */ .mcard { -webkit-mask: url("../assets/images/deckle-mask.svg") 0 0 / 100% 100% no-repeat; mask: url("../assets/images/deckle-mask.svg") 0 0 / 100% 100% no-repeat; background: url("../assets/images/moi-corner-tl.svg") 10px 10px / 74px 74px no-repeat, url("../assets/images/moi-corner-tr.svg") calc(100% - 10px) 10px / 74px 74px no-repeat, url("../assets/images/moi-corner-bl.svg") 10px calc(100% - 10px) / 74px 74px no-repeat, url("../assets/images/moi-corner-br.svg") calc(100% - 10px) calc(100% - 10px) / 74px 74px no-repeat, linear-gradient(rgba(240, 232, 214, .55), rgba(240, 232, 214, .55)), url("../assets/images/home/tex-paper.webp") center / 420px auto, #ECE3CF !important; box-shadow: none !important; } .mcard::before { content: none !important; } .menv__card.mcard { display: grid; place-items: center; left: 7%; right: 7%; top: 5%; height: 88%; border-radius: 0; } .mcard__roundel { display: grid; place-content: center; justify-items: center; gap: 2px; width: clamp(110px, 32%, 150px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #A3262A, #6E1518 70%); box-shadow: 0 0 0 3px #E3B968, 0 0 0 5px #6E1518, 0 0 0 6px #E3B968, 0 6px 14px -4px rgba(60, 10, 10, .5); } .mcard__moi { font-family: var(--f-script); font-size: clamp(2.2rem, 6vw, 3rem); line-height: .9; background: linear-gradient(180deg, #FFF0C4, #E3B968 55%, #C4954A); -webkit-background-clip: text; background-clip: text; color: transparent; } .mcard__names { max-width: 84%; text-align: center; font-family: var(--f-display); font-size: clamp(.5rem, 1.4vw, .62rem); line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #F0D493; } .mcard__roundel--sm { width: 92px; margin: 0 auto 10px; } .mcard__roundel--sm .mcard__moi { font-size: 2.2rem; } .moi__letter.mcard { padding-top: 46px; } /* the seal lifts away softly (no breaking), and the hint sits on the envelope */ .menv__half { transition: transform .6s ease, opacity .55s ease; } .moi.is-cracked .menv__half--l, .moi.is-cracked .menv__half--r { transform: translateY(-14px) scale(1.06); opacity: 0; } .menv__seal { animation: sealBreath 3.6s ease-in-out infinite; } @keyframes sealBreath { 50% { transform: translate(-50%, -50%) scale(1.04); } } .menv__tap { left: 0 !important; right: 0; top: auto !important; bottom: 11% !important; width: auto !important; transform: none !important; display: block; text-align: center; font-family: var(--f-display); font-size: clamp(.68rem, 1.6vw, .8rem); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(110, 21, 24, .9); text-shadow: none; } .moi.is-cracked .menv__tap { opacity: 0; transition: opacity .4s; } .moi-room .moi__stage { padding-bottom: calc(min(520px, 88vw) * .42 + 30px) !important; } /* leave room above the envelope for the card to rise into without touching the line */ .moi-room .moi__stage { margin-top: calc(min(520px, 88vw) / 1.6 * .5 + 10px); } /* calmer motion: a slow flap, an unhurried rise, then a gentle crossfade into the full slip */ .menv__flap { transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), z-index 0s .55s; } .menv__flap-out, .menv__flap-in { transition: opacity 0s .55s; } .menv__card { transition: transform 1.3s cubic-bezier(.33, 0, .2, 1), opacity .7s ease; } .moi.is-peek .menv__card { transform: translateY(-52%); } .moi.is-out .menv__card { opacity: 0; } .menv { transition: transform 1s cubic-bezier(.33, 0, .2, 1), margin 1s cubic-bezier(.33, 0, .2, 1); } .moi.is-out .moi__letter { animation: moiCalm 1s cubic-bezier(.33, 0, .2, 1) both; } @keyframes moiCalm { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .menv__seal { animation: none; } } /* the slip now grows out of the card in JS (FLIP), so no extra pop-in here */ .moi.is-out .moi__letter { animation: none !important; } .moi.is-out .menv__card { transition: opacity .9s ease; } .moi__thanks { margin-top: 24px; font-family: var(--f-display) !important; font-style: italic; font-size: 1.05rem !important; line-height: 1.6; color: #6E1518 !important; } .moi .gift__qr img { display: block; width: 100%; height: auto; } /* ---------- 42 MOI: NO GAP BELOW; LOTUS MOTIF INSTEAD OF THE RED ROUNDEL ---- */ .moi-room { padding-block: clamp(100px, 11vw, 130px) clamp(20px, 3vw, 40px); } .moi-room .moi__stage { padding-bottom: calc(min(520px, 88vw) * .4) !important; } .moi-room__bg::after { background: radial-gradient(80% 70% at 50% 50%, rgba(30, 14, 4, .12), rgba(30, 14, 4, .5)), linear-gradient(rgba(30, 14, 4, .3), rgba(30, 14, 4, .15)); } .mcard__lotus { display: block; width: auto; height: 74%; max-height: 210px; } .mcard__lotus--sm { height: 92px; margin: 0 auto 8px; } /* ---------- 43 GUESTBOOK: OLD INDIAN POSTCARDS ON A KOLAM-DOT WALL --------- */ .guestbook.room--chalk { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23000' fill-opacity='.13'%3E%3Ccircle cx='18' cy='14' r='4'/%3E%3Ccircle cx='12' cy='24' r='4'/%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3Ccircle cx='54' cy='50' r='4'/%3E%3Ccircle cx='48' cy='60' r='4'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 72px 72px, var(--grain), #7E2A22; } .guestbook .guestbook__book { max-width: 1060px; margin-inline: auto; } /* the form: the back of a postcard */ .guestbook .wish-form.pcard { --ink: #1F5A4C; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 860px; margin: 0 auto clamp(56px, 8vw, 84px); padding: clamp(24px, 4vw, 38px); border: 0; border-radius: 3px; color: #3A2A18; transform: rotate(-1.2deg); background: linear-gradient(rgba(236, 222, 190, .62), rgba(236, 222, 190, .62)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #E9DCBC; box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .15), 0 30px 50px -24px rgba(20, 4, 2, .7); } .pcard__msg { display: grid; align-content: start; gap: 10px; } .guestbook .pcard .wish-form__title { margin: 0; text-align: left; padding: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem); color: #6E1518; } .guestbook .pcard .up-field__label { color: #5A4630; font-family: var(--f-display); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .guestbook .pcard input, .guestbook .pcard textarea { width: 100%; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: "Kalam", var(--f-sans); font-size: 1.2rem; box-shadow: none; } .guestbook .pcard input { border-bottom: 1.5px solid rgba(70, 50, 30, .55); } .guestbook .pcard textarea { min-height: 210px; resize: vertical; line-height: 36px; padding-top: 0; background: repeating-linear-gradient(180deg, transparent 0 35px, rgba(70, 50, 30, .28) 35px 36px); border: 0; } .guestbook .pcard input::placeholder, .guestbook .pcard textarea::placeholder { color: rgba(31, 90, 76, .45); } .guestbook .pcard input:focus, .guestbook .pcard textarea:focus { outline: none; background-color: rgba(255, 255, 255, .18); } .guestbook .pcard .up-field__hint { color: #7A6A55; font-size: .8rem; } .pcard__addr { position: relative; display: grid; gap: 18px; align-content: start; padding-top: 22px; margin-top: 22px; border-top: 1.5px solid rgba(70, 50, 30, .5); } .pcard__vert { display: none; } .pcard__stamp { position: absolute; right: 0; top: 18px; display: grid; justify-items: center; width: 74px; padding: 8px 6px 6px; background: #F6EEDC; box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .5), 0 3px 6px rgba(0, 0, 0, .15); -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 96%, #000) -4px -4px / 8px 8px round; mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 96%, #000) -4px -4px / 8px 8px round; } .pcard__stamp img { width: auto; height: 62px; } .pcard__stamp b { font-family: var(--f-display); font-size: .62rem; letter-spacing: .12em; color: #8B1E22; } .pcard__line { padding-right: 92px; } .pcard__line + .pcard__line { padding-right: 0; } .pcard__pin { display: flex; align-items: center; gap: 0; } .pcard__pin i { margin-right: 10px; font-style: normal; font-family: var(--f-display); font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: #3A2A18; } .pcard__pin span { width: 26px; height: 26px; border: 1.5px solid rgba(70, 50, 30, .6); margin-left: -1.5px; } /* send: a round postmark */ .guestbook .pcard__send { justify-self: end; display: grid; place-items: center; width: 104px; min-width: 0; height: 104px; margin-top: 6px; padding: 0; border-radius: 50%; border: 2px solid #8B1E22; background: transparent; box-shadow: inset 0 0 0 5px #E9DCBC, inset 0 0 0 6.5px #8B1E22; color: #8B1E22; font-family: var(--f-display); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-10deg); cursor: pointer; transition: transform .3s, background .3s, color .3s; } .guestbook .pcard__send::before { content: none; } .guestbook .pcard__send:hover, .guestbook .pcard__send:focus-visible { background: #8B1E22; color: #F6EEDC; transform: rotate(-4deg) scale(1.04); } .guestbook .pcard .up-status { color: #6E1518; } @media (min-width: 760px) { .guestbook .wish-form.pcard { grid-template-columns: 1.25fr 1fr; } .pcard__msg { padding-right: clamp(22px, 3vw, 36px); } .pcard__addr { margin-top: 0; padding: 0 0 0 clamp(30px, 4vw, 46px); border-top: 0; border-left: 1.5px solid rgba(70, 50, 30, .55); } .pcard__vert { display: block; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: 0 0; translate: -50% 0; white-space: nowrap; font-family: var(--f-display); font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #5A4630; } .pcard__stamp { top: 0; } .pcard__line:first-of-type { margin-top: 96px; } .pcard__line { padding-right: 0; } } /* posted wishes: little postcards, message left, sender + stamp right */ .guestbook .wishes .wish-card.pmini { --ink: #1F5A4C; position: relative; display: grid; grid-template-columns: 1fr; padding: 22px 22px 18px; border-radius: 2px; background: linear-gradient(rgba(236, 222, 190, .6), rgba(236, 222, 190, .6)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #E9DCBC; box-shadow: 0 18px 30px -18px rgba(20, 4, 2, .75); transform: rotate(var(--r, -1deg)); } .guestbook .wishes .wish-card.pmini:nth-child(3n+2) { --r: 1.1deg; } .guestbook .wishes .wish-card.pmini:nth-child(3n) { --r: -.5deg; } .guestbook .wish-card.pmini::before, .guestbook .wish-card.pmini::after { content: none; } .guestbook .pmini .wish-card__text { margin: 0 76px 14px 0; font-family: "Kalam", var(--f-display); font-weight: 400; font-size: 1.12rem; line-height: 1.5; color: var(--ink); text-shadow: none; } .pmini__stamp { position: absolute; top: 14px; right: 14px; width: 54px; height: 64px; background: url("../assets/images/lotus-motif.svg") center / auto 46px no-repeat, #F6EEDC; box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .5); -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle 2.5px, #0000 96%, #000) -3px -3px / 6px 6px round; mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle 2.5px, #0000 96%, #000) -3px -3px / 6px 6px round; } .guestbook .pmini .wish-card__by { padding-top: 10px; border-top: 1.5px solid rgba(70, 50, 30, .45); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .guestbook .pmini .wish-card__name { font-family: "Kalam", var(--f-script); font-size: 1.2rem; color: #6E1518; } .guestbook .pmini .wish-card__rel { font-family: var(--f-display); font-style: italic; font-size: .82rem; color: #6B5A48; } /* postcard polish: the ruled message area fills its half; the postmark label wraps neatly */ @media (min-width: 760px) { .pcard__msg { display: flex; flex-direction: column; } .pcard__wish { flex: 1; display: flex; flex-direction: column; } .guestbook .pcard textarea { flex: 1; min-height: 300px; } } .guestbook .pcard__send span { max-width: 72px; text-align: center; line-height: 1.3; font-size: .74rem; letter-spacing: .12em; } /* sections with their own position:relative must still stick when stacked (else top: --stick just shifts them up) */ .section.stack-sec, .moi-room.stack-sec, .calendar.stack-sec { position: sticky; } /* ---------- 44 GUESTBOOK, TAKE TWO: WRITE ON A REAL OLD POSTCARD ----------- */ .guestbook.room--chalk { background: url("../assets/images/home/tex-maroon.webp") center / cover, #4A1010; } .guestbook .section-intro { max-width: 34rem; color: rgba(251, 242, 222, .9); } .guestbook .wish-form.pform { display: block; max-width: 900px; margin: 0 auto clamp(64px, 9vw, 96px); padding: 0; border: 0; background: none; box-shadow: none; transform: none; } /* the card itself (a scanned postcard back on desktop; plain card stock on phones) */ .pcard2 { --ink: #1F4E44; position: relative; display: grid; gap: 22px; padding: 30px 24px 26px; color: #4A3020; transform: rotate(-.8deg); background: linear-gradient(rgba(240, 214, 168, .25), rgba(240, 214, 168, .25)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #EED8AE; box-shadow: inset 0 0 0 6px #EED8AE, inset 0 0 0 7px rgba(139, 30, 34, .55), inset 0 0 0 10px #EED8AE, inset 0 0 0 11px rgba(139, 30, 34, .4), 0 34px 60px -26px rgba(10, 2, 2, .85); } .pcard2__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8B1E22; } .pcard2__label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .pcard2 input, .pcard2 textarea { display: block; width: 100%; margin-top: 4px; padding: 6px 4px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); font-family: "Kalam", var(--f-sans); font-size: 1.22rem; line-height: 1.5; box-shadow: none; transition: background .25s, box-shadow .25s; } .pcard2 textarea { min-height: 220px; resize: none; background: rgba(255, 250, 235, .35); box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .18); } .pcard2 input { border-bottom: 1.5px solid rgba(139, 30, 34, .55); background: rgba(255, 250, 235, .3); } .pcard2 input::placeholder, .pcard2 textarea::placeholder { color: rgba(31, 78, 68, .55); } .pcard2 input:focus, .pcard2 textarea:focus { outline: none; background: rgba(255, 252, 242, .75); box-shadow: inset 0 0 0 1.5px rgba(139, 30, 34, .55); } .pcard2 .up-field__hint { display: block; margin-top: 6px; font-size: .78rem; color: #7A5E44; } .pcard2__stamp { display: none; } /* desktop: the real postcard scan, fields laid onto its printed lines */ @media (min-width: 640px) { .pcard2 { display: block; aspect-ratio: 1600 / 1062; padding: 0; background: url("../assets/images/home/postcard-back.webp") center / 100% 100% no-repeat; box-shadow: 0 34px 60px -26px rgba(10, 2, 2, .85); } .pcard2__msg { position: absolute; left: 5.5%; top: 7%; width: 41.5%; height: 85%; display: flex; flex-direction: column; } .pcard2__msg textarea { flex: 1; min-height: 0; background: transparent; box-shadow: none; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(139, 30, 34, .16) 35px 36px); line-height: 36px; padding-top: 2px; } .pcard2__msg textarea:focus { background-color: rgba(255, 252, 242, .45); } .pcard2__msg .wish-form__count { align-self: flex-end; } .pcard2__stamp { display: grid; place-items: center; position: absolute; left: 83.6%; top: 7.2%; width: 11.6%; height: 21.2%; background: #F6EEDC; box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .45), 0 2px 4px rgba(0, 0, 0, .18); transform: rotate(2deg); -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 96%, #000) -4px -4px / 8px 8px round; mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 96%, #000) -4px -4px / 8px 8px round; } .pcard2__stamp img { height: 78%; width: auto; } .pcard2__line { position: absolute; left: 54.6%; width: 40.8%; } .pcard2__line input { margin-top: 2px; border-bottom: 0; background: transparent; padding: 0 2px; height: 36px; } .pcard2__line input:focus { background: rgba(255, 252, 242, .55); } .pcard2__line--1 { top: calc(45.7% - 58px); } .pcard2__line--2 { top: calc(67.5% - 58px); } .pcard2__line--2 .up-field__hint { margin-top: 10px; } } /* the post button: unmistakable, under the card */ .pform__foot { display: grid; justify-items: center; gap: 10px; margin-top: 34px; } .guestbook .pform__send { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 32px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #F3D58A, #D8A94E); color: #4A1010; font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5); cursor: pointer; transition: transform .25s, box-shadow .25s; } .guestbook .pform__send::before { content: none; } .guestbook .pform__send:hover, .guestbook .pform__send:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); color: #4A1010; } .guestbook .pform__send:focus-visible { outline: 2px solid #FBF2DE; outline-offset: 3px; } .guestbook .pform__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .guestbook .pform .up-status { color: #F6DC99; text-align: center; } /* posted wishes: the same card stock, with the postcard's double maroon rule */ .guestbook .wishes .wish-card.pmini { background: linear-gradient(rgba(240, 214, 168, .25), rgba(240, 214, 168, .25)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #EED8AE; box-shadow: inset 0 0 0 5px #EED8AE, inset 0 0 0 6px rgba(139, 30, 34, .5), 0 18px 30px -18px rgba(10, 2, 2, .8); padding: 24px 24px 20px; } .guestbook .pmini .wish-card__text { color: #1F4E44; } /* clear out the old chalkboard field styles inside the postcard */ .guestbook .pcard2 .up-field input, .guestbook .pcard2 .up-field textarea { border: 0; border-radius: 2px; box-shadow: none; color: #1F4E44; } .guestbook .pcard2 .up-field textarea { box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .18); } .guestbook .pcard2 .up-field input:focus, .guestbook .pcard2 .up-field textarea:focus { box-shadow: inset 0 0 0 1.5px rgba(139, 30, 34, .5); } .guestbook .pcard2 .up-field input::placeholder, .guestbook .pcard2 .up-field textarea::placeholder { color: rgba(31, 78, 68, .55); } .guestbook .pcard2 .up-field__hint { color: #7A5E44; } @media (min-width: 640px) { .guestbook .pcard2 .pcard2__msg textarea { box-shadow: none; background-color: transparent; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(139, 30, 34, .18) 35px 36px); } .guestbook .pcard2 .pcard2__msg textarea:focus { background-color: rgba(255, 252, 242, .45); } .guestbook .pcard2 .pcard2__line input { background: transparent; } } @media (max-width: 639px) { .guestbook .pcard2 .up-field input { border-bottom: 1.5px solid rgba(139, 30, 34, .55); } } /* sit what you type exactly on the postcard's printed lines */ @media (min-width: 640px) { .guestbook .pcard2 .pcard2__line input { height: 40px; min-height: 0; margin: 2px 0 0; padding: 0 4px 2px; line-height: 38px; } .guestbook .pcard2 .pcard2__line .pcard2__label { line-height: 18px; } .pcard2__line--1 { top: calc(45.7% - 60px); } .pcard2__line--2 { top: calc(56.5% - 60px); } .pcard2__line--2 .up-field__hint { margin-top: 14px; } } /* warm the posted wishes and the phone postcard to the scanned card's cream */ .guestbook .wishes .wish-card.pmini, .pcard2 { background-color: #EED8AE; } .guestbook .wishes .wish-card.pmini { background-image: linear-gradient(rgba(238, 214, 168, .62), rgba(238, 214, 168, .62)), url("../assets/images/home/tex-paper.webp"); background-size: auto, 520px auto; } @media (max-width: 639px) { .pcard2 { background-image: linear-gradient(rgba(238, 214, 168, .62), rgba(238, 214, 168, .62)), url("../assets/images/home/tex-paper.webp"); background-size: auto, 520px auto; } } /* ---------- 45 TYPED WISHES IN BLACK INK ----------------------------------- */ .guestbook .pcard2 .up-field input, .guestbook .pcard2 .up-field textarea, .pcard2 input, .pcard2 textarea { color: #1b1b1b; } .guestbook .pcard2 .up-field input::placeholder, .guestbook .pcard2 .up-field textarea::placeholder { color: rgba(27, 27, 27, .42); } .guestbook .pmini .wish-card__text { color: #1b1b1b; } /* ---------- 46 MEMORIES: AN OLD FAMILY ALBUM PAGE OF POLAROIDS -------------- */ .memories.room--paper { background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .06) 0 1px, transparent 1px 3px), var(--grain), #EEE6D8; } .memories.room--paper .section-title { color: #5E1A1D; } .memories.room--paper .section-intro { color: #4A3A2C; } .memories.room--paper .memories__tag { font-family: var(--f-script); font-size: clamp(2rem, 4vw, 2.6rem); color: #8B1E22; letter-spacing: 0; } .memories.room--paper .share-steps { background: transparent; border: 0; padding: 0; color: #3A2A1C; } .memories.room--paper .share-steps__title { font-family: var(--f-display); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8B1E22; } .memories.room--paper .memories__buttons .btn { --fg: #5E1A1D; --bd: #5E1A1D; --bg-hover: #5E1A1D; border-radius: 999px; } /* the upload card: cream card stock with the maroon double rule, a lotus instead of the 3D camera */ .memories .up-card--embed { background: linear-gradient(rgba(251, 244, 226, .7), rgba(251, 244, 226, .7)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #F6EEDC; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 8px rgba(251, 244, 226, .9), inset 0 0 0 9.5px #8B1E22, inset 0 0 0 13px rgba(251, 244, 226, .9), inset 0 0 0 14px #8B1E22, 0 26px 44px -24px rgba(60, 30, 10, .5); } .memories .up-card--embed::before { content: none; } .up-card__lotus { display: block; width: auto; height: 70px; margin: 0 auto 4px; } .memories .up-card__title { color: #5E1A1D; } /* the QR: a polaroid of its own */ .memories .qr-card { padding: 14px 14px 40px; background: linear-gradient(rgba(255, 252, 244, .8), rgba(255, 252, 244, .8)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #FBF7EE; border: 0; border-radius: 2px; box-shadow: 0 18px 30px -16px rgba(60, 30, 10, .45); transform: rotate(2deg); } .memories .qr-card figcaption { margin-top: 12px; font-family: "Kalam", var(--f-sans); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #1b1b1b; } /* the wall: polaroids held on the page with maroon album photo-corners */ .memories .wall__title { font-family: var(--f-script); color: #8B1E22; } .memories .wall { column-gap: clamp(22px, 3vw, 36px); } .memories .polaroid { position: relative; margin: 0 0 clamp(26px, 3.4vw, 40px); padding: 12px 12px 14px; border: 0; border-radius: 1px; background: linear-gradient(rgba(255, 252, 244, .82), rgba(255, 252, 244, .82)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #FBF7EE; box-shadow: 0 2px 3px rgba(0, 0, 0, .12), 0 20px 30px -18px rgba(60, 30, 10, .55); } .memories .polaroid::before { content: ""; position: absolute; inset: -5px; width: auto; height: auto; margin: 0; transform: none; pointer-events: none; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0H30L0 30Z' fill='%236E1518'/%3E%3Cpath d='M3 3H22L3 22Z' fill='none' stroke='%23E3B968' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0H30V30Z' fill='%236E1518'/%3E%3Cpath d='M8 3H27V22Z' fill='none' stroke='%23E3B968' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") 100% 0 / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0L30 30H0Z' fill='%236E1518'/%3E%3Cpath d='M3 8L22 27H3Z' fill='none' stroke='%23E3B968' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") 0 100% / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M30 0V30H0Z' fill='%236E1518'/%3E%3Cpath d='M27 8V27H8Z' fill='none' stroke='%23E3B968' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") 100% 100% / 30px 30px no-repeat; } .memories .polaroid .pcorner { display: none; } .memories .polaroid img { filter: none; } .memories .polaroid figcaption { padding-top: 12px; font-family: "Kalam", var(--f-sans); font-style: normal; font-size: 1.1rem; line-height: 1.3; color: #1b1b1b; text-align: center; } .memories .polaroid small { font-family: var(--f-display); font-style: italic; font-size: .78rem; color: #7A5E44; } /* polaroids sit at a slight, hand-placed tilt (rotate, so the reveal animation can't undo it) */ .memories .polaroid { rotate: var(--r, -1.5deg); transition: rotate .4s var(--ease-out), scale .4s var(--ease-out); } .memories .polaroid:hover { rotate: 0deg; scale: 1.02; } /* ---------- 47 MEMORIES: A STRIP OF FILM, GOLD BUTTONS, A PHOTO-STUDIO ENVELOPE ---- */ /* the strip runs edge to edge and drifts slowly; pause by hovering, swipe on phones */ .memories .wall--film { columns: auto; margin-inline: calc(50% - 50vw); } .film { position: relative; overflow: hidden; padding: 56px 0; background: #161110; box-shadow: 0 24px 40px -24px rgba(30, 10, 4, .6); transform: rotate(-1.2deg); margin-block: 20px; } .film::before, .film::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 30 16'%3E%3Crect x='8' y='2' width='14' height='12' rx='2.5' fill='%23E9DFC8'/%3E%3C/svg%3E") 0 0 / 30px 16px repeat-x; pointer-events: none; } .film::before { top: 8px; } .film::after { bottom: 8px; } .film__track { display: flex; gap: 14px; width: max-content; animation: filmDrift 70s linear infinite; } .film:hover .film__track { animation-play-state: paused; } @keyframes filmDrift { to { transform: translateX(calc(-50% - 7px)); } } .film__frame { position: relative; margin: 0; flex: none; width: clamp(180px, 22vw, 290px); aspect-ratio: 1; } .film__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .film__frame::before { content: attr(data-n); position: absolute; top: -22px; left: 6px; font-family: "Courier Prime", ui-monospace, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #E39A3B; } .film__frame figcaption { position: absolute; bottom: -23px; left: 0; right: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-family: "Courier Prime", ui-monospace, monospace; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E39A3B; } @media (prefers-reduced-motion: reduce) { .film { overflow-x: auto; } .film__track { animation: none; } } @media (hover: none) { .film { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* buttons: the same gold pill as "Post your wish" */ .memories .memories__buttons .btn, .memories .up-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #F3D58A, #D8A94E); color: #4A1010; font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: none; box-shadow: 0 10px 24px -12px rgba(60, 20, 4, .55), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .25s, box-shadow .25s; } .memories .memories__buttons .btn::before, .memories .up-send::before { content: none; } .memories .memories__buttons .btn:hover, .memories .up-send:not(:disabled):hover { transform: translateY(-2px); color: #4A1010; background: linear-gradient(180deg, #F6DC99, #DDB05A); } .memories .up-send { width: 100%; } .memories .up-send:disabled { opacity: .55; } /* the upload form: a kraft photo-studio envelope with maroon printing */ .memories .up-card--embed { position: relative; padding: clamp(40px, 5vw, 52px) clamp(24px, 4vw, 38px) 30px; border-radius: 3px; background: linear-gradient(rgba(214, 178, 126, .55), rgba(214, 178, 126, .55)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #D8B47E; box-shadow: inset 0 0 0 10px rgba(216, 180, 126, 0), inset 0 0 0 11px rgba(110, 21, 24, .75), inset 0 0 0 15px rgba(216, 180, 126, 0), inset 0 0 0 16px rgba(110, 21, 24, .5), 0 2px 3px rgba(0, 0, 0, .15), 0 30px 50px -26px rgba(60, 30, 10, .6); } /* the envelope's flap seam along the top */ .memories .up-card--embed::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none; background: linear-gradient(180deg, rgba(120, 80, 40, .18), transparent); clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); } .memories .up-card__title { font-family: var(--f-script); color: #5E1A1D; margin-bottom: 6px; } .memories .up-field__label { color: #5E1A1D; font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .memories .up-field input { border: 0; border-bottom: 1.5px solid rgba(110, 21, 24, .6); border-radius: 0; background: transparent; padding: 6px 2px; color: #1b1b1b; font-family: "Kalam", var(--f-sans); font-size: 1.2rem; box-shadow: none; } .memories .up-field input:focus { outline: none; background: rgba(255, 248, 232, .35); } .memories .up-field__hint { color: #6B4A2E; } .memories .up-drop { border: 1.5px dashed rgba(110, 21, 24, .55); border-radius: 4px; background: rgba(255, 248, 232, .35); color: #5E1A1D; } .memories .up-drop:hover { background: rgba(255, 248, 232, .6); } .memories .up-drop__label { font-family: var(--f-display); color: #5E1A1D; } .memories .up-drop__hint, .memories .memories__alt { color: #6B4A2E; } .memories .memories__alt { border-top-color: rgba(110, 21, 24, .3); } /* ---------- 48 MEMORIES: WARM PAPER (MATCH WISHLIST) + A CLEANER UPLOAD CARD ---- */ .memories.room--paper { background: linear-gradient(rgba(236, 228, 212, .55), rgba(236, 228, 212, .55)), url("../assets/images/home/tex-paper.webp") center / 1100px auto, #E6DCC8 !important; } .memories.room--paper .section-title { color: #5E1A1D; } .memories.room--paper .section-intro { color: #4A3A2C; } .memories.room--paper .memories__tag { font-family: var(--f-script); font-size: clamp(2rem, 4vw, 2.6rem); color: #8B1E22; } /* the upload card: warm card stock with a maroon double rule, like the moi slip and wishlist pieces */ .memories .memories__panel { gap: 22px; } .memories .up-card--embed { width: 100%; max-width: 31rem; padding: clamp(34px, 4vw, 46px) clamp(26px, 4vw, 40px) 32px; border-radius: 4px; text-align: center; background: linear-gradient(rgba(255, 251, 240, .74), rgba(255, 251, 240, .74)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #FBF4E2 !important; box-shadow: inset 0 0 0 7px rgba(251, 244, 226, .9), inset 0 0 0 8px rgba(139, 30, 34, .5), inset 0 0 0 11px rgba(251, 244, 226, .9), inset 0 0 0 12px rgba(139, 30, 34, .35), 0 30px 54px -26px rgba(60, 30, 10, .55) !important; } .memories .up-card--embed::before, .memories .up-card--embed::after { content: none !important; } .memories .up-card__lotus { display: block; height: 58px; width: auto; margin: 0 auto 8px; } .memories .up-card__title { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3rem); color: #5E1A1D; margin: 0 0 22px; } .memories .up-form { display: grid; gap: 0; text-align: left; } /* name field */ .memories .up-field__label { color: #8B1E22; font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .memories .up-field input { margin-top: 6px; border: 0; border-bottom: 1.5px solid rgba(139, 30, 34, .4); border-radius: 0; background: rgba(255, 250, 235, .45); padding: 9px 12px; color: #1b1b1b; font-family: var(--f-sans); font-size: 1.05rem; box-shadow: none; } .memories .up-field input:focus { outline: none; background: rgba(255, 252, 242, .85); box-shadow: inset 0 -2px 0 #8B1E22; } .memories .up-field__hint { color: #6B4A2E; } /* drop zone: big and inviting */ .memories .up-drop { display: grid; place-items: center; gap: 10px; margin-top: 20px; padding: clamp(30px, 5vw, 42px) 18px; border: 1.6px dashed rgba(139, 30, 34, .45); border-radius: 10px; background: rgba(255, 250, 235, .4); cursor: pointer; transition: background .25s, border-color .25s, transform .15s; } .memories .up-drop:hover, .memories .up-drop.is-over { background: rgba(255, 250, 235, .85); border-color: #8B1E22; } .memories .up-drop:active { transform: scale(.99); } .memories .up-drop svg { width: 42px; height: 42px; color: #8B1E22; } .memories .up-drop__label { font-family: var(--f-display); font-size: 1.35rem; color: #5E1A1D; } .memories .up-drop__hint { font-size: .82rem; color: #6B4A2E; } .memories .up-list { margin-top: 14px; } /* send: the site's gold pill, full width */ .memories .up-send { margin-top: 20px; width: 100%; } .memories .up-status { margin-top: 10px; text-align: center; color: #6E1518; } .memories .memories__alt { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(139, 30, 34, .3); color: #6B4A2E; text-align: center; font-size: .86rem; } /* QR: a small "scan from your phone" strip under the card (desktop only) */ .memories .qr-card--mini { max-width: 31rem; width: 100%; margin-inline: auto; padding: 12px 16px; gap: 14px; border-radius: 4px; align-items: center; background: rgba(255, 251, 240, .6); box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .25); } .memories .qr-card--mini .qr-card__frame { flex: none; padding: 6px; background: #fff; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .25); } .memories .qr-card--mini .qr-card__frame::before { content: none; } .memories .qr-card--mini .qr-card__code { width: 84px; height: 84px; margin: 0; padding: 3px; } .memories .qr-card--mini figcaption { margin: 0; text-align: left; max-width: 18rem; color: #5E1A1D; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; line-height: 1.4; } /* ---------- 49 FOOTER: THE FEAST FILLS IT, WARM SCRIM, NO FLAT BROWN -------- */ .footer { background: #2A0E0C; } .footer .footer__feast { position: absolute; inset: 0; height: auto; z-index: 0; background: url("../assets/images/home/feast.webp") center / cover no-repeat; } /* a soft warm scrim so the text reads, darker top and bottom, the feast glowing through the middle */ .footer .footer__feast::after { content: ""; position: absolute; inset: 0; height: auto; background: linear-gradient(180deg, rgba(30, 8, 6, .82) 0%, rgba(30, 8, 6, .5) 26%, rgba(30, 8, 6, .5) 60%, rgba(30, 8, 6, .9) 100%); } .footer .footer__inner { position: relative; z-index: 1; margin-top: 0; padding: clamp(120px, 16vw, 200px) var(--gutter) calc(80px + env(safe-area-inset-bottom)); } .footer .footer__feast-line { color: #F3D58A; text-shadow: 0 2px 14px rgba(20, 4, 2, .8); } .footer .footer__names { color: #FBF2DE; text-shadow: 0 2px 20px rgba(20, 4, 2, .7); } .footer .footer__names .amp { color: #E3B968; } .footer .footer__date { color: #F3D58A; } .footer .footer__line { color: rgba(251, 242, 222, .9); } .footer .footer__credit { margin-top: 44px; color: rgba(251, 242, 222, .65); } .footer .footer__credit a:hover { color: #F3D58A; } /* ---------- 50 SAVE THE DATE, FUN FLOURISHES, QR REMOVED, SMOOTHER REVEALS -- */ /* Save the Date header above the calendar */ .savedate { text-align: center; margin-bottom: clamp(30px, 5vw, 50px); } .savedate__fleur { display: block; width: clamp(42px, 6vw, 56px); height: auto; margin: 0 auto 14px; opacity: .9; } .savedate__kicker { font-family: var(--f-display); font-size: clamp(.8rem, 2.2vw, 1rem); font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: #8B1E22; } .savedate__kicker::before, .savedate__kicker::after { content: "·"; margin: 0 .6em; color: var(--brass); } /* remove the "scan from your phone" QR card in memories */ .memories .qr-card--mini, .memories #qr-card.qr-card--mini { display: none !important; } /* a few fun flourishes scattered on the light sections (faint, decorative) */ .calendar .calendar__wrap, .memories .memories__wrap, .guestbook .guestbook__book { position: relative; } .savedate::before, .savedate::after { content: ""; position: absolute; top: 0; width: clamp(34px, 5vw, 52px); aspect-ratio: 1; background: url("../assets/images/lotus-motif.svg") center / contain no-repeat; opacity: .16; pointer-events: none; } .savedate::before { left: 4vw; transform: rotate(-12deg); } .savedate::after { right: 4vw; transform: rotate(12deg); } @media (max-width: 720px) { .savedate::before, .savedate::after { display: none; } } /* a faint rosette watermark drifting in the guestbook corner */ .guestbook .guestbook__book::before { content: ""; position: absolute; z-index: 0; top: -30px; right: -10px; width: clamp(120px, 16vw, 200px); aspect-ratio: 1; background: url("../assets/images/rosette.svg") center / contain no-repeat; opacity: .08; pointer-events: none; filter: brightness(0) invert(1); } .guestbook .wish-form, .guestbook .wishes { position: relative; z-index: 1; } /* reveal: a gentler rise, and a scale touch for images; honour the existing is-in */ .js [data-reveal] { transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: var(--d, 0s); } .savedate[data-reveal] { transform: translateY(16px); } /* ---------- 52 GRAPHICS, SAVE THE DATE & FADE-IN POLISH ------------ */ /* ---- Keyframes ---- */ @keyframes spin-in { from { opacity: 0; transform: rotate(-180deg) scale(.4); } to { opacity: .9; transform: rotate(0deg) scale(1); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes toran-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } } /* ---- Toran garland (above savedate header, inside calendar wrap) ---- */ .cal-toran { display: block; width: 100%; margin-bottom: clamp(16px, 2.5vw, 28px); pointer-events: none; animation: toran-drop .9s var(--ease-out) .2s both; } .cal-toran__svg { display: block; width: 100%; height: auto; max-height: 72px; min-height: 36px; } /* ---- Savedate: layout with corner ornaments ---- */ .savedate { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 36px); position: relative; } .savedate__body { text-align: center; flex: 0 0 auto; } .savedate__corner { flex: 0 0 clamp(44px, 7vw, 72px); width: clamp(44px, 7vw, 72px); height: clamp(44px, 7vw, 72px); color: var(--maroon); } .savedate__corner--l { transform: scaleX(-1); } /* Rosette: spin-in animation once revealed */ .savedate.is-in .savedate__fleur { animation: spin-in .9s var(--ease-out) .05s both; } .savedate__fleur { display: block; width: clamp(54px, 9vw, 80px); height: auto; margin: 0 auto 14px; } /* Date band below the kicker */ .savedate__dateband { font-family: var(--f-display); font-size: clamp(.78rem, 2vw, .96rem); letter-spacing: .18em; color: var(--brass); margin-top: 10px; opacity: .85; } .savedate__dateband::before, .savedate__dateband::after { content: "✦"; margin: 0 .45em; font-size: .7em; } @media (max-width: 540px) { .savedate { flex-direction: column; gap: 8px; } .savedate__corner { display: none; } } /* ---- Section ornament dividers ---- */ .sec-ornament { display: flex; justify-content: center; margin-bottom: clamp(18px, 3vw, 28px); } .sec-ornament svg { width: min(80%, 320px); height: auto; overflow: visible; } /* ---- Story corner ornaments ---- */ .album__cover { position: relative; } .story-corner { position: absolute; width: 52px; height: 52px; opacity: .35; display: block; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A956' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='26' cy='26' r='10'/%3E%3Ccircle cx='26' cy='26' r='5'/%3E%3Ccircle cx='26' cy='26' r='1.8' fill='%23C8A956' stroke='none'/%3E%3Cline x1='26' y1='16' x2='26' y2='6'/%3E%3Cline x1='26' y1='36' x2='26' y2='46'/%3E%3Cline x1='16' y1='26' x2='6' y2='26'/%3E%3Cline x1='36' y1='26' x2='46' y2='26'/%3E%3Cline x1='18.8' y1='18.8' x2='12' y2='12'/%3E%3Cline x1='33.2' y1='33.2' x2='40' y2='40'/%3E%3Cline x1='33.2' y1='18.8' x2='40' y2='12'/%3E%3Cline x1='18.8' y1='33.2' x2='12' y2='40'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .story-corner--tl { top: 12px; left: 12px; } .story-corner--tr { top: 12px; right: 12px; transform: scaleX(-1); } /* ---- Hero text reveals ---- */ .hero__eyebrow[data-reveal], .hero__names[data-reveal], .hero__welcome[data-reveal] { /* Use a soft upward rise, not too far */ } .js .hero__names[data-reveal] { transform: translateY(18px); } .js .hero__names[data-reveal].is-in { transform: none; } /* ---- Story cover text reveals ---- */ .js .album__cover .section-title[data-reveal] { transform: translateY(20px); } .js .album__cover .section-intro[data-reveal] { transform: translateY(16px); } .js .album__cover .album__hint[data-reveal] { transform: translateY(12px); opacity: 0; } .js .album__cover .album__hint[data-reveal].is-in { opacity: 1; transform: none; } /* ---- Floating bob for the rosette once it's revealed ---- */ .savedate.is-in .savedate__fleur { animation: spin-in .9s var(--ease-out) .05s forwards, bob 4s ease-in-out 1.2s infinite; } /* ---------- 51 MUSIC ALWAYS-MINIMISED (no video shown) ------------- */ /* YT iframe kept alive in DOM but completely invisible */ .music__yt-bg { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: -9999px; top: -9999px; } /* Panel never shown; pill is the only UI */ #music-panel { display: none !important; } /* Hide the intro music switch if it somehow remains */ .intro__music { display: none !important; } /* ---------- 53 SAVE-THE-DATE ART, HERO WELCOME, WORD FADES, CELEBRATION CLEAN-UP ---------- */ .savedate-art { max-width: min(420px, 86vw); margin: 0 auto clamp(28px, 5vw, 48px); } .savedate-art img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 40px rgba(60, 20, 10, .28); } /* the 'come in' line waits until the guest scrolls, and sits below the names */ .hero__welcome { top: 9vh; bottom: auto; opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.2s ease; } .welcome-in .hero__welcome { opacity: 1; transform: none; } /* word-by-word fades (story and celebration cards) */ .js .fw { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--w, 0) * 45ms); } .js .words-in .fw { opacity: 1; transform: none; } /* celebrations: no ornament lines above or below the heading and intro */ #celebrations .section-head::after { display: none; } @media (prefers-reduced-motion: reduce) { .js .fw, .hero__welcome { opacity: 1; transform: none; transition: none; } } /* ---------- 54 INTRO AMPERSAND, SAVE-DATE BLEND, HAND SECTION, SCRAPBOOK WISHLIST, MOI SPACING ---------- */ /* intro: a gold ampersand between two gold-toned names, with fine rules either side */ .intro .intro__amp { display: inline-flex; align-items: center; gap: .32em; font-family: var(--f-display); font-style: italic; font-size: .42em; line-height: 1; margin: 0 .1em; color: transparent; background: linear-gradient(180deg, #fff6df, #E2AD38 55%, #b8862f); -webkit-background-clip: text; background-clip: text; } .intro .intro__amp::before, .intro .intro__amp::after { content: ""; width: clamp(18px, 4vw, 36px); height: 1px; background: linear-gradient(90deg, transparent, #E2AD38); } .intro .intro__amp::after { background: linear-gradient(90deg, #E2AD38, transparent); } /* calendar: the painted artwork sits behind the calendar as a soft watermark, not a separate card */ .calendar__wrap { position: relative; } .savedate-art { position: absolute; left: 0; right: 0; top: 120px; margin: 0 auto; width: min(560px, 100%); max-width: none; z-index: 0; pointer-events: none; opacity: .3; mix-blend-mode: multiply; } .savedate-art img { box-shadow: none; border-radius: 0; } .calendar__wrap .savedate-art[data-reveal].is-in { opacity: .34; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 45%, transparent 100%); } .calendar__wrap > .savedate-line, .calendar__wrap > .cal-board { position: relative; z-index: 2; } .savedate-line { margin: 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(2rem, 5.6vw, 3rem); line-height: 1.15; color: var(--maroon); text-align: center; } .savedate-line::before, .savedate-line::after { content: "\2726"; display: inline-block; margin: 0 .35em; font-size: .5em; vertical-align: middle; color: var(--turmeric); } /* need a hand: the painted hands rest on the card like a postcard tucked in */ .help-art { display: block; position: relative; z-index: 2; width: min(260px, 60vw); height: auto; margin: 0 auto -54px; transform: rotate(-2deg); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4)); border-radius: 3px; } .help-card { padding-top: clamp(64px, 9vw, 90px); } /* wishlist: a scrapbook page, each gift pasted on with washi tape */ .wish-grid { gap: 44px 26px; } .wish { background: #FFFBF2 radial-gradient(circle, rgba(139, 30, 34, .11) 1px, transparent 1.6px) 0 0 / 16px 16px; border: 9px solid #FFFBF2; border-radius: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 14px 22px -12px rgba(60, 20, 10, .45); } .wish::after { content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: rgba(226, 173, 56, .55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .wish:nth-child(2n)::after { transform: rotate(5deg); background: rgba(136, 63, 50, .42); } /* moi: close the empty space above the envelope */ .moi-room .moi__head { margin-bottom: 0; } .moi-room .moi__stage { margin-top: clamp(8px, 2vw, 18px); } .moi-room .menv { margin-top: 0; } /* ---------- 55 CUTOUT ILLUSTRATIONS (no paper), VISIBLE HAND, CALENDAR HEADER ---------- */ /* the save-the-date hand stands on its own, above the calendar, not behind it */ .savedate-art { position: relative; top: auto; width: min(260px, 62vw); margin: 0 auto -6px; z-index: 2; pointer-events: auto; opacity: 1; mix-blend-mode: normal; transform: none; } .calendar__wrap .savedate-art[data-reveal].is-in { opacity: 1; -webkit-mask-image: none; mask-image: none; } .savedate-art img { display: block; width: 100%; height: auto; background: none; filter: drop-shadow(0 10px 14px rgba(60, 20, 10, .25)); } /* calendar header: a painted brass top bar sitting on the calendar board */ .cal-art { display: block; position: relative; z-index: 2; width: min(620px, 92%); height: auto; margin: 0 auto -28px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(60, 20, 10, .22)); } .calendar__wrap > .cal-art { z-index: 3; } /* need a hand: the cut-out hands rest above the card */ .help-art { width: min(240px, 56vw); margin: 0 auto -10px; transform: none; border-radius: 0; background: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); } /* ---------- 56 MARK YOUR CALENDARS: LAMPS, CORNER FLOWERS, LOTUS MEDALLION ---------- */ .cal-hero { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 48px); width: 100%; } .cal-hero__text { text-align: center; } .cal-hero__lamp { width: clamp(70px, 13vw, 130px); height: auto; flex: none; filter: drop-shadow(0 12px 16px rgba(60, 20, 10, .35)); animation: calBob 4.6s ease-in-out infinite; } .cal-hero__lamp--r { animation-delay: -2.3s; } @keyframes calBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } .calendar .savedate-line { font-size: clamp(41.6px, 7.4vw, 70.4px); line-height: 1.05; margin: 0; background: linear-gradient(180deg, #A8322C, #602C30 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cal-hero__sub { margin: 8px 0 0; font-family: var(--f-display); font-style: italic; font-size: clamp(16.8px, 2.6vw, 20.8px); color: var(--coconut); } /* the board itself: a painted corner flower and a lotus medallion that slowly turns */ .cal-board__corner { position: absolute; right: -44px; top: -46px; width: clamp(110px, 18vw, 165px); height: auto; z-index: 4; pointer-events: none; transform: rotate(8deg); filter: drop-shadow(0 10px 12px rgba(60, 20, 10, .3)); } .cal-board__medal { position: absolute; left: -38px; bottom: -34px; width: clamp(92px, 14vw, 128px); height: auto; z-index: 4; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(60, 20, 10, .3)); animation: calSpin 26s linear infinite; } @keyframes calSpin { to { transform: rotate(360deg); } } @media (max-width: 560px) { .cal-board__corner { right: -18px; top: -30px; } .cal-board__medal { left: -14px; bottom: -22px; } } @media (prefers-reduced-motion: reduce) { .cal-hero__lamp, .cal-board__medal { animation: none; } } /* ---------- 57 CALENDAR SECTION: FAINT KOLAM OVERLAY, NO VISUAL ART ---------- */ .calendar__wrap::before { content: ""; position: absolute; inset: -60px -4vw; z-index: -1; pointer-events: none; opacity: .22; background: url("../assets/images/kolam-overlay.svg") center / 300px auto repeat; } /* ---------- 58 SAVE-THE-DATE LINE: NO DIAMONDS ---------- */ .savedate-line::before, .savedate-line::after { content: none; display: none; } /* ---------- 59 CONTACTS AS A VINTAGE TELEPHONE BOOK, WITH A CREAM LINE PHONE ---------- */ .help-art { width: min(190px, 44vw); height: auto; margin: 0 auto 26px; transform: none; border-radius: 0; background: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); } .help-card { background: #F4EBD6 repeating-linear-gradient(to bottom, transparent 0 31px, rgba(139, 30, 34, .16) 31px 32px); border: 0; border-left: 16px solid #8B1E22; border-radius: 3px; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .65); color: #2A160C; margin-bottom: 0; } .help-card::before { display: none; } .help-card::after { content: ""; position: absolute; top: -12px; right: 28px; width: 92px; height: 22px; background: #8B1E22; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); } .help-col { text-align: center; } .help-p__name { font-family: var(--f-display); font-weight: 600; letter-spacing: .02em; } .help-p__num { font-family: var(--f-display); font-weight: 600; letter-spacing: .06em; color: #5E1A1D; } .help-p__rel { font-family: var(--f-display); font-style: italic; color: #6B4A33; } .help-side { font-family: var(--f-display); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; } @media (min-width: 720px) { .help-card { grid-template-columns: 1fr 1fr; gap: 0 36px; } } /* ---------- 60 CONTACTS: DIRECTORY PAGES, NO ARCHES, MAROON BUTTONS ---------- */ .help-col::before, .help-col::after { display: none; } .help-col { padding: 34px clamp(18px, 4vw, 34px) 30px; border-right: 1px dashed rgba(139, 30, 34, .35); } .help-col { border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none; } .help-col:last-child { border-right: 0; } .help-card .help-p__btns a, .help-card .help-p__btns a.brand--call, .help-card .help-p__btns a.brand--wa, .help-card .help-p__btns a:first-child { background: none !important; color: #5E1A1D !important; border: 1.5px solid #8B1E22 !important; text-shadow: none; } .help-card .help-p__btns a:hover, .help-card .help-p__btns a:focus-visible { background: #5E1A1D !important; color: #F8EFD6 !important; } /* ---------- 61 CONTACTS AS A VINTAGE PHONE BOOK (REFERENCE LAYOUT) ---------- */ .pb { position: relative; max-width: 900px; margin: 0 auto; padding-right: 46px; } .pb-head { display: flex; justify-content: flex-end; background: #EFE7D0; border: 1px solid rgba(94, 26, 29, .5); border-bottom: 0; height: 52px; } .pb-head__cell { display: flex; align-items: center; justify-content: center; width: 96px; border-left: 1px solid rgba(94, 26, 29, .35); } .pb-head__cell svg { width: 26px; height: 26px; fill: none; stroke: #5E1A1D; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .help-card { max-width: none; background: #F3ECD9; border: 1px solid rgba(94, 26, 29, .5); border-left: 1px solid rgba(94, 26, 29, .5); border-radius: 0; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6); padding: 0; gap: 0; color: #2A160C; } .help-card::after { display: none; } .help-col { padding: 26px clamp(18px, 3vw, 28px); border-right: 0; } .help-col + .help-col { border-left: 1px solid rgba(94, 26, 29, .35); } .help-p { padding: 16px 0; } .help-p + .help-p { padding-top: 16px; border-top: 1px dotted rgba(94, 26, 29, .4); } .help-side { font-size: .8rem; letter-spacing: .2em; color: #5E1A1D; } .pb-index { position: absolute; right: 0; top: 52px; width: 42px; display: flex; flex-direction: column; gap: 3px; } .pb-index span { display: flex; align-items: center; justify-content: center; min-height: 26px; background: #F3ECD9; border: 1px solid rgba(94, 26, 29, .4); font-family: var(--f-display); font-size: .6rem; letter-spacing: .02em; color: #2A160C; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); } @media (max-width: 560px) { .pb { padding-right: 34px; } .pb-index { width: 30px; } .pb-index span { font-size: .5rem; min-height: 22px; } .pb-head__cell { width: 64px; } } /* ---------- 62 CONTACTS: PHONE SITS ON THE BOOK, NO ORNAMENT LINES, TIGHTER SPACING ---------- */ #contacts .sec-ornament { display: none; } #contacts .section-head::after { display: none; } #contacts.help { padding-block: clamp(80px, 9vw, 120px); } #contacts .section-head { margin-bottom: 0; } .pb { margin-top: clamp(130px, 22vw, 180px); } .pb-phone { position: absolute; left: clamp(10px, 4vw, 40px); top: calc(34px - clamp(130px, 22vw, 180px)); width: clamp(130px, 22vw, 180px); height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); } .help-card { background: #F6EFDC; } .pb-head { background: #EDE4CB; } /* ---------- 63 CONTACTS PHONE: CREAM LINES BLEND INTO THE MAROON (BLACK FILL DROPS OUT) ---------- */ .pb-phone { mix-blend-mode: normal; filter: none; top: calc(8px - clamp(130px, 22vw, 180px)); } /* ---------- 64 CONTACTS: TWO TAPED POSTCARDS, A LOTUS SEAL FOR EACH PERSON ---------- */ .pb { padding-right: 0; max-width: 900px; margin-top: clamp(120px, 20vw, 160px); } .pb-head, .pb-index { display: none; } .pb-phone { left: 50%; transform: translateX(-50%); } .help-card { background: none; border: 0; box-shadow: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 44px; } @media (min-width: 760px) { .help-card { grid-template-columns: 1fr 1fr; gap: 34px; } } .help-rule { display: none; } .help-col { position: relative; padding: 46px clamp(20px, 4vw, 34px) 30px !important; border: 0 !important; background: #F6EFDC !important; border-radius: 2px !important; box-shadow: inset 0 0 0 9px #F6EFDC, inset 0 0 0 10px #8B1E22, 0 22px 34px -16px rgba(0, 0, 0, .6) !important; } .help-col:nth-child(odd) { transform: rotate(-1.3deg); } .help-col:nth-child(even) { transform: rotate(1.1deg); } .help-col::before { display: block; content: ""; position: absolute; inset: auto; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; border: 0; border-radius: 0; background: rgba(226, 173, 56, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-3deg); } .help-col:nth-child(even)::before { background: rgba(136, 63, 50, .45); transform: rotate(3deg); } .help-side { display: inline-block; margin: 0 0 18px; padding: 8px 22px; background: #5E1A1D; color: #F8EFD6; font-size: .8rem; letter-spacing: .18em; } .help-list { gap: 0; } .help-p { padding: 20px 0; text-align: center; } .help-p + .help-p { border-top: 1px dotted rgba(94, 26, 29, .45); } .help-p::before { content: ""; display: block; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; background: url("../assets/images/lotus-motif.svg") center / 56% no-repeat; box-shadow: 0 0 0 3px #F6EFDC, 0 0 0 4px #8B1E22; } .help-p__num { font-size: 1.3rem; } @media (prefers-reduced-motion: reduce) { .help-col { transform: none !important; } } /* ---------- 65 CONTACTS: ORGANIC BUBBLES ON THE MAROON, JOINED BY THE PHONE CORD ---------- */ .pb-cord { position: absolute; left: 50%; top: 0; width: 70px; height: 96px; margin-left: -35px; z-index: 0; overflow: visible; pointer-events: none; opacity: .7; } .pb-phone { z-index: 2; } .help-card { position: relative; z-index: 1; } .help-col { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 6px 0 !important; transform: none !important; text-align: center; } .help-col::before { display: none !important; } .help-side { background: none; padding: 0; margin: 0 0 6px; font-family: var(--f-script); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.1; letter-spacing: 0; text-transform: none; color: #E2AD38; } .help-p { margin: 14px 0 0; padding: 24px 26px 22px; background: rgba(248, 239, 214, .07); border: 1px dashed rgba(248, 239, 214, .38); border-radius: 46px 62px 50px 70px / 58px 46px 64px 48px; } .help-p + .help-p { border-top: 1px dashed rgba(248, 239, 214, .38); border-radius: 64px 44px 70px 48px / 46px 62px 50px 60px; padding-top: 24px; } .help-p::before { background-color: #F6EFDC; box-shadow: 0 0 0 3px rgba(248, 239, 214, .18); } .help-card .help-p__name { color: #F8EFD6; font-size: 1.35rem; } .help-card .help-p__rel { color: rgba(248, 239, 214, .74); } .help-card .help-p__num { color: #E2AD38; font-size: 1.35rem; } .help-card .help-p__btns a, .help-card .help-p__btns a.brand--call, .help-card .help-p__btns a.brand--wa { background: none !important; color: #F8EFD6 !important; border: 1.5px solid rgba(248, 239, 214, .7) !important; } .help-card .help-p__btns a:first-child { background: #E2AD38 !important; color: #3A1D12 !important; border-color: #E2AD38 !important; } .help-card .help-p__btns a:hover, .help-card .help-p__btns a:focus-visible { background: #F8EFD6 !important; color: #5E1A1D !important; } @media (min-width: 760px) { .pb-cord { height: 100%; } .help-card { gap: 96px; } .help-col:nth-child(even) { margin-top: 70px; } } /* ---------- 66 CONTACTS: THE PHONE IS A LARGE BACKGROUND OVERLAY ---------- */ #contacts { position: relative; overflow: hidden; } #contacts > .pb-phone { position: absolute; left: 50%; top: 52%; width: min(820px, 135vw); max-width: none; height: auto; margin: 0; transform: translate(-50%, -50%) rotate(-9deg); opacity: .17; z-index: 0; filter: none; pointer-events: none; } #contacts .wrap { position: relative; z-index: 1; } .pb-cord { display: none; } .pb { margin-top: 30px; } /* ---------- 67 CONTACTS READABILITY: FAINTER PHONE, SOLID BUBBLES ---------- */ #contacts > .pb-phone { opacity: .1; } .help-p { background: rgba(70, 16, 20, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-color: rgba(248, 239, 214, .45); } .help-card .help-p__name, .help-card .help-p__num, .help-card .help-p__rel { text-shadow: 0 1px 6px rgba(30, 6, 8, .6); } .help-card .help-p__rel { color: rgba(248, 239, 214, .86); } /* ---------- 68 CONTACT BUBBLES: GOLD KOLAM CORNERS, DOT PATTERN, GOLD HAIRLINE ---------- */ .help-p { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E2AD38' stroke-width='1.3' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%23E2AD38' opacity='.85'%3E%3Ccircle cx='36' cy='32' r='2'/%3E%3Ccircle cx='6' cy='30' r='1.6'/%3E%3Ccircle cx='66' cy='30' r='1.6'/%3E%3Ccircle cx='36' cy='64' r='1.4'/%3E%3C/g%3E%3C/svg%3E") left 20px top 16px / 42px 42px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E2AD38' stroke-width='1.3' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%23E2AD38' opacity='.85'%3E%3Ccircle cx='36' cy='32' r='2'/%3E%3Ccircle cx='6' cy='30' r='1.6'/%3E%3Ccircle cx='66' cy='30' r='1.6'/%3E%3Ccircle cx='36' cy='64' r='1.4'/%3E%3C/g%3E%3C/svg%3E") right 20px bottom 14px / 42px 42px no-repeat, radial-gradient(circle, rgba(226, 173, 56, .2) 1.2px, transparent 1.8px) 0 0 / 20px 20px, linear-gradient(155deg, rgba(118, 30, 34, .92), rgba(58, 12, 16, .94)); border: 1px solid rgba(226, 173, 56, .55); box-shadow: inset 0 0 0 6px rgba(58, 12, 16, .55), inset 0 0 0 7px rgba(226, 173, 56, .4), 0 18px 28px -16px rgba(0, 0, 0, .6); } .help-p::before { box-shadow: 0 0 0 3px #E2AD38, 0 0 0 6px rgba(226, 173, 56, .28); } .help-side { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } /* ---------- 69 CONTACTS: CREAM POSTCARDS IN RED FOLK STYLE, PHONE BESIDE THE TITLE ---------- */ .help .section-head { position: relative; } .section-head > .pb-phone { position: absolute; left: calc(50% + 150px); top: -34px; width: clamp(96px, 15vw, 150px); height: auto; transform: rotate(14deg); opacity: 1; z-index: 2; pointer-events: none; mix-blend-mode: normal; } @media (max-width: 520px) { .section-head > .pb-phone { left: auto; right: 2px; top: -58px; width: 80px; } } .help-card .help-p { position: relative; padding: 26px 26px 26px; background: radial-gradient(circle, rgba(139, 30, 34, .1) 1px, transparent 1.6px) 0 0 / 18px 18px, #F6EFDC; border: 0; border-radius: 3px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 8px #F6EFDC, inset 0 0 0 9px #8B1E22, 0 18px 28px -14px rgba(0, 0, 0, .65); } .help-card .help-p + .help-p { border: 0; border-radius: 3px; padding-top: 26px; } .help-card .help-p:nth-child(odd) { transform: rotate(-1.3deg); } .help-card .help-p:nth-child(even) { transform: rotate(1.1deg); } .help-card .help-p::after { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: rgba(226, 173, 56, .65); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-3deg); } .help-card .help-p:nth-child(even)::after { background: rgba(136, 63, 50, .45); transform: rotate(3deg); } .help-card .help-p::before { width: 96px; height: 96px; margin: 0 auto 6px; border-radius: 0; background: transparent center / contain no-repeat; box-shadow: none; } .help-col--bride .help-p:nth-child(1)::before { background-image: url("../assets/images/home/contact-art-1.webp"); } .help-col--bride .help-p:nth-child(2)::before { background-image: url("../assets/images/home/contact-art-2.webp"); } .help-col--groom .help-p:nth-child(1)::before { background-image: url("../assets/images/home/contact-art-3.webp"); } .help-col--groom .help-p:nth-child(2)::before { background-image: url("../assets/images/home/contact-art-4.webp"); } .help-card .help-p__name { color: #5E1A1D; text-shadow: none; } .help-card .help-p__rel { color: #7A5A42; text-shadow: none; } .help-card .help-p__num { color: #8B1E22; text-shadow: none; font-weight: 700; } .help-card .help-p__btns a, .help-card .help-p__btns a.brand--call, .help-card .help-p__btns a.brand--wa { background: none !important; color: #5E1A1D !important; border: 1.5px solid #8B1E22 !important; } .help-card .help-p__btns a:first-child { background: #5E1A1D !important; color: #F8EFD6 !important; border-color: #5E1A1D !important; } .help-card .help-p__btns a:hover, .help-card .help-p__btns a:focus-visible { background: #8B1E22 !important; color: #F8EFD6 !important; } .help-side { margin-bottom: 24px; } @media (prefers-reduced-motion: reduce) { .help-card .help-p { transform: none !important; } } /* ---------- 70 CONTACTS: ONE PERFORATED STAMP PER FAMILY SIDE, PRINTED IN RED INK ---------- */ .help-card { gap: 54px; } @media (min-width: 760px) { .help-card { gap: 46px; align-items: start; } } .help-col.stamp { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; text-align: center; } .help-col--bride.stamp { transform: rotate(-1.8deg) !important; } .help-col--groom.stamp { transform: rotate(1.5deg) !important; } @media (min-width: 760px) { .help-col--groom.stamp { margin-top: 56px !important; } } .stamp--contact .stamp__paper { --s: 20px; padding: 11px; background: linear-gradient(rgba(255, 252, 242, .78), rgba(255, 252, 242, .78)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #FBF4E2; } .stamp--contact .stamp__face { margin: 8px; padding: 34px clamp(20px, 4vw, 34px) 30px; color: #3A1D12; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%238B1E22' opacity='.9'%3E%3Ccircle cx='36' cy='32' r='2.2'/%3E%3Ccircle cx='6' cy='30' r='1.8'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") left 9px top 9px / 34px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%238B1E22' opacity='.9'%3E%3Ccircle cx='36' cy='32' r='2.2'/%3E%3Ccircle cx='6' cy='30' r='1.8'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") right 9px top 9px / 34px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%238B1E22' opacity='.9'%3E%3Ccircle cx='36' cy='32' r='2.2'/%3E%3Ccircle cx='6' cy='30' r='1.8'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") left 9px bottom 9px / 34px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%238B1E22' stroke-width='1.6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M36 6c8 8 14 14 24 24-10 10-16 16-24 24C28 46 22 40 12 30 22 20 28 14 36 6z'/%3E%3Cpath d='M36 20c4 4 8 8 12 12-4 4-8 8-12 12-4-4-8-8-12-12 4-4 8-8 12-12z'/%3E%3C/g%3E%3Cg fill='%238B1E22' opacity='.9'%3E%3Ccircle cx='36' cy='32' r='2.2'/%3E%3Ccircle cx='6' cy='30' r='1.8'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") right 9px bottom 9px / 34px 34px no-repeat; box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .75), inset 0 0 0 5px rgba(251, 244, 226, 0), inset 0 0 0 6px rgba(139, 30, 34, .45); } .stamp--contact .help-side { display: block; margin: 0 0 8px; padding: 0; background: none; font-family: var(--f-display); font-size: .86rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #8B1E22; text-shadow: .4px .4px 0 rgba(139, 30, 34, .3); } .stamp--contact .help-list { gap: 0; } .stamp--contact .help-p, .stamp--contact .help-p + .help-p { margin: 0; padding: 20px 0 18px; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .stamp--contact .help-p + .help-p { border-top: 1px dashed rgba(139, 30, 34, .45); } .stamp--contact .help-p::before, .stamp--contact .help-p::after { display: none !important; } .stamp--contact .help-p__name { font-size: 1.4rem; color: #5E1A1D; text-shadow: .4px .4px 0 rgba(139, 30, 34, .25); } .stamp--contact .help-p__rel { color: #7A5A42; } .stamp--contact .help-p__num { font-family: "Anton", var(--f-sans); font-weight: 400; font-size: 1.65rem; letter-spacing: .04em; color: #8B1E22; text-shadow: .5px .5px 0 rgba(139, 30, 34, .3); } @media (prefers-reduced-motion: reduce) { .help-col.stamp { transform: none !important; } } /* ---------- 71 CONTACTS: OLD PAPER WITH TORN EDGES, GROOM AND BRIDE FOLK FIGURES OVERLAID ---------- */ .help-col--bride { --fig: url("../assets/images/home/folk-bride.webp"); } .help-col--groom { --fig: url("../assets/images/home/folk-groom.webp"); } .stamp--contact .stamp__paper { padding: 0; -webkit-mask: url("../assets/images/deckle-mask.svg") 0 0 / 100% 100% no-repeat; mask: url("../assets/images/deckle-mask.svg") 0 0 / 100% 100% no-repeat; background: radial-gradient(ellipse 60% 45% at 15% 12%, rgba(176, 124, 58, .3), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 92%, rgba(140, 88, 36, .34), transparent 72%), radial-gradient(circle at 74% 22%, rgba(120, 70, 28, .16) 0 5px, transparent 6px), radial-gradient(circle at 22% 78%, rgba(120, 70, 28, .14) 0 4px, transparent 5px), linear-gradient(rgba(233, 211, 164, .62), rgba(233, 211, 164, .62)), url("../assets/images/home/tex-paper.webp") center / 560px auto, #E6D1A5; box-shadow: inset 0 0 46px rgba(110, 62, 24, .38); } .stamp--contact .stamp__face { position: relative; margin: 0; padding: 44px clamp(24px, 5vw, 40px) 38px; overflow: hidden; background: none; box-shadow: none; } .stamp--contact .stamp__face::before { content: ""; position: absolute; right: -8%; bottom: -3%; width: 80%; height: 94%; background: var(--fig) right bottom / contain no-repeat; opacity: .3; mix-blend-mode: multiply; pointer-events: none; } .stamp--contact .stamp__face > * { position: relative; z-index: 1; } .stamp--contact .help-side { color: #7A1A1E; } .stamp--contact .help-p__name { color: #46100F; } .stamp--contact .help-p__rel { color: #6A4A30; } .stamp--contact .help-p__num { color: #7A1A1E; } .stamp--contact .help-p + .help-p { border-top-color: rgba(122, 26, 30, .4); } /* ---------- 72 CONTACT CARDS: CLASSIC SOUTH INDIAN LAYOUT (SCRIPT HEADING, KOLAM RULES, LEFT TEXT, FIGURE AT RIGHT) ---------- */ .stamp--contact { text-align: left; } .stamp--contact .stamp__face { padding: 40px 30px 62px 34px; outline: 1.5px solid rgba(122, 26, 30, .5); outline-offset: -14px; box-shadow: inset 0 0 0 18px rgba(0, 0, 0, 0), inset 0 0 0 19px rgba(122, 26, 30, .28); } .stamp--contact .stamp__face::before { width: 66%; height: 90%; right: -4%; bottom: 14px; opacity: .42; } .stamp--contact .stamp__face::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 24px; height: 24px; background: var(--kolam-orn) center / auto 100% repeat-x; opacity: .75; pointer-events: none; z-index: 1; } .stamp--contact .help-side { margin: 0 0 4px; font-family: var(--f-script); font-weight: 400; font-size: clamp(2.3rem, 7vw, 3rem); line-height: 1.05; letter-spacing: 0; text-transform: none; text-align: left; color: #7A1A1E; text-shadow: none; } .stamp--contact .help-side::after { content: ""; display: block; width: 140px; height: 16px; margin: 8px 0 4px; background: var(--kolam-orn) left center / contain no-repeat; } .stamp--contact .help-list { padding-right: 30%; } .stamp--contact .help-p, .stamp--contact .help-p + .help-p { text-align: left; padding: 16px 0 6px; } .stamp--contact .help-p + .help-p { position: relative; border-top: 0; padding-top: 34px; } .stamp--contact .help-p + .help-p::before { content: ""; display: block !important; position: absolute; top: 8px; left: 0; width: 110px; height: 14px; margin: 0; border-radius: 0; background: var(--kolam-orn) left center / contain no-repeat; box-shadow: none; opacity: .8; } .stamp--contact .help-p__rel { order: -1; display: block; margin: 0 0 2px; font-family: var(--f-sans); font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8B1E22; } .stamp--contact .help-p__name { margin: 0; font-size: 1.5rem; line-height: 1.15; } .stamp--contact .help-p__num { margin: 6px 0 0; font-size: 1.55rem; } .stamp--contact .help-p { display: flex; flex-direction: column; align-items: flex-start; } .stamp--contact .help-p__btns { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; width: auto; max-width: none; margin-top: 12px; } .stamp--contact .help-p__btns a { flex: 0 0 auto; min-height: 38px; padding: 6px 14px; font-size: .72rem; } @media (max-width: 420px) { .stamp--contact .help-list { padding-right: 22%; } .stamp--contact .help-p__num { font-size: 1.35rem; } } /* ---------- 73 CONTACT CARDS: REFINED FRAME FAR FROM THE EDGE, FINE RULES, ROOMIER TYPE ---------- */ .stamp--contact .stamp__face { padding: 62px 44px 62px 52px; outline: 1px solid rgba(122, 26, 30, .45); outline-offset: -26px; box-shadow: inset 0 0 0 29px rgba(0, 0, 0, 0), inset 0 0 0 30px rgba(122, 26, 30, .22); } .stamp--contact .stamp__face::after { display: none; } .stamp--contact .stamp__face::before { width: 62%; height: 84%; right: 6%; bottom: 40px; opacity: .46; } /* fine rule: a short red line ending in a small dot */ .stamp--contact .help-side::after { width: 120px; height: 10px; margin: 10px 0 6px; background: linear-gradient(#8B1E22, #8B1E22) left center / 96px 1px no-repeat, radial-gradient(circle, #8B1E22 2.6px, transparent 3.2px) right center / 10px 10px no-repeat; } .stamp--contact .help-p + .help-p { padding-top: 40px; } .stamp--contact .help-p + .help-p::before { top: 14px; width: 120px; height: 10px; background: linear-gradient(rgba(139, 30, 34, .55), rgba(139, 30, 34, .55)) left center / 96px 1px no-repeat, radial-gradient(circle, rgba(139, 30, 34, .7) 2.4px, transparent 3px) right center / 10px 10px no-repeat; opacity: 1; } .stamp--contact .help-list { padding-right: 34%; } .stamp--contact .help-p__name { font-size: 1.6rem; } .stamp--contact .help-p__num { font-size: 1.5rem; letter-spacing: .06em; } .stamp--contact .help-p__btns { gap: 10px; margin-top: 14px; } @media (max-width: 420px) { .stamp--contact .stamp__face { padding: 54px 30px 54px 38px; outline-offset: -20px; box-shadow: inset 0 0 0 23px rgba(0, 0, 0, 0), inset 0 0 0 24px rgba(122, 26, 30, .22); } .stamp--contact .help-list { padding-right: 24%; } } /* ---------- 74 CONTACTS: KEEP THE STACKING STICKY (NO EMPTY SPACE BELOW) ---------- */ #contacts.stack-sec { position: sticky; top: var(--stick, 0px); } /* ---------- 75 CONTACTS: FULL-STRENGTH GROOM AND BRIDE FIGURES ---------- */ .stamp--contact .stamp__face::before { opacity: 1; } /* ---------- 76 GUESTBOOK CARDS: HAND-TORN PAPER EDGES, FIBRE TEXTURE, SOFT SHADOW ---------- */ .guestbook .wish-form.pform { filter: drop-shadow(0 16px 18px rgba(20, 8, 4, .5)) drop-shadow(0 2px 3px rgba(20, 8, 4, .35)); } .guestbook .pcard2 { -webkit-mask: url("../assets/images/home/torn-edge.webp") center / 100% 100% no-repeat; mask: url("../assets/images/home/torn-edge.webp") center / 100% 100% no-repeat; } .guestbook .pcard2::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 38% 30% at 12% 18%, rgba(150, 96, 40, .16), transparent 70%), radial-gradient(ellipse 30% 26% at 90% 84%, rgba(120, 72, 30, .18), transparent 72%), radial-gradient(circle at 66% 30%, rgba(120, 70, 28, .10) 0 4px, transparent 5px), radial-gradient(circle at 30% 74%, rgba(120, 70, 28, .08) 0 3px, transparent 4px); } .guestbook .wishes .wish-card.pmini { -webkit-mask: url("../assets/images/home/torn-edge-card.webp") center / 100% 100% no-repeat; mask: url("../assets/images/home/torn-edge-card.webp") center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(20, 8, 4, .35)); } /* ---------- 77 GUESTBOOK CARDS: BACK TO THE REAL POSTCARD SCAN, STRAIGHT CLEAN EDGES ---------- */ .guestbook .pcard2 { -webkit-mask: none; mask: none; border-radius: 3px; } .guestbook .pcard2::before { background: radial-gradient(ellipse 40% 32% at 10% 14%, rgba(150, 96, 40, .1), transparent 72%), radial-gradient(ellipse 34% 28% at 92% 90%, rgba(120, 72, 30, .12), transparent 74%); } .guestbook .wishes .wish-card.pmini { -webkit-mask: none; mask: none; border-radius: 3px; } /* ---------- 78 GUESTBOOK CARDS: SAME PERFORATED CREAM STAMP PAPER AS THE CELEBRATIONS ---------- */ .guestbook .wish-form.pform, .guestbook .wishes .wish-card.pmini { --r: 6px; --s: 18px; padding: 12px; filter: none; background: linear-gradient(rgba(255, 249, 232, .62), rgba(255, 249, 232, .62)), url("../assets/images/home/tex-paper.webp") center / 600px auto, #F8EFD6; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round; } .guestbook .wish-form.pform { box-shadow: none; } .guestbook .pcard2 { background: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-mask: none !important; mask: none !important; } .guestbook .pcard2::before { display: none; } .guestbook__book { filter: drop-shadow(0 14px 16px rgba(20, 8, 4, .42)); } .guestbook .wishes .wish-card.pmini::before, .guestbook .wishes .wish-card.pmini::after { content: none; } /* ---------- 79 CONTACTS HEADING: PHONE SITS IN THE CORNER, CLEAR OF THE TEXT ---------- */ .section-head > .pb-phone { left: auto !important; right: -12px; top: -64px; width: clamp(84px, 11vw, 120px) !important; transform: rotate(12deg); } @media (max-width: 520px) { .section-head > .pb-phone { right: -4px; top: -54px; width: 76px !important; } } /* ---------- 80 CALENDAR ON PHONES: COUNTDOWN CLOCK NO LONGER OVERLAPS THE MONTH ---------- */ @media (max-width: 560px) { .calendar .cal-board .cal__boxes { grid-template-columns: .9fr 1fr 1.15fr; } .calendar .cal-board .cal__box { min-width: 0; overflow: hidden; padding: 8px 4px; } .calendar .cal-board .cal__hms { font-size: 16.8px; white-space: nowrap; letter-spacing: 0; } .calendar .cal-board .cal__hms span { font-size: inherit; } .calendar .cal-board .cal__wk { font-size: 18.4px; white-space: nowrap; } .calendar .cal-board .cal__wd { font-size: 11.52px; white-space: nowrap; } } /* ---------- 81 GUESTBOOK POSTCARD: NEW ARTWORK (FEMALE HAND + LOTUS, KOLAM BORDER, AT STAMP) ---------- */ @media (min-width: 640px) { .guestbook .pcard2 { display: block; aspect-ratio: 3 / 2; padding: 0; transform: none; border-radius: 3px; background: url("../assets/images/home/guestbook-postcard.webp") center / 100% 100% no-repeat, #EFE3C4 !important; box-shadow: inset 0 0 38px rgba(96, 52, 22, .28), inset 0 0 6px rgba(96, 52, 22, .22), 0 26px 44px -20px rgba(10, 2, 2, .8) !important; } .guestbook .pcard2__head { position: absolute; left: 6%; top: 9%; width: 38%; color: #5E1A1D; } .guestbook .pcard2__title { margin: 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.05; color: #7A1A1E; } .guestbook .pcard2__desc { margin: 10px 0 0; font-family: var(--f-display); font-style: italic; font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.5; color: #5C3A22; } .guestbook .pcard2__msg { position: absolute; left: 52%; top: 26%; width: 40%; height: 40%; } .guestbook .pcard2__stamp { display: none; } .guestbook .pcard2__line { position: absolute; left: 52%; width: 40%; } .guestbook .pcard2__line--1 { top: 72%; } .guestbook .pcard2__line--2 { top: 84%; } .guestbook .pcard2__line .up-field__hint { display: none; } } @media (max-width: 639px) { .guestbook .pcard2__head { margin-bottom: 14px; } .guestbook .pcard2__title { font-family: var(--f-script); font-size: 2.2rem; color: #7A1A1E; } .guestbook .pcard2__desc { font-family: var(--f-display); font-style: italic; color: #5C3A22; } } /* ---------- 82 GUESTBOOK POSTCARD ON PHONES: ARTWORK AS A TOP BANNER, TEXT BELOW ---------- */ @media (max-width: 639px) { .guestbook .pcard2 { background: url("../assets/images/home/guestbook-postcard.webp") center top / 100% auto no-repeat, #EFE3C4 !important; border-radius: 3px; padding-top: 72%; box-shadow: 0 18px 30px -18px rgba(10, 2, 2, .75) !important; } .guestbook .pcard2__head { position: static; padding-top: 72%; margin: 0; padding-left: 6px; padding-right: 6px; } .guestbook .pcard2__head::before { content: ""; } } /* ---------- 83 GUESTBOOK POSTCARD: NO HEADING ON THE CARD; FOLK-STYLE FIELDS (KOLAM RULES, SCRIPT LABELS, NO BOXES) ---------- */ .guestbook .pcard2__head { display: none !important; } .guestbook .pcard2 .pcard2__label { font-family: var(--f-script); font-size: 1.45rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #7A1A1E; gap: 6px; } .guestbook .pcard2 .pcard2__label svg { display: none; } .guestbook .pcard2 .up-field textarea { background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(122, 26, 30, .22) 33px 34px) !important; box-shadow: none !important; border: 0; border-radius: 0; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; line-height: 34px; padding: 0 2px; color: #3E2415; } .guestbook .pcard2 .up-field textarea:focus { box-shadow: none !important; background-color: transparent !important; } .guestbook .pcard2 .up-field input { background: var(--kolam-orn) left bottom / 100% 14px no-repeat transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: #3E2415; padding: 4px 2px 6px; } .guestbook .pcard2 .up-field input:focus { box-shadow: none !important; background-color: transparent !important; } .guestbook .pcard2 .up-field__hint { font-family: var(--f-display); font-style: italic; color: #6B4A2E !important; } .guestbook .pcard2 .wish-form__count { color: #6B4A2E; } /* ---------- 84 GUESTBOOK POSTCARD: HAND-DRAWN RED FIELD LINES, POST BUTTON INSIDE THE CARD, ILLUSTRATED RED STAMP-BUTTON ---------- */ .guestbook .pcard2 .pcard2__line input { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 3, 70 9, 110 6 S 170 3, 215 7 S 300 9, 345 5 S 380 8, 398 6' fill='none' stroke='%23A3262B' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 12px no-repeat transparent !important; padding-bottom: 8px; } .guestbook .pcard2 .pcard2__line input:focus { background-color: transparent !important; } .guestbook .pcard2 .pcard2__line .pcard2__label { font-family: var(--f-script); } @media (min-width: 640px) { .guestbook .wish-form.pform { position: relative; } .guestbook .pform__foot { position: absolute; left: 52%; width: 40%; bottom: 4.5%; margin: 0; display: grid; justify-items: center; gap: 4px; } .guestbook .pform__send { min-height: 48px; padding: 0 26px; background: #A3262B !important; color: #FBEFD6 !important; border: 2px solid #5E1A1D !important; border-radius: 22px 14px 24px 12px / 14px 22px 12px 20px !important; box-shadow: 3px 4px 0 #5E1A1D, inset 0 0 0 3px #A3262B, inset 0 0 0 4px rgba(251, 239, 214, .55) !important; font-family: var(--f-script) !important; font-size: 1.35rem !important; letter-spacing: .01em; } .guestbook .pform__send:hover { transform: translate(-1px, -2px); } .guestbook #wish-status { color: #5E1A1D; } } @media (max-width: 639px) { .guestbook .pform__foot { margin-top: 22px; } .guestbook .pform__send { background: #A3262B !important; color: #FBEFD6 !important; border: 2px solid #5E1A1D !important; border-radius: 22px 14px 24px 12px / 14px 22px 12px 20px !important; box-shadow: 3px 4px 0 #5E1A1D !important; font-family: var(--f-script) !important; font-size: 1.35rem !important; } } /* ---------- 84 GUESTBOOK POSTCARD: RULED FIELD LINES, POST BUTTON INSIDE THE CARD IN FLAT RED ---------- */ .guestbook .pcard2 .pcard2__line input { background: transparent !important; border: 0 !important; border-bottom: 1.5px solid #8B1E22 !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 2px 6px; height: auto; } .guestbook .pcard2 .pcard2__line input:focus { background: rgba(255, 252, 240, .55) !important; } .guestbook .pcard2 .pcard2__label { display: block; margin-bottom: 2px; } .guestbook .pcard2 .pform__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 8px; } .guestbook .pcard2 .pform__send { background: #8B1E22 !important; color: #FBF4E2 !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; background-image: none !important; font-family: var(--f-sans); font-weight: 600; letter-spacing: .06em; min-height: 42px; padding: 10px 22px; } .guestbook .pcard2 .pform__send:hover, .guestbook .pcard2 .pform__send:focus-visible { background: #6E1518 !important; } .guestbook .pcard2 .pform__send svg { stroke: currentColor; } .guestbook .pcard2 .up-status { margin: 0; color: #5E1A1D; font-family: var(--f-display); font-style: italic; text-align: center; } @media (min-width: 640px) { .guestbook .pcard2 .pcard2__msg { top: 24%; height: 38%; } .guestbook .pcard2 .pcard2__line--1 { top: 66%; } .guestbook .pcard2 .pcard2__line--2 { top: 77%; } .guestbook .pcard2 .pcard2__foot { position: absolute; left: 52%; top: 88%; width: 40%; padding: 0; } .guestbook .pcard2 .pform__send { width: 100%; } } @media (max-width: 639px) { .guestbook .pcard2 .pcard2__foot { margin: 22px 6px 26px; } } /* ---------- 85 GUESTBOOK POSTCARD: ONE PAPER COLOUR, MATCHING THE ARTWORK AT THE TOP ---------- */ .guestbook .pcard2 { background-color: #F4ECD9 !important; } .guestbook .pcard2 .pcard2__foot, .guestbook .pcard2 .pcard2__line input, .guestbook .pcard2 .up-field textarea { background-color: transparent; } .guestbook .pcard2 .pcard2__line input:focus, .guestbook .pcard2 .up-field textarea:focus { background-color: rgba(255, 252, 240, .6) !important; } /* ---------- 86 GUESTBOOK POSTCARD ON PHONES: ONE FLAT PAPER COLOUR, ARTWORK FADES INTO IT ---------- */ @media (max-width: 639px) { .guestbook .pcard2 { background: #F4ECD9 !important; } .guestbook .pcard2::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: auto; aspect-ratio: 3 / 2; z-index: 0; pointer-events: none; background: url("../assets/images/home/guestbook-postcard.webp") center top / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); } .guestbook .pcard2 > * { position: relative; z-index: 1; } } /* ---------- 87 GUESTBOOK POSTCARD ON PHONES: PORTRAIT ARTWORK (ART ON TOP, WRITING AREA BELOW, ONE SHEET) ---------- */ @media (max-width: 639px) { .guestbook .pcard2 { background: url("../assets/images/home/guestbook-postcard-portrait.webp") center top / 100% auto no-repeat, #F4ECD9 !important; padding-top: 75% !important; } .guestbook .pcard2::after { display: none; } .guestbook .pcard2::before { display: none; } } /* ---------- 88 GUESTBOOK POSTCARD ON PHONES: FIELDS INSIDE THE BORDER, KOLAM BAND ON THE BOTTOM, CALL-STYLE POST BUTTON ---------- */ @media (max-width: 639px) { .guestbook .pcard2 { padding-left: 13%; padding-right: 13%; padding-bottom: 64px; } .guestbook .pcard2::after { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 0; pointer-events: none; background: var(--kolam-orn) center / auto 100% repeat-x; } .guestbook .pcard2 .pform__foot { margin: 18px 0 0; } .guestbook .pcard2 .pform__send { border-radius: 999px !important; background: #5E1A1D !important; color: #F8EFD6 !important; min-height: 42px; padding: 8px 20px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; } .guestbook .pcard2 .pform__send:hover, .guestbook .pcard2 .pform__send:focus-visible { background: #3E0F11 !important; } } @media (min-width: 640px) { .guestbook .pcard2 .pform__send { border-radius: 999px !important; background: #5E1A1D !important; color: #F8EFD6 !important; min-height: 42px; padding: 8px 20px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; } } /* ---------- 89 GUESTBOOK POSTCARD: NO RELATION FIELD; NAME AND POST BUTTON INSIDE THE ARTWORK WITH THE WISH ---------- */ .guestbook .pcard2 .pcard2__line--2 { display: none !important; } @media (min-width: 640px) { .guestbook .pcard2 .pcard2__msg { top: 22%; height: 40%; } .guestbook .pcard2 .pcard2__line--1 { top: 71%; } .guestbook .pcard2 .pcard2__foot { top: 84%; } } /* ---------- 90 GUESTBOOK POSTCARD (WIDE): TRANSPARENT FRAME PICTURE OVER PAPER, FORM IN BOXES ON THE RIGHT ---------- */ @media (min-width: 640px) { .guestbook .pcard2 { background: #F4ECD9 !important; box-shadow: inset 0 0 30px rgba(96, 52, 22, .18), 0 26px 44px -20px rgba(10, 2, 2, .8) !important; } .guestbook .pcard2::after { display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/images/home/guestbook-frame.webp") center / 100% 100% no-repeat; } .guestbook .pcard2 > * { position: relative; z-index: 1; } .guestbook .pcard2 .pcard2__msg, .guestbook .pcard2 .pcard2__line, .guestbook .pcard2 .pcard2__foot { position: absolute; } .guestbook .pcard2 .pcard2__msg textarea { background: rgba(255, 252, 240, .7) !important; border: 1.5px solid #8B1E22 !important; border-radius: 4px; background-image: none !important; box-shadow: none !important; line-height: 1.5; padding: 10px 12px; font-size: 1rem; } .guestbook .pcard2 .pcard2__line input { background: rgba(255, 252, 240, .7) !important; border: 1.5px solid #8B1E22 !important; border-radius: 4px; padding: 8px 12px; height: 40px; font-size: 1rem; } .guestbook .pcard2 .pcard2__line .pcard2__label, .guestbook .pcard2 .pcard2__msg .pcard2__label { color: #8B1E22; } } /* ---------- 91 GUESTBOOK POSTCARD ON PHONES: CUT-OUT ART ON PAPER, CSS KOLAM BANDS + DOUBLE RULE, BOXED FIELDS ---------- */ @media (max-width: 639px) { .guestbook .pcard2 { position: relative; display: block; aspect-ratio: auto !important; transform: none; border-radius: 3px; padding: 80% 9% 64px !important; background: url("../assets/images/home/guestbook-frame-tall.webp") center top / 100% auto no-repeat, #F4ECD9 !important; outline: 1px solid rgba(139, 30, 34, .5); outline-offset: -12px; box-shadow: inset 0 0 0 14px rgba(0, 0, 0, 0), inset 0 0 0 15px rgba(139, 30, 34, .25), inset 0 0 28px rgba(96, 52, 22, .18), 0 18px 30px -18px rgba(10, 2, 2, .75) !important; } .guestbook .pcard2::before, .guestbook .pcard2::after { display: block !important; content: ""; position: absolute; left: 20px; right: 20px; height: 20px; z-index: 0; pointer-events: none; background: var(--kolam-orn) center / auto 100% repeat-x; opacity: .8; -webkit-mask: none; mask: none; } .guestbook .pcard2::before { top: 18px; } .guestbook .pcard2::after { top: auto; bottom: 18px; } .guestbook .pcard2 > * { position: relative; z-index: 1; } .guestbook .pcard2__head { display: none !important; } .guestbook .pcard2 .pcard2__msg, .guestbook .pcard2 .pcard2__line { position: static; width: 100%; height: auto; margin: 0 0 16px; } .guestbook .pcard2 .pcard2__msg textarea { background: rgba(255, 252, 240, .75) !important; border: 1.5px solid #8B1E22 !important; border-radius: 4px; background-image: none !important; box-shadow: none !important; line-height: 1.5; padding: 10px 12px; min-height: 120px; font-size: 1rem; } .guestbook .pcard2 .pcard2__line input { background: rgba(255, 252, 240, .75) !important; border: 1.5px solid #8B1E22 !important; border-radius: 4px; padding: 8px 12px; height: 42px; font-size: 1rem; } .guestbook .pcard2 .pform__foot { margin: 6px 0 0; } .guestbook .pcard2 .pform__send { width: 100%; } } /* ---------- 92 GUESTBOOK POSTCARD: CSS KOLAM BANDS + DOUBLE RULE AROUND THE CUT-OUT ART, AT MONOGRAM STAMP, TIDY FIELD POSITIONS ---------- */ /* shared: the AT monogram stamp */ .guestbook .pcard2__stamp { display: grid !important; place-items: center; position: absolute; z-index: 2; background: #F8F1E1; border: 1px solid rgba(139, 30, 34, .55); outline: 1px dashed rgba(139, 30, 34, .4); outline-offset: 3px; } .guestbook .pcard2__mono { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--f-script); font-size: 1.9rem; line-height: 1; color: #8B1E22; } .guestbook .pcard2__mono i { font-family: var(--f-display); font-style: italic; font-size: .7em; color: #B28A4E; } .guestbook .pcard2__stamp img { display: none; } @media (min-width: 640px) { .guestbook .pcard2 { background: url("../assets/images/home/guestbook-frame.webp") center / 100% 100% no-repeat, #F4ECD9 !important; outline: 1px solid rgba(139, 30, 34, .5); outline-offset: -14px; box-shadow: inset 0 0 0 17px rgba(0, 0, 0, 0), inset 0 0 0 18px rgba(139, 30, 34, .25), inset 0 0 30px rgba(96, 52, 22, .18), 0 26px 44px -20px rgba(10, 2, 2, .8) !important; } .guestbook .pcard2::before, .guestbook .pcard2::after { display: block !important; content: ""; position: absolute; left: 28px; right: 28px; height: 22px; z-index: 0; pointer-events: none; background: var(--kolam-orn) center / auto 100% repeat-x; opacity: .8; -webkit-mask: none; mask: none; } .guestbook .pcard2::before { top: 22px; bottom: auto; } .guestbook .pcard2::after { bottom: 22px; top: auto; } .guestbook .pcard2__stamp { right: 7%; top: 11%; left: auto; width: 11%; height: 22%; min-width: 64px; } .guestbook .pcard2__mono { font-size: clamp(1.3rem, 2.6vw, 2.1rem); } .guestbook .pcard2 .pcard2__msg { top: 25%; height: 34%; left: 52%; width: 40%; } .guestbook .pcard2 .pcard2__line--1 { top: 64%; } .guestbook .pcard2 .pcard2__foot { top: 82%; } } @media (max-width: 639px) { .guestbook .pcard2__stamp { right: 9%; top: 46px; width: 62px; height: 78px; } .guestbook .pcard2__mono { font-size: 1.5rem; } } /* ---------- 93 GUESTBOOK INTRO: CENTRED ---------- */ .guestbook .section-head { text-align: center; } .guestbook .section-intro { text-align: center; margin-inline: auto; max-width: 34rem; } /* ---------- 94 GUESTBOOK POSTCARD: REAL KOLAM FRAME (9-SLICE, MULTIPLY) + SITE FONTS, NO CURSIVE ---------- */ .guestbook .pcard2 { --b: clamp(34px, 6.2vw, 66px); } .guestbook .pcard2 { outline: 0 !important; } /* the kolam frame: nine-sliced so the corners keep their shape at any card size; multiply makes the white drop out */ .guestbook .pcard2::before { display: block !important; content: ""; position: absolute !important; inset: 0 !important; z-index: 0; pointer-events: none; opacity: 1; border: var(--b) solid transparent; box-sizing: border-box; border-image: url("../assets/images/home/kolam-frame.webp") 190 round; mix-blend-mode: multiply; background: none !important; height: auto; -webkit-mask: none; mask: none; } .guestbook .pcard2::after { display: none !important; } /* fonts: the site's own, not cursive */ .guestbook .pcard2 .pcard2__label { font-family: var(--f-sans) !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #8B1E22 !important; } .guestbook .pcard2 .up-field textarea, .guestbook .pcard2 .up-field input { font-family: var(--f-sans) !important; font-style: normal !important; font-size: .95rem !important; color: #3E2415 !important; } .guestbook .pcard2 .up-field textarea::placeholder, .guestbook .pcard2 .up-field input::placeholder { font-style: normal !important; color: rgba(62, 36, 21, .5) !important; } .guestbook .pcard2 .up-field__hint, .guestbook .pcard2 .wish-form__count { font-family: var(--f-sans) !important; font-style: normal !important; font-size: .75rem !important; color: #7A5E44 !important; } .guestbook .pcard2 .pform__send { font-family: var(--f-sans) !important; font-style: normal !important; font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .06em !important; } .guestbook .pcard2 .up-status { font-family: var(--f-sans) !important; font-style: normal !important; font-size: .8rem; } .guestbook .pcard2__mono { font-family: var(--f-display) !important; font-style: normal !important; font-weight: 500; letter-spacing: .02em; } .guestbook .pcard2__mono i { font-family: var(--f-display) !important; } /* layout inside the frame */ @media (min-width: 640px) { .guestbook .pcard2 { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; column-gap: 4%; row-gap: 8px; padding: calc(var(--b) + 4%) calc(var(--b) + 3%) calc(var(--b) + 2%) calc(var(--b) + 3%) !important; } .guestbook .pcard2 .pcard2__msg, .guestbook .pcard2 .pcard2__line, .guestbook .pcard2 .pcard2__foot { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; grid-column: 2; margin: 0; } .guestbook .pcard2 .pcard2__msg { grid-row: 1; padding-top: calc(clamp(60px, 9vw, 96px) + 10px); } .guestbook .pcard2 .pcard2__msg textarea { min-height: clamp(64px, 11vw, 120px); height: clamp(64px, 11vw, 120px); resize: none; } .guestbook .pcard2 .pcard2__line--1 { grid-row: 2; } .guestbook .pcard2 .pcard2__foot { grid-row: 3; } .guestbook .pcard2 .pcard2__line input { height: 38px; } .guestbook .pcard2 .pform__send { min-height: 38px; padding: 6px 18px; } .guestbook .pcard2__stamp { right: calc(var(--b) + 3%) !important; top: calc(var(--b) + 3%) !important; left: auto !important; width: clamp(48px, 7vw, 76px) !important; height: clamp(60px, 9vw, 96px) !important; min-width: 0 !important; } .guestbook .pcard2__mono { font-size: clamp(1.1rem, 2.4vw, 1.8rem); } } @media (max-width: 639px) { .guestbook .pcard2 { --b: 34px; padding: 80% calc(var(--b) + 8px) calc(var(--b) + 10px) !important; } .guestbook .pcard2__stamp { right: calc(var(--b) + 6px) !important; top: calc(var(--b) + 6px) !important; width: 56px !important; height: 72px !important; } .guestbook .pcard2__mono { font-size: 1.3rem; } } /* ---------- 95 GUESTBOOK POSTCARD: SAME FONT AS THE MOI LINE (DISPLAY, ITALIC) ---------- */ .guestbook .pcard2 .pcard2__label { font-family: var(--f-display) !important; font-style: italic !important; font-weight: 500 !important; font-size: 1.05rem !important; letter-spacing: .01em !important; text-transform: none !important; color: #6E1518 !important; } .guestbook .pcard2 .up-field textarea, .guestbook .pcard2 .up-field input { font-family: var(--f-display) !important; font-style: italic !important; font-size: 1.02rem !important; } .guestbook .pcard2 .up-field textarea::placeholder, .guestbook .pcard2 .up-field input::placeholder { font-family: var(--f-display) !important; font-style: italic !important; } .guestbook .pcard2 .pform__send { font-family: var(--f-display) !important; font-style: italic !important; font-size: .95rem !important; font-weight: 500 !important; letter-spacing: .02em !important; } /* ---------- 96 GUESTBOOK POSTCARD: FIELD BOXES WITHOUT OUTLINE, SEMI-TRANSPARENT ---------- */ .guestbook .pcard2 .up-field textarea, .guestbook .pcard2 .up-field input, .guestbook .pcard2 .pcard2__line input { border: 0 !important; outline: none !important; box-shadow: none !important; background: rgba(255, 252, 240, .3) !important; background-image: none !important; } .guestbook .pcard2 .up-field textarea:focus, .guestbook .pcard2 .up-field input:focus { background: rgba(255, 252, 240, .45) !important; box-shadow: none !important; } /* ---------- 97 GUESTBOOK POSTCARD: GLASSMORPHISM FIELD BOXES ---------- */ .guestbook .pcard2 .up-field textarea, .guestbook .pcard2 .up-field input, .guestbook .pcard2 .pcard2__line input { background: linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 250, 238, .18)) !important; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); border: 0 !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(120, 60, 30, .08), 0 8px 20px -12px rgba(60, 20, 10, .35) !important; } .guestbook .pcard2 .up-field textarea:focus, .guestbook .pcard2 .up-field input:focus { background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 250, 238, .3)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -12px rgba(60, 20, 10, .4) !important; } /* ---------- 98 GUESTBOOK POST BUTTON: HUGS ITS TEXT, NO ICON, CENTRED ---------- */ .guestbook .pcard2 .pcard2__foot { display: flex !important; justify-content: center !important; align-items: center; } .guestbook .pcard2 .pform__send { width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 auto; padding: 8px 22px !important; } .guestbook .pcard2 .pform__send svg { display: none !important; } /* ---------- 99 FEATURED WISHES: CAROUSEL, NO CARDS, WHITE TEXT, DIVIDERS, SWIPE + CONTROLS ---------- */ .guestbook .wishes { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding: 8px 0 0 !important; list-style: none; margin: 0; } .guestbook .wishes::-webkit-scrollbar { display: none; } .guestbook .wishes .wish-card.pmini { flex: 0 0 100%; scroll-snap-align: start; background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .28) !important; border-bottom: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; -webkit-mask: none !important; mask: none !important; transform: none !important; padding: 34px clamp(16px, 6vw, 56px) 30px !important; color: #FFFFFF; text-align: center; display: block !important; } .guestbook .wishes .wish-card.pmini::before, .guestbook .wishes .wish-card.pmini::after { content: none !important; display: none !important; } .guestbook .wishes .pmini__stamp { display: none !important; } .guestbook .wishes .wish-card__text { margin: 0 auto; max-width: 36rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6; color: #FFFFFF; text-shadow: 0 1px 10px rgba(20, 8, 2, .45); } .guestbook .wishes .wish-card__by { margin: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #FFFFFF; } .guestbook .wishes .wish-card__name { font-family: var(--f-sans); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; } .guestbook .wishes .wish-card__rel { font-family: var(--f-display); font-style: italic; font-size: .92rem; color: rgba(255, 255, 255, .78); } .wishes__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 0; } .wishes__nav[hidden] { display: none; } .wishes__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: #FFFFFF; font-size: 1.4rem; line-height: 1; cursor: pointer; } .wishes__arrow:disabled { opacity: .3; cursor: default; } .wishes__arrow:not(:disabled):hover, .wishes__arrow:not(:disabled):focus-visible { background: rgba(255, 255, 255, .15); } .wishes__dots { display: flex; gap: 8px; align-items: center; } .wishes__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; } .wishes__dot.is-on { background: #FFFFFF; transform: scale(1.25); } @media (prefers-reduced-motion: reduce) { .guestbook .wishes { scroll-behavior: auto; } } /* ---------- 100 GUESTBOOK POSTCARD: EVEN SPACING BETWEEN WISH, NAME AND POST BUTTON ---------- */ @media (min-width: 640px) { .guestbook .pcard2 .pcard2__msg { top: 20% !important; height: 36% !important; } .guestbook .pcard2 .pcard2__line--1 { top: 64% !important; } .guestbook .pcard2 .pcard2__foot { top: 83% !important; } } @media (max-width: 639px) { .guestbook .pcard2 .pcard2__msg { margin-bottom: 24px !important; } .guestbook .pcard2 .pcard2__line--1 { margin-bottom: 24px !important; } .guestbook .pcard2 .pcard2__foot { margin-top: 10px !important; } } /* ---------- 101 MEMORIES: TITLE, FILM STRIP (AUTO-SCROLLING), ONE RED BUTTON THAT OPENS THE UPLOADER ---------- */ #memories .memories__tag, #memories .memories__buttons, #memories .share-steps, #memories #qr-card { display: none !important; } #memories .memories__intro { text-align: center; } #memories .section-title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 6vw, 3.6rem); color: #8B1E22; margin-bottom: 6px; } #memories .section-intro { font-family: var(--f-sans); font-size: 1.02rem; color: #3E2415; } .memories__add { display: inline-flex; align-items: center; justify-content: center; margin: 22px auto 0; padding: 10px 26px; border: 0; border-radius: 999px; background: #5E1A1D; color: #F8EFD6; font-family: var(--f-display); font-style: italic; font-size: 1rem; font-weight: 500; letter-spacing: .02em; cursor: pointer; } .memories__add:hover, .memories__add:focus-visible { background: #3E0F11; } #memories .memories__panel { display: none; margin-top: 28px; } #memories.is-open .memories__panel { display: block; } #memories .memories__wrap { display: block; } #memories .wall__title { display: none !important; } /* ---------- 101 SHARE OUR WEDDING MEMORIES: CLEAN HEADER, SLIM AUTO-DRIFTING FILM ROLL, RED BUTTONS ---------- */ .memories .share-steps { display: none !important; } .memories .film { padding: 26px 0; } .memories .film__track { gap: 12px; } .memories .film__frame { width: clamp(150px, 19vw, 240px); } .memories .film__frame::before, .memories .film__frame figcaption { display: none !important; } .memories .memories__add, .memories .memories__buttons a, .memories .memories__buttons button { background: #8B1E22 !important; color: #FBF4E2 !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--f-display); font-style: italic; } .memories .memories__add:hover, .memories .memories__buttons a:hover, .memories .memories__buttons button:hover { background: #6E1518 !important; } /* ---------- 102 MEMORIES: VINTAGE FILM ROLL, ADD-PHOTOS BUTTON AT THE BOTTOM ---------- */ .memories__bottom { display: flex; justify-content: center; margin-top: 22px; } .memories .film { background: radial-gradient(ellipse at 50% 50%, #3B2619 0%, #22150D 75%), #22150D; border-top: 2px solid #6B4A2C; border-bottom: 2px solid #6B4A2C; box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 18px 30px -20px rgba(30, 10, 4, .7); } .memories .film__frame { padding: 6px; background: #E9DCC0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(90, 60, 30, .35), 0 6px 12px -8px rgba(0, 0, 0, .6); } .memories .film__frame img { filter: sepia(.42) saturate(.8) contrast(1.06) brightness(.96); } .memories .film__frame::after { content: ""; position: absolute; inset: 6px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 210, 140, .10), rgba(60, 30, 10, .30)); mix-blend-mode: multiply; } .memories .film__frame { position: relative; } .memories .film__track { gap: 16px; } /* ---------- 103 MEMORIES FILM: WORN 35MM STRIP, GLOWING SPROCKET HOLES, SCRATCHES, BORDERLESS WARM PHOTOS ---------- */ .memories .film { padding: 30px 0 !important; background: linear-gradient(90deg, rgba(255, 220, 160, .05) 0 1px, transparent 1px 180px), linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 20%, transparent 80%, rgba(0, 0, 0, .35)), radial-gradient(ellipse at 30% 40%, #3A2517 0%, #1C110B 70%), #1C110B !important; border: 0 !important; box-shadow: inset 0 0 60px rgba(0, 0, 0, .7), 0 18px 30px -20px rgba(30, 10, 4, .8) !important; } .memories .film::before, .memories .film::after { height: 18px !important; left: 0; right: 0; top: 6px !important; bottom: auto !important; background: radial-gradient(ellipse 9px 7px at center, #FFE7B0 0 55%, rgba(255, 210, 140, .35) 75%, transparent 85%) 0 50% / 30px 18px repeat-x !important; filter: drop-shadow(0 0 4px rgba(255, 200, 120, .75)); opacity: .95; } .memories .film::after { top: auto !important; bottom: 6px !important; } .memories .film__track { gap: 18px; } .memories .film__frame { padding: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; } .memories .film__frame::after { display: none !important; } .memories .film__frame img { border: 2px solid #120A06; filter: sepia(.28) saturate(.82) contrast(1.12) brightness(.97) !important; box-shadow: inset 0 0 22px rgba(60, 30, 10, .45); } /* ---------- 104 MEMORIES: KOLAM MOTIF ABOVE THE HEADING ---------- */ .memories__kolam { width: clamp(120px, 16vw, 170px); margin: 0 auto clamp(14px, 2vw, 22px); color: #6B1A2C; } .memories__kolam svg { display: block; width: 100%; height: auto; overflow: visible; color: #6B1A2C; } /* ---------- 105 MEMORIES FILM: HEAVILY WORN VINTAGE STRIP (GRAIN, DUST, SCRATCHES, EATEN SPROCKET HOLES) ---------- */ .memories__kolam { width: clamp(96px, 14vw, 150px); aspect-ratio: auto; } .memories__kolam img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } .memories .film { border-radius: 6px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.05%20%200%200%200%200%20.03%20%200%200%200%200%20.02%20%200%200%200%201.6%20-.55'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0 / 220px 220px, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.5'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%20.86%20%200%200%200%200%20.6%20%200%200%200%202.2%20-1.35'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23d%29'/%3E%3C/svg%3E") 0 0 / 340px 340px, repeating-linear-gradient(90deg, transparent 0 41px, rgba(255, 226, 170, .07) 41px 42px, transparent 42px 97px, rgba(255, 226, 170, .05) 97px 98px, transparent 98px 163px, rgba(0, 0, 0, .25) 163px 164px), radial-gradient(ellipse at 18% 30%, #4A2E1C 0%, transparent 55%), radial-gradient(ellipse at 82% 70%, #3A2216 0%, transparent 55%), linear-gradient(180deg, #2A1A10, #1A0F08 50%, #2A1A10) !important; box-shadow: inset 0 0 70px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(110, 70, 36, .35), 0 18px 30px -20px rgba(30, 10, 4, .85) !important; } .memories .film::before, .memories .film::after { height: 22px !important; top: 5px !important; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='20'%3E%3Cfilter%20id='w'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.55'%20numOctaves='2'%20seed='4'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='3.2'/%3E%3C/filter%3E%3Crect%20x='6'%20y='3'%20width='22'%20height='14'%20rx='3.5'%20fill='%23F6DFA8'%20filter='url%28%23w%29'/%3E%3C/svg%3E") 0 50% / 34px 20px repeat-x !important; filter: drop-shadow(0 0 5px rgba(255, 196, 110, .8)) !important; opacity: .96; } .memories .film::after { top: auto !important; bottom: 5px !important; } .memories .film__frame img { border: 3px solid #0F0804; border-radius: 6px; filter: sepia(.4) saturate(.88) contrast(1.1) brightness(.95) hue-rotate(-4deg) !important; box-shadow: inset 0 0 26px rgba(50, 24, 8, .55), 0 0 0 1px rgba(140, 96, 52, .25); } .memories .film__frame { position: relative; } .memories .film__frame::after { display: block !important; content: ""; position: absolute; inset: 3px; border-radius: 4px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.05%20%200%200%200%200%20.03%20%200%200%200%200%20.02%20%200%200%200%201.6%20-.55'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0 / 160px 160px, radial-gradient(ellipse at center, transparent 50%, rgba(40, 18, 6, .35)); mix-blend-mode: multiply; opacity: .55; } /* ---------- 105 MEMORIES: SUPPLIED KOLAM MOTIF + HEAVILY WORN VINTAGE FILM ---------- */ .memories__kolam { width: clamp(84px, 12vw, 120px); aspect-ratio: auto; margin: 0 auto clamp(12px, 2vw, 20px); } .memories__kolam img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } .memories__kolam svg { display: none; } .memories .film { padding: 34px 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .66 0 0 0 0 .38 0 0 0 .9 -.34'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 320px 320px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .32 0 0 0 0 .14 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='600' height='200' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 600px 200px, linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .55)), linear-gradient(90deg, rgba(255, 225, 170, .07) 0 1px, transparent 1px 137px, rgba(255, 225, 170, .05) 137px 138px, transparent 138px 311px), radial-gradient(ellipse at 30% 45%, #3A2314 0%, #1B100A 78%), #1B100A !important; box-shadow: inset 0 0 70px rgba(0, 0, 0, .75), inset 0 0 0 2px rgba(80, 50, 28, .55), 0 20px 34px -22px rgba(30, 10, 4, .85) !important; } .memories .film::before, .memories .film::after { height: 22px !important; top: 8px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' viewBox='0 0 34 22'%3E%3Cfilter id='r' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='3.2'/%3E%3C/filter%3E%3Crect x='5' y='4' width='24' height='14' rx='3.5' fill='%23F5DFA4' filter='url(%23r)'/%3E%3C/svg%3E") 0 50% / 34px 22px repeat-x !important; filter: drop-shadow(0 0 5px rgba(255, 205, 120, .8)) sepia(.35) saturate(1.2); opacity: .96; } .memories .film::after { top: auto !important; bottom: 8px !important; } .memories .film__track { gap: 22px; position: relative; } .memories .film__frame img { border: 3px solid #0F0805; border-radius: 3px; filter: sepia(.4) saturate(.8) contrast(1.14) brightness(.94) !important; box-shadow: inset 0 0 26px rgba(50, 24, 8, .55), 0 0 0 1px rgba(255, 225, 170, .08); } /* scratches and dust over the whole strip */ .memories .film__track::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(88deg, transparent 0 91px, rgba(255, 235, 200, .09) 91px 92px, transparent 92px 217px, rgba(255, 235, 200, .06) 217px 218px, transparent 218px 331px), radial-gradient(circle at 18% 30%, rgba(255, 235, 200, .18) 0 1px, transparent 2px), radial-gradient(circle at 63% 72%, rgba(255, 235, 200, .16) 0 1.4px, transparent 2.4px), radial-gradient(circle at 84% 22%, rgba(255, 235, 200, .14) 0 1px, transparent 2px); mix-blend-mode: screen; } /* ---------- 106 MEMORIES FILM: GENERATED WORN FILM STRIP AS THE BACKGROUND, PHOTOS FITTED BETWEEN THE SPROCKET ROWS ---------- */ .memories .film { --fh: clamp(150px, 19vw, 240px); padding: calc(var(--fh) / 3.1) 0 !important; background: url("../assets/images/home/film-strip.webp") 0 0 / auto 100% repeat-x, #1A100A !important; box-shadow: 0 20px 34px -22px rgba(30, 10, 4, .85) !important; border: 0 !important; } .memories .film::before, .memories .film::after, .memories .film__track::after { display: none !important; } .memories .film__frame { width: var(--fh) !important; } .memories .film__frame img { border: 3px solid #0D0704; border-radius: 3px; filter: sepia(.38) saturate(.82) contrast(1.12) brightness(.95) !important; box-shadow: inset 0 0 24px rgba(50, 24, 8, .5); } /* ---------- 107 FOOTER: BRASS-AND-BANANA-LEAF FEAST BACKGROUND (SLIGHTLY BLURRED), CLEARER TEXT LAYOUT ---------- */ .footer .footer__feast { background: url("../assets/images/home/feast-brass.webp") center / cover no-repeat !important; filter: blur(2.5px) saturate(1.1) sepia(.12); transform: scale(1.06); } .footer .footer__feast::after { background: radial-gradient(ellipse at 50% 52%, rgba(24, 10, 4, .38) 0%, rgba(24, 10, 4, .58) 74%), linear-gradient(180deg, rgba(20, 8, 4, .6), rgba(20, 8, 4, 0) 22%, rgba(20, 8, 4, 0) 74%, rgba(20, 8, 4, .7)) !important; } .footer .footer__inner { max-width: 44rem; margin: 0 auto !important; padding: clamp(96px, 14vw, 150px) var(--gutter) calc(72px + env(safe-area-inset-bottom)) !important; } .footer .footer__feast-line { font-size: clamp(1.3rem, 3.4vw, 1.8rem); line-height: 1.4; letter-spacing: .01em; } .footer .footer__feast-line::after { content: ""; display: block; width: 64px; height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, #E3B968, transparent); } .footer .footer__names { margin-top: 26px; line-height: 1.02; } .footer .footer__date { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; font-size: .78rem; letter-spacing: .26em; } .footer .footer__sep { width: 7px; height: 7px; background: #E3B968; transform: rotate(45deg); opacity: .9; } .footer .footer__line { max-width: 24rem; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid rgba(243, 213, 138, .3); font-size: 1.2rem; opacity: 1; } .footer .footer__credit { margin-top: 48px; } /* ---------- 108 NEED HELP: GLASSMORPHIC CARDS, WHATSAPP BRANDING, ILLUSTRATION STICKER TILES ---------- */ /* glass card (replaces the old paper stamp) */ .help-col.stamp { filter: none !important; transform: none !important; margin-top: 0 !important; } @media (min-width: 760px) { .help-col--groom.stamp { margin-top: 36px !important; } } .help-col.stamp .stamp__paper { padding: 0 !important; -webkit-mask: none !important; mask: none !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .07)) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .30); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .08) !important; } .help-col.stamp .stamp__face { position: relative; margin: 0 !important; padding: 44px clamp(22px, 4vw, 34px) 36px !important; overflow: visible !important; background: none !important; box-shadow: none !important; outline: 0 !important; } /* text on glass */ .stamp--contact .help-side { color: #F3D58A !important; font-family: var(--f-display) !important; font-size: .9rem; letter-spacing: .24em; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); } .stamp--contact .help-side::after { width: 72px !important; height: 1px !important; margin: 12px 0 2px !important; background: linear-gradient(90deg, rgba(243, 213, 138, .9), transparent) !important; } .stamp--contact .help-list { padding-right: 0 !important; } .stamp--contact .help-p__rel { color: rgba(255, 255, 255, .7) !important; } .stamp--contact .help-p__name { color: #FFFFFF !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .35) !important; } .stamp--contact .help-p__num { color: #F3D58A !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .35) !important; } .stamp--contact .help-p + .help-p { border-top: 1px solid rgba(255, 255, 255, .22) !important; } .stamp--contact .help-p + .help-p::before { display: none !important; } /* buttons: Call as a glass pill, WhatsApp in its own brand green with a white glyph */ .help-card .stamp--contact .help-p__btns a, .help-card .stamp--contact .help-p__btns a.brand--call { background: rgba(255, 255, 255, .14) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .45) !important; border-radius: 999px !important; text-shadow: none !important; } .help-card .stamp--contact .help-p__btns a:first-child:hover, .help-card .stamp--contact .help-p__btns a.brand--call:hover { background: rgba(255, 255, 255, .26) !important; color: #FFFFFF !important; } .help-card .stamp--contact .help-p__btns a.brand--wa { background: #25D366 !important; color: #FFFFFF !important; border: 1px solid #25D366 !important; } .help-card .stamp--contact .help-p__btns a.brand--wa:hover, .help-card .stamp--contact .help-p__btns a.brand--wa:focus-visible { background: #1EBE5A !important; border-color: #1EBE5A !important; color: #FFFFFF !important; } .help-card .stamp--contact .help-p__btns a svg { fill: none; } /* illustration sticker tiles, stuck on the card edges at slight angles */ .stamp--contact .stamp__face::before, .stamp--contact .stamp__face::after { content: "" !important; display: block !important; position: absolute !important; z-index: 3; width: 86px !important; height: 86px !important; right: auto !important; bottom: auto !important; opacity: 1 !important; mix-blend-mode: normal !important; pointer-events: none; background-color: #FBF4E2 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 74% !important; border-radius: 20px; box-shadow: 0 0 0 4px #FFFFFF, 0 12px 22px -8px rgba(0, 0, 0, .55) !important; } .stamp--contact .stamp__face::before { top: -22px !important; right: -12px !important; left: auto !important; transform: rotate(9deg); } .stamp--contact .stamp__face::after { bottom: -20px !important; left: -12px !important; top: auto !important; transform: rotate(-8deg); width: 78px !important; height: 78px !important; } .help-col--bride .stamp__face::before { background-image: url("../assets/images/home/contact-art-1.webp") !important; } .help-col--bride .stamp__face::after { background-image: url("../assets/images/home/contact-art-2.webp") !important; } .help-col--groom .stamp__face::before { background-image: url("../assets/images/home/contact-art-3.webp") !important; } .help-col--groom .stamp__face::after { background-image: url("../assets/images/home/contact-art-4.webp") !important; } .help-col--groom .stamp__face::before { transform: rotate(-7deg); } .help-col--groom .stamp__face::after { transform: rotate(10deg); } @media (max-width: 759px) { .stamp--contact .stamp__face::before { right: -6px !important; width: 72px !important; height: 72px !important; } .stamp--contact .stamp__face::after { left: -6px !important; width: 66px !important; height: 66px !important; } } @media (prefers-reduced-motion: reduce) { .stamp--contact .stamp__face::before, .stamp--contact .stamp__face::after { transform: none; } } /* ---------- 109 NEED HELP: MOCKUP CARDS (MAROON GLASS, GOLD BORDER, ROWS WITH BUTTONS), BRIDE / GROOM ON THE SIDE ---------- */ .help-card { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; max-width: 780px !important; margin: 0 auto; } .help-col.stamp { margin-top: 0 !important; } .help-col.stamp .stamp__paper { border-radius: 28px !important; border: 1px solid rgba(227, 185, 104, .75) !important; background: linear-gradient(135deg, rgba(96, 20, 24, .86), rgba(70, 12, 16, .9)) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12) !important; } .help-col.stamp .stamp__face { padding: 34px clamp(22px, 4vw, 40px) 20px !important; } @media (min-width: 640px) { .help-col.stamp .stamp__face { padding-right: 214px !important; } } /* heading + underline */ .stamp--contact .help-side { font-family: var(--f-display) !important; font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 1.85rem) !important; letter-spacing: .12em !important; text-transform: none !important; color: #E3B968 !important; text-align: left; } .stamp--contact .help-side::after { width: 130px !important; height: 1.5px !important; margin: 14px 0 6px !important; background: linear-gradient(90deg, #E3B968, rgba(227, 185, 104, 0)) !important; } /* each person: details left, buttons right */ .stamp--contact .help-p, .stamp--contact .help-p + .help-p { display: grid !important; grid-template-columns: 1fr auto; column-gap: 22px; align-items: center; align-content: center; padding: 24px 0 !important; text-align: left !important; } .stamp--contact .help-p + .help-p { border-top: 1px solid rgba(227, 185, 104, .5) !important; } .stamp--contact .help-p__name { grid-column: 1; grid-row: 1; order: 0; margin: 0; font-family: var(--f-display) !important; font-weight: 500; font-size: clamp(1.45rem, 3.6vw, 2rem) !important; color: #FBF1DC !important; line-height: 1.15; } .stamp--contact .help-p__rel { grid-column: 1; grid-row: 2; order: 0; margin: 6px 0 0; font-family: var(--f-sans) !important; font-style: normal !important; font-size: .95rem !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: none !important; color: rgba(251, 241, 220, .86) !important; } .stamp--contact .help-p__num { grid-column: 1; grid-row: 3; margin: 6px 0 0; font-family: var(--f-sans) !important; font-weight: 600 !important; font-size: 1.05rem !important; letter-spacing: .03em !important; color: #E3B968 !important; } .stamp--contact .help-p__btns { grid-column: 2; grid-row: 1 / span 3; display: flex !important; gap: 12px; margin: 0 !important; flex-wrap: nowrap; } /* buttons: Call outlined in cream; WhatsApp cream-filled with its own green glyph */ .help-card .stamp--contact .help-p__btns a { min-height: 48px; padding: 0 22px !important; font-family: var(--f-sans); font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .01em; text-transform: none !important; border-radius: 999px !important; gap: 10px; white-space: nowrap; } .help-card .stamp--contact .help-p__btns a svg { width: 20px; height: 20px; } .help-card .stamp--contact .help-p__btns a.brand--call { background: transparent !important; color: #FBF1DC !important; border: 1.5px solid rgba(251, 241, 220, .85) !important; } .help-card .stamp--contact .help-p__btns a.brand--wa { background: #F6EAD0 !important; color: #5A1418 !important; border: 1.5px solid #F6EAD0 !important; } .help-card .stamp--contact .help-p__btns a.brand--wa svg { color: #25D366; } .help-card .stamp--contact .help-p__btns a.brand--call:hover { background: rgba(251, 241, 220, .14) !important; } .help-card .stamp--contact .help-p__btns a.brand--wa:hover, .help-card .stamp--contact .help-p__btns a.brand--wa:focus-visible { background: #FFF6E2 !important; border-color: #FFF6E2 !important; color: #5A1418 !important; } /* bride / groom illustration on the side, on an arched cream tile (replaces the small stickers) */ .stamp--contact .stamp__face::after { display: none !important; } .stamp--contact .stamp__face::before { content: "" !important; display: block !important; position: absolute !important; z-index: 3; top: -24px !important; bottom: 22px !important; right: 24px !important; left: auto !important; width: 152px !important; height: auto !important; transform: none !important; opacity: 1 !important; mix-blend-mode: normal !important; pointer-events: none; border-radius: 76px 76px 16px 16px !important; background-color: #F3E5C6 !important; background-repeat: no-repeat !important; background-position: 50% 96% !important; background-size: 215% auto !important; box-shadow: 0 0 0 3px rgba(227, 185, 104, .85), 0 16px 28px -10px rgba(0, 0, 0, .55) !important; } .help-col--bride .stamp__face::before { background-image: url("../assets/images/home/folk-bride.webp") !important; } .help-col--groom .stamp__face::before { background-image: url("../assets/images/home/folk-groom.webp") !important; } /* narrower screens: buttons drop under the details; the figure tile shrinks to the top corner */ @media (max-width: 639px) { .stamp--contact .help-p, .stamp--contact .help-p + .help-p { grid-template-columns: 1fr; row-gap: 4px; } .stamp--contact .help-p__btns { grid-column: 1; grid-row: 4; margin-top: 14px !important; flex-wrap: wrap; } .help-col.stamp .stamp__face { padding-right: 96px !important; } .stamp--contact .stamp__face::before { top: -16px !important; bottom: auto !important; right: 14px !important; width: 74px !important; height: 104px !important; border-radius: 37px 37px 12px 12px !important; } } /* ---------- 110 NEED HELP ON PHONES: BUTTONS IN ONE ROW, FIGURE FITTED TO THE SMALL TILE ---------- */ @media (max-width: 639px) { .stamp--contact .help-p__btns { flex-wrap: nowrap !important; width: 100%; gap: 10px !important; } .help-card .stamp--contact .help-p__btns a { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 12px !important; font-size: .88rem !important; gap: 8px; } .help-card .stamp--contact .help-p__btns a svg { width: 18px; height: 18px; } .stamp--contact .stamp__face::before { background-size: 124% auto !important; background-position: 50% 100% !important; } } /* ---------- 111 NEED HELP: NO ARCH FRAME, THE FIGURES STAND FREE WITH A SOFT CREAM OUTLINE ---------- */ .stamp--contact .stamp__face::before { background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 1.5px rgba(255, 244, 222, .95)) drop-shadow(0 0 1px rgba(255, 244, 222, .9)) drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); } @media (min-width: 640px) { .stamp--contact .stamp__face::before { width: 190px !important; right: 14px !important; background-size: 175% auto !important; background-position: 50% 96% !important; } .help-col.stamp .stamp__face { padding-right: 214px !important; } } @media (max-width: 639px) { .stamp--contact .stamp__face::before { width: 92px !important; height: 132px !important; top: -34px !important; right: 6px !important; background-size: contain !important; background-position: 50% 100% !important; } } /* ---------- 112 NEED HELP: BIGGER UNCROPPED FIGURES, BRIDE ON THE LEFT, GROOM ON THE RIGHT, SCRAPBOOK STICKERS ---------- */ .help-col.stamp, .help-card, .stamp--contact .stamp__face { overflow: visible !important; } .stamp--contact .stamp__face::before { background-size: contain !important; background-position: center bottom !important; background-repeat: no-repeat !important; background-color: transparent !important; transform: rotate(-3deg) !important; } .help-col--groom .stamp__face::before { transform: rotate(3deg) !important; } @media (min-width: 640px) { .stamp--contact .stamp__face::before { width: 230px !important; height: 330px !important; top: -58px !important; bottom: auto !important; } .help-col--bride .stamp__face::before { left: -118px !important; right: auto !important; } .help-col--groom .stamp__face::before { right: -118px !important; left: auto !important; } .help-col--bride .stamp__face { padding-left: 262px !important; padding-right: 34px !important; } .help-col--groom .stamp__face { padding-right: 262px !important; padding-left: 34px !important; } } @media (max-width: 639px) { .stamp--contact .stamp__face::before { width: 130px !important; height: 190px !important; top: -58px !important; bottom: auto !important; } .help-col--bride .stamp__face::before { left: -22px !important; right: auto !important; } .help-col--groom .stamp__face::before { right: -22px !important; left: auto !important; } .help-col--bride .stamp__face { padding-left: 30px !important; padding-right: 30px !important; } .help-col--groom .stamp__face { padding-left: 30px !important; padding-right: 30px !important; } } /* ---------- 113 NEED HELP: SIDE PADDING THAT WINS OVER THE CARD DEFAULTS ---------- */ @media (min-width: 640px) { .help-card .help-col--bride.stamp .stamp__face { padding-left: 262px !important; padding-right: 34px !important; } .help-card .help-col--groom.stamp .stamp__face { padding-right: 262px !important; padding-left: 34px !important; } } @media (max-width: 639px) { .help-card .help-col.stamp .stamp__face { padding-left: 30px !important; padding-right: 30px !important; } } /* ---------- 116 NEED HELP: FULL MOCKUP LOOK (TEMPLE HALL BACKGROUND, TORAN, PHONE ABOVE THE HEADING, GOLD-CORNERED GLASS CARDS, FIGURES BESIDE THE CARDS) ---------- */ #contacts.help { padding-top: clamp(150px, 16vw, 200px) !important; background: linear-gradient(rgba(54, 8, 12, .52), rgba(54, 8, 12, .26) 42%, rgba(54, 8, 12, .7)), url("../assets/images/home/help-bg.webp") center 32% / cover no-repeat !important; } #contacts::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: clamp(74px, 9.5vw, 128px); z-index: 2; pointer-events: none; background: url("../assets/images/home/help-toran.webp") top center / auto 100% repeat-x; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } #contacts .section-head > .pb-phone { position: static !important; display: block; width: clamp(66px, 7.5vw, 92px) !important; height: auto; margin: 0 auto 14px; transform: none !important; } #contacts .section-title { margin-top: 0; } /* the card: maroon glass, gold border, lotus and kolam corner ornaments */ #contacts .help-card { max-width: 980px !important; } #contacts .help-col.stamp .stamp__paper { border: 1.5px solid #D9A94E !important; border-radius: 30px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 10C23 19 23 30 30 38C37 30 37 19 30 10Z'/%3E%3Cpath d='M30 38C19 36 12 28 12 20C21 20 28 27 30 38Z'/%3E%3Cpath d='M30 38C41 36 48 28 48 20C39 20 32 27 30 38Z'/%3E%3Cpath d='M7 46C20 49 40 49 53 46'/%3E%3Cpath d='M18 52C26 54 34 54 42 52'/%3E%3C/svg%3E") left 16px top 12px / 52px 52px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.2' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z'/%3E%3Cpath d='M30 15L45 30L30 45L15 30Z'/%3E%3Cpath d='M30 25L35 30L30 35L25 30Z'/%3E%3Ccircle cx='30' cy='5' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='55' cy='30' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='30' cy='55' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='5' cy='30' r='2.2' fill='%23E3B968'/%3E%3C/svg%3E") right 18px top 14px / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 10C23 19 23 30 30 38C37 30 37 19 30 10Z'/%3E%3Cpath d='M30 38C19 36 12 28 12 20C21 20 28 27 30 38Z'/%3E%3Cpath d='M30 38C41 36 48 28 48 20C39 20 32 27 30 38Z'/%3E%3Cpath d='M7 46C20 49 40 49 53 46'/%3E%3Cpath d='M18 52C26 54 34 54 42 52'/%3E%3C/svg%3E") left 16px bottom 12px / 52px 52px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.2' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z'/%3E%3Cpath d='M30 15L45 30L30 45L15 30Z'/%3E%3Cpath d='M30 25L35 30L30 35L25 30Z'/%3E%3Ccircle cx='30' cy='5' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='55' cy='30' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='30' cy='55' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='5' cy='30' r='2.2' fill='%23E3B968'/%3E%3C/svg%3E") right 18px bottom 14px / 46px 46px no-repeat, linear-gradient(135deg, rgba(112, 24, 28, .80), rgba(78, 14, 18, .86)) !important; box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .75), inset 0 0 0 4px rgba(217, 169, 78, .10), inset 0 1px 0 rgba(255, 255, 255, .14) !important; } /* row divider with a small gold flower in the middle */ #contacts .stamp--contact .help-p + .help-p { border-top: 0 !important; position: relative; } #contacts .stamp--contact .help-p + .help-p::before { content: "" !important; display: block !important; position: absolute !important; left: 0; right: 0; top: 0; height: 22px; margin: 0 !important; transform: translateY(-50%); opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; background: linear-gradient(90deg, rgba(217, 169, 78, .9), rgba(217, 169, 78, .9)) left center / calc(50% - 20px) 1px no-repeat, linear-gradient(90deg, rgba(217, 169, 78, .9), rgba(217, 169, 78, .9)) right center / calc(50% - 20px) 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23E3B968' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M14 3C10 8 10 12 14 14C18 12 18 8 14 3Z'/%3E%3Cpath d='M25 14C20 10 16 10 14 14C16 18 20 18 25 14Z'/%3E%3Cpath d='M14 25C18 20 18 16 14 14C10 16 10 20 14 25Z'/%3E%3Cpath d='M3 14C8 18 12 18 14 14C12 10 8 10 3 14Z'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23E3B968'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important; } /* wide screens: figures stand beside the cards, overlapping the card edge like stickers; the card is nudged away from them */ @media (min-width: 900px) { #contacts .help-col--bride.stamp { margin-left: 168px !important; } #contacts .help-col--groom.stamp { margin-right: 168px !important; } #contacts .help-col.stamp .stamp__face::before { width: 270px !important; height: 560px !important; top: -70px !important; bottom: auto !important; background-size: contain !important; background-position: center bottom !important; } #contacts .help-col--bride.stamp .stamp__face::before { left: -200px !important; right: auto !important; } #contacts .help-col--groom.stamp .stamp__face::before { right: -200px !important; left: auto !important; } #contacts .help-card .help-col--bride.stamp .stamp__face { padding-left: 120px !important; padding-right: 44px !important; } #contacts .help-card .help-col--groom.stamp .stamp__face { padding-right: 120px !important; padding-left: 44px !important; } } @media (max-width: 899px) { #contacts .help-col.stamp .stamp__paper { background-size: 40px 40px, 38px 38px, 40px 40px, 38px 38px, auto !important; } } /* ---------- 125 NEED HELP: SAME BACKGROUND AS THE STORY SECTION (NO TEMPLE WALL, PILLARS OR TORAN); NEW GROOM ---------- */ #contacts.help { background: var(--grain), radial-gradient(70% 60% at 30% 40%, #4a3628, var(--album) 70%) !important; } #contacts .help-deco, #contacts::before, #contacts::after { display: none !important; content: none !important; } /* ---------- 16 MOTION PREFERENCES ---------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero { height: auto; --kp: 1; } .hero__stage { position: relative; height: 100svh; min-height: 560px; } .hero__welcome, .hero__motes, .hero__grain { display: none; } .hero__jasmine, .hero__urli { transform: none !important; } .hero__jasmine--r, .hero__urli--r, .hang--r { transform: scaleX(-1) !important; } .album__pin { position: relative; height: auto; overflow-x: auto; padding-block: 60px; } .album__track { transform: none !important; } .kedge use { stroke-dashoffset: 0; } .story .moment.is-swaying { animation: none; } .mono__kolam .kolam__lines path, .mono__kolam .kolam__lines circle { stroke-dashoffset: 0; } .mono__kolam .kolam__dots, .mono__letters { opacity: 1; transform: none; } .moment { --y: 0; } .intro .draw { stroke-dashoffset: 0; } .intro__line, .intro__names, .intro__date, .intro__actions { opacity: 1; transform: none; } .intro.is-opening .door { transform: none; opacity: 0; } .intro.is-opening .entrance { transform: translate(-50%, -50%); } .intro.is-opening .leaf { transform: none; } .intro.is-opening .curtain__half { transform: none; opacity: 0; } } /* ---------- 114 CELEBRATIONS: EACH CARD FADES IN AS ONE BLOCK (NOT WORD BY WORD) ---------- */ .js .stampset .stampset__inner { opacity: 0; translate: 0 18px; transition: opacity .9s ease, translate .9s ease; } .js .stampset.words-in .stampset__inner { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .js .stampset .stampset__inner { opacity: 1; translate: none; transition: none; } } /* ---------- 115 CELEBRATIONS: THE TEXT PANEL OF EACH CARD ENTERS AS ONE BLOCK, AFTER THE PICTURE ---------- */ .js .stampset .stampset__inner { opacity: 1; translate: none; transition: none; } .js .stampset .stamp--pic, .js .stampset .stamp--text { opacity: 0; translate: 0 22px; transition: opacity .9s ease, translate .9s ease; } .js .stampset .stamp--text { transition-delay: .25s; } .js .stampset.words-in .stamp--pic, .js .stampset.words-in .stamp--text { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .js .stampset .stamp--pic, .js .stampset .stamp--text { opacity: 1; translate: none; transition: none; } } /* ---------- 117 NEED HELP BELOW 900px: FIGURES SIT IN THE TOP-RIGHT CORNER, CLEAR OF THE TEXT ---------- */ @media (max-width: 899px) { #contacts .help-col--bride.stamp, #contacts .help-col--groom.stamp { margin-left: 0 !important; margin-right: 0 !important; margin-top: 56px !important; } #contacts .help-col.stamp .stamp__face::before { width: 104px !important; height: 156px !important; top: -62px !important; bottom: auto !important; right: 14px !important; left: auto !important; background-size: contain !important; background-position: center bottom !important; } #contacts .help-card .help-col.stamp .stamp__face { padding-left: 30px !important; padding-right: 30px !important; } #contacts .stamp--contact .help-side { padding-right: 110px; } } /* ---------- 118 NEED HELP: HEADING SITS BELOW THE CORNER LOTUS ---------- */ #contacts .help-card .help-col.stamp .stamp__face { padding-top: 60px !important; } /* ---------- 119 NEED HELP: WIDER CONTENT AREA SO NAMES DO NOT WRAP ---------- */ #contacts.help .wrap { max-width: 1180px !important; } /* ---------- 120 NEED HELP (WIDE): LARGER FIGURES ---------- */ @media (min-width: 900px) { #contacts .help-col.stamp .stamp__face::before { width: 320px !important; height: 660px !important; top: -110px !important; } #contacts .help-col--bride.stamp .stamp__face::before { left: -232px !important; } #contacts .help-col--groom.stamp .stamp__face::before { right: -232px !important; } } /* ---------- 121 NEED HELP (WIDE): FIGURES ANCHORED TO THE BOTTOM OF THEIR CARDS, ROOM BETWEEN THE CARDS ---------- */ @media (min-width: 900px) { #contacts .help-card { gap: 104px !important; } #contacts .help-col.stamp .stamp__face::before { top: auto !important; bottom: -22px !important; width: 290px !important; height: 480px !important; } #contacts .help-col--bride.stamp .stamp__face::before { left: -216px !important; } #contacts .help-col--groom.stamp .stamp__face::before { right: -216px !important; } #contacts.help { padding-bottom: clamp(100px, 10vw, 140px) !important; } } /* ---------- 122 NEED HELP: MATCHES THE REFERENCE (MAROON HALL, TORAN, PILLARS AND LAMPS, GLASS CARD, PAINTED BRIDE AND GROOM) ---------- */ /* background: deep maroon with soft light, pillars and lamps at the edges, toran garlands across the top */ #contacts.help { background: radial-gradient(ellipse at 50% 22%, #7E141B 0%, #5A0B11 55%, #3E060A 100%) !important; } #contacts .help-deco { position: absolute; top: 0; bottom: 0; width: clamp(90px, 11vw, 170px); z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; } #contacts .help-deco--l { left: 0; background-image: url("../assets/images/home/help-deco-left.webp"); -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); } #contacts .help-deco--r { right: 0; background-image: url("../assets/images/home/help-deco-right.webp"); -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); } #contacts::before { content: ""; position: absolute; left: 0; right: auto; top: 22px; width: 50%; height: clamp(84px, 9vw, 124px); z-index: 2; pointer-events: none; filter: none; background: url("../assets/images/home/help-toran-left.webp") left top / auto 100% no-repeat; } #contacts::after { content: ""; position: absolute; right: 0; left: auto; top: 22px; width: 50%; height: clamp(84px, 9vw, 124px); z-index: 2; pointer-events: none; background: url("../assets/images/home/help-toran-right.webp") right top / auto 100% no-repeat; } #contacts .wrap { position: relative; z-index: 1; } /* the card: glassmorphic, double gold border, soft sheen at the top right */ #contacts .help-col.stamp .stamp__paper { border: 2px solid #D9A94E !important; border-radius: 30px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 10C23 19 23 30 30 38C37 30 37 19 30 10Z'/%3E%3Cpath d='M30 38C19 36 12 28 12 20C21 20 28 27 30 38Z'/%3E%3Cpath d='M30 38C41 36 48 28 48 20C39 20 32 27 30 38Z'/%3E%3Cpath d='M7 46C20 49 40 49 53 46'/%3E%3Cpath d='M18 52C26 54 34 54 42 52'/%3E%3C/svg%3E") left 18px top 14px / 52px 52px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.2' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z'/%3E%3Cpath d='M30 15L45 30L30 45L15 30Z'/%3E%3Cpath d='M30 25L35 30L30 35L25 30Z'/%3E%3Ccircle cx='30' cy='5' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='55' cy='30' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='30' cy='55' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='5' cy='30' r='2.2' fill='%23E3B968'/%3E%3C/svg%3E") right 20px top 16px / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 10C23 19 23 30 30 38C37 30 37 19 30 10Z'/%3E%3Cpath d='M30 38C19 36 12 28 12 20C21 20 28 27 30 38Z'/%3E%3Cpath d='M30 38C41 36 48 28 48 20C39 20 32 27 30 38Z'/%3E%3Cpath d='M7 46C20 49 40 49 53 46'/%3E%3Cpath d='M18 52C26 54 34 54 42 52'/%3E%3C/svg%3E") left 18px bottom 14px / 52px 52px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23E3B968' stroke-width='1.2' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z'/%3E%3Cpath d='M30 15L45 30L30 45L15 30Z'/%3E%3Cpath d='M30 25L35 30L30 35L25 30Z'/%3E%3Ccircle cx='30' cy='5' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='55' cy='30' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='30' cy='55' r='2.2' fill='%23E3B968'/%3E%3Ccircle cx='5' cy='30' r='2.2' fill='%23E3B968'/%3E%3C/svg%3E") right 20px bottom 16px / 46px 46px no-repeat, radial-gradient(ellipse 60% 55% at 92% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 38%), linear-gradient(160deg, rgba(150, 34, 38, .50), rgba(96, 18, 22, .62)) !important; -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); box-shadow: 0 30px 56px -26px rgba(0, 0, 0, .8), inset 0 0 0 6px rgba(217, 169, 78, 0), inset 0 0 0 7px rgba(217, 169, 78, .55), inset 0 1px 0 rgba(255, 255, 255, .25) !important; } /* heading: gold italic with a short solid underline */ #contacts .stamp--contact .help-side { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; letter-spacing: .1em !important; color: #E3B968 !important; } #contacts .stamp--contact .help-side::after { width: 130px !important; height: 2px !important; background: #E3B968 !important; margin: 12px 0 4px !important; } /* rows: serif name, sans relation, gold number */ #contacts .stamp--contact .help-p__name { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; font-weight: 600 !important; letter-spacing: .01em; } #contacts .stamp--contact .help-p__rel { font-size: 1.05rem !important; color: rgba(251, 241, 220, .92) !important; } #contacts .stamp--contact .help-p__num { font-size: 1.15rem !important; font-weight: 600 !important; color: #E3B968 !important; } /* buttons: Call outlined in cream; WhatsApp cream gradient with a maroon logo */ .help-card #contacts, #contacts .help-card .stamp--contact .help-p__btns a { min-height: 52px; font-size: 1.05rem !important; font-weight: 600 !important; padding: 0 26px !important; } #contacts .help-card .stamp--contact .help-p__btns a.brand--call { background: rgba(255, 255, 255, .04) !important; border: 1.5px solid rgba(251, 241, 220, .9) !important; color: #FBF1DC !important; } #contacts .help-card .stamp--contact .help-p__btns a.brand--wa { background: linear-gradient(180deg, #FFF3DB, #F1DDB3) !important; border: 1.5px solid #F6E6C4 !important; color: #5A1418 !important; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); } #contacts .help-card .stamp--contact .help-p__btns a.brand--wa svg { color: #5A1418 !important; } /* painted bride and groom from the reference style, each about 1.35 times the card height, overlapping the card edge */ .help-col--bride .stamp__face::before { background-image: url("../assets/images/home/help-bride.webp") !important; } .help-col--groom .stamp__face::before { background-image: url("../assets/images/home/help-groom.webp") !important; } @media (min-width: 900px) { #contacts .help-col.stamp .stamp__face::before { top: -17% !important; bottom: auto !important; height: 135% !important; width: auto !important; aspect-ratio: 277 / 798; background-size: 100% 100% !important; background-position: center !important; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)) !important; transform: none !important; } #contacts .help-col--bride.stamp .stamp__face::before { left: 0 !important; right: auto !important; transform: translateX(-70%) !important; } #contacts .help-col--groom.stamp .stamp__face::before { right: 0 !important; left: auto !important; transform: translateX(70%) !important; } } @media (max-width: 899px) { #contacts .help-col.stamp .stamp__face::before { background-size: contain !important; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) !important; } } /* ---------- 123 NEED HELP: ROOM FOR THE FIGURES ABOVE THE CARDS, WIDER CARDS, SO NAMES STAY ON ONE LINE ---------- */ #contacts.help .wrap { max-width: 1260px !important; } #contacts .help-card { max-width: 1060px !important; } #contacts .section-head { margin-bottom: clamp(70px, 8vw, 110px) !important; } #contacts .stamp--contact .help-p__name { font-size: clamp(1.45rem, 2.6vw, 2.05rem) !important; white-space: nowrap; } @media (max-width: 899px) { #contacts .stamp--contact .help-p__name { white-space: normal; } #contacts .section-head { margin-bottom: 40px !important; } } /* ---------- 124 NEED HELP: MOBILE STACK LIKE THE MOCKUP, LESS OPAQUE GLASS, KOLAM CORNERS, NEW GROOM ---------- */ /* glass: more see-through, more blur */ #contacts .help-col.stamp .stamp__paper { background: url("../assets/images/home/kolam-gold.webp") left 18px top 14px / 46px 46px no-repeat, url("../assets/images/home/kolam-gold.webp") right 20px top 16px / 42px 42px no-repeat, url("../assets/images/home/kolam-gold.webp") left 18px bottom 14px / 46px 46px no-repeat, url("../assets/images/home/kolam-gold.webp") right 20px bottom 16px / 42px 42px no-repeat, radial-gradient(ellipse 60% 55% at 92% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 38%), linear-gradient(160deg, rgba(150, 34, 38, .26), rgba(96, 18, 22, .32)) !important; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); } /* groom: the attached picture, same height as the bride */ .help-col--groom .stamp__face::before { background-image: url("../assets/images/home/help-groom.webp") !important; } /* mobile: stacked like the mockup. figure in the top-left corner of the card, name, then Call and WhatsApp side by side */ @media (max-width: 899px) { #contacts .help-card { gap: 36px !important; } #contacts .help-col.stamp .stamp__face { padding: 44px 26px 34px !important; } #contacts .help-col--bride.stamp .stamp__face::before, #contacts .help-col--groom.stamp .stamp__face::before { top: -48px !important; bottom: auto !important; width: 96px !important; height: 230px !important; background-size: contain !important; background-position: center bottom !important; transform: none !important; } #contacts .help-col--bride.stamp .stamp__face::before { left: -8px !important; right: auto !important; } #contacts .help-col--groom.stamp .stamp__face::before { right: -8px !important; left: auto !important; } #contacts .help-col.stamp .stamp__face { padding-left: 116px !important; padding-right: 22px !important; } #contacts .help-col--bride.stamp .stamp__face { padding-left: 116px !important; } #contacts .help-col--groom.stamp .stamp__face { padding-left: 116px !important; } #contacts .stamp--contact .help-side { padding-right: 0 !important; font-size: 1.35rem !important; } #contacts .stamp--contact .help-p, #contacts .stamp--contact .help-p + .help-p { display: block !important; padding: 18px 0 16px !important; } #contacts .stamp--contact .help-p__btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-top: 14px !important; width: 100%; } #contacts .help-card .stamp--contact .help-p__btns a { min-height: 50px; font-size: 1rem !important; padding: 0 14px !important; } } @media (max-width: 420px) { #contacts .help-col.stamp .stamp__face { padding-left: 104px !important; padding-right: 18px !important; } #contacts .stamp--contact .help-p__name { font-size: 1.4rem !important; } } /* ---------- 126 NEED HELP: FINAL BACKGROUND OVERRIDE (STORY SECTION BACKGROUND) ---------- */ body #contacts.help.help { background: url("../assets/images/home/tex-maroon.webp") center / cover, #4A1010 !important; } body #contacts.help.help::before, body #contacts.help.help::after { display: none !important; } /* ---------- 127 NEED HELP: REFERENCE DESIGN (OPEN WHITE CHALK LAYOUT, NO CARDS, FIGURES BESIDE EACH FAMILY, KOLAM BETWEEN) ---------- */ body #contacts.help.help { padding-top: clamp(96px, 11vw, 150px) !important; padding-bottom: clamp(80px, 9vw, 130px) !important; color: #FFFFFF; } body #contacts .sec-ornament { display: none !important; } /* heading: "Give us a ring." with the chalk telephone beside it */ body #contacts .help-head { text-align: center; } body #contacts .help-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap; } body #contacts .help-title-row .section-title { margin: 0; color: #FFFFFF; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: .005em; } body #contacts .help-phone { display: block; width: clamp(62px, 6.4vw, 90px); height: auto; margin-top: .3em; } body #contacts .section-intro { margin: 12px auto 0; color: #FFFFFF; font-family: var(--f-sans); font-size: clamp(1rem, 1.5vw, 1.18rem); letter-spacing: .09em; } /* grid: desktop = figure | family | kolam | family | figure, in one row */ body #contacts .hc-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(10px, 1.6vw, 26px); max-width: 1180px; margin: clamp(34px, 5vw, 64px) auto 0; } body #contacts .hc-row { display: contents; } body #contacts .hc-fig { display: block; width: auto; height: clamp(340px, 37vw, 480px); max-width: none; align-self: center; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); } body #contacts .hc-kolam { justify-self: center; width: clamp(70px, 6.4vw, 96px); height: auto; opacity: .95; } body #contacts .hc-block { min-width: 0; color: #FFFFFF; } /* family heading: italic serif with two chalk swirls, then the small capitals line */ body #contacts .hc-side { display: flex; align-items: center; gap: clamp(10px, 1vw, 14px); margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.1; color: #FFFFFF; } body #contacts .hc-swirl { flex: none; width: clamp(40px, 4vw, 60px); height: auto; } body #contacts .hc-swirl--r { transform: scaleX(-1); } body #contacts .hc-sub { margin: 8px 0 26px; font-family: var(--f-sans); font-size: clamp(.8rem, 1.2vw, .95rem); letter-spacing: .3em; text-transform: uppercase; color: #FFFFFF; } /* people: details left, two round icon buttons right */ body #contacts .hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 34px); } body #contacts .hc-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; } body #contacts .hc-p__name { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; color: #FFFFFF; } body #contacts .hc-p__rel { margin: 2px 0 0; font-family: var(--f-sans); font-size: clamp(.95rem, 1.4vw, 1.05rem); color: #FFFFFF; } body #contacts .hc-p__num { margin: 4px 0 0; font-family: var(--f-sans); font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: .08em; color: #FFFFFF; } body #contacts .hc-p__btns { display: flex; gap: clamp(10px, 1.2vw, 18px); } body #contacts a.hc-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #FFFFFF; text-decoration: none; font-family: var(--f-sans); font-size: .9rem; letter-spacing: .04em; } body #contacts .hc-btn__ring { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; transition: transform .2s ease, filter .2s ease; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); } body #contacts a.hc-btn:hover .hc-btn__ring, body #contacts a.hc-btn:focus-visible .hc-btn__ring { transform: translateY(-2px); } /* the WhatsApp logo has a tail, so it is drawn a little larger to read the same size as the Call circle */ body #contacts .hc-btn__ring--call { background: #FFFFFF; color: #6E1A1E; } body #contacts .hc-btn__ring--wa { background: #25D366; color: #FFFFFF; } body #contacts .hc-btn__ring svg { width: 28px; height: 28px; } /* the tap target is the whole button (icon and label), kept at least 60px wide */ body #contacts a.hc-btn { min-width: 60px; padding: 4px 6px; box-sizing: border-box; } body #contacts a.hc-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 8px; } /* desktop: the figures stand a little past the edges of the column, like stickers, so the families get the room */ @media (min-width: 900px) { body #contacts .hc-row--bride .hc-fig { margin-left: -36px; } body #contacts .hc-row--groom .hc-fig { margin-right: -36px; } } /* tablet and phone: stacked. each family is a row (figure beside its details), the kolam sits between the two rows */ @media (max-width: 899px) { body #contacts .hc-grid { display: flex; flex-direction: column; gap: 40px; max-width: 600px; } body #contacts .hc-row { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); } body #contacts .hc-fig { height: clamp(330px, 62vw, 420px); flex: none; } body #contacts .hc-block { flex: 1; } body #contacts .hc-kolam { align-self: center; } } @media (max-width: 520px) { body #contacts .hc-fig { height: 330px; } body #contacts .hc-row { gap: 12px; } body #contacts .hc-p { grid-template-columns: 1fr; row-gap: 14px; } body #contacts .hc-p__btns { gap: 18px; } body #contacts .hc-btn__ring { width: 46px; height: 46px; } body #contacts .hc-btn__ring svg { width: 22px; height: 22px; } body #contacts .hc-side { font-size: 1.4rem; white-space: nowrap; gap: 8px; } body #contacts .hc-swirl { width: 26px; } body #contacts .hc-p__btns { gap: 14px; } body #contacts a.hc-btn { font-size: .82rem; } } /* ---------- 128 NEED HELP: PILL BUTTONS (WHITE CALL, GREEN WHATSAPP, ICON AND LABEL INSIDE) ---------- */ body #contacts a.hc-btn { flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 46px; padding: 0 20px 0 14px; box-sizing: border-box; border-radius: 999px; font-family: var(--f-sans); font-size: .95rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); transition: transform .2s ease, box-shadow .2s ease; } body #contacts a.hc-btn--call { background: #FFFFFF; color: #6E1A1E; } body #contacts a.hc-btn--wa { background: #25D366; color: #FFFFFF; } body #contacts a.hc-btn:hover, body #contacts a.hc-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .65); } body #contacts a.hc-btn--wa:hover, body #contacts a.hc-btn--wa:focus-visible { background: #1EBE5A; } body #contacts .hc-btn__ring { display: inline-grid; place-items: center; width: 22px; height: 22px; background: transparent !important; color: inherit !important; border-radius: 0; filter: none; } body #contacts .hc-btn__ring svg { width: 18px; height: 18px; } body #contacts .hc-btn__label { display: inline; } body #contacts .hc-p__btns { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; } body #contacts a.hc-btn { width: 136px; } @media (max-width: 520px) { body #contacts a.hc-btn { height: 42px; padding: 0 16px 0 12px; font-size: .88rem; gap: 6px; } } /* ---------- 129 NEED HELP: BUTTONS UNDER EACH NUMBER, SIDE BY SIDE (OUTLINE CALL, GREEN WHATSAPP) ---------- */ body #contacts .hc-list { gap: 32px; } body #contacts .hc-p { grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; } body #contacts .hc-p__info { text-align: left; } body #contacts .hc-p__btns { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; margin-top: 9px; } body #contacts a.hc-btn { width: auto; height: 46px; padding: 0 18px; font-size: .95rem; } body #contacts a.hc-btn--call { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; box-shadow: none; } body #contacts a.hc-btn--call:hover, body #contacts a.hc-btn--call:focus-visible { background: rgba(255, 255, 255, .12); } body #contacts a.hc-btn--wa { border: 1.5px solid #25D366; } body #contacts a.hc-btn .hc-btn__ring { width: 20px; height: 20px; } body #contacts a.hc-btn .hc-btn__ring svg { width: 17px; height: 17px; } @media (max-width: 520px) { body #contacts a.hc-btn { height: 46px; padding: 0 16px; font-size: .9rem; } body #contacts .hc-p__btns { gap: 10px; } } /* phones: Call and WhatsApp side by side, 46px tall, 10px apart; tighter padding so both fit beside the figure */ @media (max-width: 520px) { body #contacts .hc-p__btns { flex-direction: row; align-items: center; gap: 10px; } body #contacts a.hc-btn { height: 46px; padding: 0 12px; font-size: .85rem; gap: 6px; } } /* the relationship and the number read as one block with the name above them */ body #contacts .hc-p__rel { margin-top: 0; line-height: 1.3; } body #contacts .hc-p__num { margin-top: 1px; line-height: 1.3; } /* name, relation and number: one even rhythm, so they read as one person */ body #contacts .hc-p__info { display: flex; flex-direction: column; gap: 4px; } body #contacts .hc-p__info > p { margin: 0; } /* ---------- 130 CALENDAR: REFERENCE LAYOUT (BIG DATE, DAY | TIME | VENUE ROW, COUNTDOWN LINE, FOUR DAYS TABLE + RASI, SAVE BUTTON) ---------- */ body .calendar .cal-board .cal__sheet { outline: 1.5px solid #18181c; outline-offset: -12px; } body .calendar .cal-board .cal__big { margin: 0; line-height: .9; letter-spacing: .01em; } body .calendar .cal-board .cal__body { gap: 0; padding-top: 0; } body .calendar .cal-board .cal__info { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 2px solid #18181c; border-bottom: 2px solid #18181c; } body .calendar .cal-board .cal__info > div { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 14px 10px; text-align: center; min-height: 118px; } body .calendar .cal-board .cal__info > div + div { border-left: 2px solid #18181c; } body .calendar .cal-board .cal__wd-big { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(25.6px, 4.2vw, 40px); letter-spacing: .03em; text-transform: uppercase; line-height: 1; color: #18181c; } body .calendar .cal-board .cal__dmy { font-family: var(--f-display); font-style: italic; font-size: clamp(15.2px, 1.8vw, 19.2px); color: #18181c; } body .calendar .cal-board .cal__info-time b { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(24px, 4vw, 36.8px); line-height: 1; color: #18181c; } body .calendar .cal-board .cal__info-time .cal__k, body .calendar .cal-board .cal__info-place .cal__k { font-family: var(--f-display); font-style: italic; font-size: clamp(14.4px, 1.6vw, 17.6px); color: #18181c; letter-spacing: .01em; } body .calendar .cal-board .cal__info-place #cal-venue { font-family: var(--f-sans); font-size: clamp(13.12px, 1.5vw, 16px); line-height: 1.35; color: #18181c; } body .calendar .cal-board .cal__info-place .cal__k { display: none; } body .calendar .cal-board .cal__count { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 18px); margin: 0; padding: 14px 8px; border-bottom: 2px solid #18181c; font-family: var(--f-sans); font-size: clamp(12.8px, 1.5vw, 16px); font-weight: 600; letter-spacing: .14em; color: #18181c; } body .calendar .cal-board .cal__count-num b { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(25.6px, 4.4vw, 40px); letter-spacing: .02em; color: #18181c; margin-right: 2px; } body .calendar .cal-board .cal__count-num { display: inline-flex; align-items: baseline; gap: 4px; } body .calendar .cal-board .cal__dot { font-size: 22.4px; line-height: 1; } body .calendar .cal-board .cal__orn { display: inline-block; width: clamp(26px, 3.4vw, 36px); height: clamp(26px, 3.4vw, 36px); background: url("../assets/images/home/kolam-gold.webp") center / contain no-repeat; filter: brightness(0); } body .calendar .cal-board .cal__table-title { margin: 14px 0 6px; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: clamp(20px, 2.6vw, 27.2px); color: #18181c; display: flex; align-items: center; gap: 12px; } body .calendar .cal-board .cal__table-title::after { content: ""; flex: 1; height: 2px; background: #18181c; } body .calendar .cal-board .cal__table { width: 100%; border-collapse: collapse; font-family: var(--f-display); color: #18181c; } body .calendar .cal-board .cal__table td { padding: 9px 6px; border-bottom: 1px solid #18181c; font-size: clamp(14.72px, 1.7vw, 16.8px); vertical-align: middle; text-align: left; } body .calendar .cal-board .cal__table td:first-child { font-family: "Anton", sans-serif; font-size: clamp(16px, 2vw, 19.2px); letter-spacing: .02em; white-space: nowrap; width: 1%; } body .calendar .cal-board .cal__table td:nth-child(2) { border-left: 2px solid #18181c; padding-left: 12px; } body .calendar .cal-board .cal__table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; } body .calendar .cal-board .cal__table tr:last-child td { border-bottom: 0; } body .calendar .cal-board .cal__side { border: 2px solid #18181c; } body .calendar .cal-board .cal__side-title { font-family: var(--f-display); font-style: italic; font-weight: 700; background: none; color: #18181c; text-align: left; font-size: clamp(20px, 2.6vw, 27.2px); padding: 10px 12px 4px; letter-spacing: 0; } body .calendar .cal-board .cal__forecast li { font-size: 14.4px; border-bottom: 1px solid #18181c; } body .calendar .cal-board .cal__forecast b { color: #18181c; font-weight: 700; } /* Save the wedding date: maroon, white text, under the board */ body .calendar .save-date { display: flex; justify-content: center; margin-top: clamp(26px, 4vw, 40px); position: relative; z-index: 2; } body .calendar .save-date__btn { min-height: 50px; padding: 0 30px; border: 0; border-radius: 999px; background: #6E1A1E; color: #FFFFFF; font-family: var(--f-sans); font-size: 16px; font-weight: 600; letter-spacing: .04em; cursor: pointer; box-shadow: 0 12px 22px -12px rgba(60, 4, 10, .7); transition: background .2s ease, transform .2s ease; } body .calendar .save-date__btn:hover, body .calendar .save-date__btn:focus-visible { background: #4F1216; transform: translateY(-2px); } body .calendar .save-date__btn:focus-visible { outline: 2px solid #6E1A1E; outline-offset: 4px; } @media (max-width: 760px) { body .calendar .cal-board .cal__info > div { padding: 10px 6px; min-height: 0; } body .calendar .cal-board .cal__info-place #cal-venue { font-size: 11.52px; } } /* ---------- 131 CALENDAR: READABLE TEXT (LARGER TYPE, STACKED ON PHONES WITHOUT SHRINKING THE BOARD) ---------- */ body .calendar .cal-board .cal__table td { font-size: 18.4px; padding: 10px 6px; } body .calendar .cal-board .cal__table td:first-child { font-size: 20px; } body .calendar .cal-board .cal__table-title { font-size: clamp(22.4px, 2.8vw, 30.4px); } body .calendar .cal-board .cal__side-title { font-size: clamp(22.4px, 2.8vw, 30.4px); } body .calendar .cal-board .cal__forecast li { font-size: 16.8px; padding: 5px 0; } body .calendar .cal-board .cal__info-time .cal__k, body .calendar .cal-board .cal__info-place .cal__k { font-size: clamp(16px, 1.9vw, 19.2px); } body .calendar .cal-board .cal__info-place #cal-venue { font-size: clamp(15.2px, 1.7vw, 17.6px); } body .calendar .cal-board .cal__count { font-size: clamp(15.2px, 1.6vw, 17.6px); } body .calendar .cal-board .cal__dmy { font-size: clamp(16.8px, 2vw, 20.8px); } body .calendar .save-date__btn { font-size: 17.28px; } @media (max-width: 760px) { body .calendar .cal-board { width: 100%; } body .calendar .cal-board .cal__sheet { grid-template-columns: 1fr; padding: 18px 14px 16px; } body .calendar .cal-board .cal__big { font-size: 19vw; } body .calendar .cal-board .cal__info { grid-template-columns: 1fr; } body .calendar .cal-board .cal__info > div { min-height: 0; padding: 12px 8px; } body .calendar .cal-board .cal__info > div + div { border-left: 0; border-top: 2px solid #18181c; } body .calendar .cal-board .cal__wd-big { font-size: 32px; } body .calendar .cal-board .cal__dmy { font-size: 18.4px; } body .calendar .cal-board .cal__info-time b { font-size: 33.6px; } body .calendar .cal-board .cal__info-time .cal__k, body .calendar .cal-board .cal__info-place .cal__k { font-size: 16.8px; } body .calendar .cal-board .cal__info-place #cal-venue { font-size: 16.8px; line-height: 1.4; } body .calendar .cal-board .cal__count { font-size: 16px; gap: 10px; } body .calendar .cal-board .cal__count-num b { font-size: 33.6px; } body .calendar .cal-board .cal__table-title { font-size: 25.6px; } body .calendar .cal-board .cal__table td { font-size: 17.6px; padding: 11px 6px; } body .calendar .cal-board .cal__table td:first-child { font-size: 19.2px; } body .calendar .cal-board .cal__side { margin-top: 16px; } body .calendar .cal-board .cal__side-title { font-size: 25.6px; } body .calendar .cal-board .cal__forecast li { font-size: 17.6px; padding: 7px 0; } body .calendar .cal-board .cal__slip { display: none; } } /* phones: keep the big date, table and countdown inside the card */ @media (max-width: 760px) { body .calendar .cal-board .cal__big { font-size: 15vw; white-space: nowrap; } body .calendar .cal-board .cal__count-num b { font-size: 28.8px; } body .calendar .cal-board .cal__dot { display: none; } body .calendar .cal-board .cal__count { gap: 14px 12px; } body .calendar .cal-board .cal__table { table-layout: fixed; } body .calendar .cal-board .cal__table td { font-size: 16.32px; padding: 10px 4px; } body .calendar .cal-board .cal__table td:first-child { font-size: 17.6px; width: 22%; } body .calendar .cal-board .cal__table td:last-child { width: 24%; padding-right: 2px; } body .calendar .cal-board .cal__table td:nth-child(2) { padding-left: 8px; } } /* ---------- 132 CALENDAR: KEEPS THE LANDSCAPE CARD ON PHONES (SWIPE SIDEWAYS, TEXT AT FULL SIZE) ---------- */ @media (max-width: 760px) { body .calendar .cal-board { width: 800px; max-width: none; margin-left: 0; margin-right: auto; } body .calendar .cal-board .cal__sheet { grid-template-columns: 1fr 224px; padding: 40px 26px 24px; } body .calendar .cal-board .cal__big { font-size: 152px; white-space: nowrap; } body .calendar .cal-board .cal__info { grid-template-columns: 1fr 1fr 1fr; } body .calendar .cal-board .cal__info > div { min-height: 118px; padding: 14px 10px; } body .calendar .cal-board .cal__info > div + div { border-left: 2px solid #18181c; border-top: 0; } body .calendar .cal-board .cal__wd-big { font-size: 40px; } body .calendar .cal-board .cal__dmy { font-size: 19.2px; } body .calendar .cal-board .cal__info-time b { font-size: 36.8px; } body .calendar .cal-board .cal__info-time .cal__k, body .calendar .cal-board .cal__info-place .cal__k { font-size: 17.6px; } body .calendar .cal-board .cal__info-place #cal-venue { font-size: 16px; } body .calendar .cal-board .cal__count { font-size: 17.6px; gap: clamp(8px, 1.6vw, 18px); } body .calendar .cal-board .cal__count-num b { font-size: 40px; } body .calendar .cal-board .cal__dot { display: inline; } body .calendar .cal-board .cal__table-title { font-size: 30.4px; } body .calendar .cal-board .cal__table { table-layout: auto; } body .calendar .cal-board .cal__table td { font-size: 18.4px; padding: 9px 6px; } body .calendar .cal-board .cal__table td:first-child { font-size: 20px; width: 1%; } body .calendar .cal-board .cal__table td:last-child { width: auto; padding-right: 6px; } body .calendar .cal-board .cal__table td:nth-child(2) { padding-left: 12px; } body .calendar .cal-board .cal__side { margin-top: 0; } body .calendar .cal-board .cal__side-title { font-size: 30.4px; } body .calendar .cal-board .cal__forecast li { font-size: 16.8px; padding: 5px 0; } body .calendar .cal-board .cal__slip { display: block; } } /* ---------- 134 CALENDAR: TYPE AND WEIGHTS FOLLOW THE REFERENCE (ANTON CAPS, BOLD SERIF LABELS, ROMAN RASI, SANS VENUE) ---------- */ body .calendar .cal-board .cal__wd-big { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; } body .calendar .cal-board .cal__dmy { font-family: var(--f-display); font-style: italic; font-weight: 400; } body .calendar .cal-board .cal__info-time .cal__k, body .calendar .cal-board .cal__info-place .cal__k { font-family: var(--f-display); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } body .calendar .cal-board .cal__info-time b { font-family: "Anton", sans-serif; font-weight: 400; } body .calendar .cal-board .cal__info-place #cal-venue { font-family: var(--f-sans); font-weight: 400; } body .calendar .cal-board .cal__count { font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; } body .calendar .cal-board .cal__count-num b { font-family: "Anton", sans-serif; font-weight: 400; } body .calendar .cal-board .cal__table-title { font-family: var(--f-display); font-style: italic; font-weight: 700; } body .calendar .cal-board .cal__table td { font-family: var(--f-display); font-weight: 400; } body .calendar .cal-board .cal__table td:first-child { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; } body .calendar .cal-board .cal__table td:last-child { font-family: var(--f-display); font-weight: 700; } body .calendar .cal-board .cal__side-title { font-family: var(--f-display); font-style: normal; font-weight: 700; } body .calendar .cal-board .cal__forecast li { font-family: var(--f-display); font-weight: 400; } body .calendar .cal-board .cal__forecast b { font-family: var(--f-display); font-weight: 700; } /* ---------- 135 CALENDAR: WIDER DATE COLUMN IN THE FOUR DAYS TABLE; BOLDER, LARGER CELEBRATION NAMES ---------- */ body .calendar .cal-board .cal__table td:first-child { width: 128px; min-width: 128px; font-size: 23.2px; padding-right: 10px; } body .calendar .cal-board .cal__table td:nth-child(2) { font-weight: 700; font-size: 20.8px; line-height: 1.25; } body .calendar .cal-board .cal__table td:last-child { font-size: 17.6px; } /* ---------- 136 CALENDAR: CENTRED DATES, LIVE COUNTDOWN WITH SECONDS, BIGGER NUMBERS ---------- */ body .calendar .cal-board .cal__table td:first-child { text-align: center; } body .calendar .cal-board .cal__count { font-size: clamp(16.8px, 1.9vw, 20.8px); gap: clamp(10px, 2vw, 22px); } body .calendar .cal-board .cal__count-num b { font-size: clamp(41.6px, 5.4vw, 60.8px); line-height: 1; font-variant-numeric: tabular-nums; } body .calendar .cal-board .cal__count-num { gap: 6px; } body .calendar .cal-board .cal__orn { width: clamp(30px, 4vw, 42px); height: clamp(30px, 4vw, 42px); } /* keep the countdown on one line */ body .calendar .cal-board .cal__count { flex-wrap: nowrap; } body .calendar .cal-board .cal__count-num b { font-size: clamp(35.2px, 4.4vw, 51.2px); } body .calendar .cal-board .cal__orn { width: clamp(24px, 3vw, 32px); height: clamp(24px, 3vw, 32px); } /* ---------- 137 CALENDAR: COMPACT TEXT USES THE CELEBRATION DATE FONT (INTER 600) ---------- */ body .calendar .cal-board .cal__info-place #cal-venue { font-family: var(--f-sans); font-weight: 600; font-size: clamp(14.4px, 1.6vw, 16.8px); letter-spacing: .01em; line-height: 1.35; } body .calendar .cal-board .cal__count-num { font-family: var(--f-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(11.2px, 1.1vw, 12.8px); } body .calendar .cal-board .cal__count-num b { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: .02em; } /* ---------- 138 CALENDAR: BIGGER TABLE DATES, MORE AIR AROUND THE BIG DATE, TIME IN INTER 600 ---------- */ body .calendar .cal-board .cal__table td:first-child { font-size: 27.2px; } body .calendar .cal-board .cal__big { margin: 26px 0 22px; } body .calendar .cal-board .cal__info-time b { font-family: var(--f-sans); font-weight: 600; font-size: clamp(21.6px, 2.5vw, 28.8px); letter-spacing: 0; } /* ---------- 139 CALENDAR: TABLE TIMES AND CELEBRATION NAMES IN INTER 600; BUTTON READS ADD TO CALENDAR ---------- */ body .calendar .cal-board .cal__table td:last-child { font-family: var(--f-sans); font-weight: 600; } body .calendar .cal-board .cal__table td:nth-child(2) { font-family: var(--f-sans); font-weight: 600; } /* ---------- 140 CALENDAR: CELEBRATION NAMES IN ALL CAPS ---------- */ body .calendar .cal-board .cal__table td:nth-child(2) { text-transform: uppercase; letter-spacing: .04em; } /* ---------- 141 CALENDAR: YELLOW HIGHLIGHT ON THE KALYANAM ROW ---------- */ body .calendar .cal-board .cal__table tr.is-kalyanam td { background: #F7D54A; } body .calendar .cal-board .cal__table tr.is-kalyanam td:first-child { background: #F7D54A; } /* ---------- 142 CALENDAR: EXACT REFERENCE LAYOUT (FULL-WIDTH ROWS, TABLE + RASI PALAN SIDE BY SIDE BELOW) ---------- */ body .calendar .cal-board .cal__sheet { grid-template-columns: 1fr !important; } body .calendar .cal-board .cal__info { border-top: 2px solid #18181c; border-bottom: 2px solid #18181c; } body .calendar .cal-board .cal__info > div { position: relative; border-left: 0 !important; min-height: 104px; } body .calendar .cal-board .cal__info > div + div::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: #18181c; } body .calendar .cal-board .cal__info-place #cal-venue { text-align: left; } body .calendar .cal-board .cal__count { border-top: 0; border-bottom: 2px solid #18181c; justify-content: center; } body .calendar .cal-board .cal__orn { width: 66px; background: url("../assets/images/home/kolam-gold.webp") left center / 30px no-repeat, linear-gradient(#18181c, #18181c) right center / 26px 2px no-repeat; filter: brightness(0); } body .calendar .cal-board .cal__orn:last-child { background: url("../assets/images/home/kolam-gold.webp") right center / 30px no-repeat, linear-gradient(#18181c, #18181c) left center / 26px 2px no-repeat; } body .calendar .cal-board .cal__bottom { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; } body .calendar .cal-board .cal__days { padding: 6px 26px 8px 0; min-width: 0; } body .calendar .cal-board .cal__side { border: 0; border-left: 2px solid #18181c; padding: 0 0 0 22px; margin: 0; align-self: stretch; background: none; box-shadow: none; position: static; width: auto; } body .calendar .cal-board .cal__side-title { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 23.2px; padding: 14px 0 6px; margin: 0; border-bottom: 2px solid #18181c; white-space: nowrap; } body .calendar .cal-board .cal__forecast { margin: 0; padding: 0; list-style: none; } body .calendar .cal-board .cal__forecast li { display: flex; justify-content: space-between; gap: 8px; font-size: 15.2px; padding: 6px 0; border-bottom: 1px solid #18181c; } body .calendar .cal-board .cal__forecast li:last-child { border-bottom: 0; } body .calendar .cal-board .cal__table-title { margin: 12px 0 4px; } body .calendar .cal-board .cal__table { border: 0; } body .calendar .cal-board .cal__table td { border: 0; border-bottom: 1px solid #18181c; background: transparent; position: relative; } body .calendar .cal-board .cal__table td:nth-child(2) { border-left: 0; padding-left: 20px; } body .calendar .cal-board .cal__table tr:last-child td { border-bottom: 1px solid #18181c; } body .calendar .cal-board .cal__table td:first-child::after { content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 2px; background: #18181c; } body .calendar .cal-board .cal__table tr.is-kalyanam td { background: #F7D54A; } /* ---------- 143 CALENDAR: ONE VINTAGE TYPE SYSTEM (ANTON NUMERALS + HEAVY PLAYFAIR EVERYWHERE ELSE, SIZED FOR THE SCALED PHONE CARD) ---------- */ body .calendar .cal-board .cal__dmy { font-family:var(--f-display); font-style:italic; font-weight:600; font-size:21.6px; } body .calendar .cal-board .cal__info-time .cal__k { font-family:var(--f-display); font-weight:800; font-size:20.8px; letter-spacing:.03em; } body .calendar .cal-board .cal__info-time b { font-family:var(--f-display); font-weight:800; font-size:33.6px; letter-spacing:0; } body .calendar .cal-board .cal__info-place #cal-venue { font-family:var(--f-display); font-weight:700; font-size:20.8px; line-height:1.35; letter-spacing:0; } body .calendar .cal-board .cal__count { font-family:var(--f-display); font-weight:800; } body .calendar .cal-board .cal__count-num { font-family:var(--f-display); font-weight:800; font-size:18.4px; letter-spacing:.06em; } body .calendar .cal-board .cal__table-title { font-weight:800; font-size:33.6px; } body .calendar .cal-board .cal__table td { font-family:var(--f-display); font-weight:700; } body .calendar .cal-board .cal__table td:first-child { font-family:"Anton",sans-serif; font-weight:400; font-size:30.4px; letter-spacing:.03em; } body .calendar .cal-board .cal__table td:nth-child(2) { font-family:var(--f-display); font-weight:800; font-size:22.4px; letter-spacing:.02em; line-height:1.2; } body .calendar .cal-board .cal__table td:last-child { font-family:var(--f-display); font-weight:800; font-size:20.8px; } body .calendar .cal-board .cal__side-title { font-weight:800; font-size:28px; } body .calendar .cal-board .cal__forecast li { font-family:var(--f-display); font-weight:700; font-size:19.2px; padding:7px 0; } body .calendar .cal-board .cal__forecast b { font-family:var(--f-display); font-weight:800; } body .calendar .cal-board .cal__bottom { grid-template-columns: minmax(0, 1fr) 280px; } /* 143b fit */ body .calendar .cal-board .cal__info { grid-template-columns: 1fr 1fr 1.25fr; } body .calendar .cal-board .cal__info-place #cal-venue { font-size: 17.28px; white-space: nowrap; } body .calendar .cal-board .cal__table td:nth-child(2) { font-size: 19.2px; letter-spacing: .01em; } body .calendar .cal-board .cal__table td:last-child { font-size: 18.4px; padding-left: 4px; } body .calendar .cal-board .cal__table td:first-child { width: 112px; min-width: 112px; font-size: 28px; } body .calendar .cal-board .cal__bottom { grid-template-columns: minmax(0, 1fr) 256px; } body .calendar .cal-board .cal__forecast li { font-size: 17.6px; } /* 143c compact rasi */ body .calendar .cal-board .cal__forecast li { padding: 3px 0; line-height: 1.25; } body .calendar .cal-board .cal__side-title { padding: 10px 0 5px; } /* 143d celebration names in sentence case */ body .calendar .cal-board .cal__table td:nth-child(2) { text-transform: none; letter-spacing: 0; font-size: 21.6px; } /* ---------- 144 MEMORIES: CLEAR UPLOAD CALL TO ACTION (KICKER, ICON BUTTON, REASSURANCE LINE) ---------- */ .memories .memories__bottom--cta { flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; text-align: center; } .memories .memories__cta-kicker { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 3.4vw, 1.45rem); color: #5E1A1D; } .memories .memories__add { gap: 12px; min-height: 58px; margin: 0; padding: 0 34px; font-family: var(--f-sans); font-style: normal; font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; box-shadow: 0 14px 24px -14px rgba(60, 4, 10, .75) !important; } .memories .memories__add-ico { width: 26px; height: 26px; flex: none; } .memories .memories__add:hover, .memories .memories__add:focus-visible { transform: translateY(-2px); } .memories .memories__cta-note { margin: 0; max-width: 34ch; font-family: var(--f-sans); font-size: .92rem; line-height: 1.45; color: #5A3F2C; } /* ---------- 145 STACKED SECTIONS: READING ROOM BELOW THE LAST CONTENT (PHONES) ---------- */ .stack-pad { display: none; } @media (max-width: 900px) { .stack-sec > .stack-pad { display: block; height: 30vh; height: 30svh; pointer-events: none; } } /* ---------- 146 SAVE THE DATE BUTTON: ICON, CLEARER LABEL, REASSURANCE LINE ON A CREAM PLATE ---------- */ body .calendar .save-date { flex-direction: column; align-items: center; gap: 10px; text-align: center; } body .calendar .save-date__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 30px; font-size: 17.6px; } body .calendar .save-date__ico { width: 26px; height: 26px; flex: none; } body .calendar .save-date__note { margin: 0; max-width: 30ch; font-family: var(--f-sans); font-size: 14.72px; line-height: 1.45; font-weight: 500; color: #3E2415; } /* ---------- 147 CELEBRATIONS: CARDS ARE STATIC (LIGHTER STACKING); ONLY THE TEXT INSIDE FADES IN ---------- */ .js .stampset .stamp--pic, .js .stampset .stamp--text { opacity: 1; translate: none; transition: none; } .js .stampset .stamp--text .stamp__face > *, .js .stampset .stamp__cap { opacity: 0; translate: 0 12px; transition: opacity .7s ease, translate .7s ease; } .js .stampset .stamp--text .stamp__face > :nth-child(2) { transition-delay: .08s; } .js .stampset .stamp--text .stamp__face > :nth-child(3) { transition-delay: .16s; } .js .stampset .stamp--text .stamp__face > :nth-child(4) { transition-delay: .24s; } .js .stampset .stamp--text .stamp__face > :nth-child(5) { transition-delay: .32s; } .js .stampset.words-in .stamp--text .stamp__face > *, .js .stampset.words-in .stamp__cap { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .js .stampset .stamp--text .stamp__face > *, .js .stampset .stamp__cap { opacity: 1; translate: none; transition: none; } } /* 147b slower, later text fade */ .js .stampset .stamp--text .stamp__face > *, .js .stampset .stamp__cap { transition: opacity 1s ease .25s, translate 1s ease .25s; } .js .stampset .stamp--text .stamp__face > :nth-child(2) { transition-delay: .45s; } .js .stampset .stamp--text .stamp__face > :nth-child(3) { transition-delay: .65s; } .js .stampset .stamp--text .stamp__face > :nth-child(4) { transition-delay: .85s; } .js .stampset .stamp--text .stamp__face > :nth-child(5) { transition-delay: 1.05s; } /* ---------- 148 NEED HELP: ONE-TAP QUICK CALL, TAPPABLE NUMBERS, WHAT EACH PERSON HELPS WITH ---------- */ body #contacts .help-head { display: flex; flex-direction: column; align-items: center; } body #contacts a.hc-p__num { display: inline-block; color: inherit; text-decoration: none; } body #contacts a.hc-p__num:hover, body #contacts a.hc-p__num:focus-visible { text-decoration: underline; text-underline-offset: 3px; } body #contacts .hc-p__help { margin: 0; font-family: var(--f-display); font-style: italic; font-size: .95rem; line-height: 1.3; color: rgba(243, 234, 216, .75); } /* ---------- 149 GUESTBOOK: FLAT POSTCARD (NO DROP SHADOWS) ---------- */ .guestbook .pcard2, .guestbook .wish-form.pform .pcard2 { box-shadow: inset 0 0 0 6px #EED8AE, inset 0 0 0 7px rgba(139, 30, 34, .55), inset 0 0 0 10px #EED8AE, inset 0 0 0 11px rgba(139, 30, 34, .4); } @media (min-width: 900px) { .guestbook .pcard2, .guestbook .wish-form.pform .pcard2 { box-shadow: none; } } .guestbook .pcard2__stamp { box-shadow: inset 0 0 0 1px rgba(139, 30, 34, .45); } .guestbook .pform__send, .guestbook .pform__send:hover, .guestbook .pform__send:focus-visible { box-shadow: none; } .guestbook .wishes .wish-card.pmini { box-shadow: inset 0 0 0 5px #EED8AE, inset 0 0 0 6px rgba(139, 30, 34, .5); } .guestbook .pcard2 .up-field input, .guestbook .pcard2 .up-field textarea { box-shadow: none; } /* ---------- 150 MEMORIES: KOLAM IS A TRANSPARENT PNG (NO BLEND MODE, NO WHITE SQUARE) ---------- */ .memories__kolam img { mix-blend-mode: normal !important; background: none; } /* ---------- 151 MEMORIES: PHOTOS OPEN IN A LIGHTBOX ---------- */ .memories .film__frame img { cursor: zoom-in; } .lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 56px 16px 64px; background: rgba(20, 8, 4, .92); animation: lbIn .25s ease; } .lb[hidden] { display: none; } @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } } .lb__fig { margin: 0; max-width: min(92vw, 1100px); max-height: 100%; display: grid; gap: 12px; justify-items: center; } .lb__img { max-width: 100%; max-height: calc(100svh - 150px); object-fit: contain; border-radius: 2px; background: #1A0C07; } .lb__cap { margin: 0; color: #F3EAD8; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; text-align: center; } .lb__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(243, 234, 216, .6); border-radius: 50%; background: rgba(20, 8, 4, .5); color: #F3EAD8; font-size: 1.6rem; line-height: 1; cursor: pointer; } .lb__btn:hover, .lb__btn:focus-visible { background: rgba(243, 234, 216, .18); } .lb__close { top: 14px; right: 14px; } .lb__prev { left: 12px; top: 50%; translate: 0 -50%; } .lb__next { right: 12px; top: 50%; translate: 0 -50%; } @media (max-width: 640px) { .lb__prev, .lb__next { top: auto; bottom: 10px; translate: none; } .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); } } /* ---------- 152 SOUND BUTTON: MUSIC NOTE ICON ---------- */ .music__bars { display: none !important; } .music__note { width: 24px; height: 24px; display: block; } .music.is-playing .music__note { animation: noteBob 1.2s ease-in-out infinite; } @keyframes noteBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } } @media (prefers-reduced-motion: reduce) { .music.is-playing .music__note { animation: none; } } /* ---------- 153 MENU: RED KOLAM BACKDROP WITH A SOFT WHITE FROSTED PANEL FOR READABLE TEXT ---------- */ .menu { background: #8B1218 url("../assets/images/home/menu-bg.webp") center / cover no-repeat; } .menu__inner { background: rgba(255, 250, 240, .78); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border-radius: 14px; color: #5E1A1D; box-shadow: none; } .menu__list li { border-bottom: 1px dashed rgba(94, 26, 29, .3); } .menu__list a { color: #5E1A1D; } .menu__list a:hover, .menu__list a:focus-visible { color: #8B1E22; } .menu__num { color: #8B1E22; } .menu__orn { color: #8B1E22; } .menu__date { color: #5E1A1D; opacity: .85; } /* ---------- 154 GUESTBOOK FIELDS: FLAT, WHITER BOXES (NO DROP SHADOW, NO GLASS BLUR) ---------- */ .guestbook .pcard2 .up-field textarea, .guestbook .pcard2 .up-field input, .guestbook .pcard2 .pcard2__line input, .guestbook .pcard2 .up-field textarea:focus, .guestbook .pcard2 .up-field input:focus, .guestbook .pcard2 .pcard2__line input:focus { background: rgba(255, 255, 255, .88) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .guestbook .pcard2 .up-field textarea:focus, .guestbook .pcard2 .up-field input:focus { background: #FFFFFF !important; outline: 1.5px solid rgba(139, 30, 34, .45) !important; outline-offset: 0; } /* ---------- 155 SOUND BUTTON: SLASHED NOTE WHEN MUTED / PAUSED ---------- */ .music__toggle { position: relative; } .music:not(.is-playing) .music__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2.5px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 0 1.5px var(--maroon-deep); pointer-events: none; } .music:not(.is-playing) .music__note { opacity: .75; } /* ---------- 156 LOGO: HEADER BADGE, MENU, INTRO ---------- */ .topbar__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F1E3C8; box-shadow: inset 0 0 0 1.5px rgba(178, 138, 78, .8); } .topbar__logo { width: 38px; height: auto; display: block; } .menu__inner { display: flex; flex-direction: column; } .menu__logo { width: 96px; height: auto; margin: 0 auto 10px; display: block; } .intro__badge { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; background: #F1E3C8; box-shadow: inset 0 0 0 2px rgba(178, 138, 78, .85); opacity: 0; transform: translateY(10px); } .intro__badge img { width: 54px; height: auto; display: block; } .intro.is-playing .intro__badge { animation: rise 1.3s 2s var(--ease-out) forwards; } @media (prefers-reduced-motion: reduce) { .intro__badge { opacity: 1; transform: none; animation: none !important; } } /* ---------- 157 LOGO: FULL WHITE, NO CIRCLE (HEADER AND INTRO) ---------- */ .topbar__badge { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; } .topbar__logo { width: 50px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); } .intro__badge { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; } .intro__badge img { width: 84px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); } /* ---------- 158 LOGO: LARGER IN HEADER, MENU AND INTRO ---------- */ .topbar__logo { width: 76px; } .menu__logo { width: 170px; margin-bottom: 14px; } .intro__badge img { width: 140px; } @media (max-width: 480px) { .topbar__logo { width: 68px; } .intro__badge img { width: 120px; } } /* header bar is 64px tall: the logo hangs slightly past it rather than shrinking */ .topbar__mark { min-height: 0; } .topbar__logo { width: 70px; margin: -4px 0; } @media (max-width: 480px) { .topbar__logo { width: 64px; margin: -2px 0; } } /* ---------- 159 MEMORIES ROLL: VIDEOS AND LIGHTBOX DOWNLOAD ---------- */ .memories .film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; border: 3px solid #0D0704; border-radius: 3px; filter: sepia(.38) saturate(.82) contrast(1.1); cursor: zoom-in; } .memories .film__frame { position: relative; } .film__play { position: absolute; left: 50%; top: 42%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 8, 4, .6); color: #F3EAD8; font-size: 1rem; padding-left: 3px; pointer-events: auto; cursor: pointer; } .lb__stage { display: grid; place-items: center; } .lb__dl { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #F3EAD8; color: #5E1A1D; font-family: var(--f-sans); font-weight: 600; text-decoration: none; } .lb__dl[hidden] { display: none; } /* ---------- 160 LIVE CONTENT: REAL WISHES AND UPLOADS OF ANY LENGTH / SHAPE ---------- */ .guestbook .wishes .wish-card.pmini { min-width: 0; } .guestbook .wishes .wish-card__text, .guestbook .wishes .wish-card__name, .guestbook .wishes .wish-card__rel { overflow-wrap: anywhere; word-break: break-word; } .guestbook .wishes .wish-card__text { white-space: pre-line; } .guestbook .wishes .wish-card__by { text-align: center; max-width: 100%; } .wish-form .up-field, .wish-form .up-field input, .wish-form .up-field textarea { min-width: 0; max-width: 100%; } .up-status { overflow-wrap: anywhere; } .up-list, .up-item { min-width: 0; max-width: 100%; } .up-item__body { min-width: 0; } .memories .film__frame { aspect-ratio: 1; overflow: hidden; } .memories .film__frame img, .memories .film__frame video { height: 100%; max-width: none; object-fit: cover; } .film__track { animation-duration: 110s; } .film--few .film__track { animation-duration: 140s; } /* the guestbook already ends on a stamp and a quote, so it needs less spare space under the wishes */ .guestbook { padding-bottom: clamp(30px, 6vw, 60px); } /* wishes of different lengths: each one sits in the middle of its slide instead of hugging the top */ .guestbook .wishes .wish-card.pmini { align-content: center; } /* ---------- 161 ALBUM PAGE (album.html) AND ITS LINKS ---------- */ .alb-page { margin: 0; min-height: 100svh; background: var(--grain, none), #F1E8D4; color: var(--ink, #3A2415); } .alb-top { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px; background: #3A1214; color: #F3EAD8; } .alb-top__back { color: #F3EAD8; font-size: .85rem; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; } .alb { max-width: 1160px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) var(--gutter) 90px; text-align: center; } .alb__names { font-family: var(--f-display); color: var(--oxide); letter-spacing: .08em; } .alb__title { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1.05; color: var(--maroon); margin: 6px 0 10px; } .alb__intro { max-width: 36rem; margin: 0 auto 22px; color: var(--muted, #6B4A2E); } .alb__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 16px; text-align: left; } .alb__tabs { display: inline-flex; border: 1.5px solid rgba(110, 21, 24, .55); border-radius: 999px; overflow: hidden; } .alb__tab { min-height: 40px; padding: 0 18px; border: 0; background: transparent; color: #5E1A1D; font: 600 .85rem var(--f-sans); cursor: pointer; } .alb__tab[aria-selected="true"] { background: #6E1518; color: #F7EBD2; } .alb__count { flex: 1; text-align: center; font-size: .82rem; color: var(--muted, #6B4A2E); } .alb__select { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(110, 21, 24, .55); background: transparent; color: #5E1A1D; font: 600 .85rem var(--f-sans); cursor: pointer; } .alb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } @media (min-width: 700px) { .alb__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } } @media (min-width: 1000px) { .alb__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .alb__item { position: relative; aspect-ratio: 1; overflow: hidden; background: #2A1A12; cursor: zoom-in; border-radius: 2px; -webkit-tap-highlight-color: transparent; } .alb__item img, .alb__item video { display: block; width: 100%; height: 100%; object-fit: cover; } .alb__item:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 2px; } .alb__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 8, 4, .6); color: #F3EAD8; font-size: .9rem; padding-left: 3px; pointer-events: none; } .alb__tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(20, 8, 4, .25); display: none; } .alb--selecting .alb__item { cursor: pointer; } .alb--selecting .alb__tick { display: block; } .alb__item.is-on { outline: 3px solid var(--turmeric); outline-offset: -3px; } .alb__item.is-on .alb__tick { background: var(--turmeric) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%234A1010' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--turmeric); } .alb__empty { margin: 40px auto; max-width: 24rem; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--muted, #6B4A2E); } .alb__more { margin-top: 20px; } .alb__more [hidden] { display: none; } .alb__add { margin-top: 36px; } .alb__addlink { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px; background: linear-gradient(180deg, #F3D58A, #D8A94E); color: #4A1010; font: 600 1rem var(--f-display); text-decoration: none; box-shadow: 0 10px 24px -12px rgba(60, 20, 4, .55); } .alb__credit { margin-top: 28px; } .alb__sel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); background: #3A1214; color: #F3EAD8; box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); } .alb__sel[hidden] { display: none; } .alb__sel span { flex: 1; font-size: .9rem; font-weight: 600; } .alb__selbtn { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(243, 234, 216, .6); background: transparent; color: #F3EAD8; font: 600 .88rem var(--f-sans); cursor: pointer; } .alb__selbtn--go { background: linear-gradient(180deg, #F3D58A, #D8A94E); border-color: transparent; color: #4A1010; } .alb__selbtn:disabled { opacity: .5; } .lb__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } button.lb__dl { border: 0; cursor: pointer; font: inherit; } button.lb__dl[hidden] { display: none; } /* links to the album from the memories section and the upload card */ .memories__albumlink, .up-album { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(110, 21, 24, .6); color: #5E1A1D; font: 600 .9rem var(--f-sans); text-decoration: none; background: rgba(255, 248, 232, .45); } .memories__albumlink[hidden], .up-album[hidden] { display: none; } .memories__albumwrap { display: flex; justify-content: center; margin-top: 6px; } .alb__select { margin-left: auto; } .alb__count { order: 3; flex-basis: 100%; text-align: left; margin-top: -2px; } .alb-page .lb { background: rgba(14, 6, 3, .97); } /* ---------- 162 ALBUM PAGE: SILK HEADER, PAPER PRINTS, KOLAM BORDER ---------- */ .alb-page { background: linear-gradient(rgba(241, 232, 212, .55), rgba(241, 232, 212, .55)), url("../assets/images/home/tex-paper.webp") center / 520px auto, #EFE2C6; } .alb-top { position: absolute; left: 0; right: 0; top: 0; z-index: 30; background: transparent; } .alb-top__back { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .alb-hero { position: relative; text-align: center; color: #F6ECD8; padding: 74px var(--gutter) 64px; background: linear-gradient(180deg, rgba(34, 8, 10, .72), rgba(70, 14, 18, .62) 55%, rgba(40, 8, 10, .82)), url("../assets/images/home/menu-bg.webp") center / cover, #4A1014; } .alb-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url("../assets/images/kolam-band.svg") center / auto 30px repeat-x; opacity: .55; } .alb-hero__logo { display: block; width: clamp(104px, 28vw, 140px); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); } .alb-hero__kicker { font: 600 .74rem var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--turmeric); } .alb-hero__title { margin: 6px 0 2px; font-family: var(--f-script); font-weight: 400; font-size: clamp(3rem, 12vw, 5rem); line-height: 1.05; color: #FFF6E2; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); } .alb-hero__title em { color: var(--turmeric); font-style: normal; padding: 0 .08em; } .alb-hero__date { font: 500 .9rem var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 240, 210, .85); } .alb-hero__intro { max-width: 30rem; margin: 18px auto 24px; color: rgba(255, 244, 222, .88); line-height: 1.6; } .alb-hero__add { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border-radius: 999px; background: linear-gradient(180deg, #F3D58A, #D8A94E); color: #4A1010; font: 600 1rem var(--f-display); text-decoration: none; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5); } .alb { padding-top: 0; } .alb__bar { position: sticky; top: 0; z-index: 25; margin: 0 calc(var(--gutter) * -1) 22px; padding: 12px var(--gutter); background: rgba(239, 226, 198, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(178, 138, 78, .55); box-shadow: 0 10px 18px -16px rgba(60, 30, 10, .6); } .alb__tabs { border-color: rgba(178, 138, 78, .9); background: rgba(255, 250, 238, .6); } .alb__tab[aria-selected="true"] { background: linear-gradient(180deg, #7A1C20, #5E1215); color: #F9EBCB; } .alb__select { border-color: rgba(178, 138, 78, .9); background: rgba(255, 250, 238, .6); } .alb__count { font: italic 500 .95rem var(--f-display); color: #7A5230; margin: 0; } .alb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding-top: 6px; } @media (min-width: 640px) { .alb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; } } @media (min-width: 1000px) { .alb__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; } } /* each picture is a print with a paper border and the guest's name written underneath */ .alb__item { aspect-ratio: auto; overflow: visible; background: #FFFBF1; border-radius: 2px; padding: 8px 8px 0; text-align: center; cursor: zoom-in; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(60, 30, 10, .25), 0 14px 22px -14px rgba(60, 30, 10, .6); transform: rotate(var(--r, 0deg)); transition: transform .25s, box-shadow .25s; } .alb__item:nth-child(4n+1) { --r: -1.1deg; } .alb__item:nth-child(4n+2) { --r: .9deg; } .alb__item:nth-child(4n+3) { --r: -.4deg; } .alb__item:nth-child(4n) { --r: 1.3deg; } .alb__item:hover { transform: rotate(0) translateY(-4px); } .alb__item::before { content: ""; position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgba(226, 173, 56, .55); transform: rotate(-3deg); z-index: 2; pointer-events: none; } .alb__item:nth-child(3n+2)::before { transform: rotate(4deg); background: rgba(139, 30, 34, .35); } .alb__ph { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #2A1A12; } .alb__ph img, .alb__ph video { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.92) contrast(1.04); } .alb__by { display: block; padding: 7px 4px 9px; min-height: 2.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.15rem/1.2 "Kalam", var(--f-script), cursive; color: #6E1518; } .alb__tick { top: 14px; right: 14px; z-index: 3; } .alb__item.is-on { outline: 0; box-shadow: 0 0 0 3px var(--turmeric), 0 14px 22px -14px rgba(60, 30, 10, .6); transform: rotate(0); } .alb__empty { color: #7A5230; } .alb__kolam { height: 46px; margin: 46px auto 0; max-width: 420px; background: url("../assets/images/kolam-band.svg") center / auto 46px no-repeat; filter: invert(1) sepia(1) saturate(3) hue-rotate(-18deg) brightness(.45); opacity: .6; } .alb__add { margin-top: 20px; } .alb__credit { color: #7A5230; } .alb__credit a { color: #6E1518; } /* ---------- 163 ALBUM: BUTTONS AND TABS MATCH THE REST OF THE SITE ---------- */ /* the camera button: cream on the silk header, the site's red on paper */ .alb-hero__add, .alb__addlink { gap: 12px; min-height: 58px; padding: 0 34px; border: 0; border-radius: 999px; font: 600 1.1rem var(--f-sans); letter-spacing: .02em; text-decoration: none; transition: transform .25s, background .25s; } .alb-hero__add { background: #FBF1DA; color: #5E1A1D; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .7); } .alb-hero__add:hover, .alb-hero__add:focus-visible { background: #FFFFFF; transform: translateY(-2px); } .alb__addlink { background: #8B1E22; color: #FBF4E2; box-shadow: 0 14px 24px -14px rgba(60, 4, 10, .75); } .alb__addlink:hover, .alb__addlink:focus-visible { background: #6E1518; transform: translateY(-2px); } .alb-hero__add svg, .alb__addlink svg { width: 26px; height: 26px; flex: none; } /* tabs: plain words with a line under the one you are on, like the site's headings */ .alb__bar { align-items: center; gap: 2px 18px; } .alb__tabs { display: inline-flex; gap: 6px; border: 0; border-radius: 0; background: none; overflow: visible; } .alb__tab { position: relative; min-height: 44px; padding: 0 12px; border: 0; background: none; font: italic 500 1.2rem var(--f-display); color: #8A6A48; letter-spacing: 0; } .alb__tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: #8B1E22; transform: scaleX(0); transition: transform .25s; } .alb__tab[aria-selected="true"] { background: none; color: #6E1518; } .alb__tab[aria-selected="true"]::after { transform: scaleX(1); } .alb__tab:hover { color: #6E1518; } .alb__select { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border: 1.5px solid rgba(139, 30, 34, .55); border-radius: 999px; background: none; color: #6E1518; font: 600 .88rem var(--f-sans); } .alb__select::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; } .alb--selecting .alb__select::before { background: #8B1E22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FBF4E2' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: #8B1E22; } .alb__select:hover { background: rgba(139, 30, 34, .08); } .alb__count { font-size: .9rem; } /* ---------- 167 PERFORMANCE: LIGHTER PAINTING ON PHONES ---------- */ /* a section that is off screen stops all its endless animations (the class is set in main.js) */ .is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; } /* the grain over the hero was re-drawn every 1.2s and the one over the page is blended on every scroll frame */ .hero__grain { animation: none; } @media (hover: none), (max-width: 900px) { body::after { display: none; } .hero__grain { display: none; } /* blurring what is behind an element is one of the costliest things a phone can be asked to do while scrolling */ *:not(.menu__inner) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .topbar.is-solid { background: rgba(43, 23, 13, .97); } .alb__bar { background: rgba(239, 226, 198, .98); } /* the stacking sheets keep their shrink and dimming (cheap), but no longer re-round their corners every frame on tall sections */ .stack-sec { border-radius: 0 !important; } .stack-shade { will-change: opacity; border-radius: 0; } } /* ---------- 166 ALBUM AND UPLOAD PAGES: THE SITE'S HEADER AND MENU ---------- */ .alb-page, .up-page2 { padding-top: var(--topbar-h); } .alb-page .topbar, .up-page2 .topbar { position: fixed; } .alb__bar { top: var(--topbar-h); } .alb-hero { padding-top: 40px; } .up-memories { padding-top: 34px; } .menu .menu__date { margin-top: 18px; } /* ---------- 165 UPLOAD PAGE: THE SAME CARD AS THE MEMORIES SECTION ---------- */ .up-page2 { margin: 0; min-height: 100svh; } .up-memories { min-height: 100svh; padding-block: clamp(36px, 8vw, 80px) 40px; display: grid; align-content: start; } .up-memories__logo { display: block; width: 92px; margin: 0 auto 18px; } .up-memories__logo img { display: block; width: 100%; height: auto; } .up-memories .memories__panel { margin-top: 0; } .up-memories__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 26px; text-align: center; } .up-memories__links a { color: #6E1518; font-size: .9rem; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; } .up-memories .up-credit { color: #7A5230; margin-top: 10px; text-align: center; } .up-memories .up-credit a { color: #6E1518; } /* ---------- 164 INTRO DOOR: SLIDE IT OPEN ---------- */ .entrance { touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform, opacity; backface-visibility: hidden; } /* following the finger */ .intro.is-dragging .leaf { animation: none; transition: none; } .intro.is-dragging .leaf--l { transform: rotateY(calc(var(--open, 0) * -96deg)); } .intro.is-dragging .leaf--r { transform: rotateY(calc(var(--open, 0) * 96deg)); } .intro.is-dragging .leaf__shade { opacity: var(--open, 0); transition: none; } .intro.is-dragging .entrance { transform: translate(-50%, -50%) scale(calc(1 + var(--open, 0) * .14)); transition: none; } .intro.is-dragging .intro__panel { opacity: calc(1 - var(--open, 0) * 1.5); transition: none; } .intro.is-dragging.is-release .leaf { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); } .intro.is-dragging.is-release .leaf__shade, .intro.is-dragging.is-release .entrance, .intro.is-dragging.is-release .intro__panel { transition: all .5s ease; } /* idle breathing stops (before the doors move) so the swing always starts from a settled door */ .intro.is-still .leaf { animation: none; } /* the knock already builds the anticipation, so the doors start almost at once after it */ .intro.is-opening .leaf { transition: transform 1.9s cubic-bezier(.3, 0, .2, 1) .02s; } .intro.is-opening .leaf__shade { transition: opacity 1.9s ease .02s; } /* if the doors were opened by dragging they carry on from where the finger left them, with no pause */ .intro.is-fromdrag.is-opening .leaf, .intro.is-fromdrag.is-opening .leaf__shade { transition-delay: 0s; } .intro.is-fromdrag.is-opening .entrance { transition: transform 2.6s cubic-bezier(.6, 0, .2, 1) .45s, opacity 1s ease 2s; } /* ---------- 168 INTRO LOGO AT ONCE, BLURRED HEADER, ALBUM LAYER ---------- */ /* the monogram is part of the first frame (it used to rise in after 2 seconds) */ .intro__badge, .intro.is-playing .intro__badge { opacity: 1; transform: none; animation: none; } /* header: see-through and blurred rather than brown (also on phones; it is one small bar) */ .topbar.is-solid, .topbar.is-solid:not(#x) { background: rgba(43, 23, 13, .38); -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; backdrop-filter: blur(14px) saturate(1.2) !important; box-shadow: 0 1px 0 rgba(240, 207, 126, .28); } /* the album, shown over the invitation so the music keeps playing */ .albumframe { position: fixed; inset: 0; z-index: 95; background: var(--ivory); } .albumframe[hidden] { display: none; } .albumframe iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---------- 169 INTRO: WHOLE DOOR TAPPABLE, QUICK FADE-IN ---------- */ /* the text panel sat over the lower half of the door and swallowed taps: let them through to the door */ .intro__panel { pointer-events: none; } .intro__panel .intro__hint-latch { pointer-events: auto; } @keyframes introFade { from { opacity: 0; } to { opacity: 1; } } .intro.is-playing .intro__badge, .intro.is-playing .intro__welcome, .intro.is-playing .intro__names, .intro.is-playing .intro__date, .intro.is-playing .intro__hint-latch, .intro.is-playing .intro__skip { animation: introFade .55s ease-out both; } .intro.is-playing .intro__welcome { animation-delay: .08s; } .intro.is-playing .intro__names { animation-delay: .14s; } .intro.is-playing .intro__date { animation-delay: .2s; } .intro.is-playing .intro__hint-latch { animation-delay: .28s; } .intro.is-opening .intro__panel, .intro.is-opening .intro__skip { animation: none; } /* ---------- 170 CELEBRATIONS: NO FADE-IN FOR THE TEXT; MEMORIES: A SCRAPBOOK OF TAPED POLAROIDS ---------- */ .js .stampset .stamp--pic, .js .stampset .stamp--text, .js .stampset .stamp--text .stamp__face > *, .js .stampset .stamp__cap { opacity: 1 !important; translate: none !important; transition: none !important; } .wall.wall--board, .memories .wall.wall--board { columns: auto; overflow: visible; margin-inline: 0; } .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; max-width: 980px; margin: 8px auto 0; padding: 12px 4px 0; } @media (min-width: 700px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } } .snap { position: relative; margin: 0; padding: 8px 8px 0; background: #FFFBF1; border-radius: 2px; text-align: center; cursor: zoom-in; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(60, 30, 10, .25), 0 16px 24px -14px rgba(60, 30, 10, .6); transform: rotate(var(--r, 0deg)); transition: transform .25s, box-shadow .25s; } .snap:nth-child(6n+1) { --r: -1.6deg; } .snap:nth-child(6n+2) { --r: 1.2deg; } .snap:nth-child(6n+3) { --r: -.6deg; } .snap:nth-child(6n+4) { --r: 1.4deg; } .snap:nth-child(6n+5) { --r: -1deg; } .snap:nth-child(6n) { --r: .7deg; } @media (min-width: 700px) { .snap:nth-child(3n+2) { margin-top: 18px; } } .snap:hover { transform: rotate(0) translateY(-4px); } .snap::before { content: ""; position: absolute; top: -10px; left: 50%; width: 58px; height: 19px; margin-left: -29px; background: rgba(226, 173, 56, .55); transform: rotate(-3deg); z-index: 2; pointer-events: none; } .snap:nth-child(3n+2)::before { transform: rotate(4deg); background: rgba(139, 30, 34, .35); } .snap__ph { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #2A1A12; } .snap__ph img, .snap__ph video { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.92) contrast(1.04); } .snap__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 8, 4, .6); color: #F3EAD8; font-size: 1rem; padding-left: 3px; cursor: pointer; } .snap figcaption { display: block; padding: 7px 4px 9px; min-height: 2.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.15rem/1.2 "Kalam", var(--f-script), cursive; color: #6E1518; } /* ---------- 171 MEMORIES: QUIET FRAMED PRINTS (NO TAPE, NO TILT) ---------- */ .board { gap: 34px 18px; max-width: 1000px; } @media (min-width: 700px) { .board { gap: 54px 34px; } } .snap, .snap:nth-child(n) { --r: 0deg; transform: none; padding: 9px; background: #FBF5E8; border-radius: 1px; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(178, 138, 78, .55), 0 0 0 7px #FBF5E8, 0 0 0 8px rgba(178, 138, 78, .45), 0 22px 30px -22px rgba(60, 30, 10, .55); margin: 8px; transition: transform .5s var(--ease-out), box-shadow .5s; } @media (min-width: 700px) { .snap:nth-child(3n+2) { margin-top: 34px; } } .snap:hover { transform: translateY(-3px); } .snap::before { display: none; } .snap__ph { aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px rgba(60, 30, 10, .35); } .snap__ph img, .snap__ph video { filter: none; transition: transform 1.2s var(--ease-out); } .snap:hover .snap__ph img, .snap:hover .snap__ph video { transform: scale(1.04); } .snap figcaption { padding: 14px 4px 6px; min-height: 0; font: 500 .68rem/1.2 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--coconut); } .snap figcaption::before { content: ""; display: block; width: 28px; height: 1px; margin: 0 auto 10px; background: var(--brass); opacity: .8; } /* ---------- 172 HERO GREETING: WARM SCRIPT ---------- */ .hero__welcome-big { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: clamp(2.5rem, 9.2vw, 5.2rem); line-height: 1.1; letter-spacing: .01em; color: #fff3d6; text-shadow: 0 2px 24px rgba(40, 14, 4, .75), 0 0 2px rgba(40, 14, 4, .5); } /* ---------- 173 HERO GREETING: SMALLER, TWO LINES ---------- */ .hero__welcome-big { font-size: clamp(1.7rem, 6.2vw, 3rem); line-height: 1.2; max-width: 9.5em; margin-inline: auto; text-wrap: balance; } /* ---------- 174 GREETING APPEARS FIRST, AS THE DOORS OPEN (BEFORE THE NAMES) ---------- */ .is-entered .hero__welcome { opacity: 1; transform: none; transition: opacity 1.1s ease .5s, transform 1.1s ease .5s; } /* ---------- 175 GREETING FADES IN TOGETHER WITH THE NAMES, AND MOVES WITH THEM ON SCROLL ---------- */ .hero__welcome { opacity: 0; translate: 0 22px; transform: translate3d(0, calc(var(--hp, 0) * -6vh), 0); transition: none; } .is-entered .hero__welcome { opacity: 1; translate: 0 0; transition: opacity 1.8s ease 1.5s, translate 1.8s cubic-bezier(.16, 1, .3, 1) 1.5s; } /* ---------- 176 GREETING FADES OUT ON SCROLL LIKE THE NAMES (entrance uses filter, scroll uses opacity) ---------- */ .hero__welcome { opacity: calc(1 - var(--hp, 0) * 2.4); filter: opacity(0); translate: 0 22px; transition: none; } .is-entered .hero__welcome { opacity: calc(1 - var(--hp, 0) * 2.4); filter: opacity(1); translate: 0 0; transition: filter 1.8s ease 1.5s, translate 1.8s cubic-bezier(.16, 1, .3, 1) 1.5s; } /* ---------- 177 WITH THE BLESSINGS OF OUR FAMILIES (replaces "Give us a ring") ---------- */ .blessings { padding-block: clamp(90px, 10vw, 140px); } .blessings .wrap { max-width: 880px; } .bl-head { text-align: center; } .bl-kicker { font-size: .74rem; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--coconut); padding-left: .42em; } .bl-title { margin-top: 6px; font-family: var(--f-script); font-weight: 400; font-size: clamp(3.4rem, 13vw, 6rem); line-height: 1.05; color: var(--maroon); } .bl-gem { display: block; width: 120px; height: 14px; margin: 10px auto 0; color: var(--oxide); } .bl-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(22px, 5vw, 56px); margin-top: clamp(36px, 6vw, 56px); text-align: center; } .bl-grid::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(transparent, rgba(96, 44, 48, .45) 12%, rgba(96, 44, 48, .45) 88%, transparent); } .bl-label { font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--coconut); padding-left: .3em; } .bl-label::after { content: ""; display: block; width: 44px; height: 1px; margin: 12px auto 0; background: var(--brass); } .bl-head-name { margin-top: 14px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 3.6vw, 1.45rem); line-height: 1.25; color: var(--maroon); } .bl-dot { display: block; width: 12px; height: 12px; margin: 18px auto 14px; color: var(--oxide); } .bl-name { font-family: var(--f-display); font-size: clamp(1rem, 3.2vw, 1.25rem); line-height: 1.25; color: var(--ink, #3A2418); } .bl-role { margin-top: 3px; font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--coconut); opacity: .8; padding-left: .26em; } .bl-help { margin-top: clamp(64px, 9vw, 100px); padding-top: clamp(36px, 5vw, 52px); border-top: 1px solid rgba(96, 44, 48, .22); text-align: center; } .bl-help__title { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 4.6vw, 2rem); color: var(--maroon); } .bl-help__intro { max-width: 34em; margin: 10px auto 0; font-size: .95rem; line-height: 1.55; color: var(--muted, #6B5646); } .bl-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(18px, 4vw, 44px); margin-top: 30px; } .bl-side__title { margin-bottom: 14px; font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--coconut); padding-left: .3em; } .bl-person { padding: 18px 8px; border-top: 1px solid rgba(96, 44, 48, .16); } .bl-person__name { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; color: var(--maroon); } .bl-person__rel { margin-top: 2px; font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--coconut); opacity: .8; padding-left: .24em; } .bl-person__num { display: inline-block; margin-top: 8px; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .06em; color: var(--ink, #3A2418); text-decoration: none; } .bl-person__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .bl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(96, 44, 48, .5); border-radius: 99px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--maroon); text-decoration: none; transition: background .2s, color .2s; } .bl-btn:hover, .bl-btn:focus-visible { background: var(--maroon); color: #F8EFD6; } @media (max-width: 420px) { .bl-contacts { gap: 0 12px; } .bl-btn { padding: 0 12px; } } /* ---------- 178 BLESSINGS SECTION ON THE SAME RED AS BEFORE ---------- */ body #contacts.blessings { background: url("../assets/images/home/tex-maroon.webp") center / cover, #4A1010; color: #F8EFD6; } #contacts .bl-kicker, #contacts .bl-label, #contacts .bl-role, #contacts .bl-side__title, #contacts .bl-person__rel { color: var(--gold-hi, #F0CF7E); opacity: 1; } #contacts .bl-title { color: #FFF3D6; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } #contacts .bl-gem, #contacts .bl-dot { color: var(--gold-hi, #F0CF7E); } #contacts .bl-label::after { background: var(--gold-hi, #F0CF7E); opacity: .7; } #contacts .bl-head-name, #contacts .bl-person__name, #contacts .bl-help__title { color: #FFF3D6; } #contacts .bl-name, #contacts .bl-person__num { color: #F8EFD6; } #contacts .bl-help__intro { color: rgba(248, 239, 214, .8); } #contacts .bl-grid::before { background: linear-gradient(transparent, rgba(240, 207, 126, .5) 12%, rgba(240, 207, 126, .5) 88%, transparent); } #contacts .bl-help { border-top-color: rgba(240, 207, 126, .3); } #contacts .bl-person { border-top-color: rgba(240, 207, 126, .22); } #contacts .bl-btn { border-color: rgba(240, 207, 126, .6); color: #FFF3D6; } #contacts .bl-btn:hover, #contacts .bl-btn:focus-visible { background: var(--gold-hi, #F0CF7E); color: #3E0F11; } /* ---------- 179 BLESSINGS: GARLAND, CHALK COUPLE AND KOLAM (LESS WORDS, MORE PICTURE) ---------- */ #contacts.blessings { padding-top: clamp(120px, 14vw, 170px); } .bl-grid { padding-bottom: clamp(150px, 34vw, 230px); } .bl-col { position: relative; } .bl-fig { position: absolute; left: 50%; bottom: calc(-1 * clamp(150px, 34vw, 230px) + 8px); height: clamp(130px, 31vw, 210px); width: auto; transform: translateX(-50%); opacity: .95; pointer-events: none; } .bl-kolam { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 4px; width: clamp(54px, 13vw, 84px); height: auto; opacity: 0; pointer-events: none; transition: opacity 1.4s ease .5s; } .js .bl-col.is-in ~ .bl-kolam, .is-fallback .bl-kolam { opacity: .95; } .no-js .bl-kolam { opacity: .95; } .bl-grid::before { bottom: clamp(150px, 34vw, 230px); } @media (max-width: 480px) { .bl-fig { left: 44%; } .bl-col--bride .bl-fig { left: 56%; } } /* ---------- 180 BIGGER GRAPHICS IN THE FAMILIES SECTION; MONOGRAM ON THE MOI CARD AND THE GUESTBOOK POSTCARD ---------- */ .blessings { --blh: clamp(210px, 52vw, 340px); } .bl-grid { padding-bottom: calc(var(--blh) + 8px); } .bl-grid::before { bottom: calc(var(--blh) + 8px); } .bl-fig { height: var(--blh); bottom: calc(-1 * var(--blh)); } .bl-kolam { width: clamp(92px, 24vw, 150px); bottom: calc(var(--blh) * .12); } @media (max-width: 480px) { .bl-fig { left: 42%; } .bl-col--bride .bl-fig { left: 58%; } } /* the monogram, in colour, in the middle of the card that slides out of the envelope */ .mcard__logo { width: auto; height: 62%; max-height: 190px; max-width: 80%; object-fit: contain; } .mcard__lotus--sm.mcard__logo { height: 96px; max-height: none; } /* the guestbook stamp shows the monogram instead of the two initials */ .guestbook .pcard2__mono { display: none !important; } .guestbook .pcard2__stamp img.pcard2__logo { display: block !important; width: 86%; height: auto; max-height: 90%; object-fit: contain; } .bl-grid { padding-bottom: calc(var(--blh) + 36px); } .bl-grid::before { bottom: calc(var(--blh) + 36px); } .bl-fig { bottom: calc(-1 * (var(--blh) + 22px)); } .bl-kolam { bottom: calc(var(--blh) * .12 + 2px); } /* the part of the card that peeks out of the envelope carries the monogram (the lower half is hidden by the pocket) */ .menv__card.mcard { place-items: start center; padding-top: 7%; } /* ---------- 181 THE WHOLE ALBUM, OPENED RIGHT INSIDE THE MEMORIES SECTION ---------- */ .gal { max-width: 1000px; margin: 28px auto 0; } .gal[hidden] { display: none; } .gal__bar { display: flex; justify-content: center; margin-bottom: 18px; } .gal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 1000px) { .gal__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .gal__item { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #2A1A12; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(178, 138, 78, .55), 0 10px 16px -12px rgba(60, 30, 10, .55); } .gal__item img, .gal__item video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); } .gal__item:hover img, .gal__item:hover video { transform: scale(1.05); } .gal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 .6rem/1.2 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #FBF5E8; background: linear-gradient(transparent, rgba(30, 14, 6, .7)); pointer-events: none; } .gal__item .snap__play { pointer-events: auto; } .gal__note { margin-top: 18px; text-align: center; font-style: italic; color: var(--coconut); } .gal__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; } .gal__less { min-height: 44px; padding: 0 18px; background: none; border: 0; font: 600 .78rem var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } /* ---------- 182 ALBUM GRID WITH PAGE NUMBERS ---------- */ .gal { margin-top: clamp(40px, 6vw, 64px); } .gal__bar { flex-direction: column; align-items: center; gap: 10px; } .gal__count { font: italic 500 .95rem var(--f-display); color: #7A5230; } .gal__grid { min-height: 120px; transition: opacity .25s; } .gal__grid.is-loading { opacity: .45; } .gal__pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; } .gal__pager[hidden] { display: none; } .gal__pg { min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid rgba(110, 21, 24, .45); border-radius: 999px; background: transparent; color: #5E1A1D; font: 600 .9rem var(--f-sans); cursor: pointer; transition: background .2s, color .2s; } .gal__pg:hover:not(:disabled) { background: rgba(110, 21, 24, .1); } .gal__pg[aria-current="page"] { background: #6E1518; border-color: #6E1518; color: #F7EBD2; } .gal__pg:disabled { opacity: .35; cursor: default; } .gal__pg--arrow { font-size: 1.3rem; line-height: 1; } .gal__gap { padding: 0 2px; color: #7A5230; } /* ---------- 183 MONOGRAM ON THE CARD THAT PEEKS OUT OF THE MOI ENVELOPE ---------- */ .menv__card.mcard { place-content: start center; padding-top: 9%; } .menv__card .mcard__logo { width: 26%; height: auto; max-height: none; max-width: none; }