/* ============================================================ PRIVATE EVENTS — BLACK, GOLD + PEARL (events.html only) Pure neutral black grounds under a fine white-dust grain. Gold appears only where it can be crisp: gradient borders, gradient text, the band. Low-alpha gold washes over black read as brown, so there are none. The buttons are mother of pearl: an iridescent drift, a glint sweep and a soft rainbow halo, dark type. Blue is the homepage, pink is About Kamryn, black and gold is Private Events. ============================================================ */ .evpage .eyebrow { color: #D8B76A; } .evpage .section--navy { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values=%270 0 0 0 0.92 0 0 0 0 0.92 0 0 0 0 0.95 0 0 0 0.05 0%27/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), #07070A; } .evpage .section--black { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values=%270 0 0 0 0.92 0 0 0 0 0.92 0 0 0 0 0.95 0 0 0 0.05 0%27/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), #050506; } /* Molten gold band between black edges, under the same grain. */ .evpage .section--band { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values=%270 0 0 0 0.92 0 0 0 0 0.92 0 0 0 0 0.95 0 0 0 0.05 0%27/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg, #050505 0%, #3E2F10 38%, #A8873E 52%, #3E2F10 66%, #050505 100%); } .evpage .section--band .eyebrow { color: #FBEFCF; } /* Pearl gradient title on the bronze band: where the two materials meet. */ .evpage .section--band .section__title { background: linear-gradient(115deg, #FFFFFF 0%, #F3E7F1 20%, #E2ECF7 40%, #FDF7E6 60%, #EAF3EE 80%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .evpage .final { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values=%270 0 0 0 0.92 0 0 0 0 0.92 0 0 0 0 0.95 0 0 0 0.05 0%27/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), #08080B; } /* ============================================================ PEARL BUTTONS — iridescent drift, glint sweep, rainbow halo ============================================================ */ .evpage .btn--blue, .evpage .nav__cta { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(115deg, #FFFFFF 0%, #F9E3F1 12%, #E3E7FA 26%, #DFF6EC 40%, #FFF6DC 54%, #F3DFF6 68%, #DEEFFA 82%, #FFFFFF 100%); background-size: 100% 100%, 260% 100%; background-position: 0 0, 0% 50%; background-origin: border-box; background-repeat: no-repeat; animation: pearlDrift 7s ease-in-out infinite alternate; color: #171008; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px rgba(168, 146, 190, 0.32), 0 0 14px rgba(255, 182, 220, 0.3), 0 0 26px rgba(150, 205, 255, 0.26), 0 4px 18px rgba(240, 215, 154, 0.28); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); } .evpage .btn--blue::after, .evpage .nav__cta::after { content: ""; position: absolute; inset: -60% -40%; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 32%, rgba(255, 190, 225, 0.4) 43%, rgba(255, 246, 200, 0.5) 50%, rgba(170, 220, 255, 0.4) 57%, transparent 68%); transform: translateX(-90%) rotate(8deg); animation: pearlGlint 5.5s ease-in-out infinite; } .evpage .btn--blue:hover, .evpage .nav__cta:hover { color: #171008; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px rgba(168, 146, 190, 0.34), 0 0 20px rgba(255, 182, 220, 0.5), 0 0 36px rgba(150, 205, 255, 0.42), 0 6px 24px rgba(240, 215, 154, 0.4); } @keyframes pearlDrift { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } } @keyframes pearlGlint { 0%, 55% { transform: translateX(-90%) rotate(8deg); } 85%, 100% { transform: translateX(90%) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .evpage .btn--blue, .evpage .nav__cta { animation: none; } .evpage .btn--blue::after, .evpage .nav__cta::after { animation: none; display: none; } } .evpage .btn--ghost { border-color: rgba(216, 183, 106, 0.55); color: #F0D79A; } /* ============================================================ BLACK GLASS CARDS — gold gradient tint, pearl hairline on top ============================================================ */ .occ-grid { display: grid; gap: 0.8rem; grid-template-columns: 1fr; max-width: 900px; margin: 1.8rem auto 0; text-align: left; } @media (min-width: 640px) { .occ-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .occ-grid { grid-template-columns: 1fr 1fr 1fr; } } .occ { border: 1px solid transparent; border-radius: 16px; padding: 1.1rem 1.15rem; background: linear-gradient(165deg, rgba(14, 14, 18, 0.86), rgba(6, 6, 9, 0.86)) padding-box, linear-gradient(135deg, #F0D79A 0%, #8C6D33 30%, #4A3A16 55%, #D8B76A 100%) border-box; background-repeat: no-repeat; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 246, 230, 0.14); transition: box-shadow 0.18s ease, border-color 0.18s ease; } .occ:hover { box-shadow: inset 0 1px 0 rgba(255, 246, 230, 0.14), 0 0 22px rgba(240, 215, 154, 0.38); } .occ h3 { font-family: "Courier Prime", monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(120deg, #FBEFCF 2%, #F0D79A 30%, #D8B76A 62%, #B08D3C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 0.35rem; } .occ p { color: rgba(245, 241, 232, 0.82); font-size: 0.93rem; line-height: 1.55; margin: 0; } .duo { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 860px; margin: 1.8rem auto 0; text-align: left; } @media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; } } .duo article { border: 1px solid transparent; border-radius: 18px; padding: 1.5rem 1.4rem; background: linear-gradient(165deg, rgba(14, 14, 18, 0.84), rgba(6, 6, 9, 0.84)) padding-box, linear-gradient(135deg, #F0D79A 0%, #8C6D33 30%, #4A3A16 55%, #D8B76A 100%) border-box; background-repeat: no-repeat; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 246, 230, 0.12); } .duo h3 { font-family: var(--font-title), "Playfair Display", serif; font-size: 1.3rem; background: linear-gradient(120deg, #FBEFCF 2%, #F0D79A 30%, #D8B76A 62%, #B08D3C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 0.6rem; } .duo p { color: rgba(245, 241, 232, 0.84); line-height: 1.65; margin: 0 0 0.8rem; } .duo p:last-child { margin-bottom: 0; } /* Steps sit on the dark bronze band, so they read light. */ .ev-steps { list-style: none; max-width: 52ch; margin: 1.6rem auto 0; text-align: left; padding: 0; } .ev-steps li { margin-bottom: 1rem; color: rgba(245, 241, 232, 0.92); line-height: 1.65; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } .ev-steps b { color: #FBEFCF; } .ev-note { font-size: 0.92rem; color: rgba(245, 241, 232, 0.75); max-width: 52ch; margin: 1.4rem auto 1.6rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }