/* * Alano Recovery Resources — scoped stylesheet * Every rule is prefixed with #alano-rr-root so this CSS cannot affect * any element outside the shortcode container. */ /* CSS variables defined LOCALLY on the root so we don't override Kadence */ #alano-rr-root { --rr-brand: #1A4A4A; --rr-brand-mid: #2A6060; --rr-brand-light: #4A9B9B; --rr-accent: #C8882A; --rr-accent-dk: #a06820; --rr-bg: #f8f5f0; --rr-surface: #ffffff; --rr-text: #1A3030; --rr-muted: #5c7a7a; --rr-border: #d8e8e8; --rr-radius: 6px; --rr-radius-lg: 12px; --rr-container: 1280px; --rr-font-h: 'Montserrat', sans-serif; --rr-font-b: 'Inter', sans-serif; font-family: var(--rr-font-b); color: var(--rr-text); background: var(--rr-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } #alano-rr-root *, #alano-rr-root *::before, #alano-rr-root *::after { box-sizing: border-box; } /* Hero */ #alano-rr-root .rr-hero { background: var(--rr-brand); padding: 44px 32px 36px; text-align: center; } #alano-rr-root .rr-eyebrow { font-size: .66rem; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; color: var(--rr-accent); margin-bottom: 12px; } #alano-rr-root .rr-hero h2 { font-family: var(--rr-font-h); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; color: #fff; margin: 0 0 10px; } #alano-rr-root .rr-hero p { font-size: .92rem; color: rgba(255,255,255,.75); max-width: 600px; margin: 0 auto; line-height: 1.8; } #alano-rr-root .rr-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 22px; } #alano-rr-root .rr-stat-num { font-family: var(--rr-font-h); font-size: 2rem; font-weight: 900; color: var(--rr-accent); } #alano-rr-root .rr-stat-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 2px; } /* Tabs */ #alano-rr-root .rr-tabs { background: #fff; border-bottom: 2px solid var(--rr-border); box-shadow: 0 2px 8px rgba(0,0,0,.06); } #alano-rr-root .rr-tabs-inner { max-width: var(--rr-container); margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; } #alano-rr-root .rr-tabs-inner::-webkit-scrollbar { display: none; } #alano-rr-root .rr-tab { flex-shrink: 0; padding: 13px 16px; font-family: var(--rr-font-b); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #888; border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; transition: all .18s; white-space: nowrap; } #alano-rr-root .rr-tab:hover { color: var(--rr-brand); } #alano-rr-root .rr-tab.rr-active { color: var(--rr-brand); border-bottom-color: var(--rr-accent); } /* Body & panels */ #alano-rr-root .rr-body { max-width: var(--rr-container); margin: 0 auto; padding: 36px 20px 80px; } #alano-rr-root .rr-panel { display: none; } #alano-rr-root .rr-panel.rr-active { display: block; } #alano-rr-root .rr-panel-intro h3 { font-family: var(--rr-font-h); font-size: 1.6rem; font-weight: 700; color: var(--rr-brand); margin: 0 0 6px; } #alano-rr-root .rr-panel-intro p { font-size: .88rem; color: var(--rr-muted); line-height: 1.75; max-width: 680px; margin-bottom: 28px; } /* Directory controls (Alano tab) */ #alano-rr-root .rr-dir-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; padding: 14px 18px; background: var(--rr-surface); border-radius: var(--rr-radius); border: 1px solid var(--rr-border); } #alano-rr-root .rr-dsearch { flex: 1; min-width: 180px; padding: 8px 12px; border: 1.5px solid var(--rr-border); border-radius: var(--rr-radius); font-family: var(--rr-font-b); font-size: .86rem; color: var(--rr-text); outline: none; transition: border-color .2s; background: #fff; } #alano-rr-root .rr-dsearch:focus { border-color: var(--rr-brand); } #alano-rr-root .rr-dselect { padding: 8px 12px; border: 1.5px solid var(--rr-border); border-radius: var(--rr-radius); font-family: var(--rr-font-b); font-size: .86rem; color: var(--rr-text); background: var(--rr-bg); outline: none; cursor: pointer; } #alano-rr-root .rr-dcount { font-size: .78rem; color: var(--rr-muted); font-weight: 700; white-space: nowrap; } /* Region groups + club cards (Alano tab) */ #alano-rr-root .rr-state-sec { margin-bottom: 32px; } #alano-rr-root .rr-state-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid rgba(200,136,42,.18); } #alano-rr-root .rr-state-name { font-family: var(--rr-font-h); font-size: 1.15rem; font-weight: 700; color: var(--rr-brand); } #alano-rr-root .rr-state-badge { background: rgba(200,136,42,.14); color: var(--rr-accent); font-size: .68rem; font-weight: 900; letter-spacing: .07em; padding: 3px 8px; border-radius: 20px; } #alano-rr-root .rr-club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; } #alano-rr-root .rr-club-card { background: var(--rr-bg); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 14px 16px; transition: box-shadow .18s, transform .18s; } #alano-rr-root .rr-club-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-2px); } #alano-rr-root .rr-cc-name { font-weight: 700; font-size: .88rem; color: var(--rr-brand); margin-bottom: 4px; line-height: 1.3; } #alano-rr-root .rr-cc-addr { font-size: .78rem; color: var(--rr-muted); margin-bottom: 5px; } #alano-rr-root .rr-cc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } #alano-rr-root .rr-cc-web { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; text-decoration: none; background: var(--rr-brand); color: #fff; transition: background .18s; display: inline-block; } #alano-rr-root .rr-cc-web:hover { background: var(--rr-brand-mid); color: #fff; } #alano-rr-root .rr-cc-ph { font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-decoration: none; background: rgba(200,136,42,.12); color: var(--rr-accent); border: 1px solid rgba(200,136,42,.28); display: inline-block; } #alano-rr-root .rr-cc-ph:hover { color: var(--rr-accent-dk); } /* Country sections + organisation cards (Recovery Clubs etc.) */ #alano-rr-root .rr-country-sec { margin-bottom: 40px; } #alano-rr-root .rr-country-h { font-family: var(--rr-font-h); font-size: 1.3rem; font-weight: 700; color: var(--rr-brand); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--rr-accent); } #alano-rr-root .rr-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } #alano-rr-root .rr-card { background: var(--rr-bg); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 16px 18px; transition: box-shadow .2s; } #alano-rr-root .rr-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); } #alano-rr-root .rr-cname { font-weight: 700; font-size: .9rem; color: var(--rr-brand); margin-bottom: 5px; line-height: 1.3; } #alano-rr-root .rr-caddr { font-size: .78rem; color: var(--rr-muted); margin-bottom: 3px; } #alano-rr-root .rr-cphone { font-size: .78rem; color: var(--rr-text); font-weight: 600; margin-bottom: 3px; } #alano-rr-root .rr-cemail { font-size: .78rem; margin-bottom: 3px; } #alano-rr-root .rr-cemail a { color: var(--rr-brand-light); text-decoration: none; } #alano-rr-root .rr-cdesc { font-size: .78rem; color: #888; font-style: italic; margin-bottom: 7px; line-height: 1.5; } #alano-rr-root .rr-link { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rr-brand); text-decoration: none; border-bottom: 2px solid var(--rr-accent); padding-bottom: 1px; margin-top: 5px; transition: color .18s; } #alano-rr-root .rr-link:hover { color: var(--rr-accent); } /* Note box */ #alano-rr-root .rr-note { background: var(--rr-bg); border: 1px solid var(--rr-border); border-left: 4px solid #7BA05B; border-radius: var(--rr-radius); padding: 14px 18px; margin: 16px 0 24px; font-size: .83rem; color: var(--rr-text); line-height: 1.75; } #alano-rr-root .rr-note strong { color: var(--rr-brand); } #alano-rr-root .rr-note a { color: var(--rr-brand-light); } #alano-rr-root .rr-no-results { text-align: center; padding: 50px 20px; color: var(--rr-muted); } /* === Add Your Club form === */ #alano-rr-root .ayc-flow-box { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 16px 20px; margin-bottom: 28px; } #alano-rr-root .ayc-flow-box h4 { font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-brand); margin: 0 0 12px; } #alano-rr-root .ayc-steps { display: flex; gap: 0; flex-wrap: wrap; } #alano-rr-root .ayc-step { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 160px; padding: 8px 12px; } #alano-rr-root .ayc-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--rr-accent); color: #fff; font-size: .75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } #alano-rr-root .ayc-step-text { font-size: .8rem; color: var(--rr-text); line-height: 1.55; } #alano-rr-root .ayc-step-text strong { display: block; font-weight: 700; color: var(--rr-brand); margin-bottom: 2px; } #alano-rr-root .ayc-arrow { color: var(--rr-muted); font-size: 1.1rem; align-self: center; padding: 0 4px; } #alano-rr-root .ayc-intro { background: var(--rr-bg); border: 1px solid var(--rr-border); border-left: 4px solid var(--rr-accent); border-radius: var(--rr-radius); padding: 14px 18px; margin-bottom: 24px; font-size: .86rem; color: var(--rr-text); line-height: 1.7; } #alano-rr-root .ayc-intro span { color: var(--rr-accent); font-weight: 700; } #alano-rr-root .ayc-form { background: var(--rr-bg); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 26px 30px; max-width: 720px; } #alano-rr-root .ayc-sec-title { font-size: .7rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--rr-brand-light); margin: 24px 0 14px; padding-top: 18px; border-top: 1px solid var(--rr-border); } #alano-rr-root .ayc-sec-title.first { margin-top: 0; padding-top: 0; border-top: none; } #alano-rr-root .ayc-row { margin-bottom: 18px; } #alano-rr-root .ayc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } #alano-rr-root .ayc-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rr-brand); margin-bottom: 5px; } #alano-rr-root .ayc-req { color: var(--rr-accent); margin-left: 2px; } #alano-rr-root .ayc-input, #alano-rr-root .ayc-select, #alano-rr-root .ayc-textarea { width: 100%; padding: 9px 13px; border: 1.5px solid var(--rr-border); border-radius: var(--rr-radius); font-family: var(--rr-font-b); font-size: .86rem; color: var(--rr-text); background: var(--rr-surface); outline: none; transition: border-color .2s; } #alano-rr-root .ayc-input:focus, #alano-rr-root .ayc-select:focus, #alano-rr-root .ayc-textarea:focus { border-color: var(--rr-brand); } #alano-rr-root .ayc-input.err, #alano-rr-root .ayc-select.err, #alano-rr-root .ayc-textarea.err { border-color: #c0392b; } #alano-rr-root .ayc-textarea { resize: vertical; min-height: 96px; line-height: 1.6; } #alano-rr-root .ayc-hint { font-size: .74rem; color: var(--rr-muted); margin-top: 4px; line-height: 1.5; } #alano-rr-root .ayc-errmsg { font-size: .76rem; color: #c0392b; margin-top: 4px; display: none; } #alano-rr-root .ayc-errmsg.show { display: block; } #alano-rr-root .ayc-submit-row { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #alano-rr-root .ayc-btn { background: var(--rr-accent); color: #fff; border: none; border-radius: var(--rr-radius); padding: 12px 34px; font-family: var(--rr-font-b); font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; } #alano-rr-root .ayc-btn:hover { background: var(--rr-accent-dk); } #alano-rr-root .ayc-btn:disabled { background: #ccc; cursor: not-allowed; } #alano-rr-root .ayc-privacy { font-size: .74rem; color: var(--rr-muted); line-height: 1.6; max-width: 380px; } #alano-rr-root .ayc-success { display: none; background: #eef7ee; border: 1px solid #a3d4a3; border-left: 4px solid #4a9b4a; border-radius: var(--rr-radius); padding: 18px 22px; margin-top: 18px; } #alano-rr-root .ayc-success.show { display: block; } #alano-rr-root .ayc-success h4 { font-family: var(--rr-font-h); font-size: 1.05rem; color: #2d7a2d; margin: 0 0 7px; } #alano-rr-root .ayc-success p { font-size: .84rem; color: #3a6e3a; line-height: 1.7; margin: 0; } /* Mobile */ @media (max-width: 700px) { #alano-rr-root .rr-dir-controls { flex-direction: column; } #alano-rr-root .rr-dsearch, #alano-rr-root .rr-dselect { width: 100%; } #alano-rr-root .ayc-row-2 { grid-template-columns: 1fr; } #alano-rr-root .ayc-form { padding: 18px 14px; } #alano-rr-root .rr-stats { gap: 18px; } #alano-rr-root .rr-stat-num { font-size: 1.5rem; } }