/* Flow SEA Challenge – Child & Mobile Friendly Theme (Bootstrap 4 compatible) Palette (usage target): Light Blue (primary) ~50% Dark Blue (secondary) ~30% Yellow (accent) ~10% White (base) ~10% How to use: 1) Include AFTER Bootstrap 4 CSS and OwlCarousel CSS. 2) Keep your existing markup; this stylesheet styles existing IDs/classes. 3) For best results, add class="theme-flow" to . */ :root { /* Core palette */ --flow-blue-light: #4DB7FF; /* primary (light blue) */ --flow-blue: #0A66C2; /* secondary (dark blue) */ --flow-yellow: #FFD34D; /* accent */ --flow-white: #FFFFFF; /* base */ --flow-ink: #0B2239; /* text on light */ --flow-ink-soft: #24476A; /* secondary text */ --flow-sky-50: #E8F6FF; /* subtle bg */ --flow-sky-100: #D6F0FF; /* table stripes */ --focus-ring: #FFB703; /* visible focus */ /* Radii & shadows */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem;/* 24px */ --shadow-card: 0 8px 24px rgba(10,102,194,0.15); --shadow-elev: 0 10px 30px rgba(13, 74, 137, 0.18); } /* --------------------------- Base & Typography ---------------------------- */ .theme-flow, body#page-pennacool-seagames-flow-flow { color: var(--flow-ink); background: linear-gradient(180deg, var(--flow-sky-50), var(--flow-white)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .theme-flow, body#page-pennacool-seagames-flow-flow, .theme-flow p, .theme-flow li { font-family: "Nunito", "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.6; font-size: 1rem; /* 16px */ } /* Friendly headings */ .section-title, .Main h2, .Main h3, #xPrizesSection h3, #Scoreboard h3, .gallery-caption h4 { font-family: "Poppins", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-weight: 700; letter-spacing: 0.2px; /* color: var(--flow-blue); */ } .section-title::after, #Scoreboard h3::after, #xPrizesSection h3::after { content: ""; display: block; width: 64px; height: 6px; margin-top: .4rem; border-radius: 999px; background: linear-gradient(90deg, var(--flow-yellow), var(--flow-blue-light)); } /* Larger, tappable text for kids */ @media (max-width: 768px) { .section-title, .Main h2 { font-size: 1.5rem; } .Main h3, #Scoreboard h3 { font-size: 1.25rem; } .gallery-caption h4 { font-size: 1.1rem; } } /* --------------------------- Header / Hero video ---------------------------- */ /* #Poster video { width: 100%; height: auto; border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-elev); } */ .Overlay { /* soft gradient tint for legibility over video */ background: linear-gradient(180deg, rgba(10,102,194,0.25), rgba(255,255,255,0)); } /* --------------------------- Top Navigation (child-friendly) ---------------------------- */ .Menu { display: flex; gap: .5rem; flex-wrap: wrap; } .Menu .Item, .Menu button.Item, .Menu a.Item { background: var(--flow-blue-light); color: #00324F; padding: .6rem 1rem; border-radius: 999px; /* pill */ font-weight: 700; border: 3px solid rgba(255,255,255,.8); box-shadow: 0 4px 0 #2A90CC; /* playful inset */ cursor: pointer; transition: transform .06s ease, box-shadow .06s ease, background .2s ease; } .Menu .Item:focus, .Menu .Item:hover { outline: none; transform: translateY(-1px); box-shadow: 0 6px 0 #2A90CC, 0 6px 18px rgba(0,0,0,.08); } .Menu .Item[aria-selected="true"], .Menu .Item.active { background: var(--flow-blue); color: white; } /* Focus ring (keyboard) */ .Menu .Item:focus-visible { box-shadow: 0 0 0 4px var(--flow-white), 0 0 0 8px var(--focus-ring); } /* --------------------------- Buttons (Bootstrap overrides) ---------------------------- */ .btn-primary { background: linear-gradient(180deg, var(--flow-blue-light), #2EA6FC); border-color: #2EA6FC; color: #00324F; font-weight: 800; border-radius: 999px; padding: .65rem 1.25rem; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #2EA6FC, var(--flow-blue)); color: #fff; border-color: var(--flow-blue); } .btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(255,215,0,.35); } .btn-outline-primary { color: var(--flow-blue); border-color: var(--flow-blue); } .btn-outline-primary:hover { background: var(--flow-blue); color: #fff; } /* Accent button */ .btn-accent { background: var(--flow-yellow); color: #3A2D00; border-color: #E4B200; } .btn-accent:hover { background: #FFC61A; } /* Larger tap targets on mobile */ @media (max-width: 768px) { .btn { padding: .85rem 1.25rem; font-size: 1.05rem; } } /* --------------------------- Cards (Prizes, Activities) ---------------------------- */ .card, .img-card, .game-card { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .card-title { color: var(--flow-blue); font-weight: 800; } .card .card-body { padding: 1rem 1.25rem; } /* Fun sticker title style */ .card .card-title::before { content: ""; display:inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .5rem; background: var(--flow-yellow); } /* Hover lift */ .img-card:hover, .game-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,102,194,0.22); } /* --------------------------- Scoreboard (DataTables) ---------------------------- */ #Scoreboard .dataTables_wrapper .dataTables_filter input[type="search"] { border-radius: 999px; border: 2px solid var(--flow-blue-light); padding: .5rem 1rem; } #Scoreboard table.dataTable thead th { background: linear-gradient(180deg, var(--flow-blue), #094F96); color: #fff; border: 0; font-weight: 800; letter-spacing: .2px; } #Scoreboard table.dataTable tbody tr:nth-child(odd) { background: var(--flow-sky-100); } #Scoreboard table.dataTable tbody tr:hover { background: #CFEAFF; } #Scoreboard .paginate_button.page-item .page-link { color: var(--flow-blue); font-weight: 700; } #Scoreboard .page-item.active .page-link { background-color: var(--flow-yellow); border-color: var(--flow-yellow); color: #352700; } /* Winner badge style (apply .winner-row to tr in JS when needed) */ #Scoreboard tr.winner-row { outline: 3px solid var(--flow-yellow); box-shadow: inset 0 0 0 9999px rgba(255,211,77,0.1); } /* --------------------------- Tabs (Bootstrap nav-tabs) ---------------------------- */ .nav-tabs .nav-link { border: 0; color: var(--flow-blue); font-weight: 700; border-radius: 999px; padding: .5rem 1rem; margin-right: .4rem; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { background: var(--flow-blue-light); color: #00263F; } .nav-tabs { border-bottom: 0; } /* --------------------------- Owl Carousel – child friendly controls ---------------------------- */ .owl-carousel .carousel-arrow { font-size: 2rem; line-height: 1; } .owl-nav button.owl-prev, .owl-nav button.owl-next { background: var(--flow-blue); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-card); } .owl-nav button[disabled] { opacity: .4; } .owl-dots .owl-dot span { width: 12px; height: 12px; background: #BFDFFF; } .owl-dots .owl-dot.active span { background: var(--flow-yellow); transform: scale(1.1); } /* Larger controls on mobile */ @media (max-width: 768px) { .owl-nav button.owl-prev, .owl-nav button.owl-next { width: 52px; height: 52px; font-size: 1.5rem; } } /* --------------------------- Gallery grid fallback (if JS fails) ---------------------------- */ .gallery-wrapper .gallery-item { background: var(--flow-white); border-radius: var(--radius-lg); overflow: hidden; } .gallery-caption { background: linear-gradient(180deg, rgba(77,183,255,.15), rgba(255,211,77,.15)); padding: .75rem 1rem; } .gallery-caption h4 {margin: 0;/* color: var(--flow-ink-soft); */font-weight: 700;} /* --------------------------- Forms ---------------------------- */ form { text-align: center; } input[type="search"], .form-control { border-radius: var(--radius-lg); border: 2px solid #BFE4FF; padding: .65rem .9rem; } .form-control:focus { border-color: var(--flow-blue); box-shadow: 0 0 0 .2rem rgba(77,183,255,.35); } /* --------------------------- Utilities ---------------------------- */ .bg-flow-primary { background: var(--flow-blue-light) !important; } .bg-flow-secondary { background: var(--flow-blue) !important; } .bg-flow-accent { background: var(--flow-yellow) !important; } .text-flow-primary { color: var(--flow-blue) !important; } .text-flow-accent { color: #6B5200 !important; } .round-xl { border-radius: var(--radius-xl) !important; } .shadow-elev { box-shadow: var(--shadow-elev) !important; } /* Scroll prompt polish */ #ScrollPrompt .scroll { color: var(--flow-blue); font-weight: 700; } /* Back to top button */ #BackToTop img { width: 56px; height: 56px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.15)); } /* --------------------------- Accessibility: focus states & touch targets ---------------------------- */ :where(a, button, .btn, .Item, .page-link):focus-visible { outline: none; box-shadow: 0 0 0 4px var(--flow-white), 0 0 0 8px var(--focus-ring) !important; } /* Ensure minimum touch target */ :where(a, button, .btn, .Item, .page-link) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* --------------------------- Mobile layout adjustments ---------------------------- */ @media (max-width: 576px) { .Menu { justify-content: center; } #xPrizesSection h3 { margin-left: 16px !important; text-align: center !important; } .game-card .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; } .dataTables_scrollBody { max-height: 60vh !important; } } /* --------------------------- Footer ---------------------------- */ .true-footer, #page-footer { background: linear-gradient(180deg, var(--flow-blue), #083D76); color: #EAF6FF; } #page-footer a { color: #fff; text-decoration: underline; } /* --------------------------- Optional: playful badges (apply classes in markup) ---------------------------- */ .badge-flow { background: var(--flow-yellow); color: #3A2D00; font-weight: 800; border-radius: 999px; padding: .35rem .75rem; } .badge-flow-blue { background: var(--flow-blue-light); color: #00263F; } /* --------------------------- Data privacy hint (visually hide, not display:none) Apply class .visually-hidden to content meant for screen readers only ---------------------------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }