/* ============================================================= Gibson's Got To Go — main stylesheet Section 1: original landing-page design (ported verbatim) Section 2: WordPress block + Contact Form 7 integration layer ============================================================= */ :root{ --ink:#0E1621; --ink2:#080d14; --panel:#121d29; --panel2:#16212e; --gold:#F2B233; --gold-deep:#D9971C; --paper:#F4F1EA; --muted:#9aa6b6; --line:rgba(255,255,255,.12); --err:#F2785C; --display:'Anton','Arial Narrow Bold','Arial Narrow',Impact,sans-serif; --body:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif; --wrap:1120px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* atmosphere */ body::before{ /* spotlight */ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 80% at 78% -6%, rgba(242,178,51,.16), rgba(14,22,33,0) 46%), radial-gradient(90% 70% at 12% 8%, rgba(242,178,51,.07), rgba(14,22,33,0) 40%), linear-gradient(180deg,#0c141d 0%, var(--ink) 30%, var(--ink2) 100%); } body::after{ /* grain */ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; background-image:url("../images/grain.png"); background-size:90px 90px; mix-blend-mode:soft-light; } .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:2; } a{ color:var(--gold); text-decoration:none; } img{ max-width:100%; display:block; } /* header */ header{ position:sticky; top:0; z-index:30; backdrop-filter:blur(8px); background:linear-gradient(180deg, rgba(8,13,20,.86), rgba(8,13,20,.5) 70%, rgba(8,13,20,0)); border-bottom:1px solid var(--line); } .bar{ display:flex; align-items:center; justify-content:space-between; height:64px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); letter-spacing:.04em; font-size:20px; color:var(--paper); text-transform:uppercase; } .brand .dot{ width:13px; height:13px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px rgba(242,178,51,.7); } .links{ display:flex; align-items:center; gap:26px; } /* legacy plain-anchor support */ .links a.nl{ color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .links a.nl:hover{ color:var(--paper); } /* core Navigation block items styled like .nl */ .ggg-menu{ font-family:var(--body); } .ggg-menu .wp-block-navigation__container{ gap:26px; align-items:center; } .bar .ggg-menu .wp-block-navigation-item__content{ color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:0; } .bar .ggg-menu .wp-block-navigation-item__content:hover, .bar .ggg-menu .wp-block-navigation-item__content:focus, .bar .ggg-menu .current-menu-item .wp-block-navigation-item__content{ color:var(--paper); } .ggg-menu .wp-block-navigation-item__label{ overflow:visible; } .btn{ display:inline-block; font-family:var(--body); font-weight:800; font-size:15px; letter-spacing:.01em; white-space:nowrap; border-radius:6px; padding:12px 20px; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; } .btn-primary{ background:var(--gold); color:#11161D; box-shadow:0 8px 26px rgba(242,178,51,.22); } .btn-primary:hover{ background:var(--gold-deep); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); } .btn-sm{ padding:9px 16px; font-size:13.5px; } /* hero */ .hero{ position:relative; padding:72px 0 40px; } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; } .eyebrow{ color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; } h1{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(54px, 8.4vw, 112px); line-height:.92; letter-spacing:.005em; margin:14px 0 0; } h1 .go{ color:var(--gold); display:inline-block; } .deck{ font-size:clamp(17px,2.1vw,21px); color:#d7dde6; max-width:30em; margin:20px 0 26px; } .deck b, .deck strong{ color:var(--paper); font-weight:700; } .cta-row{ display:flex; gap:14px; flex-wrap:wrap; } .portrait-wrap{ position:relative; justify-self:end; } .portrait{ width:min(420px,42vw); filter:grayscale(1) contrast(1.04); -webkit-mask-image:linear-gradient(75deg, transparent 2%, #000 30%), linear-gradient(to bottom, #000 78%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(75deg, transparent 2%, #000 30%), linear-gradient(to bottom,#000 78%, transparent); mask-composite:intersect; } .portrait-tag{ position:absolute; left:-6px; bottom:14px; font-family:var(--body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); } /* section scaffolding */ section{ padding:54px 0; position:relative; } .sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:8px; } .sec-kicker{ font-family:var(--display); text-transform:uppercase; color:var(--paper); letter-spacing:.03em; font-size:clamp(26px,3.4vw,40px); line-height:1; } .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--gold),rgba(242,178,51,0)); align-self:center; } .sec-sub{ color:var(--muted); font-size:14px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; } /* record / issue rows */ .record{ border-top:1px solid var(--line); } .issue{ display:grid; grid-template-columns:minmax(220px,360px) 1fr; gap:38px; align-items:center; padding:42px 0; border-bottom:1px solid var(--line); } .issue:nth-child(odd) .num-col{ order:0; } .issue.flip{ grid-template-columns:1fr minmax(220px,360px); } .issue.flip .num-col{ order:2; text-align:right; } .num{ font-family:var(--display); color:var(--gold); font-weight:400; line-height:.86; white-space:nowrap; font-size:clamp(54px,6.3vw,92px); letter-spacing:-.01em; text-shadow:0 0 60px rgba(242,178,51,.22); } .num-kicker{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:600; } .issue h3{ font-family:var(--body); font-weight:800; font-size:clamp(22px,2.6vw,30px); line-height:1.15; margin:0 0 12px; color:var(--paper); } .issue p{ margin:0 0 14px; color:#cfd6df; max-width:40em; } .issue p b, .issue p strong{ color:var(--paper); font-weight:800; } .src{ font-size:12.5px; letter-spacing:.04em; color:var(--muted); font-weight:600; } .src a{ color:var(--gold); border-bottom:1px dashed rgba(242,178,51,.5); } /* vision */ .vision{ text-align:center; } .vision .inner{ max-width:760px; margin:0 auto; } .vision .imagine{ font-family:var(--display); text-transform:uppercase; color:var(--paper); font-size:clamp(40px,7vw,84px); line-height:.95; margin:0 0 18px; } .vision .imagine em{ color:var(--gold); font-style:normal; } .vision p{ font-size:clamp(17px,2vw,20px); color:#d7dde6; } /* pledge form */ .pledge{ border-top:1px solid var(--line); } .pledge-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:start; } .pledge-copy h2{ font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:clamp(40px,6vw,72px); line-height:.92; margin:0 0 16px; } .pledge-copy h2 em{ color:var(--gold); font-style:normal; } .pledge-copy p{ color:#cfd6df; max-width:34em; } .pledge-copy .reasons{ list-style:none; padding:0; margin:22px 0 0; } .pledge-copy .reasons li{ position:relative; padding-left:26px; margin:12px 0; color:#d7dde6; font-size:15.5px; } .pledge-copy .reasons li::before{ content:""; position:absolute; left:0; top:9px; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(242,178,51,.6); } .card{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:0 30px 70px rgba(0,0,0,.4); } .card .pledge-stmt{ font-size:14px; color:var(--muted); border-left:3px solid var(--gold); padding:2px 0 2px 14px; margin:0 0 22px; } .field{ margin-bottom:16px; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#c4ccd6; margin-bottom:7px; } label .opt{ color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; } input[type=text],input[type=email],input[type=tel]{ width:100%; background:#0c141d; border:1px solid var(--line); border-radius:8px; color:var(--paper); font-family:var(--body); font-size:16px; padding:13px 14px; transition:border-color .15s, box-shadow .15s; } input::placeholder{ color:#5d6b7a; } input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,178,51,.22); } input[aria-invalid=true]{ border-color:var(--err); box-shadow:0 0 0 3px rgba(242,120,92,.18); } .err{ display:block; color:var(--err); font-size:12.5px; margin-top:6px; min-height:1em; } .check{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 0; } .check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--gold); flex:0 0 auto; } .check label{ text-transform:none; letter-spacing:0; font-weight:500; font-size:13.5px; color:#c4ccd6; margin:0; } .submit-row{ margin-top:18px; } .card .btn-primary{ width:100%; font-size:16.5px; padding:15px; } .fineprint{ font-size:11.5px; color:var(--muted); margin-top:14px; line-height:1.5; } #formNote{ color:var(--err); font-size:13px; margin-top:10px; min-height:1em; } .success{ text-align:center; padding:18px 6px; } .success .check-ic{ width:54px; height:54px; border-radius:50%; background:rgba(242,178,51,.16); display:grid; place-items:center; margin:0 auto 16px; } .success h3{ font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:32px; margin:0 0 10px; color:var(--paper); } .success p{ color:#cfd6df; max-width:30em; margin:0 auto; } /* footer */ footer{ border-top:1px solid var(--line); padding:40px 0 56px; position:relative; z-index:2; } .disclosure{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 20px; color:#c4ccd6; font-size:13.5px; font-weight:600; letter-spacing:.01em; } .foot-cols{ display:flex; flex-wrap:wrap; gap:30px 60px; margin-top:26px; color:var(--muted); font-size:13px; } .foot-cols h4{ color:var(--paper); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; } .foot-cols a{ color:var(--muted); } .foot-cols a:hover{ color:var(--gold); } .foot-cols ul{ list-style:none; padding:0; margin:0; } .foot-cols li{ margin:6px 0; } .copyright{ margin-top:26px; color:#5f6b7a; font-size:12px; } /* reveal */ .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } .js .reveal.in{ opacity:1; transform:none; } .js .hero .reveal{ opacity:0; transform:translateY(20px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; } .js .hero .reveal:nth-child(1){ animation-delay:.05s; } .js .hero .reveal:nth-child(2){ animation-delay:.16s; } .js .hero .reveal:nth-child(3){ animation-delay:.28s; } .js .hero .reveal:nth-child(4){ animation-delay:.40s; } .js .portrait-wrap{ opacity:0; animation:fade 1.1s ease .25s forwards; } @keyframes rise{ to{opacity:1; transform:none;} } @keyframes fade{ to{opacity:1;} } @media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:20px; } .portrait-wrap{ justify-self:start; order:-1; } .portrait{ width:min(320px,70vw); } .portrait-tag{ display:none; } .issue,.issue.flip{ grid-template-columns:1fr; gap:14px; } .issue .num-col,.issue.flip .num-col{ order:0; text-align:left; } .pledge-grid{ grid-template-columns:1fr; gap:30px; } } @media (max-width:480px){ body{ font-size:16px; } .wrap{ padding:0 18px; } .brand{ font-size:16px; letter-spacing:.02em; } .row2{ grid-template-columns:1fr; } .hero{ padding:48px 0 24px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } .js .reveal{ opacity:1 !important; transform:none !important; } .js .portrait-wrap{ opacity:1 !important; } } /* ============================================================= Section 2 — WordPress block + Contact Form 7 integration ============================================================= */ /* Content sits above the fixed atmosphere layers. */ .wp-site-blocks{ position:relative; z-index:2; } /* Bulletproof the centred 1120px container against WordPress layout styles. */ .wp-site-blocks .wrap{ max-width:var(--wrap); margin-left:auto !important; margin-right:auto !important; } .wp-site-blocks main.site-main{ width:100%; max-width:none; } /* Reset native/WordPress styling so inline gold accents ("GO.", "better.") render as gold TEXT, not a yellow highlight box. */ .wp-block-heading mark, h1 mark, h2 mark, h1 .go, .go{ background-color:transparent; background:none; color:var(--gold); } /* Keep the original body type scale (beats theme.json fluid sizing via specificity). */ html body{ font-size:17px; } @media (max-width:480px){ html body{ font-size:16px; } } /* Neutralise core block defaults so the custom layout stays pixel-exact. */ .wp-block-group{ margin:0; } /* Kill any WordPress block-gap margins injected on the direct children of our custom flex/grid rows (these align via flex/grid, never via stacked margins). */ .links > *, .bar > *, .sec-head > *, .hero-grid > *, .pledge-grid > *, .foot-cols > *, .cta-row > *, .ggg-menu .wp-block-navigation__container > *, .wp-block-buttons > *{ margin-block-start:0; margin-block-end:0; } .editor-styles-wrapper .wp-block-group{ margin:0; } .hero h1.wp-block-heading, .pledge-copy h2.wp-block-heading, .vision .imagine.wp-block-heading, .issue h3.wp-block-heading{ margin-top:0; } h1.wp-block-heading{ margin:14px 0 0; } /* keep hero H1 rhythm */ .brand .brand-name{ margin:0; } /* paragraph used for brand text */ .sec-head p{ margin:0; } /* kicker / sub are paragraphs */ /* Full-bleed sections keep their inner .wrap centred (matches original). */ .wp-block-template-part.site-header, main.site-main, .wp-block-template-part.site-footer{ width:100%; } .alignfull{ max-width:none; } /* Header template part wrapper renders
; nav CTA is a buttons block. */ .links .wp-block-buttons{ margin:0; } .links .wp-block-button{ margin:0; } /* the core Navigation block is itself a