/* ============================================================================ * fec-edition.css - FreeExtraChips editorial design system * ---------------------------------------------------------------------------- * Site-wide editorial redesign, homepage first. * * SCOPE & SAFETY * Every rule is scoped under the root class ".fecx". It overrides nothing in * fecv2.css and styles nothing until an element carries class="fecx". * index.php (step two) loads this file on the homepage only and adds * class="fecx" to when $isHome. Inner pages keep fecv2.css alone * until they migrate in later steps. * * WHAT THIS COVERS * - Homepage SECTION styling: hero, freshness ticker, the Big Board, * browse-by-type, FXCheck explainer, reviews, live activity, blog, FAQ, * newsletter - plus shared tokens, buttons, chips, tags. * - TOPBAR & FOOTER: restyles the EXISTING .fec-topbar / .fec-footer markup * (Joomla module includes, user dropdown, search trigger) under .fecx - * see the block at the end of this file. That markup is left untouched. * * TRANSITIONAL STATE * Until the section helpers (fec_render_*) are converted, the homepage shows * an editorial frame (topbar / footer / warm background) around section * markup still styled by fecv2.css. That mix is expected during migration. * * TYPOGRAPHY * Headlines use the site's current font (system sans, same as fecv2). The * --serif token is a single switch: point it at a real self-hosted display * face later if the editorial look needs more distinction. * ============================================================================ */ /* ==================================================================== fec-edition.css - editorial design system, scoped under .fecx Append as a new stylesheet; loaded only on pages with class="fecx". ==================================================================== */ /* ---- design tokens ---- */ .fecx{ --bg:#f7f4ed; /* warm off-white paper */ --bg-2:#efeadf; --paper:#fdfbf6; --ink:#14110d; --ink-2:#2a2620; --ink-3:#5a5347; --ink-4:#8a8275; --rule:#d9d2c2; --rule-2:#e7e0d0; --accent:#0b6b62; /* refined teal */ --accent-ink:#074842; --accent-soft:#d9e9e5; --verified:#1c7a4a; --verified-soft:#d6ead8; --warn:#a85a1c; --warn-soft:#f1ddc0; --danger:#9a2828; --danger-soft:#efd9d9; --radius:14px; --radius-sm:8px; --maxw:1280px; /* headlines use the site's current font; --serif kept as a one-line switch */ --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --mono:ui-monospace,"SF Mono","Menlo","Consolas",monospace; } /* ---- base (scoped) ---- */ .fecx,.fecx *{box-sizing:border-box} .fecx{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink); background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; margin:0} .fecx a{color:inherit;text-decoration:none} .fecx button{font:inherit;cursor:pointer} .fecx h1,.fecx h2,.fecx h3,.fecx h4{margin:0} .fecx .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .fecx .wrap--narrow{max-width:900px} .fecx ::selection{background:var(--accent-soft)} /* ---- shared bits ---- */ .fecx .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-ink)} .fecx .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-4); display:inline-block;flex:0 0 auto} .fecx .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 17px; border-radius:999px;font-size:14px;font-weight:500;border:1px solid transparent; transition:transform .05s ease,background .12s ease} .fecx .btn:active{transform:translateY(1px)} .fecx .btn-primary{background:var(--ink);color:var(--bg)} .fecx .btn-primary:hover{background:var(--ink-2)} .fecx .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)} .fecx .btn-ghost:hover{background:var(--bg-2)} .fecx .btn-yes{background:var(--verified);color:var(--bg);border-color:var(--verified);font-weight:600} .fecx .btn-yes:hover{opacity:.92} .fecx .btn-sm{padding:7px 13px;font-size:13px} .fecx .section{padding:60px 0;border-bottom:1px solid var(--rule)} .fecx .section-tight{padding:26px 0} .fecx .sec-head{display:flex;align-items:flex-end;justify-content:space-between; gap:20px;margin-bottom:26px} .fecx .sec-head .left{display:flex;flex-direction:column;gap:9px;min-width:0} .fecx .sec-title{font-family:var(--serif);font-weight:600;font-size:30px; letter-spacing:-.02em;line-height:1.12} .fecx .sec-sub{color:var(--ink-3);font-size:14px;max-width:64ch} .fecx .sec-sub b{color:var(--ink-2);font-weight:600} .fecx .sec-link, .fecx .fec-minirow__link{font-size:13px;color:var(--accent);display:inline-flex; align-items:center;gap:5px;border-bottom:1px dotted var(--accent); padding-bottom:2px;white-space:nowrap} .fecx .sec-link:hover, .fecx .fec-minirow__link:hover{color:var(--accent-ink)} /* ---- topbar ---- */ .fecx .topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule); background:hsl(45 33% 95% / .85);-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)} .fecx .topbar-inner{display:flex;align-items:center;gap:22px;height:62px} .fecx .brand{font-family:var(--serif);font-weight:600;font-size:19px; letter-spacing:-.015em;display:flex;align-items:center;gap:10px} .fecx .brand-mark{width:30px;height:30px;border-radius:8px;flex:0 0 auto; background:var(--ink);color:var(--bg);font-family:var(--serif);font-weight:600; display:grid;place-items:center;font-size:17px} .fecx .brand .tld{color:var(--accent)} .fecx .nav{display:flex;gap:3px;margin-left:6px} .fecx .nav a{font-size:13.5px;color:var(--ink-2);padding:8px 11px;border-radius:999px} .fecx .nav a:hover{background:var(--bg-2);color:var(--ink)} .fecx .nav-spacer{flex:1} .fecx .geo-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px; border-radius:999px;border:1px solid var(--rule);background:var(--paper); font-size:13px;color:var(--ink-2)} .fecx .geo-pill:hover{border-color:var(--ink-4)} .fecx .geo-flag{font-size:14px} .fecx .icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--rule); background:var(--paper);display:grid;place-items:center;color:var(--ink-2)} .fecx .icon-btn:hover{border-color:var(--ink-4)} .fecx .signin{padding:8px 15px;border-radius:999px;border:1px solid var(--ink); background:transparent;font-size:13.5px;font-weight:500;color:var(--ink)} .fecx .signin:hover{background:var(--ink);color:var(--bg)} .fecx .burger{display:none;width:38px;height:38px;border-radius:999px; border:1px solid var(--rule);background:var(--paper);color:var(--ink-2)} /* ---- hero ---- */ .fecx .hero{padding:44px 0;border-bottom:1px solid var(--rule)} .fecx .hero-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:54px;align-items:end} .fecx .dateline{font-family:var(--mono);font-size:11px;color:var(--ink-3); letter-spacing:.03em;display:flex;gap:13px;align-items:center;flex-wrap:wrap} .fecx .dateline b{color:var(--ink)} .fecx .h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,62px); line-height:1.03;letter-spacing:-.025em;margin:18px 0 22px;color:var(--ink)} .fecx .h1 em{font-style:italic;color:var(--accent);font-weight:600} .fecx .hero-sub{font-size:17px;line-height:1.46;color:var(--ink-2); max-width:52ch;margin:0 0 26px} .fecx .hero-btns{display:flex;gap:10px;flex-wrap:wrap} .fecx .hero-stats{display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule);margin-top:30px;padding-top:18px} .fecx .hero-stat{padding-right:14px} .fecx .hero-stat .num{font-family:var(--serif);font-weight:600;font-size:27px; letter-spacing:-.02em} .fecx .hero-stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.07em; text-transform:uppercase;color:var(--ink-3);margin-top:4px} /* hero featured card */ .fecx .featured-card{background:var(--paper);border:1px solid var(--rule); border-radius:var(--radius);padding:22px;position:relative;overflow:hidden; container-type:inline-size} .fecx .featured-card::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 80% at 90% -10%,var(--accent-soft) 0%,transparent 60%)} .fecx .featured-card>*{position:relative} .fecx .featured-stamp{position:absolute;top:18px;right:18px;font-family:var(--mono); font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink); background:var(--accent-soft);padding:5px 9px;border-radius:999px} .fecx .featured-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono); font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:12px} .fecx .featured-title{font-family:var(--serif);font-size:22px;line-height:1.2; letter-spacing:-.01em;font-weight:700;margin:8px 0 4px} .fecx .featured-offer{display:flex;align-items:baseline;gap:12px;margin:18px 0 14px; padding-bottom:14px;border-bottom:1px dashed var(--rule)} .fecx .featured-amount{font-family:var(--serif);font-weight:700;font-size:48px; line-height:1;letter-spacing:-.03em;color:var(--ink)} .fecx .featured-unit{font-size:14px;color:var(--ink-3)} .fecx .featured-cap{font-size:12px;color:var(--ink-3);margin-top:2px} .fecx .featured-cap b{color:var(--ink-2)} .fecx .featured-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-bottom:16px} .fecx .featured-actions{display:flex;gap:10px} /* ---- FX score chip ---- */ .fecx .fx-score{display:inline-flex;align-items:center;gap:8px;padding:5px 9px 5px 7px; border:1px solid var(--rule);border-radius:999px;background:var(--paper); font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap} .fecx .fx-meter{width:36px;height:4px;border-radius:2px;background:var(--rule); position:relative;overflow:hidden;flex:0 0 auto} .fecx .fx-meter>span{position:absolute;inset:0;background:var(--verified); transform-origin:left} .fecx .fx-score.warn .fx-meter>span{background:var(--warn)} .fecx .fx-score.danger .fx-meter>span{background:var(--danger)} /* ---- big board (FEC V2.1 - Claude Design board) ---- */ .fecx .viewtoggle{display:flex;border:1px solid var(--rule);border-radius:999px; padding:3px;background:var(--paper);flex:0 0 auto} .fecx .viewtoggle button{border:none;background:transparent;display:inline-flex; align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px; color:var(--ink-2)} .fecx .viewtoggle button.active{background:var(--ink);color:var(--bg)} .fecx .filterbar{display:flex;flex-wrap:wrap;gap:8px;padding:14px;background:var(--paper); border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:20px; align-items:center} .fecx .fbar-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px; padding:8px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--bg)} .fecx .fbar-search svg{opacity:.5;flex:0 0 auto} .fecx .fbar-search input{border:none;background:transparent;outline:none;font:inherit; color:var(--ink);width:100%} .fecx .fbar-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);margin-left:6px} .fecx .fbar-group{display:flex;gap:8px;flex-wrap:wrap} .fecx .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px; border-radius:999px;background:var(--bg);border:1px solid var(--rule); font-size:13px;color:var(--ink-2);cursor:pointer} .fecx .chip:hover{border-color:var(--ink-4);color:var(--ink)} .fecx .chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)} .fecx .table-wrap{background:var(--paper);border:1px solid var(--rule); border-radius:var(--radius);overflow:hidden} .fecx .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .fecx .bonus-table{width:100%;border-collapse:collapse;font-size:13px;min-width:880px} .fecx .bonus-table thead th{text-align:left;font-family:var(--mono);font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px; background:var(--bg-2);border-bottom:1px solid var(--rule)} .fecx .bonus-table tbody td{padding:14px;border-bottom:1px solid var(--rule-2); vertical-align:middle} .fecx .bonus-table tbody tr:last-child td{border-bottom:none} .fecx .bonus-table tbody tr:hover{background:var(--bg)} .fecx .bt-casino{display:flex;align-items:center;gap:10px;min-width:180px} .fecx .bt-casino>div{min-width:0} .fecx .bt-casino .name,.fecx .bt-casino .sub{max-width:230px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .fecx .bt-casino .name{font-weight:500;font-size:14px;color:var(--ink)} .fecx .bt-casino .sub{font-size:11px;color:var(--ink-3)} .fecx .bt-amount{font-family:var(--serif);font-size:18px;font-weight:700; letter-spacing:-.01em;color:var(--ink);white-space:nowrap} .fecx .bt-amount small{font-family:var(--sans);font-size:11px;color:var(--ink-3); font-weight:400;letter-spacing:0;display:block;margin-top:2px} .fecx .bt-code{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:4px; background:var(--bg);border:1px dashed var(--rule);color:var(--ink); display:inline-flex;align-items:center;gap:6px;cursor:copy} .fecx .bt-code:hover{border-color:var(--accent);color:var(--accent-ink)} .fecx .bt-nocode{font-family:var(--mono);font-size:12px;color:var(--ink-3)} .fecx .bt-wager,.fecx .bt-max{font-family:var(--mono);font-size:13px;color:var(--ink-2)} .fecx .bt-listed{font-family:var(--mono);font-size:11px;color:var(--ink-3); white-space:nowrap} .fecx .bt-actions{text-align:right} .fecx .casino-chip{border-radius:50%;border:1px solid var(--rule-2); display:grid;place-items:center;font-family:var(--sans);font-weight:600;flex-shrink:0} /* card grid - auto-fits 3 / 2 / 1 columns, never overflows its container */ .fecx .bonus-grid{display:none; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px} .fecx .board.is-cards .table-wrap{display:none} .fecx .board.is-cards .bonus-grid{display:grid} .fecx .bonus-card{background:var(--paper);border:1px solid var(--rule); border-radius:var(--radius);padding:18px;display:flex;flex-direction:column; gap:12px;position:relative} .fecx .bonus-card-head{display:flex;align-items:center;gap:10px} .fecx .bonus-card-head>div{flex:1;min-width:0} .fecx .bonus-card-head .fx-score{margin-left:auto} .fecx .bc-name,.fecx .bc-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fecx .bc-name{font-weight:500;font-size:15px} .fecx .bc-sub{font-size:12px;color:var(--ink-3)} .fecx .bc-amount{font-family:var(--serif);font-size:34px;line-height:1;font-weight:700; letter-spacing:-.025em} .fecx .bc-amount small{font-family:var(--sans);font-size:13px;color:var(--ink-3); font-weight:400;letter-spacing:0;margin-left:4px} .fecx .bc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 0; border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)} .fecx .kv{font-family:var(--mono)} .fecx .kv .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3)} .fecx .kv .v{font-size:14px;color:var(--ink);margin-top:3px} .fecx .bc-actions{display:flex;gap:8px;margin-top:auto} /* board state */ .fecx .board-foot{margin-top:18px;display:flex;justify-content:space-between; align-items:center;gap:12px;flex-wrap:wrap} .fecx .board-foot .count{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .fecx .board-foot .count b{color:var(--ink-2)} .fecx .board-empty{display:none;padding:34px;text-align:center;color:var(--ink-3); font-size:14px} .fecx .board.is-empty .board-empty{display:block} .fecx .board.is-empty .table-wrap,.fecx .board.is-empty .bonus-grid{display:none} /* ---- browse by type ---- */ .fecx .type-grid{display:grid;grid-template-columns:repeat(6,1fr); border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper); overflow:hidden} .fecx .type-cell{padding:22px 20px;border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);display:flex;flex-direction:column;gap:7px; position:relative;transition:background .1s ease} .fecx .type-cell:hover{background:var(--bg-2)} .fecx .type-cell:nth-child(6n){border-right:none} .fecx .type-cell:nth-last-child(-n+6){border-bottom:none} .fecx .type-cell .glyph{line-height:0;color:var(--ink)} .fecx .type-cell .glyph svg{width:26px;height:26px;display:block;fill:none; stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fecx .type-cell .name{font-weight:500;font-size:14px} .fecx .type-cell .count{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .fecx .type-cell .arrow{position:absolute;top:14px;right:14px;color:var(--ink-4); transition:transform .15s ease} .fecx .type-cell:hover .arrow{transform:translate(2px,-2px);color:var(--ink)} /* ---- how FXCheck works ---- */ .fecx .fx-explain{display:grid;grid-template-columns:1fr 1.18fr;gap:54px; align-items:start} .fecx .fx-pull{font-family:var(--serif);font-size:31px;line-height:1.16; letter-spacing:-.02em;font-weight:600;margin:0 0 16px} .fecx .fx-pull em{color:var(--accent);font-style:italic} .fecx .fx-lede{color:var(--ink-3);font-size:14px;max-width:44ch;margin:0 0 20px} .fecx .fx-steps{border-left:1px solid var(--rule)} .fecx .fx-step{padding:18px 0 18px 26px;position:relative; border-bottom:1px solid var(--rule-2);counter-increment:fxstep} .fecx .fx-step:last-child{border-bottom:none} .fecx .fx-step::before{content:counter(fxstep,decimal-leading-zero); position:absolute;left:-1px;top:20px;transform:translateX(-50%); width:26px;height:26px;border-radius:50%;background:var(--bg); border:1px solid var(--rule);font-family:var(--mono);font-size:10px; color:var(--accent-ink);display:grid;place-items:center} .fecx .fx-steps{counter-reset:fxstep} .fecx .fx-step h4{font-family:var(--serif);font-size:17px;font-weight:600; letter-spacing:-.01em;margin:0 0 4px} .fecx .fx-step p{margin:0;font-size:13.5px;color:var(--ink-3)} /* ---- reviews ---- */ .fecx .review-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fecx .review-card{background:var(--paper);border:1px solid var(--rule); border-radius:var(--radius);padding:18px} .fecx .review-head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .fecx .review-name{font-weight:500;font-size:14px} .fecx .review-sub{font-size:11px;color:var(--ink-3)} .fecx .score-block{display:flex;align-items:baseline;gap:8px;padding:12px 0; border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2); margin-bottom:12px} .fecx .score-num{font-family:var(--serif);font-size:36px;line-height:1; font-weight:700;letter-spacing:-.02em} .fecx .score-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} .fecx .score-rank{margin-left:auto;font-family:var(--mono);font-size:11px; color:var(--ink-3)} .fecx .review-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; margin-bottom:14px} .fecx .review-actions{display:flex;gap:8px} .fecx .review-actions .btn{flex:1;justify-content:center} /* ---- editorial / blog ---- */ .fecx .blog-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px} .fecx .blog-card{display:flex;flex-direction:column;gap:11px; color:inherit;text-decoration:none} .fecx .blog-thumb{aspect-ratio:16/9;border-radius:var(--radius);position:relative; overflow:hidden;border:1px solid var(--rule); background:linear-gradient(135deg,var(--bg-2),var(--rule))} .fecx .blog-thumb img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .fecx .blog-thumb .stripes{position:absolute;inset:0;opacity:.4; background-image:repeating-linear-gradient(45deg,var(--rule-2) 0 8px,transparent 8px 16px)} .fecx .blog-thumb::after{content:attr(data-label);position:absolute;left:12px; bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3);background:var(--paper); padding:3px 8px;border-radius:6px;border:1px solid var(--rule)} .fecx .blog-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3); letter-spacing:.04em} .fecx .blog-title{font-family:var(--serif);font-size:18px;line-height:1.25; font-weight:700;letter-spacing:-.01em;transition:color .12s ease} .fecx .blog-card.lead .blog-title{font-size:23px} .fecx .blog-card:hover .blog-title{color:var(--accent-ink)} .fecx .blog-excerpt{color:var(--ink-3);font-size:14px;margin:0} /* ---- FAQ ---- */ .fecx .faq-list{border-top:1px solid var(--rule)} .fecx .faq-item{border-bottom:1px solid var(--rule)} .fecx .faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 0;cursor:pointer;list-style:none; font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em; color:var(--ink)} .fecx .faq-q::-webkit-details-marker{display:none} .fecx .faq-q .plus{font-family:var(--sans);font-size:22px;line-height:1; color:var(--ink-3);font-weight:300;flex:0 0 auto;transition:transform .2s ease} .fecx .faq-item[open] .faq-q .plus{transform:rotate(45deg)} .fecx .faq-a{padding:0 0 22px;color:var(--ink-2);font-size:15px; max-width:72ch;line-height:1.55} .fecx .faq-a p{margin:0} /* ---- newsletter — restyles the shared .fec-nl email-capture block ---- */ /* No border-bottom: the dark .fec-nl__inner box (border-radius, contrasted bg) is already a self-contained visual block, and on the bonus-detail page the following .bd-related section provides its own border-top separator. Adding border-bottom here produced a doubled separator (the newsletter function also emits a