# CC Soccer D11 - Session Handoff **Date:** February 16, 2026 **Session:** Site Branding & Mobile Schedule Readability **Branch:** main --- ## Summary Brought CC Soccer brand identity to the Drupal 11 site and significantly improved the mobile schedule experience. The site now has branded header/footer with the CC Soccer logo, the Olivero color scheme uses CC Soccer dark red instead of default blue, and the schedule grid dynamically adapts to screen size for readability on phones. --- ## What Was Completed ### 1. CC Soccer Logo — Header & Footer **Logo files added:** `web/modules/custom/ccsoccer/images/` - `ccsoccer-logo.svg` — used for both header and footer (scalable) - `ccsoccer-logo.png` — PNG fallback **Header logo:** - Configured via `config/sync/system.theme.global.yml` — logo path points to SVG, `use_default: false` - Olivero's existing `block--system-branding-block.html.twig` wraps the logo in an `` link automatically **Footer logo:** - **NEW** `src/Plugin/Block/FooterLogoBlock.php` — custom block plugin renders logo as clickable home link - **NEW** `templates/ccsoccer-footer-logo.html.twig` — template for footer logo - **NEW** `config/sync/block.block.olivero_footer_logo.yml` — places block in `footer_bottom` region - Theme hook `ccsoccer_footer_logo` registered in `ccsoccer.module` `hook_theme()` - Logo is 120px desktop / 110px tablet / 100px mobile, centered with hover effect ### 2. Olivero Color Scheme — Blue → Dark Red **File:** `config/sync/olivero.settings.yml` - Changed `base_primary_color` from `#1b9ae4` (blue) to `#8B0000` (CC Soccer dark red) - This cascades through Olivero's HSL color system: buttons, links, focus states, header gradient ### 3. Site Branding CSS Overrides Three new CSS files, all attached globally via `ccsoccer_page_attachments()`: **`css/header-branding.css`** — Header visual identity - Dark red gradient on `.site-branding` area (uses `--color-primary-dark` → `--color-primary`) - White text for site name, slogan, links - Logo sizing at responsive breakpoints (40px → 50px → 60px → 70px) - Dev mode text adapted for dark background (`rgba(255,255,255,0.75)`) - Subtle brand-colored bottom border on desktop nav area **`css/desktop-nav.css`** — Navigation brand accents - Desktop (≥75rem): brand-colored hover underlines, focus rings, dropdown accents - Mobile: brand-colored submenu borders and toggle buttons - Does NOT change Olivero's layout/behavior — just colors **`css/footer-branding.css`** — Dark branded footer - Dark red gradient background matching header - White text and links, accent color on hover - "Powered by Drupal" block styled for dark background - Olivero's left border on wide screens matched to brand color **`css/footer-logo.css`** — Footer logo sizing - Centered layout, 120px/110px/100px responsive sizing - Hover: subtle scale + opacity, focus: white outline for accessibility - Divider line above logo area ### 4. Team & Player Name Readability **File:** `css/content-pages.css` - Team card headers: `0.95em` → `1.1em`, weight `bold` → `extrabold`, more padding - Player names in roster: `0.9em` → `1em`, added `font-weight: medium` ### 5. Mobile Schedule — Dynamic Column Layout **The core problem:** On phones, the schedule showed 3 cramped game columns with tiny unreadable text. **JS fix — `js/schedule-navigation.js` `getVisibleWeeks()`:** - Replaced hardcoded breakpoints with dynamic calculation - Computes available width after the 80px left column, divides by minimum column width (150px mobile, 110px desktop) - **Portrait phone (~375px):** shows 1-2 columns - **Landscape phone (~812px):** shows ~4 columns - Adapts automatically on orientation change via existing `resize` listener **CSS fix — `css/schedule-grid.css` mobile section:** - Switched from `table-layout: fixed` to `table-layout: auto; width: 100%` on mobile - Hidden columns (`display: none`) no longer affect width calculations - Game columns expand to fill available screen space - Left column: widened to 80px with bolder text - Team names: `0.75rem` → `1rem bold`, taller game cells (34px) **Date header rows:** - Changed from near-white (`gray-100`) to dark gray (`gray-800`) with white text - Now clearly distinguishes time slot sections from game cells - Bye/future week headers use `gray-600` ### 6. Libraries & Module Wiring **`ccsoccer.libraries.yml`** — 4 new library entries: - `header-branding`, `desktop-nav`, `footer-branding`, `footer-logo` **`ccsoccer.module`** — `ccsoccer_page_attachments()`: - Added 3 global library attachments: `header-branding`, `desktop-nav`, `footer-branding` - (footer-logo is attached by the block plugin itself) --- ## Files Summary ### New Files | File | Purpose | |------|---------| | `web/modules/custom/ccsoccer/images/ccsoccer-logo.svg` | CC Soccer logo (vector) | | `web/modules/custom/ccsoccer/images/ccsoccer-logo.png` | CC Soccer logo (raster fallback) | | `web/modules/custom/ccsoccer/src/Plugin/Block/FooterLogoBlock.php` | Footer logo block plugin | | `web/modules/custom/ccsoccer/templates/ccsoccer-footer-logo.html.twig` | Footer logo template | | `web/modules/custom/ccsoccer/css/header-branding.css` | Header dark red styling | | `web/modules/custom/ccsoccer/css/desktop-nav.css` | Nav brand accents | | `web/modules/custom/ccsoccer/css/footer-branding.css` | Footer dark styling | | `web/modules/custom/ccsoccer/css/footer-logo.css` | Footer logo sizing | | `config/sync/block.block.olivero_footer_logo.yml` | Block placement config | ### Modified Files | File | Changes | |------|---------| | `config/sync/olivero.settings.yml` | `base_primary_color`: `#1b9ae4` → `#8B0000` | | `config/sync/system.theme.global.yml` | Logo path set to SVG, `use_default: false` | | `web/modules/custom/ccsoccer/ccsoccer.module` | Added `ccsoccer_footer_logo` theme hook; 3 library attachments in `page_attachments` | | `web/modules/custom/ccsoccer/ccsoccer.libraries.yml` | 4 new library entries | | `web/modules/custom/ccsoccer/css/content-pages.css` | Larger team/player name fonts | | `web/modules/custom/ccsoccer/css/schedule-grid.css` | Mobile: auto table layout, dark gray headers, larger text | | `web/modules/custom/ccsoccer/js/schedule-navigation.js` | Dynamic column count based on screen width | --- ## For Other Developer After pulling: ``` ddev drush cim -y # Import config (logo, color, footer block) ddev drush cr # Clear cache for new CSS/JS/block plugin ``` --- ## TODOs (Carried Forward) ### 🔴 Duplicate Picture Fields on User Registration The Create New Account page shows two picture upload fields (`field_player_picture` and `user_picture`). All existing code reads from `user_picture` only. Decision needed on which to keep. ### 🔴 Photo Face Validation Implement validation to ensure uploaded player photos contain a human face. ### 🟡 Registration Form Custom Fields The `ccsoccer_form_user_register_form_alter()` hook still has a TODO for required fields: DOB (18+ validation), Gender, Phone, Picture. ### 🟡 Further UI Polish - Home page content/hero area styling - Content page typography and spacing - Form styling improvements - Consider whether top-level nav links (Teams, Schedule, etc.) should be pulled out of dropdowns on desktop --- ## Previous Session Archive Previous handoff archived to: `archive/SESSION_HANDOFF_2026_02_15_field_visibility.md` --- **Session Status:** ✅ **COMPLETE** — Ready to commit