/* ============================================================ Corvette-C3.com site theme - "Modern Americana" (2026) One central place for the site's colours and shared chrome. Pages opt in with and by linking this file AFTER style.css. Tokens only here - never hardcode the palette in page-level styles again. ============================================================ */ :root{ --page:#F7F5EF; /* warm off-white page background */ --ink:#242838; /* body text */ --sub:#5b6070; /* muted / secondary text */ --link:#1F49C9; /* hyperlink blue */ --h1:#14213A; /* page titles */ --brand:#C8102E; /* Corvette red */ --brand-2:#14213A; /* deep navy (headings, table heads) */ --accent:#F26419; /* orange accent (hovers, rules) */ --line:#DDE3F0; /* hairline borders */ --topbar-bg:#000; /* black logo banner */ --tile-bg:#FFFFFF; --tile-ink:#14213A; --tile-line:#DDE3F0; --tile-hover-bg:#F1F5FC; --feature-a:#EEF2FB; --feature-b:#E1E8F7; --box-bg:#F0EEE6; /* footer/legal box */ --box-line:#DED9CB; --row-even:#F6F8FC; /* zebra rows */ --row-hover:#EEF3FF; --shadow:20,25,60; /* rgb triplet for rgba() shadows */ } /* ---------- base ---------- */ body.theme-c3{background:var(--page);color:var(--ink)} body.theme-c3 .bgyellow{background:var(--page) !important} body.theme-c3 a:not(.btn){color:var(--link)} body.theme-c3 h1,body.theme-c3 .page-h1{color:var(--h1)} /* ---------- black logo banner + pill nav (chrome) ---------- */ body.theme-c3 .topbar{background:var(--topbar-bg);display:flex;align-items:center; justify-content:center;gap:1.2rem;padding:.9rem 1rem;flex-wrap:nowrap} body.theme-c3 .topbar .flag{height:clamp(42px,9vw,92px);width:auto;flex:0 0 auto} body.theme-c3 .topbar picture,body.theme-c3 .topbar .logo{max-width:min(540px,56vw)} body.theme-c3 .topbar .logo{width:100%;height:auto;display:block} body.theme-c3 .topnav{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center; padding:.9rem 1rem .2rem;margin:0 auto;max-width:1080px} body.theme-c3 .topnav a{background:var(--tile-bg);border:1px solid var(--tile-line); color:var(--link);font-weight:650;text-decoration:none;padding:.4rem 1rem; font-size:.85rem;border-radius:999px;box-shadow:0 1px 2px rgba(var(--shadow),.06); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease} body.theme-c3 .topnav a:hover{border-color:var(--accent); box-shadow:0 4px 10px rgba(var(--shadow),.13);transform:translateY(-1px)} body.theme-c3 .topnav a.ext::after{content:" \2197";font-weight:400;opacity:.65} /* ---------- page + section headings ---------- */ body.theme-c3 .page-h1{font-weight:800;letter-spacing:-.012em;line-height:1.15} body.theme-c3 .page-h1::after{content:"";display:block;width:64px;height:4px; border-radius:2px;margin:.55rem auto 0; background:linear-gradient(90deg,var(--brand),var(--accent))} body.theme-c3 .sec-h2{color:var(--brand-2)} body.theme-c3 .sec-h2::after{content:"";display:block;width:44px;height:3px; border-radius:2px;margin:.4rem auto .2rem;background:var(--brand)} /* left-aligned headings get a left-aligned rule (centred ones stay centred) */ body.theme-c3 .sec-h2:not(.text-center)::after{margin-left:0;margin-right:auto} /* ---------- modern data tables (registry look) ---------- */ body.theme-c3 section[id$="_Options"] .table-responsive, body.theme-c3 .datatable .table-responsive{ border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(var(--shadow),.08); background:#fff;border:1px solid var(--line)} body.theme-c3 section[id$="_Options"] table, body.theme-c3 .datatable table{margin-bottom:0} body.theme-c3 section[id$="_Options"] thead th, body.theme-c3 .datatable thead th{ background:var(--brand-2);color:#fff !important;border-color:var(--brand-2); text-transform:uppercase;font-size:.78rem;letter-spacing:.03em; padding:.55rem .5rem;white-space:nowrap;vertical-align:middle} body.theme-c3 section[id$="_Options"] tbody tr:nth-child(even), body.theme-c3 .datatable tbody tr:nth-child(even){background:var(--row-even)} body.theme-c3 section[id$="_Options"] tbody tr:hover, body.theme-c3 .datatable tbody tr:hover{background:var(--row-hover)} body.theme-c3 section[id$="_Options"] td, body.theme-c3 .datatable td{vertical-align:middle} body.theme-c3 section[id$="_Options"] h2{scroll-margin-top:12px} body.theme-c3 section[id$="_Options"]{scroll-margin-top:64px} /* ---------- sticky year-jump bar ---------- */ body.theme-c3 .yrbar{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.94); backdrop-filter:blur(6px);border-top:1px solid var(--line); border-bottom:1px solid var(--line);margin:0 0 1.2rem;padding:.5rem .3rem} body.theme-c3 .yrbar nav{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto; -webkit-overflow-scrolling:touch;margin:0 auto;max-width:960px; scrollbar-width:none} /* Firefox: geen zichtbare scrollbar */ body.theme-c3 .yrbar nav::-webkit-scrollbar{display:none} /* Chrome/Safari idem */ @media (min-width:992px){ body.theme-c3 .yrbar nav{flex-wrap:wrap;justify-content:center;overflow:visible}} body.theme-c3 .yrbar a.btn{flex:0 0 auto;border-radius:999px;padding:.2rem .7rem; background:var(--tile-bg);border:1px solid var(--tile-line);color:var(--tile-ink); transition:border-color .15s ease,box-shadow .15s ease} body.theme-c3 .yrbar a.btn:hover{border-color:var(--accent);background:var(--tile-hover-bg); color:var(--tile-ink);box-shadow:0 2px 8px rgba(var(--shadow),.13)} /* ---------- pill buttons (footer nav + refcluster) ---------- */ body.theme-c3 .cellbglightblue{background:var(--tile-bg) !important; border:1px solid var(--tile-line) !important;border-radius:999px !important; box-shadow:0 1px 3px rgba(var(--shadow),.06);max-width:190px; transition:background .15s ease,box-shadow .15s ease} body.theme-c3 .cellbglightblue:hover{background:var(--tile-hover-bg) !important; box-shadow:0 2px 8px rgba(var(--shadow),.12)} body.theme-c3 .cellbglightblue a{color:var(--tile-ink) !important} body.theme-c3 a.btn-outline-primary{color:var(--tile-ink);border-color:var(--tile-line); background:var(--tile-bg);border-radius:999px} body.theme-c3 a.btn-outline-primary:hover{color:var(--tile-ink);border-color:var(--accent); background:var(--tile-hover-bg)} /* ---------- gallery cards ---------- */ body.theme-c3 .card-year{color:var(--tile-ink)} /* ---------- modern photo gallery + lightbox ---------- */ body.theme-c3 .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.9rem;margin:1rem 0} body.theme-c3 .gcard{display:block;text-decoration:none;background:var(--tile-bg); border:1px solid var(--tile-line);border-radius:10px;overflow:hidden; box-shadow:0 1px 2px rgba(var(--shadow),.06); transition:box-shadow .16s ease,transform .16s ease} body.theme-c3 .gcard:hover,body.theme-c3 .gcard:focus-visible{ box-shadow:0 7px 20px rgba(var(--shadow),.15);transform:translateY(-3px);outline:none} body.theme-c3 .gcard--zoom{cursor:pointer} body.theme-c3 .gcard--plain{border-bottom:3px solid var(--brand)} body.theme-c3 .gcard__imgwrap{aspect-ratio:4/3;background:var(--box-bg);overflow:hidden;display:flex} body.theme-c3 .gcard__imgwrap img{width:100%;height:100%;object-fit:cover;display:block} body.theme-c3 .gcard__name{padding:.5rem .45rem;text-align:center;font-weight:700; color:var(--brand-2);font-size:.9rem;line-height:1.2;border-top:3px solid var(--brand)} body.theme-c3 .lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center; justify-content:center;background:rgba(10,10,10,.9);padding:3vmin} body.theme-c3 .lb.open{display:flex} body.theme-c3 .lb__img{max-width:95vw;max-height:84vh;border:5px solid #fff;border-radius:4px; box-shadow:0 12px 48px rgba(0,0,0,.6);background:#fff} body.theme-c3 .lb__cap{position:absolute;bottom:3.2vmin;left:0;right:0;text-align:center; color:#fff;font-weight:700;font-size:1.05rem;text-shadow:0 1px 3px rgba(0,0,0,.8);padding:0 4vmin} body.theme-c3 .lb__close{position:absolute;top:2.2vmin;right:3vmin;width:2.6rem;height:2.6rem; border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem; line-height:1;cursor:pointer} body.theme-c3 .lb__close:hover{background:rgba(255,255,255,.25)} @media (prefers-reduced-motion:reduce){ body.theme-c3 .gcard{transition:none}body.theme-c3 .gcard:hover{transform:none}} /* ---------- ad slots: reserve space so load/collapse doesn't shift layout (CLS) ---------- Reserve on the ins AND its parent: an unfilled AdSense unit gets display:none, so height held only on the ins would still collapse. The parent keeps the space. Scoped to .adbox on purpose: Auto ads (anchor, side rails) inject their own ins.adsbygoogle into containers they position themselves. Our rules have no business touching those. */ .adbox ins.adsbygoogle{display:block;min-height:100px} .adbox:has(> ins.adsbygoogle){min-height:100px} /* Side rails (Auto ads) need free space beside the content column to sit in. The home page has it: .wrap caps at 1080px. Bootstrap's .container grows to 1140px and then 1320px on wide screens, which left Google too little room and it dropped a rail on top of the text instead. Cap the inner pages at the same 1080px, but only from 1200px up, so nothing below that breakpoint changes. Shorter lines read better anyway. */ @media (min-width:1200px){ .container{max-width:1080px} } /* Per-position containers. Heights are the smallest the format normally renders at, so a filled unit never pushes content down and an unfilled one leaves a small gap instead of a big hole. NOTE: none of this is scoped to body.theme-c3, on purpose. The home page does not carry that class, and without these rules its units render full bleed and off centre. */ .adbox{margin:1.7rem auto;padding:0 1.1rem;max-width:min(970px,100%); clear:both;overflow:hidden;text-align:center} .adbox ins.adsbygoogle{margin:0 auto} .adbox-top,.adbox-band{min-height:100px} .adbox-mid,.adbox-end{min-height:250px} .adbox-feed{min-height:200px} .adbox-mpx{min-height:300px} /* In-feed sitting in the year-card grid. An in-feed unit renders far shorter than a photo card, so left bare it reads as a hole in the row. Give it the same card shell as its neighbours and centre the ad inside it, and if Google returns nothing, drop the whole cell so the grid closes up instead of showing an empty card. */ .adbox-feedcell{margin:0;padding:.7rem;min-height:180px;height:100%; display:flex;flex-direction:column;justify-content:center;align-items:center; background:var(--tile-bg,#fff);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.12)} .adbox-feedcell ins.adsbygoogle{width:100%} .adbox-feedcell:has(iframe)::before{content:"Advertisement";display:block; font-size:.62rem;letter-spacing:.06em;text-transform:uppercase; color:var(--sub,#5b6070);margin-bottom:.45rem} .adcell:has(ins[data-ad-status="unfilled"]){display:none} /* Same idea for the ordinary positions: once Google has answered and had nothing to serve, the reserved height is only holding open a blank gap, so give it back. Only fires on an actual "unfilled" answer, so the space is still reserved while a unit is in flight and nothing shifts under the reader. */ .adbox:has(> ins[data-ad-status="unfilled"]){min-height:0;margin:0;padding:0} @media (max-width:575px){ .adbox{margin:1.2rem auto;padding:0 .6rem} } /* ---------- back-to-top ---------- */ body.theme-c3 .toTop{position:fixed;right:1rem;bottom:1rem;z-index:30;width:2.9rem; height:2.9rem;border:0;border-radius:50%;background:var(--brand);color:#fff; font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:0;pointer-events:none;transition:opacity .2s} body.theme-c3 .toTop.show{opacity:1;pointer-events:auto} /* ---------- sponsor banner + legal footer ---------- */ body.theme-c3 .sponsor{display:flex;justify-content:center;margin:1.8rem auto .2rem; padding:0 1.1rem} body.theme-c3 .sponsor img{max-width:min(804px,100%);height:auto;border-radius:8px; box-shadow:0 2px 8px rgba(var(--shadow),.14)} body.theme-c3 .legal{margin:2rem auto;max-width:1080px;padding:0 1.1rem} body.theme-c3 .legal .box,body.theme-c3 .alert.alert-secondary{ background:var(--box-bg);border:1px solid var(--box-line);border-radius:8px; color:var(--ink)} @media (prefers-reduced-motion:reduce){ body.theme-c3 .topnav a,body.theme-c3 .yrbar a.btn{transition:none} } /* ---------- deep-link anchor targets ---------- Jump offset only. There used to be a :target outline here to show the owner where a booked placement sits, but the advertiser sees the same red frame when the deep link is shared, which makes it look like the ad is flagged. */ [id^="lnk-"]{scroll-margin-top:5.5rem} /* Route from an overview page's year block to that year's own page. Sits directly under the table, above any banner booked into the section, because the moment the reader finishes the figures is the moment to offer more. Styled as a solid button rather than a text link: at text weight it read as a footnote and was missed. Carries .btn as well so theme's `a:not(.btn)` colour rule leaves it alone, and is scoped here too in case that class is ever dropped. */ .yearmore{margin:.9rem 0 .2rem;text-align:center} body.theme-c3 a.yearmore-btn,a.yearmore-btn{display:inline-block; background:var(--brand);color:#fff;text-decoration:none;font-weight:700; font-size:.95rem;border-radius:999px;padding:.55rem 1.3rem;border:0; box-shadow:0 2px 8px rgba(var(--shadow),.20); transition:filter .18s ease,transform .18s ease,box-shadow .18s ease} body.theme-c3 a.yearmore-btn:hover,a.yearmore-btn:hover{color:#fff; filter:brightness(1.08);transform:translateY(-1px); box-shadow:0 5px 14px rgba(var(--shadow),.28)} body.theme-c3 a.yearmore-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}