/********************************************************************************************************************************* all.css Version 2026.10.04 (Production Master: GPU-Accelerated, Fully Standardized, Cross-Browser Hardened) This stylesheet contains base CSS markups optimized for live events, multi-tenant platforms, and high-performance forms. Breakpoints: - Mobile Portrait: < 460 - Mobile Landscape: < 800 - Tablet Portrait: < 922 - Tablet Landscape: < 1200 **********************************************************************************************************************************/ /****************************************************************************** 1. VARIABLES (TOKENS) ******************************************************************************/ :root { --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --radius-sm: 0.6rem; --radius-md: 1rem; --radius-lg: 1.2rem; --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 2px 6px rgba(0,0,0,.25); --shadow-lg: 0 4px 12px rgba(0,0,0,.35); --color-bg: #f3f3f3; --color-blank: #f9f9f9; --color-text: #111111; --color-muted: #555555; --color-border: #e5e5e5; --color-primary: #002868; --color-perforated: #cccccc; --color-accent: #902020; --color-accent-dark: #750000; --color-gold: #CA9C2B; --color-gray: #999999; --color-go: #228B22; --color-time: #002868; --color-location: #902020; --color-notes: #A34C00; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.2rem; --font-size-lg: 1.5rem; --font-size-xl: 1.75rem; --font-size-2xl: 2rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --container: 1200px; --fold: 0.5em; } /****************************************************************************** 2. GLOBAL RESET & BASE STYLES ******************************************************************************/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 4; height: 100%; scroll-behavior: smooth; overflow-y: scroll; } body { min-height: 100vh; line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-width: 300px; font-family: var(--font-main); font-size: var(--font-size-base); background: var(--color-bg); color: var(--color-text); font-weight: 300; } body.common { background-color: var(--color-bg); } /* Eliminate 300ms tap delays and blue/grey highlight flash on touch devices */ a, button, input, select, textarea, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /****************************************************************************** 3. TYPOGRAPHY ******************************************************************************/ h1, h2, h3, h4, h5, h6, caption { font-weight: 500; width: 100%; text-wrap: balance; line-height: 1.1; } h1 { font-size: 1.8rem; letter-spacing: 0.1rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.8rem; } p { overflow-wrap: break-word; margin-bottom: var(--space-5); color: var(--color-text); text-wrap: pretty; } small { font-size: var(--font-size-xs); color: var(--color-muted); } b, strong { font-weight: bold; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } hr { border: 0; border-top: 1px solid #cccccc; margin: 30px 0; } /****************************************************************************** 4. UTILITIES & HELPERS ******************************************************************************/ .readable { max-width: 86ch; margin: 0 auto 1rem auto; } .tameform { max-width: 800px; margin: 0 auto 1rem auto; padding: 5px; } .checkout-divider { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; color: #4b5563; text-transform: uppercase; margin: 1.5rem 0 1rem 0; } .stackable { max-width: 450px; float: left; display: inline-block; margin-left: 0; margin-right: auto; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-muted { color: var(--color-muted); } .hidden, .hide, .necessary { display: none !important; } .wine { fill: #6a0000; } .attention { color: #ff0000; } .grayedout { filter: grayscale(1); } .maketouchable { cursor: pointer; } .soldout { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .signature { font-family: 'Serendipity', cursive, sans-serif; font-size: 2.75rem; margin: 0; } .breadcrumbs { font-size: 1.4rem; color: #C76B03; } .indent { padding-left: 2rem; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } /****************************************************************************** 5. MEDIA (Images, Video, SVG) ******************************************************************************/ img, picture, video, canvas, svg { max-width: 100%; height: auto; display: block; } .floatingimage { float: right; border-radius: 10px; width: 30%; max-width: 400px; } .floater { width: 25%; float: right; } .video-medium { clear: both; margin: 0 auto; max-width: 450px; width: 95%; border-radius: 1rem; box-shadow: 0 0 5px 2px rgba(133,5,5,1); } .slider-container { padding: 5px; } .slider-container div { width: 100%; max-width: 425px; padding: 0; display: inline-block; } .slider-container img, .slider-container video { margin: 0; box-shadow: 1px 1px 5px -1px rgba(0,0,0,1); border-radius: 0.5rem; width: 100%; max-width: 425px; } /****************************************************************************** 6. LINKS & LISTS ******************************************************************************/ a { text-decoration: none; color: var(--color-primary); width: max-content; } a:hover { text-decoration: none; } ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } li { margin-bottom: var(--space-1); } progress { vertical-align: baseline; } summary { display: list-item; } /****************************************************************************** 7. LAYOUT CONTAINERS & STRUCTURE ******************************************************************************/ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .flex { display: flex; } .grid { display: grid; } .neck { top: 120px; position: sticky; z-index: 100; } body.common .body_header { top: 0; left: 0; right: 0; position: -webkit-sticky; position: sticky; width: 100%; display: block; padding: 0; z-index: 1000; margin-bottom: 2px; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2); border-bottom: 1px solid #cccccc; background-color: #ffffff; } .self-center { display: block; margin: 0 auto; align-self: center; } .page_title { text-align: center; margin: 0.5rem 0; } .splitbox { display: flex; flex-direction: column; gap: 2rem; align-items: center; } .splitbox section { width: 100%; max-width: 85ch; flex: 1; display: flex; flex-direction: column; } .splitbox section fieldset { flex: 1; width: 100%; box-sizing: border-box; } @media (min-width: 1000px) { .splitbox { flex-direction: row; align-items: stretch; justify-content: center; } .splitbox section:not(:only-child) { flex: 1 1 50%; } } /* FOOTER */ .site-footer { background-color: #ffffff; color: #333333; padding: 40px 20px 0 20px; clear: both; width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .site-footer section { text-align: center; } .footer-wrapper { display: flex; flex-direction: column; gap: 30px; max-width: 1200px; margin: 0 auto; } .footer-col h3 { font-size: 1.1rem; color: #000000; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; margin-bottom: 1rem; } .footer-col ul { list-style: none; padding: 0 !important; margin: 0; } .footer-col a { color: #777777; text-decoration: none; display: inline-block; transition: color 0.2s ease; font-size: 0.95rem; } .footer-col a:hover, .footer-col a:focus { color: var(--color-notes); } .footer-bottom { max-width: 1200px; margin: 10px auto; gap: 15px; text-align: center; font-size: 0.85rem; color: #888888; } .footer-bottom a { color: #888888; text-decoration: none; } @media (min-width: 768px) { .footer-wrapper { flex-direction: row; justify-content: space-between; } .footer-col { flex: 1; max-width: 300px; } .footer-bottom { flex-direction: row; justify-content: space-between; } } #menu_main { max-width: 1000px; margin: 0 auto; min-width: 300px; } #menu_main svg { background-image: url(https://www.wino.us/files/structure/menu-main-optimised.svg); background-size: 100% 100%; background-repeat: no-repeat; } #menu_main .text { stroke: #000000; stroke-miterlimit: 10; stroke-width: 0.25; } #menu_main rect { fill-opacity: 0; } main.widescreen { width: 100%; border: 0; min-height: 200px; padding: 0; margin: 0 auto; } main.hdtv { width: 100%; max-width: 1000px; min-height: 200px; padding: 0 0 1.5rem; margin: 0 auto; } main.threepanel { display: flex; justify-content: space-between; width: 100%; margin: 15px auto; } main.threepanel aside { flex: 1; margin: 0; padding: 0; border-radius: 1rem; color: #000000; max-width: 1000px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; } main.threepanel .aside-left { order: 1; } main.threepanel .aside-right { order: 3; } main.threepanel article { order: 2; max-width: 1000px; flex-basis: 1000px; background-color: #ffffff; margin: 0 0.5rem; color: #000000; box-shadow: 0 1px 7px -1px rgba(0,0,0,0.3); border-radius: 1rem; } main.threepanel .info { background-color: #ffffff; color: #000000; box-shadow: 0 1px 7px -1px rgba(0,0,0,0.3); } aside.shade { box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); } @media screen and (min-width: 1401px) and (max-width: 1700px) { main.threepanel { gap: 1rem; } main.threepanel aside { flex: 0 0 300px; } main.threepanel article { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; } } @media screen and (max-width: 1400px) { main.threepanel { display: block; margin: 10px auto; } main.threepanel article { margin: 0 auto; } main.threepanel aside { margin: 1rem auto; box-shadow: 0 1px 7px -1px rgba(0,0,0,0.3); } } /****************************************************************************** 8. FORMS & INPUTS (OS-UNIFIED) ******************************************************************************/ form { text-align: left; } input, button, textarea, select, optgroup, option { font: inherit; outline: 0; box-sizing: border-box; } /* Uniform text inputs across WebKit, Gecko, and Blink */ input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="hidden"], [type="image"], [type="file"], [type="range"]), select, textarea, option, input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; padding: 0.6rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background-color: var(--color-blank); color: #000000; font-size: 1.2rem; } /* Custom SVG Dropdown Arrow */ select { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 1rem top 50%; background-size: 0.8rem auto; padding-right: 2.5rem !important; } select::-ms-expand { display: none; } input:invalid, textarea:invalid { color: #ff0000; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-appearance: none; -webkit-text-fill-color: #0B44EF; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25); } input[type="date"], select { min-height: 3rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: #6699cc; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25); } .tight { padding: 0.2rem; } label { font-size: 1.1rem; color: #000000; font-weight: 500; display: block; } label em { color: var(--color-accent); font-size: 0.8rem; } label p { font-size: 0.8rem; } fieldset { border-radius: 1rem; border: #6699cc solid 3px; padding: 1rem 1rem 2rem 1rem; display: block; margin: 15px 5px; font-size: 14px; background-color: #ffffff; } fieldset legend { font-size: 1.25rem; text-align: left; margin-left: 1rem; padding: 0.2rem 0.6rem; border: #6699cc solid 2px; border-radius: 0.5rem; color: #ffffff; background-color: #6699cc; } fieldset label { display: block; text-align: left; width: auto; font-weight: bold; margin-top: 8px; font-size: 16px; } .field-group { display: flex; flex-direction: column; margin-bottom: 1rem; } .form-hint { color: #777777; font-weight: normal; } /* HARDENED VECTOR RADIOS & CHECKBOXES */ input[type="radio"], input[type="checkbox"] { -webkit-appearance: none; appearance: none; background-color: var(--color-blank); margin: 0; font: inherit; color: var(--color-primary); width: 1.6rem; height: 1.6rem; border: 2px solid #000080; display: inline-grid; place-content: center; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; vertical-align: middle; padding: 0; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"] { border-radius: 0.4rem; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); } /* High-DPI safe radio indicator */ input[type="radio"]::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; transform: scale(0); transition: transform 120ms ease-in-out; background-color: var(--color-primary); } input[type="radio"]:checked::before { transform: scale(1); } /* WebKit-prefixed vector checkmark */ input[type="checkbox"]::before { content: ""; width: 0.9rem; height: 0.9rem; transform: scale(0); transition: transform 120ms ease-in-out; background-color: var(--color-primary); -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="radio"]:focus, input[type="checkbox"]:focus { outline: none; border-color: #6699cc; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25); } input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: var(--color-primary); } input[type="radio"] + span, input[type="checkbox"] + span { color: #7393B3; font-size: 1.1rem; margin-left: 0.6rem; vertical-align: middle; display: inline-block; cursor: pointer; } input[type="radio"]:checked + span, input[type="checkbox"]:checked + span { color: #000000; } /* Specialized Inputs */ input[type="time"], input[type="date"] { width: 10em; border: 0 black solid; height: 3rem; outline: 0; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } ::placeholder { color: #aaaaaa; font-style: italic; opacity: 1; } ::-webkit-input-placeholder { color: #aaaaaa; font-style: italic; } ::-moz-placeholder { color: #aaaaaa; font-style: italic; opacity: 1; } :-ms-input-placeholder { color: #aaaaaa; font-style: italic; } input[name="system_verify_token"], input[name="username"] { width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute; left: -9999px; } .form_message_error { color: #990000; height: auto; min-height: 2.5rem; text-align: left; font-size: 1.2rem; font-weight: bold; } #form_message_success { color: #009700; text-align: center; font-size: 1.4rem; border: 3px dashed #009700; border-radius: 2rem; padding: 1rem; } #eventsearch { width: 100%; background-color: #fff9e6; justify-content: center; align-items: center; display: flex; align-content: center; flex-wrap: wrap; gap: 0.6rem; flex-direction: row; padding: 5px 0 10px 0; box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,.2); border-bottom: 1px solid #cccccc; } /****************************************************************************** 9. BUTTONS ******************************************************************************/ button, [type='button'], [type='reset'], [type='submit'] .btn { -webkit-appearance: button; font: inherit; } button, button[type="submit"], .link_button { display: inline-flex; align-items: center; justify-content: center; position: relative; width: auto; margin-top: 0; padding: 0.8rem 1.5rem; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: 0.1rem; text-align: center; text-decoration: none; border: 0; border-radius: 0.6rem; cursor: pointer; user-select: none; vertical-align: middle; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: inset 1px 2px 2px 1px rgba(255, 255, 255, 0.4), 1px 1px 2px 0 rgba(0, 0, 0, 0.4), inset -1px -1px 2px 1px rgba(0, 0, 0, 0.2); transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease; will-change: transform; } button:hover:not(:disabled):not(.disabled), input[type="submit"]:hover:not(:disabled):not(.disabled), a.link_button:hover:not(.disabled) { transform: translate3d(0, -1px, 0) scale(1.02); filter: brightness(110%); } button:active:not(:disabled):not(.disabled), input[type="submit"]:active:not(:disabled):not(.disabled), a.link_button:active:not(.disabled) { transform: translate3d(0, 0, 0) scale(0.98); filter: brightness(95%); transition: none; box-shadow: #555555 0 0 0 1px, rgba(255, 255, 255, 0.1) 0 1px 1px 0 inset, rgba(0, 0, 0, 0.5) 0 1px 2px 0, rgba(0, 0, 0, 0.5) 0 1px 2px 0 inset, 0 2px 6px -1px rgba(0, 0, 0, 0.1); } button[type="submit"] { background-color: #228B22; color: #ffffff; } button:disabled, button[disabled] { border: 1px solid #999999; background-color: #cccccc; color: #666666; cursor: not-allowed; } input:user-invalid, textarea:user-invalid { border: 2px solid #ff0000; background-color: #ffcccc; } .btn--nospace { font-size: 0.8rem; padding: 0 0.4rem; border-radius: 0.5rem; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; } .btn--tight { font-size: 0.8rem; padding: 0 0.4rem; border-radius: 0.5rem; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none; } .btn--table { font-size: 0.8rem; padding: 0.2rem 0.4rem; border-radius: 0.5rem; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none; } .btn--inline { font-size: 0.9rem; padding: 0.1rem 0.5rem; border-radius: 0.5rem; line-height: 1; } .btn--small { font-size: 0.85rem; padding: 0.3rem; border-radius: 0.5rem; line-height: 1.8; } .btn--medium { font-size: 1rem; padding: 0.5rem; border-radius: 0.5rem; } .btn--large { font-size: 1.5rem; padding: 0.5rem; border-radius: 0.5rem; } .btn--huge { font-size: 1.85rem; border-radius: 0.5rem; } .btn--subtle { border: 1px solid #cccccc; } .btn--subtle:active, .btn--subtle:hover { border: 1px solid #777777; } .bg--yellow { background-color: #F2CF66; color: #000000; } .bg--yellow:active { background-color: #D1B358; } .bg--grass { background-color: #82BF56; color: #ffffff; } .bg--grass:active { background-color: #578934; } .bg--jungle { background-color: #284420; color: #ffffff; } .bg--go { background-color: var(--color-go); color: #ffffff; } .bg--green { background-color: #52C11F; color: #ffffff; } .bg--green:active { background-color: #49ab1b; } .bg--forest { background-color: #228B22; color: #ffffff; } .bg--forest:active { background-color: #0B2E0B; } .bg--sky { background-color: #3498DB; color: #ffffff; } .bg--sky:active { background-color: #16547e; } .bg--blue { background-color: #0B44EF; background-image: linear-gradient(350deg, #0939c8, #0B44EF, #1f54f5); color: #ffffff; } .bg--blue:active { background-color: #0a3dd7; } .bg--navy { background-color: #002868; } .bg--pink { background-color: #FFC0CB; color: #000000; } .bg--pink:active { background-color: #FF69B4; } .bg--linen { background-color: #FAFAD2; color: #000000; } .bg--linen:hover { background-color: #DDDDB6; } .bg--purple { background-color: #991BE2; background-image: linear-gradient(350deg, #8017be, #991BE2, #a330e6); color: #ffffff; } .bg--purple:active { background-color: #8a18cb; } .bg--gray-dark { background-color: #3F4351; background-image: linear-gradient(350deg, #2d303a, #3F4351, #4a4f5f); color: #ffffff; } .bg--gray-dark:active { background-color: #343743; } .bg--gray { background-color: #6D6F7F; background-image: linear-gradient(350deg, #5a5c69, #6D6F7F, #797b8c); color: #ffffff; } .bg--gray:active { background-color: #616371; } .bg--gray-light { background-color: #E6EAEF; background-image: linear-gradient(350deg, #cdd5df, #E6EAEF, #f6f7f9); color: #000000; } .bg--gray-light:active { background-color: #d6dde5; color: #000000; } .bg--white { background-color: #ffffff; color: #000000; } .bg--white:active { background-color: #cccccc; color: #000000; } .bg--candy { background-color: #FF006A; background-image: linear-gradient(350deg, #d60059, #FF006A, #ff1a79); color: #ffffff; } .bg--candy:active { background-color: #e6005f; } .bg--red { background-color: #990000; color: #ffffff; } .btn--glow { border: none; outline: none; color: #000000; background: #ffffff; border-radius: 10px; transition: transform 0.2s ease; animation: kf-rainbowGlow 8s linear infinite; } .smallnote { font-size: 0.8rem; color: #718096; line-height: 1; padding-left: 1rem; } .custom-details { color: var(--color-muted); } .custom-details summary { list-style: none; cursor: pointer; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; } .custom-details summary::-webkit-details-marker { display: none; } .custom-details summary::after { content: 'â–¶'; transition: transform 0.2s ease; font-size: 0.8rem; } .custom-details[open] summary::after { transform: rotate(90deg); } /****************************************************************************** 10. TABLES ******************************************************************************/ table { border-collapse: collapse; border-color: currentColor; border-spacing: 0; } th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; } table.info { text-shadow: 1px 1px 0 #ffffff; background: #C7D2E7; border-radius: 3px; box-shadow: 0 1px 2px #C7D2E7; color: #000000; width: 100%; } table.info th { padding: 11px 15px 12px 15px; border-bottom: 1px solid #C7D2E7; background: linear-gradient(to bottom, #E4E9F1, #C7D2E7); font-weight: bold; } table.info th:first-child { text-align: left; padding-left: 20px; } table.info tr:first-child th:first-child { border-top-left-radius: 3px; background-color: #666666; } table.info tr:first-child th:last-child { border-top-right-radius: 3px; background-color: #666666; } table.info tr { text-align: left; padding-left: 20px; } table.info td:first-child { text-align: left; padding-left: 10px; border-left: 0; } table.info td { padding: 5px 5px 5px 10px; border-top: 1px solid #ffffff; border-bottom: 1px solid #C7D2E7; border-left: 1px solid #C7D2E7; background: #ffffff; } table.info tr.even td { background: #f6f6f6; } table.info tr:last-child td { border-bottom: 0; } table.info tr:last-child td:first-child { border-bottom-left-radius: 3px; } table.info tr:last-child td:last-child { border-bottom-right-radius: 3px; } table.info tr:hover td { background: #e3e8f3; } table.info tr td:hover { background: #C7D2E7; } table.info a:link, table.info a:visited { color: #666666; font-weight: bold; text-decoration: none; } table.info a:active, table.info a:hover { color: #bd5a35; } table.clearinfo { border-radius: 3px; color: #000000; margin: 0 auto; box-sizing: border-box; width: 100% !important; max-width: 100%; } table.clearinfo th { padding: 0.5rem 0.25rem 0 0.25rem; border-bottom: 1px solid #C7D2E7; font-weight: bold; background: #C7D2E7; } table.clearinfo th:first-child { text-align: left; } table.clearinfo tr:first-child th:first-child { border-top-left-radius: 5px; } table.clearinfo tr:first-child th:last-child { border-top-right-radius: 5px; } table.clearinfo tr { text-align: left; padding-left: 0.5rem; } table.clearinfo td:first-child { text-align: left; padding-left: 0.5rem; border-left: 0; } table.clearinfo td { padding: 2px; vertical-align: middle; border-top: 1px solid #ffffff; border-bottom: 1px solid #C7D2E7; border-left: 1px solid #C7D2E7; background: #ffffff; white-space: nowrap; } table.clearinfo tr.even td { background: #f6f6f6; } table.clearinfo tr:last-child td { border-bottom: 0; } table.clearinfo tr:last-child td:first-child { border-bottom-left-radius: 5px; } table.clearinfo tr:last-child td:last-child { border-bottom-right-radius: 5px; } table.clearinfo tr:hover td { background: #e3e8f3; } table.clearinfo tr td:hover { background: #C7D2E7; } table.clearinfo a:link, table.clearinfo a:visited { color: #666666; text-decoration: none; } table.clearinfo a:active, table.clearinfo a:hover { color: #bd5a35; } table.clearinfo th { white-space: nowrap; } table.clearinfo th.tight, table.clearinfo td.tight, table th.tight, table td.tight { width: 1% !important; white-space: nowrap !important; } table.clearinfo th.wrapok, table.clearinfo td.wrapok, .wrapok { width: auto !important; white-space: normal !important; word-wrap: break-word; overflow-wrap: anywhere; } tr.table-section-header th { text-align: center !important; background-color: #c7d2e7; color: #000000; font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; padding: 6px 10px; } /****************************************************************************** 11. COMPONENTS (Events, Tiles, Marquee, Accordion, etc.) ******************************************************************************/ article { text-align: left; margin-top: 0; width: 100%; border-radius: 1rem; padding-bottom: 2rem; clear: both; } article header.cover { position: relative; min-height: 3rem; margin-bottom: 1rem; padding: 1rem; } article header.cover img { position: relative; width: 100%; } header.cover video { width: 100%; border-radius: 1rem; } article header h1 { margin: 0; } article header h2 { color: #3F3F3F; } .testbox { position: fixed; bottom: 0; right: 0; min-width: 200px; background-color: #00ff00; border: 1px solid #000000; padding: 5px; color: #000000; font-family: monospace; } .tooltip { position: absolute; background-color: #0000ff; color: #ffffff; padding: 10px; z-index: 10000; font-size: 1rem; border-radius: 1rem; opacity: 0; transition: opacity 0.3s ease; font-weight: bold; } .discount { margin: 1rem; border: 4px dashed var(--color-notes); background-color: #ffffff; border-radius: 1rem; padding: 1rem; font-size: 0.9rem; width: 100%; max-width: 325px; } .salesearch_go { border: 3px dashed var(--color-go); background-color: #ffffff; border-radius: 1rem; font-size: 1.2rem; margin: 1rem auto; padding: 1rem; width: 90%; max-width: 600px; } .gobottom { position: fixed; bottom: 0; right: 0; min-width: 200px; background-color: #ffffff; border: 3px dashed #FFD700; margin: 5px; border-radius: 1rem; padding: 0.75rem; font-size: 0.9rem; z-index: 100; } .salesearch { border: 3px dashed var(--color-go); background-color: #ffffff; margin: 5px; border-radius: 1rem; padding: 0.5rem; font-size: 0.7rem; float: right; text-align: center; } menu { display: flex; list-style: none; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; align-content: center; } .thumbs img { width: 5rem; display: inline; border-radius: 1rem; cursor: pointer; } .tile img { width: 7rem; display: inline-block; border-radius: 1rem; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(144,144,144, 1); } .flex-thumbs { justify-content: center; align-items: center; padding: 0 0.5rem 1rem 0.5rem; margin: 0.5rem auto; display: flex; align-content: center; flex-wrap: wrap; border-radius: 1rem; border: 2px solid #dddddd; background-color: #ffffff; gap: 0.6rem; flex-direction: row; position: relative; width: 100%; } .flex-list { justify-content: center; align-items: center; padding: 0 0.5rem 1rem 0.5rem; margin: 0.5rem auto; display: flex; flex-direction: column; width: 100%; } .flex-row { flex-direction: row; justify-content: center; align-items: center; padding: 0 0.5rem 1rem 0.5rem; margin: 0.5rem auto; display: flex; align-content: center; flex-wrap: wrap; border-radius: 1rem; border: 2px solid #dddddd; background-color: #ffffff; gap: 0.6rem; position: relative; width: 100%; } .tray { border-radius: 1rem; background-color: #ffffff; border: 1px solid #cccccc; max-width: 1200px; margin: 2rem auto; padding: 1rem; text-align: center; } .flex-thumbs h1, .flex-thumbs h2 { width: 100%; text-align: center; margin: 0 0 0.5rem; padding: 3px; color: #000000; } /* GPU-Accelerated Tile Interactions */ .tile2 { background-color: #ffffff; cursor: pointer; color: #999999; font-size: 1rem; padding: 10px; border-radius: 1rem; height: 10rem; width: 10rem; box-shadow: rgba(50, 50, 93, 0.25) 0 20px 50px -20px, rgba(0, 0, 0, 0.3) 0 20px 60px -30px, rgba(10, 37, 64, 0.35) 0 -2px 6px 0 inset; transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; will-change: transform; } .tile2:hover { color: #000000; transform: scale(1.01); box-shadow: rgba(50, 50, 93, 0.25) 0 20px 50px -20px, rgba(0,102,255,1) 0 10px 60px -30px, rgba(10, 37, 64, 0.35) 0 -2px 6px 0 inset; } .porthole { display: flex; align-content: center; flex-wrap: wrap; gap: 0.25rem; } .porthole img { display: inline; border-radius: 50%; width: 6rem; transition: transform 0.3s ease; will-change: transform; } .porthole img:hover { transform: scale(1.05); } .placard { background-color: #ffffff; width: 11rem; height: 11rem; cursor: pointer; border-radius: 0.3rem; color: #999999; box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px; transition: box-shadow 0.3s ease; text-align: center; } .placard:hover { box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 6px -1px; } /* Tabs */ div.events_filter { position: sticky; z-index: 100; } div.tabs { max-width: 8000px; width: 100%; background-color: var(--color-bg); padding: 0; } .tabs ul { list-style-type: none; margin: 0; padding: 0; } .tabs input[type=radio] { display: none; } .tabs .tab { font-size: 1.5rem; white-space: nowrap; text-align: center; } .tabs .tab label { display: inline-block; margin-right: 0.1rem; margin-bottom: -1px; padding: 0.75rem 0; cursor: pointer; background: var(--color-primary); font-size: 1.75rem; letter-spacing: 1px; color: #ffffff; transition: background-color 0.3s ease; width: 30%; max-width: 200px; } .tabs .tab label:hover { background-color: var(--color-accent); } .tabs input:nth-child(1):checked ~ .tab label:nth-child(1), .tabs input:nth-child(2):checked ~ .tab label:nth-child(2), .tabs input:nth-child(3):checked ~ .tab label:nth-child(3), .tabs input:nth-child(4):checked ~ .tab label:nth-child(4) { color: #000000; background: #ffffff; } ul.sections { margin: 0; padding: 0; } .tabs .sections li { display: none; min-height: 50px; background-color: #ffffff; position: relative; color: #111111; overflow-y: auto; } .tabs input:nth-child(1):checked ~ .sections li:nth-child(1), .tabs input:nth-child(2):checked ~ .sections li:nth-child(2), .tabs input:nth-child(3):checked ~ .sections li:nth-child(3), .tabs input:nth-child(4):checked ~ .sections li:nth-child(4) { display: block; margin: 0; padding: 5px; } .tabs div { text-align: center; } /* Event Lists */ .button_state div { display: inline-block; padding: 1rem 0; margin: 0.5rem; width: 200px; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 10px; font-size: 1.75rem; color: #000000; cursor: pointer; } .button_state div:hover, .events_button div:hover { background-color: #CCDBF0; } .events_button { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .events_button div { padding: 1rem 0.1rem; width: 175px; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 10px; font-size: 1.1rem; color: #000000; cursor: pointer; text-align: center; } .events_button2 { margin: 0 auto; width: 100%; } .events_button2 div { display: inline-block; padding: 1rem 0.1rem; margin: 0.25rem; width: 175px; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 10px; font-size: 1.1rem; color: #000000; cursor: pointer; text-align: center; font-weight: bold; } .events { display: flex; align-content: center; gap: 1rem; background-color: #ffffff; padding: 50px; justify-content: center; flex-wrap: wrap; } .event_list { width: 100%; text-align: center; display: flex; list-style: none; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; align-content: center; } .event_list .eventlink { position: relative; width: 100%; max-width: 100%; border-radius: 10px; text-align: center; overflow: hidden; } .event_list div.event { position: relative; width: 100%; max-width: 650px; background-color: #ffffff; border-radius: 10px; text-align: left; border: 1px solid #cccccc; height: 7rem; max-height: 200px; overflow: hidden; margin: 0 auto; } .event_list div.event:hover { border-color: var(--color-primary); } .event_list div.event img { height: 100%; border-radius: 10px 0 0 10px; float: left; margin-right: 1rem; z-index: 0; } .event_list div.event div.text { position: relative; padding: 0.5rem; } .event_list .event_name { margin: 0; text-align: left; color: #000000; font-size: 1.1rem; } .event_list .event_location { margin: 0; width: 100%; color: var(--color-location); text-align: left; font-weight: bold; font-size: var(--font-size-md); } .event_list .event_time { width: 100%; padding: 4px; margin: 0 0 0.2rem; text-align: right; color: var(--color-time); font-size: 1rem; font-weight: bold; } .event_list div.event section { color: #999999; font-size: 0.7rem; margin: 0; padding: 0; } .event_list .event_alerts { position: absolute; right: 0; bottom: 0; margin: 0; text-align: right; color: #B50000; padding: 5px; } .event_list .event_count2 { margin: 0; text-align: right; color: #777777; font-size: 0.8rem; font-style: italic; padding: 5px; } .event_list .event_count { position: absolute; right: 0; bottom: 0; margin: 0; text-align: right; color: var(--color-notes); padding: 5px; font-style: italic; font-size: 0.9rem; } .event_list div.event h6 { margin: 0; color: #d4af37; text-align: left; } .event_list div.grayout { filter: grayscale(1); background-color: #dddddd; } .event_list img.soldout { height: 100%; border-radius: 10px 0 0 10px; position: absolute; top: 2px; left: 2px; z-index: 3; } .event_list .newdate { width: 100%; margin: 0 0 0.25rem; padding: 0.5rem; background-color: var(--color-primary); color: #ffffff; position: relative; font-size: 1.75rem; font-weight: normal; letter-spacing: 0.25rem; } .event-name { margin: 0; padding: 0; font-size: var(--font-size-xl); text-align: center; } .event-location { text-align: center; font-size: var(--font-size-lg); margin-top: 1rem; padding: 0; color: var(--color-location); } .event-timetable { text-align: center; font-size: var(--font-size-md); color: var(--color-time); display: block; } .event-address { display: flex; align-items: center; justify-content: flex-start; gap: 15px; width: 100%; } .white-3d-box { background-color: #ffffff; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: inset -2px -1px 16px -3px #DBDBDB; } .eventtypes { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; justify-content: center; align-items: center; margin: 1rem; } .eventtype { position: relative; overflow: hidden; border-radius: 1rem; min-width: 0; border: 2px solid #ffffff; box-shadow: inset -1px -1px 7px -2px #999999; overflow-wrap: break-word; word-break: break-all; width: 100%; padding: 0; max-width: 12rem; height: 14rem; background-color: var(--color-bg); } .eventtype .eventtype_img { width: 100%; } .eventtypes .selected, .eventtype:hover { box-shadow: 0 1px 4px 2px var(--color-primary); border-color: var(--color-primary); } .eventtype .eventtype_text { white-space: normal; padding: 0.5rem; text-align: left; overflow-wrap: break-word; word-break: break-word; width: 100%; font-size: 0.8rem; color: #555555; } .eventtype .eventtype_title { font-size: 1rem; font-weight: bold; text-align: center; color: #000000; } .eventtype .eventtype_alerts { height: 2rem; bottom: 1rem; right: 0; position: absolute; text-align: left; padding-right: 1rem; color: #ff0000; font-size: 1rem; } .eventtype .eventtype_sale { font-weight: bold; color: #008000; text-align: left; font-size: 1.2rem; } div.currentselection { width: 100%; margin: 0; padding: 1rem 0; position: relative; font-size: 1.5rem; font-weight: normal; text-align: center; background-color: var(--color-accent); color: #ffffff; } .eventlist_otheroptions { width: 100%; margin: 0; padding: 0 0 0.5rem 0; position: relative; font-size: 1.5rem; font-weight: normal; text-align: center; background-color: #ffffff; border-bottom: 2px solid var(--color-primary); } .eventlist_otheroptions button { font-size: 1rem; background-color: #ffffff; color: #000000; } .city-area { width: 100%; text-align: center; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .city-area div { float: left; max-width: 175px; width: 100%; border: 1px solid #000000; border-radius: 5px; margin: 5px; color: #000000; } .city-area h2 { margin: 0; padding: 0.25rem 0; border-bottom: 1px solid #000000; background-color: var(--color-primary); border-radius: 4px; color: #ffffff; font-size: 1.1rem; } .cities { display: inline-block; } .cities div { display: inline-block; border: 1px solid #000000; } /* Scrolling & Marquee */ .scrolling-list { height: 100%; max-height: 2000px; overflow: hidden; position: relative; } .scrolling-list__track { padding: 0; margin: 0; list-style: none; } .scrolling-list__item { padding: 10px; font-style: italic; color: #aaaaaa; text-align: left; font-size: 0.9rem; border-bottom: 1px solid #dddddd; } [data-auto-scroll="container"] { transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .marquee-box { width: 100%; height: 160px; overflow: hidden; position: relative; list-style: none; padding: 0; margin: 0; } .marquee-box__item { display: block; width: 300px; padding: 1rem; background: #ffffff; border: 2px dashed #cccccc; color: #777777; font-size: 0.75rem; line-height: 1.4; height: 100%; font-style: italic; } .event_alert { width: 90%; margin: 0 auto; border: 2px solid var(--color-accent-dark); color: #ffffff; background-color: var(--color-accent); padding: 0.5rem; border-radius: 1rem; text-align: center; font-size: 1.5rem; } .input-clear-wrapper { position: relative; display: inline-block; width: 100%; } .input-clear-wrapper .clear-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999999; font-weight: bold; font-size: 1.4rem; user-select: none; line-height: 1; } .input-clear-wrapper .clear-btn:hover { color: #333333; } .input-clear-wrapper input { padding-right: 28px !important; } .event-cell-wrapper { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap !important; } .event-cell-wrapper a.btn--inline { display: inline-flex; align-items: center; justify-content: center; margin: 0; vertical-align: middle; line-height: 1; } .hormenu { display: flex; align-items: center; } .hormenu ul { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; gap: 10px; list-style: none; margin: 0 auto; padding: 0; } .hormenu li { display: inline-flex; align-items: center; } .adminmenu { position: fixed; top: 0; left: 0; width: 100%; background: #C7D2E7; z-index: 100; height: 4rem; display: flex; align-items: center; } .adminmenu ol { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; gap: 10px; list-style: none; margin: 0 auto; padding: 0; } .adminmenu li { display: inline-flex; align-items: center; } .admin-content { margin: 4rem 0; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 1rem; } form.adminmenu ol > li:nth-child(2) { margin-left: auto; } form.adminmenu ol > li { display: inline-flex; align-items: center; gap: 8px; } /* --- TelnyxAdapter SMS console (admin theme tokens; override freely) --- */ :root { --tx-surface: #ffffff; --tx-header-bg: #C7D2E7; --tx-header-fg: #1a252f; --tx-history-bg: #EEF2F7; --tx-bubble-in-bg: #ffffff; --tx-bubble-in-fg: #333333; --tx-bubble-out-bg: #E4E9F1; --tx-bubble-out-fg: #002868; --tx-accent: var(--color-primary, #002868); --tx-border: #C7D2E7; --tx-muted: #6c757d; --tx-success: var(--color-go, #228B22); --tx-danger: var(--color-accent, #902020); --tx-warning: var(--color-gold, #CA9C2B); --tx-max-width: none; --tx-radius: 8px; --tx-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .telnyx-helper-card { width: 100%; max-width: var(--tx-max-width); } /* SMS unsubscribed (cx) — admin phone markers */ .phone-unsub { color: #b91c1c; font-weight: 700; } .phone-unsub-icon { font-family: Consolas, ui-monospace, monospace; } .telnyx-helper-header .phone-unsub { color: var(--tx-danger, #b91c1c); opacity: 1; } .admin-content .telnyx-helper-card, .search-texter-pane .telnyx-helper-card { width: 100%; max-width: none; } .genie h2 { text-align: center; margin-bottom: 0; padding: 0.8rem; } ul.genie { list-style-type: none; border: solid var(--color-perforated) 1px; border-radius: 1rem; background-color: #fdfbf7; display: inline-block; padding: 0; } .genie li { width: 100%; cursor: pointer; display: inline-block; } .genie div { font-size: 0.7rem; font-weight: normal; } .genie section { padding: 0.5rem; border-bottom: solid var(--color-perforated) 1px; background-color: #ffffff; font-size: 0.8rem; } .genie h3 { margin: 0; background-color: #fdfbf7; padding: 0.5rem 2rem; border-bottom: dashed var(--color-perforated) 1px; width: 100%; text-align: left; } .genie h3:hover { color: #0000ff; transition: color 0.3s ease; } .genie footer { height: 2rem; background-color: #ffffff; } .genie h4 { height: 1rem; padding: 0.5rem; } .roundediframe { background-color: #000000; border-radius: 20px; overflow: hidden; max-width: 1000px; width: 90%; margin: 10px auto; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); } .roundediframe iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; } /****************************************************************************** 12. GARNISHES (Sash, Ribbon, etc.) ******************************************************************************/ .card { position: relative; display: inline-block; } .sash { font-weight: bold; color: #ffffff; position: absolute; top: 0; right: 0; line-height: 1.8; padding-inline: 1lh; padding-bottom: var(--fold); border-image: conic-gradient(#0008 0 0) 51%/var(--fold); clip-path: polygon(100% calc(100% - var(--fold)), 100% 100%, calc(100% - var(--fold)) calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), 0 100%, 0 calc(100% - var(--fold)), 999px calc(100% - var(--fold) - 999px), calc(100% - 999px) calc(100% - var(--fold) - 999px)); transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg); transform-origin: 0% 100%; background-color: #97282d; font-size: 0.8rem; } .ribbon { color: #ffffff; background: #E3AD40; position: absolute; bottom: 20px; left: calc(-1*var(--fold)); padding-inline: 0.25em; line-height: 1.8; border-top: var(--fold) solid #0005; border-right: var(--fold) solid #0000; clip-path: polygon(calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold), var(--fold) 0, var(--fold) var(--fold), calc(100% - var(--fold)) var(--fold), 100% calc(50% + var(--fold)/2)); } .corset { font-weight: bold; color: #ffffff; text-align: center; position: absolute; top: 50%; translate: 0 -50%; inset-inline: calc(-1*var(--fold)); padding-block: var(--fold); line-height: 1.8; clip-path: polygon(0 var(--fold), calc(100% - var(--fold)) var(--fold), calc(100% - var(--fold)) 0, 100% var(--fold), 100% calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), var(--fold) 100%, 0 calc(100% - var(--fold))); border-image: conic-gradient(#0008 0 0) 50%/var(--fold); background-color: #3FB8AF; } .headband { font-weight: bold; color: #ffffff; text-align: center; position: absolute; top: 5%; inset-inline: calc(-1*var(--fold)); border-bottom: var(--fold) solid #0008; line-height: 1.8; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, calc(100% - var(--fold)) calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), var(--fold) 100%, 0 calc(100% - var(--fold))); background-color: #3FB8AF; } .belt { font-weight: normal; text-align: center; color: #ffffff; position: absolute; bottom: 20px; inset-inline: calc(-1*var(--fold)); border-top: var(--fold) solid #0008; line-height: 1.8; clip-path: polygon(0 100%, 100% 100%, 100% var(--fold), calc(100% - var(--fold)) 0%, calc(100% - var(--fold)) var(--fold), var(--fold) var(--fold), var(--fold) 0%, 0 var(--fold)); background-color: #8FBE00; } .drape { color: #ffffff; position: absolute; left: 20px; top: calc(-1*var(--fold)); padding: 0.2em; background: #BF4D28; border-left: var(--fold) solid #0005; border-bottom: var(--fold) solid #0000; clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(50% + var(--fold)/2) 100%, var(--fold) calc(100% - var(--fold)), var(--fold) var(--fold), 0 var(--fold)); } .skullcap { color: #ffffff; --fold: 0.2em; position: absolute; top: 0; inset-inline: calc(-1*var(--fold)); text-align: center; line-height: 1.8; padding: 0 0.5em calc(2*var(--fold)); border-radius: var(--fold); --_g: 100%/var(--fold) calc(2*var(--fold)) no-repeat; background: radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 var(--_g), radial-gradient(100% 50% at left, #0005 98%, #0000 101%) 100% var(--_g), conic-gradient(from 90deg at var(--fold) calc(100% - 2*var(--fold)), #0000 25%, #3FB8AF 0) 0 0/calc(100% - var(--fold)) 100%; } /****************************************************************************** 13. CURSORS & ANIMATIONS ******************************************************************************/ .cursor-box { width: 150px; border-radius: 12px; border: 2px solid #00bcd4; transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center; padding: 1rem; } .s--pointer { cursor: pointer; } .s--pointer:hover { box-shadow: 0 0 15px rgba(100, 108, 255, 0.3); } .s--help { cursor: help; } .s--help:hover { transform: translate3d(0, -5px, 0) scale(1.05); box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3); } .s--wait { cursor: wait; } .s--wait:hover { animation: kf-pulse 1.5s infinite alternate; } .s--eager { cursor: pointer; } .s--eager:hover { animation: kf-hop 1s infinite; } .s--beat { cursor: pointer; animation: kf-beat 1s infinite alternate; } .s--pulse { cursor: pointer; animation: kf-pulse 1s infinite alternate; } .s--pulse:hover { transform: scale(1.05); } .s--crosshair { cursor: crosshair; border: 2px solid #4caf50; } .s--crosshair:hover { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.3); } .s--text { cursor: text; border: 2px solid #ffc107; } .s--text:hover { transform: scale(1.05); letter-spacing: 2px; } .s--nogo { cursor: not-allowed; border: 2px solid #f44336; } .s--nogo:hover { animation: kf-shake 0.5s ease-in-out; } .s--grab { cursor: grab; border: 2px solid #9c27b0; } .s--grab:hover { transform: translate3d(10px, 0, 0) scale(1.05); } .s--zoom-in { cursor: zoom-in; border: 2px solid #3f51b5; } .s--zoom-in:hover { transform: scale(1.15); } .s--cell { cursor: cell; border: 2px solid #009688; } .s--cell:hover { transform: scale(1.05); -webkit-clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%); clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%); } .s--copy { cursor: copy; border: 2px solid #009688; } .s--copy:hover { transform: scale(1.05); box-shadow: 5px 5px 0 #cccccc; } .s--move { cursor: move; border: 2px solid #ff9800; } .s--move:hover { animation: kf-movearound 2s infinite ease-in-out; } .s--alias { cursor: alias; border: 2px solid #e91e63; } .s--alias:hover { transform: scale(1.05) skew(-5deg); } .button-toolbar { display: inline-flex; gap: 4px; margin: 10px; border: 1px solid #ffffff; padding: 3px; border-radius: 1rem; background-color: #e3e8f3; } .button-toolbar ul { list-style: none; } .button-toolbar a { display: inline-block; padding: 0.5rem 1rem; font-size: 1rem; border: 2px solid #ADBCE0; border-radius: 1rem; background-color: #E6EAEF; color: #ADBCE0; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .button-toolbar a:hover, .button-toolbar a:focus { background-color: #ffffff; outline: none; color: #000000; } .button-toolbar a.active { background-color: #ffffff; color: #000000; } .dashboard { padding: 1rem; white-space: nowrap; } .dashboard section { width: 100%; box-sizing: border-box; padding: 1rem 0; display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; overflow-x: auto; } .dashboard nav { flex: 1 0 auto; min-width: max-content; } .dashboard h3 { margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #ADBCE0; padding-bottom: 5px; } .dashboard ul { list-style: none; padding-left: 0; margin: 0; } .dashboard li { margin-bottom: 12px; } .dashboard a { display: inline-block; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1; text-decoration: none; color: #000000; background-color: #ffffff; border: 1px solid #ADBCE0; border-radius: 1rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .dashboard a:hover, .dashboard a:focus { outline: none; color: #ffffff; background-color: #ADBCE0; } .dashboard hr { border: 0; border-top: 1px dashed #ADBCE0; margin: 1rem 0; width: 100%; } .radio-toolbar { margin: 10px; border: 1px solid #ffffff; padding: 3px; border-radius: 1rem; background-color: #e3e8f3; } .radio-toolbar input[type="radio"] { opacity: 0; position: fixed; width: 0; } .radio-toolbar label { display: inline-block; background-color: #E6EAEF; padding: 0.5rem 1rem; font-size: 1rem; border: 2px solid #C7D2E7; border-radius: 1rem; cursor: pointer; } .radio-toolbar label:hover { background-color: #ffffff; } .radio-toolbar input[type="radio"]:focus + label { background-color: #ffffff; } .radio-toolbar input[type="radio"]:checked + label { background-color: #ffffff; } @keyframes kf-pulse { from { box-shadow: 0 0 0 rgba(255, 64, 129, 0); } to { box-shadow: 0 0 15px 2px rgba(255, 64, 129, 0.8); } } @keyframes kf-beat { 0% { transform: scale(1.02); } 50% { transform: scale(1); } 100% { transform: scale(1.02); } } @keyframes kf-hop { 0%, 100% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(0, 5px, 0); } } @keyframes kf-shake { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 25% { transform: translate3d(-5px, 0, 0) scale(1.05); } 75% { transform: translate3d(5px, 0, 0) scale(1.05); } } @keyframes kf-movearound { 0%, 50%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 25% { transform: translate3d(5px, -5px, 0) scale(1.05); } 75% { transform: translate3d(-5px, 5px, 0) scale(1.05); } } @keyframes kf-rainbowGlow { 0% { box-shadow: 0 0 12px #ff0000; } 16% { box-shadow: 0 0 12px #ff7300; } 33% { box-shadow: 0 0 12px #fffb00; } 50% { box-shadow: 0 0 12px #48ff00; } 66% { box-shadow: 0 0 12px #00ffd5; } 83% { box-shadow: 0 0 12px #002bff; } 100% { box-shadow: 0 0 12px #ff0000; } } /****************************************************************************** 14. MEDIA QUERIES & RESPONSIVE LAYOUTS ******************************************************************************/ @media screen and (max-width: 1100px) { .neck { top: 125px; } } @media screen and (max-width: 900px) { .neck { top: 105px; } } @media screen and (max-width: 768px) { .container { grid-template-columns: repeat(3, 1fr); } .cursor-box { width: 120px; height: 120px; } .neck { top: 90px; } /* Prevent iOS Safari auto-zoom on input tap */ input, select, textarea, option { font-size: 16px !important; } } @media screen and (max-width: 600px) { .neck { top: 70px; } .event_list div.event section { display: none !important; } } @media screen and (max-width: 480px) { .container { grid-template-columns: repeat(2, 1fr); } .cursor-box { width: 140px; height: 140px; } .neck { top: 60px; } } @media screen and (max-width: 400px) { .neck { top: 47px; } } @media screen and (max-width: 330px) { .neck { top: 40px; } } /****************************************************************************** 15. PRINT ENGINE HARDENING ******************************************************************************/ @media print { *, *::before, *::after { background: transparent !important; color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } input[type="radio"], input[type="checkbox"] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; border: 2px solid #000000 !important; } input[type="radio"]:checked::before, input[type="checkbox"]:checked::before { background-color: #000000 !important; } .no-print, .adminmenu, .gobottom, .testbox { display: none !important; } } /****************************************************************************** 16. PAGE LAYOUTS (moved from controller style['head'] blocks) Selectors stay scoped to each page's
so other pages are unchanged. Shared form rules are listed once for every public form page that uses the same tameform pattern. ******************************************************************************/ /* --- Shared: public form pages (event, contact, salesearch, registration-options, thank-you tickets) ------------------------------- */ main.event-page fieldset, main.contact-page fieldset, main.salesearch-page fieldset, main.registration-options-page fieldset, main.thankyou-tickets-page fieldset { min-width: 0; max-width: 100%; } main.event-page select, main.event-page input, main.event-page textarea, main.contact-page select, main.contact-page input, main.contact-page textarea, main.salesearch-page select, main.salesearch-page input, main.salesearch-page textarea, main.registration-options-page select, main.registration-options-page input, main.registration-options-page textarea, main.thankyou-tickets-page select, main.thankyou-tickets-page input, main.thankyou-tickets-page textarea { max-width: 100%; font-size: 16px; /* stops iOS Safari zoom-on-focus when inputs were smaller than 16px */ } main.event-page article, main.contact-page article, main.salesearch-page article, main.registration-options-page article, main.thankyou-tickets-page article { overflow-wrap: break-word; } main.event-page .tameform button[type="submit"], main.contact-page .tameform button[type="submit"], main.salesearch-page .tameform button[type="submit"], main.registration-options-page .tameform button[type="submit"], main.thankyou-tickets-page .tameform button[type="submit"] { max-width: 100%; white-space: normal; line-height: 1.3; } @media screen and (max-width: 600px) { main.event-page .tameform button[type="submit"], main.contact-page .tameform button[type="submit"], main.salesearch-page .tameform button[type="submit"], main.registration-options-page .tameform button[type="submit"], main.thankyou-tickets-page .tameform button[type="submit"] { width: 100%; } } /* Cover video used on event / registration-options / thank-you tickets */ main.event-page header.cover video, main.registration-options-page header.cover video, main.thankyou-tickets-page header.cover video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; background-color: #e9eef5; } /* Discount callout: full width in the flow on phones (event + registration-options) */ @media screen and (max-width: 700px) { main.event-page .discount, main.registration-options-page .discount { float: none; width: auto; max-width: none; margin: 0 0 1rem 0; } } main.event-page .event-address, main.thankyou-tickets-page .event-address { flex-wrap: wrap; } /* Radio / checkbox rows ONLY (never every fieldset label — select controls wrap title+hint+