Bottom Bracket Finder \u2014 CyclingCeramic<\/title>\r\n\r\n<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');<\/style>\r\n<\/head>\r\n<body style=\"margin:0;background:#ffffff;\">\r\n\r\n\r\n<div class=\"ccbb-wrap\" id=\"ccbb\">\r\n<style>\r\n .ccbb-wrap{\r\n --ccbb-night:#ffffff; \/* fond blanc *\/\r\n --ccbb-night-2:#f5f7fa; \/* panel \u2014 blanc froid *\/\r\n --ccbb-night-3:#eef1f6; \/* card *\/\r\n --ccbb-line:#dde3ec; \/* hairline gris clair *\/\r\n --ccbb-gold:#b08d4d; \/* dor\u00e9 (lisible sur blanc) *\/\r\n --ccbb-gold-soft:#96733a;\r\n --ccbb-ice:#0d1420; \/* texte bleu nuit *\/\r\n --ccbb-steel:#5b6a80; \/* gris m\u00e9tallis\u00e9 *\/\r\n --ccbb-steel-2:#8a97aa;\r\n font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\r\n background:var(--ccbb-night);\r\n color:var(--ccbb-ice);\r\n max-width:1080px;margin:0 auto;padding:48px 28px 40px;\r\n box-sizing:border-box;\r\n }\r\n .ccbb-wrap *,.ccbb-wrap *::before,.ccbb-wrap *::after{box-sizing:border-box;margin:0;padding:0;}\r\n\r\n \/* ---------- header ---------- *\/\r\n .ccbb-kicker{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;\r\n letter-spacing:.28em;text-transform:uppercase;color:var(--ccbb-gold);}\r\n .ccbb-kicker::after{content:\"\";flex:1;height:1px;background:linear-gradient(90deg,var(--ccbb-gold),transparent);opacity:.5;}\r\n .ccbb-title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;margin-top:14px;}\r\n .ccbb-title em{font-style:normal;color:var(--ccbb-gold);}\r\n .ccbb-sub{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ccbb-steel);max-width:640px;}\r\n\r\n \/* ---------- discipline tabs ---------- *\/\r\n .ccbb-tabs{display:flex;gap:8px;margin-top:28px;border-bottom:1px solid var(--ccbb-line);}\r\n .ccbb-tab{appearance:none;background:none;border:none;cursor:pointer;\r\n font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;\r\n color:var(--ccbb-steel-2);padding:12px 18px 14px;position:relative;transition:color .2s;}\r\n .ccbb-tab:hover{color:var(--ccbb-steel);}\r\n .ccbb-tab.is-active{color:var(--ccbb-ice);}\r\n .ccbb-tab.is-active::after{content:\"\";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ccbb-gold);}\r\n .ccbb-tab.is-soon{cursor:default;opacity:.55;}\r\n .ccbb-tab .ccbb-soon{display:inline-block;margin-left:8px;font-size:9px;letter-spacing:.12em;\r\n color:var(--ccbb-gold);border:1px solid var(--ccbb-gold);padding:2px 8px;vertical-align:middle;}\r\n\r\n \/* ---------- step labels ---------- *\/\r\n .ccbb-step{display:flex;align-items:baseline;gap:10px;margin:30px 0 16px;}\r\n .ccbb-step-n{font-size:12px;font-weight:700;color:var(--ccbb-gold);letter-spacing:.1em;}\r\n .ccbb-step-t{font-size:15px;font-weight:600;color:var(--ccbb-ice);}\r\n .ccbb-step-h{font-size:13px;color:var(--ccbb-steel-2);}\r\n\r\n \/* ---------- search ---------- *\/\r\n .ccbb-search{position:relative;max-width:420px;}\r\n .ccbb-search input{width:100%;background:var(--ccbb-night-2);border:1px solid var(--ccbb-line);\r\n padding:12px 16px 12px 42px;font-family:inherit;font-size:14px;color:var(--ccbb-ice);\r\n outline:none;transition:border-color .2s;}\r\n .ccbb-search input:focus{border-color:var(--ccbb-gold);}\r\n .ccbb-search input::placeholder{color:var(--ccbb-steel-2);}\r\n .ccbb-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;\r\n stroke:var(--ccbb-steel-2);fill:none;stroke-width:2;pointer-events:none;}\r\n\r\n \/* ---------- standards grid ---------- *\/\r\n .ccbb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px;margin-top:16px;}\r\n .ccbb-std{appearance:none;text-align:left;cursor:pointer;font-family:inherit;\r\n background:var(--ccbb-night-2);border:1px solid var(--ccbb-line);\r\n padding:14px 16px;color:var(--ccbb-ice);transition:border-color .2s,transform .15s,background .2s;}\r\n .ccbb-std:hover{border-color:var(--ccbb-steel-2);transform:translateY(-1px);}\r\n .ccbb-std.is-active{border-color:var(--ccbb-gold);background:var(--ccbb-night-3);}\r\n .ccbb-std.is-hidden{display:none;}\r\n .ccbb-group{grid-column:1\/-1;display:flex;align-items:center;gap:12px;margin-top:10px;\r\n font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ccbb-steel);}\r\n .ccbb-group:first-child{margin-top:0;}\r\n .ccbb-group::after{content:\"\";flex:1;height:1px;background:var(--ccbb-line);}\r\n .ccbb-group.is-hidden{display:none;}\r\n .ccbb-std-name{font-size:15px;font-weight:700;letter-spacing:-.01em;}\r\n .ccbb-std.is-active .ccbb-std-name{color:var(--ccbb-gold-soft);}\r\n .ccbb-std-spec{margin-top:5px;font-size:11.5px;color:var(--ccbb-steel);letter-spacing:.02em;}\r\n .ccbb-std-brands{margin-top:7px;font-size:10.5px;line-height:1.45;color:var(--ccbb-steel-2);}\r\n .ccbb-empty{display:none;margin-top:16px;font-size:13.5px;color:var(--ccbb-steel);}\r\n .ccbb-empty.is-visible{display:block;}\r\n .ccbb-empty a{color:var(--ccbb-gold);text-decoration:none;}\r\n\r\n \/* ---------- result panel ---------- *\/\r\n .ccbb-result{display:none;margin-top:8px;}\r\n .ccbb-result.is-visible{display:block;animation:ccbbIn .3s ease;}\r\n @keyframes ccbbIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}\r\n .ccbb-result-head{display:flex;align-items:center;gap:22px;margin-bottom:16px;\r\n background:var(--ccbb-night-2);border:1px solid var(--ccbb-line);padding:16px 20px;}\r\n .ccbb-result-img{width:170px;height:130px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;}\r\n .ccbb-result-img img{max-width:100%;max-height:100%;object-fit:contain;display:block;\r\n filter:drop-shadow(0 6px 14px rgba(13,20,32,.14));}\r\n .ccbb-result-img.is-empty{display:none;}\r\n .ccbb-result-txt{min-width:0;}\r\n .ccbb-result-std{display:block;font-size:20px;font-weight:800;color:var(--ccbb-gold);letter-spacing:-.01em;}\r\n .ccbb-result-spec{display:block;margin-top:4px;font-size:12.5px;color:var(--ccbb-steel);}\r\n @media (max-width:560px){\r\n .ccbb-result-head{gap:14px;padding:12px 14px;}\r\n .ccbb-result-img{width:110px;height:90px;}\r\n }\r\n .ccbb-cranks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;}\r\n .ccbb-crank{background:var(--ccbb-night-3);border:1px solid var(--ccbb-line);\r\n padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;}\r\n .ccbb-crank::before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;\r\n background:linear-gradient(90deg,var(--ccbb-gold),transparent 70%);opacity:.7;}\r\n .ccbb-crank-family{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ccbb-steel);}\r\n .ccbb-crank-name{font-size:15.5px;font-weight:700;margin-top:2px;}\r\n .ccbb-crank-spindle{font-size:11.5px;color:var(--ccbb-steel-2);}\r\n .ccbb-crank-sku{margin-top:10px;font-size:12px;color:var(--ccbb-steel);}\r\n .ccbb-crank-sku b{color:var(--ccbb-ice);font-weight:600;font-variant-numeric:tabular-nums;}\r\n .ccbb-crank a{margin-top:12px;align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.08em;\r\n text-transform:uppercase;color:var(--ccbb-gold);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}\r\n .ccbb-crank a::after{content:\"\u2192\";transition:transform .2s;}\r\n .ccbb-crank a:hover::after{transform:translateX(3px);}\r\n\r\n \/* ---------- MTB placeholder ---------- *\/\r\n .ccbb-mtb{display:none;margin-top:34px;border:1px dashed var(--ccbb-line);\r\n padding:40px 24px;text-align:center;}\r\n .ccbb-mtb.is-visible{display:block;}\r\n .ccbb-mtb h3{font-size:18px;font-weight:700;}\r\n .ccbb-mtb p{margin-top:8px;font-size:13.5px;color:var(--ccbb-steel);}\r\n\r\n \/* ---------- grease strip ---------- *\/\r\n .ccbb-grease{margin-top:44px;}\r\n .ccbb-grease-head{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;\r\n color:var(--ccbb-gold);display:flex;align-items:center;gap:12px;}\r\n .ccbb-grease-head::after{content:\"\";flex:1;height:1px;background:linear-gradient(90deg,var(--ccbb-gold),transparent);opacity:.5;}\r\n .ccbb-grease-sub{margin-top:8px;font-size:13px;color:var(--ccbb-steel);max-width:560px;}\r\n .ccbb-grease-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:16px;}\r\n .ccbb-grease-card{display:flex;align-items:center;gap:14px;background:var(--ccbb-night-2);\r\n border:1px solid var(--ccbb-line);padding:12px 16px;text-decoration:none;\r\n transition:border-color .2s,transform .15s;}\r\n .ccbb-grease-card:hover{border-color:var(--ccbb-gold);transform:translateY(-1px);}\r\n .ccbb-grease-card img{width:52px;height:52px;object-fit:contain;background:#fff;padding:3px;}\r\n .ccbb-grease-name{font-size:13.5px;font-weight:700;color:var(--ccbb-ice);}\r\n .ccbb-grease-use{margin-top:2px;font-size:11px;color:var(--ccbb-steel-2);}\r\n\r\n \/* ---------- reassurance footer ---------- *\/\r\n .ccbb-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;\r\n background:var(--ccbb-line);border:1px solid var(--ccbb-line);overflow:hidden;margin-top:40px;}\r\n .ccbb-foot-item{background:var(--ccbb-night-2);padding:18px 20px;}\r\n .ccbb-foot-item h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ccbb-gold);}\r\n .ccbb-foot-item p{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ccbb-steel);}\r\n .ccbb-foot-item p a{color:var(--ccbb-gold-soft);text-decoration:none;}\r\n\r\n @media (max-width:560px){\r\n .ccbb-wrap{padding:34px 18px 30px;}\r\n .ccbb-tab{padding:10px 12px 12px;font-size:12px;}\r\n }\r\n<\/style>\r\n\r\n <p class=\"ccbb-kicker\">Tech Sheet<\/p>\r\n <h2 class=\"ccbb-title\">Find your <em>Bottom Bracket<\/em><\/h2>\r\n <p class=\"ccbb-sub\">Select your frame standard and crankset \u2014 we tell you exactly which CyclingCeramic bottom bracket fits your bike, with its reference.<\/p>\r\n\r\n <div class=\"ccbb-tabs\" role=\"tablist\" id=\"ccbbTabs\"><\/div>\r\n\r\n <div id=\"ccbbFinder\">\r\n <div class=\"ccbb-step\">\r\n <span class=\"ccbb-step-n\">01<\/span>\r\n <span class=\"ccbb-step-t\">Your frame standard<\/span>\r\n <span class=\"ccbb-step-h\">\u2014 filter by standard or bike brand<\/span>\r\n <\/div>\r\n <div class=\"ccbb-search\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.5\" y2=\"16.5\"\/><\/svg>\r\n <input type=\"text\" id=\"ccbbSearch\" placeholder=\"e.g. T47, BB86, Pinarello, Canyon\u2026\" autocomplete=\"off\">\r\n <\/div>\r\n <div class=\"ccbb-grid\" id=\"ccbbGrid\"><\/div>\r\n <p class=\"ccbb-empty\" id=\"ccbbEmpty\">No match. Not sure about your standard? <a href=\"https:\/\/cyclingceramic.com\/contact-us\/\">Ask us<\/a> \u2014 we answer fast.<\/p>\r\n\r\n <div class=\"ccbb-result\" id=\"ccbbResult\">\r\n <div class=\"ccbb-step\">\r\n <span class=\"ccbb-step-n\">02<\/span>\r\n <span class=\"ccbb-step-t\">Your crankset<\/span>\r\n <\/div>\r\n <div class=\"ccbb-result-head\">\r\n <div class=\"ccbb-result-img\" id=\"ccbbResImg\"><\/div>\r\n <div class=\"ccbb-result-txt\">\r\n <span class=\"ccbb-result-std\" id=\"ccbbResStd\"><\/span>\r\n <span class=\"ccbb-result-spec\" id=\"ccbbResSpec\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ccbb-cranks\" id=\"ccbbCranks\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ccbb-mtb\" id=\"ccbbMtb\">\r\n <h3>MTB range \u2014 coming soon<\/h3>\r\n <p>Our dedicated MTB bottom bracket line is on its way. Meanwhile, <a href=\"https:\/\/cyclingceramic.com\/contact-us\/\" style=\"color:var(--ccbb-gold);text-decoration:none;\">contact us<\/a> for compatibility questions.<\/p>\r\n <\/div>\r\n\r\n <div class=\"ccbb-grease\">\r\n <p class=\"ccbb-grease-head\">Service it right<\/p>\r\n <p class=\"ccbb-grease-sub\">For best performance and longevity, service your bottom bracket with a CyclingCeramic grease:<\/p>\r\n <div class=\"ccbb-grease-row\">\r\n <a class=\"ccbb-grease-card\" href=\"https:\/\/cyclingceramic.com\/shop\/every-day-grease\/\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2023\/09\/CCGREASEROAD-300x300.jpg\" alt=\"All-Round Grease\" loading=\"lazy\">\r\n <span><span class=\"ccbb-grease-name\">All-Round Grease<\/span><br><span class=\"ccbb-grease-use\">Every-day riding<\/span><\/span>\r\n <\/a>\r\n <a class=\"ccbb-grease-card\" href=\"https:\/\/cyclingceramic.com\/shop\/long-life-time-grease\/\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2023\/09\/CCGREASELIFE-scaled-300x300.jpg\" alt=\"Long Life Grease\" loading=\"lazy\">\r\n <span><span class=\"ccbb-grease-name\">Long Life Grease<\/span><br><span class=\"ccbb-grease-use\">Max durability<\/span><\/span>\r\n <\/a>\r\n <a class=\"ccbb-grease-card\" href=\"https:\/\/cyclingceramic.com\/shop\/time-trial-grease\/\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2023\/09\/CCGREASETT-scaled-300x300.jpg\" alt=\"Race Grease\" loading=\"lazy\">\r\n <span><span class=\"ccbb-grease-name\">Race Grease<\/span><br><span class=\"ccbb-grease-use\">Race day speed<\/span><\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ccbb-foot\">\r\n <div class=\"ccbb-foot-item\">\r\n <h4>4-year warranty<\/h4>\r\n <p>Every CyclingCeramic bottom bracket is covered for 4 years.<\/p>\r\n <\/div>\r\n <div class=\"ccbb-foot-item\">\r\n <h4>Grade 3 ceramic<\/h4>\r\n <p>Grade 3 ceramic balls running on hardened steel races.<\/p>\r\n <\/div>\r\n <div class=\"ccbb-foot-item\">\r\n <h4>Keep it fast<\/h4>\r\n <p>Service with a CyclingCeramic grease: <a href=\"https:\/\/cyclingceramic.com\/product-category\/oil-and-grease\/\">All-Round, Long-Life or Race<\/a>.<\/p>\r\n <\/div>\r\n <div class=\"ccbb-foot-item\">\r\n <h4>Install & service<\/h4>\r\n <p><a href=\"https:\/\/cyclingceramic.com\/support\/bracket-for-bottom-brackets-cyclingceramic\/\">Video guides<\/a> for installation and maintenance. BB90 bearings for Shimano also available.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function(){\r\n \"use strict\";\r\n\r\n \/* ---------- CRANK INTERFACES ---------- *\/\r\n var CRANKS = [\r\n {key:\"shimano\", family:\"Shimano\", name:\"Hollowtech II\", spindle:\"24 mm spindle\"},\r\n {key:\"campa\", family:\"Campagnolo\", name:\"Ultra-Torque\", spindle:\"25 mm spindle\"},\r\n {key:\"sram\", family:\"SRAM\", name:\"DUB\", spindle:\"29 mm spindle\"},\r\n {key:\"mm30\", family:\"30 mm\", name:\"30 mm spindle\", spindle:\"Rotor, Praxis, FSA\u2026\"}\r\n ];\r\n\r\n \/* ---------- PRODUCT IMAGES ----------\r\n UNE image par bo\u00eetier, via le champ img:\"URL\" de chaque standard\r\n ci-dessous (affich\u00e9e en grand dans l'en-t\u00eate du r\u00e9sultat).\r\n -> Colle l'URL m\u00e9diath\u00e8que WP entre les guillemets.\r\n img:\"\" = pas d'image, l'emplacement se masque tout seul. *\/\r\n\r\n \/* ---------- SHOP LINK ----------\r\n Default: BB category. Replace url per item with the exact\r\n product permalink when wiring into the site. *\/\r\n var SHOP = \"https:\/\/cyclingceramic.com\/product-category\/bottom-brackets\/\";\r\n\r\n \/* ---------- DATA per discipline ---------- *\/\r\n var ROAD_GRAVEL = [\r\n {id:\"bsa\", name:\"BSA Thread\", shell:\"68 mm shell \u00b7 threaded\", inner:null, brands:\"Specialized \u00b7 Cannondale \u00b7 Colnago\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2025\/12\/CCBBBSASHIMB-scaled-1.png\",\r\n sku:{shimano:\"320087\", campa:\"320001\", sram:\"321374\", mm30:\"320445\"}},\r\n {id:\"ita\", name:\"ITA Thread\", shell:\"70 mm shell \u00b7 threaded\", inner:null, brands:\"Pinarello\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2020\/02\/ITA-SHIM-2-Modifier.png\",\r\n sku:{shimano:\"320193\", campa:\"320001\", sram:\"321381\", mm30:\"322241\"}},\r\n {id:\"t4768\", name:\"T47-68\", shell:\"68 mm shell \u00b7 threaded\", inner:null, brands:\"Ventum \u00b7 Quintana Roo\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2022\/01\/T47-68-SHIM-1-Modifier.png\",\r\n sku:{shimano:\"321411\", campa:\"320001\", sram:\"324672\", mm30:\"321480\"}},\r\n {id:\"t47865\", name:\"T47-86.5\", shell:\"86.5 mm shell \u00b7 threaded\", inner:null, brands:\"Colnago \u00b7 Trek \u00b7 Standert\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2022\/01\/T47-86.5-SHIM-2-Modifier.png\",\r\n sku:{shimano:\"321428\", campa:\"320001\", sram:\"321459\", mm30:\"321473\"}},\r\n {id:\"t47a\", name:\"T47A\", shell:\"77 mm shell \u00b7 threaded\", inner:null, brands:\"Factor \u00b7 Cerv\u00e9lo\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2022\/01\/T47-A-SHIM-1-Modifier.png\",\r\n sku:{shimano:\"322951\", campa:\"320001\", sram:\"322975\", mm30:\"322982\"}},\r\n {id:\"bb86\", name:\"BB86\", shell:\"86.5 mm shell \u00b7 press-fit\", inner:\"41 mm ID\", brands:\"BMC \u00b7 Canyon \u00b7 Giant \u00b7 Scott \u00b7 Wilier\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2020\/06\/BB86DUB-7-Modifier.png\",\r\n sku:{shimano:\"320131\", campa:\"320001\", sram:\"321336\", mm30:\"322463\"}},\r\n {id:\"pf30\", name:\"PF30\", shell:\"68 mm shell \u00b7 press-fit\", inner:\"46 mm ID\", brands:\"Parlee \u00b7 Ventum\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2020\/06\/T47-BB30-DUB-1-Modifier.png\",\r\n sku:{shimano:\"320346\", campa:\"320001\", sram:\"321343\", mm30:\"320384\"}},\r\n {id:\"bbright\", name:\"BBRight\", shell:\"79 mm shell \u00b7 press-fit\", inner:\"46 mm ID\", brands:\"Cerv\u00e9lo\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2020\/02\/BBRIGHT-4624-SHIM-8-Modifier.png\",\r\n sku:{shimano:\"320247\", campa:\"320001\", sram:\"321398\", mm30:\"320261\"}},\r\n {id:\"bb386\", name:\"BB386EVO\", shell:\"86.5 mm shell \u00b7 press-fit\", inner:\"46 mm ID\", brands:\"CEEPO \u00b7 BH \u00b7 3T \u00b7 Orbea \u00b7 OPEN \u00b7 TIME\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2020\/02\/386EVO-SHIM-8-Modifier.png\",\r\n sku:{shimano:\"320285\", campa:\"320001\", sram:\"321367\", mm30:\"320322\"}},\r\n {id:\"bb30\", name:\"BB30\", shell:\"68 mm shell \u00b7 press-fit\", inner:\"42 mm ID\", brands:\"Specialized \u00b7 Cannondale\",\r\n img:\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2026\/08\/cyclingceramic-bottom-bracket-bb30-dub-black-MY21.png\",\r\n sku:{shimano:\"320407\", campa:\"320056\", sram:\"320421\", mm30:\"321350\"}}\r\n ];\r\n\r\n var CCBB_DATA = {\r\n road: ROAD_GRAVEL, \/* current catalogue covers Road \/ Gravel *\/\r\n gravel: ROAD_GRAVEL, \/* TODO on range split: dedicated dataset *\/\r\n mtb: null \/* TODO on range split: fill + enable tab *\/\r\n };\r\n\r\n var TABS = [\r\n {key:\"road\", label:\"Road \/ Gravel\", available:true},\r\n {key:\"mtb\", label:\"MTB\", available:false}\r\n ];\r\n\r\n \/* ---------- STATE ---------- *\/\r\n var state = {tab:\"road\", std:null, query:\"\"};\r\n\r\n var $ = function(id){return document.getElementById(id);};\r\n var tabsEl=$(\"ccbbTabs\"), gridEl=$(\"ccbbGrid\"), resEl=$(\"ccbbResult\"),\r\n cranksEl=$(\"ccbbCranks\"), resStd=$(\"ccbbResStd\"), resSpec=$(\"ccbbResSpec\"), resImg=$(\"ccbbResImg\"),\r\n searchEl=$(\"ccbbSearch\"), emptyEl=$(\"ccbbEmpty\"),\r\n finderEl=$(\"ccbbFinder\"), mtbEl=$(\"ccbbMtb\");\r\n\r\n \/* ---------- RENDER: tabs ---------- *\/\r\n function renderTabs(){\r\n tabsEl.innerHTML=\"\";\r\n TABS.forEach(function(t){\r\n var b=document.createElement(\"button\");\r\n b.className=\"ccbb-tab\"+(state.tab===t.key?\" is-active\":\"\")+(t.available?\"\":\" is-soon\");\r\n b.setAttribute(\"role\",\"tab\");\r\n b.innerHTML=t.label+(t.available?\"\":' <span class=\"ccbb-soon\">Soon<\/span>');\r\n b.addEventListener(\"click\",function(){\r\n state.tab=t.key; state.std=null;\r\n renderTabs(); renderBody();\r\n });\r\n tabsEl.appendChild(b);\r\n });\r\n }\r\n\r\n \/* ---------- RENDER: body ---------- *\/\r\n function renderBody(){\r\n var data=CCBB_DATA[state.tab];\r\n if(!data){ finderEl.style.display=\"none\"; mtbEl.classList.add(\"is-visible\"); return; }\r\n finderEl.style.display=\"\"; mtbEl.classList.remove(\"is-visible\");\r\n renderGrid(data); renderResult(data);\r\n }\r\n\r\n function renderGrid(data){\r\n gridEl.innerHTML=\"\";\r\n var visible=0, lastGroup=null, groupEls={};\r\n var groupVisible={};\r\n data.forEach(function(s){\r\n var hay=(s.name+\" \"+s.brands+\" \"+s.shell).toLowerCase();\r\n var hit=state.query===\"\" || hay.indexOf(state.query)!==-1;\r\n if(hit) visible++;\r\n var group=s.shell.indexOf(\"press-fit\")!==-1 ? \"Press-fit\" : \"Threaded\";\r\n if(group!==lastGroup){\r\n var g=document.createElement(\"div\");\r\n g.className=\"ccbb-group\";\r\n g.textContent=group;\r\n gridEl.appendChild(g);\r\n groupEls[group]=g;\r\n lastGroup=group;\r\n }\r\n if(hit) groupVisible[group]=true;\r\n var b=document.createElement(\"button\");\r\n b.className=\"ccbb-std\"+(state.std===s.id?\" is-active\":\"\")+(hit?\"\":\" is-hidden\");\r\n b.innerHTML='<span class=\"ccbb-std-name\">'+s.name+'<\/span>'+\r\n '<div class=\"ccbb-std-spec\">'+s.shell+(s.inner?' \u00b7 '+s.inner:'')+'<\/div>'+\r\n '<div class=\"ccbb-std-brands\">'+s.brands+'<\/div>';\r\n b.addEventListener(\"click\",function(){\r\n state.std=(state.std===s.id)?null:s.id;\r\n renderGrid(data); renderResult(data);\r\n if(state.std){ resEl.scrollIntoView({behavior:\"smooth\",block:\"nearest\"}); }\r\n });\r\n gridEl.appendChild(b);\r\n });\r\n Object.keys(groupEls).forEach(function(g){\r\n groupEls[g].classList.toggle(\"is-hidden\",!groupVisible[g]);\r\n });\r\n emptyEl.classList.toggle(\"is-visible\",visible===0);\r\n }\r\n\r\n function renderResult(data){\r\n var s=null;\r\n for(var i=0;i<data.length;i++){ if(data[i].id===state.std){s=data[i];break;} }\r\n if(!s){ resEl.classList.remove(\"is-visible\"); return; }\r\n resStd.textContent=s.name;\r\n resSpec.textContent=s.shell+(s.inner?' \u00b7 '+s.inner:'');\r\n if(s.img){\r\n resImg.innerHTML='<img decoding=\"async\" src=\"'+s.img+'\" alt=\"CyclingCeramic bottom bracket '+s.name+'\" loading=\"lazy\">';\r\n resImg.classList.remove(\"is-empty\");\r\n }else{\r\n resImg.innerHTML=\"\";\r\n resImg.classList.add(\"is-empty\");\r\n }\r\n cranksEl.innerHTML=\"\";\r\n CRANKS.forEach(function(c){\r\n var sku=s.sku[c.key];\r\n if(!sku) return;\r\n var d=document.createElement(\"div\");\r\n d.className=\"ccbb-crank\";\r\n d.innerHTML='<span class=\"ccbb-crank-family\">'+c.family+'<\/span>'+\r\n '<span class=\"ccbb-crank-name\">'+c.name+'<\/span>'+\r\n '<span class=\"ccbb-crank-spindle\">'+c.spindle+'<\/span>'+\r\n '<span class=\"ccbb-crank-sku\">Ref. <b>'+sku+'<\/b><\/span>'+\r\n '<a href=\"'+SHOP+'\">View product<\/a>';\r\n cranksEl.appendChild(d);\r\n });\r\n resEl.classList.add(\"is-visible\");\r\n }\r\n\r\n \/* ---------- SEARCH ---------- *\/\r\n searchEl.addEventListener(\"input\",function(){\r\n state.query=this.value.trim().toLowerCase();\r\n renderGrid(CCBB_DATA[state.tab]||[]);\r\n });\r\n\r\n renderTabs(); renderBody();\r\n})();\r\n<\/script>\r\n<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abe8ca7 elementor-widget elementor-widget-html\" data-id=\"abe8ca7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"cc-info\">\r\n <style>\r\n .cc-info{\r\n --cci-ink:#0d1420; \/* bleu nuit *\/\r\n --cci-panel:#f5f7fa; \/* blanc froid *\/\r\n --cci-panel-2:#eef1f6;\r\n --cci-line:#dde3ec; \/* hairline *\/\r\n --cci-gold:#b08d4d; \/* dor\u00e9 *\/\r\n --cci-steel:#5b6a80; \/* gris m\u00e9tallis\u00e9 *\/\r\n font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;\r\n color:var(--cci-ink);\r\n max-width:980px;\r\n margin:0 auto;\r\n padding:24px 16px 10px;\r\n box-sizing:border-box;\r\n }\r\n .cc-info *,.cc-info *::before,.cc-info *::after{box-sizing:border-box;}\r\n\r\n \/* ---------- bullets : puce carr\u00e9e dor\u00e9e, ton pos\u00e9 ---------- *\/\r\n .cc-bullets{\r\n list-style:none;\r\n padding-left:0;\r\n margin:0;\r\n font-size:17px;\r\n line-height:1.5;\r\n font-weight:600;\r\n letter-spacing:-.005em;\r\n }\r\n .cc-bullets li{\r\n margin:14px 0;\r\n padding-left:24px;\r\n position:relative;\r\n }\r\n .cc-bullets li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:.52em;\r\n width:8px; height:8px;\r\n background:var(--cci-gold);\r\n }\r\n\r\n \/* ---------- QR bullet : texte \u00e0 gauche, QR \u00e0 droite ---------- *\/\r\n .cc-qr-li{list-style-position:outside;}\r\n .cc-qr-row{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:18px;\r\n }\r\n .cc-qr-text{flex:1;min-width:0;}\r\n .cc-qr{\r\n width:110px;height:110px;flex:0 0 auto;\r\n display:flex;align-items:center;justify-content:center;\r\n background:#fff;\r\n border:1px solid var(--cci-line);\r\n padding:6px;\r\n }\r\n .cc-qr img{width:100%;height:100%;object-fit:contain;display:block;}\r\n .cc-ph{\r\n width:110px;height:110px;\r\n border:1px solid var(--cci-line);\r\n background:var(--cci-panel);\r\n color:var(--cci-steel);\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;\r\n }\r\n\r\n \/* ---------- rang\u00e9e produits (graisses) ---------- *\/\r\n .cc-products{\r\n display:grid;\r\n grid-template-columns:repeat(3, minmax(0,1fr));\r\n gap:10px;\r\n margin-top:22px;\r\n padding-bottom:8px;\r\n align-items:stretch;\r\n }\r\n .cc-product{\r\n width:100%;\r\n text-align:center;\r\n min-width:0;\r\n background:var(--cci-panel);\r\n border:1px solid var(--cci-line);\r\n border-top:2px solid var(--cci-gold);\r\n padding:18px 12px 16px;\r\n transition:border-color .2s;\r\n }\r\n .cc-product:hover{border-color:var(--cci-gold);}\r\n .cc-product .cc-product-img{\r\n width:140px;height:140px;\r\n margin:0 auto 12px;\r\n display:flex;align-items:center;justify-content:center;\r\n }\r\n .cc-product .cc-product-img img{\r\n max-width:100%;max-height:100%;object-fit:contain;display:block;\r\n filter:drop-shadow(0 6px 14px rgba(13,20,32,.14));\r\n }\r\n .cc-label{\r\n display:inline-block;\r\n background:none;\r\n color:var(--cci-gold);\r\n font-weight:700;\r\n font-size:11px;\r\n line-height:1.5;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n padding:0;\r\n min-width:0;\r\n }\r\n\r\n \/* ---------- responsive ---------- *\/\r\n @media (max-width:860px){\r\n .cc-bullets{font-size:15.5px;}\r\n .cc-qr{width:96px;height:96px;}\r\n .cc-qr img,.cc-ph{width:96px;height:96px;}\r\n .cc-product .cc-product-img{width:120px;height:120px;}\r\n }\r\n @media (max-width:640px){\r\n .cc-bullets{font-size:14.5px;}\r\n .cc-qr-row{align-items:flex-start;}\r\n .cc-qr{width:84px;height:84px;}\r\n .cc-qr img,.cc-ph{width:84px;height:84px;}\r\n .cc-products{grid-template-columns:repeat(3, minmax(0,1fr));gap:8px;}\r\n .cc-product{padding:14px 8px 12px;}\r\n .cc-product .cc-product-img{width:90px;height:90px;}\r\n .cc-label{font-size:10px;letter-spacing:.12em;}\r\n }\r\n @media (max-width:420px){\r\n .cc-product .cc-product-img{width:76px;height:76px;}\r\n .cc-label{font-size:9.5px;}\r\n }\r\n <\/style>\r\n <ul class=\"cc-bullets\">\r\n <li>All BB are backed by a 4-year warranty<\/li>\r\n <li>For best performance and longevity, always service with one of the three CyclingCeramic Grease options:<\/li>\r\n <\/ul>\r\n <div class=\"cc-products\" aria-label=\"Grease options\">\r\n <div class=\"cc-product\">\r\n <div class=\"cc-product-img\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2025\/12\/ALL-ROUND.png\" alt=\"All-Round Grease\" onerror=\"this.replaceWith(Object.assign(document.createElement('div'),{className:'cc-ph',textContent:'IMG'}));\">\r\n <\/div>\r\n <span class=\"cc-label\">All-Round<br>Grease<\/span>\r\n <\/div>\r\n <div class=\"cc-product\">\r\n <div class=\"cc-product-img\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2025\/12\/LONG-LIFE.png\" alt=\"Long-Life Grease\" onerror=\"this.replaceWith(Object.assign(document.createElement('div'),{className:'cc-ph',textContent:'IMG'}));\">\r\n <\/div>\r\n <span class=\"cc-label\">Long-Life<br>Grease<\/span>\r\n <\/div>\r\n <div class=\"cc-product\">\r\n <div class=\"cc-product-img\">\r\n <img decoding=\"async\" src=\"https:\/\/cyclingceramic.com\/wp-content\/uploads\/2025\/12\/RACE.png\" alt=\"Race Grease\" onerror=\"this.replaceWith(Object.assign(document.createElement('div'),{className:'cc-ph',textContent:'IMG'}));\">\r\n <\/div>\r\n <span class=\"cc-label\">Race<br>Grease<\/span>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"cc-bullets\">\r\n <li>BB90 Bearings for Shimano available.<\/li>\r\n <li>All BB feature unique hardened steel races and Grade 3 ceramic balls<\/li>\r\n <\/ul>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08410f3 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"08410f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/cyclingceramic.com\/support\/bracket-for-bottom-brackets-cyclingceramic\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See installation and maintenance videos on cyclingceramic.com -> SupporT<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-050c43e e-con-full e-flex e-con e-child\" data-id=\"050c43e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5876ad3 elementor-widget elementor-widget-spacer\" data-id=\"5876ad3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tech sheet BB Compatibility Matrix \u2014 Road \/ Gravel Bottom Bracket Finder \u2014 CyclingCeramic Tech Sheet Find your Bottom Bracket […]<\/p>\n","protected":false},"author":76,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"wpai_generated_summary":"","footnotes":""},"class_list":["post-60082","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/pages\/60082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/comments?post=60082"}],"version-history":[{"count":0,"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/pages\/60082\/revisions"}],"wp:attachment":[{"href":"https:\/\/cyclingceramic.com\/fr\/wp-json\/wp\/v2\/media?parent=60082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}