/* ============================================================ Ryan Shon Photography — shared styles ============================================================ */ /* Google Fonts loaded via in each page's for better performance */ :root, [data-theme="light"], [data-theme="dark"]{ /* cinematic — dark charcoal + gold */ --paper:#100e0c; --paper-2:#191512; --paper-3:#211c17; --ink:#f0e9df; --ink-soft:#9a9086; --ink-body:#c8c0b2; --line:#2c2620; --line-2:#3a332b; --accent:#c9a25e; /* gold */ --accent-ink:#d8b878; --ph-border:#241f1a; --ph-bg:#191512; --tag-color:#f0e9df; --tag-bg:#100e0cb3; --lb-overlay:#0b0a08f7; --lb-border:#2c2620; --lb-btn:#c9a25e; --lb-caption:#9a9086; --veil-a:#0b0a08cc; --veil-b:#0b0a0800; --veil-hover-a:#0b0a08e6; --veil-hover-b:#0b0a0833; --cover-text:#f0e9df; --cover-h:#fff; --head-bg:rgba(16,14,12,.86); } :root { /* film-roll palette */ --f-gray:#62656a; --f-gray-lt:#878a8d; --f-spool:#6c6f72; --f-yellow:#f3c11c; --f-yellow-lt:#f8d957; --f-red:#e23b2c; --f-cyan:#38b6d4; --f-brown:#74462a; --f-outline:#241f1b; --display:'Bodoni Moda', Georgia, serif; --script:'Permanent Marker', cursive; --ui:'Work Sans', system-ui, sans-serif; --mono:'Space Mono', monospace; --maxw:1240px; } *{box-sizing:border-box} html{scroll-behavior:smooth; background:#100e0c; color-scheme:dark} body{animation:page-in .18s ease both; transition:opacity .15s ease} body.leaving{opacity:0 !important; animation:none} @keyframes page-in{from{opacity:0}to{opacity:1}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6; } a{color:inherit} img{display:block; max-width:100%} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px} .wrap.wide{max-width:min(94vw, 1900px)} .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-soft)} h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.08; margin:0; letter-spacing:-.01em} /* ---------------- film-roll logo ---------------- */ .filmlogo{display:inline-flex; align-items:center; --rh:46px; --film:calc(var(--rh) * .78); text-decoration:none} .filmlogo .reel{width:calc(var(--rh) * 1.16 * .57); height:calc(var(--rh) * 1.16); flex:none; position:relative; z-index:3} .filmlogo .reel img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(1.5px 2px 2px #0000002e)} .filmlogo .reel svg{width:100%; height:100%; display:block; filter:drop-shadow(1.5px 2px 0 #0000001a)} .filmlogo .strip{ position:relative; z-index:1; margin-left:calc(var(--rh) * -.20); --taper:calc(var(--film) * 2.54); padding-right:var(--taper); -webkit-mask-image:url(../photos/brand/film-taper-mask.png), linear-gradient(#000,#000); -webkit-mask-position:right center, left center; -webkit-mask-size:auto 100%, calc(100% - var(--taper) + 1px) 100%; -webkit-mask-repeat:no-repeat, no-repeat; mask-image:url(../photos/brand/film-taper-mask.png), linear-gradient(#000,#000); mask-position:right center, left center; mask-size:auto 100%, calc(100% - var(--taper) + 1px) 100%; mask-repeat:no-repeat, no-repeat; background:url(../photos/brand/film-strip-watercolor.png) left center / auto 100% repeat-x; border:none; border-radius:0; clip-path:inset(0 100% 0 0); } .filmlogo .strip::after{content:""; position:absolute; left:calc(100% - 1px); top:0; bottom:0; aspect-ratio:320/120; background:url(../photos/brand/film-leader.png) left center / 100% 100% no-repeat; pointer-events:none} .filmlogo .spro{ display:block; background:none; height:calc(var(--film) * .21); } .filmlogo .frames{display:flex; padding:0 2px 0 calc(var(--film)*.34)} .filmlogo .frame{position:relative; padding:calc(var(--film)*.085) calc(var(--film)*.16); border-left:1.5px solid #00000026} .filmlogo .frame:first-child{border-left:none} .filmlogo .frame span{ display:block; font-family:var(--script); font-weight:400; font-size:calc(var(--film)*.3625); line-height:1; white-space:nowrap; text-transform:uppercase; transform:skewX(-7deg); letter-spacing:.01em; color:transparent; background-image:linear-gradient(102deg,#2a1c11 0%,#3d2a1a 16%,#20150c 33%,#3a2818 50%,#1d1209 66%,#402c1b 83%,#241708 100%); -webkit-background-clip:text; background-clip:text; -webkit-mask-image:linear-gradient(100deg,#000 0 14%,#000d 24%,#000 38%,#000e 52%,#000 66%,#000d 78%,#000 90%,#000e 100%), radial-gradient(90% 200% at 38% 6%,#000 66%,#000b 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(100deg,#000 0 14%,#000d 24%,#000 38%,#000e 52%,#000 66%,#000d 78%,#000 90%,#000e 100%), radial-gradient(90% 200% at 38% 6%,#000 66%,#000b 100%); mask-composite:intersect; } /* unroll animation */ .filmlogo.play .reel{animation:fl-tug 1.5s cubic-bezier(.18,.7,.2,1) both} .filmlogo.play .strip{animation:fl-unroll 1.5s cubic-bezier(.18,.7,.2,1) both} .filmlogo.play .frame span{opacity:0; animation:fl-ink .45s ease both} .filmlogo.play .frame:nth-child(1) span{animation-delay:.55s} .filmlogo.play .frame:nth-child(2) span{animation-delay:.78s} .filmlogo.play .frame:nth-child(3) span{animation-delay:1.0s} @keyframes fl-tug{0%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-1px) rotate(-1deg)}100%{transform:none}} @keyframes fl-unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes fl-ink{from{opacity:0; transform:translateX(-6px)}to{opacity:1; transform:none}} @media(prefers-reduced-motion:reduce){ .filmlogo .strip{clip-path:none} .filmlogo .frame span{opacity:1} .filmlogo.play .reel,.filmlogo.play .strip,.filmlogo.play .frame span{animation:none} } /* ---------------- header ---------------- */ .site-head{ position:sticky; top:0; z-index:60; background:var(--head-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-head .wrap{display:flex; align-items:center; gap:24px; min-height:74px; padding-top:10px; padding-bottom:10px} .site-head .brand{--rh:64px} .nav{margin-left:auto; display:flex; align-items:center; gap:2px} .nav a{ font-family:var(--script); font-size:15px; font-weight:400; text-transform:uppercase; letter-spacing:.5px; transform:skewX(-7deg); text-decoration:none; color:var(--ink); padding:8px 15px; border-radius:4px; position:relative; transition:color .15s; } .nav a:hover{color:var(--accent)} .nav a.active{color:var(--accent)} .nav a.active::after{content:""; position:absolute; left:15px; right:15px; bottom:3px; height:1.5px; background:var(--accent)} .nav .ig{transform:none; width:38px; height:38px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:7px; margin-left:8px; transition:.15s} .nav .ig:hover{border-color:var(--accent); color:var(--accent)} .nav .ig svg{width:18px; height:18px} .nav-toggle{display:none; margin-left:auto; width:42px; height:42px; border:1.5px solid var(--line); border-radius:8px; background:none; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px} .nav-toggle span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s} /* home: hide bar logo until scrolled past hero */ body.home .site-head .brand{opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s; pointer-events:none} body.home .site-head.scrolled .brand{opacity:1; transform:none; pointer-events:auto} @media(max-width:760px){ .nav{position:fixed; top:74px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:8px 18px 16px; transform:translateY(-130%); transition:transform .25s; box-shadow:0 12px 24px #0000001a} .nav.open{transform:none} .nav a{padding:13px 6px; font-size:14px; border-bottom:1px solid var(--line)} .nav a.active::after{display:none} .nav .ig{margin:12px 0 0; width:44px; height:44px} .nav-toggle{display:flex} } /* theme toggle */ .theme-toggle{width:38px; height:38px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:7px; margin-left:8px; background:none; cursor:pointer; color:var(--ink); transition:.15s} .theme-toggle:hover{border-color:var(--accent); color:var(--accent)} .theme-toggle .t-moon{display:none} [data-theme="dark"] .theme-toggle .t-sun{display:none} [data-theme="dark"] .theme-toggle .t-moon{display:block} /* ---------------- hero (home) ---------------- */ .hero{text-align:center; padding:60px 0 30px; position:relative} .hero .filmlogo{--rh:220px; margin:0 auto} .hero .tagline{font-family:var(--ui); color:var(--ink-soft); font-size:14px; text-transform:uppercase; letter-spacing:3px; margin-top:18px} .scroll-cue{font-family:var(--mono); font-size:10.5px; letter-spacing:2px; color:var(--ink-soft); text-transform:uppercase; margin-top:34px; opacity:0; animation:fade-in .6s ease 1.4s forwards} @keyframes fade-in{to{opacity:1}} @media(max-width:680px){.hero .filmlogo{--rh:104px} .hero{padding:34px 0 18px}} /* ---------------- section headings ---------------- */ .section{padding:46px 0} .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap} .section-head h2{font-size:54px} .section-head .eyebrow{margin-bottom:8px} .section-head a.more{font-family:var(--ui); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); text-decoration:none; border-bottom:1.5px solid transparent; transition:.15s} .section-head a.more:hover{border-color:var(--accent)} .page-head{padding:54px 0 8px} .page-head h1{font-size:clamp(56px,9vw,108px)} .page-head .lede{max-width:560px; color:var(--ink-soft); font-size:17px; margin-top:14px} /* ---------------- photo tiles + placeholders ---------------- */ .ph{ position:relative; width:100%; background:var(--tile, var(--ph-bg)); overflow:hidden; border:1px solid var(--line-2); cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; } .ph::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(48deg,#0000000a 0 9px,transparent 9px 18px); opacity:.5} .ph:has(img)::before{content:none} .ph .tag{position:absolute; left:8px; bottom:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; color:var(--tag-color); background:var(--tag-bg); padding:2px 6px; border-radius:4px} .ph img{width:100%; height:100%; object-fit:cover} .ph:hover{transform:translateY(-4px); box-shadow:0 16px 38px #00000099; z-index:3} .ph:hover::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--accent)} /* editorial scattered collage (tightly packed masonry) */ .collage{position:relative} .collage .ph{position:absolute; box-sizing:border-box; border:1px solid var(--line-2); outline:none; box-shadow:0 12px 30px #00000080; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease} .collage .ph img{width:100%; height:100%; object-fit:cover} .collage .ph:hover{box-shadow:0 18px 42px #000000a6; z-index:6!important; filter:saturate(1.05) brightness(1.05)} /* masonry */ .masonry{columns:4; column-gap:18px} .masonry .ph{width:100%; margin:0 0 18px; break-inside:avoid} @media(max-width:1000px){.masonry{columns:3}} @media(max-width:680px){.masonry{columns:2; column-gap:12px} .masonry .ph{margin-bottom:12px}} /* ---------------- story layout (single couple gallery) ---------------- */ .story{display:flex; flex-direction:column; gap:26px; margin:0} .story-row{display:flex; gap:26px; justify-content:center} .story-row .ph{margin:0; width:100%} .story-row.pair .ph{flex:1 1 0; min-width:0} .story-row.solo .ph{width:min(100%, 720px)} .story-row.full .ph{width:100%} @media(max-width:760px){ .story{gap:14px} .story-row{gap:14px} .story-row.pair{flex-direction:column} .story-row.pair .ph{flex:none; width:100%} .story-row.solo .ph{width:100%} } /* ---------------- gallery covers (photos page) ---------------- */ .covers{display:grid; grid-template-columns:repeat(2,1fr); gap:22px} @media(max-width:760px){.covers{grid-template-columns:1fr}} .cover{position:relative; display:block; text-decoration:none; overflow:hidden; border:1px solid var(--line-2); aspect-ratio:1.5; background:var(--tile, var(--ph-bg))} .cover::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(48deg,#0000000a 0 9px,transparent 9px 18px); opacity:.5} .cover:has(img)::before{content:none} .cover img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease} .cover:hover img{transform:scale(1.04)} .cover .veil{position:absolute; inset:0; background:linear-gradient(to top, var(--veil-a) 0%, var(--veil-b) 55%); transition:background .3s} .cover:hover .veil{background:linear-gradient(to top, var(--veil-hover-a) 0%, var(--veil-hover-b) 70%)} .cover .meta{position:absolute; left:24px; bottom:20px; right:24px; color:var(--cover-text)} .cover .meta h3{font-size:54px; color:var(--cover-h)} .cover .meta .count{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; opacity:.85; margin-top:4px} .cover .meta .arrow{position:absolute; right:0; bottom:6px; font-size:26px; transition:transform .25s} .cover:hover .meta .arrow{transform:translateX(5px)} /* ---------------- lightbox ---------------- */ .lb{position:fixed; inset:0; z-index:200; background:var(--lb-overlay); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .2s} .lb.open{display:flex; opacity:1} .lb .stage{position:relative; max-width:88vw; max-height:84vh; display:flex; align-items:center; justify-content:center} .lb .media{max-width:88vw; max-height:84vh; border:8px solid var(--lb-border); box-shadow:0 20px 60px #00000080; background:var(--ph-bg); position:relative; overflow:hidden} .lb .media img{display:block; max-width:100%; max-height:calc(84vh - 16px); object-fit:contain} .lb .ph-fill{display:grid; place-items:center; min-width:240px; min-height:200px} .lb .ph-fill::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(48deg,#0000000d 0 10px,transparent 10px 20px)} .lb .ph-fill span{position:relative; font-family:var(--mono); font-size:13px; color:#6c6558; letter-spacing:1px} .lb .caption{position:absolute; left:0; right:0; bottom:-34px; text-align:center; color:var(--lb-caption); font-family:var(--mono); font-size:11px; letter-spacing:1px} .lb button{position:absolute; background:var(--lb-btn); color:#100e0c; border:none; cursor:pointer; border-radius:50%; display:grid; place-items:center; box-shadow:0 4px 14px #00000099; transition:.15s} .lb button:hover{background:#e6c485; transform:scale(1.07)} .lb .lb-close{top:22px; right:22px; width:46px; height:46px; font-size:22px} .lb .lb-prev,.lb .lb-next{top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:26px} .lb .lb-prev{left:18px} .lb .lb-next{right:18px} .lb .lb-prev:hover,.lb .lb-next:hover{transform:translateY(-50%) scale(1.07)} .lb .counter{position:absolute; top:28px; left:28px; font-family:var(--mono); font-size:12px; color:var(--lb-caption); letter-spacing:1.5px} @media(max-width:680px){ .lb .lb-prev{left:8px} .lb .lb-next{right:8px} .lb .lb-prev,.lb .lb-next{width:44px;height:44px;font-size:22px} .lb .media{border-width:5px} } /* ---------------- buttons / forms ---------------- */ .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--ui); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1.5px; text-decoration:none; cursor:pointer; padding:13px 26px; border-radius:6px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); transition:.18s} .btn:hover{background:var(--accent); border-color:var(--accent)} .btn.ghost{background:none; color:var(--ink)} .btn.ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)} .form{display:grid; gap:18px; max-width:540px} .form .row{display:grid; gap:18px; grid-template-columns:1fr 1fr} @media(max-width:560px){.form .row{grid-template-columns:1fr}} .field{display:grid; gap:7px} .field label{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-soft)} .field input,.field textarea,.field select{ font-family:var(--ui); font-size:15px; color:var(--ink); background:var(--paper-2); border:1.5px solid var(--line-2); border-radius:7px; padding:12px 14px; width:100%; transition:.15s} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); background:var(--paper-3)} .field textarea{min-height:130px; resize:vertical} /* conditional wedding panel */ .subform{display:grid; gap:18px; border:1.5px dashed var(--line-2); border-radius:10px; padding:20px 18px; background:var(--paper-2); position:relative; margin-top:2px} .subform[hidden]{display:none} .subform .sf-head{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent-ink); display:flex; align-items:center; gap:8px} .subform .sf-head::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent)} .subform.reveal-in{animation:sf-in .35s ease both} @keyframes sf-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} @media(prefers-reduced-motion:reduce){.subform.reveal-in{animation:none}} /* choice chips (checkbox group) */ .choices{display:flex; flex-wrap:wrap; gap:9px} .choices label{font-family:var(--ui); font-size:13px; letter-spacing:.3px; color:var(--ink); cursor:pointer; border:1.5px solid var(--line-2); background:var(--paper); border-radius:999px; padding:8px 15px; transition:.15s; user-select:none} .choices input{position:absolute; opacity:0; pointer-events:none} .choices label:hover{border-color:var(--ink-soft)} .choices input:checked + span{} .choices label:has(input:checked){background:var(--ink); color:var(--paper); border-color:var(--ink)} .choices label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px} /* ---------------- contact ---------------- */ .contact-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:54px; align-items:start} @media(max-width:780px){.contact-grid{grid-template-columns:1fr; gap:34px}} /* ---------------- about ---------------- */ .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start} @media(max-width:820px){.about-grid{grid-template-columns:1fr; gap:30px}} .about-grid .portrait{aspect-ratio:.82} .prose{max-width:560px} .prose h2{font-size:42px; margin:0 0 14px} .prose p{margin:0 0 16px; color:var(--ink-body)} .prose p.muted{color:var(--ink-soft); font-style:italic} /* ---------------- footer ---------------- */ .site-foot{border-top:1px solid var(--line); margin-top:60px; background:var(--paper-2)} .site-foot .wrap{display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding-top:34px; padding-bottom:34px} .site-foot .brand{--rh:40px} .site-foot .fnav{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto} .site-foot .fnav a{font-family:var(--ui); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; text-decoration:none; color:var(--ink-soft); padding:5px 10px; transition:.15s} .site-foot .fnav a:hover{color:var(--accent)} .site-foot .copy{width:100%; font-family:var(--mono); font-size:10.5px; letter-spacing:.5px; color:var(--ink-soft); border-top:1px dashed var(--line-2); padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap} /* fade-in on scroll */ .empty-note{font-family:var(--ui); color:var(--ink-soft); font-size:17px; max-width:520px} .empty-note a{color:var(--accent); text-decoration:none; border-bottom:1.5px solid var(--accent)} .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1; transform:none}