/*
Theme Name: Blackhorse Oktoberfest
Theme URI: https://blackhorseoktoberfest.co.uk
Author: Blackhorse Oktoberfest
Description: Responsive event theme for Blackhorse Oktoberfest at 40FT Brewery with DesignMyNight integration.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: blackhorse-oktoberfest
License: GNU General Public License v2 or later
*/
:root { --cream:#efe5d1; --ink:#050505; --blue:#064bb8; --orange:#e48600; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"Arial Narrow", "Roboto Condensed", Impact, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:multiply; z-index:50; }
a { color:inherit; text-decoration:none; } .screen-reader-text { position:absolute; left:-9999px; } .screen-reader-text:focus { left:10px; top:10px; background:#fff; padding:10px; z-index:999; } .announcement { background:var(--orange); text-align:center; padding:9px 16px 8px; font-weight:900; letter-spacing:.07em; font-size:13px; }
.site-header { height:86px; padding:0 5vw; display:flex; align-items:center; gap:34px; border-bottom:2px solid rgba(0,0,0,.18); position:sticky; top:0; background:rgba(239,229,209,.96); z-index:40; }
.brand { font-size:42px; font-weight:900; line-height:.8; margin-right:auto; letter-spacing:-.08em; } .brand span { font-size:22px; letter-spacing:-.05em; } .brand small { font-size:13px; letter-spacing:.04em; margin-left:5px; } .custom-logo-link { display:block; } .custom-logo { display:block; max-width:170px; max-height:62px; width:auto; height:auto; }
nav { display:flex; gap:25px; text-transform:uppercase; font-size:13px; font-weight:900; letter-spacing:.04em; } nav a:hover { color:var(--orange); }
.button { display:inline-block; background:var(--orange); padding:18px 28px 15px; font-size:23px; font-weight:900; letter-spacing:.03em; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); transition:transform .15s, box-shadow .15s; } .button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); } .button-small { font-size:15px; padding:13px 18px 11px; box-shadow:3px 3px 0 var(--ink); }
.hero { min-height:690px; padding:64px 5vw 55px; position:relative; overflow:hidden; display:flex; } .hero-copy { width:61%; position:relative; z-index:5; }
.eyebrow { color:var(--orange); margin:0 0 12px; font-weight:900; font-size:31px; letter-spacing:.025em; } h1 { font-size:clamp(76px,10vw,150px); line-height:.78; letter-spacing:-.045em; margin:0; font-weight:1000; transform:scaleX(.83); transform-origin:left; width:120%; }
.hero-intro { max-width:620px; font-family:Arial, sans-serif; font-weight:700; font-size:22px; line-height:1.38; margin:34px 0 28px; } .hero-actions { display:flex; align-items:center; gap:30px; font-family:Arial, sans-serif; font-size:13px; line-height:1.55; letter-spacing:.03em; }
.tables { position:absolute; inset:0 0 0 51%; transform:rotate(12deg); } .table { position:absolute; background:var(--blue); height:145px; width:470px; box-shadow:0 -30px 0 -23px var(--blue), 0 30px 0 -23px var(--blue); } .table-a { right:-70px; top:35px; } .table-b { right:-205px; top:320px; width:520px; } .table-c { left:5px; bottom:-75px; width:400px; }
.person { position:absolute; left:30%; top:-42px; width:30px; height:30px; background:#050505; border-radius:50%; border:3px solid var(--cream); } .person i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--orange); right:-5px; top:15px; } .person b { position:absolute; width:26px; height:9px; background:#050505; left:0; top:27px; } .person.p2 { left:72%; top:auto; bottom:-42px; } .person.p3 { left:46%; }
.feature-ticker { min-height:78px; padding:20px 4vw 17px; background:var(--blue); color:var(--cream); display:flex; align-items:center; justify-content:center; gap:22px; font-weight:900; font-size:clamp(16px,2vw,28px); letter-spacing:.015em; } .feature-ticker i { color:var(--orange); font-style:normal; }
.section { padding:100px 6vw; } .section-kicker { color:var(--blue); font-size:14px; font-family:Arial, sans-serif; font-weight:900; letter-spacing:.12em; margin:0 0 18px; } .orange { color:var(--orange); }
h2 { font-size:clamp(55px,7vw,110px); line-height:.83; letter-spacing:-.04em; margin:0; font-weight:1000; } h2 span { color:var(--blue); }
.intro-grid, .blue-section, .groups, .venue { display:grid; grid-template-columns:1.1fr .9fr; gap:7vw; align-items:start; } .body-copy { font-family:Arial, sans-serif; font-size:18px; line-height:1.65; max-width:580px; } .body-copy p:first-child { margin-top:0; } .text-link, .group-link { display:inline-block; font-weight:900; margin-top:15px; border-bottom:3px solid var(--orange); padding-bottom:4px; }
.experience-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); } .experience-grid article { padding:42px 32px 48px; border-right:2px solid var(--ink); min-height:300px; } .experience-grid article:last-child { border:0; } .experience-grid span { color:var(--orange); font-weight:900; } .experience-grid h3 { font-size:31px; line-height:.95; margin:45px 0 18px; } .experience-grid p { font:15px/1.55 Arial,sans-serif; }
.blue-section { background:var(--blue); color:var(--cream); min-height:570px; align-items:center; position:relative; overflow:hidden; } .blue-section::after { content:"40FT"; position:absolute; right:-2vw; bottom:-4vw; color:rgba(239,229,209,.08); font-size:23vw; line-height:.7; font-weight:1000; } .blue-section h2 { position:relative; z-index:1; } .cream-copy { color:var(--cream); position:relative; z-index:2; }
.programme h2, .faqs h2 { margin-bottom:55px; } .timeline { border-top:3px solid var(--ink); } .timeline > div { display:grid; grid-template-columns:190px 1fr; gap:20px; border-bottom:2px solid var(--ink); padding:26px 0 23px; align-items:start; } .timeline b { color:var(--orange); font-size:30px; } .timeline span { font:17px/1.5 Arial,sans-serif; } .timeline span strong { display:block; font-family:"Arial Narrow",Impact,sans-serif; font-size:27px; line-height:1; margin-bottom:7px; } .small-note { font:12px/1.5 Arial,sans-serif; letter-spacing:.02em; opacity:.7; }
.mass-section { display:grid; grid-template-columns:.55fr .45fr; min-height:650px; background:var(--orange); overflow:hidden; } .mass-word { writing-mode:vertical-rl; transform:rotate(180deg); font-size:clamp(75px,10vw,150px); line-height:.76; font-weight:1000; padding:45px 3vw; letter-spacing:-.04em; } .mass-copy { background:var(--cream); padding:90px 6vw; } .mass-copy h2 { font-size:clamp(48px,5.8vw,88px); margin-bottom:30px; } .mass-copy > p:not(.section-kicker):not(.small-note) { font:18px/1.6 Arial,sans-serif; }
.tickets { display:grid; grid-template-columns:.42fr .58fr; gap:6vw; } .tickets-heading { position:sticky; top:125px; align-self:start; } .tickets-heading h2 { font-size:clamp(55px,6vw,92px); } .tickets-heading > p:last-child { font:17px/1.6 Arial,sans-serif; max-width:450px; }
.widget-shell { background:#fff; border:3px solid var(--ink); box-shadow:11px 11px 0 var(--blue); font-family:Arial,sans-serif; } .widget-top { background:var(--ink); color:#fff; display:flex; justify-content:space-between; padding:20px 22px; gap:20px; } .widget-top span { font-size:11px; opacity:.7; } .widget-date { padding:18px 22px; background:#f1ede4; font-weight:800; font-size:13px; border-bottom:1px solid #bbb; } .ticket-row { display:grid; grid-template-columns:1fr auto 85px; gap:18px; align-items:center; padding:22px; border-bottom:1px solid #ccc; } .ticket-row div { display:flex; flex-direction:column; gap:5px; } .ticket-row span { font-size:12px; color:#555; } .ticket-row > strong { font-size:20px; } .ticket-row > a { border:0; background:var(--orange); padding:12px 10px; font-weight:900; cursor:pointer; text-align:center; } .widget-footer { padding:13px 22px; color:#777; font-size:10px; text-align:center; } .widget-fallback { font:12px Arial,sans-serif; margin:16px 0 0; } .widget-fallback a { font-weight:900; } .ticket-area { min-width:0; } .dmn-widget { width:100%; overflow:hidden; }
.groups { background:var(--ink); color:var(--cream); align-items:center; } .cream-button { background:var(--cream); color:var(--ink); margin:18px 24px 15px 0; } .group-link { border-color:var(--orange); }
.venue { align-items:center; } .venue-card { border:3px solid var(--ink); padding:42px; box-shadow:10px 10px 0 var(--orange); font:16px/1.6 Arial,sans-serif; } .venue-card h3 { font:900 32px/1 "Arial Narrow",Impact,sans-serif; margin:0 0 20px; } dl { margin:30px 0; border-top:1px solid var(--ink); } dl div { display:grid; grid-template-columns:150px 1fr; padding:13px 0; border-bottom:1px solid var(--ink); } dt { font-weight:900; font-size:12px; } dd { margin:0; }
.faqs { background:#e5d7bd; } .faq-list { max-width:1000px; margin-left:auto; } details { border-top:2px solid var(--ink); } details:last-child { border-bottom:2px solid var(--ink); } summary { padding:24px 40px 21px 0; font-size:23px; font-weight:900; cursor:pointer; list-style:none; position:relative; } summary::after { content:"+"; position:absolute; right:3px; top:17px; font-size:35px; color:var(--orange); } details[open] summary::after { content:"−"; } details p { font:16px/1.6 Arial,sans-serif; max-width:780px; margin:0 0 25px; }
.final-cta { text-align:center; padding:110px 20px 120px; position:relative; overflow:hidden; } .final-cta h2 { font-size:clamp(90px,14vw,220px); } .final-cta > p:not(.eyebrow) { font:18px Arial,sans-serif; margin:25px 0 30px; }
footer { background:var(--blue); color:var(--cream); padding:55px 6vw; display:grid; grid-template-columns:1.2fr 1fr .5fr; gap:40px; font:12px/1.65 Arial,sans-serif; } .footer-brand { font:900 42px/.85 "Arial Narrow",Impact,sans-serif; } footer div:last-child { display:flex; flex-direction:column; font-weight:800; }
.mobile-buy { display:none; } .default-content { min-height:60vh; } .default-content article > h1 { font-size:clamp(55px,8vw,120px); line-height:.85; }
@media (max-width:900px) { nav { display:none; } .site-header { height:72px; } .hero { min-height:710px; padding-top:44px; } .hero-copy { width:100%; } h1 { font-size:18vw; width:120%; } .eyebrow { font-size:21px; } .hero-intro { max-width:85%; font-size:18px; } .tables { inset:56% -20% -15% 22%; opacity:.98; } .table { height:105px; width:350px; } .feature-ticker { flex-wrap:wrap; gap:8px 13px; text-align:center; } }
@media (max-width:900px) { .intro-grid,.blue-section,.groups,.venue,.tickets { grid-template-columns:1fr; } .experience-grid { grid-template-columns:1fr 1fr; } .experience-grid article:nth-child(2) { border-right:0; } .experience-grid article:nth-child(-n+2) { border-bottom:2px solid var(--ink); } .mass-section { grid-template-columns:150px 1fr; } .tickets-heading { position:static; } .widget-fallback { grid-column:1; } }
@media (max-width:560px) { .announcement { font-size:10px; } .brand small { display:none; } .site-header .button-small { display:none; } .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; } .hero { min-height:720px; } .section { padding:72px 24px; } .experience-grid { grid-template-columns:1fr; } .experience-grid article { border-right:0; border-bottom:2px solid var(--ink); min-height:0; padding:32px 24px; } .experience-grid article h3 { margin-top:25px; } .mass-section { grid-template-columns:1fr; } .mass-word { writing-mode:horizontal-tb; transform:none; font-size:16vw; padding:35px 24px 27px; } .mass-copy { padding:65px 24px; } .timeline > div { grid-template-columns:105px 1fr; } .timeline span { font-size:14px; } .ticket-row { grid-template-columns:1fr auto; } .ticket-row > a { grid-column:1 / -1; } .groups { gap:40px; } .venue-card { padding:28px 22px; } dl div { grid-template-columns:115px 1fr; } footer { grid-template-columns:1fr; padding-bottom:100px; } .mobile-buy { display:block; position:fixed; bottom:0; left:0; right:0; z-index:45; background:var(--orange); border-top:3px solid var(--ink); text-align:center; padding:16px 10px 14px; font-weight:900; } }