/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1300px) { .container { max-width: 1170px; } } @media (min-width: 1600px) { .container { max-width: 1470px; } } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } /* ========================================================= VARIABLES ========================================================= */ :root { --blue: #0066ff; --blue-dark: #0047b3; --blue-deep: #073b8f; --blue-bright: #00a8ff; --blue-light: #eaf5ff; --blue-pale: #f4faff; --green: #12834a; --red: #d73535; --yellow: #d79500; --dark: #10202b; --grey: #60727d; --grey-light: #eef3f6; --light: #f5f9fc; --border: #d9e5ec; --white: #ffffff; } /* ========================================================= RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { margin: 0; padding: 0; width: 100%; min-height: 100%; scroll-behavior: smooth; /* IMPORTANT: The browser/page owns scrolling. Do NOT use overflow: hidden here. */ overflow-x: hidden; overflow-y: auto; } body { margin: 0; padding: 0; width: 100%; min-height: 100%; font-family: "Manrope", sans-serif; background: var(--light); color: var(--dark); /* IMPORTANT: Only the browser should scroll. */ overflow-x: hidden; overflow-y: auto; /* Prevent themes from turning body into a fixed-height scrolling container. */ height: auto; max-height: none; } button, input, select { font: inherit; } button { cursor: pointer; } /* ========================================================= WORDPRESS OUTER WRAPPER ========================================================= */ /* Your HTML is:

EVERYTHING

#wrap must NOT become a second scrolling container. Do not put: overflow: auto; overflow-y: scroll; overflow-y: auto; height: 100vh; on this element. */ #wrap { position: relative; width: 100%; /* Let the content determine the height. */ height: auto; min-height: 100vh; max-height: none; /* CRITICAL: Do not create a second scrollbar. */ overflow: visible !important; /* Keep your existing theme transition. */ right: 0; flex: 1 0 0; -ms-flex: 1 0 0; transition: right 0.5s; -webkit-transition: right 0.5s; -moz-transition: right 0.5s; -o-transition: right 0.5s; background-color: var(--white); } /* ========================================================= LAYOUT ========================================================= */ .container { width: 100%; max-width: 1050px; margin: 0 auto; padding: 0 20px; } /* Screens are normal document content. NO min-height. NO height. NO overflow. */ .screen { display: none; width: 100%; padding: 55px 0 80px; /* Absolutely no independent scrolling. */ height: auto; min-height: 0; max-height: none; overflow: visible; } .screen.active { display: block; } /* ========================================================= HEADER ========================================================= */ .site-header { position: relative; z-index: 20; width: 100%; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--border); } .header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; } .logo { font-size: 22px; font-weight: 900; color: var(--dark); text-decoration: none; letter-spacing: -0.6px; } .logo span { color: var(--blue); } .header-tag { font-size: 13px; color: var(--grey); } /* ========================================================= TYPOGRAPHY ========================================================= */ h1 { font-size: 42px; line-height: 1.05; margin: 0 0 15px; letter-spacing: -1.7px; } h2 { font-size: 27px; margin: 0 0 10px; letter-spacing: -0.6px; } h3 { font-size: 19px; margin: 0 0 10px; } p { line-height: 1.6; color: var(--grey); } .small { font-size: 13px; color: var(--grey); } .intro { max-width: 650px; margin-bottom: 30px; } /* ========================================================= CARDS ========================================================= */ .card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 25px; margin-bottom: 20px; } /* ========================================================= HOME ========================================================= */ /* IMPORTANT: The home section itself clips ONLY its decorative pseudo-elements. It does NOT create a scrollbar. Its height is determined entirely by its content. */ .home { position: relative; width: 100%; height: auto; min-height: 100vh; max-height: none; /* This clips the circles without allowing them to create page width/height. */ overflow: hidden; } /* ========================================================= HOME DECORATIVE CIRCLES ========================================================= */ /* LEFT CIRCLE It is deliberately pushed outside the left edge. Because .home clips overflow, it cannot create horizontal scrolling. */ .home::before { content: ""; position: absolute; width: 520px; height: 520px; left: -250px; top: 90px; background: var(--blue); border-radius: 50%; opacity: 0.055; pointer-events: none; z-index: 0; } /* RIGHT/BOTTOM CIRCLE IMPORTANT: The circle is NOT allowed to determine the height of the page. It is simply painted inside the home section and clipped by .home. This prevents the large empty area at the bottom. */ .home::after { content: ""; position: absolute; width: 560px; height: 560px; right: -280px; /* Position it relative to the actual home content. It can extend outside the section, but overflow is clipped by .home. */ bottom: -300px; background: var(--blue-bright); border-radius: 50%; opacity: 0.12; pointer-events: none; z-index: 0; } /* ========================================================= HOME CONTENT ========================================================= */ .home-box { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; } .home-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 30px; background: var(--blue-light); color: var(--blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 22px; } .home-eyebrow::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--blue); } .home h1 { font-size: 58px; max-width: 760px; margin-left: auto; margin-right: auto; } .home h1 .blue { color: var(--blue); } .home-description { max-width: 600px; margin: 0 auto 32px; font-size: 18px; } .home-actions { display: flex; justify-content: center; margin-bottom: 42px; } .home-actions .btn { min-width: 220px; } .home-points { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 0 auto; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 60, 120, 0.06); } .home-point { padding: 20px 15px; border-right: 1px solid var(--border); } .home-point:last-child { border-right: 0; } .home-point strong { display: block; font-size: 14px; margin-bottom: 4px; } .home-point span { font-size: 12px; color: var(--grey); } /* ========================================================= BUTTONS ========================================================= */ .btn { border: 0; border-radius: 9px; padding: 13px 20px; font-weight: 750; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--blue); color: white; box-shadow: 0 5px 14px rgba(0, 102, 255, 0.18); } .btn-primary:hover { background: var(--blue-dark); box-shadow: 0 7px 18px rgba(0, 102, 255, 0.25); } .btn-secondary { background: #edf3f7; color: var(--dark); } .btn-success { background: var(--green); color: white; } .btn-danger { background: #fff0f0; color: var(--red); } .btn-full { width: 100%; } .btn-large { padding: 16px 28px; font-size: 16px; } .button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } /* ========================================================= FORMS ========================================================= */ .form-group { margin-bottom: 24px; } label { display: block; font-weight: 700; margin-bottom: 8px; } input[type=text], input[type=number], select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 13px; background: white; color: var(--dark); } input:focus, select:focus { outline: 3px solid rgba(0, 102, 255, 0.12); border-color: var(--blue); } /* ========================================================= RADIO ========================================================= */ .radio-grid { display: flex; gap: 10px; flex-wrap: wrap; } .radio-option { position: relative; } .radio-option input { position: absolute; opacity: 0; } .radio-option span { display: block; border: 1px solid var(--border); padding: 11px 16px; border-radius: 8px; cursor: pointer; background: white; } .radio-option input:checked + span { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); font-weight: 800; } /* ========================================================= SURFERS ========================================================= */ .surfer-input-row { margin-top: 15px; display: flex; gap: 10px; } .surfer-input-row input { flex: 1; } .surfer-list { margin-top: 20px; } .surfer-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding: 12px 0; } .surfer-item:last-child { border-bottom: 0; } .remove-surfer { border: 0; background: none; color: var(--red); font-size: 13px; } /* ========================================================= SETUP SUMMARY ========================================================= */ .setup-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; } .summary-item { background: var(--blue-pale); border: 1px solid #dceeff; border-radius: 10px; padding: 15px; } .summary-item strong { display: block; color: var(--blue-dark); font-size: 18px; } .summary-item span { font-size: 12px; color: var(--grey); } /* ========================================================= DRAW ========================================================= */ .draw-title { margin-bottom: 25px; } .round-section { margin-bottom: 35px; } .round-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .round-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--blue); font-weight: 850; } .heat-card { background: white; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .heat-header { background: #f5f9fc; padding: 11px 15px; font-size: 13px; color: var(--grey); font-weight: 700; } .heat-body { padding: 15px; } .heat-surfer { display: flex; justify-content: space-between; padding: 7px 0; } .heat-winner { color: var(--green); font-weight: 800; } .heat-action { margin-top: 12px; } /* ========================================================= LIVE HEADER ========================================================= */ .live-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; } .heat-label { font-size: 13px; text-transform: uppercase; color: var(--blue); font-weight: 850; margin-bottom: 5px; } .timer { font-size: 44px; font-weight: 850; letter-spacing: -2px; white-space: nowrap; } .timer.warning { color: var(--red); } .timer.paused { color: var(--yellow); } .live-controls { display: flex; gap: 8px; flex-wrap: wrap; } /* ========================================================= PRIORITY ========================================================= */ .priority-card { border: 2px solid var(--border); transition: border-color 0.15s, background 0.15s; } .priority-card.has-priority { border-color: var(--blue); background: #f0f7ff; } .priority-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .priority-status { font-size: 12px; color: var(--grey); } .priority-surfer-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; } .priority-surfer { border: 1px solid var(--border); background: white; border-radius: 9px; padding: 12px; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s; } .priority-surfer:hover { border-color: var(--blue); transform: translateY(-1px); } .priority-surfer.active { border: 2px solid var(--blue); background: var(--blue); color: white; font-weight: 800; box-shadow: 0 5px 15px rgba(0, 102, 255, 0.18); } .priority-surfer.active .priority-number { color: rgba(255, 255, 255, 0.75); } .priority-number { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey); margin-bottom: 3px; } /* ========================================================= SCORE TABLE ========================================================= */ .score-table { width: 100%; border-collapse: collapse; } .score-table th { text-align: left; font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 8px; border-bottom: 1px solid var(--border); } .score-table td { padding: 13px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .surfer-name { font-weight: 800; } .total-score { font-weight: 900; font-size: 20px; color: var(--blue-dark); } .wave-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .wave-score { background: var(--blue-light); color: var(--blue-dark); border-radius: 6px; padding: 4px 7px; font-size: 12px; } .wave-score.interference { background: #fff3f3; color: var(--red); text-decoration: line-through; } .wave-int-badge { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 4px; background: #fff0f0; color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: 0.3px; } .int-score { color: var(--red); font-weight: 700; font-size: 12px; margin-top: 7px; } /* ========================================================= UNDO BUTTON ========================================================= */ .score-actions { margin-top: 8px; display: flex; gap: 6px; } .undo-wave-btn { border: 1px solid #dce5ea; background: #f4f7f9; color: var(--dark); border-radius: 7px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .undo-wave-btn:hover { background: #eaf0f4; border-color: #cbd9e1; color: var(--blue-dark); } /* ========================================================= WAVE ENTRY ========================================================= */ .wave-entry { background: #f7fafc; border-radius: 10px; padding: 14px; margin-bottom: 10px; } .wave-entry-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .wave-input { width: 100px !important; } .wave-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ========================================================= INTERFERENCE CONTROL ========================================================= */ .interference-control { position: relative; } .int-trigger { border: 1px solid #dce5ea; background: white; color: var(--grey); border-radius: 7px; padding: 8px 10px; font-size: 11px; font-weight: 750; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .int-trigger:hover { border-color: #c7d6df; color: var(--dark); } .int-trigger.active { background: #fff5f5; border-color: #e8bcbc; color: var(--red); } .interference-panel { display: none; margin-top: 10px; padding: 11px; border: 1px solid #eadede; background: #fffafa; border-radius: 9px; } .interference-panel.open { display: block; } .interference-panel-title { font-size: 11px; font-weight: 800; color: var(--dark); margin-bottom: 8px; } .interference-options { display: flex; gap: 7px; flex-wrap: wrap; } .int-option { position: relative; } .int-option input { position: absolute; opacity: 0; pointer-events: none; } .int-option span { display: block; padding: 7px 9px; border: 1px solid #e4dada; border-radius: 7px; background: white; color: var(--grey); font-size: 11px; font-weight: 700; cursor: pointer; } .int-option input:checked + span { border-color: var(--red); background: #fff0f0; color: var(--red); } .int-help { margin: 7px 0 0; font-size: 10px; line-height: 1.4; color: var(--grey); } .clear-int-btn { border: 0; background: none; padding: 4px 0 0; color: var(--grey); font-size: 10px; text-decoration: underline; cursor: pointer; } /* ========================================================= INTERFERENCE NOTICE ========================================================= */ .interference-notice { margin-top: 15px; padding: 12px 14px; background: #fff7f7; border: 1px solid #f1d1d1; border-radius: 8px; font-size: 13px; color: var(--red); } /* ========================================================= FINAL ========================================================= */ .winner-box { text-align: center; padding: 50px 20px; border-top: 4px solid var(--blue); } .winner-kicker { color: var(--blue); text-transform: uppercase; letter-spacing: 1px; font-weight: 850; font-size: 13px; } .winner-name { font-size: 46px; font-weight: 900; margin: 10px 0; letter-spacing: -1.5px; } .winner-score { font-size: 22px; color: var(--grey); } .results-list { margin-top: 25px; } .result-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); } .result-position { font-weight: 800; width: 40px; color: var(--blue); } .result-name { flex: 1; } .result-total { font-weight: 800; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .container { padding: 0 14px; } /* Still no viewport height. The document grows naturally. */ .screen { padding: 30px 0 55px; min-height: 0; height: auto; } .home { padding: 45px 0 55px; min-height: 0; height: auto; /* Keep decorative circles clipped. */ overflow: hidden; } /* Make the decorative circles slightly less intrusive on small screens. */ .home::before { width: 380px; height: 380px; left: -230px; top: 80px; } .home::after { width: 400px; height: 400px; right: -240px; bottom: -220px; } .home h1 { font-size: 40px; letter-spacing: -1.2px; } .home-description { font-size: 16px; } .home-actions .btn { width: 100%; } .home-points { grid-template-columns: 1fr; } .home-point { border-right: 0; border-bottom: 1px solid var(--border); } .home-point:last-child { border-bottom: 0; } h1 { font-size: 36px; } h2 { font-size: 24px; } .card { padding: 18px; border-radius: 11px; } .header-tag { display: none; } .setup-summary { grid-template-columns: 1fr; } .live-header { align-items: flex-start; flex-direction: column; } .timer { font-size: 38px; } .live-controls { width: 100%; } .live-controls .btn { flex: 1; } .priority-surfer-list { grid-template-columns: 1fr; } .score-table { font-size: 13px; } .score-table th:nth-child(3), .score-table td:nth-child(3) { display: none; } .winner-name { font-size: 36px; } .button-row .btn { width: 100%; } .wave-entry-top { align-items: flex-start; flex-direction: column; } .wave-controls { width: 100%; } .wave-controls .wave-input { flex: 1; width: auto !important; } .interference-control { width: auto; } } /* ========================================================= PRINT ========================================================= */ @media print { .site-header, .button-row, .no-print { display: none !important; } html, body { overflow: visible !important; background: white; } #wrap { min-height: 0; height: auto; overflow: visible !important; } body { background: white; } .screen { padding: 0; min-height: 0; height: auto; } } /* ========================================================= UTILITY ========================================================= */ .hidden { display: none !important; }