/** * Palette layer — shared by every project palette (assets/sass/palettes/.scss). * * Loaded after style.css, then the project palette after it, only when THEME_PALETTE names an * existing palette (chonthieng_palette()); the layout prints . * Every rule is scoped to html[data-palette], so without a palette main.css/style.css are * untouched. Rules read the --palette-* tokens the project file sets; a colour no token covers * yet gets a new token here (and a value in each palette), never an edit to main.css. * * Tokens (role → where it is used) * --palette-accent buttons, badges, highlights, focus borders * --palette-accent-hover hover / active of accent buttons and links, active menu item * --palette-link small text links, language switcher, focus ring * --palette-dark header + footer background, headings * --palette-dark-deep footer accordion drawer (mobile) * --palette-text body text * --palette-black deepest text * --palette-white surfaces * --palette-bg page background (top of the body gradient) * --palette-border-light light borders * --palette-band section bands, hero fades, footer titles, card borders * --palette-border stronger borders */ html[data-palette] { /* Togo / main.css tokens */ --cleon-theme-primary: var(--palette-accent); --cleon-theme-secondary: var(--palette-link); --cleon-common-red: var(--palette-accent); --cleon-common-orange: var(--palette-accent-hover); /* button hover (only used in :hover rules) */ --cleon-common-brown: var(--palette-dark); --cleon-common-black: var(--palette-dark); --cleon-common-black-2: var(--palette-black); --cleon-common-white: var(--palette-white); --cleon-text-body: var(--palette-text); --cleon-gray-1: var(--palette-band); --cleon-gray-2: var(--palette-border-light); /* style.css tokens */ --cleon-home-cta-bg: var(--palette-band); /* colour the home hero / about hero fade into */ --cleon-footer-panel-bg: var(--palette-dark-deep); } /* ------------------------------------------------------------------ * Page + section backgrounds * ------------------------------------------------------------------ */ html[data-palette] body { background: linear-gradient(180deg, var(--palette-bg) 0%, var(--palette-white) 100%); } /* White pages (main.css › body.listing / body.bg-white): the rule above is more specific. */ html[data-palette] body.listing, html[data-palette] body.bg-white { background: #FFFFFF; } html[data-palette] .cleon-header-dark, html[data-palette] .cleon-footer-sec, html[data-palette] .cleon-header-4-sec.is-pinned { background-color: var(--palette-dark); } html[data-palette] .cleon-header-overlay:not(.is-pinned) { background-color: transparent; } html[data-palette] .cleon-home-cta-sec, html[data-palette] body.bg-about .cleon-about-story-sec { background: var(--palette-band); } /* Hero bottom fades: same smootherstep stops as style.css, ending in --palette-band */ html[data-palette] .cleon-home-hero::after { background: linear-gradient( 180deg, color-mix(in srgb, var(--palette-band) 0%, transparent) 0%, color-mix(in srgb, var(--palette-band) 0%, transparent) 72%, color-mix(in srgb, var(--palette-band) 0.9%, transparent) 74.8%, color-mix(in srgb, var(--palette-band) 5.8%, transparent) 77.6%, color-mix(in srgb, var(--palette-band) 16.3%, transparent) 80.4%, color-mix(in srgb, var(--palette-band) 31.7%, transparent) 83.2%, color-mix(in srgb, var(--palette-band) 50%, transparent) 86%, color-mix(in srgb, var(--palette-band) 68.3%, transparent) 88.8%, color-mix(in srgb, var(--palette-band) 83.7%, transparent) 91.6%, color-mix(in srgb, var(--palette-band) 94.2%, transparent) 94.4%, color-mix(in srgb, var(--palette-band) 99.1%, transparent) 97.2%, var(--palette-band) 100% ); } html[data-palette] .cleon-about-hero::after { background: linear-gradient( 180deg, color-mix(in srgb, var(--palette-band) 0%, transparent) 0%, color-mix(in srgb, var(--palette-band) 0%, transparent) 72%, color-mix(in srgb, var(--palette-band) 0.9%, transparent) 74.8%, color-mix(in srgb, var(--palette-band) 5.8%, transparent) 77.6%, color-mix(in srgb, var(--palette-band) 16.3%, transparent) 80.4%, color-mix(in srgb, var(--palette-band) 31.7%, transparent) 83.2%, color-mix(in srgb, var(--palette-band) 50%, transparent) 86%, color-mix(in srgb, var(--palette-band) 68.3%, transparent) 88.8%, color-mix(in srgb, var(--palette-band) 83.7%, transparent) 91.6%, color-mix(in srgb, var(--palette-band) 94.2%, transparent) 94.4%, color-mix(in srgb, var(--palette-band) 99.1%, transparent) 97.2%, var(--palette-band) 100% ), radial-gradient(ellipse 110% 100% at 50% 45%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.2) 100%), linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0.5) 35%, rgba(17, 17, 17, 0.55) 70%, rgba(17, 17, 17, 0.75) 100%); } /* ------------------------------------------------------------------ * Header * ------------------------------------------------------------------ */ /* Togo hard-codes the active top-level item as #edac72 (!important) */ html[data-palette] .cleon-header-menu > nav > ul > li.active > a, html[data-palette] .cleon-header-menu > nav > ul > li.active > a::after { color: var(--palette-accent-hover) !important; } /* ------------------------------------------------------------------ * Footer * ------------------------------------------------------------------ */ html[data-palette] .cleon-footer-2-top-border { border-top-color: color-mix(in srgb, var(--palette-band) 16%, transparent); } /* Language switcher: Togo's #007BFF becomes the link colour */ html[data-palette] .cleon-footer-copyright-currence-content ul li.active, html[data-palette] .cleon-footer-copyright-currence-content ul li:hover { color: var(--palette-link); background-color: color-mix(in srgb, var(--palette-link) 10%, transparent); } html[data-palette] .cleon-footer-copyright-currence-content ul li.active a, html[data-palette] .cleon-footer-copyright-currence-content ul li:hover a { color: var(--palette-link); } /* ------------------------------------------------------------------ * Text links: steel blue (camel is too light for small text) * ------------------------------------------------------------------ */ html[data-palette] .cleon-listing-meta a, html[data-palette] .cleon-listing-facts ul li span i a, html[data-palette] .cleon-listing-contact a, html[data-palette] .cleon-listing-card-level { color: var(--palette-accent); } html[data-palette] .cleon-listing-card-level:hover { color: var(--palette-accent-hover); } html[data-palette] .cleon-listing-references a:hover, html[data-palette] .cleon-heritage-details-text p a:hover, html[data-palette] .cleon-contact-wrapper .contact-form .form-check-label a:hover { color: var(--palette-link); } /* ------------------------------------------------------------------ * Borders: Togo's greys to the palette's * ------------------------------------------------------------------ */ /* Scoped rules outrank the base :hover/:focus ones, so those states are restated here */ html[data-palette] .cleon-contact-wrapper .contact-form .contact-form-input:not([type="checkbox"]), html[data-palette] .cleon-listing-shortcut, html[data-palette] .cleon-map-filter { border-color: var(--palette-band); } html[data-palette] .cleon-contact-wrapper .contact-form .contact-form-input:not([type="checkbox"]):focus { border-color: var(--palette-accent); } html[data-palette] .cleon-contact-wrapper .contact-form .form-check .form-check-input { border-color: var(--palette-border); } html[data-palette] .cleon-contact-wrapper .contact-form .form-check .form-check-input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-link) 30%, transparent); } html[data-palette] .cleon-about-map-item { border-color: var(--palette-accent); } /* Timeline dots + rows keep the accent */ html[data-palette] .cleon-listing-rows, html[data-palette] .cleon-listing-rows li + li { border-color: var(--palette-band); } html[data-palette] .cleon-listing-timeline li:not(:last-child) { border-left-color: var(--palette-border); } /* ------------------------------------------------------------------ * Hover / active: --palette-accent-hover instead of --palette-accent * Buttons and links that turn camel on :hover (and the matching :focus-visible) * or mark the current item (.active). Only rules that match an element in the * prototype pages; input focus borders and focus outlines keep the accent. * Button fills that hover through --cleon-common-orange follow the token above. * ------------------------------------------------------------------ */ /* Colour */ html[data-palette] .cleon-breadcrumb-list ul li a:hover, html[data-palette] .cleon-header-menu > nav > ul > li:hover > a, html[data-palette] .cleon-header-menu > nav > ul > li.cleon-dropdown:hover > a::after, html[data-palette] .cleon-header-style-2 .cleon-header-menu > nav > ul > li.cleon-dropdown:hover > a, html[data-palette] .cleon-header-style-2 .cleon-header-menu > nav > ul > li.cleon-dropdown:hover > a::after, html[data-palette] .cleon-header-menu > nav > ul > li .cleon-submenu li:hover > a, html[data-palette] .cleon-header-menu > nav > ul > li .cleon-submenu li.active > a, html[data-palette] .cleon-header-3-bar .cleon-offcanvas-3-open-btn:hover, html[data-palette] .cleon-header-search-btn:hover, html[data-palette] .cleon-header-search-btn:focus-visible, html[data-palette] .cleon-lang-switcher-btn:hover, html[data-palette] .cleon-lang-switcher-btn:focus-visible, html[data-palette] .cleon-lang-switcher-btn[aria-expanded="true"], html[data-palette] .cleon-lang-switcher-menu a:hover, html[data-palette] .cleon-lang-switcher-menu a:focus-visible, html[data-palette] .cleon-lang-switcher-menu a[aria-current], html[data-palette] .cleon-mobilemenu-content ul li:hover > a, html[data-palette] .cleon-mobilemenu-content ul li:hover > a::after, html[data-palette] .cleon-mobilemenu-content ul li:hover > a .dropdown-toggle-btn i, html[data-palette] .cleon-blog-2-item-title a:hover, html[data-palette] .cleon-heritage-btn:hover, html[data-palette] .cleon-heritage-2-card-title a:hover, html[data-palette] .cleon-heritage-widget-title:hover, html[data-palette] .cleon-contact-widget-add a:hover, html[data-palette] .cleon-footer-widget-info-item a:hover, html[data-palette] .cleon-footer-widget-menu ul li a:hover, html[data-palette] .cleon-footer-widget-social-icon a:hover, html[data-palette] .cleon-footer-main-wrapper.black-style .cleon-footer-widget-info-item a:hover, html[data-palette] .cleon-footer-main-wrapper.black-style .cleon-footer-widget-social-icon a:hover { color: var(--palette-accent-hover); } html[data-palette] .cleon-heritage-filter-btn span:hover { color: var(--palette-accent-hover); border-color: var(--palette-accent-hover); } /* Fill */ html[data-palette] .cleon-pagination nav ul li a.active, html[data-palette] .cleon-pagination nav ul li a:hover, html[data-palette] .cleon-btn-primary.bdr-style-black:hover, html[data-palette] .cleon-heritage-modal-social-icons ul li a span:hover { background-color: var(--palette-accent-hover); } html[data-palette] .cleon-mobilemenu-content ul li.cleon-dropdown > a .dropdown-toggle-btn:hover, html[data-palette] .cleon-heritage-details-top-share span:hover, html[data-palette] .cleon-listing-card-action:hover, html[data-palette] .cleon-listing-card-action:focus-visible, html[data-palette] .cleon-listing-card-action.cleon-listing-shortcut:hover, html[data-palette] .cleon-listing-card-action.cleon-listing-shortcut:focus-visible { background-color: var(--palette-accent-hover); border-color: var(--palette-accent-hover); }