@font-face { font-family:'Museo-Sans'; src:url('static/fonts/museo-sans.woff2') format('woff2'), url('static/fonts/museo-sans.woff') format('woff'); font-weight:100; font-display:swap; }
@font-face { font-family:'Museo-Sans'; src:url('static/fonts/museo-sans-300.woff2') format('woff2'), url('static/fonts/museo-sans-300.woff') format('woff'); font-weight:300; font-display:swap; }
@font-face { font-family:'Museo-Sans'; src:url('static/fonts/museo-sans-500.woff2') format('woff2'), url('static/fonts/museo-sans-500.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Juana'; src:url('static/fonts/juana.woff2') format('woff2'), url('static/fonts/juana.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Tropical-Summer'; src:url(static/fonts/tropical-summer.otf) format('opentype'); }
*, *::before, *::after {
--clr-darker:color-mix(in srgb, var(--clr-accent), black 15%);
--clr-lighter:color-mix(in srgb, var(--clr-accent), white 50%);
--clr-transp-0:color-mix(in srgb, var(--clr-accent), transparent 100%);
--clr-transp-10:color-mix(in srgb, var(--clr-accent), transparent 90%);
--clr-transp-20:color-mix(in srgb, var(--clr-accent), transparent 80%);
--clr-transp-30:color-mix(in srgb, var(--clr-accent), transparent 70%);
--clr-lightgrey:#707070;
--clr-grey:#333333;
--clr-greysat:color-mix(in srgb,color-mix(in srgb, var(--clr-accent), hsl(0deg 0% 70%) 35%), black 40%);
--clr-error:#ff6b64;
--clr-success:#8dc68f;
--clr-warning: #fcbb68;
--ft-default:'Museo-Sans', sans-serif;
--ft-accent:'Juana', serif;
--ft-script:'Tropical-Summer', serif;
--pg-width:1050px;
--pg-gutter:20px;
box-sizing:border-box;
font:inherit; color:inherit;
position:relative;
padding:0; margin:0; border:0; line-height:1.45;
list-style:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; outline:none;
}
h1, h2, h3, h4, h5 { font-family:var(--ft-accent); line-height:1.3; }
iframe { width:100%; height:100%; border:0; margin:0; padding:0; }
a { outline:none; color:inherit; text-decoration:inherit; }
b { font-weight:500; }
[data-styling] i { color:var(--clr-accent); font-style:normal; }
[data-styling] u { text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--clr-accent); text-underline-offset:3px; }
[data-styling] a.linktext { text-decoration:underline 1px var(--clr-accent); text-underline-offset:3px; color:var(--clr-accent); transition:color 0.3s; white-space:nowrap; max-width:min(calc(100vw - 4 * var(--pg-gutter)), calc(var(--pg-width) - 2 * 25px)); overflow:hidden; display:inline-block; text-overflow:ellipsis; vertical-align:middle; }
[data-styling] a.linktext:hover { color:var(--clr-darker); }
ol, ul { list-style:none; }
img { max-width:100%; display:block; }
img[src=""] { display:none; }
html { touch-action:manipulation; background-color:var(--clr-backgroundColor); color:var(--clr-textColor); --weight-default:100; }
* ::selection { color:white; background: #4a4a4a; }
html, body { width:100%; height:100%; left:0px; -webkit-font-smoothing:antialiased; font-size:15px; font-family:'Museo-Sans',sans-serif; font-weight:var(--weight-default); }
body { overflow-x:hidden; }
table { border-collapse:collapse; }
textarea { white-space:revert; }
mark { color:var(--clr-darker); background-color:transparent }
mark:after { content:''; background-color:var(--clr-transp-20); border-radius:3px; inset:-2px -3px; width:calc(100% + 6px); position:absolute; pointer-events:none; z-index:-1; }
.juana { font-family:var(--ft-accent); }
.tropical { font-family:var(--ft-script); }
[data-modal].initial { transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.4s, opacity 0.3s; }
[data-modal].show { transform:translateY(0); opacity:1; pointer-events:initial; z-index:101; }
svg { width:1em; height:1em; margin-right:0.5em; stroke-width:1.5; stroke:var(--clr-accent); fill:none; stroke-linecap:round; stroke-linejoin:round; }
sup { font-size:0.7em; margin-bottom:0.6em; line-height:100%; }
label, .subtitle { text-transform:uppercase; font-size:0.9em; color:var(--clr-accent); font-weight:500; }
label + svg { position:absolute; font-size:1.2em; margin-left:0.75em; top:0.55em; z-index:1; }
label + svg + input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel]), label + svg + textarea { padding-left:2.7em; }
label.absolute { position:absolute; margin-top:-1.5em; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel]),.stripe-input,textarea { padding:0.5em 1em; border-radius:3px; border:1px solid lightgrey; color:var(--clr-grey); resize:none; background-color:white; transition:border 0.3s, box-shadow 0.3s; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel]):focus,.stripe-input:focus-within,.stripe-input.StripeElement--focus,textarea:focus { border:1px solid var(--clr-accent); box-shadow:0 1px 0 var(--clr-accent); }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])::placeholder,textarea::placeholder { color:#dcdcdc; letter-spacing:initial; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel]).error,.stripe-input.StripeElement--invalid,textarea.error { border:1px solid #FF5722; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel]).success,.stripe-input.StripeElement--complete { border:1px solid var(--clr-success); }
input[type="checkbox"].switch { border:1px solid rgba(0 0 0 / 5%); width:2.3em; height:1.5em; border-radius:20px; background:whitesmoke; transition:background 0.3s; }
input[type="checkbox"].switch:after { content:''; height:calc(100% - 2px); top:1px; left:1px;; aspect-ratio:1; border-radius:100px; background:white; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.1)); transition:left 0.3s }
input[type="checkbox"].switch:checked { background-color:var(--clr-accent); }
input[type="checkbox"].switch:checked:after { left:calc(50% - 3px); }
input[type="checkbox"].switch + label { cursor:pointer; transition:color 0.3s; }
input[type="checkbox"].switch + label:hover { color:var(--clr-darker); }
.switch-container { height:28px; display:grid; justify-content:left; align-items:center; grid-auto-flow:column; gap:10px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; height:1.067em; aspect-ratio:1; background-image: url('data:image/svg+xml,'); opacity:0; cursor:pointer; pointer-events:none; transition:opacity 0.3s; }
input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button { opacity:.3; pointer-events:unset; }
input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button:hover { opacity:.5; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled] { background:#fbfbfb; color:var(--clr-lightgrey); }
label:has(~ input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled]) + svg { stroke:#b3b3b3; }
label:has(~ input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled]) { color:var(--clr-lightgrey); }input[type="password"] { letter-spacing:0.2em; }
@keyframes rotation { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0px var(--clr-transp-20); } 100% { box-shadow:0 0 0 15px var(--clr-transp-0); } }
select { -webkit-appearance: none !important; -moz-appearance:none !important; appearance:none !important; padding: 0.5em 2.5em 0.5em 1em; border:1px solid #ebebeb; transition:border 0.3s; border-radius:3px; background-color:white; }
select:hover { border: 1px solid var(--clr-lighter); }
select[disabled]:hover { border:1px solid #ebebeb; cursor:not-allowed; }
select option[disabled] { color:lightgrey; }
.select-container { display:inline-flex; align-items:center; }
.select-container:after { content:''; border-bottom:1px solid; border-right:1px solid; border-color:lightgrey; position:absolute; right:1.1em; width:0.4em; aspect-ratio:1; transform:rotate(45deg); margin-top:-0.2em; transition:color 0.3s; pointer-events:none; }
.select-container:hover:after { border-color:var(--clr-lighter); }
.select-container svg { position:absolute; font-size:1.2em; margin-left:0.75em; top:0.5em; z-index:1; }
.select-container svg + select { padding-left:3em; }
.sso { width:100%; padding-left:3.5em; overflow:hidden; }
.sso-block { position: absolute; display:flex; align-items:center; justify-content:center; left:0; height:100%; aspect-ratio:1; }
.sso-block svg { stroke: none; fill:white; margin-right:0 }
.sso-block.fb { background-color:#274688; }
.sso-block.ggl { background-color:#bb0101; }
#background { height:400px; box-shadow:1px 1px 10px 5px rgba(0 0 0 / 15%); }
#background img { width:100%; height:100%; object-fit:cover; }
header { margin-top:-50px; display:grid; grid-template:auto / auto auto ; grid-gap:100px; justify-content:center; position:sticky; top:0px; z-index:3; transition:grid-gap 0.3s }
#photo { grid-row:1 / 2; grid-column:1 / 2; width:300px; aspect-ratio:1; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); border-radius:5px; background:white; border:5px solid white; z-index:2; transition:width 0.3s, filter 0.3s; }
#photo img, #photo_small img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
img[data-photo] { object-position:var(--position, 50%) var(--position, 50%); }
img[data-photo][data-bw="1"] { filter:grayscale(1) contrast(1.05); }
#photo .photo-container { overflow:hidden; width:100%; height:100%; border-radius:2px; }
#info-text { grid-row:1 / 2; grid-column:2 / 3; justify-content:end; display:flex; flex-direction:column; line-height:2; gap:5px; }
#info-text svg { margin-right:0.5em; min-width:1em; }
#name { font-size:50px; margin-bottom:10px; font-family:'Juana'; transition:font-size 0.3s }
#dates,#location { color:color-mix(in srgb, var(--clr-textColor), transparent 30%); display:flex; font-size:20px; align-items:center; transition:font-size 0.3s, height 0.3s, opacity 0.3s; }
#dates a { color:var(--clr-accent); margin-inline:10px; }
#dates .month { max-width:19vw; overflow:hidden; text-overflow:ellipsis; }
/* Responsive adjustments */
@media (max-width: 500px) {
#info-text {
font-size: 14px;
}
}
@media (max-width: 400px) {
#info-text {
font-size: 12px;
}
}
main { width:var(--pg-width); margin:auto; }
menu { color:var(--clr-grey); margin-top:150px; position:sticky; top:90px; z-index:3 }
menu ul { display:flex; width:100%; justify-content:space-between; }
menu li { display:flex; align-items:center; font-size:18px; border-radius:4px; box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); padding:1em 2em; background:white; }
menu:after { content:''; background:linear-gradient(0, color-mix(in srgb, var(--clr-backgroundColor), transparent 40%), color-mix(in srgb, var(--clr-backgroundColor), transparent 10%) 75%); inset:0px -20px -20px; position:absolute; backdrop-filter: blur(5px); -webkit-backdrop-filter:blur(5px); z-index:-1; }
.menu-title { max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:color 0.3s, transform 0.3s }
.menu-title:hover { color:var(--clr-darker); transform:translateX(5px); }
#header-small { grid-area:1 / 1 / -1 / -1; margin:0 auto auto; display:grid; grid-auto-flow:column; grid-gap:20px; align-items:center; top:20px; transform:translateY(-5px); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
#photo_small { width:50px; aspect-ratio:1; box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); border-radius:5px; overflow:hidden; background:white; border:2px solid white; }
#name_small { font-size:35px; font-family:'Juana'; }
header.mini { overflow:hidden; pointer-events:none; }
header.mini #header-small { transform:translateY(0px); opacity:1; pointer-events:initial; }
header.mini #header-small:after { content:''; background:linear-gradient(0, color-mix(in srgb, var(--clr-backgroundColor), transparent 10%), var(--clr-backgroundColor) 75%); inset:-20px -50vw -20px; position:absolute; backdrop-filter: blur(5px); -webkit-backdrop-filter:blur(5px); z-index:-1; }
header :is(#photo,#info-text) { transform:translateY(0px); opacity:1; transition:transform 0.3s, opacity 0.3s; }
header.mini :is(#photo,#info-text) { transform:translateY(10px); opacity:0; pointer-events:none; }
.section-container { display:flex; flex-direction:column; }
section { padding-inline:25px; margin-top:120px; }
h2 { margin-bottom:60px; font-size:28px; display:block; transition:opacity 0.3s; }
h2:after { content:''; display:block; position:absolute; margin-top:15px; background-color:var(--clr-accent); height:3px; width:50px; }
h2:empty { display:none; }
main p { line-height:1.8; font-size:1.1rem; }
main p::first-letter { font-family:'Juana'; float:left; font-size:3.5em; line-height:1em; padding:0em 10px 0 10px; }
button, input[type="file"] + label { display: inline-flex; align-items:center; background:var(--clr-accent); font-size:1.1rem; width:fit-content; height:fit-content; padding: 0.5em 1.2em; color:white; border-radius:4px; cursor:pointer; font-weight:500; white-space:nowrap; text-transform:unset; transition: background-color 0.3s, filter 0.5s, color 0.3s, outline 0.3s, box-shadow 0.3s; }
button:hover, input[type="file"] + label:hover { background:var(--clr-darker); }
button:hover:after, input[type="file"] + label:hover:after { transform:translateX(3px); }
button:after, input[type="file"] + label:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); margin-left:5px; width:1em; height:1em; margin-right:0.2em; transition:transform 0.3s; }
input[type="file"] { display:none; }
button.mini { font-size:0.85rem; }
button.white, input[type="file"] + label.white { background:white; color: var(--clr-grey); font-weight:unset; box-shadow:0px 1px 4px rgba(0,0,0,0.15); transform-style:preserve-3d; transition:transform 0.3s; }
button.white:after, input[type="file"] + label.white:after { display:none; }
button.white:hover, input[type="file"] + label.white:hover { transform:translateY(-3px); }
button.sz-regular, input[type="file"] + label.sz-regular { font-size:0.933334rem; }
button.inline { background: transparent; color:var(--clr-lighter); font-weight:var(--weight-default); }
button.inline:hover { color:var(--clr-darker); filter:none }
button.inline:before { content:''; height:1px; width:0; position:absolute; display:block; bottom:5px; background:var(--clr-lighter); transition:width 0.3s; }
button.inline:hover:before { width:calc(100% - 2.4em - 5px); }
button.inline svg { font-size:1em; vertical-align:-3px; margin-left:5px; }
button.inline:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23999999" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); margin-left:5px; width:1em; height:1em; margin-right:0.2em; }
button.loading, input[type="file"] + label.loading { pointer-events:none; background:lightgrey }
button.loading:after, input[type="file"] + label.loading:after { content:''; display:initial; left:6px; border-radius:100%; border:1px solid rgba(255,255,255,0.3); border-bottom:1px solid white; animation:rotation 0.4s infinite linear; }
button.loading.white, input[type="file"] + label.loading.white { color:#c2c2c2; background-color:whitesmoke; }
button.loading.white:after, input[type="file"] + label.loading.white:after { border-color:#ffffff; border-bottom:1px solid #c2c2c2 }
button.loading.white svg, input[type="file"] + label.loading.white svg { display:none; }
button.disable { pointer-events:none; background-color:lightgrey; }
button.editing:hover { cursor:unset; background-color:var(--clr-accent); }
.card { padding:20px 25px; border-radius:6px; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
/* --- Checkbox --- */
:is(.or-checkbox,.or-radio) { --checkbox-size:18px; }
:is(.or-checkbox,.or-radio) input { display:none; }
:is(.or-checkbox,.or-radio) + label { color:grey; }
:is(.or-checkbox,.or-radio) input:checked + label:before { border: 1px solid var(--clr-accent); }
:is(.or-checkbox,.or-radio) label { all:unset; display:flex; width:fit-content; min-height:var(--checkbox-size); line-height:var(--checkbox-size); padding-left:calc(var(--checkbox-size) + 0.5em); font-size:0.95em; cursor:pointer; }
:is(.or-checkbox,.or-radio) label:before { all:unset; content:''; position:absolute; border:1px solid lightgrey; left:0; width:var(--checkbox-size); height:var(--checkbox-size); text-align:center; border-radius:3px; box-sizing:border-box; transition:border 0.2s; cursor:pointer; background:white; --checkbox-size:18px; transition:border 0.3s; }
:is(.or-checkbox,.or-radio):hover label:before { border:1px solid var(--clr-lighter); }
:is(.or-checkbox,.or-radio) input:checked + label:after { opacity:1; }
:is(.or-checkbox,.or-radio) input:disabled + label { cursor:not-allowed; }
:is(.or-checkbox,.or-radio) input:disabled + label:before { cursor:not-allowed; border:1px solid #B0BEC5; }
:is(.or-checkbox,.or-radio) input:checked:disabled + label:after { cursor:not-allowed; }
.or-checkbox label:after { all:unset; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='3' stroke='%23607d8b' fill='none' stroke-linecap='butt' stroke-linejoin='butt'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); position:absolute; width:calc(var(--checkbox-size) * 2 / 3); left:calc((var(--checkbox-size) * 1 / 3) / 2); top:1px; opacity:0; transition:opacity 0.3s; }
.or-radio label:before { border-radius:100%; }
.or-radio label:after { all:unset; content:''; background:grey; position:absolute; width:0.4em; aspect-ratio:1; border-radius:100%; left:calc(var(--checkbox-size) / 2 - 0.2em); top:calc(var(--checkbox-size) / 2 - 0.2em); opacity:0; transition:opacity 0.3s; }
/* --- Tooltip --- */
[tooltip]:before, [tooltip-right]:before, [tooltip-hidden]:before { content:''; display:block; position:absolute; left:calc(var(--tooltip-left,0px) + 12px); top:calc(100% - 3px + var(--tooltip-top, 0px)); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:3px solid rgba(0,0,0,0.75); z-index:1; }
[tooltip]:after, [tooltip-right]:after, [tooltip-hidden]:after { content:attr(tooltip); font-family:var(--ft-default); width:var(--tooltip-width,max-content); top:calc(100% + var(--tooltip-top, 0px)); left:calc(var(--tooltip-left,0px)); line-height:1.3; white-space:normal; text-transform:none; padding:6px 10px; border-radius:4px; position:absolute; font-size:13px; font-weight:var(--weight-default); letter-spacing:initial; color:white; background:rgba(0,0,0,0.75); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; z-index:1; }
[tooltip]:hover:after, [tooltip-right]:hover:after, [tooltip-hidden].show:after { opacity:1; transform:translateY(10px); }
[tooltip]:hover:before, [tooltip-right]:hover:before, [tooltip-hidden].show:before { opacity:1; transform:translateY(10px); }
[tooltip-right]:before { right:12px; left:unset; }
[tooltip-right]:after { content:attr(tooltip-right); right:0; left:unset; }
[tooltip-hidden]:after { content:attr(tooltip-hidden); }
/* --- Intro --- */
#intro { font-size:1.6em; line-height:1.45; margin-inline:auto; margin-bottom:0; width:fit-content; max-width:min(650px,80%); color:var(--clr-greysat); }
#intro:before { content:'\201F'; font-family:'times','times new roman',sans-serif; position:absolute; font-size:3em; top:-0.3em; left:-.8em; color:var(--clr-lighter) }
#intro:after { content:unset; }
/* --- Timeline --- */
.timeline-event { display:grid; grid-template: 1fr / 0.3fr auto 2fr; padding-bottom:30px; }
.timeline-event:not(:last-of-type) .timeline-line:after { content:''; position:absolute; width:1px; height:calc(100% - 10px); left:50%; background-color:var(--clr-accent); display:block; z-index:-1; }
.timeline-icon { width:30px; height:auto; aspect-ratio:1; border:1px solid var(--clr-lighter); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:5px 30px; }
.timeline-icon svg { margin-right:unset; }
.timeline-date .year { font-size:1.5rem; color:var(--clr-accent); }
.timeline-date .date { color:color-mix(in srgb, var(--clr-textColor), transparent 30%); }
.timeline-card { color:var(--clr-grey); padding:20px 25px; border-radius:6px; background:white; filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
.timeline-card:before { content:''; position:absolute; top:10px; left:0px; margin:0 0 0 -8px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #fff; }
.timeline-title { color:var(--clr-accent); font-size:1.2rem; margin-bottom:10px; }
.timeline-title:only-child { margin-bottom:0px; }
.timeline-location { font-size:0.95rem; margin-top:5px; color:var(--clr-lightgrey); }
.timeline-location:before { content:''; display:inline-block; height:1em; width:1em; margin-right:0.3em; margin-bottom:-1px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1' stroke='%23999999' class='w-6 h-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 11-6 0 3 3 0 016 0z' /%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z' /%3e%3c/svg%3e "); }
/* --- Gallery --- */
.gallery-img { margin-bottom:20px; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gallery-img:after { content:''; width:80px; aspect-ratio:1; border-radius:100px; justify-self:center; background:var(--clr-accent); position:absolute; transform:translateY(20px) scale(0.9); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
.gallery-img:hover:after { transform:translateY(0) scale(1); opacity:0.6; }
.gallery-img:before { content:'+'; font-weight:100; color:white; font-size:35px; z-index:2; width:100%; display:flex; align-items:center; justify-content:center; position:absolute; transform:translateY(20px) scale(0.9); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
.gallery-img:hover:before { transform:translateY(0) scale(1); opacity:1; }
.gallery-folders { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:30px; }
.gallery-folders button { outline:1px solid transparent; transition:transform 0.3s, outline 0.3s, background-color 0.3s; }
.gallery-folders button.selected { outline:1px solid var(--clr-lighter); background-color:var(--clr-transp-10); }
#popup:not(.img) #popup-image-next, #popup:not([data-next="true"]) #popup-image-next { display:none; }
#popup-image-next { position:absolute; inset:0; display:grid; grid-template:auto / 1fr 1fr; }
#popup-image-next div { display:grid; align-items:center; padding:20px; cursor:pointer; }
#popup-image-next svg { stroke:white; font-size:2em; margin:0; z-index:1; transition:stroke 0.3s, scale 0.3s; }
#popup-image-next div:last-of-type, #popup-image-next div:last-of-type:before { justify-content:right; right:0; }
#popup-image-next div:hover svg { stroke:var(--clr-accent); }
#popup-image-next div:before { content:''; position:absolute; width:2em; height:2em; display:block; background-color:transparent; padding:20px; margin:16px; border-radius:4px; transition:background-color 0.5s; }
#popup-image-next div:hover:before { background-color:white; }
/* --- Slideshow --- */
section[data-module="gallery"]:not(:has(.gallery-img:nth-of-type(2))) button[data-action="slideshow"] { display:none; }
#slideshow { position:fixed; inset:0; background-color:transparent; z-index:3; pointer-events:none; transition:background-color 0.3s; }
#slideshow.show { background-color:rgba(0 0 0 / 90%); pointer-events:unset; }
#slideshow:not(.show) .slideshow-close, #slideshow:not(.show) img { display:none; }
#slideshow img { width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 0.2s; }
#slideshow img.show { opacity:1; }
.slideshow-close { position:absolute; width:2em; aspect-ratio:1; font-size:1.2em; right:0; margin:1em; background-color:white; display:flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; z-index:2; }
.slideshow-close svg { margin:0; stroke:grey; transition:stroke 0.3s; }
.slideshow-close:hover svg { stroke:var(--clr-accent); }
/* --- Videos --- */
.video-gallery { display:grid; grid-auto-flow:column; gap:30px; padding-bottom:15px; width:100%; overflow-x:auto; }
.videos-img { max-width:calc(100vw - 120px); width:900px; aspect-ratio:16 / 9; }
.videos-img img { object-fit:cover; width:100%; height:100%; }
.gallery-arrow { position:absolute; width:50px; aspect-ratio:1; top:50%; transform:translateY(-50%); background:white; z-index:2; display:flex; justify-content:center; align-items:center; border-radius:100px; filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); transition:color 0.2s, transform 0.3s, opacity 0.3s; }
.gallery-arrow svg { margin-right:unset; font-size:1.5em; }
.gallery-arrow:hover svg { stroke:var(--clr-darker); }
.gallery-arrow:hover { transform:translateY(calc(-50% - 5px)); cursor:pointer; }
.gallery-arrow.disabled { pointer-events:none; stroke:lightgray; opacity: 0.9; transform:translateY(-50%) scale(0); }
.video-gallery:has(.videos-img:only-child) { overflow:hidden; }
.video-gallery:has(.videos-img:only-child) .videos-img { width:100%; max-width:100%; }
.video-gallery:has(.videos-img:only-child) ~ .gallery-arrow { display:none; }
/* --- Share --- */
#share { color:var(--clr-grey); position:fixed; display:flex; align-items:center; font-size:1rem; bottom:40px; right:50px; border-radius:4px; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); padding:0.5em 1.5em; border:1px solid var(--clr-accent); background:white; z-index:3; }
.share-initial { display:flex; align-items:center; cursor:pointer; color:var(--clr-grey); transition:color 0.3s; }
.share-initial:hover { color:var(--clr-accent); }
.share-more-container { display:grid; grid-template-columns:0fr; overflow:hidden; transition:grid-template-columns 0.5s, margin-left 0.3s; }
.share-more-container.show { grid-template-columns:1fr; margin-left:20px; }
.share-more { min-width:0; display:grid; grid-auto-flow:column; gap:20px; }
.share-sns { display:flex; align-items:center; padding:0.1em .5em; cursor:pointer; transition:color 0.3s, transform 0.3s; white-space: nowrap; }
.share-sns:hover { color:var(--clr-accent); transform:translateX(5px); }
.share-sns svg { fill:var(--clr-accent); stroke:none; font-size:1.2em; transform:translateY(-2px) }
.share-sns:nth-of-type(1) svg { width:0.9em; }
.share-sns:nth-of-type(2) svg { width:0.9em; }
.share-sns:nth-of-type(3) svg { width:1.05em; height:1.05em; }
.share-sns:nth-of-type(4) svg { width:1.1em; height:1.1em; transform:translateY(-1px) }
.share-sns:nth-of-type(5) svg { width:1.15em; height:1.15em; transform:translateY(-1px) }
#contribute { position:fixed; bottom:40px; left: 50px; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); }
/* --- CTA --- */
#cta { position:fixed; bottom:40px; left:50px; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); display:none; z-index:3; }
#cta:is(.wall, .service, .donate) { display:flex }
#cta svg { display:none; stroke:white; top:-1px }
#cta:after { display:none; }
#cta.wall svg[data-cta="wall"], #cta.service svg[data-cta="service"], #cta.donate svg[data-cta="donate"] { display:unset; }
/* --- Memory wall --- */
.memory-card { color:var(--clr-grey); padding:20px 25px; margin-top:40px; border-radius:6px; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
.memory-date { color:var(--clr-lightgrey); font-style:italic; margin-bottom:20px; }
.memory-author {font-family:var(--ft-accent); color:var(--clr-accent); font-size:1.3em; margin:20px 50px 0 0; text-align:right; }
.memory-media { display:flex; flex-wrap:wrap; gap:15px; margin-top:20px; }
.memory-media .gallery-img { min-width:10%; max-width:16%; height:100px; margin-bottom:0; }
.memory-media .gallery-img:after { width:50px; aspect-ratio:1; }
.memory-media .gallery-img:before { font-size:25px; }
.memory-media .gallery-img img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.memory-search { float:right; }
.memory-search.loading:before { content:''; position:absolute; width:20px; aspect-ratio:1; background:white; box-sizing:border-box; top:calc(50% - 10px); right:20px; z-index:1 }
.memory-search.loading:after { content:''; position:absolute; width:15px; aspect-ratio:1; border-radius:50%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); box-sizing:border-box; animation:rotation 0.3s infinite linear; top:calc(50% - 7.5px); right:20px; z-index:2 }
.memory-edit { position:absolute; top:18px; right:20px; }
[data-module="wall"]:not(:has(.memory-card + .memory-card + .memory-card)) .memory-search [data-scope="page"] { display:none; }
[data-module="wall"]:has([data-pagination]) .memory-search [data-scope="page"] { display:none; }
[data-module="wall"]:not(:has([data-pagination])) .memory-search [data-scope="search"] { display:none; }
.pagination { display:grid; grid-auto-flow:column; width:fit-content; gap:10px; margin:50px auto 0; border-radius:4px; padding:.5em; background-color:rgba(0,0,0,2%); }
.pagination a { width:2em; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:100px; cursor:pointer; transition:color 0.3s, background 0.3s }
.pagination a[data-active] { border-radius:100px; background:var(--clr-accent); color:white; }
.pagination a:hover { background:var(--clr-darker); color:white; }
.pagination:has(a:nth-of-type(2)[data-active]) a:first-of-type,
.pagination:has(a:nth-last-of-type(2)[data-active]) a:last-of-type { opacity:0.3; pointer-events:none; }
.pagination.loading:after { content:''; position:absolute; width:15px; aspect-ratio:1; border-radius:50%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); box-sizing:border-box; animation:rotation 0.3s infinite linear; top:calc(50% - 7.5px); right:-30px }
/* --- Favorites --- */
.favorites { display:grid; grid-gap:50px 30px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.fav-title { color:var(--clr-accent); margin-bottom:10px; }
.fav-title svg { font-size:1.175em; vertical-align:-4px; margin-right:0.8em; }
.fav-desc a.linktext { max-width:100%; }
/* --- Donation --- */
.donation { display:grid; grid-auto-flow:column; gap:40px; }
.donation-desc { max-width:min(calc(var(--pg-width) - 2 * 25px), calc(100vw - 2 * 25px)); }
.donation-block { background-color:white; border: 1px solid var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); padding:20px 30px; border-radius:4px; }
.donation-amount { font-family:var(--ft-accent); color:var(--clr-accent); font-size:2rem; transition:color 0.3s; }
.donate-container .memory-card {display:grid;grid-auto-flow:column;gap: 40px;}
.donation-input input { font-size:25px; width:calc(200px - 30px); padding-left:50px !important; font-family:var(--ft-accent); color:var(--clr-accent);}
.donation-input { display:grid; align-items:center; align-self:start }
.donation-input:after { content:attr(data-symbol); position:absolute; left:20px; margin-top:1.1em; color:var(--clr-lightgrey); font-family:var(--ft-accent); font-size:1.2em }
.donation-right { height:auto; display:flex; flex-direction:column; justify-content:space-between; margin-block:1.2em 1.6em;}
.donation-secure { background:whitesmoke; padding:1.2em 2em; border-radius:4px; height:fit-content; }
.donation-sender { display:grid; width: 400px; }
.donation-sender label[for="donation-msg"] { margin-top:20px; }
.donation-sender textarea { height:150px; }
.donation-disclaimer { margin-top:5px; color:var(--clr-lightgrey); font-size:0.95em }
.donation-footer { display:flex; gap:15px; }
.donation-error { display:inline-block; color:var(--clr-error); font-size:0.9em; line-height:1; }
.don_warning { margin-top:40px; display:grid; text-align:left; grid-auto-flow:column; grid-gap:20px; border:1px solid var(--clr-lighter); border-radius:3px; padding:20px 25px;}
.don_warning a { background:color-mix(in srgb, var(--clr-error), transparent 70%); border:1px solid var(--clr-error); padding:2px 5px; border-radius:3px; color:var(--clr-error); font-weight:bold; font-size:11px; letter-spacing:1px; }
/* --- Event --- */
.event { display:grid; grid-template-columns:400px auto; grid-gap:40px; min-height:500px; }
#map { height:100%; border-radius:6px; }
#map button { white-space:initial; display:flex !important; margin-right:10px !important; }
#map button:after { content:unset; }
#map .gm-style-mtc { display:flex; align-items:center; }
.event-card { color:var(--clr-grey); display:grid; align-content:start; grid-gap:15px; grid-template-columns:1fr 2.5fr; padding-inline:35px; }
.event-card .desc { grid-column:1 / -1; margin-block:20px; }
.event-card .desc a.linktext { max-width:100%; }
.event-label svg { position:absolute; top:2px; left:0; }
.event-label { padding-left:25px; color:var(--clr-accent); }
.event-content button.inline { padding:0; font-size:1rem; }
.event-content button.inline:before { bottom:0; }
.event-content button.inline:hover:before { width:100%; }
.event.hidemap .event-map { display:none; }
.event.hidemap { grid-template: auto / auto; min-height:unset; }
@media (min-width:600px) {
.event.hidemap .event-card { grid-template:auto / 1fr 0.35fr 0.6fr; grid-auto-rows:minmax(1px, auto) auto 1fr; grid-gap:15px 20px; padding-block:30px; }
.event.hidemap .event-card .desc { grid-column:1 / 2; grid-row:1 / 5; margin-block:unset; height:fit-content; }
.event.hidemap .event-label { margin-left:30px; }
.event.hidemap:not(:has(.event-label)) .event-card { grid-template:unset; }
}
/* --- RSVP --- */
.event-rsvp { display:grid; gap:20px; grid-column: -3 / -1; }
.rsvp-already.hide { display:none; }
.rsvp-already:not(.hide) ~ * { display:none; }
.rsvp-guestlist { display:grid; gap:20px; }
.rsvp-guest { display:grid; grid-auto-flow:column; gap:10px; margin-top:20px; }
.rsvp-guest input { width:100%; }
.rsvp-guest .select-container select { padding-left:2.25em; }
.rsvp-guest .select-container:before { content: ''; width:.8em; aspect-ratio:1; border-radius:50%; margin-left:.8em; border:1px solid rgba(0,0,0,10%); position:absolute; pointer-events:none; z-index:1; }
.rsvp-guest .select-container:has(option[value="0"]:checked):before { background:var(--clr-error); }
.rsvp-guest .select-container:has(option[value="1"]:checked):before { background:var(--clr-success); }
.rsvp-guest .img-delete { position:relative; top:unset; height:100%; width:unset; filter:unset; aspect-ratio:unset; background:unset; }
.rsvp-guest:first-of-type .img-delete { visibility:hidden; }
.rsvp-msg { font-size:0.9em; line-height:1.1; color:var(--clr-error); margin-left:20px }
.rsvp-contact { display:grid; grid-auto-flow:column; margin-top:20px; gap:10px; padding-right:2em; }
.rsvp-contact input { width:100%; }
/* --- Notifications --- */
#notifications { font-size:14px; padding:0.75em 1.75em; top:15px; left:0; right:0; position:fixed; margin:auto; z-index:101; width:fit-content; border-radius:4px; display:flex; align-items:center; gap:10px; color:white; transition:color 0.3s, background-color 0.3s, transform 0.3s, opacity 0.3s; }
#notifications:before { width:1em; margin-top:1px; order:-2; }
#notifications:after { font-weight:bold; order:-1 }
#notifications.loading:not(.hide) { transition:color 0s, background-color 0s, transform 0.3s, opacity 0.3s; }
#notifications.success { background-color:rgba(139, 195, 74, 0.75); }
#notifications.success:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='white' fill='none' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); }
#notifications.success:after { content:'SAVED'; }
#notifications.error { background-color:rgba(255, 87, 34, 0.75); }
#notifications.error:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='white' fill='none' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E"); }
#notifications.error:after { content:'ERROR'; }
#notifications.loading { background-color:rgba(255, 255, 255, 0.8); color:#607D8B }
#notifications.loading:before { content:''; width:1em; height:1em; display:inline-block; border:1px solid rgb(29,163,201,0.3); border-bottom:1px solid var(--clr-accent); vertical-align:-2px; border-radius:100%; box-sizing:border-box; animation:rotation 0.3s infinite linear; margin-right:12px; }
#notifications.loading:after { content:'LOADING'; }
#notifications.hide { opacity:0; transform:translateY(-15px); pointer-events:none; }
/* --- Music --- */
#music { position:fixed; left:50px; bottom:40px; background:rgba(255,255,255,0.5); border:1px solid var(--clr-accent); height:50px; aspect-ratio:1; border-radius:50px; cursor:pointer; display:flex; justify-content:center; align-items:center; font-size:18px; color:var(--accent); z-index:100; backdrop-filter:blur(2px); background-color:rgba(255,255,255,0.75); box-shadow:0 0 0 5px var(--clr-transp-10); animation:pulse 2s infinite ease; }
#music:not(.play):after { width:1.2em; height:1.2em; content:url('data:image/svg+xml,'); position:absolute; }
#music.play:before { width:1.1em; height:1.1em; content:url('data:image/svg+xml,'); position:absolute; }
body:has(#cta:is(.wall, .service, .donate)) #music { position:absolute; top:20px; left:20px; }
/* --- Footer logo --- */
.footerlogo { display:flex; align-items:center; width:fit-content; margin:auto; gap:8px; order:10; color:rgba(0 0 0 / 50%); letter-spacing:2px; font-size:12px; padding-block:50px; opacity:0.5; transition:opacity 0.3s; }
.footerlogo:hover { opacity:1; }
.footerlogo img { width:85px; filter:grayscale(1); transition:filter 0.3s }
.footerlogo img:hover { filter:grayscale(0); }
/* --- Family tree --- */
#family-tree { --familytree-gap-v:50px; --familytree-gap-h:35px; display:grid; grid-auto-flow:column; gap:var(--familytree-gap-v) 0; grid-auto-columns:minmax(0,1fr); }
.family-unit, .family-group { color:var(--clr-grey); padding:0.8em 1em; border:1px solid #e5e5e5; border-radius:5px; justify-self:center; width:100%; background:white; display:grid; grid-template-columns:100%; gap:15px; justify-items:center; text-align:center; }
.family-unit img { width:100px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:4px solid white; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }
.tree-name { max-width:100%; word-wrap:break-word; }
#family-tree .me { border:1px solid var(--clr-accent); color:var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); }
#family-tree .grand { grid-row: 1 / 2; }
#family-tree .parent { grid-row: 2 / 3; }
#family-tree :is(.sibling,.spouse,.me) { grid-row: 3 / 4; }
#family-tree .child { grid-row: 4 / 5; }
#a { grid-column-start:1 }
#b { grid-column-start:3 }
#c { grid-column-start:5 }
#d { grid-column-start:7 }
#e { grid-column-start:2 }
#f { grid-column-start:6 }
#g { grid-column-start:4 }
#h { grid-column-start:6 }
#i { grid-column-start:3; transform:translateX(calc(var(--familytree-gap-h) * -1)); }
#j { grid-column-start:2; transform:translateX(calc(var(--familytree-gap-h) * -2)); }
#m { grid-column-start:5; }
#n { grid-column-start:4; transform:translateX(calc(var(--familytree-gap-h) * -1)); }
#o { grid-column-start:6; transform:translateX(var(--familytree-gap-h)); }
#p { grid-column-start:3; transform: translateX(calc(var(--familytree-gap-h) * -2)); }
#q { grid-column-start:1; transform: translateX(calc(var(--familytree-gap-h) * 1)); }
#family-tree:has(#a.empty ~ #b.empty ~ #c.empty ~ #d.empty) :is(#a,#b,#c,#d) { display:none; }
#family-tree:has(#a.empty ~ #b.empty ~ #c.empty ~ #d.empty) { --familytree-gap-h: 42.5px; }
#family-tree:has(#e.empty ~ #f.empty) :is(#e,#f) { display:none; }
#family-tree:has(#i.empty) :is(#i,#j) { display:none; }
#r, #s, #t, #v, #w, #x, #y, #z, #k, #l, #u { display:none !important; }
#family-tree .link { height:100%; width:100%; z-index:-1 }
#family-tree .link:before { content:''; top:50%; height:1px; width:100%; display:block; background-color:#e5e5e5; }
#family-tree .link:after { content:''; top:50%; left:50%; width:1px; height:100%; display:block; background-color:#e5e5e5; }
#family-tree .l1 { grid-column-start:2 }
#family-tree .l2 { grid-column-start:6 }
#family-tree .l3 { grid-column:3 / span 3; }
#family-tree .l4 { grid-column:5; }
#family-tree .l6 { grid-column:3; transform:translate(var(--familytree-gap-h),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l6:after { left:0 }
#family-tree .l7 { grid-column:2; transform:translate(0px,calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l7:after { left:0 }
#family-tree .l8 { grid-column:4; transform:translate(var(--familytree-gap-h),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l8:after { left:0 }
#family-tree .l9 { grid-column:6; transform:translate(calc(-50% + (var(--familytree-gap-h) * 0.5)),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width: calc(100% + var(--familytree-gap-h)); }
#family-tree .l9:after { left:100% }
#family-tree .l10 { grid-column:3; transform: translate(0,calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l10:after { left:0 }
#family-tree .l11 { grid-column:1; transform: translate(calc(50% + (var(--familytree-gap-h) * .5)),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l11:after { left:0 }
#i.empty ~ .l6 { display:none; }
#j.empty ~ .l7 { display:none; }
.family-group .family-unit { border:none; width:max-content; gap:15px; display:grid; font-size:0.95em; min-width:120px; align-content:start; }
.family-group .family-unit img { width:75px; }
.family-group .tree-name { max-width:120px; }
.family-group .arrow { position:absolute; z-index:1; width:2em; aspect-ratio:1; border:1px solid #e5e5e5; background:white;border-radius:50%; display:flex; align-items:center; justify-content:center; top:calc(50% - 1em); left:-1em; cursor:pointer; transition:transform 0.3s, color 0.3s, border 0.3s; }
.family-group .arrow.right { left:unset; right:-1em; }
.family-group .arrow:hover { color:var(--clr-accent); border:1px solid var(--clr-lighter); }
.family-group .arrow.hide { transform:scale(0); }
.siblings-container { width:100%; overflow-x:auto; }
.siblings-scroller { display:flex; justify-content:space-around; min-width:fit-content; margin:auto; }
#siblings { grid-column-start:2; width:255%; }
#r.empty ~ #siblings { display:none; }
#r:not(.empty) ~ .l7 { display:none; }
#m.empty ~ #n, #m.empty ~ .l4:after, #n.empty ~ :is(.l8,#o,#p,#q), #o.empty ~ :is(.l9,#p,#q), #p.empty ~ :is(.l10,#q), #q.empty ~ .l11 { display:none; }
#children { grid-column-start:1; grid-column-end:8; }
#x.empty ~ #children { display:none; }
#x:not(.empty) ~ :is(.l8,.l9,.l10,.l11) { display:none; }
#spouses { grid-column-start:6; grid-column-end:8; z-index:2; }
#k.empty ~ #spouses { display:none; }
/* Index */
.family-unit.empty { visibility:hidden; }
#a.empty + #b.empty ~ .l1, #c.empty + #d.empty ~ .l2, #e.empty + #f.empty ~ .l3, #m.empty + #n.empty + #o.empty ~ .l4:after, #h.empty ~ #m.empty + #n.empty + #o.empty ~ .l4 { display:none; }
#a:not(.empty) + #b.empty ~ .l1:before, #c:not(.empty) + #d.empty ~ .l1:before, #e:not(.empty) + #f.empty ~ .l3:before, #h.empty ~ .l4:before { background:linear-gradient(45deg, #e5e5e5 50%, transparent 50%); }
#a.empty + #b:not(.empty) ~ .l1:before, #c.empty + #d:not(.empty) ~ .l1:before, #e.empty + #f:not(.empty) ~ .l3:before { background:linear-gradient(45deg, transparent 50.5%, #e5e5e5 50.5%); }
.grand.empty ~ .grand.empty ~ .grand.empty ~ .grand.empty ~ #e { grid-column-start:3; }
.grand.empty ~ .grand.empty ~ .grand.empty ~ .grand.empty ~ #f { grid-column-start:5; }
.grand.empty ~ .grand.empty ~ .grand.empty ~ .grand.empty ~ #family-tree .l3 { grid-column:4 / span 1; }
/* --- Payment --- */
#payment { position:fixed; height:100%; width:500px; transform:translateX(500px); right:0; top:0; z-index:1000; background:white; padding:50px 60px 30px 85px; box-sizing:border-box; filter:none; overscroll-behavior:contain; transition:transform 0.3s, filter 0.2s; }
#payment.active { transform:translateX(0); filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.5)); overflow-y:auto; }
#payment h2 { margin-block:0 }
#payment svg { margin-left:5px; width:22px; vertical-align:middle; stroke-width:1; }
.payment-content span { display:none !important; position:absolute; font-size:25px; color:#7b7b7b; left:-40px; top:-65px; background:rgb(255 255 255 / 0.8); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s, color 0.2s; }
.payment_ttl { font-size:0.95em; margin:100px 0 40px; display:grid; grid-auto-flow:column; grid-template-columns:1fr 1.3fr; grid-gap:25px; }
.pay_reass { background:#f8f8f8; padding:12px 16px; border-radius:4px; }
.pay_title { color:var(--clr-accent); font-size:1.1em; margin-bottom:10px; }
.pay_total { color:var(--clr-lightgrey); border-top:1px solid lightgrey; margin-top:6px; padding-top:3px; padding-right:20px; }
.pay_total donation_amount { font-weight:bold; }
.iframe_loader { width:100%; height:400px; position:absolute; background:white; opacity:0; transition:opacity 0.3s; display:grid; align-items:center; justify-items:center; pointer-events:none; z-index:2; }
.iframe_loader.loading { opacity:1; }
.iframe_loader.loading:after { content:''; width:50px; height:50px; border-radius:50%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); box-sizing:border-box; animation:rotation 0.3s infinite linear; }
.payment-form { display:grid; gap:35px; font-size:0.9em; }
.payment-form .stripe-input, .payment-form input { width:100%; height:40px; display:grid; align-items:center; padding-left:2.7em; }
.order-exp-cvv { display:grid; grid-auto-flow:column; grid-template:auto / 1fr 1fr; grid-gap:0 20px; }
#invoice { display:grid; grid-auto-flow: column; align-items:center; grid-template:1fr / auto 1fr; grid-gap:20px; margin-top:25px; font-size:0.85em }
#invoice .or-checkbox label:after { top:2px; }
#invoiceemail { width:100%; height:auto; padding-left:1em; }
.disable + #invoiceemail { background:#f7f7f7; color:#607D8B; border:1px solid #e0e0e0; pointer-events:none; }
#payment-btn { margin-top:30px; display:flex; justify-content:right; gap:20px; }
#payment-btn #currency { position:absolute; top:45px; right:0; font-size:0.8em; color:var(--clr-lightgrey); }
#card-errors { font-size:0.85em; line-height:1.1; color:var(--clr-error); width:100%; }
/* --- Not active --- */
.gallery-img.not-active:before, .gallery-img.not-active:after { display:none; }
.gallery-img.not-active { width:100%; display:block; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); padding:50px 25px; cursor:unset; }
.gallery-img.not-active.mobonly { margin-top:15px; padding:1.5em; }
.memory-card.not-active { display:flex; flex-flow:row; gap:20px; justify-content:space-between; }
.memory-media .not-active { color:var(--clr-lightgrey); font-size:.95em; font-style:italic; display:flex; align-items:center; }
/* --- Drag file --- */
#drop { display:flex; justify-content:center; align-items:center; width:100%; top:70px; height:150px; position:absolute; background-color:rgba(255 255 255 / 90%); z-index:2; border:1px dashed var(--clr-accent); border-radius:7px; box-shadow:0 0 0 0px var(--clr-transp-30); opacity:0; pointer-events:none; transition:opacity 0.3s, box-shadow 0.3s, color 0.3s; }
#drop.show { opacity:1; pointer-events:initial; }
#drop.active { box-shadow:0 0 0 5px var(--clr-transp-30); color:var(--clr-accent); }
#popup-bg { position:fixed; display:block; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); pointer-events:none; z-index:100; transition:background-color 0.3s; }
#popup.active ~ #popup-bg, #payment.active ~ #popup-bg { background-color:rgba(0,0,0,0.5); pointer-events:initial; }
/* --- Popup --- */
#popup, #popup_shadow { color:var(--clr-grey); position:fixed; left:0; top:0; right:0; bottom:0; margin:auto; display:flex; align-items:center; justify-content:center; z-index:101; transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.3s, opacity 0.3s; }
#popup.active { transform:translateY(0px); opacity:1; }
.popup-container, .popup-container_shadow { padding:10px; background:white; border-radius:5px; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); max-width:min(90%,1200px); max-height:90vh; box-sizing:content-box; }
#popup.active .popup-container, #payment.active .popup-container { pointer-events:initial; }
#popup-image, #popup-image_shadow { border-radius:3px; max-width:100%; max-height:calc(90vh - 50px); }
#popup-image { transition:width 0.5s; }
#popup-image-desc:empty { display:none; }
#popup-image-desc { padding-block:1em 0.5em; z-index:2; }
#popup-image-author:empty { display:none; }
#popup-image-author { position:absolute; top:30px; left:30px; display:flex; justify-content:center; align-items:center; border-radius:4px; margin-left:2.5em; padding-inline:1em; height:2em; font-size:0.95em; background-color:white; z-index:2; transform:translateX(-10px); color:transparent; background-color:transparent; transition:color 0.3s, background-color 0.3s, transform 0.3s; }
#popup-image-author:hover { transform:translateX(0px);color:var(--clr-grey); background-color:white; }
#popup-image-author:after { content:url('data:image/svg+xml,'); transform:translateX(10px); position:absolute; width:2em; height:2em; top:0; left:-2.5em; padding:.5em; border-radius:4px; background-color:rgba(0 0 0 / 15%); transition:background-color 0.3s, transform 0.3s; }
#popup-image-author:hover:after { background-color:rgba(0 0 0 / 50%); transform:translateX(0px); }
.popup-close { position:absolute; font-size:20px; color:#7b7b7b; right:25px; top:25px; background:rgb(255 255 255); filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); width:30px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50px; cursor:pointer; z-index:1; transition:transform 0.2s, color 0.2s; }
.popup-close svg { margin-right:0; stroke:currentColor; transition:stroke 0.3s; }
.popup-close:hover { color:var(--clr-accent); }
.popup-footer { position:fixed; bottom:25px; right:30px; text-align:right; }
#popup-content:has(.popup-footer) { padding-bottom:60px; }
.popup-footer-absolute { position:absolute; right:0; bottom:0; display:flex; }
.popup-footer-relative { justify-content:right; display:flex; padding-bottom:25px; }
#popup.loading:after { height:60px; width:60px; content:''; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); border-radius:100%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); animation:rotation 0.4s infinite linear; }
#popup.loading #popup-content { opacity:0; }
#popup #popup-content { opacity:1; height:100%; transition:opacity 0.4s; }
#popup .title { font-size:1.7em; color:var(--clr-darker); font-family:var(--ft-accent); }
#popup .title:after { content:''; display:block; border-bottom:1px solid #d4d4d4; width:100%; padding:5px; border-color:#ebebeb; margin-bottom:50px; }
#popup .title svg { font-size:0.8em; margin-right:0.3em; transform:translateY(0.1em); stroke:var(--clr-lighter); }
#popup .description { margin-bottom:40px; }
#popup { width:600px; height:530px; max-width: min(calc(100% - 2 * var(--pg-gutter)),calc(var(--pg-width) - 2 * var(--pg-gutter))); max-height:80vh; }
#popup:not(.img) .popup-container { width:100%; height:100%; overflow-y:auto; padding:25px 30px; }
#popup.img { width:unset; height:unset; }
#popup.popup-share { width:650px; height:400px; }
#popup.popup-contribute { height:590px; }
#popup.popup-contribute:has(.wall-img) { height:685px; }
#popup.popup-trialerror { height:260px; }
/* --- ***** --- */
/* --- Edit --- */
:is(.img-rotate,.img-delete,.img-labels,.img-options) { background:white; position:absolute; padding:0.2em; width:2em; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:4px; top:10px; color:var(--clr-lightgrey); cursor:pointer; filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.15)); z-index:2; transition:color 0.3s }
:is(.img-rotate,.img-delete,.img-labels,.img-options):hover { color:var(--clr-accent); }
:is(.img-rotate,.img-delete,.img-labels,.img-options) svg { margin:unset; stroke:currentColor; }
.img-rotate { left:10px; }
:is(.img-delete,.img-rotate).loading { pointer-events:none; }
:is(.img-delete,.img-rotate).loading svg { display:none; }
:is(.img-delete,.img-rotate).loading:before { all: unset; content:''; height:1em; width:1em; position:absolute; border-radius:100%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); animation: rotation 0.4s infinite linear; }
/*-- Desktop --*/
@media (min-width:600px) {
.mobonly { display:none !important; }
menu:is([data-showhideItems="1"],[data-showhideItems="2"],[data-showhideItems="3"]) ul { width:fit-content; gap:50px; margin-inline:auto; }
menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) ul { gap:10px; padding-inline:2em; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); background:white; border-radius:3px; }
menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) ul li { padding-inline:0; box-shadow:none; background:unset; }
menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) .menu-title { max-width:100px; }
menu:is([data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) li { font-size:17px; }
menu:is([data-showhideItems="9"],[data-showhideItems="10"]) svg { display:none; }
.event.hidemap .event-rsvp { margin-left:30px; }
.event.hidemap .rsvp-guest svg { display:none }
.event.hidemap input[data-label="first"] { padding: 0.5em 1em; }
.event.hidemap select { padding-left:2em; padding-right:2.2em; }
}
/*-- Tablets --*/
@media (min-width:600px) and (max-width:1100px) {
main { max-width:100%; }
#name { font-size:45px; }
#dates, #location { font-size:1em; }
#photo { width:230px; }
header { gap:60px; }
menu ul { overflow-x:auto; padding-inline:25px; padding-bottom:25px; gap:15px; }
menu li { padding:0.7em 1em; font-size:17px; white-space:nowrap; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }
.donate-container .memory-card { gap:25px; }
.donation-right { max-width:30vw; }
.donation-sender { max-width:40vw; }
}
@media (min-width:600px) and (max-width:870px) {
.donation-secure { display:none; }
}
/*-- Mobile --*/
@media (max-width: 600px) {
:root, html, body { font-size:18px }
.mobhide { display:none !important; }
#background { height:200px; }
main { width:100vw; }
main p { font-size:1rem; }
header { grid-gap:35px; padding-inline:25px; }
#photo { grid-column:1 / -1; grid-row:1 / 2; width:50%; height:fit-content; justify-self:center; }
#info-text { grid-column:1 / -1; grid-row:2 / 3; height:fit-content; }
#name { font-size:35px; text-align:center; transition:font-size 0.3s,height 0.3s,opacity 0.3s; }
#dates, #location { font-size:1em; }
menu { margin-top:30px; overflow:hidden; }
menu ul { overflow-x:scroll; padding-inline:25px; padding-bottom:25px; gap:15px; }
menu li { padding:0.7em 1em; font-size:17px; white-space:nowrap; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }
.footerlogo { margin-inline:25px auto; }
#intro { font-size:1.4em; margin-top:-40px; margin-bottom:-30px; }
#intro:before { left:-0.6em; }
.timeline-card { padding:15px 20px; font-size:0.95em; }
.timeline-icon { margin-inline:15px; }
.timeline-date .date { font-size:15px; }
.timeline-event { grid-template:1fr / 65px auto 2fr; }
.memory-media .gallery-img { min-width:30%; max-width:45%; height:85px; }
.memory-author { margin:15px 0; word-break:break-word; }
.memory-search { float:unset; margin-block:50px -20px; }
.memory-search input { width:100%; }
.gallery-img { margin-bottom:15px; }
.gallery-img:after { width:40px; }
.gallery-img:before { font-size:25px; }
#popup-image-next svg { font-size:1.5em; }
#popup-image-next div:before { margin:14px }
#popup-image-author { top:25px; left:25px; font-size:.85em; }
.video-gallery { gap:10px; padding-bottom:10px; scroll-snap-type:x mandatory; }
.videos-img { max-width:calc(100vw - 90px); scroll-snap-align:start; scroll-margin-left:20px; }
.gallery-arrow { display:none; }
.timeline-desc .linktext, .memory-desc .linktext { white-space:initial !important; }
.pagination { font-size:.9em; gap:8px; }
.pagination a:not(:first-of-type, :nth-of-type(2), :nth-last-of-type(2), :last-of-type, [data-active], [data-active] + a, :has(+ [data-active])) { display:none; }
.pagination:not(:has(a:nth-last-of-type(4)[data-active])) a:nth-last-of-type(3):not([data-active]) + a:nth-last-of-type(2):not([data-active]) { margin-left:2em; }
.pagination:not(:has(a:nth-last-of-type(4)[data-active])) a:nth-last-of-type(3):not([data-active]) + a:nth-last-of-type(2):not([data-active]):before { content:'...'; position:absolute; left:-1.5em; pointer-events:none; opacity:0.3; color:#525252; }
.pagination a:nth-of-type(2):not([data-active]):has(+ a:not([data-active])):not(:has(~ a:nth-of-type(4)[data-active])) { margin-right:2em; }
.pagination a:nth-of-type(2):not([data-active]):has(+ a:not([data-active])):not(:has(~ a:nth-of-type(4)[data-active])):before { content:'...'; position:absolute; right:-1.5em; pointer-events:none; opacity:0.3; color:#525252; }
.donation { grid-auto-flow:row; gap:25px; }
.donation-block { padding:15px 20px; display:flex; align-items:center; gap:20px; }
.donation-amount { font-size:30px; }
.donation-right { margin-block:0; }
.donation-secure { margin-bottom:20px; }
.donate-container .memory-card { grid-auto-flow:row; gap:20px; margin-top:25px; }
.donation-sender { width:unset; }
header.mini { pointer-events:none; }
header.mini:after { display:none; }
#name_small { font-size:25px; line-height:1; }
.event { grid-template:350px / auto; grid-gap:30px; }
.event-card { grid-template-columns:auto 1fr; padding-inline:25px; margin-top: 140px; }
.event-card .desc { margin-block:10px; }
.family-container { overflow-x:scroll; }
#family-tree { width:800px; font-size:0.8em; padding-bottom:25px; --familytree-gap:25px; }
.family-unit { gap:8px; }
#q { transform:translateX(calc(var(--familytree-gap-h) * 0.25)); }
#family-tree .l6 { transform: translate(calc(var(--familytree-gap-h) * 0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
#family-tree .l7 { transform: translate(calc(var(--familytree-gap-h) * -0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
#family-tree .l8 { transform: translate(calc(var(--familytree-gap-h) * 0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
#family-tree .l10 { transform: translate(calc(var(--familytree-gap-h) * -0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
#family-tree .l11 { transform:translate(calc(var(--familytree-gap-h) * 1.75), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
#share, #cta { font-size:1rem; }
#cta { left:var(--pg-gutter); }
#share { padding-inline:1.2em; right:var(--pg-gutter); }
.share-sns { font-size:0; }
.share-sns svg { font-size:20px; margin-right:0; }
body:has(#cta:is(.wall, .service, .donate)) main .footerlogo { padding-bottom:125px; }
#payment { width:100%; height:calc(100% - 50px); transform:translateY(100%); top:50px; border-radius:4px; padding:50px 20px 10px 40px; }
.payment_ttl { margin:80px 0 20px; grid-template-columns:1fr 1.15fr; }
.donation { grid-template:1fr / 1fr }
.or-radio label { margin-left:0; }
.or-radio input ~ label:after { left:6px }
.donation input[type="number"] { width:150px }
.don_warning { grid-template:1fr auto / auto auto; padding:20px 20px 25px; }
.don_warning a { font-size:9px; letter-spacing:0px; }
.don_warning .minibutton { margin-left:0 !important; grid-area: 2 / 1 / 3 / 3; }
/*-- RSVP --*/
:is(.rsvp-guest,.rsvp-contact) { grid-auto-flow:row; padding-right:0; }
:is(.rsvp-guest,.rsvp-contact) label { position:relative; }
:is(.rsvp-guest,.rsvp-contact) label + svg { left:0; top:1.7em; }
.rsvp-guest .img-delete { margin-block:5px 10px; width:fit-content; height:fit-content; }
.rsvp-guest .img-delete:after { all:unset; content:'REMOVE GUEST'; font-size:0.8em; margin-left:0.75em; margin-top:3px }
.rsvp-guest .img-delete:before { all:unset; }
.rsvp-guest .select-container { margin-top:20px; }
.rsvp-guest select { width:100%; }
.popup-footer { position:relative; bottom:0; right:0; padding-block:25px; }
#popup .title { font-size:1.5rem; }
#popup .title:after { margin-bottom:1.5em; }
/*-- Not active --*/
.memory-card.not-active { flex-flow:column; padding:30px 25px; }
/*-- Popup sizes --*/
#popup.popup-contribute { height:700px; }
#popup.popup-trialerror { height:300px; }
}
/***** BROWSER-SPECIFIC SYTLES ******/
/************************************/
@media not all and (min-resolution:.001dpcm) { @media { /*-- Safari is the new IE --*/
.memory-media .gallery-img img { width:-webkit-fill-available; }
.popup-container { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
}}
@supports (-webkit-hyphens:none) { /*-- Safari 16+ is the new IE --*/
.memory-media .gallery-img img { width:-webkit-fill-available; }
.popup-container { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
padding: 20px;
}
.gallery-item {
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 1.0); /* Black background with opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
max-width: 80%;
max-height: 80%;
transition: opacity 0.5s ease-in-out; /* Smooth transition effect */
opacity: 1;
}
/* Caption of the image */
.caption {
margin: auto;
display: block;
width: 80%;
text-align: center;
color: white;
font-size: 16px;
padding: 10px 0;
}
/* Close button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
/* Fade-out effect */
.fade-out {
opacity: 0;
}
/* Fade-in effect */
.fade-in {
opacity: 1;
}
/* Optional: Keyframe animation for smoother transitions */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.3s;
user-select: none;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
border-radius: 50%;
}
/* Position the "prev" button to the left */
.prev {
left: 0;
}
/* Position the "next" button to the right */
.next {
right: 0;
}
/* On hover, add a background color */
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}