/* =============================================================================
ClubsHub - Public pages look & feel
Source of truth: Home page (app 101, page 1).
HOW TO USE
1. Shared Components > Static Application Files > upload this file.
2. Shared Components > User Interface Attributes > CSS > File URLs:
#APP_FILES#clubshub-public#MIN#.css
3. On every PUBLIC page: Page > Appearance > CSS Classes = ch-public
(the global rules below only apply inside .ch-public, so admin pages
are not affected).
4. The component classes (ch-hero, ch-section, ch-pill, ...) can be used
in any static / dynamic content region.
============================================================================= */
/* -----------------------------------------------------------------------------
1. Design tokens
----------------------------------------------------------------------------- */
:root {
/* Brand */
--ch-navy: #102f3b; /* headings, dark text, header bar */
--ch-teal: #07556f; /* secondary brand, gradients */
--ch-green: #127a62; /* PRIMARY - buttons, links, accents */
--ch-green-600: #087c65; /* hover / active states, numbers */
--ch-green-700: #075c50; /* pressed states */
--ch-green-dark: #0f3b2e; /* gradient start */
--ch-green-light: #1fa463; /* gradient end, success */
/* Neutrals */
--ch-ink: #1d2a31; /* body text */
--ch-text: #38515a; /* secondary text, footer */
--ch-muted: #64748b; /* captions, helper text */
--ch-line: #e3e9ed; /* borders, dividers */
--ch-line-green: #d9e9e5; /* borders on mint surfaces */
--ch-surface: #ffffff;
/* Tints */
--ch-mint: #d7f4ec; /* icon tiles */
--ch-mint-50: #effaf7; /* soft panels, hover rows */
--ch-mint-100: #e3f2ec;
--ch-amber-50: #fdf3e2; /* warning / medium priority */
--ch-pink: #d84c6b; /* accent (heart), destructive hints */
/* Gradients */
--ch-grad-hero: linear-gradient(135deg, #0f3b2e 0%, #127a62 70%, #1fa463 100%);
--ch-grad-hero-2: linear-gradient(135deg, #0f3b2e 0%, #127a62 55%, #07556f 100%);
--ch-grad-navy: linear-gradient(135deg, #102f3b, #07556f);
--ch-grad-accent: linear-gradient(90deg, #07556f, #1fa463); /* card top bar */
--ch-grad-mint: linear-gradient(110deg, #effaf7, #f8fcfb);
/* Shape & depth */
--ch-radius-card: 18px;
--ch-radius-ctrl: 12px;
--ch-radius-pill: 999px;
--ch-shadow-card: 0 8px 25px rgba(14, 67, 61, .08);
--ch-shadow-hover:0 18px 34px rgba(16, 47, 59, .12);
--ch-shadow-item: 0 6px 14px rgba(18, 122, 98, .10);
/* Type */
--ch-font: "Segoe UI", Arial, sans-serif;
}
/* -----------------------------------------------------------------------------
2. Page base (public pages only)
----------------------------------------------------------------------------- */
.ch-public {
font-family: var(--ch-font);
color: var(--ch-ink);
/* Universal Theme hooks */
--a-field-input-border-radius: var(--ch-radius-ctrl);
--a-field-input-border-color: var(--ch-line);
--a-field-input-focus-border-color: var(--ch-green);
}
.ch-public .t-Body-title .t-Breadcrumb-label,
.ch-public h1, .ch-public h2, .ch-public h3 {
color: var(--ch-navy);
}
.ch-public a { color: var(--ch-green); }
.ch-public a:hover { color: var(--ch-green-600); }
/* -----------------------------------------------------------------------------
3. Regions as cards
----------------------------------------------------------------------------- */
.ch-public .t-Region:not(.t-Region--noUI),
.ch-public .t-IRR-region,
.ch-public .t-Card .t-Card-wrap {
border: 1px solid var(--ch-line);
border-radius: var(--ch-radius-card);
box-shadow: var(--ch-shadow-card);
overflow: hidden;
}
.ch-public .t-Region-header {
background: var(--ch-surface);
border-bottom: 1px solid var(--ch-line);
}
.ch-public .t-Region-title { color: var(--ch-navy); font-weight: 700; }
/* Optional: green accent bar on top of a card (add class ch-card-accent) */
.ch-card-accent { position: relative; }
.ch-card-accent::before {
content: ""; position: absolute; inset: 0 0 auto; height: 4px;
background: var(--ch-grad-accent);
}
/* -----------------------------------------------------------------------------
4. Buttons
----------------------------------------------------------------------------- */
.ch-public .t-Button--hot,
.ch-btn-primary {
background: var(--ch-green);
border-color: var(--ch-green);
color: #fff;
border-radius: var(--ch-radius-pill);
font-weight: 600;
padding-inline: 1.5rem;
transition: background .18s ease, transform .18s ease;
}
.ch-public .t-Button--hot:hover,
.ch-btn-primary:hover {
background: var(--ch-green-600);
color: #fff;
transform: translateY(-1px);
}
.ch-public .t-Button:not(.t-Button--hot):not(.t-Button--noUI):not(.t-Button--icon),
.ch-btn-secondary {
border-radius: var(--ch-radius-pill);
background: #fff;
border: 1px solid var(--ch-line);
color: var(--ch-navy);
}
.ch-public .t-Button--danger { border-radius: var(--ch-radius-pill); }
/* -----------------------------------------------------------------------------
5. Form fields
----------------------------------------------------------------------------- */
.ch-public .apex-item-text,
.ch-public .apex-item-textarea,
.ch-public .apex-item-select,
.ch-public .apex-item-group--popup-lov,
.ch-public .apex-item-datepicker {
border-radius: var(--ch-radius-ctrl);
}
.ch-public .apex-item-text:focus,
.ch-public .apex-item-textarea:focus,
.ch-public .apex-item-select:focus {
box-shadow: 0 0 0 3px rgba(18, 122, 98, .15);
}
.ch-public .t-Form-label { color: var(--ch-text); font-weight: 600; }
/* Pill radio groups (template option "Display as Pill Button") */
.ch-public .t-Form-fieldContainer--radioButtonGroup .apex-item-radio input:checked + label {
background: var(--ch-green);
border-color: var(--ch-green);
color: #fff;
}
/* -----------------------------------------------------------------------------
6. Interactive / classic reports
----------------------------------------------------------------------------- */
.ch-public .a-IRR-toolbar { padding: 12px 16px; }
.ch-public .a-IRR-search-field,
.ch-public .a-IRR-buttons .a-Button { border-radius: var(--ch-radius-ctrl); }
.ch-public .a-IRR-table th,
.ch-public .t-Report-report th {
background: #f6faf9;
color: var(--ch-green);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
}
.ch-public .a-IRR-table td,
.ch-public .t-Report-report td { vertical-align: middle; }
.ch-public .a-IRR-table tr:hover td,
.ch-public .t-Report-report tr:hover td { background: var(--ch-mint-50); }
/* -----------------------------------------------------------------------------
7. Components (use in static / dynamic content)
----------------------------------------------------------------------------- */
/* Kicker + title (like "UPCOMING EVENTS" sections on home) */
.ch-kicker {
color: var(--ch-green); font-size: 12.5px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
}
.ch-title {
margin: 4px 0 0; color: var(--ch-navy); font-size: 26px;
font-weight: 800; letter-spacing: -.3px;
}
/* Hero banner (dialogs / page tops)
*/
.ch-hero {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; margin-bottom: 4px;
border-radius: 14px; color: #fff;
background: var(--ch-grad-hero);
}
.ch-hero-icon {
flex: 0 0 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .15); font-size: 16px;
}
.ch-hero h2 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; color: #fff; }
.ch-hero p { margin: 0; font-size: .8125rem; opacity: .9; }
/* Section heading with divider
Text
*/
.ch-section {
display: flex; align-items: center; gap: 10px; margin: 8px 0 0;
color: var(--ch-green); font-size: .75rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
}
.ch-section::after { content: ""; flex: 1; height: 1px; background: var(--ch-line); }
.ch-section-icon {
width: 26px; height: 26px; border-radius: 7px; font-size: 13px;
display: flex; align-items: center; justify-content: center;
background: var(--ch-mint); color: var(--ch-green);
}
/* Icon tile (like the Clubs / Universities card icons) */
.ch-icon-tile {
width: 48px; height: 48px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #d5f4eb, #effcf9);
color: var(--ch-green); font-size: 20px;
}
/* Pills / badges */
.ch-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 12px; border-radius: var(--ch-radius-pill);
font-size: 12px; font-weight: 600; white-space: nowrap;
background: var(--ch-mint-100); color: var(--ch-green-600);
}
.ch-pill--amber { background: var(--ch-amber-50); color: #b7791f; }
.ch-pill--gray { background: #edf1f4; color: var(--ch-muted); }
.ch-pill--navy { background: #e8eff2; color: var(--ch-navy); }
.ch-pill--pink { background: #f1e7ec; color: #8d5b6f; }
/* Soft list item (like the category rows on home) */
.ch-list-item {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border: 1px solid var(--ch-line-green); border-radius: 14px; background: #fff;
transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ch-list-item:hover {
border-color: #b9dccf; background: #f3faf7;
transform: translateX(3px); box-shadow: var(--ch-shadow-item);
}
/* Soft info panel (like the card footers on home) */
.ch-panel-soft {
padding: 10px 14px; border-radius: 11px;
background: linear-gradient(100deg, #eaf8f4, #f4fcfa);
color: #54766f; font-size: 12px;
}
/* -----------------------------------------------------------------------------
8. RTL (Arabic)
----------------------------------------------------------------------------- */
/* Arabic letters must not be spaced or uppercased */
[dir="rtl"] .ch-kicker,
[dir="rtl"] .ch-section,
[dir="rtl"] .ch-public .a-IRR-table th,
[dir="rtl"] .ch-public .t-Report-report th {
letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .ch-section { font-size: .875rem; }
[dir="rtl"] .ch-hero { background: linear-gradient(225deg, #0f3b2e 0%, #127a62 70%, #1fa463 100%); }
[dir="rtl"] .ch-list-item:hover { transform: translateX(-3px); }