/* =========================================================================== * Online Casinos Africa — design tokens. * * Palette taken from Zulu beadwork: electric blue, mint, hot yellow, orange and * red. Those colours already read as neon; putting them on near-black is the * whole technique, and it gets a modern surface without borrowing anything from * the tourist-poster version of Africa. * * Type is the mint.io pairing — Mattone Bold (Nunzio Mazzaferro / Collletttivo, * SIL OFL) over Manrope. Both free for commercial use. * * Single-world by design: neon does not survive a light background, so there is * no light theme. Every colour is painted explicitly rather than inherited. * ========================================================================= */ @font-face{ font-family:"Mattone"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/Mattone-Bold.otf") format("opentype"); } :root{ /* Ground and type: quiet, because the lion is not. */ --oca-paper:#FFFFFF; --oca-surface:#F5F7FB; --oca-sink:#EDF1F7; --oca-ink:#111111; --oca-muted:#5B6577; --oca-line:#DFE5EF; /* Sampled from the artwork itself, not chosen by eye. Every one of these is fully saturated, because the artwork's are: an earlier, tastefully muted set did not match the mark it sat beside. */ --oca-red:#F00000; --oca-orange:#F06000; --oca-yellow:#F0D800; --oca-blue:#0018F0; --oca-teal:#00A890; --oca-green:#005418; /* Functional roles. Brand colours are for rails, dots and the bead strip; anything carrying text uses a variant dark enough to read on white. Pure yellow is 1.45:1 against white and is illegible at any size. */ --oca-accent:var(--oca-orange); --oca-good:var(--oca-green); /* 9.2:1 */ --oca-warn:#807300; /* 4.8:1 */ --oca-bad:#EB0000; /* 4.6:1 */ --oca-display:"Mattone","Manrope",system-ui,sans-serif; --oca-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Label face. Same family as body text: uppercase and letter-spacing make a label — a third typeface was never carrying meaning, only weight on the page and an extra font request. */ --oca-mono:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /* Hello Elementor's reset does not set this, and its absence is the cause of most "why is this wider than the screen" bugs. */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--oca-paper); color:var(--oca-ink); font-family:var(--oca-body); line-height:1.62; -webkit-font-smoothing:antialiased; background-image: radial-gradient(760px 460px at 80% -10%, rgba(59,91,255,.16), transparent 72%), radial-gradient(600px 380px at 4% 24%, rgba(43,245,176,.08), transparent 72%); background-attachment:fixed; } h1,h2,h3,h4{ font-family:var(--oca-display); font-weight:700; line-height:1.04; letter-spacing:-.025em; text-wrap:balance; color:var(--oca-ink); } h1{font-size:clamp(36px,6vw,68px);} h2{font-size:clamp(25px,4.2vw,40px);} h3{font-size:clamp(19px,2.4vw,24px);} a{color:var(--oca-blue);} a:hover{color:var(--oca-accent);} /* Running text wants a measure. Elementor containers are set in px, so cap the paragraph rather than the container and the setting survives a layout edit. */ .entry-content p,.oca-prose p{max-width:68ch;} /* --- the mark --- */ .oca-lion{display:block;height:auto;} .oca-lion--head{border-radius:0;} /* --- beadwork rule: the five colours, as a section divider --- */ .oca-beads{display:flex;height:4px;width:100%;} .oca-beads::before,.oca-beads::after{content:"";} .oca-beads > i{flex:1;} .oca-beads > i:nth-child(1){background:var(--oca-blue);} .oca-beads > i:nth-child(2){background:var(--oca-green);} .oca-beads > i:nth-child(3){background:var(--oca-yellow);} .oca-beads > i:nth-child(4){background:var(--oca-orange);} .oca-beads > i:nth-child(5){background:var(--oca-red);} /* --- utility classes to apply from Elementor's "CSS Classes" field --- */ .oca-eyebrow{ font-family:var(--oca-mono);font-weight:700;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--oca-good); } .oca-num{font-variant-numeric:tabular-nums;} /* Country cards, driven by a status class so the stripe encodes the law rather than decorating the card. */ .oca-card{ background:var(--oca-surface);border:1px solid var(--oca-line);border-radius:4px; padding:16px;position:relative;overflow:hidden;display:block; text-decoration:none;color:var(--oca-ink); transition:transform .14s,border-color .18s; } .oca-card:hover{transform:translateY(-3px);border-color:var(--oca-muted);color:var(--oca-ink);} .oca-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--oca-warn);} .oca-card.is-licensed::before{background:var(--oca-good);} .oca-card.is-illegal::before{background:var(--oca-bad);} .oca-card.is-state::before{background:var(--oca-orange);} .oca-status{font-family:var(--oca-mono);font-weight:600;font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--oca-warn);} .is-licensed .oca-status{color:var(--oca-good);} .is-illegal .oca-status{color:var(--oca-bad);} .is-state .oca-status{color:var(--oca-orange);} /* Regulatory footer strip. */ .oca-reg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .oca-reg span{ font-family:var(--oca-mono);font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--oca-line);padding:4px 9px;color:var(--oca-muted); } :focus-visible{outline:2px solid var(--oca-accent);outline-offset:3px;} /* --------------------------------------------------------------------------- * Page furniture for the theme's own templates. * * Hello Elementor supplies almost no layout by design, so the templates need * their own measure, rhythm and heading scale. Everything data-shaped — the * comparison rows, tables, FAQ, verdict — is styled by the plugin, so nothing * is duplicated here. * ------------------------------------------------------------------------- */ .oca-page{padding:8px 0 60px;} .oca-wrap{max-width:900px;margin:0 auto;padding:0 22px;} .oca-crumb{font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--oca-muted);padding:18px 0 0;display:flex;gap:8px;flex-wrap:wrap;} .oca-crumb a{color:var(--oca-muted);text-decoration:none;} .oca-crumb a:hover{color:var(--oca-accent);} .oca-page h1{font-size:clamp(26px,4vw,42px);margin:6px 0 0;} .oca-page h2{font-size:clamp(20px,2.8vw,28px);margin:0 0 10px;} .oca-page h3{font-size:clamp(17px,2.1vw,20px);margin:24px 0 10px;} .oca-lede{color:var(--oca-muted);font-size:17px;max-width:64ch;margin:10px 0 0;} .oca-prose p{max-width:68ch;margin:0 0 14px;} /* The legal detail sits below the offers, separated so the change of register is visible rather than implied. */ .oca-deep{border-top:1px solid var(--oca-line);margin-top:30px;padding-top:26px;} .oca-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px;margin:20px 0;} .oca-stats div{background:var(--oca-surface);border:1px solid var(--oca-line); border-radius:6px;padding:13px 15px;} .oca-stats b{display:block;font-family:var(--oca-display);font-size:21px;line-height:1.1; color:var(--oca-ink);} .oca-stats span{font-weight:600;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--oca-muted);display:block;margin-top:5px;} .oca-note{border-left:4px solid var(--oca-warn);background:var(--oca-surface); padding:15px 18px;margin:20px 0;border-radius:0 5px 5px 0;color:var(--oca-muted);} .oca-note b{color:var(--oca-ink);} .oca-src{background:var(--oca-surface);border:1px solid var(--oca-line);border-radius:7px; padding:16px 18px;margin:24px 0;} .oca-src h3{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--oca-blue);margin:0 0 11px;font-family:var(--oca-body);} .oca-src ul{list-style:none;margin:0;padding:0;} .oca-src li{font-size:13.5px;color:var(--oca-muted);} .oca-src a{color:var(--oca-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600;} .oca-src a:hover{color:var(--oca-accent);} .oca-src a::after{content:" \2197";color:var(--oca-accent);font-size:11px;text-decoration:none;} .oca-src p{font-size:14px;color:var(--oca-muted);margin:0;} /* --- homepage --- */ .oca-home .oca-wrap{max-width:1160px;} .oca-hero{padding:26px 0 30px;display:grid;grid-template-columns:1.02fr .98fr; gap:36px;align-items:center;} @media (max-width:900px){.oca-hero{grid-template-columns:1fr;gap:18px;}} .oca-hero h1{font-size:clamp(30px,4.6vw,50px);margin:0;} .oca-hero h1 em{font-style:normal;color:var(--oca-accent);} .oca-hero .oca-yr{font-size:.52em;vertical-align:.32em;color:var(--oca-muted); letter-spacing:-.01em;} .oca-hero .oca-lede{margin-top:16px;max-width:46ch;} .oca-hero__mark{display:flex;justify-content:center;align-items:center;} .oca-hero__mark img{width:100%;max-width:500px;height:auto;} .oca-ruled{border-top:1px solid var(--oca-line);padding-top:34px;margin-top:34px;} .oca-home section{padding:0 0 34px;} /* --------------------------------------------------------------------------- * Header and footer. * ------------------------------------------------------------------------- */ .oca-skip{position:absolute;left:-9999px;top:0;background:var(--oca-ink);color:#fff; padding:10px 16px;z-index:100;} .oca-skip:focus{left:8px;top:8px;} /* The beadwork strip. Segment widths follow how much of each colour is actually in the artwork rather than six equal stripes. */ .oca-beads{display:flex;height:4px;} .oca-beads i:nth-child(1){flex:21;background:var(--oca-blue);} .oca-beads i:nth-child(2){flex:5;background:var(--oca-green);} .oca-beads i:nth-child(3){flex:21;background:var(--oca-yellow);} .oca-beads i:nth-child(4){flex:22;background:var(--oca-orange);} .oca-beads i:nth-child(5){flex:22;background:var(--oca-red);} .oca-beads i:nth-child(6){flex:8;background:var(--oca-teal);} .oca-header{border-bottom:1px solid var(--oca-line);position:sticky;top:0;z-index:40; background:rgba(255,255,255,.94);backdrop-filter:blur(12px);} .oca-header__in{max-width:1160px;margin:0 auto;padding:0 20px;display:flex; align-items:stretch;gap:22px;min-width:0;} .oca-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--oca-ink); flex:0 0 auto;padding:9px 0;} .oca-brand img{width:34px;height:34px;} .oca-brand__wm{font-family:var(--oca-display);font-size:14px;letter-spacing:-.03em; line-height:1.1;text-transform:uppercase;} .oca-brand__wm em{font-style:normal;color:var(--oca-accent);} @media (max-width:1180px){.oca-brand__wm{display:none;}.oca-header__in{gap:14px;}} @media (max-width:760px){ /* Wrapped, every country reachable — but not sticky. Three rows of pills is roughly 160px, and pinning that to the top would hold half a phone screen permanently for navigation somebody uses once. It scrolls away instead. */ .oca-header{position:static;} .oca-header__in{flex-wrap:wrap;gap:0 12px;padding:0 14px;align-items:center;} .oca-brand{padding:8px 0 4px;} .oca-header__in .oca-cnav--bar{flex:1 0 100%;min-width:0;} } @media (max-width:620px){.oca-header__in{padding:0 12px;}} .oca-footer{border-top:1px solid var(--oca-line);margin-top:44px;background:var(--oca-paper);} .oca-footer__in{max-width:1160px;margin:0 auto;padding:34px 20px 30px;} .oca-footer__cols{display:grid;grid-template-columns:1.4fr 1.6fr 1fr;gap:26px 30px; margin-bottom:28px;} @media (max-width:820px){.oca-footer__cols{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.oca-footer__cols{grid-template-columns:1fr;gap:22px;}} .oca-fcol h4{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--oca-ink); margin:0 0 11px;font-weight:700;font-family:var(--oca-body);} .oca-fcol ul{list-style:none;margin:0;padding:0;} .oca-fcol li{margin-bottom:7px;} .oca-fcol a{color:var(--oca-muted);text-decoration:none;font-size:13.5px;} .oca-fcol a:hover{color:var(--oca-accent);} .oca-fcol p{font-size:13.5px;color:var(--oca-muted);max-width:34ch;margin:0;} .oca-fbrand{display:flex;align-items:center;gap:9px;margin-bottom:11px;} .oca-fbrand img{width:32px;height:32px;} .oca-fbrand span{font-family:var(--oca-display);font-size:13.5px;letter-spacing:-.03em; line-height:1.2;color:var(--oca-ink);} .oca-footer__base{border-top:1px solid var(--oca-line);padding-top:18px;font-size:13px; color:var(--oca-muted);} .oca-footer__base p{margin:0;max-width:none;} .oca-reg{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;} .oca-reg span{font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--oca-line);padding:4px 9px;background:var(--oca-surface);} /* --------------------------------------------------------------------------- * Tabs, without JavaScript. * * A radio per market drives which panel shows, through a sibling selector. * Nothing here can be broken by a caching plugin minifying scripts, and it * works with JavaScript disabled — which for a page whose whole job is the * list underneath is worth more than the elegance of a click handler. * ------------------------------------------------------------------------- */ .oca-tabin{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;} .oca-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 14px;} .oca-tab{ font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; background:var(--oca-paper);color:var(--oca-muted); border:1px solid var(--oca-line);border-radius:3px;padding:9px 13px; cursor:pointer;user-select:none;line-height:1; transition:color .14s,border-color .14s; } .oca-tab:hover{border-color:var(--oca-accent);color:var(--oca-accent);} /* Every panel hidden by default; the checked radio reveals its own. */ .oca-panel{display:none;} .oca-tabin:checked + .oca-tabin ~ .oca-tabs .oca-tab, .oca-tabs .oca-tab{} /* Keyboard focus must be visible even though the input itself is not. */ .oca-tabin:focus-visible + .oca-tabin ~ .oca-tabs .oca-tab, .oca-tab:focus-visible{outline:2px solid var(--oca-accent);outline-offset:2px;} @media (max-width:620px){ .oca-tab{font-size:10px;padding:8px 11px;} } /* One pair per market. CSS has no loops, so these are generated — regenerate if the country list ever changes. */ #tab-south-africa:checked ~ .oca-tabs .oca-tab--south-africa{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-south-africa:checked ~ .oca-panel--south-africa{display:block;} #tab-nigeria:checked ~ .oca-tabs .oca-tab--nigeria{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-nigeria:checked ~ .oca-panel--nigeria{display:block;} #tab-kenya:checked ~ .oca-tabs .oca-tab--kenya{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-kenya:checked ~ .oca-panel--kenya{display:block;} #tab-ghana:checked ~ .oca-tabs .oca-tab--ghana{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-ghana:checked ~ .oca-panel--ghana{display:block;} #tab-tanzania:checked ~ .oca-tabs .oca-tab--tanzania{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-tanzania:checked ~ .oca-panel--tanzania{display:block;} #tab-uganda:checked ~ .oca-tabs .oca-tab--uganda{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-uganda:checked ~ .oca-panel--uganda{display:block;} #tab-zambia:checked ~ .oca-tabs .oca-tab--zambia{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-zambia:checked ~ .oca-panel--zambia{display:block;} #tab-zimbabwe:checked ~ .oca-tabs .oca-tab--zimbabwe{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-zimbabwe:checked ~ .oca-panel--zimbabwe{display:block;} #tab-egypt:checked ~ .oca-tabs .oca-tab--egypt{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-egypt:checked ~ .oca-panel--egypt{display:block;} #tab-morocco:checked ~ .oca-tabs .oca-tab--morocco{color:#fff;background:var(--oca-ink);border-color:var(--oca-ink);} #tab-morocco:checked ~ .oca-panel--morocco{display:block;}