diff --git a/css/styles.css b/css/styles.css index d72b627..c55dd36 100644 --- a/css/styles.css +++ b/css/styles.css @@ -22,87 +22,6 @@ --header-h: 64px; } -/* ---------- Preloader ---------- */ -.preloader { - position: fixed; - inset: 0; - z-index: 9999; - background: var(--color-dark); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 24px; - transition: opacity 0.6s ease, visibility 0.6s ease; -} - -.preloader--done { - opacity: 0; - visibility: hidden; - pointer-events: none; -} - -.preloader__sigil { - position: relative; - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - font-size: 2.5rem; - color: var(--color-gold); - z-index: 1; - animation: sigil-glow 1.8s ease-in-out infinite; - text-shadow: 0 0 20px rgba(200, 162, 74, 0.6), 0 0 40px rgba(200, 162, 74, 0.3); -} - -@keyframes sigil-glow { - 0%, 100% { - transform: scale(1); - text-shadow: 0 0 20px rgba(200, 162, 74, 0.5), 0 0 40px rgba(200, 162, 74, 0.2); - opacity: 0.85; - } - 50% { - transform: scale(1.08); - text-shadow: 0 0 30px rgba(200, 162, 74, 0.8), 0 0 60px rgba(200, 162, 74, 0.4); - opacity: 1; - } -} - -.preloader__ring { - position: absolute; - width: 120px; - height: 120px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: var(--color-gold); - border-bottom-color: var(--color-gold); - animation: ring-spin 1.2s linear infinite; - opacity: 0.6; -} - -@keyframes ring-spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.preloader__text { - font-family: var(--font-display); - color: var(--color-gold-light); - font-size: 1.2rem; - font-weight: 700; - letter-spacing: 0.15em; - text-transform: uppercase; - margin: 0; - opacity: 0; - animation: text-fade-in 0.8s ease 0.3s forwards; -} - -@keyframes text-fade-in { - 0% { opacity: 0; transform: translateY(10px); } - 100% { opacity: 0.8; transform: translateY(0); } -} - *, *::before, *::after { @@ -136,7 +55,12 @@ img { } /* ---------- Medieval theme base ---------- */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: var(--font-display); } @@ -165,10 +89,21 @@ h1, h2, h3, h4, h5, h6 { pointer-events: none; opacity: 0.4; border-radius: inherit; - background-image: - radial-gradient(ellipse at 20% 30%, rgba(138, 114, 104, 0.06) 0%, transparent 50%), - radial-gradient(ellipse at 80% 70%, rgba(138, 114, 104, 0.05) 0%, transparent 50%), - radial-gradient(ellipse at 50% 50%, rgba(200, 162, 74, 0.03) 0%, transparent 60%); + background-image: radial-gradient( + ellipse at 20% 30%, + rgba(138, 114, 104, 0.06) 0%, + transparent 50% + ), + radial-gradient( + ellipse at 80% 70%, + rgba(138, 114, 104, 0.05) 0%, + transparent 50% + ), + radial-gradient( + ellipse at 50% 50%, + rgba(200, 162, 74, 0.03) 0%, + transparent 60% + ); } /* Ornamental section divider */ @@ -189,7 +124,12 @@ h1, h2, h3, h4, h5, h6 { content: ""; flex: 1; height: 1px; - background: linear-gradient(90deg, transparent, var(--color-gold), transparent); + background: linear-gradient( + 90deg, + transparent, + var(--color-gold), + transparent + ); } /* ---------- Sound toggle ---------- */ @@ -199,9 +139,15 @@ h1, h2, h3, h4, h5, h6 { } @keyframes quest-pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.2); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } } /* ---------- Achievement toast ---------- */ @@ -221,7 +167,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--color-white); box-shadow: 0 8px 32px rgba(200, 162, 74, 0.3); opacity: 0; - transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), + opacity 0.4s ease; pointer-events: none; } @@ -276,9 +223,17 @@ h1, h2, h3, h4, h5, h6 { .achievement-toast--show { transform: translateY(0); } - .achievement-toast__name { font-size: 0.8rem; } - .achievement-toast__label { font-size: 0.6rem; } - .achievement-toast__icon { width: 32px; height: 32px; font-size: 0.9rem; } + .achievement-toast__name { + font-size: 0.8rem; + } + .achievement-toast__label { + font-size: 0.6rem; + } + .achievement-toast__icon { + width: 32px; + height: 32px; + font-size: 0.9rem; + } } /* ---------- Parchment notes ---------- */ @@ -316,10 +271,23 @@ h1, h2, h3, h4, h5, h6 { } @keyframes note-float { - 0% { top: 100%; opacity: 0; transform: rotate(-2deg) scale(0.8); } - 8% { opacity: 0.9; transform: rotate(-2deg) scale(1); } - 85% { opacity: 0.9; } - 100% { top: 5%; opacity: 0; transform: rotate(2deg) scale(0.8); } + 0% { + top: 100%; + opacity: 0; + transform: rotate(-2deg) scale(0.8); + } + 8% { + opacity: 0.9; + transform: rotate(-2deg) scale(1); + } + 85% { + opacity: 0.9; + } + 100% { + top: 5%; + opacity: 0; + transform: rotate(2deg) scale(0.8); + } } .parchment-note--pop { @@ -327,9 +295,15 @@ h1, h2, h3, h4, h5, h6 { } @keyframes note-pop { - 0% { transform: scale(1); } - 50% { transform: scale(1.2) rotate(-5deg); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2) rotate(-5deg); + } + 100% { + transform: scale(1); + } } /* ---------- Night theme ---------- */ @@ -387,14 +361,30 @@ h1, h2, h3, h4, h5, h6 { transform: scale(1); } -[data-reveal-delay="1"] { transition-delay: 0.1s; } -[data-reveal-delay="2"] { transition-delay: 0.2s; } -[data-reveal-delay="3"] { transition-delay: 0.3s; } -[data-reveal-delay="4"] { transition-delay: 0.4s; } -[data-reveal-delay="5"] { transition-delay: 0.5s; } -[data-reveal-delay="6"] { transition-delay: 0.6s; } -[data-reveal-delay="7"] { transition-delay: 0.7s; } -[data-reveal-delay="8"] { transition-delay: 0.8s; } +[data-reveal-delay="1"] { + transition-delay: 0.1s; +} +[data-reveal-delay="2"] { + transition-delay: 0.2s; +} +[data-reveal-delay="3"] { + transition-delay: 0.3s; +} +[data-reveal-delay="4"] { + transition-delay: 0.4s; +} +[data-reveal-delay="5"] { + transition-delay: 0.5s; +} +[data-reveal-delay="6"] { + transition-delay: 0.6s; +} +[data-reveal-delay="7"] { + transition-delay: 0.7s; +} +[data-reveal-delay="8"] { + transition-delay: 0.8s; +} @media (prefers-reduced-motion: reduce) { [data-reveal] { @@ -698,14 +688,30 @@ h1, h2, h3, h4, h5, h6 { } /* ---------- Backgrounds ---------- */ -.bg--teal { background: var(--accent); } -.bg--fireworks { background: #c4707c; } -.bg--sapphire { background: #3a8a9e; } -.bg--gold { background: #c89858; } -.bg--silver { background: #8a7268; } -.bg--bronze { background: #a87544; } -.bg--light { background: var(--bg-light); } -.bg--green { background: var(--accent-dark); } +.bg--teal { + background: var(--accent); +} +.bg--fireworks { + background: #c4707c; +} +.bg--sapphire { + background: #3a8a9e; +} +.bg--gold { + background: #c89858; +} +.bg--silver { + background: #8a7268; +} +.bg--bronze { + background: #a87544; +} +.bg--light { + background: var(--bg-light); +} +.bg--green { + background: var(--accent-dark); +} /* ---------- Hero ---------- */ .hero { @@ -716,7 +722,8 @@ h1, h2, h3, h4, h5, h6 { align-items: center; justify-content: center; overflow: hidden; - background: url("https://lasthourcloud.b-cdn.net/assets/BACKGROUND.webp") center no-repeat; + background: url("https://lasthourcloud.b-cdn.net/assets/BACKGROUND.webp") + center no-repeat; background-size: cover; background-position: center; } @@ -727,38 +734,9 @@ h1, h2, h3, h4, h5, h6 { left: 0; width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; z-index: 0; - transform: scale(1.1); - filter: blur(30px) brightness(0.3) contrast(0.8) saturate(0.5); - opacity: 0; - animation: hero-mist-reveal 3.5s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards; -} - -@keyframes hero-mist-reveal { - 0% { - opacity: 0; - transform: scale(1.1) translateY(20px); - filter: blur(30px) brightness(0.2) contrast(0.7) saturate(0.3); - } - 30% { - opacity: 0.4; - filter: blur(18px) brightness(0.4) contrast(0.8) saturate(0.4); - } - 60% { - opacity: 0.7; - transform: scale(1.04) translateY(6px); - filter: blur(8px) brightness(0.6) contrast(0.9) saturate(0.6); - } - 85% { - opacity: 0.9; - filter: blur(2px) brightness(0.85) contrast(0.98) saturate(0.85); - } - 100% { - opacity: 1; - transform: scale(1) translateY(0); - filter: blur(0) brightness(1) contrast(1) saturate(1); - } + opacity: 100; } .hero__overlay { @@ -907,8 +885,13 @@ h1, h2, h3, h4, h5, h6 { } @keyframes bounce { - 0%, 100% { transform: translateX(-50%) translateY(0); } - 50% { transform: translateX(-50%) translateY(8px); } + 0%, + 100% { + transform: translateX(-50%) translateY(0); + } + 50% { + transform: translateX(-50%) translateY(8px); + } } /* ---------- Fun Countdown ---------- */ @@ -1129,23 +1112,44 @@ p { font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem); } -.text--white { color: var(--color-white); } -.text--muted { color: var(--text-muted); } +.text--white { + color: var(--color-white); +} +.text--muted { + color: var(--text-muted); +} -.fw-bold { font-weight: 900; } -.fw-thin { font-weight: 100; } -.fs-italic { font-style: italic; } +.fw-bold { + font-weight: 900; +} +.fw-thin { + font-weight: 100; +} +.fs-italic { + font-style: italic; +} .u-underline { text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 3px; text-underline-offset: 4px; } -.u-text-sm { font-size: small; } -.u-text-lg { font-size: larger; } -.u-text-xl { font-size: clamp(2rem, 4vw, 3.5rem); } -.u-break-all { word-break: break-all; } -.u-no-space { padding: 1px; margin: 0; } +.u-text-sm { + font-size: small; +} +.u-text-lg { + font-size: larger; +} +.u-text-xl { + font-size: clamp(2rem, 4vw, 3.5rem); +} +.u-break-all { + word-break: break-all; +} +.u-no-space { + padding: 1px; + margin: 0; +} /* ---------- Links ---------- */ a { @@ -1281,13 +1285,21 @@ a:focus-visible { } @keyframes blinker { - 50% { opacity: 0; } + 50% { + opacity: 0; + } } @keyframes floatUpDown { - 0% { transform: translateY(0); } - 50% { transform: translateY(-10px); } - 100% { transform: translateY(0); } + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } } /* ---------- Navigation ---------- */ @@ -1410,8 +1422,12 @@ footer { } @keyframes progress-fill { - from { width: 2%; } - to { width: 5%; } + from { + width: 2%; + } + to { + width: 5%; + } } .progress__raised, @@ -1440,8 +1456,12 @@ footer { } @keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* ---------- Donate ---------- */ @@ -1963,7 +1983,8 @@ footer { border: 1px solid var(--color-gold); border-radius: 16px; overflow: hidden; - transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; + transition: transform 0.25s ease, box-shadow 0.25s ease, + border-color 0.25s ease; display: flex; flex-direction: column; } @@ -2373,7 +2394,12 @@ footer { height: 100%; width: 0; border-radius: 6px; - background: linear-gradient(90deg, var(--color-primary), var(--accent-light), #c89858); + background: linear-gradient( + 90deg, + var(--color-primary), + var(--accent-light), + #c89858 + ); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px rgba(52, 168, 90, 0.4); } @@ -2396,7 +2422,8 @@ footer { border: 2px solid var(--color-gold-dark); background: rgba(31, 52, 44, 0.7); cursor: pointer; - transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.3s ease; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, + box-shadow 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); @@ -2432,7 +2459,8 @@ footer { color: var(--color-gold); opacity: 0; transform: scale(0); - transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: opacity 0.2s ease, + transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .badge.is-earned { @@ -2479,17 +2507,29 @@ footer { } .prize-card--gold { - background: linear-gradient(135deg, rgba(249, 183, 69, 0.2), rgba(249, 183, 69, 0.05)); + background: linear-gradient( + 135deg, + rgba(249, 183, 69, 0.2), + rgba(249, 183, 69, 0.05) + ); border: 2px solid rgba(249, 183, 69, 0.4); } .prize-card--silver { - background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.03)); + background: linear-gradient( + 135deg, + rgba(192, 192, 192, 0.15), + rgba(192, 192, 192, 0.03) + ); border: 2px solid rgba(192, 192, 192, 0.3); } .prize-card--bronze { - background: linear-gradient(135deg, rgba(168, 117, 68, 0.2), rgba(168, 117, 68, 0.05)); + background: linear-gradient( + 135deg, + rgba(168, 117, 68, 0.2), + rgba(168, 117, 68, 0.05) + ); border: 2px solid rgba(168, 117, 68, 0.4); } @@ -2498,9 +2538,15 @@ footer { margin-bottom: 4px; } -.prize-card--gold .prize-card__medal { color: #c89858; } -.prize-card--silver .prize-card__medal { color: #8a7268; } -.prize-card--bronze .prize-card__medal { color: #a87544; } +.prize-card--gold .prize-card__medal { + color: #c89858; +} +.prize-card--silver .prize-card__medal { + color: #8a7268; +} +.prize-card--bronze .prize-card__medal { + color: #a87544; +} .prize-card__rank { color: var(--color-white); @@ -3305,10 +3351,18 @@ footer { flex: 0 0 auto; } -.session--keynote .session__title::before { content: "\f6a4"; } -.session--talk .session__title::before { content: "\f075"; } -.session--break .session__title::before { content: "\f0f4"; } -.session--workshop .session__title::before { content: "\f552"; } +.session--keynote .session__title::before { + content: "\f6a4"; +} +.session--talk .session__title::before { + content: "\f075"; +} +.session--break .session__title::before { + content: "\f0f4"; +} +.session--workshop .session__title::before { + content: "\f552"; +} .session__speaker { font-size: 0.9rem; @@ -3468,7 +3522,8 @@ footer { border-radius: 16px; padding: 32px 24px; text-align: center; - transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; + transition: transform 0.25s ease, box-shadow 0.25s ease, + border-color 0.25s ease; border: 1px solid var(--color-gold); } @@ -3565,11 +3620,7 @@ footer { display: flex; align-items: flex-end; justify-content: center; - background: linear-gradient( - to top, - rgba(0, 0, 0, 0.5) 0%, - transparent 50% - ); + background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%); pointer-events: none; } @@ -3847,7 +3898,11 @@ footer { gap: 4px; margin: 12px 0; padding: 20px 32px; - background: linear-gradient(135deg, var(--color-primary), var(--accent-light)); + background: linear-gradient( + 135deg, + var(--color-primary), + var(--accent-light) + ); border-radius: 16px; box-shadow: 0 6px 20px rgba(52, 168, 90, 0.35); } @@ -4498,4 +4553,4 @@ footer { top: 178px; right: 12px; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 87aa28e..6fab5e0 100644 --- a/index.html +++ b/index.html @@ -15,28 +15,54 @@ - Shiloh Echo '26 | Christian Family Retreat in Idaho Sept 11–13 - + + Shiloh Echo '26 | Christian Family Retreat in Idaho Sept 11–13 + + - + - + - + - - - + + + - + -
-
- -
-
-

Shiloh Echo '26

-
- @@ -563,8 +618,12 @@
-

See What Shiloh Echo '26 Is All About

-
+

+ See What Shiloh Echo '26 Is All About +

+
+ +