/* Theme Name: OV Toros FC 2 Theme URI: https://ovtorosfc.com Author: OV Toros FC Description: Full Site Editing (block) theme for OV Toros FC, built from the club's brand mockups. Colors, type, and spacing are defined in theme.json; this stylesheet carries the bespoke component styles (nav dropdowns, stat cards, tabs, staff rows, event gallery) that theme.json can't express. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ov-toros-fc-2 */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root{ --toros-red: #C8102E; --toros-red-dark: #9C0C22; --toros-black: #0B0B0D; --toros-dark: #14161C; --toros-white: #FFFFFF; --toros-surface: #F2F2F2; --toros-border: #DCDCDC; --toros-text: #1A1A1A; --toros-text-muted: #5C5C5C; --toros-on-dark: #FFFFFF; --toros-on-dark-muted: #C7C7CE; --font-heading: "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --page-outer-bg: #F6F6F6; /* the page background, outside the container — also set as the body background in theme.json */ --container-border: #AAAAAA; --page-max-width: 1400px; --page-gutter: 60px; } /* ========================================================================= Site container: the whole site (header through footer) lives inside this single box — capped at 1320px, centered, filled with white, with a 1px #aaaaaa rule down its left and right edges. The page background behind it (outside the container) is --page-outer-bg / #f6f6f6, set on via theme.json. Sections marked "align":"full" in the templates (header, announcement bar, hero, sponsor/affiliation strips, footer) stretch to reach THIS box's edges, not the browser's — theme.json's useRootPaddingAwareAlignments is what makes align:full cancel the root padding correctly here. Everything else (the actual page content) sits inset by that root padding, i.e. the 30px "breathing space" from the container's edge. ========================================================================= */ .wp-site-blocks{ box-sizing: border-box; max-width: var(--page-max-width); margin: 0 auto; background: var(--toros-white); border-left: 1px solid var(--container-border); border-right: 1px solid var(--container-border); } /* .wrap: the same inset treatment for the raw-HTML sections nested inside a full-bleed band (e.g. the sponsor-strip content) — they live outside WP's own block layout system, so they can't inherit the root padding automatically and need it applied directly. */ .wrap{ max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--page-gutter); } /* ========================================================================= Utility classes used by the Custom HTML sections (hero, join cards, event CTA, etc.) — keep in sync with preview/style.css ========================================================================= */ .eyebrow{ font-family: var(--font-heading); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: var(--toros-text-muted); margin: 0 0 var(--space-sm); } .btn{ display: inline-block; font-family: var(--font-heading); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; font-weight: 500; padding: 12px 26px; border: 1px solid var(--toros-black); background: var(--toros-black); color: var(--toros-white); text-decoration: none; cursor: pointer; transition: opacity .15s ease; } .btn:hover{ opacity: .82; color: var(--toros-white); } .btn--outline{ background: transparent; color: var(--toros-black); } .btn--outline:hover{ color: var(--toros-black); } .btn--red{ background: var(--toros-red); border-color: var(--toros-red); } .btn--block{ display: block; width: 100%; text-align: center; } /* ========================================================================= Header / navigation (styles the CORE navigation block to match the comps) ========================================================================= */ .site-header-wrap{ border-bottom: 1px solid var(--toros-border); } .site-header-wrap .wp-block-group{ padding-top: 18px; padding-bottom: 18px; } .site-logo-group{ flex-shrink: 0; } .site-logo-group img{ display:block; } .wp-block-navigation{ font-family: var(--font-heading); } .wp-block-navigation a.wp-block-navigation-item__content{ text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; } .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content{ text-transform: none; font-family: var(--font-body); font-size: .88rem; letter-spacing: normal; } .wp-block-navigation__submenu-container{ border: 1px solid var(--toros-border) !important; box-shadow: 0 12px 24px rgba(0,0,0,.08); } .my-toros-link a.wp-block-navigation-item__content{ text-decoration: underline; text-underline-offset: 3px; } .announce-bar-wrap{ text-align: center; } .announce-bar-wrap .wp-block-group{ padding: 10px var(--space-md); } .announce-text{ margin: 0 !important; font-family: var(--font-heading); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .announce-text a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================= Media placeholders — swap the surrounding element for a real Image/Cover block once photography is available; classes kept identical to the static style-guide preview so the two stay in sync. ========================================================================= */ .media-ph{ background: linear-gradient(135deg, #cfd2d6 0%, #9ea3a8 100%); position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; color: rgba(255,255,255,.85); font-family: var(--font-heading); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; } .media-ph::after{ content: attr(data-label); padding: 8px 10px; } .media-ph--red::before{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, transparent 40%, var(--toros-red) 130%); mix-blend-mode: multiply; opacity:.75; } .media-ph--dark{ background: linear-gradient(135deg, #2b2d33 0%, #101114 100%); } .hero-banner{ height: 380px; } .hero-banner .media-ph{ height: 100%; } /* ========================================================================= Sponsors / affiliations strip ========================================================================= */ .strip-bar{ background: var(--toros-dark); color: var(--toros-on-dark); } .strip-bar-inner{ padding: var(--space-md) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); } /* .is-split: true 50/50 columns via grid, so the gap is subtracted from each track instead of adding on top of two 50% flex-basis items (which used to overflow past 100% and force a wrap onto separate lines). Scoped to this modifier class only — the single-row affiliations bar on the About page keeps the plain flex behavior above. */ .strip-bar-inner.is-split{ display: grid; grid-template-columns: 1fr 1fr; } .strip-group h4{ color: var(--toros-on-dark-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-heading); margin: 0 0 10px; } .strip-group__logos{ display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; } .badge{ display:flex; align-items:center; justify-content:center; height: 42px; padding: 0 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--toros-on-dark); font-family: var(--font-heading); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .badge--circle{ width:42px; height:42px; border-radius:50%; padding:0; } .wordmark{ font-family: Georgia, serif; font-style: italic; color: var(--toros-on-dark); font-size: 1rem; } .strip-bar--label{ font-family: var(--font-heading); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; } /* ========================================================================= Homepage — news + sidebar ========================================================================= */ .news-layout{ display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); align-items: start; } .news-layout .col-heading{ text-transform: uppercase; font-family: var(--font-heading); font-size: .8rem; letter-spacing: .08em; border-bottom: 1px solid var(--toros-border); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); } .news-card .media-ph{ height: 280px; margin-bottom: var(--space-md); } .news-card time{ display:block; font-size:.8rem; color: var(--toros-text-muted); margin-bottom: var(--space-sm); font-weight:600; } .news-card a.learn-more{ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .sidebar-item{ margin-bottom: var(--space-md); } .sidebar-item .media-ph{ height: 90px; margin-bottom: var(--space-xs); } .sidebar-item p{ font-size: .85rem; color: var(--toros-text-muted); margin: 0; } /* ========================================================================= Homepage — join cards ========================================================================= */ .join-heading{ text-align: center; margin-bottom: var(--space-lg); font-weight: 400; } .card-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .join-card{ text-align: center; } .join-card .media-ph{ height: 190px; margin-bottom: var(--space-sm); } .join-card h3{ margin-bottom: var(--space-xs); font-family: var(--font-heading); font-weight: 500; text-transform: uppercase; letter-spacing:.03em; } .join-card p{ color: var(--toros-text-muted); font-size: .88rem; } /* ========================================================================= Footer ========================================================================= */ .footer-social.wp-block-social-links{ margin: 0; } .footer-social .wp-social-link a{ color: var(--toros-on-dark); } .footer-contact p{ margin: 0 0 6px; font-size: .88rem; color: var(--toros-on-dark-muted); } .footer-news label{ display:block; font-size:.8rem; margin-bottom:8px; } .footer-news form{ display:flex; gap:0; max-width: 320px; } .footer-news input{ flex:1; padding: 10px 12px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--toros-on-dark); font-size:.85rem; } .footer-news button{ font-family: var(--font-heading); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; padding: 10px 20px; border: 1px solid var(--toros-white); background: var(--toros-white); color: var(--toros-black); cursor: pointer; } /* ========================================================================= About page — hero + "By the Numbers" overlay ========================================================================= */ .about-hero{ position: relative; } .about-hero .media-ph{ height: 380px; } .stats-card{ max-width: 700px; margin: -110px auto 0; position: relative; z-index: 5; background: rgba(255,255,255,.94); border: 1px solid var(--toros-border); padding: var(--space-md) var(--space-lg) var(--space-lg); backdrop-filter: blur(2px); } .stats-card h4{ text-align:center; font-family: var(--font-heading); text-transform: uppercase; font-size:.8rem; letter-spacing:.08em; margin-bottom: var(--space-md); font-weight:500; } .stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-sm); } .stat-box{ background: var(--toros-surface); text-align:center; padding: 18px 8px; } .stat-box .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--toros-text-muted); margin-bottom:8px; } .stat-box .value{ font-size:2.1rem; font-family: var(--font-heading); font-weight:600; } /* ========================================================================= About page — tabs (pure CSS, no JS — radio-input technique) ========================================================================= */ .tabs{ margin-top: var(--space-lg); } .tabs input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; } .tabs__nav{ display:flex; gap: var(--space-lg); border-bottom: 1px solid var(--toros-border); margin-bottom: var(--space-lg); } .tabs__nav label{ padding: 0 0 var(--space-sm); cursor:pointer; font-size:.92rem; color: var(--toros-text-muted); border-bottom: 2px solid transparent; margin-bottom:-1px; } #tab-1:checked ~ .tabs__nav label[for="tab-1"], #tab-2:checked ~ .tabs__nav label[for="tab-2"], #tab-3:checked ~ .tabs__nav label[for="tab-3"]{ color: var(--toros-text); border-bottom-color: var(--toros-text); font-weight:600; } .tabs__panel{ display:none; } #tab-1:checked ~ .tabs__panels #panel-1, #tab-2:checked ~ .tabs__panels #panel-2, #tab-3:checked ~ .tabs__panels #panel-3{ display:block; } .leader-row{ display:grid; grid-template-columns: 260px 1fr auto; gap: var(--space-lg); border: 1px solid var(--toros-border); margin-bottom: var(--space-md); } .leader-row .media-ph{ height: 100%; min-height: 180px; } .leader-row__body{ padding: var(--space-md) 0; } .leader-row__body h3{ margin-bottom: 2px; font-family: var(--font-heading); font-weight:500; font-size:1.15rem; text-transform:none; } .leader-row__title{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom: var(--space-sm); } .leader-row__body ul{ margin:0 0 var(--space-sm); padding-left: 18px; font-size:.85rem; color: var(--toros-text-muted); } .leader-row__body li{ margin-bottom: 4px; } .leader-row__contact{ font-size:.85rem; } .leader-row__contact strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; } .leader-row__gallery{ display:grid; grid-template-columns: repeat(2,64px); grid-template-rows: repeat(2,64px); gap:8px; align-self:center; padding-right: var(--space-md); } .leader-row__gallery .media-ph{ height:64px; min-height:0; } .board-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .board-card{ border: 1px solid var(--toros-border); padding: var(--space-md); text-align:center; } .board-card .media-ph{ width:120px; height:120px; margin: 0 auto var(--space-sm); background: var(--toros-black); } .board-card .media-ph::after{ content:""; } .board-card h3{ font-size:.95rem; margin-bottom:2px; } .board-card .title{ font-size:.8rem; color: var(--toros-text-muted); } /* ========================================================================= Events page — gallery hero + logo badge + rules tabs ========================================================================= */ .event-gallery{ background: var(--toros-black); display:grid; grid-template-columns: repeat(6,1fr); gap:2px; padding:2px; } .event-gallery .media-ph{ aspect-ratio: 1/1; height:auto; opacity:.55; } .event-gallery .logo-slot{ grid-column: span 2; grid-row: span 2; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle, #3a2400 0%, var(--toros-black) 70%); } .logo-badge{ text-align:center; color: var(--toros-white); font-family: var(--font-heading); } .logo-badge .kicker{ color: #ff5a36; font-style: italic; font-size:1.1rem; text-transform:uppercase; } .logo-badge .bull{ width:70px; height:70px; margin:8px auto; border-radius:50%; background: radial-gradient(circle, var(--toros-red) 0%, #7a0000 100%); } .logo-badge .name{ font-size:1rem; letter-spacing:.08em; text-transform:uppercase; } .event-info{ text-align:center; max-width: 640px; margin: 0 auto; } .event-info .dates{ font-weight:700; margin-bottom: var(--space-md); } .event-tabs{ display:grid; grid-template-columns: 220px 1fr; gap: var(--space-xl); } .event-tabs__nav{ list-style:none; margin:0; padding:0; border-top:1px solid var(--toros-border); } .event-tabs__nav li{ border-bottom:1px solid var(--toros-border); } .event-tabs__nav a{ display:block; padding: 14px var(--space-sm); text-decoration:none; font-size:.9rem; background: var(--toros-surface); color: var(--toros-text); } .event-tabs__nav a.is-active{ background: var(--toros-white); font-weight:700; border-left: 3px solid var(--toros-red); padding-left: calc(var(--space-sm) - 3px); } .event-tabs__panel ul{ padding-left: 18px; } .event-tabs__panel li{ margin-bottom: 8px; font-size:.92rem; } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 900px){ .news-layout{ grid-template-columns: 1fr; } .card-grid{ grid-template-columns: 1fr; } .board-grid{ grid-template-columns: repeat(2,1fr); } .leader-row{ grid-template-columns: 1fr; } .leader-row__gallery{ display:none; } .stats-grid{ grid-template-columns: repeat(2,1fr); } .event-tabs{ grid-template-columns: 1fr; } }